DiV верстка - Створюємо блоки для двоколонковому макета в HTML, визначаємо їх розміри і задаємо позиціонування в CSS

1. Створюємо макет сайту в 2 колонки на основі DIV верстки
2. Починаємо верстати макет сайту в 2 колонки на дівах
3. Прописуємо потрібний набір блоків в index.html
4. Прописуємо CSS властивості для блоків
5. Вирівнюємо двоколонковому макет по центру
6. Підсвічувати блоки для наочності
7. Задаємо обтікання блоку лівої колонки іншими блоками через Float

Наша взаимовыгодная связь https://banwar.org/

Привіт, шановні читачі блогу KtoNaNovenkogo.ru. В першій статті, присвяченій блокової верстці , Я спробував почати розповідати про її принципах, але, на жаль, довелося сильно відволіктися на пояснення базових понять вебмастерінга.

Дуже мені не хотілося залишати без уваги ці засадничі речі, і дуже перепрошую перед тими, хто все це вже знав, а хотів почути саме розмова про верстці сайту і не почув.

У цій статті постараюся надолужити і виправитися. Сподіваюся, що сильно відхилятися від основної теми не доведеться. Ну ось, з вибаченнями і покаянням будемо вважати, що покінчено, і пора, нарешті, переходити безпосередньо до справи.

Створюємо макет сайту в 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://ktonanovenkogo.ru/test

Але тут є два «але». По-перше, замість https://ktonanovenkogo.ru/ вам потрібно ввести свій Урл, а по-друге, зверніть увагу на регістр латинських букв, які складають назву вашої директорії TEST.

Якщо ви написали назву папки великими літерами, то і в адресному рядку потрібно набирати назву папки великими (я написав тут TEST в верхньому регістрі, тільки лише з метою його виділення на тлі решти тексту).

Справа в тому, що на реальному хостингу в більшості випадків сервера працюють під управлінням UNIX подібної операційної системи, в якій великі і малі літери розрізняються (на відміну, від Windows, працювати з якою ми звикли).

Починаємо верстати макет сайту в 2 колонки на дівах

Як я вже згадував, для початку ми спробуємо створити макет в дві колонки, який схематично можна представити так:

Всі елементи помістимо в один великий Div-контейнер для того, щоб можна змінювати розміри і вирівнювання всього макета через властивості цього контейнера. Усередині основного Div будуть перебувати контейнери, що відповідають за формування окремих блоків (шапки, лівої колонки, області для контенту, футера).

Ми поставимо їм розміри і налаштуємо позиціонування на сторінці за допомогою CSS. Отже, приступимо.

Почнемо з Index.html. Відкрийте його на редагування в зручному для вас редакторі (я користуюся для цієї мети найкращим з безкоштовних текстових редакторів Нотепад ++ - тут його можна завантажити і налаштувати ).

Для того, щоб звикати до правильного оформлення HTML документів, давайте відразу пропишемо стандартну частину (на цьому я як раз зупинявся в попередній статті. Там буде DOCTYPE ( тут читайте про доктайпів і коментарі в Html ) І всі інші верхні теги, які браузер в разі їх відсутності може додати і сам (розумні вони стали - жах):

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> Заголовок документа </ title> <link href = "style.css" rel = "stylesheet" type = "text / css "> </ head> <body> </ body> </ html>

Значення всіх рядків в цьому коді я детально пояснював в попередній статті (див. Посилання в самому початку цієї публікації), тому зараз зупинюся лише на рядку:

<Link href = "style.css" rel = "stylesheet" type = "text / css">

Цей рядок говорить браузеру, де йому шукати і як називається файл каскадних таблиць стилів (він має розширення CSS), який потрібен браузеру для коректного відображення задуманого нами оформлення шаблону майбутнього сайту. У нашому випадку він називається Style.css ( тут читайте про Style і Link докладніше ), А шукати його потрібно в тій же папці, де лежить Index.html (власне, в якому і прописана ця строчка).

Чому саме в цій же папці? Тому, що якщо ви не прописуєте ніякого шляху до файлу (вказуєте тільки його назва), то браузер буде його шукати в тій же директорії, де лежить виконуваний зараз (в нашому випадку це Index.html). Тобто відсутність шляху буде рівнозначно тому, як якщо б я прописав шлях до Style.css у вигляді:

<Link href = "https://ktonanovenkogo.ru/test/style.css" rel = "stylesheet" type = "text / css">

Але перший варіант запису коротше і більш універсальний, тому що там прямо не вказується шлях до папки з файлами, а значить можна буде помістити файли Index.html і Style.css в іншу директорію, звернутися до Index.html з адресного рядка і все одно буде довантажуючи Style.css. Детальніше про відносні і абсолютні посилання тут написано, а заодно і про URL (універсальний ідентифікатор ресурсу ).

У зв'язку з цим хочу зауважити, що ви взагалі можете не морочитися з хостингом або ж з локальним сервером. Просто створіть на своєму комп'ютері будь-яку папку і помістіть в неї наші Index.html і Style.css. Пропишіть в першому з них шлях до файлу Style.css у вигляді:

<Link href = "style.css" rel = "stylesheet" type = "text / css">

І все. Тепер ви зможете відкрити Index.html (подвійне клацання мишею по ньому) в браузері, призначеному за замовчуванням для відкривання файлів з розширенням HTML у вас на комп'ютері, і при цьому буде автоматично довантажуючи Style.css.

Цей спосіб зручний на етапі навчання, але все ж, все що я вам говорив про роботу на реальному хостингу або локальному сервері, вам теж надалі обов'язково стане в нагоді. А зараз робота з папки на своєму комп'ютері може бути навіть більш зручною, ніж на хостингу. Хоча, кому як.

Прописуємо потрібний набір блоків в index.html

Тепер нам потрібно буде створити чотири DIV контейнера для всіх частин нашого 2 колоночного макета (шапки, лівої колонки, області для контенту, футера) і укласти їх в один великий Div.

Всередину Div контейнерів для частин макета можна буде зробити висновок для наочності назви цих блоків. Все це ми будемо писати між відкриває і закриває Html тегами Body. Вийде приблизно такий код в Index.html:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> Блокова верстка - дубль 2 </ title> <link href = "style.css" rel = "stylesheet" type = " text / css "> </ head> <body> <div id =" maket "> <div id =" header "> Шапка </ div> <div id =" left "> Ліва колонка </ div> <div id = "content"> Вміст сторінки </ div> <div id = "footer"> Підвал </ div> </ div> </ body> </ html>

Тобто відразу за відкриває тегом Body ми прописали відкриває тег основного Div контейнера макета:

<Div id = "maket">

В якому задали ID (в нашому випадку id = "maket"). Надалі для цього ID ( читайте докладніше про CSS селектори тега, класу (class), Id і універсальний селектор ), В файлі каскадних таблиць стилів Style.css, ми допишемо CSS властивості, що дозволяють визначити розмір і вирівнювання основного Div.

Після відкриваючого тега основного Div ми прописали код чотирьох контейнерів, які стануть елементами макета.

<Div id = "header"> Шапка </ div> <div id = "left"> Ліва колонка </ div> <div id = "content"> Вміст сторінки </ div> <div id = "footer"> Підвал </ div>

Всім цим чотирьом Div ми призначили свої індивідуальні ID, для яких потім в Style.css ми пропишемо CSS властивості, які допомагають налаштувати розмір і взаємне розміщення (позиціонування) цих контейнерів. Для наочності, всередині них я прописав їх призначення. Ну, і перед закриває тегом Body ми поставили закриває тег основного Div для всього макета:

</ 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 (підвал) не повинен обтікати ліву колонку праворуч, він повинен розташовуватися в самому низу макета і займати всю його ширину.

Як же вирішити цю проблему? Так, в общем-то досить просто, але про це я розповім вже в наступній статті даного циклу, присвяченого основам блокової верстки .

Удачі вам! До швидких зустрічей на страницах блогу KtoNaNovenkogo.ru

Збірки по темі

Використову для заробітку