Блокова верстка
Розпочнемо розміщення елементів нашої веб-сторінки. При побудові сторінки спочатку розміщують елементи, що визначають місця, де згодом буде розміщено контент, посилання, картинки тощо. Почнемо зверху і визначимо місце під заголовок.
Зверніть увагу, на нашому макеті горизонтальне меню розташоване у заголовку сайту. Для того, щоб нам розмістити його так, потрібно розрізати картинку шапки сайту трохи вище за верхню межу елементів горизонтального меню. У результаті, у нас вийде два зображення – верхнє та нижнє, поверх якого розміщуватиметься меню. Ці два зображення надалі будуть встановлені як тло для двох блокових елементів, що визначають розташування шапки сайту.
Відкриємо наш веб-документ і додамо до області, призначеної для опису елементів контенту в нашому документі (всередині блоку з id рівним "wrapper"), наступні рядки:
Перший блок міститиме логотип нашого сайту та встановлену як фон верхню частину шапки. Другий міститиме всі елементи, пов'язані з горизонтальним меню. Звичайно, все це можна було б розмістити і без поділу шапки на окремі частини, але в такому випадку позиціонування горизонтального меню стало б більш важким завданням.
Перейдемо до таблиці стилів. Не забудьте, спочатку потрібно записувати правила для всієї сторінки, потім для загальних елементів і блоків, які визначають позиції розділів документа, а потім писати правила для конкретних елементів. Інакше каскадність не дозволить елементам стати на свої місця.
Додамо до файлу стилів такі правила:
#header width: 780px; height: 76px; background-repeat: no-repeat; background-image: url('zubik_top.jpg'); >
#hmenu-container height: 50px; background-image: url('zubik_btm.jpg'); background-repeat: no-repeat; >
Як ви, мабуть, зрозуміли, ці правила описують властивості блоків, що належать до шапки сайту. Звичайно, ми могли б помістити ці два блоки в ще один div, щоб повністю логічно відокремити шапку сайту, але ми не стали цього робити. Взагалі, div'ами, як і іншими елементами, краще не зловживати.
У описі стилю другого блоку ми вказали самі властивості, крім ширини. Таким чином, блок займе все доступне йому шириною простір. Загалом, у першому блоці ширину можна було також не вказувати, він би і так не виліз за межі div'а, в якому він розташований, рівного йому по ширині.
Збережемо нашу таблицю стилів у файл, наприклад з назвою screen.css, оскільки правила цього аркуша стилів будуть призначені для використання під час виведення нашої сторінки на екран монітора.
Перейдемо до веб-документа і додамо під щойно доданими рядками теги блоків, в яких будуть розміщуватися контент і вертикальне меню:
Тут ми також задали глобальний центральний блок, щодо якого ми позиціонуватимемо внутрішні блоки під меню та контент.
Відкриємо лист стилів screen.css та додамо наступні правила:
#vmenu-container width:115px; height: 170px; background-image: url('sidemenu.jpg'); background-repeat:no-repeat; padding:1em; >
#content float:right; width: 610px; margin-bottom: 1em; font-family: Verdana, Arial, Hevletica; font-size:80% >
Для контейнера під меню, ми задали ширину, висоту, фон та внутрішні відступи, щоб елементи, які цей блок міститиме не торкалися його меж. Блок для контенту зробили "плаваючим" щодо правоїбоку (float: rigth), тобто. інші елементи будуть обтікати його ліворуч, і задали йому всю доступну ширину за вирахуванням ширини блоку під праве меню, давши цим блоку з меню піднятися вгору і поміститися поруч із контейнером для контенту. Крім того, цьому блоку ми задали властивості, що визначають параметри шрифту для вмісту. Таким чином, контент виводитиметься шрифтом, визначеним цими властивостями. Також було встановлено зовнішнє нижнє поле, щоб візуально відокремити контент від підвалу сторінки на ширину символу (1 em).
Знову відкриємо наш веб-документ і додамо рядки, що стосуються підвалу сторінки:
Потім додамо правило листа стилів.
# Footer Color: Gray; height: 3em; font-family: Arial; forn-size: 10px; >
Зверніть увагу, якщо зараз додати контент до всіх блоків, то підвал нашої сторінки буде дещо зміщений. Це тому, що ми раніше задали значення, що визначає обтікання одного з блоків. Щоб позбавитися цієї неприємності, потрібно обтікання заборонити. Додайте перед блоком, що визначає місце під підвал наступний рядок:
Тепер у аркуші стилів запишіть правило для цього виправляючого блоку.
Тут ми заборонили обтікання з усіх боків. Можна було б заборонити обтікання тільки для того боку, з якого воно реально було. Але річ у тому, що стиль, визначений цим класом, нам ще знадобиться, а зайва заборона на обтікання з іншого боку, жодних проблем тут для нас не створить.
Залишилося лише розмітити меню, вписати посилання та контент. Цим ми займемося на наступному уроці.