| » Меню сайта |
Разделы сайта
Шаблоны
Скрипты
Статьи
Графика
|
|
Главная » 2008 » Сентябрь » 10 » Верстка (эпизод 1-й) – Базовые навыки.
Верстка (эпизод 1-й) – Базовые навыки. | 10.Сен.2008 | 17:27:23 |
Верстка (эпизод 1-й) – Базовые навыки.
Вступление
Доброго времени суток!!!
Вроде начало уже не плохое. 
Данная
ветка форума, насколько вы уже поняли, полностью будет посвящена
мастерству верстки web страниц, а именно, базовым навыкам
позиционирования элементов собственно самой страницы, которая бы
отвечала современным требованиям web-разработки. Но хочу предупредить
сразу, что слова «БАЗОВЫМ Навыкам» совсем не означает, что у вас не
должно быть знаний в области HTML и CSS, а совсем на оборот. То есть
что это означает. Базы по программированию на HTML и CSS в Интернет
предостаточно, и повторять одно и тоже по сто раз не иррационально и
просто глупо. Но вот как применять эти навыки, на самом то деле, никто
толком не рассказывает. Я не спорю, есть много мест где можно почитать
об их применении, но все всегда как-то разбросано, или на иностранном
языке. Вот поэтому, на мой взгляд, эта статья и должна быть вам
интересной, я постараюсь максимально удобно и доходчиво рассказать о
самых распространенных структурах страниц, и как они реализовываются с
помощью HTML и CSS. Это руководство поможет как новичкам, так и
более-менее профи, так же можно использовать как шпаргалку. Так что
вперед! Удачи!
Начнем…
1) Страница с фиксированной шириной.
Цитирую Примечание:
Дальше пойдет код, и только в первом случае HTML код будет с самого
начала, то есть шапка, подключения CSS… так же я добавил тройку фоновых
цветов для наглядности.
HTML - структура страницы с фиксированной шириной:
CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link media="all" href="css/all.css" rel="stylesheet" type="text/css" /> <title>структура страницы с фиксированной шириной</title> </head> <body> <div id="main"> <div class="header"> Верхушка </div> <div class="leftcolumn"> Левая колонка </div> <div class="content"> Центральная колонка </div> <div class="rightcolumn"> Правая колонка </div> <div class="footer"> Подвал </div> </div> </body> </html>
CSS - структура страницы с фиксированной шириной:
CODE #main {
margin: 0 auto;
width: 800px;
}
.header {
width: 800px;
height: 50px;
background: #36f;
}
.footer {
width: 800px;
height: 50px;
clear: both;
background: #006;
}
.leftcolumn {
width: 150px;
float: left;
}
.content {
width: 500px;
float: left;
background: #ccc;
}
.rightcolumn {
width: 150px;
float: left;
}
2) Страница с плавающей верхушкой и подвалом:
HTML – Структура страницы с плавающей верхушкой и подвалом:
CODE <div id="header"> Верхушка </div> <div id="main"> <div class="leftcolumn"> Левая колонка </div> <div class="content"> Центральная колонка </div> <div class="rightcolumn"> Правая колонка </div> </div> <div id="footer"> Подвал </div>
HTML – Структура страницы с плавающей верхушкой и подвалом:
CODE #main {
margin: 0 auto;
width: 800px;
}
#header {
width: 100%;
height: 50px;
background: #36f;
}
#footer {
width: 100%;
height: 50px;
clear: both;
background: #006;
}
.leftcolumn {
width: 150px;
float: left;
}
.content {
width: 500px;
float: left;
background: #ccc;
}
.rightcolumn {
width: 150px;
float: left;
}
3) Структура страницы с плавающей шириной «резиновая» с фиксированными колонками:
HTML - Структура страницы с плавающей шириной «резиновая» с фиксированными колонками:
CODE <div id="main"> <div class="header"> Верхушка </div> <div id="content-columns"> <div class="leftcolumn"> Левая колонка </div> <div class="content"> Центральная колонка </div> <div class="rightcolumn"> Правая колонка </div> </div> <div class="footer"> Подвал </div> </div>
CSS - Структура страницы с плавающей шириной «резиновая» с фиксированными колонками:
CODE #main {
width: 100%;
}
.header {
width: 100%;
height: 50px;
background: #36f;
}
.footer {
width: 100%;
height: 50px;
clear: both;
background: #006;
}
#content-columns {
margin: 0 150px 0 150px;
}
.content {
width: 100%;
float: left;
background: #ccc;
}
.leftcolumn {
width: 150px;
float: left;
margin-left: -150px;
display: inline; /* решает проблему в IE */
position: relative;
}
.rightcolumn {
width: 150px;
float: right;
margin-right: -150px;
display: inline; /* решает проблему в IE */
position: relative;
}
3.1) Структура страницы с плавающей шириной «резиновая» с фиксированными колонками и с заданной минимальной шириной:
Цитирую То
есть что это означает. Что это все та же «резиновая» страница, но с
одной поправкой, она имеет минимальную ширину при сворачивании окна
браузера. В примере 3 если окно браузера свернуть то колонки с лева и с
права могут почти полностью закрыть центральную колонку, что частенько
не приемлемо. А в данном случае указав минимальную ширину, допустим, в
800px, а боковые колонки у нас будут по 150px, мы добьемся того, что
хоть как не крути браузер 600px для нашей центральной колонки оставит в
любом случае! А код на самом то деле почти не меняется, только в CSS но
я для наглядности выложу все, как и в предыдущие разы.
HTML - Структура страницы с плавающей шириной «резиновая» с фиксированными колонками и с заданной минимальной шириной:
CODE <div id="main"> <div class="header"> Верхушка </div> <div id="content-columns"> <div class="leftcolumn"> Левая колонка </div> <div class="content"> Центральная колонка </div> <div class="rightcolumn"> Правая колонка </div> </div> <div class="footer"> Подвал </div> </div>
CSS - Структура страницы с плавающей шириной «резиновая» с фиксированными колонками и с заданной минимальной шириной:
CODE body {
margin: 0;
padding: 0;
min-width: 800px;
}
/* Следуящая запись нужна для IE */
* html body {
width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
}
#main {
width: 100%;
}
.header {
width: 100%;
height: 50px;
background: #36f;
}
.footer {
width: 100%;
height: 50px;
clear: both;
background: #006;
}
#content-columns {
margin: 0 150px 0 150px;
}
.content {
width: 100%;
float: left;
background: #ccc;
}
.leftcolumn {
width: 150px;
float: left;
margin-left: -150px;
display: inline; /* решает проблему в IE */
position: relative;
}
.rightcolumn {
width: 150px;
float: right;
margin-right: -150px;
display: inline; /* решает проблему в IE */
position: relative;
}
P.S.
Надеюсь данное руководство вам помогло. Если это действительно так
пишите отзывы, материала еще много, буду рад помочь и по возможности
выкладывать на этот замечательный форум. Удачи.
|
|
Категория: Статьй и уроки |
Просмотров: 560 |
Добавил: CorsaR
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
Копирование материалов разрешено,