Верстка макета, подробнее Часть3
Доброго времени суток дорогой читатель Блога RS! Сегодня мы с Вами закончим работу над нашей html страничкой которую мы начали верстать в статье "Верстка макета, подробнее Часть 1". Для того чтобы понять о чем вообще идет речь, Вам стоит почитать предыдущие статьи. Так, что же нам осталось сверстать? Нам предстоит создать центральную часть нашей странички, левую часть нашей странички и поместить логотип. Сегодня мы научимся работать с текстом, задавать стиль шрифта, управлять размером шрифта. По моим предварительным наброскам нам будет необходимо создать приблизительно семь классов, одну табличку и несколько дивов. Обо всем этом мы говорили в предыдущих статьях, поэтому сильно отвлекаться на изученные элементы и теги мы не будем. Ну что ж, приступим?
Давайте для начала я приведу Вам схему, в которой поясню где будут находится наши новые объекты, и как мы их туда поместим:
Как Вы могли заметить мы поместим наше меню и центральную часть в таблицу. Само меню и мини новости будут представлены в виде дивов. Логотип тоже будет находится в диве. Что касается логотипа, мы его абсолютно позиционируем и сместим в левую часть экрана. Почему именно так? Не знаю, логотип можно разместить многими способами, но мы разместим именно так 
Вот графика для сегодняшней статьи: Дополнение к папке img
Логотип
Начнем мы пожалуй с логотипа. Прежде чем я начну писать стили, оговорюсь... Код нашей странички слишком большой, поэтому я буду выкладывать лишь сами классы стилей, я надеюсь вы уже запомнили что писать их следует в теге <style>...</style>
Логотип думаю стоит поместить прям в наш див в котором мы пускали нашу белую полоску по экрану, но прежде давайте напишем сам стиль... Назовем его logo
.logo
{
position:absolute;
left:50%;
top:5px;
margin-left:-370px;
}
Вам должна быть знакома эта запись из предыдущей статьи, так что не буду зацикливаться на этом классе, единственное, что хочу сказать, это то что отступы я подгонял на глазок, тут нет никаких математических расчетов
Как уже говорил поместим наше лого в див верхней белой полоски:
<!-- ВЕРХНЯЯ БЕЛАЯ ПОЛОСКА -->
<div class="top_bg"><img class="logo" src="img/logo.png" border="0px"></div>
<!-- ВЕРХНЯЯ БЕЛАЯ ПОЛОСКА -->
Вот что получилось:
Разместим таблицу
Теперь нам необходимо поместить новую таблицу в тег <td>...</td> нашей старой таблицы... При этом необходимо отредактировать сам тег <td> таким образом, чтобы наша новая таблица размещалась вверху, то есть нужно вставить атрибут valign="top"
<!-- ТАБЛИЦА -->
<table class="table" width="780px" height="700px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="left" width="25px"></td>
<td class="center" valign="top">
<!-- ВТОРАЯ ТАБЛИЦА -->
<table width="730px" height="500px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<!--ЛЕВЫЙ БЛОК-->
<td></td>
<!--ЛЕВЫЙ БЛОК-->
<!--ПРАВЫЙ БЛОК-->
<td width="210px"></td>
<!--ПРАВЫЙ БЛОК-->
</tr>
</table>
<!-- ВТОРАЯ ТАБЛИЦА -->
</td>
<td class="right" width="25px"></td>
</tr>
<tr>
<td class="left_bottom" width="25px" height="25px"></td>
<td class="bottom"></td>
<td class="right_bottom" width="25px" height="25px"></td>
</tr>
</table>
<!-- ТАБЛИЦА -->
Я поместил нужный нам атрибут в сточку <td class="center">. Поместил вторую таблицу с шириной и высотой чуть поменьше нашей первой таблицы. Благодаря атрибуту valign="top" наша новая табличка размещена вверху. Так же под правое меню ( парвый блок ) я выделил 210 пикселей, думаю нам этого хватит.
Вот что получилось у меня:
Если вы делаете эти шаги вместе со мной, то Вы скорее всего не увидите нашу табличку, я выставил бордюр 1 пиксель для нашей новой таблицы, что бы показать Вам на скрине... а в коде - бордюр должен быть ноль пикселей!
Теперь нам необходимо сдвинуть нашу новую таблицу вниз, для того чтобы она не накладывалась на лого... Сдвинем мы ее путем внедрения нового элемента стиля padding. Этот элемент ставит отступ внутри тега, а не снаружи как это делает элемент margin. Найдем в нашем коде стиль center и добавим в него новый элемент:
.center{background-color:#fff;padding-top:50px;}Мы выставили внутренний верхний отступ тега <td class="center" valign="top"> нашей первой таблицы. Вот что получилось:
Теперь давайте выставим бордюрчик который отделяет меню от центральной части. Для этого напишем стиль:
.border{border-left:1px solid #E8E8E8;}Левый сплошной бордюр толщиной 1 пиксель с цветом - #E8E8E8. Выставим этот стиль тегу <td> нашего правого блока:
<!--ПРАВЫЙ БЛОК-->
<td class="border" width="210px"></td>
<!--ПРАВЫЙ БЛОК-->
Вот результат:
Правый блок
Тут все довольно просто.
- Один див будет отвечать за заголовок меню
- Остальные дивы будут пунктами меню
И того получается, что нам нужно 4 дива ( на макете видно 3 пункта меню и заголовок ) Давайте для начала напишем стиль для нашего заголовка:
.menu_title
{
border-left:5px solid #D9D9D9;
border-bottom:1px solid #D9D9D9;
width:163px;
text-align:center;
margin-left:16px;
font-size:14px;
}
Я прокомментирую каждый элемент:
- border-left:5px solid #D9D9D9; - Выставляем сплошной ( solid ) левый бордюр толщиной 5 пикселей, бордюр будет серого цвета ( #D9D9D9 )
- border-bottom:1px solid #D9D9D9; - Сплошной нижний бордюр толщиной 1 пиксель, серый цвет ( #D9D9D9 )
- width:163px; - Ширина, выставлял на глазок
- text-align:center; - Этот элемент отвечает за положения текста внутри тега <div> свойства элемента говорит нам что текст будет по центру
- margin-left:16px; - Отступ от левого края, если не выставить то наш бордюрчик в 5 пикселей будет сливаться с гранью между левым и правым блоком
- font-size:14px; - размер шрифта
В этом стиле очень полезные элементы, запомните их!
Теперь напишем стиль для пунктов меню. Он очень схож с стилем заголовка, смотрим:
.menu_link
{
border-bottom:1px solid #D9D9D9;
width:162px;
margin-left:16px;
padding:3px;
}
Все свойства элементов расставлял на глазок. Пришло время отредактировать наш правый блок
<!--ПРАВЫЙ БЛОК-->
<td class="border" width="210px" valign="top">
<!--МЕНЮ-->
<div class="menu_title">Меню</div>
<div class="menu_link">Пункт</div>
<div class="menu_link">Пункт</div>
<div class="menu_link">Пункт</div>
<!--МЕНЮ-->
</td>
<!--ПРАВЫЙ БЛОК-->
В тег <td> я вставил атрибут valign="top", думаю догадываетесь почему Создал 4 дива для первого выставил класс заголовка, для остальных класс пункта, вот что получилось:
Сейчас думаю самое время выставить шрифт нашей странички. Давайте будем использовать Trebuchet MS, он довольна симпатичный Находим наш стиль body и правим его
body
{
background-image:url(img/bg.jpg);
background-position:left top;
margin:0px;
font-family:Trebuchet MS;
font-size:12px;
font-weight:100;
}
Элемент font-family отвечает за семейство шрифтов.
font-weight - за толщину шрифта, я выставил самый минимальный - 100. Его можно увеличивать, до скольки? Я если честно не знаю... но если нужно выставить жирный, то используется не цифра а слово - bold
Левый блок
Думаю пора приступить к реализации наших мини обзорчиков на страничке Одна такая мини новость будет оформляться тремя дивами:
- Первый будет содержать в себе название новости, оформляться фоновым изображением
- Второй будет содержать сам текст мини новости
- Третий же, будет содержать небольшую картинку в центре.
Приступим к написанию этих трех стилей, для начала создадим стиль заголовка наших мини новостей
.title_txt
{
height:32px;
background-image:url(img/fon_title.jpg);
background-position:top left;
background-repeat:no-repeat;
padding-top:5px;
padding-left:10px;
font-size:15px;
}
Высота нашего дива будет равна высоте нашего фонового изображения. Внутренние отступы делаются на глазок. Все элементы Вам известны.
Настроим стиль текста наших мини новостей
.txt
{
text-align:justify;
padding-left:0px;
padding-right:10px;
padding-bottom:5px;
}
Самый главный элемент тут это text-align:justify; с помощью свойства justify мы растягиваем текст по ширине. Очень красивый эффект остальные отступы сделаны на глазок, для достижения дизайнерской гармонии 
Вообщем при создание таких страничек, Вам придется регулировать тексты, изображения, двигать все и вся, увеличивать, уменьшать и тому подобное... Это уже больше не работа верстальщика а работа дизайнера, так что все эти стили по большей части не обязательны, поэтому мы их проходим "галопом"
Осталась маленькая картинка:
.end
{
background-image:url(img/bottom.jpg);
background-position:bottom center;
background-repeat:no-repeat;
height:13px;
}
Высота выставлена по высоте этой самой картинки. Обратите внимание, что я ее привязал к низу, центру, и запретил клонировать изображение, таким образом картинка будет ровно в центре!
Теперь отредактируем сам левый блок:
<!--ЛЕВЫЙ БЛОК-->
<td valign="top">
<!--МИНИ ТЕКСТ-->
<div class="title_txt">Простейшая страничка на html</div>
<div class="txt"><img src="img/img_txt.jpg" align="left" style="padding-right:5px;">Здравствуйте дорогие читатели Блога RS! Сегодня я решил отступить от намеченного плана и поговорить не о программирование нашего блога, а о азов разработки сайта. Самый начальный уровень сайтов это статичные сайты, то бишь на простом html. Решил я об этом поговорить по причине того, что статьи пишу я уже не для новичков, а вполне понимающих в программирование людей, дабы расширить свою аудиторию, напишу пару статей, где мы поговорим о самом начальном уровне. Начнем с html а именно я поведую Вам самые часто используемые "приемы" разработки статических сайтов. Садитесь по удобнее, я начинаю. </div>
<div class="end"></div>
<!--МИНИ ТЕКСТ-->
</td>
<!--ЛЕВЫЙ БЛОК-->
В тексте я выставил изображение 100 на 100 пикселей. Тексты мини новостей обычно сопровождаются изображениями В тег <img> я выставил атрибут align="left" для того что бы разместить изображение с лева, и позволит тексту обтекать изображение по правому краю. Так же я в ручную вписал стиль style="padding-right:5px;" это позволит сделать небольшое пространство с права, между изображением и текстом.
Для того чтобы наша мини новость разместилась вверху отредактировал тег <td>, добавив в него атрибут valign="top".
Код работы
Ну думаю было бы логично вывесить полный код нашей странички:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- ГОЛОВА -->
<head>
<title>RS-BLOG v1.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="Описание">
<meta name="keywords" content="Ключевые слова">
<!-- СТИЛИ -->
<style>
body
{
background-image:url(img/bg.jpg);
background-position:left top;
margin:0px;
font-family:Trebuchet MS;
font-size:12px;
font-weight:100;
}
.left
{
background-image:url(img/left.png);
background-position:left;
background-repeat:repeat-y;
}
.right
{
background-image:url(img/right.png);
background-position:right;
background-repeat:repeat-y;
}
.center{background-color:#fff;padding-top:50px;}
.left_bottom
{
background-image:url(img/left_bottom.png);
background-position:left top;
background-repeat:no-repeat;
}
.right_bottom
{
background-image:url(img/right_bottom.png);
background-position:right top;
background-repeat:no-repeat;
}
.bottom
{
background-image:url(img/bottom.png);
background-position:top;
background-repeat:repeat-x;
}
.top_bg
{
height:80px;
position:absolute;
width:100%;
top:0px;
background-image:url(img/top_bg.png);
background-position:left top;
background-repeat:repeat-x;
z-index: 2;
}
.img_right_bottom
{
width:317px;
height:284px;
position:fixed;
right:0px;
bottom:0px;
background-image:url(img/img_bottom.png);
background-position:right bottom;
background-repeat:no-repeat;
z-index: 0;
}
.table
{
position:absolute;
top:0px;
left:50%;
margin-left:-390px;
z-index: 1;
}
.logo
{
position:absolute;
left:50%;
top:5px;
margin-left:-370px;
}
.border{border-left:1px solid #E8E8E8;}
.menu_title
{
border-left:5px solid #D9D9D9;
border-bottom:1px solid #D9D9D9;
width:163px;
text-align:center;
margin-left:16px;
font-size:14px;
}
.menu_link
{
border-bottom:1px solid #D9D9D9;
width:162px;
margin-left:16px;
padding:3px;
}
.title_txt
{
height:32px;
background-image:url(img/fon_title.jpg);
background-position:top left;
background-repeat:no-repeat;
padding-top:5px;
padding-left:10px;
font-size:15px;
}
.txt
{
text-align:justify;
padding-left:0px;
padding-right:10px;
padding-bottom:5px;
}
.end
{
background-image:url(img/bottom.jpg);
background-position:bottom center;
background-repeat:no-repeat;
height:13px;
}
</style>
<!-- СТИЛИ -->
</head>
<!-- ГОЛОВА -->
<!-- ТЕЛО -->
<body>
<!-- ВЕРХНЯЯ БЕЛАЯ ПОЛОСКА -->
<div class="top_bg"><img class="logo" src="img/logo.png" border="0px"></div>
<!-- ВЕРХНЯЯ БЕЛАЯ ПОЛОСКА -->
<!-- ТАБЛИЦА -->
<table class="table" width="780px" height="700px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="left" width="25px"></td>
<td class="center" valign="top">
<table width="730px" height="500px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<!--ЛЕВЫЙ БЛОК-->
<td valign="top">
<!--МИНИ ТЕКСТ-->
<div class="title_txt">Простейшая страничка на html</div>
<div class="txt"><img src="img/img_txt.jpg" align="left" style="padding-right:5px;">Здравствуйте дорогие читатели Блога RS! Сегодня я решил отступить от намеченного плана и поговорить не о программирование нашего блога, а о азов разработки сайта. Самый начальный уровень сайтов это статичные сайты, то бишь на простом html. Решил я об этом поговорить по причине того, что статьи пишу я уже не для новичков, а вполне понимающих в программирование людей, дабы расширить свою аудиторию, напишу пару статей, где мы поговорим о самом начальном уровне. Начнем с html а именно я поведую Вам самые часто используемые "приемы" разработки статических сайтов. Садитесь по удобнее, я начинаю. </div>
<div class="end"></div>
<!--МИНИ ТЕКСТ-->
</td>
<!--ЛЕВЫЙ БЛОК-->
<!--ПРАВЫЙ БЛОК-->
<td class="border" width="210px" valign="top">
<!--МЕНЮ-->
<div class="menu_title">Меню</div>
<div class="menu_link">Пункт</div>
<div class="menu_link">Пункт</div>
<div class="menu_link">Пункт</div>
<!--МЕНЮ-->
</td>
<!--ПРАВЫЙ БЛОК-->
</tr>
</table>
</td>
<td class="right" width="25px"></td>
</tr>
<tr>
<td class="left_bottom" width="25px" height="25px"></td>
<td class="bottom"></td>
<td class="right_bottom" width="25px" height="25px"></td>
</tr>
</table>
<!-- ТАБЛИЦА -->
<!-- УЗОР В ПРАВОМ НИЖНЕМ УГЛУ -->
<div class="img_right_bottom"></div>
<!-- УЗОР В ПРАВОМ НИЖНЕМ УГЛУ -->
</body>
<!-- ТЕЛО -->
</html>
Вот как это выглядит в браузаре:
Заключение
Ну что ж, подводя итоги, я вижу, что код получился не очень уж маленьким, но все же надеюсь, что Вы разберетесь... Если есть какие вопросы, предложения или просто отзывы, пишите! Приятно будет почитать или ответить В следующих моих постах мы скорее всего начнем говорить о php. Попытаюсь Вас научить азам программирования. На этом у меня все! Удачи Вам!
_____
P.S.: Вы когда-нибудь интересовались оружием? Например знаете, что из себя представляет травматический пистолет Оса? Его возможности, его характеристики? На свете есть очень элегантное, а главное эффективное оружие!
Благодаря Вам, я начал писать свою CMS (60% готова уже).
Пишу с добавлением своих фишек, что придумаю))
Отлично все.
Сижу читаю, вспоминаю и думаю как же ........ с этими дурацкими курсами.
Так все понятно и доходчиво у тебя. РЕСПЕКТ.