Создаем шаблон для 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>- <a href="#">Песок</a></li>
<li>- <a href="#">Асфальтовая крошка</a></li>
<li>- <a href="#">Керамзит</a></li>
<li>- <a href="#">Щебень известковый</a></li>
<li>- <a href="#">Торф</a></li>
<li>- <a href="#">Глина</a></li>
<li>- <a href="#">Чернозем</a></li>
<li>- <a href="#">Гравий</a></li>
<li>- <a href="#">Грунт</a></li>
<li>- <a href="#">Гравий</a></li>
<li>- <a href="#">Нерудные материалы</a></li>
<li>- <a href="#">Щебень гранитный</a></li>
<li>- <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>- <a href="#">Песок</a></li>
<li>- <a href="#">Асфальтовая крошка</a></li>
<li>- <a href="#">Керамзит</a></li>
<li>- <a href="#">Щебень известковый</a></li>
<li>- <a href="#">Торф</a></li>
<li>- <a href="#">Глина</a></li>
<li>- <a href="#">Чернозем</a></li>
<li>- <a href="#">Гравий</a></li>
<li>- <a href="#">Грунт</a></li>
<li>- <a href="#">Гравий</a></li>
<li>- <a href="#">Нерудные материалы</a></li>
<li>- <a href="#">Щебень гранитный</a></li>
<li>- <a href="#">Песчано-гравийная смесь</a></li>
</ul>
<div class="zagl">Услуги</div>
<ul class="m_1">
<li>- <a href="#">Аренда экскаватора-погрузчика</a></li>
<li>- <a href="#">Асфальтирование</a></li>
<li>- <a href="#">Благоустройство территорий</a></li>
<li>- <a href="#">Вывоз мусора</a></li>
<li>- <a href="#">Вывоз снега</a></li>
<li>- <a href="#">Грузоперевозки</a></li>
<li>- <a href="#">Организация дренажных систем</a></li>
<li>- <a href="#">Рытьё котлованов</a></li>
<li>- <a href="#">Ландшафтные работы</a></li>
<li>- <a href="#">Укладка тротуарной плитки</a></li>
<li>- <a href="#">Укладка асфальтовой крошки</a></li>
</ul>
<div class="zagl">Новости <b>(<a href="#">смотреть все</a>)</b></div>
<p class="date">- 10.08.10</p>
<a href="#" class="txt_a">Открыто производство в столице</a>
<p class="date">- 10.08.10</p>
<a href="#" class="txt_a">Новая серия бетона по спец. цене и качеству</a>
<div class="zagl">Дополнительно</div>
<ul class="m_1">
<li>- <a href="#">Аренда экскаватора-погрузчика</a></li>
<li>- <a href="#">Асфальтирование</a></li>
<li>- <a href="#">Благоустройство территорий</a></li>
<li>- <a href="#">Вывоз мусора</a></li>
<li>- <a href="#">Вывоз снега</a></li>
<li>- <a href="#">Грузоперевозки</a></li>
<li>- <a href="#">Организация дренажных систем</a></li>
<li>- <a href="#">Рытьё котлованов</a></li>
<li>- <a href="#">Ландшафтные работы</a></li>
<li>- <a href="#">Укладка тротуарной плитки</a></li>
<li>- <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:
Разделы блога
Мои проекты
Блоггеру
- Gogettop - уникальный сервис продвижения вечными ссылками с максимальной эффективностью и рассрочкой платежа на 12 месяцев. Эффективность естественных вечных ссылок очень высокая. Продвижение становится еще доступнее.
Опрос
Загрузка ...Вовкин блог на Facebook
- Контрольная закупка на Линкбилдере
- Люди не верят в Интернет, поэтому им не хватает денег
- Какое из направлений работы в контекстной рекламе выгоднее
- Отслеживание звонков — один из способов определения конверсии и увеличения ее
- Wizard Sape, полет нормальный!
- Как ускорить подбор ключевых и минус-слов в 10-20 раз
- Конкурентный анализ бирж вечных ссылок
- FAQ 2. Какой вид рекламы паблика Вконтакте эффективнее при региональном продвижении
- FAQ 1. Чего ожидать от рекламы в Вконтакте при региональном продвижении паблика
- С помощью чего самому можно создать логотип для сайта
- Пинг-сервис LetUsIndex.com — ускоритель индексации всего!
- Плюсы и минусы создания сайтов на Народе от Яндекса