Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 89 (2)


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru

Добрый день.
Сегодня продолжение темы о верстке слоями.

Верстка с помощью слоев

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

В данной статье мы рассмотрим приемы фиксированной верстки, когда элементы задаются определенной ширины (рис. 1).

1
2 3
4
Рис. 1. Типичная модульная сетка при фиксированном дизайне

Основные элементы страницы выделены на рисунке разными цветами и цифрами. Числа обозначают следующее: 1 - заголовок сайта, 2 - меню навигации, 3 - контент с заголовком страницы, 4 - контактная информация.

Построим следующую страницу. Общая ширина будет 750 пикселов, ширина левой части с меню - 200 пикселов, а оставшаяся часть, даже ежу понятно, - 500. Внизу страницы, кроме контактной информации, добавим еще и пару кнопочек размером 88 х 31, это типично для большинства сайтов.

Строки, где стоит обозначение /* 1 */ - это код, который выравнивает весь каркас по центру экрана. Если вы желаете, чтобы у вас страница размещалась по левому краю, закомментируйте эти строки или просто удалите их.

Пример. Код для фиксированной верстки

<html>
<head>
<style type="text/css">

BODY { /* Стиль основных элементов веб-страницы */

text-align: center; /* 1 */
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Verdana, Arial, sans-serif;

}


#container { /* Основной каркас страницы */

width:750px;
text-align: center; /* 1 */
margin-right:auto; /* 1 */
margin-left:auto; /* 1 */
}


#container2 { /* Основа для меню и контента */

background: #008000;
width: 750px;

}


#top { /* Верхняя часть с заголовком страницы */

text-align: left;
width: 750px;
background-color: #800000;
padding: 0px;
height: 50px;

}


#menu { /* Навигация по сайту */

width: 200px;
float: left;
color: white;
padding: 0px;

}


#content { /* Основное содержание страницы */

background-color: #e0e0e0;
padding: 0px;
margin-left: 200px;

}


#bottom { /* Нижняя часть */

width: 750px;
background-color: #000080;

}


#contact { /* Контактная информация */

float: left;
padding: 0px;
width: 500px;
text-align: left;

}


#button { /* Всякие кнопочки */

padding: 0px;
text-align: right;

}


H1 { /* Заголовок страницы */

text-align: center;
font-size: 220%;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
color: black;
padding: 0px;
margin: 0px;

}


#menu P { /* Разделы меню */

font-size: 100%;
font-weight: bold;
text-align: left;
padding: 10px;
margin: 0px;

}


#menu A { /* Ссылки в меню */

color: #ccffcc;
font-size: 90%;
font-weight: normal;

}


#menu A:visited { /* Посещенные ссылки в меню */

color: #c0c0c0;

}


#menu A:hover { /* Стиль ссылок при наведении на них курсора мыши */

background-color: #ffffc0;
width: 150px;
color: black;

}


#content P { /* Стиль основного текста */

font-size: 90%;
text-align: justify;
padding: 10px;
margin: 0px;

}


#contact P { /* Стиль контактов */

font-size: 80%;
padding: 5px;
color: #fffff0;
margin-top: 0px

}


#button P { /* Стиль размещения кнопочек */

text-align: right;
padding: 5px;
margin: 0px;

}


.title { /* Заголовок сайта */

font-size: 24px;
font-weight: bold;
color: white;
padding: 10px;

}

</style>
</head>

<body>

<div id=container>
<div id=top><span class=title>Заголовок сайта</span></div>

<div id=container2>
<div id=menu>
<p>Раздел 1<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>

<p>Раздел 2<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>

<p>Раздел 3<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>

</div>

<div id=content>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut acreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</div>

<div id=bottom>
<div id=contact><p><b>Контактная информация</b><br>E-mail: <u>vasya@pupkin.ru</u></div>
<div id=button><p><img src=images/sample.gif width=88 height=31 vspace=5> <img src=images/sample.gif width=88 height=31 vspace=5></p></div>
</div>
</div>

</body>
</html>

Если в приведенном коде что-то непонятно или не работает, пишите, задавайте вопросы, я постараюсь помочь разобраться.

В следующий раз постараюсь рассказать о разных хитростях размещения слоев.

Рекомендую подписаться на рассылку:
CenterINet - все для начинающих и опытных web мастеров
Всё о Photoshop
Всё из мира графического редактора Adobe Photoshop. Еженедельно и только для вас в рассылке последние новости и обновления ресурса http://psd.eserver.ru. Не пропустите десятки увлекательных статей о Photoshop и компьютерной графике!
Новичку, интересующемуся, профессионалу!
 

  Разделы сайта
 
Создание сайта
  HTML
  CSS
  Динамический HTML
  Графика
  Дизайн
  Приемы верстки
  Инструментарий
  Справочная информация
  Шаблоны
  Форум

  Подписка на новости
  Введите ваш e-mail:
  Помощь
  Не знаете, с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное