Всем привет. К сожалению прикольной картинки, к этой статье я не подобрал, но это не должно вас расстраивать. Сегодня речь пойдет о верстке дивами. Этот способ сейчас очень широко применяется при блочной верстки сайтов.
Немного теории
<div></div> = слой. Используется верстальщиками как контейнер для содержимого, будь то текст статьи или меню. Далее определенному диву задаем id или class и полностью прописываем его внешний вид и позиционирование с помощью CSS. Проще все будет понять на примере.
Для начала небольшая схемка расположения и структуры слоев на сайте, который будет являться основой для наших будущих уроков.
Теперь объясню, что есть что. Каждый слой на схеме представлен своим цветом и имеет свой собственный id. Кроме того наглядна представлена вложенность слоев header, nav, content и footer в wrapper. Слой wrapper является как бы слоем, который связывает все остальные в одну конструкцию. Думаю предназначение остальных всем понятно.
А вот и html-код страницы
&amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp;amp;amp;gt;Верстаем дивами&amp;amp;amp;amp;amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;link href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;style.css&amp;amp;amp;amp;amp;amp;amp;amp;quot; rel=&amp;amp;amp;amp;amp;amp;amp;amp;quot;stylesheet&amp;amp;amp;amp;amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;amp;amp;amp;amp;quot;text/css&amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;quot;wrapper&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;quot;header&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Заголовок или лого сайта&amp;amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;quot;nav&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;#&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Главная&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;#&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Новости&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;#&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Об авторе&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;quot;content&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Основной текст статьи&amp;amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;quot;footer&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Информация, копирайт &amp;amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;gt;
Все основной скелет сайта готов. Теперь с помощью CSS нужно спозиционировать и стилизовать эти самые слои. В данном случае удобно поместить наш CSS код в отдельный файл style.css.
Листинг CSS
#wrapper { margin:auto;
width:900px;}
#header { height:100px;
text-align:center;}
#nav { text-align:center;
height:25px;}
#content { padding:10px;
font-size:14px;
text-align:justify;}
#footer { text-align:center;}
Тут я прописал только некоторые правила для наших слоев. Поясню некоторые элементы.
margin:auto — задает выравнивание слоя по центру страницы
height ; width - задают высоту и ширину соответственно. В дааном случае в пикселах (px), но можно и в процентах. (%)
padding — этот параметр задает отступы внутри слоя для элементов помещенных в него (px).
Теперь, я надеюсь, вы получили первое представление о скелете страницы построенной на дивах. Вданном примере я рассмотрел статичную верстку с параметрами заданными жестко. Такая страница не будет расстягиваться по ширине, что придает ей стабильность. Я привел лишь основной принцип построения и он не единственный. Вот и пришел момент, когда после прочтения моих статей у вас должно сложиться впечатление об html и CSS и настало время переходить к настоящему делу. В скором времени я набросаю для вас небольшой дизайн для сайта и уже подробно расскажу о некоторых тонкостях и подводных камнях. У меня все. Задавайте вопросы и комментируйте, свои косяки исправлю.
__________________
Все заходим и читаем Блогорад — личный дневник. Хотите смотреть трейлеры к фильмам онлайн? Тогда сайт Банк Кино для Вас. Есле же Вас интересует все о здоровье и красоте — заходите на You Fit!
Еще интересные записи:
То что я и искал.
Старался.