Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
Пятница, 19 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 609
Подписаться на комментарии по RSS
В уроке 12 мы научились подключать таблицы стилей к нашей html странице и рассмотрели некоторые варианты работы с текстом на странице.
На этом уроке мы создадим первые страницы нашего сайта с использованием СSS!
Как Вы помните из урока 11, блочные элементы визуально создают самостоятельную структурную единицу – блок. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Блоки имеют содержимое и отступы вокруг содержимого. Так же они имеют границы, которые можно показать, а можно скрыть, как в таблицах. Границы можно задать для каждой стороны блока: border-top - верхняя граница, border-right - правая граница, border-bottom - нижняя граница, border-left - левая граница. Ещё блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока, и Padding (отступы) - позволяют отделить содержимое блока от границы.
Теперь давайте на практике посмотрим что из себя представляет блочный дизайн сайта!
Какого результата мы хотим достичь? Мы создадим три страницы, к которым подключим одну, общую таблицу стилей! Таким образом, мы избавимся от громоздкого кода на каждой странице нашего сайта, пример которого вы видели в уроке 8, при создании табличного дизайна сайта. Это была очень трудоёмкая работа, не так ли? Теперь всё будет гораздо быстрее и удобнее с помощью CSS!
Наши страницы будут иметь следующий вид:
1) Главная страница нашего сайта
На этой странице мы создадим ссылки на две другие страницы нашего сайта.
2) Вторая страница сайта
Эта страница будет иметь тот же дизайн, но, обратите внимание – у нас будет отличаться содержимое!
3) Третья страница сайта
Эта страница будет так же иметь отличия в содержимом!
Напоминаем, что фоновое изображение, цвета блоков и текста, та же как и шрифт, размер текста и вообще сам текст на Вашем сайте могут (и должны) отличаться! Не бойтесь экспериментировать, создавая свой уникальный сайт!
Что ж, покончим с лирикой и перейдем к сайтостроению!
Для начала нам нужны файлы index.html (главная страница) и style.css (таблицы стилей).
Откроем файл главной страницы и пропишем там такой код:
<html> <head> <title>Мой сайт/главная</title> <link rel="stylesheet" type="text/css" href="style.css"><!—подключаем таблицу стилей--> </head> <body> </body> </html>
Здесь мы прописали имя заголовка страницы и подключили (пока ещё пустую) таблицу стилей.
Что нам требуется сделать дальше? Для использования блочной модели, нам необходимо разбить нашу страницу на блоки: header (шапка сайта), left_bl (левый блок), center_bl (центральный блок), right_(правый блок) и footer (нижний блок).
Как Вы помните, блоки задаются с помощью div. Давайте добавим их в наш код:
<body> <div id="block"><!--Задаём id группы--> <div class="header</div> <div class="left_bl"></div> <div class="center_bl"></div> <div class="right_bl"></div> <div class="footer"></div> </div> </body>
Блоки на странице у нас теперь есть… Вот только мы их не увидим, т.к. они ничего не содержат, ни текста, ни фона… Не спешите задавать эти параметры в коде страницы! Мы их зададим в нашей таблице стилей! Откройте наш файл style.css и пропишем в нём свойства для каждого блока. Для начала зададим фоновый цвет и фоновое изображение для всей страницы:
body{background-color: #e0ffff;
background-image:url(g.jpg);}
Далее начнём обрабатывать каждый блок. Обозначим группу блоков по id:
1)
#block {width:950px; margin:0 auto;
background-color:#e4e4ad}В этой строке мы говорим, что общая ширина блоков будет занимать 950 пикселей на странице. Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон. У нас отступ будет зависеть от содержимого. И так же задаём основной цвет фона всех блоков (он будет являться родительским для остальных блоков).
2)
.header {width:950px; height:100px;
background-color:#a5a57a}
В этой строке мы задаём параметры для верхнего блока страницы. Здесь ширины будет так же 950 пикселей, высоту зададим 100 пикселей и определим цвет фона для этого блока.
3)
.left_bl {width:148px; height:650px;
float:left; border-right:2px dashed #a5a57a;
margin-bottom:-15px}
Для левого блока зададим ширину в 148 пикселей, для блока, содержащего меню этого будет достаточно, высоту зададим 650 пикселей, обтекание слева, и зададим свойство для правой границы со штриховой иллюстрацией (dashed) размером в 2 пикселя и выбранным цветом. Так же зададим свойство margin-bottom в отрицательном значении для того, чтобы лишние штрихи обрезались.
4)
.center_bl {width:600px; float:left}
Для центрального блока зададим ширину и обтекание слева.
5)
.right_bl {width:148px; height:650px;
float:left; border-left:2px dashed #a5a57a;
margin-bottom:-15px}
Для правого блока так же зададим ширину и высоту, обтекание, штриховую иллюстрацию границы (но теперь левой) и обрезку лишних штрихов.
6)
.footer {width:950px; height:70px;
background-color:#a5a57a; clear:both}
Последнему, нижнему блоку мы зададим ширину (как и верхнему), высоту, фоновый цвет, и отменим обтекание с обеих сторон свойством clear:both.
Полный листинг кода для файла styles.css, будет выглядеть так:
body{background-color: #e0ffff;
background-image:url(g.jpg);}
#block {width:950px; margin:0 auto; background-color:#e4e4ad}
.header {width:950px; height:100px; background-color:#a5a57a}
.left_bl {width:148px; height:650px; float:left;
border-right:2px dashed #a5a57a;
margin-bottom:-15px}
.center_bl {width:600px; float:left}
.right_bl {width:148px; height:650px;
float:left; border-left:2px dashed #a5a57a;
margin-bottom:-15px}
.footer {width:950px; height:70px;
background-color:#a5a57a; clear:both}Теперь у нас есть таблица стилей, которая привязана к нашей странице. Есть блоки, но в них нет содержимого… Давайте добавим его:
<html> <head> <title>Мой сайт/главная</title> <link rel="stylesheet" type="text/css" href="style.css"><!—подключаем таблицу стилей--> </head> <body> <div id="block"> <div class="header"><h1 align="center">Имя сайта</h1></div> <div class="left_bl"><p align="center">Меню</p> </div> <div class="center_bl"> <h2 align="center">Основное содержимое</h2> <h4 align="center">Главной страницы Вашего сайта</h4> </div> <div class="right_bl"><p align="center">Ссылки</p> <center><a href="1t.html"> страница 2</a></center><br> <center><a href="2t.html"> страница 3</a></center><br> </div> <div class="footer"><p>© 2011</p></div> </div> </body> </html>Теперь сохраните изменения в файлах index.html и style.css и откройте главную страницу в браузере.
Поздравляем! Вы создали первую страницу с использованием блочной модели css!
Но это еще не всё! Давайте, теперь, создадим еще две страницы для нашего сайта, к которым будет подключена та же таблица стилей, но содержимое изменится!
Для страницы 1t.html пропишем такой код:
<html> <head> <title>Мой сайт/другая страница</title> <link rel="stylesheet" type="text/css" href="style.css"><!—подключаем нашу таблицу стилей--> </head> <body> <div id="block"> <div class="header"><h1 align="center">Имя сайта</h1></div> <div class="left_bl"><p align="center">Меню</p> <center><p><a href="index.html"> Главная</a></p></center><br><br> </div> <div class="center_bl"> <h2 align="center">Основное содержимое</h2> <h4 align="center">второй страницы Вашего сайта</h4> </div> <div class="right_bl"><p align="center">Ссылки</p> <p><center><a href="2t.html"> страница 3</a></center><br><br></p> </div> <div class="footer"><p>© 2011</p></div> </div> </body> </html>
И для страницы 2t.html:
<html> <head> <title>Мой сайт/другая страница</title> <link rel="stylesheet" type="text/css" href="style.css"><!—подключаем таблицу стилей--> </head> <body> <div id="block"> <div class="header"><h1 align="center">Имя сайта</h1></div> <div class="left_bl"><p align="center">Меню</p> <center><p><a href="index.html"> Главная</a></p></center><br><br> </div> <div class="center_bl"> <h2 align="center">Основное содержимое</h2> <h4 align="center">третей страницы Вашего сайта</h4> </div> <div class="right_bl"><p align="center">Ссылки</p> <p><center><a href="1t.html"> страница 2</a></center><br><br></p> </div> <div class="footer"><p>© 2011</p></div> </div> </body> </html>
Теперь сохраните эти страницы и попробуйте перейти по ссылкам на страницы.
Полагаем, Вы заметили, что общий дизайн на страницах не отличается, только содержимое! И, замете, это притом, что каждая страница нашего сайта не содержит громоздкого кода для описания свойств её содержимого! Всё это заменяет единственный файл style.css!!!
На этом наш урок закончен.
Всем удачи! До встречи на следующем уроке!
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 14. Создаём кнопку в CSS.
Мне очень понравился урок! Все понятно, логично и просто по созданию блока. Мне было интересно.Я бы хотела научиться создавать блоки и сайты и уметь создавать правильный и красивый их дизайн. И уроки на этом сайте мне очень помогают в этом.
позновательно
Спасибо познавательно, как раз нашол то что искал. Спасибо автору за статью, даже не знаю сколько времени я бы провёл делая сайт если не ваш комплекс статей.
Я много читал уроков по блокам с CSS. Но этот подан очень хорошо. Мне иногда в джумле приходится менять дизайн. Поэтому я даже сохранил его в закладках, чтобы при надобности что-то вспомнить, не искать инфу в сети.
Эх, как мне не хватало таких ресурсов как Ваш, когда я училась в вузе. Помню, долго у меня не получалось освоить таблицы стилей CSS. Сейчас пытаюсь заново воссоздать в мозгу создание сайтов, для себя. Урок доступно выстроен
Хех, Арина, верно подмечено насчет вуза! У меня как-то был почти весь семестр пропусков по ИТ и телекоммуникациям, а там на зачет надо было сайт писать с определенным обязательным набором объектов, вот я намучилась с этими css таблицами, попалась бы эта статейка мне на 2 курсе - я бы не сидела бессонные ночи с красными глазами за компом. Все понятно и доступно
Спасибо за прекрасный урок! Давно хотела научиться делать дизайны с помощью блочной верстки, а тут эта статья попалась! Много полезного узнала и поняла как делать правильно) еще раз спасибо!
очень доступно и с примерами. спасибо