21 Сен, 2010
Категории: Wordpress, Верстка
Автор: Вовка

Создаем шаблон для WordPress. Шаг 3: создание html-страницы

Продолжаем идти по пути совершенствования и создания собственного шаблона. Итак, анализ провели, нарезку выполнили. Все хорошо, следовательно идем дальше. Дальше нам нужно собрать всю нарезку в один «салат».

HTML страница – это разметка окна, которая укажет браузеру, что и где нужно выводить, и в какой последовательности. Независимо от использованной CMS,– HTML страница это основная часть шаблона. Вначале мы всегда получаем html, а уже после натягиваем ее на определенный выбранный нами движок. Поэтому все, что было до этого поста и действия этого поста - руководство по созданию шаблона под любой двиг.

И так, приступаем к вёрстке. Для начала выберем редактор HTML кода. На сегодняшний день все визуальные редакторы не позволяют писать правильный, не громоздкий HTML код. Поэтому берем программный продукт «Macromedia Dreamweaver 8» (данная версия наиболее четко отвечает современным требованиям и обладает полным набором нужных инструментов), устанавливаем, запускаем, нажимаем File –> New, смотрим на рисунок 10:

В открывшемся окне выставляем все параметры как на рис. 11 и нажимаем «Create»:

Выбираем режим «Code», так как нам не интересно создавать шаблон карявым визуальным интерфейсом. Мы будем писать код руками, так как сейчас все уважающие себя программисты так делают. Если вы всё сделали правильно, то увидите такое же окно как на рисунке 12:

Сохраняем файл с именем «index.html». Это основной файл шаблона. Опять проделаем все выше описанные операции заново. Нажимаем File –> New (см. Рис. 10). В открывшемся окне выставляем все параметры как на рисунке 13:

Нажимаем кнопку «Create». Создавшееся окно сохраняем под именем «style.css». Только что мы создали файл стилей. Прикрепляем стили к основному шаблону. Чтобы это сделать нужно вставить код <link href="style.css" rel="stylesheet" type="text/css"> перед закрывающимся тегом </head>. Смотрите внимательно, файл «index.html» и «style.css» должны быть в одной папке, иначе путь href="style.css" будет недействительным. И так, файл «index.html» сейчас имеет вид представленный на рисунке 14:

Приступаем к созданию таблиц стилей. Пишем в файл «style.css» такой код:

html, body{

width:100%;

height:100%;

padding:0px;

margin:0px;

background:#FFFFFF;

font-family:Tahoma;

font-size:12px;

color:#484848;

font-weight:normal;

}

ul, li, p, h1, h2, h3{

padding:0px;

margin:0px;

}

#conteiner{

position:relative;

width:1030px;

height:auto;

overflow:hidden;

margin:0px auto;

}

Таким образом, мы инициализируем рабочее окно, устанавливаем шрифт, цвет шрифта и т. д., убираем отступы для рабочих тегов (ul, li, p, h1, h2, h3), а также создаём рабочий контейнер, который будет центроваться на рабочей области.

В файл «index.html» записываем созданный блок контейнер между тегами <body> и </body>. Сейчас этот файл имеет такой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="conteiner">

</div>

</body>

</html>

Теперь вся информация будет записываться между тегами <div id="conteiner"> и </div>. Ну что же, приступим к шапке макета. Да чуть не забыл, во время вёрстки HTML шаблона нужно после каждого внесения изменений в шаблон, проверять браузером что получилось. Для проверки будем использовать не один браузер, а несколько таких браузеров: Mozilla Firefox 3.5, Opera 9.5, Google Chrome 1.5, Safari 3.4, Internet Explorer 6-7. Проверка шаблона на этих 5 браузерах позволяет создать практически идеальную HTML страницу без внутренних багов.

И так, пишем код и стиль для создания картинки в шапке. Код очень простой <div id="head"></div>, а вот стили для этого кода будут такие:

#head{

position:relative;

width:100%;

height:292px;

background:url(img/head.jpg) no-repeat;

}

Теперь рассказываю: «Мы взяли создали пустой блок, сделали его подблоком для нашего блока контейнера и выставили ему 100% ширину, так как картинка занимает всю рабочую область и высоту 292px, так как это реальная высота картинки, background:url(img/head.jpg) no-repeat;– это путь к картинке, а также указание браузеру что картинку дублировать не нужно». Смотрим, что у нас получилось:

Рисунок 16, Таблица стилей документа:

Рисунок 17, Результат тестирования:

Чтобы не загромождать текст рисунками, далее я буду приводить код, который мы добавляем и стиль к этому коду, а также рисунок тестирования.

Приступаем к созданию самого сложного блока в этом макете – горизонтальное меню. Для начала нужно создать фон слева. Для этого создаем блок по всей ширине блока, но фон вставляем только слева. Код: <div id="v_menu"></div>, стиль:

#v_menu{

position:relative;

width:100%;

height:101px;

background:url(img/fon-dzvonite.jpg) no-repeat;

}

Также на макете есть текст поверх этого фона. Поэтому создаем ещё один блок, и позиционируем его как свободный к этому. В итоге предыдущий код нужно видоизменить на:

<div id="v_menu">

<div id="v_menu_txt_1">Звоните нам:</div>

<div id="v_menu_txt_2">(499)999-0135</div>

</div>

а в таблицу стилей дописать:

#v_menu_txt_1{

position:absolute;

top:13px;

left:23px;

width:150px;

height:auto;

font-size:18px;

color:#832f00;

}

#v_menu_txt_2{

position:absolute;

top:37px;

left:62px;

width:150px;

height:auto;

font-size:18px;

color:#832f00;

}

Проверяем, что получилось во всех браузерах, смотрим рисунок 18:

Если вы получили такой же результат во всех браузерах, значит всё в порядке. Продолжаем работу над горизонтальным меню. Теперь создаем кнопки меню, для этого модифицируем предыдущий код:

<div id="v_menu">

<div id="v_menu_txt_1">Звоните нам:</div>

<div id="v_menu_txt_2">(499)999-0135</div>

<ul id="menu">

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Главная</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Блог</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Материалы</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Услуги</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Прайс</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Доска объявлений</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">О Компании</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Контакты</p></a></li>

</ul>

</div>

Тот кто сталкивался с вёрсткой динамических меню задаст вопрос почему всё так сложно, можно же написать намного проще. Не спорю, есть вариант написания этого меню намного проще, но тогда шаблон не будет работать в Internet Explorer 6, так как его разработчикам было очень сложно додержаться всемирного стандарта W3C. Но не будем о грустном, сейчас шаблон в Internet Explorer 6 всё равно не будет работать так как для него нужно прописать отдельный файл таблицы стилей, который решит проблему с меню. А сейчас приступим к нормальным браузерам, пропишите стили:

#menu{

position:absolute;

top:0px;

left:287px;

display:block;

width:743px;

height:67px;

list-style:none;

background:url(img/fon-menu-no-active.jpg) repeat-x;

}

#menu .vert_line{

position:relative;

width:1px;

height:67px;

float:left;

background:url(img/vert-line-menu.jpg) no-repeat;

}

#menu li{

position:relative;

display:block;

float:left;

height:67px;

}

#menu li a{

position:relative;

display:block;

float:left;

padding:27px 15px 0px 16px;

height:40px;

color:#f0f0f0;

text-decoration:none;

font-weight:bold;

font-size:12px;

z-index:50;

}

#menu li a .txt_m{

position:relative;

color:#f0f0f0;

text-decoration:none;

font-weight:bold;

font-size:12px;

}

#menu li a .l_f{

position:absolute;

top:0px;

left:-1px;

width:31px;

height:67px;

background:none;

}

#menu li a .r_f{

position:absolute;

top:0px;

right:0px;

width:32px;

height:67px;

background:none;

}

#menu li a .line_top_menu{

position:absolute;

top:-4px;

left:-5px;

width:100%;

padding-right:10px;

height:7px;

background:none;

z-index:120;

}

#menu li a:hover .l_f{

background:url(img/fon-menu-active-left.jpg) no-repeat;

}

#menu li a:hover .r_f{

background:url(img/fon-menu-active-right.jpg) no-repeat;

}

#menu li a:hover .line_top_menu{

background:url(img/fon-menu-line-top-active.jpg) repeat-x;

}

В конец файла «style.css» и во всех «нормальных» браузерах шаблон будет работать как следует. Эти два последних куска кода не очень-то понятны простому смертному. Расскажу о них по подробнее. И так:

<ul id="menu"> – это блок активного меню;

<div class="vert_line"></div> – вертикальная линия, отделяющая кнопки меню;

<li> и </li> – начало и конец кнопки соответственно;

<a href="#"> – ссылка для перехода по нажатию кнопки;

<div class="l_f"></div> и <div class="r_f"></div> – левый и правый (соответственно) блок активного фона кнопки;

<div class="line_top_menu"></div> – верхняя линия активности кнопки;

<p class="txt_m">Главная</p> – блок названия кнопки.

Если вы всё сделали правильно и сохранили изменения, то вы увидите в своём браузере то, что представлено на рисунке 19:

С меню закончили, теперь приступим к реализации навигационного блока, но для этого создадим ещё один контейнер (info) который объединит навигационный блок и информационный. Пишем этот блок <div id="info"></div> после предыдущего. Все следующие блоки будут писаться сюда. В этом блоке создаем:

<div id="right">

<div id="left">

</div>

</div>

В такой хитрый способ мы одновременно заставим тянуться три блока, которые отвечают за вывод информации в центре шаблона. Так мы решим проблему прерывания фона на заднем плане.

В блок (left) пишем все, что касается навигационного блока. И так, приступим. Для начала нужно записать стили для блока (info) и (left).

#info{

position:relative;

width:100%;

height:auto;

overflow:hidden;

background:url(img/fon-left-blok.jpg) repeat-y;

}

#left{

position:relative;

width:281px;

left:-281px;

height:auto;

float:left;

overflow:hidden;

}

Здесь нет ничего сложного, теперь пишем код верхнего блока. Для начала в навигационный блок напишем <div class="zagl">Нерудные сыпучие материалы</div> и стили для него:

.zagl{

position:relative;

width:263px;

padding-left:18px;

height:32px;

padding-top:8px;

background:url(img/fon-txt-left-blok.jpg) no-repeat;

margin-top:20px;

color:#832f00;

font-size:12px;

font-weight:bold;

}

Также напишем код вертикального меню, он имеет такой вид и записывается сразу после блока (zagl).

<ul class="m_1">

<li>-&nbsp;<a href="#">Песок</a></li>

<li>-&nbsp;<a href="#">Асфальтовая крошка</a></li>

<li>-&nbsp;<a href="#">Керамзит</a></li>

<li>-&nbsp;<a href="#">Щебень известковый</a></li>

<li>-&nbsp;<a href="#">Торф</a></li>

<li>-&nbsp;<a href="#">Глина</a></li>

<li>-&nbsp;<a href="#">Чернозем</a></li>

<li>-&nbsp;<a href="#">Гравий</a></li>

<li>-&nbsp;<a href="#">Грунт</a></li>

<li>-&nbsp;<a href="#">Гравий</a></li>

<li>-&nbsp;<a href="#">Нерудные материалы</a></li>

<li>-&nbsp;<a href="#">Щебень гранитный</a></li>

<li>-&nbsp;<a href="#">Песчано-гравийная смесь</a></li>

</ul>

И нужно записать стили:

.m_1{

position:relative;

width:250px;

padding-left:10px;

list-style:none;

padding-bottom:10px;

}

.m_1 li{

color:#832f00;

}

.m_1 li a{

color:#832f00;

text-decoration:none;

}

.m_1 li a:hover{

color:#ff8400;

text-decoration:underline;

}

Следующий блок идентичный прежнему, поэтому можно просто перекопировать предыдущий код, только нужно поменять текс в этих блоках. В результате проведённых манипуляций с помощью клавиш Ctrl+C и Ctrl+V мы можем посмотреть на тестовую работу.

Рисунок 20:

Ну что же продолжим. Следующим блоком для вёрстки будет информационный блок. Так как этот блок будет динамичным полностью эго верстать не нужно. Достаточно создать блок, сделать округление уголков, прописать основные стили для шрифта и заголовков, а также самая сложная задача – сделать накладывание слоёв, чтобы был эффект наползания информационного блока на все остальные блоки.

Правый блок у нас уже созданный, осталось его полноценно наполнить для придания ему необходимых очертаний. Весь новый код в правый блок будем писать только после закрытого тега левого блока (навигационного). Но перед тем как приступим писать код, нужно написать стили для правого блока. Они имеют такой вид:

#right{

position:relative;

width:749px;

padding-left:281px;

height:auto;

overflow:hidden;

background:url(img/left-right-polosa.jpg) right repeat-y;

}

Нет ничего сложного. Обычный блок для вывода динамической информации. Продолжаем, теперь нам нужно создать эффект «наползания» информационного блока на шапку. Приступим, код плашки для «наползания» очень простой <div id="top_plash"></div>, пишем его под открывающимся тегом блока (info). Теперь напишем стили:

#top_plash{

position:absolute;

top:-34px;

left:281px;

width:749px;

height:34px;

background:url(img/info-okr-top-left.jpg) no-repeat;

z-index:700;

}

Теперь аналогично пишем «наползание» на футер. Код: <div id="bottom_plash"></div>, стиль:

#bottom_plash{

position:absolute;

bottom:-32px;

left:281px;

width:749px;

height:32px;

background:url(img/info-okr-bottom-left.jpg) no-repeat;

z-index:300;

}

Припишем стили для информационного текста и будущих блоков:

#right #inform{

position:relative;

width:100%;

height:auto;

overflow:hidden;

float:left;

}

#right h1{

color:#7e2b00;

font-weight:bold;

font-size:12px;

margin-top:15px;

margin-bottom:5px;

margin-left:5px;

}

#right p{

margin-top:10px;

margin-bottom:10px;

}

#right hr{

border:1px solid #8b4118;

border-bottom:none;

border-left:none;

border-right:none;

}

Для начала этих стилей будет достаточно. Если чего-то не будет хватать, то тогда уже будем дописывать в конец таблицы стилей новые стили.

Также, перед закрывающимся тегом основного контейнера нужно написать: <div id="footer"></div> и маленький стиль:

#footer{

position:relative;

width:100%;

height:131px;

background:url(img/fon-footer.jpg) no-repeat;

}

Пока на этом остановимся. Теперь нужно сделать что-то с осликом IE-6. Его создатели будучи в состоянии глубокого опьянения создали чудо браузер, который живёт своей жизнью отдельно от всех стандартов и норм программирования. Благое дело, что после очередного опохмела создатели поняли, что создали нечто очень страшное и решили исправить ситуацию простым отказом от этого чуда. Типа извините, это была тестовая версия, скачайте, пожалуйста, новый браузер IE-8. Скачали, но ослик то остался. Причём круглой сиротой. Никто за него не заступиться, все его ругают. Ну да не будем о грустном. Так как ослик не поддерживает всех стандартов, то проще всего отказаться от динамического меню, дабы не глючить систему вызовом ЯваСкрипт кода специально написанного для ослика. Создаем новый файл стилей под именем «ie-6.css» и пишем туда такой код:

html, body{

width:100%;

height:100%;

padding:0px;

margin:0px;

background:#f6fbf8;

font-family:Tahoma;

font-size:12px;

color:#484848;

font-weight:normal;

}

ul, li, p, h1, h2, h3{

padding:0px;

margin:0px;

}

#conteiner{

position:relative;

width:1030px;

height:auto;

overflow:hidden;

margin:0px auto;

}

#head{

position:relative;

width:100%;

height:292px;

background:url(img/head.jpg) no-repeat;

z-index:10;

}

#v_menu{

position:relative;

width:100%;

height:101px;

background:url(img/fon-dzvonite.jpg) no-repeat;

z-index:155;

}

#v_menu_txt_1{

position:absolute;

top:13px;

left:23px;

width:150px;

height:auto;

font-size:18px;

color:#832f00;

}

#v_menu_txt_2{

position:absolute;

top:37px;

left:62px;

width:150px;

height:auto;

font-size:18px;

color:#832f00;

}

#menu{

position:absolute;

top:0px;

left:287px;

display:block;

width:743px;

height:67px;

list-style:none;

background:url(img/fon-menu-no-active.jpg) repeat-x;

}

#menu .vert_line{

position:relative;

width:1px;

height:67px;

float:left;

background:url(img/vert-line-menu.jpg) no-repeat;

}

#menu li{

position:relative;

display:block;

float:left;

height:67px;

}

#menu li a{

position:relative;

display:block;

float:left;

padding:27px 15px 0px 16px;

height:40px;

color:#f0f0f0;

text-decoration:none;

font-weight:bold;

font-size:12px;

z-index:50;

}

#menu li a .txt_m{

position:relative;

color:#f0f0f0;

text-decoration:none;

font-weight:bold;

font-size:12px;

}

#menu li a .l_f{

position:absolute;

top:0px;

left:-1px;

width:31px;

height:67px;

background:none;

}

#menu li a .r_f{

position:absolute;

top:0px;

right:0px;

width:32px;

height:67px;

background:none;

}

#menu li a .line_top_menu{

position:absolute;

top:-4px;

left:-5px;

width:100%;

padding-right:10px;

height:7px;

background:none;

z-index:120;

}

#menu li a:hover .l_f{

background:none;

}

#menu li a:hover .r_f{

background:none;

}

#menu li a:hover .line_top_menu{

background:none;

}

#info{

position:relative;

width:100%;

height:auto;

background:url(img/fon-left-blok.jpg) repeat-y;

z-index:170;

}

#left{

position:relative;

width:281px;

margin-left:-151px;

height:auto;

padding-bottom:30px;

float:left;

overflow:hidden;

}

.zagl{

position:relative;

width:263px;

padding-left:18px;

height:32px;

padding-top:8px;

background:url(img/fon-txt-left-blok.jpg) no-repeat;

margin-top:20px;

color:#832f00;

font-size:12px;

font-weight:bold;

}

.zagl b{

font-weight:normal;

font-size:11px;

}

.zagl a{

font-weight:normal;

font-size:11px;

text-decoration:none;

color:#832f00;

}

.zagl a:hover{

color:#ff8400;

text-decoration:underline;

}

.m_1{

position:relative;

width:250px;

padding-left:10px;

list-style:none;

padding-bottom:10px;

}

.m_1 li{

color:#832f00;

}

.m_1 li a{

color:#832f00;

text-decoration:none;

}

.m_1 li a:hover{

color:#ff8400;

text-decoration:underline;

}

.date{

position:relative;

display:block;

width:250px;

margin-left:10px;

font-size:12px;

color:#832f00;

}

.txt_a{

position:relative;

display:block;

width:250px;

margin-left:20px;

color:#832f00;

font-size:12px;

text-decoration:underline;

margin-bottom:18px;

margin-top:2px;

}

#left a:hover{

color:#ff8400;

text-decoration:underline;

}

#right{

position:relative;

width:709px;

padding-left:301px;

padding-right:20px;

height:auto;

overflow:hidden;

background:url(img/left-right-polosa.jpg) right repeat-y;

color:#484848;

font-weight:normal;

z-index:260;

}

#right #inform{

position:relative;

width:100%;

height:auto;

overflow:hidden;

float:left;

}

#right h1{

color:#7e2b00;

font-weight:bold;

font-size:12px;

margin-top:15px;

margin-bottom:5px;

margin-left:5px;

}

#right p{

margin-top:10px;

margin-bottom:10px;

text-align:justify;

}

#right hr{

border:1px solid #8b4118;

border-bottom:none;

border-left:none;

border-right:none;

}

#top_plash{

position:absolute;

top:-34px;

left:281px;

width:749px;

height:34px;

background:url(img/info-okr-top-left.jpg) no-repeat;

z-index:700;

}

#bottom_plash{

position:absolute;

bottom:-32px;

left:281px;

width:749px;

height:32px;

background:url(img/info-okr-bottom-left.jpg) no-repeat;

z-index:300;

}

#footer{

position:relative;

width:100%;

height:131px;

background:url(img/fon-footer.jpg) no-repeat;

}

Сохраняем этот файл. Ну что, сверим то, что написал я и то, что написали вы.

Файл «style.css»:

html, body{

width:100%;

height:100%;

padding:0px;

margin:0px;

background:#f6fbf8;

font-family:Tahoma;

font-size:12px;

color:#484848;

font-weight:normal;

}

ul, li, p, h1, h2, h3{

padding:0px;

margin:0px;

}

#conteiner{

position:relative;

width:1030px;

height:auto;

overflow:hidden;

margin:0px auto;

}

#head{

position:relative;

width:100%;

height:292px;

background:url(img/head.jpg) no-repeat;

z-index:10;

}

#v_menu{

position:relative;

width:100%;

height:101px;

background:url(img/fon-dzvonite.jpg) no-repeat;

z-index:155;

}

#v_menu_txt_1{

position:absolute;

top:13px;

left:23px;

width:150px;

height:auto;

font-size:18px;

color:#832f00;

}

#v_menu_txt_2{

position:absolute;

top:37px;

left:62px;

width:150px;

height:auto;

font-size:18px;

color:#832f00;

}

#menu{

position:absolute;

top:0px;

left:287px;

display:block;

width:743px;

height:67px;

list-style:none;

background:url(img/fon-menu-no-active.jpg) repeat-x;

}

#menu .vert_line{

position:relative;

width:1px;

height:67px;

float:left;

background:url(img/vert-line-menu.jpg) no-repeat;

}

#menu li{

position:relative;

display:block;

float:left;

height:67px;

}

#menu li a{

position:relative;

display:block;

float:left;

padding:27px 15px 0px 16px;

height:40px;

color:#f0f0f0;

text-decoration:none;

font-weight:bold;

font-size:12px;

z-index:50;

}

#menu li a .txt_m{

position:relative;

color:#f0f0f0;

text-decoration:none;

font-weight:bold;

font-size:12px;

}

#menu li a .l_f{

position:absolute;

top:0px;

left:-1px;

width:31px;

height:67px;

background:none;

}

#menu li a .r_f{

position:absolute;

top:0px;

right:0px;

width:32px;

height:67px;

background:none;

}

#menu li a .line_top_menu{

position:absolute;

top:-4px;

left:-5px;

width:100%;

padding-right:10px;

height:7px;

background:none;

z-index:120;

}

#menu li a:hover .l_f{

background:url(img/fon-menu-active-left.jpg) no-repeat;

}

#menu li a:hover .r_f{

background:url(img/fon-menu-active-right.jpg) no-repeat;

}

#menu li a:hover .line_top_menu{

background:url(img/fon-menu-line-top-active.jpg) repeat-x;

}

#info{

position:relative;

width:100%;

height:auto;

background:url(img/fon-left-blok.jpg) repeat-y;

z-index:170;

}

#left{

position:relative;

width:281px;

margin-left:-301px;

height:auto;

padding-bottom:30px;

float:left;

overflow:hidden;

}

.zagl{

position:relative;

width:263px;

padding-left:18px;

height:32px;

padding-top:8px;

background:url(img/fon-txt-left-blok.jpg) no-repeat;

margin-top:20px;

color:#832f00;

font-size:12px;

font-weight:bold;

}

.zagl b{

font-weight:normal;

font-size:11px;

}

.zagl a{

font-weight:normal;

font-size:11px;

text-decoration:none;

color:#832f00;

}

.zagl a:hover{

color:#ff8400;

text-decoration:underline;

}

.m_1{

position:relative;

width:250px;

padding-left:10px;

list-style:none;

padding-bottom:10px;

}

.m_1 li{

color:#832f00;

}

.m_1 li a{

color:#832f00;

text-decoration:none;

}

.m_1 li a:hover{

color:#ff8400;

text-decoration:underline;

}

.date{

position:relative;

display:block;

width:250px;

margin-left:10px;

font-size:12px;

color:#832f00;

}

.txt_a{

position:relative;

display:block;

width:250px;

margin-left:20px;

color:#832f00;

font-size:12px;

text-decoration:underline;

margin-bottom:18px;

margin-top:2px;

}

#left a:hover{

color:#ff8400;

text-decoration:underline;

}

#right{

position:relative;

width:709px;

padding-left:301px;

padding-right:20px;

height:auto;

overflow:hidden;

background:url(img/left-right-polosa.jpg) right repeat-y;

color:#484848;

font-weight:normal;

z-index:260;

}

#right #inform{

position:relative;

width:100%;

height:auto;

overflow:hidden;

float:left;

}

#right h1{

color:#7e2b00;

font-weight:bold;

font-size:12px;

margin-top:15px;

margin-bottom:5px;

margin-left:5px;

}

#right p{

margin-top:10px;

margin-bottom:10px;

text-align:justify;

}

#right hr{

border:1px solid #8b4118;

border-bottom:none;

border-left:none;

border-right:none;

}

#top_plash{

position:absolute;

top:-34px;

left:281px;

width:749px;

height:34px;

background:url(img/info-okr-top-left.jpg) no-repeat;

z-index:700;

}

#bottom_plash{

position:absolute;

bottom:-32px;

left:281px;

width:749px;

height:32px;

background:url(img/info-okr-bottom-left.jpg) no-repeat;

z-index:300;

}

#footer{

position:relative;

width:100%;

height:131px;

background:url(img/fon-footer.jpg) no-repeat;

}

А также файл «index.html»:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<link href="style.css" rel="stylesheet" type="text/css">

<!--[if IE 6]>

<link href="ie-6.css" rel="stylesheet" type="text/css">

<![endif]-->

</head>

<body>

<div id="conteiner">

<div id="head"></div>

<div id="v_menu">

<div id="v_menu_txt_1">Звоните нам:</div>

<div id="v_menu_txt_2">(499)999-0135</div>

<ul id="menu">

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Главная</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Блог</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Материалы</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Услуги</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Прайс</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Доска объявлений</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">О Компании</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Контакты</p></a></li>

</ul>

</div>

<div id="info">

<div id="top_plash"></div>

<div id="bottom_plash"></div>

<div id="right">

<div id="left">

<div class="zagl">Нерудные сыпучие материалы</div>

<ul class="m_1">

<li>-&nbsp;<a href="#">Песок</a></li>

<li>-&nbsp;<a href="#">Асфальтовая крошка</a></li>

<li>-&nbsp;<a href="#">Керамзит</a></li>

<li>-&nbsp;<a href="#">Щебень известковый</a></li>

<li>-&nbsp;<a href="#">Торф</a></li>

<li>-&nbsp;<a href="#">Глина</a></li>

<li>-&nbsp;<a href="#">Чернозем</a></li>

<li>-&nbsp;<a href="#">Гравий</a></li>

<li>-&nbsp;<a href="#">Грунт</a></li>

<li>-&nbsp;<a href="#">Гравий</a></li>

<li>-&nbsp;<a href="#">Нерудные материалы</a></li>

<li>-&nbsp;<a href="#">Щебень гранитный</a></li>

<li>-&nbsp;<a href="#">Песчано-гравийная смесь</a></li>

</ul>

<div class="zagl">Услуги</div>

<ul class="m_1">

<li>-&nbsp;<a href="#">Аренда экскаватора-погрузчика</a></li>

<li>-&nbsp;<a href="#">Асфальтирование</a></li>

<li>-&nbsp;<a href="#">Благоустройство территорий</a></li>

<li>-&nbsp;<a href="#">Вывоз мусора</a></li>

<li>-&nbsp;<a href="#">Вывоз снега</a></li>

<li>-&nbsp;<a href="#">Грузоперевозки</a></li>

<li>-&nbsp;<a href="#">Организация дренажных систем</a></li>

<li>-&nbsp;<a href="#">Рытьё котлованов</a></li>

<li>-&nbsp;<a href="#">Ландшафтные работы</a></li>

<li>-&nbsp;<a href="#">Укладка тротуарной плитки</a></li>

<li>-&nbsp;<a href="#">Укладка асфальтовой крошки</a></li>

</ul>

<div class="zagl">Новости&nbsp;&nbsp;&nbsp;<b>(<a href="#">смотреть все</a>)</b></div>

<p class="date">-&nbsp;10.08.10</p>

<a href="#" class="txt_a">Открыто производство в столице</a>

<p class="date">-&nbsp;10.08.10</p>

<a href="#" class="txt_a">Новая серия бетона по спец. цене и качеству</a>

<div class="zagl">Дополнительно</div>

<ul class="m_1">

<li>-&nbsp;<a href="#">Аренда экскаватора-погрузчика</a></li>

<li>-&nbsp;<a href="#">Асфальтирование</a></li>

<li>-&nbsp;<a href="#">Благоустройство территорий</a></li>

<li>-&nbsp;<a href="#">Вывоз мусора</a></li>

<li>-&nbsp;<a href="#">Вывоз снега</a></li>

<li>-&nbsp;<a href="#">Грузоперевозки</a></li>

<li>-&nbsp;<a href="#">Организация дренажных систем</a></li>

<li>-&nbsp;<a href="#">Рытьё котлованов</a></li>

<li>-&nbsp;<a href="#">Ландшафтные работы</a></li>

<li>-&nbsp;<a href="#">Укладка тротуарной плитки</a></li>

<li>-&nbsp;<a href="#">Укладка асфальтовой крошки</a></li>

</ul>

</div>

<div id="inform">

<h1>dsadas sadasd asdas</h1>

<hr/>

<p>dsaas sada</p>

<p>dsaas sada</p>

</div>

</div>

</div>

<div id="footer"></div>

</div>

</body>

</html>

Проверяем, что получилось и сравниваем с рисунком 21:

Вуаля. Всё получилось. Если у вас что-то не вышло, то стоит проверить правильность всех действий. В данном уроке я не поясняю написание каждого символа html, если вам что-то непонятно, то начните с изучения html.

ОФФпост:

Вовочка спрашивает у папы:
- Чем отличается мужик от женщины?
- Сынок, у меня 45 размер ноги, а у мамы 38. Вот между ногами и разница. 😀

Похожие записи в блоге:

   

Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер.
Читайте меня в Твиттере и будьте в курсе последних моих действий.

Комментирование Facebook:


  • Аноним

    Вовка, за что я тебя уважаю - за масштабность изложения вот таких вот полезных рекомендаций! Молоток!

  • Спасибо. Как любит говорить Мичевская Татьяна, pr-менеджер Seolib, "да пост у тебя явно очень скромный". 🙂

  • Чет уж как-то все заумно. И очень много. Это можно только так, ради общего развития почитать. А так только если собираешься сделать это своей основной работой. Слишком уж много тут всяких прибамбасов ) Кстати, свой шаблон ты сам создавал или заказывал?

  • Написано нормально, заумного абсолютно ничего нет.
    Просто тут будет несколько сложно тем, кто нулевой в html.
    По поводу своего блога, то уже неоднократно отвечал, в том числе и в интервью, что рисовал все сам, кроме бренда. Вовку изобразила знакомая девушка в графическом планшете.

  • Чего то у меня фото не отображаются, и кнопки всякие...

  • Aleks

    Сам учусь верстать, очень полезный пост, спасибо за труды, но картинки у меня не работают, а без них сложнее понять, если возможно исправьте их. С уважением Алекс!

  • Rockpay

    Картинки не открываются, я так понял они на народе выложены, а народ ругается, что нет главной страницы...

  • Перенес фотки, сейчас все впорядке... Смотрите. За неудобства возникшие приношу извинения.

  • Смотри картинки. Поправил ситуацию.

  • Во! Теперь лучше 🙂 С этим все понятно. Скажи мне вот что. Есть ли еще нечто, кроме style.css, где может указываться положение блоков относительно друг друга?
    Если конкретнее, то боролся тут с дивами своего шаблона и проблема была в том, что они неправильно отображались относительно друг друга. Хотя код было очень простой.

  • Aleks

    Большое спасибо, теперь всё работает.

  • Чайка Игорь

    Положение блоков относительно друг друга, да и вообще всех элементов на html-странице прописывается в стилях. А стили в свою очередь можно писать как отдельным файлом так и в html-элемент. (style="") - вот таким способом. Никто не мешает писать стили в ЯваСкрипт и воспроизводить их на странице но, от этого суть стилей не изменится.

  • Спасибо Вован! Будем мотать а ус...

  • То есть больше нигде, кроме стилей, положение single.php header.php sidebar.php относительно друг друга и соответственно кода в них, не описывается?

  • Erho

    Хм... интересно, что получиться из этого всего...

  • Vic

    Сколько было уже этих шаблонов, тьма и немного есче:
    вот сразу готовый п-о-ш-а-г-а-м: http://www.websovet.com/my-books#book2

  • Иванна

    у меня не открывается эта статья, в чем причина?

  • Благодарю за то, что сообщили. Ошибка найдена и устранена.

  • Vitek709

    Продел все в Microsoft frontPage,ничего не работает(((((((((((((((

  • Может стоит проделать все в том, в чем написано в посте?

  • Почему у тебя тут код так паршиво написан? без подсветки

    Профессиональная HTML верстка (WordPress, Joomla)

    http://danil-html.ru - отзывы, примеры.

Я в Google Plus

Блоггеру

Рекомендую

Мануалы

Опрос

Творческий кризис необратим?

Просмотреть результаты

Загрузка ... Загрузка ...

Вовкин блог на Facebook

SEO Powered by Platinum SEO from Techblissonline