Блочная верстка | Урок 9
Дата: 17.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |
Тэги: css, html, блочная верстка, уроки
Это заключительный урок из серии “Блочная верстка веб-сайта”. Нам осталось только оформить “подвал” (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. От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. Хотя идея тоже изменилась, и теперь Летающие Парасенги — это сайт О Счастье, Удаче и Богатстве и даже чуточку о Дзэн.
Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах.
Напоминаю, что наша верстка является “плавающей“. Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы. Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение, например — расстоянием в пикселах от верхней и левой стороны экрана. Но это уже совсем другая история.
Удачи! :)
Комментарии (41) на запись “Блочная верстка | Урок 9”
Трэкбеки
Оставить комментарий












Здравствуйте Игорь!
Обращаюсь к Вам за советом на Вебсовет, помогите пожалуйста.
А дело вот в чем. По Вашей книге я написал код сайта, все получилось хорошо,
спасибо Вам. Но сайт мой состоит из 12 страниц. Я рассчитывал, что в тот же самый
#container будет загружаться контент других страниц и слава Богу. Но не тут то было:
почему то двухколоночные блоки всех страниц ( кроме главной) прижимаются к
левому краю и что тут делать у меня знаний не хватает. Как писать код для других страниц; для каждой новый #container??? Я попробовал некоторые варианты, но увы…
Вразумите, пожалуйста
C уважением Виталий Горьков.
Здравствуйте, Виталий!
Рад бы помочь, но не видя кода ничего подсказать не могу :) Пришлите мне на мыло ваши файлы, я посмотрю.
Статья просто восхитительная! Огромное СПАСИБО!
Потрясающая статья …спасибо вам огромное…мое представление о верстке перевернуто
Здравствуйте еще раз :) У меня опять вопрос : Вот я сделал сайт, не по этому уроку, а благодаря полученным знаниям из этого урока, и проблема :
В «опере» и «хроме» все отлично а в IE 7 —
1. Почему то не поддерживается размер шрифта 150% на CSS
2. У меня трехколоночный сайт, три блока примерно по 350 пикселей каждый. В IE все это сбивается к черту, как будто не хватает места тексту, и он налезает на следующий блок.
3. Уменьшенный шрифт, 75% тоже показывается как обычный. В итоге все наполнение сайта, как заголовки, так и маленькие даты — всё набрано одним цветом. Что делать? Заранее ОГРОМНОЕ спасибо за ответ!
Да, еще — извините за много вопросов :) В ИЕ 7 сбились все параметры margin и padding, кроме padding-a для задания отступов фона навигации. Что с этим можно сделать? :(
Ник, пришлите мне в мыло вашу страницу вместе с файлом CSS. Так я смогу вам что-то подсказать.
Отличный блог! Все доступно и понятно. 5 баллов и в избранное.
Да, еще! В 9-ом уроке обещалось рассказать о менюшке как у парасенгов, но продолженя не нащел. Подскажите,плс, где искать…
С ув. Александр.
Ура! Нашел… http://ilev.blogspot.com/2007/07/css.html
Еще раз спасибо!
:) Здесь тоже есть этот урок
http://www.websovet.com/rollover-menyu-na-css
Да, господа верстальщики, а я и не думал, что так сильно отстал от жизни. Работал в небольшой фирме по разработке сайтов и делал их исключительно табличным способом, а тут… спасибо за статью. Огромное.
Вэлкам, N/A :)
Спасибо за мастер класс))
Подскажите пожалуйста, как сделать эти милые вертикальные черточки в футере между ссылками меню?
Что это за символ?
Sunliker, этот знак находится на клавиатуре правее знака + в английской раскладке. Правда на клаве он выглядит как два вертикальных штриха.
Здраствуйте Игорь. С огромным интересом прошёл ваши уроки, но у меня появились некоторые нестыковочки. Чтот не получилось немного. Может где то тоятся ошибки. Поэтому я и хотел вас попросить выслать мне на e-mail profili2009@ya.ru два фаиликак style.css и index.html в готовом варианте. Буду очень благодарен, хочу найти свои ошибки. С уважением Алексей.
Алексей, так это просто: кликаете по ссылке в статье (готовый Рэзультат), потом сохраняете как “HTML-файл с изображениями” (это если Оперой, в ИЕ почти так же) и будут вам и оба файла, и картинки все :)
Спасибо, неплохая статья. Опыт веб-дизайна был, но, пока читал, отметил для себя несколько особенностей 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, вэлкам! :)
Я очень долго искал где же можно прочитать и чтобы понятно было про “дивную” верстку. И только на этом сайте нашел. Огромное человеческое СПАСИБО!!!
Спасибо, Александр, за добрый отзыв!
На сколько я понял подвал ни к чему не привязан (хотелось бы к низу.) и при отсутствии текстов лепиться куда не попадя. Также подвал не имеет фиксированного размера, и уменьшается под тот размер куда прилипает, что можно было бы сделать?
Можно ли вставить этот тэг в самом низу выше закрывающегося тэга body?
Подвал в любом случае будет внизу, так как перед ним мы добавили блок очистки:
<div class=”clearfloat”></div>
А сам блок подвала размещается в пределах основного контейнера. Если вы его перенесете в самый низ, то необходимо будет добавить в набор правил для футера выравнивание по центру, как и у основного контейнера:
margin: 0 auto;
Также можно задать и фиксированную высоту. Для этого достаточно в набор правил для футера добавить:
height: 50px;
Автору Р Е С П Е К Т И У В А Ж У Х А!!!!Супер урок!
Классный учебник.
Респект и благодарность автору)))
Теперь хотелось бы расширить свои знания и научиться делать сайты на php.
Кто бы мог подсказать хороший учебник для начинающих, с примерами построения сайта как в этом учебнике…
А где можно поучиться созданию форм.
Так же с помощью css и divov?
Нет слов…! Прекрасное изложение - легко, доступно и с юмором!
Спасибо огромное! Получил огромное удовольсвие и дополнительные знания!
Наилучшие пожелания, и успехов!
P.S. Относительно всей книги “Блочная верстка веб-сайта”.
Большое спасибо за статью, как раз то что искал!
обещали обьяснить как делать две колонки но так и не обьяснили
спасибо
ipenrovich, а это:
http://www.websovet.com/sozdanie-2-x-kolonochnogo-shablona-dlya-vordpress-chast-1-risuem-maket
?
Классная стать. Но вот один вопрос как организовать как типа на фреймах. Тоесть шапка навигация и подвал у нас статичны все находится на 1 странице и не меняется а вот в div text при нажатии на ссылку грузится уже готовая страница. Я сделал через iframe но чета не оч удобно. можно ли как нибудь по другому реализовать изменеие содержания дива. Как вы это ремлизовали на своем сайте при клике на ссылку. Или у каждой страницы есть шапка и тд и тп и оно все целиком грузится???
336644086
vitalikse@gmail.com
я на связи
Для этого не обязательно использовать фреймы, от которых уже давно все отказались. Для этого существует обычный PHP. Шаблоны Вордпресс, к примеру, раз собраны на этом принципе: шапка, сайдбары и подвал единственны в своем роде и подключаются ко всем страницам сразу.
Урок суперский. Был сайт на табличной верстке.
На днях собираюсь делать блочную! И обязателно буду обращатся к уроку.
Доходчиво, понятно все написано. И для новичка подойдет.
Спасибо Вам!!! :)
И вам спасибо на добром слове! :)
Огромное спасибо за статью. Оказалась очень полезной. Но вот почему то Opera 10.01 вообще не открывает страницу. Почему такое происходит?
Наверное, глюк в самой Опере. Поробуйте переустановить.
Здравствуйте товарищи,объясните мне старому юзеру как шапку на сайте сделать на всю ширину?
Лев, вы имеете в виду свой форум?
Спасибо большое за уроки )
Прочитал уроки w3schools, заполировал вашим творением и вуаля - таблицы больше мне не кажутся такими хорошими и годными ))
P.S. отдельное спасибо за Strict
P.P.S. отсутствие ul в footer’е смутило
Roach, вэлкам!