| LSD | Дата: Воскресенье, 21.08.2011, 02:25 | Сообщение # 1
|
 Легенда Зоны
Группа: Администраторы
Сообщений: 619
Статус:  | В настоящее время наиболее популярной для создания каркаса сайта является блочная верстка или как её по другому называют div верстка. Давайте рассмотрим основные макеты: фиксированные, резиновые - двух и трехколоночные и научимся их создавать.
Делаем два документа один из них блочная верстка.html, другой стили.css. Связываем два документа между собой при помощи кода: <link href="стили.css" rel="stylesheet" type="text/css">, который пишется в голове документа html. Затем в теле документа создаем контейнер в который и будем помещать остальные блоки. Записывается это так:
<body>
<div id=”container”>
<div id="header"> </div> шапка документа;
<div id="left"> </div> левая колонка;
<div id="content"> </div> основа( где размещается текст)
<div id="footer"> </div> подвал
</div>
Используя этот код вы получите двухколоночный макет, если нужен трех, то просто добавляем после 5 строчки <div id="right"> </div>. Затем переходим в документ стили.css, и задаем отступы телу документа. Для блока container ставим его ширину и выравниваем по центру, выглядит это следующим образом:
body, html {
margin:0px;
padding:0px;
text-align:center; /*выравниваее в старых браузерах по центру */
}
#container{
margin:0 auto; /*в современных браузерах производим выравнивание макета по центру */
text-align:left; /*отмена выравнивания заданного в body. Тест будет выровнен по левому краю */
width:700px; /* ширина макета*/
}
Теперь можно двигаться дальше. Задаем цвет оставшимся блокам, а для левой колонки еще ширину.
#header{
background-color:#851E7A;
}
#left{
background-color:#DF2F20;
width:160px; /*ширина колонки */
}
#content{
background-color:#353CCA;
}
#footer{
background-color:#79D286;
}
Следующим шагом мы должны получить, чтобы блок контент обтекал левую колонку. Для этого нужно ввести обтекание:
#left{
background-color:#DF2F20;
width:160px;
float: left;
}
У нас получится, что все блоки расположенные ниже данного блока будут обтекать его, а если начать вводить тест в контенте, то этот блок уйдет еще и вниз. Для того чтобы избежать этих казусов нужно задать отступ блоку content чуть больше, чем ширина левой колонки, а перед подвалом создать пустой блок с минимальной высотой, тем самым получим желаемый результат:
#content{
background-color:#353CCA;
margin-left: 162px;
}
#clear{
clear: both;
height: 0px;
font-size: 1px;
line-height: 0px;
#footer{
background-color:#79D286;
}
Трехколоночный макет делается таким же образом, только для правой колонки отображается все зеркально. А чтобы макет был резиновый и текст не наезжал друг на друга(при сужении окна браузера), следует в контейнере задать ширину 100% и минимальную например 600px:
#container{
margin:0 auto;
text-align:left;
width:100%;
min-width: 650px;
}
|
| |
| |
