Блочная верстка | Урок 9 · Websovet | Полезные советы по созданию веб сайтов

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

Дата: 17.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |

Это заключительный урок из серии “Блочная верстка веб-сайта”. Нам осталось только оформить “подвал” (footer), да сделать еще пару-тройку замечаний.
Подвал, он же “футер” — это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация. Очень часто можно наблюдать такую картину: верхнее гризонтальное меню под “шапкой” практически без изменений дублируется в левой колонке. Выглядит это, по меньшей мере, бестолково. Уж лучше продублировать основные разделы сайта в подвале. Пользы будет несомненно больше.

Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты.

Запишем в коде страницы сразу после этого места:

................. ...намечаются до самого утра. При наличии на небе луны — будет весело. </ul> </div> <div class="clearfloat"></div>

Следующий код:

<div id="footer"> <p>Главная | <a href="#">О нас</a> | <a href="#">О летучести</a> | <a href="#">О везучести</a> | <a href="#">Свинки-герои</a> | <a href="#">Подружиццо</a></p> <p>© PIG.RU, 2007 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | e-mail: <a href="mailto:piggs@pig.ru">piggs@pig.ru</a></p> </div>

Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на “мыло” и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского! Это ссылки на валидаторы — конторы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ. Сие придаёт вашим страничкам солидность и всеопщее наше верстальское одобрение.

Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два /div подряд. Вот так:

.......... href="mailto:piggs@pig.ru">piggs@pig.ru</a></p> </div> </div> </body> </html>

Второй /div — это закрытие области контейнера.

Теперь допишем в листе стилей оставшийся код:

#footer {
background : #665;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}

#footer a {
color : #ff0;
}

#footer a:hover {
color : #f00;
}

#footer p {
padding : 2px;
text-align : center;
}

.clearfloat {
clear : both;
}

Здесь мы задали фон серо-зелёного цвета, цвет текста — белый. А вот нижняя строчка в первом правиле (clear : both;) означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.

Ссылки у нас здесь ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%. Как я и сказал, футер — важная часть, но не на столько, чтобы бросаться в глаза.

Выравнивание для текста мы задали по центру.

Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей.

Сохраняемся, смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место:

#container {
width : 760px;
margin : 0 auto;
}

И добавим следующую строчку:

border : 1px solid #999;

Должно получиться следующее:

#container {
width : 760px;
margin : 0 auto;
border : 1px solid #999;
}

Вот, собственно, и всё! Результат можно посмотреть здесь: Рэзультат.
Реальный сайт о парасенгах можно посмотреть здесь — Pigfly.ru. От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. Хотя идея тоже изменилась, и теперь Летающие Парасенги — это сайт О Счастье, Удаче и Богатстве и даже чуточку о Дзэн.

Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах.

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

Удачи! :)

Вебсовет

1 2 3 4 5 6 7 8 9

Подпишитесь на RSS

Комментарии (41) на запись “Блочная верстка | Урок 9”

Виталий 17.08.2008 22:36

Здравствуйте Игорь!
Обращаюсь к Вам за советом на Вебсовет, помогите пожалуйста.
А дело вот в чем. По Вашей книге я написал код сайта, все получилось хорошо,
спасибо Вам. Но сайт мой состоит из 12 страниц. Я рассчитывал, что в тот же самый
#container будет загружаться контент других страниц и слава Богу. Но не тут то было:
почему то двухколоночные блоки всех страниц ( кроме главной) прижимаются к
левому краю и что тут делать у меня знаний не хватает. Как писать код для других страниц; для каждой новый #container??? Я попробовал некоторые варианты, но увы…
Вразумите, пожалуйста
C уважением Виталий Горьков.
Игорь Квентор 18.08.2008 08:21

Здравствуйте, Виталий!
Рад бы помочь, но не видя кода ничего подсказать не могу :) Пришлите мне на мыло ваши файлы, я посмотрю.
Наталия 03.10.2008 23:15

Статья просто восхитительная! Огромное СПАСИБО!
Дмитрий 23.10.2008 22:49

Потрясающая статья …спасибо вам огромное…мое представление о верстке перевернуто
Ник 16.11.2008 16:54

Здравствуйте еще раз :) У меня опять вопрос : Вот я сделал сайт, не по этому уроку, а благодаря полученным знаниям из этого урока, и проблема :
В «опере» и «хроме» все отлично а в IE 7 —
1. Почему то не поддерживается размер шрифта 150% на CSS
2. У меня трехколоночный сайт, три блока примерно по 350 пикселей каждый. В IE все это сбивается к черту, как будто не хватает места тексту, и он налезает на следующий блок.
3. Уменьшенный шрифт, 75% тоже показывается как обычный. В итоге все наполнение сайта, как заголовки, так и маленькие даты — всё набрано одним цветом. Что делать? Заранее ОГРОМНОЕ спасибо за ответ!
Ник 16.11.2008 16:56

Да, еще — извините за много вопросов :) В ИЕ 7 сбились все параметры margin и padding, кроме padding-a для задания отступов фона навигации. Что с этим можно сделать? :(
Игорь Квентор 17.11.2008 00:10

Ник, пришлите мне в мыло вашу страницу вместе с файлом CSS. Так я смогу вам что-то подсказать.
Александр 17.12.2008 20:49

Отличный блог! Все доступно и понятно. 5 баллов и в избранное.
Да, еще! В 9-ом уроке обещалось рассказать о менюшке как у парасенгов, но продолженя не нащел. Подскажите,плс, где искать…
С ув. Александр.
Александр 17.12.2008 20:54

Ура! Нашел… http://ilev.blogspot.com/2007/07/css.html
Еще раз спасибо!
Игорь Квентор 18.12.2008 10:07

:) Здесь тоже есть этот урок
http://www.websovet.com/rollover-menyu-na-css
N/A 06.03.2009 03:19

Да, господа верстальщики, а я и не думал, что так сильно отстал от жизни. Работал в небольшой фирме по разработке сайтов и делал их исключительно табличным способом, а тут… спасибо за статью. Огромное.
Игорь Квентор 06.03.2009 17:09

Вэлкам, N/A :)
Sunliker 26.04.2009 20:38

Спасибо за мастер класс))

Подскажите пожалуйста, как сделать эти милые вертикальные черточки в футере между ссылками меню?

Что это за символ?
Игорь Квентор 26.04.2009 21:09

Sunliker, этот знак находится на клавиатуре правее знака + в английской раскладке. Правда на клаве он выглядит как два вертикальных штриха.
Алексей 19.05.2009 12:48

Здраствуйте Игорь. С огромным интересом прошёл ваши уроки, но у меня появились некоторые нестыковочки. Чтот не получилось немного. Может где то тоятся ошибки. Поэтому я и хотел вас попросить выслать мне на e-mail profili2009@ya.ru два фаиликак style.css и index.html в готовом варианте. Буду очень благодарен, хочу найти свои ошибки. С уважением Алексей.
Игорь Квентор 19.05.2009 17:43

Алексей, так это просто: кликаете по ссылке в статье (готовый Рэзультат), потом сохраняете как “HTML-файл с изображениями” (это если Оперой, в ИЕ почти так же) и будут вам и оба файла, и картинки все :)
Дмитрий 26.06.2009 14:55

Спасибо, неплохая статья. Опыт веб-дизайна был, но, пока читал, отметил для себя несколько особенностей HTML и CSS. Хотел бы предложить несколько поправок, исключительно из любви к точности.

1. Спецификация CSS2 даёт следующий формат набора правил (ruleset):

selector? ‘{’ S* declaration? [ ‘;’ S* declaration? ]* ‘}’ S*;

Т.е. точка с запятой используется не как терминатор, а как разделитель, поэтому после последней пары свойство-значение её использование как минимум необязательно, а вообще - не соответствует приведённому выражению.

2. Селектор * обозначает не “всю страницу разом”, а все элементы, которые могут встретиться на странице. Различие, IMHO, существенное, поскольку правила, применённые к странице могут быть переопределены в дочерних элементах. На практике это разночтение мало на что влияет, но мне кажется, следовало бы подчеркнуть, что * - это не эквивалент body или (упаси господь! :)) html.

3. На протяжении всего мини-курса очень резало глаз следующее. Например, имеется [div id=”text”] (квадратные скобки - чтобы не порезало). В пояснении это называется “Тэг div с атрибутом text”. Дело в том, что спецификация HTML даёт вполне однозначное определение слова “атрибут” и этому определению соответствует “id”, а “text” является его значением.

Это, опять же, не создаёт особых проблем при создании сайта, но, к сожалению, может помешать тем, кто будет учиться по Вашим урокам, в общении с другими разработчиками: как правило, к некорректному употреблению основных терминов специалисты оказываются чутки. По той же причине к числу хороших книг по Delphi, например, не причисляют книги Фленова или Архангельского: они являются неплохими учебниками, но идеологически не совсем верны, что создаёт затруднения при переходе от состояния начинающего к состоянию специалиста.

=====

В остальном - ещё раз огромное спасибо, было приятно читать.
Ant 13.07.2009 17:42

Спасибо большое! Оччень полезная статья получилась. Сделал всё как написано, работает сразу!
Игорь Квентор 13.07.2009 20:05

Ant, вэлкам! :)
Александр 06.08.2009 21:07

Я очень долго искал где же можно прочитать и чтобы понятно было про “дивную” верстку. И только на этом сайте нашел. Огромное человеческое СПАСИБО!!!
Игорь Квентор 07.08.2009 12:27

Спасибо, Александр, за добрый отзыв!
Игорь 24.08.2009 14:20

На сколько я понял подвал ни к чему не привязан (хотелось бы к низу.) и при отсутствии текстов лепиться куда не попадя. Также подвал не имеет фиксированного размера, и уменьшается под тот размер куда прилипает, что можно было бы сделать?
Игорь 24.08.2009 14:31

Можно ли вставить этот тэг в самом низу выше закрывающегося тэга body?
Игорь Квентор 25.08.2009 10:54

Подвал в любом случае будет внизу, так как перед ним мы добавили блок очистки:

<div class=”clearfloat”></div>

А сам блок подвала размещается в пределах основного контейнера. Если вы его перенесете в самый низ, то необходимо будет добавить в набор правил для футера выравнивание по центру, как и у основного контейнера:

margin: 0 auto;

Также можно задать и фиксированную высоту. Для этого достаточно в набор правил для футера добавить:

height: 50px;
Влад 22.09.2009 08:48

Автору Р Е С П Е К Т И У В А Ж У Х А!!!!Супер урок!
Игорь 03.10.2009 23:52

Классный учебник.
Респект и благодарность автору)))
Теперь хотелось бы расширить свои знания и научиться делать сайты на php.
Кто бы мог подсказать хороший учебник для начинающих, с примерами построения сайта как в этом учебнике…
Игорь 13.10.2009 14:16

А где можно поучиться созданию форм.
Так же с помощью css и divov?
Gero 25.10.2009 21:32

Нет слов…! Прекрасное изложение - легко, доступно и с юмором!
Спасибо огромное! Получил огромное удовольсвие и дополнительные знания!
Наилучшие пожелания, и успехов!

P.S. Относительно всей книги “Блочная верстка веб-сайта”.
Nook 02.12.2009 11:19

Большое спасибо за статью, как раз то что искал!
ipenrovich 15.12.2009 06:19

обещали обьяснить как делать две колонки но так и не обьяснили
спасибо
Игорь Квентор 15.12.2009 18:00

ipenrovich, а это:

http://www.websovet.com/sozdanie-2-x-kolonochnogo-shablona-dlya-vordpress-chast-1-risuem-maket

?
Ветд 09.01.2010 15:06

Классная стать. Но вот один вопрос как организовать как типа на фреймах. Тоесть шапка навигация и подвал у нас статичны все находится на 1 странице и не меняется а вот в div text при нажатии на ссылку грузится уже готовая страница. Я сделал через iframe но чета не оч удобно. можно ли как нибудь по другому реализовать изменеие содержания дива. Как вы это ремлизовали на своем сайте при клике на ссылку. Или у каждой страницы есть шапка и тд и тп и оно все целиком грузится???
336644086
vitalikse@gmail.com
я на связи
Игорь Квентор 10.01.2010 13:38

Для этого не обязательно использовать фреймы, от которых уже давно все отказались. Для этого существует обычный PHP. Шаблоны Вордпресс, к примеру, раз собраны на этом принципе: шапка, сайдбары и подвал единственны в своем роде и подключаются ко всем страницам сразу.
Олег 13.01.2010 15:44

Урок суперский. Был сайт на табличной верстке.
На днях собираюсь делать блочную! И обязателно буду обращатся к уроку.
Доходчиво, понятно все написано. И для новичка подойдет.
Спасибо Вам!!! :)
Игорь Квентор 14.01.2010 11:08

И вам спасибо на добром слове! :)
Павел 15.01.2010 13:03

Огромное спасибо за статью. Оказалась очень полезной. Но вот почему то Opera 10.01 вообще не открывает страницу. Почему такое происходит?
Игорь Квентор 15.01.2010 18:49

Наверное, глюк в самой Опере. Поробуйте переустановить.
Лев 20.01.2010 16:32

Здравствуйте товарищи,объясните мне старому юзеру как шапку на сайте сделать на всю ширину?
Игорь Квентор 20.01.2010 19:48

Лев, вы имеете в виду свой форум?
Roach 21.01.2010 23:34

Спасибо большое за уроки )
Прочитал уроки w3schools, заполировал вашим творением и вуаля - таблицы больше мне не кажутся такими хорошими и годными ))

P.S. отдельное спасибо за Strict
P.P.S. отсутствие ul в footer’е смутило
Игорь Квентор 22.01.2010 21:39

Roach, вэлкам!