Div верстка

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

Привіт, шановні Новомосковсктелі блогу 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 в наступному каталозі:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тобто відразу за відкриває тегом 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 властивості для блоків

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

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

Тому ми пропишемо для нашого основного Div ряд CSS властивостей в Style.css, які дозволять створити макет фіксованої ширини (наприклад, 800px) і вирівняти його по центру щодо країв екрану (в Index.html для основного контейнера ми прописали ID під назвою maket):

Отже, давайте розберемо цей запис. Ви, напевно, вже зрозуміли, що #MAKET (називається це селектором) говорить про те, що даний запис в CSS файлі буде застосована тільки до Div, в якому прописаний ID = "MAKET". У фігурних дужках записуються властивості CSS зі своїми значеннями. Загальний синтаксис конструкції записи в CSS файлі виглядає так:

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

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

Перше CSS властивість двоколонковому макета:

дозволяє вирівняти основний Div посередині відносно лівого і правого краю екрана. Саме властивість Margin призначене для завдання відступів від зовнішніх кордонів контейнера до сусідніх елементів сторінки.

У нашому випадку основний Div (блок) є самим зовнішнім елементом нашого двох колоночного макета, тому Margin буде задавати відступ від його кордонів до кордонів екрану браузера користувача.

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

Друге значення в Margin прописано як Auto - це означає, що відступ від лівої і правої межі основного контейнера буде рівномірно розподілений, в результаті чого він (а фактично сам макет) буде вирівняний по центру щодо лівого і правого краю екрана. Такі ось пироги.

Два рядки CSS коду, а скільки тексту потрібно написати для докладного пояснення їх значення (кошмар).

Пропишіть дані властивості в ваш Style.css

Збережіть зміни і відкрийте в браузері Index.html. Ви побачите, що тепер ширина двоколонковому макета перестала бути рівною ширині екрану і зменшилася до 800px. При цьому він ще і вирівнявся по центру:

Вирівнюємо двоколонковому макет по центру

Не розуміє він цього, тому персонально для нього (Internet Explorer 5) потрібно буде дописати для Body наступне CSS властивість:

Тому ми допишемо нову властивість для нашого основного Div, яке задасть вирівнювання тексту у всьому макеті по лівому краю (це значення використовується за умовчанням, але тому що ми прописали інше, то доводиться вказувати вирівнювання по лівому краю в явному вигляді):

Такий ось фінт вухами, потрібний для того, щоб підлаштуватися під старі версії браузерів. Код в нашому Style.css після цього буде виглядати наступним чином:

Підсвічувати блоки для наочності

Тепер я пропоную зайнятися внутрішніми блоками макета. Для більшої наочності пропоную вам підфарбувати ці Div різними кольорами при завданні фонового кольору для них, за допомогою спеціально призначеного для цього (властивості CSS - Background-color.

Отже, пропишемо для всіх назв ID наших внутрішніх Div властивість Background-color з різними значеннями фонового кольору, наприклад, так:

В результаті наш двоколонковому макет на основі блокової верстки буде виглядати, приблизно, так:

Тепер для того, щоб побачити межі окремих контейнерів, нам не потрібно буде вдаватися до послуг плагіна Web Developer (див. Посилання вище).

Блок Header, судячи з структурній схемі наведеної на початку статті, повинен у нас займати всю ширину макету, але блок Left повинен мати обмежену ширину. Задати це можна за допомогою вже відомого нам CSS властивості Width, наприклад, так:

В результаті наш макет набуде вигляду:

Задаємо обтікання блоку лівої колонки іншими блоками через Float

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

Домогтися цього не складно, благо є властивість CSS під назвою Float. що дозволяє притиснути будь блоковий елемент до потрібної стороні екрану і задати його обтікання з іншого боку, розташованим слідом за ним (в HTML коді) елементами.

Дещо не зрозуміло? Не біда, зараз розглянемо всі на прикладі. Додамо властивість для блоку Left, що дозволяє притиснути його до лівого краю і задати обтікання його справа контейнерами, розташованими нижче в коді. Виглядати це буде так:

Тобто додалося всього лише одне єдине властивість Float зі значенням Left, призначене для блоку Left. Весь код в Style.css, створений нами на даний момент, буде мати вигляд:

А наш макет на Div верстці тепер буде виглядати так:

Клас! Майже те, що потрібно, але знову ж таки є маленька неув'язочка. Блок Footer (підвал) не повинен обтікати ліву колонку праворуч, він повинен розташовуватися в самому низу макета і займати всю його ширину.

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

Це нюанси і тонкощі SEO оптимізації сайту.

На етапі розвитку це я як зрозумів необхідність.

Тільки як на своєму сайті це застосувати, я не знаю.

Сайт у вигляді блогу в цьому плані зручний.

Багато тексту. Можна встромляти перелинковку в будь-яке місце.

Головне що-б сенс або слово в статті як то перетиналися з уже написаним раніше. Звідси і розкиданість.

Але це необхідність.

щодо фіксованої ширини. а з текстами потім як? 200 пікселів ширина а слово буде більше (розмір шрифту довге слово і т.д.) починається розрив шаблону начебто не? сам ходжу під 1024 дозволом (Фаерфокс) і на багатьох (дуже багатьох) блогах і сайтах, присвячених чудової верстці і КСС, там виходить такий розбрід і хитання, що незрозуміло як люди можуть навчати верстці кросбраузерності.