| » Меню сайта |
Разделы сайта
Шаблоны
Скрипты
Статьи
Графика
|
|
Главная » 2008 » Сентябрь » 10 » Урок по созданию HTML-странички из готового макета
Урок по созданию HTML-странички из готового макета | 10.Сен.2008 | 17:49:23 |
Я почему-то решил не продолжать тот урок, а написать свой, с нуля... не знаю, правильно ли я сделал, но урок готов  Правда, фигофенький из меня писатель, скорее всего... Если что-то поймете из урока — вам повезет 
В этом уроке будет описываться, как я работал с макетом. Работал специально для урока, а макет сделал в качестве примера другу Для урока, думаю, сойдет...
Итак,
прежде, чем мы начнем что-то писать в HTML'e, надо определиться, а что
же мы, собственно, должны там написать. То есть, нам надо рассмотреть
дизайн и представить себе будущее расположение элементов. Я перебрал
два варианта, кажется. Первый попытался сделать только на дивах, но
получилось криво. Поэтому я решил совместить блочную и табличную
верстку. На картинке ниже коричневым обведены таблицы, а малиновым —
блоки и самостоятельные картинки.
Теперь
надо разрезать макет. Вырезать надо элементы, которые средствами HTML и
CSS не сделаешь. В этом макете, на мой взгляд, будет достаточно девяти
картинок (включая иконки и лого).
Вырезаем.
Сохранять вырезанные картинки лучше в отдельную папку в корне сайта.
Например, pic/, или img/, или еще что-нибудь. Ниже приведены уже
вырезанные мной картинки.
1. Логотип. Для него будет оптимален формат GIF, т.к. цветов немного, гифка с ними справится. А JPEG весит больше GIF'а
2. Не знаю, как это назвать Зеленый фон верхнего прямоугольника с описанием Здесь тоже подойдет GIF.
3.
Закругленные углы у блока с выбором языков. Здесь уж без сомнения GIF —
всего 4 цвета (откуда 4, не знаю, увидел 2. Но если шоп говорит 4,
значит 4 )
4, 5. Фон для полосок с историей и иконками. Объединил в один пункт, поскольку они представляют собой, в общем-то, одно и тоже.
Вот
здесь появляются сомнения, какой формат выбрать. GIF весит меньше, но
при ближнем рассмотрениии можно увидеть, что градиент — это несколько
участков одного цвета. Хотя, это не очень заметно, если не
вглядываться, так что оставляем GIF
6. Машинка Эту машинку я отрисовывал пол дня... Не сюда, а просто потранироваться
На
макете я поместил часть ее вне экрана, но нам нужна вся картинка,
чтобы, если изображение будет не в самом низу, отражение не обрезалось.
Как сделать, чтобы часть картинки скрылась, если она все же будет
внизу, я расскажу позже.
Вот здесь GIF определенно не подходит.
Слишком много цветов (попробуйте сохранить многоцветную картинку в гифе
и увидите, что получится). Остаются JPEG и PNG-24. Не пугайтесь пнг, IE
рисует сине-серый фон только в месте прозорачностей. А у нас
прозрачности не будет. Смотрим. PNG весит килограмм на 20 легче.
Оставляем.
Остаются иконки. С ними, думаю, проблем возникнуть не должно Формат — GIF, фон прозрачный.
Итак, у нас есть все необходимые картинки и намечено расположение элементов (в голове намечено
). Можно создавать файлик index.html (.php, .htm или еще что-нибудь).
При загрузке сайта или каталога на сайте всегда открывается файл с
именем index.* Если такого файла нет, то сервер выдает ошибку 403
(отказано в доступе), или показывает список файлов в каталоге.
Для начала напишем доктайп и основные теги (красный цвет — комментарии, которые не будут видны в браузере).
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- это и есть доктайп  --><html><head><title>Revolt </title> <!-- заголовок страницы, будет отображаться в строке заголовка окна и закладки, если таковая имеется --><meta http-equiv="content-type" content=" text/html; charset=windows-1251"> <!-- тип содержимого. В данном случае здесь указано, что тип — HTML, а кодировка — windows-1251 --><link rel="stylesheet" type=" text/css" href=" styles.css"> <!-- присоединяем файл со стилями. Название файла — styles.css --></head><body></body></html>
Теперь
создадим файл styles.css (название не важно, главное, чтобы оно
совпадало с указанным в HTML'e). В нем мы пропишем стили для тегов.
Позже будем добавлять туда стили для классов и идентификаторов, которые
будут появляться у нас в процессе работы.
Примечание: в CSS-кодах
здесь даны неправильные комментарии, которые не понимает IE. Правильные
такие: /*текст комментария*/... Но исправлять мне лень
CODE * {
padding: 0; //обнулим все отступы
margin: 0;
}
body {
background: #fff; //зададим белый цвет фона (кажется, не везде он такой по умолчанию)
color: #000; //черный цвет текста
font-family:
Verdana, Arial, sans-serif; //шрифт, который будет использоваться на
странице. Если есть, то будет использоваться Verdana. Если нет — Arial.
Если нет и его, то любой рубленый шрифт.
font-size: 10pt; //оптимальный размер шрифта
line-height: 15pt; //расстояние между строкаим. Упрощает восприятие текста.
}
table {
font-size: inherit; //таблицы по умолчанию не наследуют размер шрифта
}
h1, h2, h3, h4, h5, h6 { //общие стили для всех заголовков
font-weight: bold; //жирное начертание
margin-top: 15pt; //отступ сверху, равный высоте строки
margin-bottom: 5pt; //Отступ снизу, он длжен быть меньше верхнего.
font-family: Palatino Linotype, serif; //шрифт заголовков. Если есть, то Palatino Linotype, если нет, то любой с зачечками
text-align: center; //центрируем заголовки
}
h1 { //теперь задаем каждому заголовку свой размер шрифта
font-size: 15pt;
}
h2 {
font-size: 14pt;
}
h3 {
font-size: 13pt;
}
h4 {
font-size: 12pt;
}
h5 {
font-size: 11pt;
}
h6 {
font-size: 10pt;
}
a {
text-decoration: none; //убираем стандартное подчеркивание...
border-bottom: 1px solid #30457a; //...и делаем нижнюю границу. Она расположена дальше от текста, что упрощает его восприятие.
color: #30457a; //цвет ссылок
}
a:hover { //ссылка при наведении на нее мышой
border: none; //убираем подчеркивание
}
p {
margin-bottom: 15pt; //мы обнулили отступы, чтобы сделать их такими, какими они нужны нам.
}
img {
border: none; //рамка вокруг изображений нам не нужна
}
a.img {
border: none; //и подчеркивание у ссылок-изображений тоже (будем писать class="img" у ссылок-картинок).
}
Основа
есть. Можно начинать верстать сайт. Сначала разместим логотип. Поставим
его вне основного потока форматирования, то есть, зададим ему
абсолютное позиционирование. Итак,
HTML <body><img src="pic/logo.gif" id=" logo" alt=" Revolt" title=" Тюнинг-центр Revolt"> <!--
идентификатор (id) может быть использован только один раз на странице.
Классы можно использовать сколько угодно раз. Здесь больше логотипов не
предвидится alt — обязательный атрибут для всех картинок. Если
нечего писать, оставтье пустым. title — это текст, который появляется в
строке состояния при наведении на картинку. --></body>
CSS:
CODE img#logo {
position: absolute; //абсолютное позиционирование
margin:
30px; //отступы от краев экрана равны 30px (кстати, при создании
макета используйте линейку (Ctrl+R) и направляющие, будет гораздо
удобнее)
}
Получилось.
Теперь вставим блок с описанием (который зеленый ). Тоже абсолютное позиционирование.
HTML <div id="desc">
<p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные
цены и отличный результат.</p>
<p>Вам нужен тюнинг? Revolt ждет Вас!</p>
</div>
CSS
CODE div#desc {
background:
url("pic/desc_bg.gif") no-repeat #339933; //путь к картинке, указание
ей не дублироваться, цвет фона (нужен, если картинки отключат. Про это
тоже надо думать при верстке.)
width: 340px; //ширина блока
(вообще-то, ширина должна быть 360, но из-за левого паддинга в 20px она
360-20=340. Если оставить 360, то вылезет зеленый фон.)
height: 125px; //высота блока (то же, что и с шириной)
position: absolute; //абсолютное позиционирование
margin-left:
39.5%; //расстояне от левого края экрана до левого края блока.
Немного математики: в пикселях это расстояние равно 395px, ширина
макета — 1000px. 1000 — 100%. 1000/395=100/x. x=(395*100)/1000=39.5
padding-left: 20px; //внутренний отступ от левого края блока.
padding-top: 30px; //внутренний отступ от верхнего края блока.
color: #fff; //цвет текста
}
Работает.
Теперь — блок с выбором языка.
HTML <div id="lang">
<a href="english/">English version</a><br>
Русская версия <!-- у нас эта версия активна, так что ссылка не нужна -->
</div>
CSS:
CODE div#lang {
position: absolute; //помните, что это? :)
right: 0; //прилепим блок к правому краю экрана
top: 35px; //расстояние от вехнего края экрана до верхнего края блока
background:
url("pic/lang_corn.gif") no-repeat left #c2c2c2; //путь к картинке,
указание не дублироваться, указание положения фона (слева), цвет фона
height: 46px; //высота
width: 150px; //ширина
text-align: center; //выравнивание текста по центру
padding-top: 4px; //внутренний верхний отступ
}
Готово.
Следующий элемент — полоска с историей (положение полоски неудачное, если история будет длинее, то не поместится...).
HTML <div id="hist">
<a href="index.html">Главная</a> → Контактная информация <!-- &arr; — это стрелка вправо. Спецсимволы HTML. -->
</div>
CSS:
CODE div#hist { //все, что здесь есть, я объяснял раншье. Вспоминаем :)
background: url("pic/hist_bg.gif") no-repeat #d8d8d8;
width: 270px;
height: 26px;
position: absolute;
top: 120px;
padding-left: 30px;
padding-top: 4px;
}
Все.
Теперь — полоска с иконками.
HTML <div id="icons">
<table> <!-- чтобы между иконками было одинаковое расстояние, я засунул их в таблицу. -->
<tr>
<td>
<a href="index.html" class="img"><img src="pic/home.gif" alt="На главную"></a> <!-- помните класс ссылок img? он пригодился, как видите. Не забыли атрибут alt? -->
</td>
<td>
<a href="contacts.html" class="img"><img src="pic/contacts.gif" alt="Контакты"></a>
</td>
<td>
<a href="sitemap.html" class="img"><img src="pic/map.gif" alt="Карта сайта"></a>
</td>
</tr>
</table>
</div>
CSS (уже побольше, да? ):
CODE div#icons { //все было раншье.
background: url("pic/icons_bg.gif") no-repeat #d8d8d8;
width: 150px;
height: 30px;
position: absolute;
top: 120px;
right: 0;
}
div#icons table { //тоже было
width: 100%;
height: 100%;
text-align: center;
}
div#icons
a { //вот здесь кое-что новое: если написать "тег (пробел) тег", то
стили будут относиться только ко второму тегу, при условии, что он
будет вложен в первый. В данном случае стили присваиваются всем
ссылкам, которые находятся в диве с идентификатором icons
display: block; //отображение элемента, как блочного (div — блочный элемент, например)
height: 20px; //ну, это уже было :)
padding-top: 6px;
}
div#icons a:hover { //стили присваиваются ссылке, на которую навели курсор, и которая лежит в диве с указанным id'ом.
background: #ccc; //изменяется цвет фона.
}
Закончили.
Теперь
перейдем к основной части — меню и контенту. Чтобы цветная полоска под
меню тянулась до самого низа, я запихал все это в таблицу.
HTML <table id="main" cellspacing="0">
<tr>
<td id="menu">
</td>
<td id="content" rowspan="2"> <!-- rowspan — это сколько строк объединяет одна ячейка -->
</td>
</tr>
<tr>
<td id="copyright">
</td>
</tr>
</table>
CSS:
CODE table#main {
margin-top:
148px; //отступ отсчитывается от края экрана, потому что все
остальные элементы с абсолютным позиционированием, они не влияют на
расположение других элементов.
width: 100%; //ширина на весь экран
}
td#menu { //это верхняя левая ячейка, с меню
padding-top: 25px; //немного отступим от верха
width: 200px; //помните про линейку и направляющие? Они пригодятся, я же говорил
background: #f4f4d4;
text-align: center;
vertical-align: top; //в таблицах можно указывать вертикальное выравнивание. top, middle, bottom.
}
td#copyright { //это нижняя левая ячейка, с копирайтами
vertical-align: bottom;
padding: 25px 0; //верхний и нижний отступы — 25px, правый и левый — 0
width: 200px;
background: #f4f4d4;
text-align: center;
}
td#content { //а это правая ячейка, основная
vertical-align: top;
text-align: right; //это для того, чтобы машина всегда оставалась справа
}
Получилось!
Ну, сначала напишем самое легкое — копирайт.
HTML <td id="copyright">
2007 © Revolt<br> <!-- © — значок копирайта. Спецсимволы HTML -->
Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</a>
</td>
Скрина не надо, думаю
Теперь — контент.
HTML <td id="content" rowspan="2">
<div id="cont_div"> <!-- поместим все в див, чтобы сделать нормальное выравнивание -->
<h2>Контактная информация</h2>
<p>Наши офисы находится по адресу:</p>
<b>г. Бобруйск</b>
<p>ул. Академическая 138, корпус б, 2-й этаж<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<p>ул. Еще более академическая 67<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<p>проспект Гагарина 31<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<b>г. Атлантик-сити</b>
<p>ул. Тихоокеанская, 251 м ниже уровня моря<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<p>Наш e-mail: <a href="mailto:revolt@revolt.ru">revolt@revolt.ru</a></p>
</div>
<img src="pic/car.png" id="car" alt="</span>"> <!-- Машина — вне дива, потому что должна быть справа -->
</td>
CSS:
CODE div#cont_div { margin-left: 100px; //слева отступ равен 100px margin-right: 150px; //а справа — 150px text-align: left; //восстанавливаем выравнивание. } img#car { margin-bottom: -33px; //вот, это надо для того, чтобы машина опустилась на 33px (измеряем ) ниже границы экрана. Но если она будет находиться выше, то будет видна целиком. margin-right: 30px; //отступ от правого края экрана }
Вот.
Теперь
осталось только меню. Я с ним промучился дольше всего, но так и не
получилось, чтобы отображалось так, как в макете. Конечный результат —
наиболее приемлемый, на мой взгляд. Здесь я просто сделал зеленые
боковые границы у ссылки. Сначала я пробовал делать фон ссылки зеленым,
а внутрь вставлять див с основным цветом. Потом проверил на валидность,
и оказалось, что так нельзя Пробовал вставить таблицу, но отобразилось криво. В конце концов, остановился на этом варианте.
HTML <td id="menu">
<a href="index.html" class="menulink">Главная</a>
<a href="portfolio.html" class="menulink">Наши работы</a> <!-- — это неразрывный пробел (слова не переносятся на другую строку) -->
<a href="service.html" class="menulink">Услуги и цены</a>
<div class="menulink">Контактная информация</div> <!-- здесь див вместо ссылки, потому что мы сейчас на этой странице и эта ссылка не должна нажиматься -->
<a href="shop.html" class="menulink">Магазин</a>
<a href="about.html" class="menulink">О компании</a>
<a href="responses.html" class="menulink">Отзывы</a>
</td>
CSS:
CODE a.menulink {
display: block; //вспоминаем :)
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6; //нижняя граница, темная линия — создаем объемность кнопки
border-top: 1px solid #fbfbf3; //верхняя граница, светлая линия — создаем объемность кнопки
border-left: 10px solid #609f60; //левая зеленая граница
border-right: 10px solid #609f60; //правая зеленая граница
}
div.menulink
{ //это стили для активной "ссылки", которая не должна нажиматься.
Все то же самое, но цвет боковых границ более светлый
display: block;
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
a.menulink:hover { //А это мы изменяем цвет боковых границ при наведении на ссылку.
border-bottom:
1px solid #aeaea6; //дублированное описание верхней и нижней границ
надо, потому что в IE ои исчезают при наведении.... Может, так и должно
быть :)
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
Готово.
Собственно, мы сверстали все. В итоге у нас должен получиться вот такой код HTML:
CODE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Revolt</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <img src="pic/logo.gif" id="logo" alt="Revolt" title="Тюнинг-центр Revolt"> <div id="desc"> <p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные цены и отличный результат.</p> <p>Вам нужен тюнинг? Revolt ждет Вас!</p> </div> <div id="lang"> <a href="english/">English version</a><br> Русская версия </div> <div id="hist"> <a href="index.html">Главная</a> → Контактная информация </div> <div id="icons"> <table> <tr> <td> <a href="index.html" class="img"><img src="pic/home.gif" alt="На главную"></a> </td> <td> <a href="contacts.html" class="img"><img src="pic/contacts.gif" alt="Контакты"></a> </td> <td> <a href="sitemap.html" class="img"><img src="pic/map.gif" alt="Карта сайта"></a> </td> </tr> </table> </div> <table id="main" cellspacing="0"> <tr> <td id="menu"> <a href="index.html" class="menulink">Главная</a> <a href="portfolio.html" class="menulink">Наши работы</a> <a href="service.html" class="menulink">Услуги и цены</a> <div class="menulink" id="active">Контактная информация</div> <a href="shop.html" class="menulink">Магазин</a> <a href="about.html" class="menulink">О компании</a> <a href="responses.html" class="menulink">Отзывы</a> </td> <td id="content" rowspan="2"> <div id="cont_div"> <h2>Контактная информация</h2> <p>Наши офисы находится по адресу:</p> <b>г. Бобруйск</b> <p>ул. Академическая 138, корпус б, 2-й этаж<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></p> <p>ул. Еще более академическая 67<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></p> <p>проспект Гагарина 31<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></p> <b>г. Атлантик-сити</b> <p>ул. Тихоокеанская, 251 м ниже уровня моря<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></p> <p>Наш e-mail: <a href="mailto:revolt@revolt.ru">revolt@revolt.ru</a></p> </div> <img src="pic/car.png" id="car" alt=""> </td> </tr> <tr> <td id="copyright"> 2007 © Revolt<br> Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</a> </td> </tr> </table> </body> </html>
И вот такой — CSS:
CODE * {
padding: 0;
margin: 0;
}
body {
background: #fff;
color: #000;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
table {
font-size: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-top: 15pt;
margin-bottom: 5pt;
font-family: Palatino Linotype, serif;
text-align: center;
}
h1 {
font-size: 15pt;
}
h2 {
font-size: 14pt;
}
h3 {
font-size: 13pt;
}
h4 {
font-size: 12pt;
}
h5 {
font-size: 11pt;
}
h6 {
font-size: 10pt;
}
a {
text-decoration: none;
border-bottom: 1px solid #30457a;
color: #30457a;
}
a:hover {
border: none;
}
p {
margin-bottom: 15pt;
}
img {
border: none;
}
a.img {
border: none;
}
img#logo {
position: absolute;
margin: 30px;
}
div#desc {
background: url("pic/desc_bg.gif") no-repeat #339933;
width: 340px;
height: 125px;
position: absolute;
margin-left: 39.5%;
padding-left: 20px;
padding-top: 30px;
color: #fff;
}
div#lang {
position: absolute;
right: 0;
top: 35px;
background: url("pic/lang_corn.gif") no-repeat left #c2c2c2;
height: 46px;
width: 150px;
text-align: center;
padding-top: 4px;
}
div#hist {
background: url("pic/hist_bg.gif") no-repeat #d8d8d8;
width: 270px;
height: 26px;
position: absolute;
top: 120px;
padding-left: 30px;
padding-top: 4px;
}
div#icons {
background: url("pic/icons_bg.gif") no-repeat #d8d8d8;
width: 150px;
height: 30px;
position: absolute;
top: 120px;
right: 0;
}
div#icons table {
width: 100%;
height: 100%;
text-align: center;
}
div#icons a {
display: block;
height: 20px;
padding-top: 6px;
}
div#icons a:hover {
background: #ccc;
}
table#main {
margin-top: 148px;
width: 100%;
}
td#menu {
padding-top: 25px;
width: 200px;
background: #f4f4d4;
text-align: center;
vertical-align: top;
}
td#copyright {
vertical-align: bottom;
padding: 25px 0;
width: 200px;
background: #f4f4d4;
text-align: center;
}
td#content {
vertical-align: top;
text-align: right;
}
div#cont_div {
margin-left: 100px;
margin-right: 150px;
text-align: left;
}
img#car {
margin-bottom: -33px;
margin-right: 30px;
}
a.menulink {
display: block;
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #609f60;
border-right: 10px solid #609f60;
}
div.menulink {
display: block;
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
a.menulink:hover {
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
А страничка будет выглядеть так:
Я закончил
Сверстаное:
layout.zip ( 99.47к )
Кол-во скачиваний: 305
Автор: Net (я )
Вот еще урок на эту тему... Автор — Pupil
Вариант верстки этого макета от Pupil, цитирую его пост:
Сделал
без таблиц. Мне показалось, что для основного контента, больше подходит
список определений. Меню работает. Блоки не ездят за правым краем окна,
машина и копирай — всегда внизу (при минимальном наполнении),
минимальная ширина 850рх, подругому выравнивается зеленый блок и
заголовок. Стили постарался растянуть побольше, чтоб было понятней.
CODE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Revolt</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" media="screen" href="0contacts.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <h1><img src="logo.gif" alt="Revolt" width="270" height="60" title="Тюнинг-центр Revolt"><span class="none">Revolt</span></h1> <div id="explanation"> <p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные цены и отличный результат.</p> <p>Вам нужен тюнинг? Revolt ждет Вас!</p> </div><!--окончание explanation--> <p id="version"><a href="english/">English version</a><br>Русская версия</p> <ul id="navigation"> <li><a id="home" href="index.html" title="На главную"><span class="none">На главную</span></a></li> <li><a id="contacts" href="contacts.html" title="Контакты"><span class="none">Контакты</span></a></li> <li><a id="map" href="sitemap.html" title="Карта сайта"><span class="none">Карта сайта</span></a></li> </ul> <h2>Контактная информация</h2> <div id="shell"> <div id="main_menu"> <p><a href="index.html">Главная</a> → Контактная информация</p> <ul> <li><a href="index.html">Главная</a></li> <li><a href="portfolio.html">Наши работы</a></li> <li><a href="service.html">Услуги и цены</a></li> <li class="active"><a href="contacts.html">Контактная информация</a></li> <li><a href="shop.html">Магазин</a></li> <li><a href="about.html">О компании</a></li> <li><a href="responses.html">Отзывы</a></li> </ul> </div><!--окончание main_menu--> <div id="content"> <p>Наши офисы находится по адресу:</p> <dl> <dt>г. Бобруйск</dt> <dd>ул. Академическая 138, корпус б, 2-й этаж<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></dd> <dd>ул. Еще более академическая 67<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></dd> <dd>проспект Гагарина 31<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></dd> <dt>г. Атлантик-сити</dt> <dd>ул. Тихоокеанская, 251 м ниже уровня моря<br> тел/факс: 8 5908 908908<br> <a href="map">Карта проезда</a></dd> </dl> <p>Наш e-mail: <a href="mailto:revolt@revolt.ru">revolt@revolt.ru</a></p> </div><!--окончание content--> </div><!--окончание shell--> <p id="copyright">2007 © Revolt<br>Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</a></p> </body> </html>
Полностью, с картинками и CSS - в архиве.
net.rar ( 30.61к )
Кол-во скачиваний: 1243
|
|
Категория: Статьй и уроки |
Просмотров: 706 |
Добавил: CorsaR
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
Копирование материалов разрешено,