ГлавнаяДелаем сайт - блочная верстка → Урок 2. Оформляем страницу

Оформляем страницу

Продолжаем тему блочной верстки сайта. Начнем с блока header, в котором надо разместить название сайта и слоган. Для этого в блок header поместим 2 соответствующих блока headertext1 и headertext2, а в них необходимый текст:
<div id="header"> <div id="headertext1">Льяно-Эстакадо</div> <div id="headertext2">насладись вкусом!</div> </div>
Теперь зададим стили для новых блоков. Очевидно, что эти блоки плавающие, шириной около 1/3 от родительского блока (800px:3=270px) и прижаты к правому краю (свойство float:right ).

Чтобы второй блок располагался ниже первого, а не прижимался к нему, запретим его обтекание справа (clear:right), а для того, чтобы он был немного смещен влево (как на картинке), уменьшим его ширину на 20px.

Наконец, зададим шрифт, его размер и цвет, а также отступы сверху:
#headertext1{ width:270px; float:right; font-size:24px; font-family:Arial; padding-top:30px; color: #FFFFFF; } #headertext2{ width:250px; float:right; clear:right; font-size:20px; font-family:Arial; padding-top:5px; color: #FAF46E; }
Теперь займемся блоками меню, их три: первые два содержат ссылки, третий - простой текст. Поступим так же, как с блоком header, т.е. создадим в каждом по блоку и уже в них поместим наши ссылки и текст. Так как ссылки на нашей странице оформлены по-разному, то ссылкам в этих блоках присвоим класс menu:
<div id="menu1"> <div id="textmenu1"> <a href="#" class="menu">Меню</a> | <a href="#" class="menu">Заказ столика</a> | <a href="#" class="menu">Отзывы</a> </div> </div> <div id="menu2"> <div id="textmenu2"> <a href="#" class="menu">Уголок шеф-повара</a> | <a href="#" class="menu">О нас</a> </div> </div> <div id="menu3"> <div id="textmenu3"> Звоните нам по телефону (495) 123-4567 </div> </div>
Теперь зададим стили. Блокам надо задать отступы слева и сверху так, чтобы их содержимое располагалось по центру:
#textmenu1{ padding-left:270px; padding-top:10px; } #textmenu2{ padding-left:300px; padding-top:10px; } #textmenu3{ padding-left:250px; padding-top:35px; font-size:14px; color:#FFFFFF; }
У ссылок надо убрать подчеркивание, задать цвет и размер. Чтобы ссылки не прижимались друг к другу, зададим им отступы слева и справа:
a.menu{ text-decoration: none; color:#000000; font-size:15px; padding-left:10px; padding-right:10px; }
Теперь займемся блоком reklama, он состоит из трех блоков, причем текст будет располагаться в первых двух. В них мы и добавим по блоку:
<div id="reklama"> <div id="reklama_top"> <div id="textreklamatop">Вы можете прямо сейчас заказать столик в ресторанах:</div> </div> <div id="reklama_text"> <div id="textreklamatext"> <a href="#" class="reklama"> Баттисета’с</a> <a href="#" class="reklama"> Бифштекс Чарли Палмера</a> <a href="#" class="reklama"> Драфт</a> <a href="#" class="reklama"> Лимончелло</a> <a href="#" class="reklama"> Мили</a> <a href="#" class="reklama"> Эйфелева башня</a> <a href="#" class="reklama"> Хьюго</a> </div> </div> <div id="reklama_bottom"></div> </div>
Обратите внимание, ссылки в этом блоке отличаются от других, поэтому и имеют свой класс reklama. Займемся стилями. Для блока textreklamatop надо задать отступы, цвет и размер текста:
#textreklamatop{ padding:25px 25px 0px 10px; font-size:14px; color:#FFFFFF; font-weight:bold; }
Блоку textreklamatext нет необходимости задавать стиль, а вот ссылкам внутри него надо задать отступы слева и справа, цвет и размер. Ссылки являются строчными элементами, а у нас они должны располагаться одна под другой, для этого зададим им свойство display:block. Чтобы ссылки располагались свободно, зададим расстояние между строк свойством line-height. А для того, чтобы первая буква ссылок была зеленого цвета (как на картинке) воспользуемся псевдоклассом first-letter:
a.reklama{ display:block; line-height:30px; text-decoration: none; color:#000000; font-size:14px; padding-left:10px; padding-right:10px; } a.reklama:first-letter{ color:#02663d; }
Надеюсь, вы проверяете результат в браузере после каждого изменения?

Продолжим, нам осталось оформить только блоки content и footer. Они не требуют дополнительных блоков, им надо задать отступы, а для блока footer - горизонтальное выравнивание:
#content{ float:left; width:507px; padding:15px; } #footer{ clear:both; width:800px; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px; }
Теперь добавим сам текст:
<div id="content"> <img src="images/bludo1.jpg" align="left"> <a href="#">Бельгийская кухня</a><br> Тонкое смешение местных традиций с иностранным влиянием соседних земель - Франции, Германии, Италии, Голландии, Испании и Скандинавии. Бельгийцы любят говорить, что блюда их кухни готовятся с французским изяществом и подаются с немецким великодушием. <div style="clear:both"></div> <a href="#">Итальянская кухня </a><br> <img src="images/bludo2.jpg" align="right"> Для большинства людей - это пицца, ризотто, кьянти и макароны (или паста). Однако при более детальном знакомстве с рецептами итальянской кухни выясняем, что в Италии нет как таковой национальной кухни, поскольку и сама Италия как единое государство в современных границах существует немногим более одного столетия. </div> <div id="footer"> © 2009 Все права защищены </div>
Ссылки в тексте не имеют класса, это будут ссылки по умолчанию, т.е. те, которые будут использоваться на всех страницах сайта, если не указано иное. Поменяем для них только цвет:
a{ color:#000000; }
Нам осталось задать шрифт и размер для всего сайта. Для этого добавим эти свойства в стили тега body:
body{ width:800px; padding-left:50%; margin:0px; font-family:Arial, Helvetica, sans-serif; text-align:left; font-size:12px; }
И последний нюанс: сделаем так, чтобы при наведении курсора мыши на ссылки, их цвет менялся на зеленый:
a:hover{ color:#02663d; }
Все. Наша страница выглядит также, как на картинке, а именно вот так.

А что, если мы хотим сделать резиновый дизайн? Об этом поговорим в следующем уроке.



Предыдущий урок Вернуться в раздел Следующий урок 
Скачайте одним архивом книгу по созданию сайтов с нуля!
Выбираешь сервис автоматизации постинга на стену вконтакте? Выбирай planpost.ru - сервис отложенного постинга вконтакте

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.


Уроки PHP Код кнопки:


Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.