Здрастуйте, шановні читачі блогу . У першій статті, присвяченій блокової верстки, я спробував почати розповідати про її принципах, але, на жаль, довелося сильно відволіктися на пояснення базових понять вебмастеринга.
Дуже мені не хотілося обходити увагою ці засадничі речі, і дуже вибачаюся перед тими, хто все це вже знав, а хотів почути саме розмова про верстці і не почув.
В цій статті спробую надолужити і виправитися. Сподіваюся, що сильно відхилятися від основної теми не доведеться. Ну ось, з вибаченнями і покаяниями будемо вважати, що покінчено, і пора, нарешті, переходити безпосередньо до справи.
Створюємо макет сайту в 2 колонки на основі DIV верстки
Отже, в попередній статті ми створили на своєму хостингу (хоча для цих цілей цілком підійде і локальний сервер Denver тут див. огляд його можливостей) папку TEST, в яку поклали два основних файлу нашого майбутнього макета: Index.html і Style.css. Власне, вони і будуть становити наш найпростіший варіант каркаса.
Знову, мабуть, доведеться трохи відволіктися від безпосередньої верстки, т. к. не всім може бути зрозуміло, як створити папку TEST в кореневому каталозі, розташованого на реальному хостингу. А так само, що це таке — корінь сайту і де його шукати за доступ по ФТП. Адже дійсно, питання не тривіальний для користувача, вперше зіткнувся з хостингом.
Так ось, вам потрібно буде спочатку підключитися по протоколу FTP. Дані для з’єднання з FTP вам повинен був повідомити вам хостинг провайдер (читайте тут про те, що це таке за hosting взагалі, а тут про його купівлю).
Після того, як ви підключитеся по FTP (я користуюся для цієї мети програмою FileZilla — тут про неї вся правда написана, і саме на її прикладі буду все розповідати), то в правому вікні програми ви побачите вміст каталогу, який виділив хостер під ваші сайти, скрипти і тому подібні речі.
Але цей каталог не буде кореневою папкою. Докорінно повинен лежати файл Index.php, а так само і всі інші файли і папки використовуваного вами движка.
Для цієї мети використовується окрема директорія, правда, її назва, залежно від конкретного хостингу, може відрізнятися. Структура внутрішніх папок в основному каталозі (відкривається при підключенні до сайту по FTP) так само може відрізнятися, але суть залишається незмінною.
Наприклад, можете побачити наступну картину:
Файли движка ви повинні копіювати не в цю саму верхню директорію, доступну вам по FTP, а в так звану, кореневу папку. Як дізнатися, яка з присутніх там директорій є кореневою?
Ну, на крайній випадок можна запитати у самого власника хостингу. А що, вони зобов’язані допомагати вам в таких питаннях. Але взагалі-то, вона частіше всього буде називатися або PUBLIC_HTML, або HTDOCS.
Якщо ви таких директорій не виявили, то потрібно ставити запитання власнику хостингу, а якщо щось подібне є в наявності, то це і є горезвісний корінь і саме в ньому ви повинні будете створити нашу багатостраждальну папку TEST, заради якої я написав, а ви, сподіваюся, прочитали ці кілька абзаців.
Як створити каталог з допомогою програми FileZilla? Так, дуже просто. Вам достатньо буде відкрити в правій частині програми коневую директорію і клацнути по пустому місцю правою кнопкою миші, з контекстного меню вибрати пункт «Створити каталог».
Уф, створили папку TEST в коровий каталозі сайту. І на тому спасибі. Загалом-то, можна було з цим і не морочитися. Як так? А ось так. Директорію TEST можна було б створити і в якій-небудь внутрішньої папці вебсайту, але простіше все ж буде в корені.
Для локального сервера Денвер вам потрібно буде створити директорію TEST в наступному каталозі:
c:\server\home\localhost\www\
Замість диска «С» потрібно вказати диск на вашому комп’ютері, де встановлено локальний сервер. Тоді, для перегляду створюваного нами на основі Div верстки макета в 2 колонки, потрібно набрати наступний шлях в адресному рядку браузера:
http://localhost/test/
Блін, якщо все так докладно розповідати, то вийде невелика книга по блокової верстки, причому більша її частина буде присвячена основам вебмастеринга, але я вже по іншому писати не можу, звик розбирати всі нюанси по поличках. Даруйте, досить підковані вебмастера, яким все це вже далеко не в новинку.
Продовжимо розмову про макеті. У файлі Index.html ми будемо задавати самі DIV-контейнери, на яких будуватиметься наш каркас, а у файлі Style.css — описувати стан і зовнішній вигляд цих DIV-контейнерів. Це в двох словах, а як воно буде на ділі, ви побачите трохи згодом.
Для того, щоб спостерігати в браузері результати наших праць, ми будемо періодично звертатися з адресного рядка браузера, папку TEST, розташованої на вашому хостингу або ж на локальному сервері. У разі реального хоста, в адресному рядку браузера вам потрібно буде набрати щось на зразок цього:
https:///test
Але тут є два «але». По-перше, замість https:/// вам потрібно ввести свій Урл, а по-друге, зверніть увагу на регістр латинських літер, що складають назву вашої директорії TEST.
Якщо ви написали назву папки великими літерами, то і в адресному рядку потрібно набирати назву папки великими (я написав тут TEST у верхньому регістрі, лише з метою його виділення на фоні іншого тексту).
Справа в тому, що на реальному хостингу в більшості випадків сервера працюють під управлінням UNIX-подібної операційної системи, в якій великі та малі літери розрізняються (на відміну від Windows, працювати з якою ми звикли).
Починаємо верстати макет сайту в 2 колонки на дивах
Як я вже згадував, для початку ми спробуємо створити макет у дві колонки, який схематично можна представити так:
Всі елементи помістимо в один великий Div контейнер для того, щоб можна змінювати розміри і вирівнювання всього макета через властивості цього контейнера. Всередині основного Div будуть перебувати контейнери, що відповідають за формування окремих блоків (шапки, лівої колонки, області для контенту, футера).
Ми задамо їм розміри і налаштуємо позиціонування на сторінці за допомогою CSS. Отже, приступимо.
Почнемо з Index.html. Відкрийте його на редагування у зручному для вас редакторі (я користуюся для цієї мети кращим з безкоштовних текстових редакторів Нотепад++ — тут його можна завантажити та налаштувати).
Для того, щоб звикати до правильного оформлення HTML документів, давайте відразу пропишемо стандартну частину (на цьому я як раз зупинявся в попередній статті. Там буде DOCTYPE (тут читайте про доктайп і коментарі в Html) і всі інші верхні теги, які браузер в разі їх відсутності може додати і сам (розумні вони стали — жах):
Заголовок документа
Значення всіх рядків у цьому коді я докладно пояснював у попередній статті (див. посилання в самому початку цієї публікації), тому зараз зупинюся лише на рядку:
Ця рядок говорить браузеру, де йому шукати і як називається файл каскадних таблиць стилів (він має розширення CSS), який потрібен браузер для коректного відображення задуманого нами оформлення шаблону майбутнього сайту. В нашому випадку він називається Style.css (тут читайте Style і Link детальніше), а шукати його потрібно у тій же папці, де лежить Index.html (власне, у якому прописана ця строчка).
Чому саме в цій же папці? Тому, що якщо ви не прописуєте ніякого шляху до файлу (вказуєте тільки його назва), то браузер буде його шукати в тій же директорії, де знаходиться виконуваний зараз (в нашому випадку це Index.html). Тобто відсутність шляху буде рівнозначно тому, як якщо б я прописав шлях до Style.css у вигляді:
Але перший варіант запису коротше і більш універсальний, т. к. там прямо не вказується шлях до папки з файлами, а значить можна буде помістити файли Index.html і Style.css в іншу директорію, звернутися до Index.html з адресного рядка і все одно буде довантажений Style.css. Детальніше про відносні й абсолютні посилання тут написано, а заодно і про URL (універсальний ідентифікатор ресурсу).
У зв’язку з цим хочу зауважити, що ви взагалі можете не морочитися з хостингом або ж з локальним сервером. Просто створіть на комп’ютері будь-яку папку і помістіть в неї наші Index.html і Style.css. Пропишіть в першому з них шлях до файлу Style.css у вигляді:
І все. Тепер ви зможете відкрити Index.html (подвійне клацання мишею по ньому) в браузері, призначеному за замовчуванням для відкриття файлів з розширенням HTML у вас на комп’ютері, і при цьому буде автоматично довантажуючи Style.css.
Цей спосіб зручний на етапі навчання, але все ж, все, що я вам говорив про роботу на реальному хостингу або локальному сервері, вам теж в подальшому обов’язково стане у нагоді. А зараз робота з папки на своєму комп’ютері може бути навіть більш зручною, ніж на хостингу. Хоча, кому як.
Прописуємо потрібний набір блоків в index.html
Тепер нам потрібно буде створити чотири DIV контейнера для всіх частин нашого 2 колоночного макета (шапки, лівої колонки, області для контенту, футера) і укласти їх в один великий Div.
Всередину Div контейнерів для частин макета можна буде укласти для наочності назви цих блоків. Все це ми будемо писати між відкриваючим і закриваючим Html тегами Body. Вийде приблизно такий код у Index.html:
Блокова верстка — дубль 2
Шапка
Ліва колонка
Вміст сторінки
Підвал
Тобто відразу за відкриває тегом Body ми прописали відкриваючий тег основного Div контейнера макета:
В якому поставили ID (в нашому випадку id=»maket»). Надалі для цього ID (читайте детальніше про селектори CSS тега, класу (class), Id універсальний селектор), файл каскадних таблиць стилів Style.css, ми допишемо CSS властивості, що дозволяють визначити розмір і вирівнювання основного Div.
Після відкриваючого тега основного Div ми прописали код чотирьох контейнерів, які стануть елементами макета.
Шапка
Ліва колонка
Вміст сторінки
Підвал
Всім цим чотирьом Div ми призначили свої індивідуальні ID, для яких потім Style.css ми пропишемо CSS властивості, що допомагають налаштувати розмір і взаємне розміщення (позиціонування) цих контейнерів. Для наочності, всередині них я прописав їх призначення. Ну, і перед закриваючим тегом Body ми поставили закриваючий тег основного Div для всього макета:
Тепер, якщо відкрити створений нами Index.html у браузері, ми побачимо просто перерахування в стовпчик назв частин 2 колоночного макета. Якщо ви відкриєте Index.html у браузері FireFox з встановленим плагіном Web Developer і виберіть з меню цього плагіна пункти «Контури» — «Контур елементів рівня блоків», то побачите приблизно наступну картину:
Тобто все вийшло саме так, як ми і хотіли — чотири Div укладені в одному основному контейнері. Але чому ж тоді все виглядає не так, як ми намітили на структурній схемі макета на основі блокової верстки? Просто ми ще нічого не написали в наш Style.css, який допоможе чудесним чином (за допомогою властивостей CSS) розставити всі діви по своїх місцях.
Прописуємо CSS властивості для блоків
Відкриваємо у зручному для вас редакторі Style.css і прописуємо стилі CSS для щойно створених контейнерів. Спочатку у Style.css варто прописати правило для тегів Body і Html, яке дозволить скинути відступи макету сайту від внутрішніх і зовнішніх меж екрану (для дотримання кросбраузерності):
body, html {
margin:0px;
padding:0px;
}
Ви, напевно, вже чули або бачили, що макети бувають фіксованої ширини (наприклад, 800px), а можуть бути, або ж бувають, гумові — ширина його підлаштовується під дозвіл екрану відвідувача.
Другий варіант (гумовий) досить часто використовується на форумах, а для сайтів найчастіше застосовують макет фіксованої ширини. Особливо це актуально зараз, з появою широкоформатних моніторів з великою роздільною здатністю екрану (гумовий буде виглядати на такому моніторі не дуже здорово).
Тому ми пропишемо для нашого основного Div ряд властивостей CSS Style.css, які дозволять створити макет фіксованої ширини (наприклад, 800px) і вирівняти його по центру щодо країв екрана (в Index.html для основного контейнера ми прописали ID під назвою maket) :
#maket {
width:800px;
margin:0 auto;
}
Отже, давайте розберемо цю запис. Ви, напевно, вже зрозуміли, що #MAKET (це називається селектором) говорить про те, що дана запис в CSS файлі буде застосована тільки до Div, в якому прописаний ID=»MAKET». У фігурних дужках записуються властивості CSS зі своїми значеннями. Загальний синтаксис конструкції запису в CSS файлі виглядає так:
Селектор { свойство1: значення; свойство2: значення; … }
Що примітно, код CSS буде однаково добре працювати незалежно від регістру символів, додавання або не додавання між елементами його коду перенесення рядків, пробілів і табуляції загалом пишіть так, як вам буде зручніше.
Але про це я планую докладно розповісти в серії статей, присвяченій роботі зі стилями для початківців вебмайстрів. Давайте розглянемо кожну властивість окремо.
Перше властивість CSS двухколоночного макета:
width:800px;
задає ширину (тутпро Height і width читайте ) для основного Div контейнера (фактично ширину для всього макета), а друге CSS властивість:
margin:0 auto;
дозволяє вирівняти основний Div посередині відносно лівого і правого краю екрана. Саме властивість Margin призначене для завдання відступів від зовнішніх меж контейнера до сусідніх елементів сторінки.
У нашому випадку основний Div (блок) є самим зовнішнім елементом нашого двох колоночного макета, тому Margin буде задавати відступ від його кордонів до кордонів екрана браузера користувача.
Перше значення, прописане в Margin, дорівнює нулю — це означає, що основний Div (фактично сам макет) буде впритул притиснутий до верхнього і нижнього краю екрану (відступи зверху і знизу дорівнюють нулю).
Друге значення в Margin прописано як Auto — це означає, що відступ від лівої і правої межі основного контейнера буде рівномірно розподілений, в результаті чого він (а фактично сам макет) буде вирівняно по центру відносно лівого і правого краю екрана. Такі ось пироги.
Дві строчки CSS коду, а скільки тексту потрібно написати для докладного пояснення їх значення (кошмар).
Пропишіть дані властивості в ваш Style.css
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
Збережіть зміни і відкрийте в браузері Index.html. Ви побачите, що тепер ширина двухколоночного макета перестала бути рівною ширині екрану і зменшилася до 800px. При цьому він ще і вирівнявся по центру:
Вирівнюємо двухколоночный макет по центру
Все добре, але є одне «але». У браузері Internet Explorer 5 (тут читайте про історію IE, а 5-це дуже стара версія, але може зустрічатися у відвідувачів досі) вирівнювання макета на основі блокової верстки по центру описаним вище способом не спрацює.
Не розуміє цього, тому персонально для нього (Internet Explorer 5) треба буде дописати для Body наступне CSS властивість:
text-align:center;
text-align (тут про нього, а заодно і про text-decoration, vertical-align та text-indent читайте) допоможе вирівняти наш макет по центру в старих версіях браузерів. Але це S властивість, призначене для Body, задає вирівнювання по центру для всього тексту на сторінці, а це нам зовсім не потрібно.
Тому ми допишемо нове властивість для нашого основного Div, яке задасть вирівнювання тексту по всьому макеті по лівому краю (це значення використовується за умовчанням, але оскільки ми прописали інше, то доводиться вказувати вирівнювання по лівому краю в явному вигляді):
text-align:left;
Ось такий фінт вухами, потрібний для того, щоб підлаштуватися під старі версії браузерів. Код в нашому Style.css після цього буде виглядати наступним чином:
body, html {
margin:0px;
padding:0px;
text-align:center;
}
#maket {
width:800px;
margin:0 auto;
text-align:left;
}
Подсвечиваем блоки для наочності
Тепер я пропоную зайнятися внутрішніми блоками макета. Для більшої наочності пропоную вам підфарбувати ці Div різними кольорами при завданні фонового кольору для них, з допомогою спеціально призначеного для цього (властивості CSS — Background-color.
Кольори в Html (тут про них розповідається, а так само про програми для захоплення потрібного кольору екрана) зазвичай задаються в кодовому вираженні, яке починається зі знака решітки. Для отримання коду потрібного вам кольору можна скористатися спеціальними програмами, докладніше про які ви можете прочитати за наведеною трохи вище посиланням.
Отже, пропишемо для всіх назв ID наших внутрішніх Div властивість Background-color з різними значеннями фонового кольору, наприклад, так:
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}
В результаті наш двухколоночный макет на основі блокової верстки буде виглядати приблизно так:
Тепер для того, щоб побачити межі окремих контейнерів, нам не потрібно буде удаватися до послуг плагіна Web Developer (див. посилання вище).
Блок Header, судячи за структурною схемою наведеною на початку статті, повинен у нас займати всю ширину макета, але блок Left повинен мати обмежену ширину. Визначити це можна за допомогою вже відомого нам CSS властивості Width, наприклад, так:
#left{
background-color:#00C0C0;
width:200px;
}
В результаті наш макет прийме вигляд:
Задаємо обтікання блоку лівої колонки іншими блоками через Float
Ну ось, вже набагато ближче до структурної схемою двухколоночного макету сайту, але все ж ще не зовсім те. Потрібно ще, щоб блок Content розташовувався не знизу, а праворуч від блоку Left.
Домогтися цього не складно, благо є властивість CSS під назвою Float, що дозволяє притиснути будь блоковий елемент до потрібної стороні екрану і поставити його обтікання з іншого боку, розташованим слідом за ним (в HTML коді) елементами.
Трохи не зрозуміло? Не біда, зараз розглянемо все це на прикладі. Додамо властивість для блоку Left, що дозволяє притиснути його до лівого краю і встановити обтікання його праворуч контейнерами, розташованими нижче в коді. Виглядати це буде так:
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
Тобто додалося всього лише одне єдине властивість Float зі значенням Left, призначене для блоку Left. Весь код у Style.css, створений нами на даний момент, буде мати вигляд:
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}
А наш макет на Div верстці тепер буде виглядати так:
Клас! Майже те, що треба, але знову ж таки є маленька неув’язочка. Блок Footer (підвал) не має обтікати ліву колонку праворуч, він повинен розташовуватися в самому низу макета і займати всю його ширину.
Як же вирішити цю проблему? Так, загалом-то досить просто, але про це я розповім вже в наступній статті цього циклу, присвяченого засадам блокової верстки.
Удачі вам! До зустрічей на сторінках блогу
