Основы HTML и CSS верстки на примере.Верстаем шапку сайта.
Итак, шапка у нас состоит из четырех частей: две части - самые верхние, две нижние. Две верхние части будут находиться в следующем блоке:
Версия для печати
Полная версия
#topbl{
background-color:#003366;
width: 100%;
height: 145px;
border: 1px solid #99ccff
}
Он у нас будет на всю ширину броузера с рамкой вокруг. Высота 145px.
Далее мы его разделим на левую и правую части. Причем сделаем следующим образом. Пусть левая часть у нас будет иметь фиксированную ширину 200px, а правая будет занимать все оставшееся место:
левый блок:
#leftbl {
float: left;
width: 200px
}
правый блок
#rightbl {
position: absolute;
left: 200px
}
Эти блоки необходимо разделить вертикальной линией, поэтому сделаем с правой стороны левого блока border - border-right: 1px solid #99ccff, причем, чтобы эта часть рамки блока не обрывалась и была высотой 145px, как и внешний блок, необходимо для него указать height: 100%. В данном случае высота блока будет определяться высотой родительского элемента (в данном случае - topbl). Ну вот, начало положено .
Теперь будем заполнять наши блоки. Каждое слово из надписи левого блока (Белорусский национальный техническтй университет) состоит из двух частей: первая буква, которая имеет больший шрифт и остальная часть слова. Кроме того необходимо установить больший промежуток между буквами, использую letter-spacing. Для всей надписи определим следующий класс:
.bntu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #fff;
letter-spacing: 3px;
font-weight: bold
}
Переопределим размер шрифта для первых букв каждого слова:
.big
{
font-size: 16pt
}
Для левого блока добавим слева и справа отступы: padding-right: 4px;padding-left: 4px.Теперь html-код у нас такой:
<div id=topbl> <div id=leftbl class= bntu> <span class=big>Б</span> елорусский<br> <span class=big>Н</span> ациональный<br> <span class=big>Т</span> ехнический<br> <span class=big>У</span> ниверситет </div> <div id=rightbl> </div></div>
Ну вот, еще один этап пройден .
Теперь займемся Экономикой и бизнесом. На макете видно, что элементы этой надписи имеют не совсем нормальное расположение и каждый из них придется позиционировать отдельно. Давайте начнем со слова Бизнес. Но перед этим для всей надписи создадим класс, в котором укажем цвет и гарнитуру шрифта, так как для всех слов эти значения одинаковы:
.title{
font-family: "Times New Roman", Times, serif;
color: #FFFFFF
}
Теперь определим блок, в котором будет находиться Бизнес (отступы пока возьмем наугад):
#buis {
position: absolute;
left: 10px;
top: 10px
}
Далее создадим класс для большой буквы Б и остальной части слова:
.buisnes{
font-size: 136px
}
.bigb {
font-size: 180px
}
Как видите, в этих классах ничего кроме размера шрифта мы не указываем, поэтому можно было бы обойтись и без них. Если посмотреть результат, то Вы увидите, что слово у нас съехало вниз за пределы блока. Подбор верхнего отступа экспериментальным путем дал значение -30px. Отступ слева можно сделать по-больше, пусть будет 30px. Готово.
Осталось совсем мало. Обратите внимание на то, что символ & можно написать как нижний индекс перед словом Экономика. Давайте определим для него соответствующий класс:
.and {
font-size: 36px;
font-style: italic
}
Экономика у нас написана другой гарнитурой, поэтому для нее класс будет следующим:
.econ {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
font-weight: bold
}
Чуть не забыл, нам же надо еще создать соответствующий блок (его положение подбиралось экспериментально - а чего голову зря ломать?)
#int {
position: absolute;
left: 120px;
top: 5px
}
В результате мы получаем следующий код:
<div id=rightbl class=title> <div id=buis> <span class="bigb">Б</span> <span class="buisnes">изнес</span> </div> <div id=int><span class=and> <sub>&</sub> </span> <span class="econ">Экономика </span> </div> </div>
По-моему получилось симпатично .
Нижняя часть шапки - дело техники. Высота у нее будет 50px. Блок будет следующим:
#line {
background-color: #003366;
width: 100%;
height: 50px;
border: 1px solid #99ccff;
border-top: 1px solid #003366
}
Рамку сверху мы не рисуем, т.к. она там уже есть от верхнего блока, поэтому мы ее зарисуем цветом фона, это займет меньше места, чем если бы мы рисовали три рамки отдельно. Если бы мы этого не сделали, то линия между верхним и нижним блоком была бы двойной толщины. Для разделения на левую и правую часть воспользуемся уже имеющимися блоками leftbl и rightbl. Для текста воспользуемся следующими классами:
Дата изменения:
.data {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #cccc33
}
Название кафедры
.kaf {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff;
letter-spacing: 3px;
text-indent: 50px
}
Видно, что в этих классах есть одинаковые объявления. Их можно выделить в один класс, как мы уже делали ранее, а можно воспользоваться группировкой:
.data, .kaf{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;}
.data { color: #cccc33}
.kaf { color: #fff;
letter-spacing: 3px;
text-indent: 50px}
В итоге весь код у нас имеет вид:
<div id=line> <div id=leftbl class=data> Дата последнего<br> изменения:<br> <div align=right>12.12.2002</div> </div> <div id=rightbl class=kaf align=right> Сайт кафедры экономика машиностроения и <br> Основы бизнеса </div></div>
Казалось бы, что это и все . На макет похоже, во всех броузерах выглядит одинаково (за исключением левой нижней части, не во всех броузерах она находиться в крайнем правом положении). Но... Давайте внимательно посмотрим что у нас получилось. Было бы неплохо, если бы левая часть шапки центрировалась при изменении размера окна. Скажу сразу, что для того, чтобы отцентрировать блок в MSIE необходимо указать для него text-align: center. Для остальных броузеров центрирование блока происходит, если для него указано margin-left: auto и margin-right: auto. Но проблема в том, что блоки у нас имеют абсолютное позиционирование, поэтому у нас ничего не получится. Нет, конечно для конкретного броузера можно добиться желаемого, но для них для всех...
Начнем по порядку. Уберем абсолютное позиционирование у блоков rightbl, int и buis, а вместо координат позиционирования укажем границы с теми же значениями, а для rightbl установим левую и правую границу в auto:
#rightbl{
margin-right: auto;
margin-left: auto}
#int {
margin-left: 120px;
margin-top: 5px}
#buis {
margin-left: 30px;
margin-top: -30px
}
Очевидно, что теперь нам надо сместить слова Экономика и бизнес ближе друг к другу, как это было реализовано с помощью абсолютного позиционирования. Это можно реализовать с помощью line-height - то есть уменьшим высоту строк. Экспериментальным путем определим для класса title значение 0.6. Также, при объявлении блока topbl необходимо указать align=center.
Ну вот .
Немного наведем марафет. Левая граница для buis и int роль большую не играет, но перед словом Экономика необходимо вставить несколько неразрывных пробелов:
.title{
font-family: "Times New Roman", Times, serif;
color: #FFFFFF;
line-height:0.6}
...
#rightbl{
margin-right: auto;
margin-left: auto}
#buis{
margin-top: -30px}
И сам код:
<div id=topbl align=center> <div id=leftbl class= bntu align=left> <span class=big>Б</span> елорусский<br> <span class=big>Н</span> ациональный<br> <span class=big>Т</span> ехнический<br> <span class=big>У</span> ниверситет </div> <div id=rightbl class=title> <div id=int> <span class=and> <sub>&</sub></span> <span class="econ">Экономика</span> </div> <div id=buis> <span class="bigb">Б</span> <span class="buisnes">изнес</span> </div> </div></div>
Кстати, что касается центрирования, то его можно было сделать и другим способом. Например, так. Для начало растянуть правый блок на всю ширину экрана, отцентрировать его, а затем отступом или границей или как-то еще отодвинуть вправо на ширину левого блока (200px). Затем абсолютным позиционированием расположить слева нужный нам блок (БНТУ). Результат получился бы тот же. Смотрите сами . Лично мне этот вариант больше нравится.
