Блочная верстка | Урок 1

Данный цикл статей-уроков изначально был опубликован в моем блоге Вебмастеринг. Решил перенести его сюда с некоторыми поправками, дополнениями и уточнениями.

Итак, приступим:

Что есть такое блочная верстка и с чем ее едят? Ранее сайты верстали

при помощи таблиц. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки кучно роились в других, более крупных ячейках, те в свою очередь лежали в главной ячейке, сиречь самой странице сайта.

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




Блочная верстка | Урок 2

Для начала соберем небольшую кучку необходимейших инструментов.

Заходим вот на этот симпатичный сайт — www.pspad.com — и скачиваем замечательнейший редактор текста и программного кода PSPad. Замечателен он многим, но самое главное — им очень удобно работать. Попользуетесь и поймете все сами.

Далее, нам понадобится Фотошоп. Не Корел, не ПайнтШопПро и иже с ними, а обычный такой фотошопчег версии 7 или 8. Выше не рекомендую, ибо лицензионную вы вряд ли станете пользовать :) а "рыночный" вариант хорош до 8-го номера (по-другому обзывается CS). Все что выше, 9 и 10 — это куча глюков и ничего более. Я пользуюсь "восьмеркой" и тихо радуюсь. Важно(!): ставьте ТОЛЬКО английскую версию. По ходу езыг хоть немного вспомните.




Блочная верстка | Урок 3

cssИтак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в PSPad (Блокноте, WordPad-е и т.п.) и вписываем следующую строку:

/*© PIG.RU, 2007*/

На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* */ .

Строка комментария не читается браузерами. Она нужна только для служебной информации. Кодеры обычно вписывают туда свои пометки, дабы самому не запутаться в коде, когда его много.




Блочная верстка | Урок 4

Продолжаем разговор за CSS. Вообще в каскадных листах стилей принято некое упорядоченное расположение правил. Вначале указываются общие правила для всей страницы, а потом идут в той очерёдности, в которой появляются элементы на странице сверху вниз. Мы пока указали не все

общие элементы. Нет заголовков, списков, ссылок (тэги h, ul, ol, a). Их мы добавим позже, а пока начнём уже хоть что-нибудь прицеплять весомое к

нашей странице.

Из нарисованного в Фотошопе макета я вырезал целиком шапку (её мы используем не как картинку, а как фон), оба рисунка с поросями, рисунки вензеля, зелёной линии внизу, фон полосы навигации (не весь, а только отрезанный кусочек 8х35 пикселей) и зеленой галки у списка новостей.

 

 




Блочная верстка | Урок 5

siteИтак, продолжим верстать нашу Главную страницу. В этом уроке будет мнооого кода. Что у нас уже есть? Контейнер, в котором лежит шапка. Следом за шапкой добавим блок навигации. Находим в коде следующее место:

<div id="header"></div>

и сразу же за ним запишем следующее:

<div id="nav"><ul><li>Главная</li><li><a href="#">О нас</a></li><li><a href="#">О летучести</a></li>




Комментарии

Реклама