Embedded Files
Суть блокової верстки
Суть блокової верстки
У графічному редакторі створюється макет сайту: розмічається, де яка область сторінки (шапка, низ, бічна панель, основний контент) буде знаходитися і скільки місця займати, готуються картинки, фони.
Кожна частина сторінки поміщається в свій блок <div>: верх сайту - в перший, меню - у другій, контент - в третій і т. Д. Кожен блок наповнюється вмістом засобами HTML, а також позиціонується і оформляється за допомогою CSS-розмітки.
Кінцевий HTML-документ являє собою набір блоків <div> з контентом всередині. Оформлення часто знаходиться в окремому CSS-файлі, підключеному до сторінки тегом <link>, або як мінімум в контейнері <style> секції <head>.
Принципи блокової верстки
Принципи блокової верстки
Перший - звичайно ж, повсюдне використання тега <div>, який можна назвати базовим елементом блокової структури, але про це було сказано вже досить багато.
Друге правило - принцип поділу коду, згідно з яким вміст від оформлення потрібно відокремлювати. Говорячи простіше і ближче до нашого випадку: HTML - окремо, CSS - окремо (бажано в різні файли). Такий підхід робить структуру зрозуміліше. Програмісту не потрібно відкривати CSS, дизайнеру - HTML.
Третій принцип - таблиці потрібно використовувати не скрізь, а в разі потреби, при цьому повністю відмовлятися від них так само дивно, як і застосовувати не до місця.
Приклад блокової вертки
Приклад блокової вертки
Згідно макету, сторінка сайту буде містити п'ять блоків:
«шапку», навігаційне меню, бічну панель, основний блок з контентом і «підвал».
Спочатку створимо HTML-сторінку: позначимо структуру, розмітили її. HTML-код буде таким:
<!DOCTYPE html><html><head> <title>Блокова верстка</title><link rel="stylesheet" type="text/css" href="style.css"> <!--Підключення файлу зі стилями --> </head><body><div id="container"> <!-- Головний блок (батьківський) у якому будуть знаходитися усі решта блоків --> <div id="header"> <!-- Шапка --> <h2> header (шапка сайта)</h2> </div>
<div id="navigation"> <h2>Блок навигації</h2> </div> <div id="sidebar"> <h2>Ліва панель</h2> </div> <div id="content"> <h2>Основний контент сторінки</h2> </div> <div id="clear"> </div> <div id="footer"> <h2>footer (низ сайта)</h2> </div></div></body></html>
<div id="navigation"> <h2>Блок навигації</h2> </div> <div id="sidebar"> <h2>Ліва панель</h2> </div> <div id="content"> <h2>Основний контент сторінки</h2> </div> <div id="clear"> </div> <div id="footer"> <h2>footer (низ сайта)</h2> </div></div></body></html>
Скопіюйте даний код та перегляньте у браузері.
Очевидно, що це не той результат на який ми очікували, тому створим CSS -файл з наступним кодом:
body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px;} #header { background: #F5DEB3; width: 100%; height: 55px;} #container { background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px;} #navigation { background: #FE9798; width: 100%; height: 25px;} #sidebar { background: #40E0D0; float: left; width: 20%; height: 280px;} #content { background: #DCDCDC; float: right; width: 80%; height: 280px;} #clear { clear: both;} #footer { background: #00BFFF; width: 100%; height: 40px;}
Збережіть цей код в одну і ту ж папку де знаходиться HTML-документ з назвою style.css
Відкрийте HTML-документ у браузері . Він повинен бути такий як на зображенні.
Відкрийте HTML-документ у браузері . Він повинен бути такий як на зображенні.
Page updated
Google Sites
Report abuse