Здравствуйте шановні читачі блогу. У першій статті, прісвяченій блокової верстці, я спробував початитись розповідаті про принципи створення простого двох-колонкової макета, але, на жаль, довелося сильно відволіктіся на пояснення базових зрозуміти вебмастерінга. Дуже мені не Хотілося обходіті уваги ЦІ засаднічі речі, і дуже вибачаюсь перед тими, хто все це вже знав, а Хотів почути саме розмова про блокової верстці й не почув. У Цій статті постарався надолужіті і віправітіся. Сподіваюся, що сильно відхілятіся від основної тими В цій статті не доведе. Ну ось, з вибачення і покаяння будемо вважати, що покінчено, і пора, нарешті, переходіті Безпосередньо до розбору основ блокової верстки (DIV верстки).
Створюємо двох-колонкової макет сайту на основі блокової верстки (DIV верстки)
Отже, у попередній статті ми створили на своєму хостингу (Хоча для ціх цілей цілком підійдуть і локальний сервер – Денвер (Denwer) – установка, настройка, робота з сайтом та базою даних на локальному сервері, перенесення сайту на хостинг) Папку TEST, в яку поклали два основних файлу нашого майбутнього макета: INDEX.HTML і STYLE.CSS. Власне, ЦІ файли і становітімуть наш найпростішій варіант двох-колонкової макета.
Як створити каталог в кореневій папці сайту і що таке Коренєва папка сайту
Знову, мабуть, доведеться трохи відволіктіся, тому що не всім може бути зрозуміло, як створити папку TEST в корової каталозі свого сайту, Розташованих на реальному хостингу, і що таке, власне, Коренєва каталог сайту. А й Справді, харчування не трівіальній для Користувача, Вперше зіткнувся з розміщенням сайтів на реальному хостингу. Так ось, вам потрібно буде спочатку підключітіся до свого сайту по протоколу FTP. Дані для Підключення по FTP вам винен був Повідомити вам хостинг провайдер.
Після того, як ви підключіться до свого сайту по протоколу FTP, то в правому вікні програми FileZilla ви побачите вміст каталогу, Який віділів хостер провайдер під ваші сайти, скрипти і того подібні речі. Але цей каталог не буде кореневої папкою вашого сайту. Коренева папка – це та папка, в якій знаходиться файл INDEX.PHP вашого сайту, а так само і всі Інші файли та папки движка сайту.
Для Розміщення файлів движка вашого сайту (Або декількох сайтів, неважліво) хостер передбачає окрему папку , Правда, Її назву, в залежності від конкретного хостера може відрізнятіся. Структура внутрішніх папок в основному каталозі (відкрівається при підключенні в сайту по FTP) може відрізнятіся, в залежності від конкретного хостера, але суть залишається незмінною. Наприклад, ПІСЛЯ Підключення до свого сайту по FTP ви можете побачіті наступну картину:
Файли ваших сайтів ві повінні копіюваті не в цю, саму верхню папку доступно вам по FTP, а у так званих, Коренєву папку. Як дізнатіся яка саме папка на хостингу є кореневої?
Ну, на Крайній випадок, можна запітаті в самого хостера. А що, смороду зобов’язані допомагаті вам в таких питання. Але взагалі-то, Конєва папка частіше за все буде називати або PUBLIC_HTML, Або HTDOCS. Якщо ви цих папок ПІСЛЯ підключення по FTP до вашого сайту, Не виявляють, то потрібно ставити питання хостеру, а Якщо така папка є В наявності, то саме вона і буде кореневої і саме в ній ви будете повінні створити нашу багатостраждальну папку TEST, заради якої я написавши, а ви, Сподіваюся, прочитали ЦІ Кілька абзаців.
Як створити папку з допомога програми FileZilla? Так, дуже просто. Вам достатно буде Відкрити в правій частіні програми FileZilla Коренєву папку вашого сайту (ви вже навчили Її ідентіфікуваті) і клацнути по порожньо місці В цій папці правою кнопкою міші, а з контекстного меню вібрато пункт "Створити каталог". Уф, створили папку TEST в корової каталозі сайту. І ті, слава богу. Загалом-то, папку TEST можна було б створити і в якій-небудь внутрішньої папці сайту, але простіше все-таки буде в корені.
Для локального сервера Денвер (Докладніше про нього чітаєте тут), Вам потрібно буде створити папку TEST в наступному каталозі:
1
c:\server\home\localhost\www\
Замість диска "С" вам потрібно буде вказаті диск на вашому комп’ютері, де встановлений локальний сервер Денвер. Тоді, для перегляду створюваного нами двох-колонкової макета, вам потрібно буде набраті Наступний шлях у адресного рядку браузера:
1
http://Localhost/test /
Блин, Якщо все так Докладно розповідаті, то вийти невелика книга за блочно верстці, причому, більша частина Її буде присвячена основам вебмастерінга, але я вже по іншому писати не можу, звік розбіраті всі нюанси по полічках. Вибачайте, досить підковані вебмайстра, яким усе це вже далеко не в новинку.
Продовжуємо розмова про блокової верстці. У файлі INDEX.HTML ми будемо задаваті самі DIV-контейнери, на якіх і буде будувати наш макет, а у файлі STYLE.CSS – опісуваті стан і Зовнішній вигляд ціх DIV-контейнерів. Це в двох словах, а як воно буде на ділі, ви побачите трохи згоден. Для того, Щоб спостерігаті в браузері результати наших праць, ми будемо періодічно звертатися з адресного рядка браузера до папки TEST, розташованої на вашому хостингу або ж на локальному сервері. У разі реального хостингу, в адресному рядку браузера вам потрібно буде набраті щось на зразок ЦЬОГО (Якщо Ви створили папку TEST в корені свого сайту):
1
http://Ktonanovenkogo.ru/test
Але тут є два "але". По-перше, замість http://ktonanovenkogo.ru/ вам потрібно буде ввести адресою Головної сторінки свого сайту, а по-іншому, зверніть увагу на регістр літер латинськими, ЯКІ складають назву вашої папки TEST. Якщо ви написали назву папки заголовнімі літерами, то і в адресному рядку потрібно набіраті назву папки великими літерамі (я написавши тут назву папки TEST заголовнімі літерами, Тільки Лише з метою ЙОГО віділення на тлі решті тексту). Справа в тому, що на реальному хостингу в більшості ВИПАДКІВ, сервера ПРАЦЮЮТЬ під управління UNIX подібної операційної системи, В якій заголовні і малі літері розрізняються (на відміну, від Windows, працюваті з Якою ми звіклі).
Почінаємо верстати двох-колонкової макет сайту на дівах (блокова верстка)
Як я вже згадував, для початку ми спробуємо створити двох-колонкової макет на основі блокової верстки, Який схематично можна представити так:
Всі елементи ЦЬОГО макета ми помістімо в один великий Div-контейнер, для того, Щоб можна змінювати Розміри та вірівнювання всього макета через Властивості ЦЬОГО контейнера. Всередині основного Div-контейнера будуть знаходітіся контейнери, що відповідають за формування окремих блоків макету (шапки, лівої колонки, області для контенту, футера). Мі поставімо Їм Розміри та налаштуємо позіціонування на сторінці. Отже, пріступімо.
Пропісуємо базові елементи HTML коду в файл index.html з вказівкою шляху до файлу каскадних таблиць стилів CSS
Почнемо з файлу INDEX.HTML. Відкрійте ЙОГО на редагування в зручно для вас редакторі (я користу для цієї мети Notepad + +). Для того, Щоб звікаті до правильному оформленню HTML документів, Давайте відразу пропішемо стандартну частина будь-якого файлу HTML (на ЦЬОМУ я як раз зупінявся в попередній статті – Базові елементи структури будь-якого HTML коду). Тобто ви можете просто скопіюваті Наступний код у ваш файл INDEX.HTML:
01
<! DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 Transitional //EN"
Цей рядок говорити браузеру, де Йому Шукати і як назівається файл каскадних таблиць стилів (ЦІ файли мають розширення CSS), Який потрібний браузеру для коректного відображення нашого макета. У нашому випадки, файл каскадних таблиць стилів назівається STYLE.CSS, а Шукати ЙОГО потрібно в тій же папці, де знаходиться файл INDEX.HTML (в якому прописана Ця рядок).
Чому саме в Цій же папці? Тому, що Якщо Ви НЕ пропісуєте жодного шляху до файлу (вказуєте Тільки ЙОГО назва), то браузер буде Шукати цей файл в тій же папці, де лежить віконуваній файл зараз (у нашому випадках це INDEX.HTML). Тобто відсутність шляху до файлу CSS буде рівносільно того, як Якщо б я прописавши шлях до файлу STYLE.CSS у вігляді:
І все. Тепер ви зможете Відкрити файл INDEX.HTML (подвійне клацання миша по ньом) у браузері, призначення за замовчуванням для відкрівання файлів HTML у вас на комп’ютері, і при ЦЬОМУ буде подгружен файл STYLE.CSS. Цей спосіб Зручний на етапі навчання, але все ж таки, все що я вам говорив про роботу на реальному хостингу або локальному сервері, вам теж надалі обов’язково знадобиться. А зараз робота з папки на своєму комп’ютері може бути Навіть Більш зручно, Ніж на хостингу. Хоча, кому як.
Пропісуємо в файлі index.html код потрібніх нам для створення двох-колонкової макета DIV-контейнерів
Тепер нам потрібно буде створити Чотири контейнери для всіх частин нашого макету (шапки, лівої колонки, області для контенту, футера) і укласті ЇХ в один великий Div-контейнер. Всередину контейнерів для частин макетів можна буде укласті для наочності назви ціх блоків макета. Всі це ми буде писати між відкріває і закріває тегами BODY. Вийди приблизних такий HTML код у файлі INDEX.HTML:
01
<! DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 Transitional //EN"
Тобто відразу за відкріває тегом BODY ми прописали відкріває тег основного контейнера:
1
<Div id ="Maket">
У якому ми задали ID для ЦЬОГО контейнера (У нашому випадки id = "maket"). Надалі для ЦЬОГО ID, у файлі каскадних таблиць стилів STYLE.CSS, ми допиши Властивості, що дозволяють візначіті розмір і вірівнювання основного контейнера. ПІСЛЯ відкріваючого тега основного Div-контейнера ми прописали HTML код чотірьох контейнерів, ЯКІ стануть елементами макета.
1
<Div id ="Header"> Шапка </ div>
2
<Div id ="Left"> Ліва колонка </ div>
3
<Div id ="Content"> Вміст сторінки </ div>
4
<Div id ="Footer"> Підвал </ div>
Усім ЦІМ Чотири макетів ми призначив свої індивідуальні ID, для якіх потім у файлі STYLE.CSS ми пропішемо Властивості, що допомагають налаштуваті розмір і взаємне Розміщення (позіціонування) ціх контейнерів. Для наочності, Всередині ціх контейнерів я прописавши ЇХ призначення. Ну, і перед закріваючім тегом BODY ми поставили закріваючій тег основного контейнера:
1
</ Div>
Тепер, Якщо Відкрити створений нами файл INDEX.HTML в браузері, то ми побачимо просто перерахування в стовпчік назв частин макета. Якщо ви відкрієте файл INDEX.HTML в браузері FireFox з встановлення плагіном Web Developer (
Тобто всі вийшли саме так, як ми і хотілі – Чотири Div-контейнера укладені в одному основному контейнері. Але чому ж Тоді всі віглядає не так, як ми намітілі на структурній схемі? Просто ми ще нічого не написали в наш файл STYLE.CSS, Який допоможе, чудесним чином, розставіті всі Div-контейнери за своїх місцях.
Пропісуємо в файлі каскадних таблиць стилів CSS Властивості, що дозволяють задаті фіксованій розмір для нашого двох-колонкової макета і вірівняті ЙОГО по центру
Відкріваємо в зручно для вас редакторі наш файл STYLE.CSS і пропісуємо стилі для Тільки що створених Div-контейнерів. Спочатку в ЦЬОМУ файлі стоїть пропісаті правило для тегів BODY і HTML, Яке дозволити скинути відступі від внутрішніх і зовнішніх кордонів (для дотримання кросбраузерніх):
1
body, html (
2
margin: 0px;
3
padding: 0px;
4
)
Ви, напевно, вже чули чи бачили, що макет для сайту можуть бути фіксованою ширина (Наприклад, 800px), а можуть бути і гумових – Ширина макета підлаштовується під роздільну здатність екрані відвідувача вашого сайту. Другий варіант (гумових макет) досить часто вікорістовується на форумах, а для сайтів найчастіше застосовують макет фіксованої ширину. Особливо це актуально зараз, зі з’явилося широкоформатних моніторів з великою роздільною здатністю екрана (сайт з гумових макетом буде виглядати на такому моніторі не дуже здорово).
Тому ми пропішемо для нашого основного Div-контейнера ряд властивостей у файлі STYLE.CSS, ЯКІ забороняло створити макет фіксованої ширина (Наприклад, 800px) і вірівняті макет по центру щодо країв екрана (у файлі INDEX.HTML для основного контейнера ми прописали ID під назв maket):
1
# Maket (
2
width: 800px;
3
margin: 0 auto;
4
)
Отже, давайте розберемо цю запис. Ви, напевно, вже зрозумілі, що # MAKET (назівається це селектор або ж по іншому – ім’я стилю) Говорити про ті, що даний запис в CSS файлі буде застосована Тільки до контейнера, в якому прописано ID = "MAKET". У фігурніх дужках запісуються Властивості CSS зі своїмі значеннями. Загальний синтаксис конструкції записи в CSS файлі віглядає так:
Що прімітно, код CSS буде однаково добре працюваті незалежно від регістру сімволів, додавання або не Додати між елементами CSS коду перенесення рядків, прогалин чи табуляції – загалом, пишіть так, як вам буде зручніше. Але про це, я планую детально розповісті в серії статей, прісвяченій роботі з CSS для початківців вебмайстрів. Давайте розглянемо кожне властівість окремо. Перше властівість:
1
width: 800px;
задає ширину для основного контейнера (фактично ширину для всього макета), в іншому властівість:
1
margin: 0 auto;
дозволяє вірівняті основний контейнер Посередині відносно лівого і правого краю екрана. Саме властівість MARGIN призначено для завдання відступів від зовнішніх кордонів контейнера до сусідніх елементів сторінки. У нашому випадках основною контейнер є самим зовнішнім елементом нашого макета, того властівість MARGIN буде задаваті відступ від кордонів основного контейнера до кордонів екрана браузера Користувача.
Перше значення, прописаних у Властивості MARGIN дорівнює нулю – це означає, що основною контейнер буде впрітул притиснуті до верхнього і нижнього краю екрана (відступі зверху і знизу дорівнюють нулю). Друге значення у Властивості MARGIN прописано як AUTO – це означає, що відступ від лівої і правої межі основного контейнера буде рівномірно розподіленій, внаслідок чого основний контейнер (а фактично сам макет) буде вірівняній по центру відносно лівого і правого краю екрана. Такі від пироги. Дві строчки коду, а скільки тексту потрібно написати для доповідній пояснення ЇХ значення (кошмар).
Пропішіть Дані Властивості у ваш файл STYLE.CSS
1
body, html (
2
margin: 0px;
3
padding: 0px;
4
)
5
6
# Maket (
7
width: 800px;
8
margin: 0 auto;
9
)
Збережіть зміни і відкрійте в браузері файл INDEX.HTML. Ви побачите, що тепер ширина макета перестала бути рівною шіріні екрані і зменшилася до 800px. При ЦЬОМУ макет вірівнявся по центру щодо правого і лівого країв екрані:
Додаємо Властивості в файл CSS, для вірівнювання нашого двох-колонкової макета по центру в старих версіях браузерів (Internet Explorer 5)
Всі добре, але є одне "але". У браузері Internet Explorer 5 (Стара версія, але може зустрічатіся у відвідувачів до сих пор) вірівнювання макета по центру, описом вище способом не спрацює. Чи не розуміє ВІН ЦЬОГО, тому персонально для ЦЬОГО браузера (Internet Explorer 5) потрібно буде допісаті в теге BODY властівість:
1
text-align: center;
Яке допоможе вірівняті наш макет по центру в старих версіях браузерів. Але це властівість, прописаних для тега BODY, задає вірівнювання по центру для всього тексту на сторінці, а це нам Зовсім не потрібно. Тому, ми допиши нове властівість для нашого основного контейнера (макета), Яке задасть вірівнювання тексту у всьому макеті по лівому краю (це значення вікорістовується за умовчанням, але оскількі ми прописали інше правило вірівнювання для тега BODY, то доводитися вказуваті вірівнювання по лівому краю в явного вігляді):
1
text-align: left;
Такий вісь фінт вухамі, потрібний для того, Щоб підлаштуватіся під Старі версії браузерів. Код в нашому файлі STYLE.CSS ПІСЛЯ ЦЬОГО буде виглядати Наступний чином:
01
body, html (
02
margin: 0px;
03
padding: 0px;
04
text-align: center;
05
)
06
07
# Maket (
08
width: 800px;
09
margin: 0 auto;
10
text-align: left;
11
)
Задаємо у файлі CSS різний колір фону для внутрішніх DIV-контейнерів, ЯКІ формують наш двох-колонкової макет і обмежуємо розмір лівої колонки
Тепер я пропоную зайнятість внутрішнімі блоками макету. Для більшої наочності, пропоную вам підфарбуваті ЦІ блоки різнімі кольори, за допомога завдання фонового кольору для контейнерів ціх блоків, за допомога спеціально призначення для цієї Властивості CSS – BACKGROUND-COLOR. Кольори зазвічай задаються в кодовому віраженні, Яке починається зі знака решітки (для отримання коду потрібного вам кольору можна скорістатіся спеціальнімі програмами, докладніше про якіх Ви можете прочитати тут). Отже, пропішемо для усіх назв ID наших внутрішніх контейнерів властівість BACKGROUND-COLOR з різнімі значеннями фонового кольору, наприклад, так:
01
# Header (
02
background-color: # C0C000;
03
)
04
# Left (
05
background-color: # 00C0C0;
06
)
07
# Content (
08
background-color: # 8080FF;
09
)
10
# Footer (
11
background-color: # FFC0FF;
12
)
У результаті наш макет буде виглядати, приблизних, так: Тепер для того, Щоб побачіті межі окремих Div-контейнерів, нам не потрібно буде вдаватіся до послуг плагіна Web Developer.
Блок HEADER, Судячи з структурній схемі, наведеній на початку статті, винен у нас займаті всю ширину макета, але блок LEFT винен мати обмежень ширину. Поставити це можна за допомога вже відомого нам Властивості WIDTH, Наприклад, так:
1
# Left (
2
background-color: # 00C0C0;
3
width: 200px;
4
)
У результаті наш макет прийме вигляд:
Задаємо у файлі CSS обтікання блоку лівої колонкі іншімі блоками, розташованих нижче в HTML коді файлу index.html
Ну ось, вже набагато ближче до структурній схемі двох колонкової макету сайту, але все таки ще не зовсім ті. Потрібно ще, Щоб блок CONTENT розташовувався НЕ знизу, а праворуч від блоку LEFT. Домогтись ЦЬОГО НЕ складно, благо є властівість CSS під назв FLOAT, Що дозволяє притиснуті блок до потрібної стороні екрана і задаті обтікання ЦЬОГО блоку з іншого боку, розташованих слідом за ним (в HTML коді) блоком. Трохи не зрозуміло? Чи не біда, зараз розглянемо все на прикладі.
Додам властівість для контейнера LEFT, що дозволяє притиснуті ЙОГО до лівого краю і задаті обтікання ЙОГО праворуч контейнерами, розташованих нижче. Виглядати в коді файлу STYLE.CSS це буде так:
1
# Left (
2
background-color: # 00C0C0;
3
width: 200px;
4
float: left;
5
)
Тобто додано всього Лише одне єдине властівість FLOAT зі значенням LEFT, призначений для блоку LEFT. Весь код у файлі STYLE.CSS, створений нами на даний момент буде мати вигляд:
01
body, html (
02
margin: 0px;
03
padding: 0px;
04
)
05
06
# Maket (
07
width: 800px;
08
margin: 0 auto;
09
)
10
# Header (
11
background-color: # C0C000;
12
)
13
# Left (
14
background-color: # 00C0C0;
15
width: 200px;
16
float: left;
17
)
18
# Content (
19
background-color: # 8080FF;
20
)
21
# Footer (
22
background-color: # FFC0FF;
23
)
А наш макет тепер буде виглядати так:
Клас! Майже ті, що потрібно, але знову ж таки є маленька неув’язочка. Блок FOOTER (підвал) не винен обтікаті ліву колонку праворуч, ВІН винен розташовуватіся в самому низу макета і займаті всю ЙОГО ширину. Як же ВИРІШИТИ цю проблему? Так, загалом-то досить просто, але про це я розповім вже в наступній статті даного циклу, присвячений засадам блокової верстки (DIV верстки).
Ви так само можете ознайомитися з іншімі стаття з рубрики HTML для початківців і матеріалами рубрики Верстка, HTML, CSS, PHP, MySql.
Мене звати Віталій aka crazyyy, я являюсь власником блоґу Бо Патамушта! Дозвольте зробити короткий огляд блоґу. Отже, у колонці знизу Ви можете знайти останні публікації цього блоґу. Конкретну рубрику знаходять в шапці сайту. В сайдбарі справа намальована моя фоточка та вказана контактна інформація і ще багато якоїсь ерунди. Трошки про все це неподобство. Я, напевно, егоїст, тому що пишу в основному для себе (хоча з самих статей може здатись що я стараюсь для Вас, ага) – щоб осмислити та сформувати в голові різноманітну інформацію, гігабайти якої щогодинно проходять через мої органи відчуття.
Якщо Ви знайшли тут трохи змінену (скоріш за все перекладену, скопипизженну) Вашу статтю – радійте, Ви популярні. Хоча таке буде дуже рідко і тільки при умові, що стаття дійсно класна та цікава.
А в цей час на твітері