X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> Урок верстки
Ariser
Ariser
Topic Starter сообщение 27.2.2008, 21:18; Ответить: Ariser
Сообщение #1


Новичок
*

Группа: User
Сообщений: 10
Регистрация: 18.2.2008
Поблагодарили: 0 раз
Репутация:   0  


В этом уроке будет описываться, как я работал с макетом. Работал специально для урока, а макет сделал в качестве примера другу. Для урока, думаю, сойдет...

[img]http://demiart.ru/forum/uploads/post-13952-1189338396.jpg[/img]

Итак, прежде, чем мы начнем что-то писать в HTML'e, надо определиться, а что же мы, собственно, должны там написать. То есть, нам надо рассмотреть дизайн и представить себе будущее расположение элементов. Я перебрал два варианта, кажется. Первый попытался сделать только на дивах, но получилось криво. Поэтому я решил совместить блочную и табличную верстку. На картинке ниже коричневым обведены таблицы, а малиновым — блоки и самостоятельные картинки.

[img]http://demiart.ru/forum/uploads/post-13952-1189337879.jpg[/img]

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

[img]http://demiart.ru/forum/uploads/post-13952-1189337881.jpg[/img]

Вырезаем. Сохранять вырезанные картинки лучше в отдельную папку в корне сайта. Например, pic/, или img/, или еще что-нибудь. Ниже приведены уже вырезанные мной картинки.

1. Логотип. Для него будет оптимален формат GIF, т.к. цветов немного, гифка с ними справится. А JPEG весит больше GIF'а

[img]http://demiart.ru/forum/uploads/post-13952-1189337883.gif[/img]

2. Не знаю, как это назвать. Зеленый фон верхнего прямоугольника с описанием. Здесь тоже подойдет GIF.

[img]http://demiart.ru/forum/uploads/post-13952-1189337880.gif[/img]

3. Закругленные углы у блока с выбором языков. Здесь уж без сомнения GIF — всего 4 цвета (откуда 4, не знаю, увидел 2. Но если шоп говорит 4, значит 4 :D )

[img]http://demiart.ru/forum/uploads/post-13952-1189337882.gif[/img]

4, 5. Фон для полосок с историей и иконками. Объединил в один пункт, поскольку они представляют собой, в общем-то, одно и тоже.
Вот здесь появляются сомнения, какой формат выбрать. GIF весит меньше, но при ближнем рассмотрениии можно увидеть, что градиент — это несколько участков одного цвета. Хотя, это не очень заметно, если не вглядываться, так что оставляем GIF.

[img]http://demiart.ru/forum/uploads/post-13952-1189337884.gif[/img]

[img]http://demiart.ru/forum/uploads/post-13952-1189338176.gif[/img]

6. Машинка. Эту машинку я отрисовывал пол дня... Не сюда, а просто потренироваться.
На макете я поместил часть ее вне экрана, но нам нужна вся картинка, чтобы, если изображение будет не в самом низу, отражение не обрезалось. Как сделать, чтобы часть картинки скрылась, если она все же будет внизу, я расскажу позже.
Вот здесь GIF определенно не подходит. Слишком много цветов (попробуйте сохранить многоцветную картинку в гифе и увидите, что получится). Остаются JPEG и PNG-24. Не пугайтесь пнг, IE рисует сине-серый фон только в месте прозорачностей. А у нас прозрачности не будет. Смотрим. PNG весит килограмм на 20 легче. Оставляем.

[img]http://demiart.ru/forum/uploads/post-13952-1189338178.png[/img]

Остаются иконки. С ними, думаю, проблем возникнуть не должно :D Формат — GIF, фон прозрачный.

Итак, у нас есть все необходимые картинки и намечено расположение элементов (в голове намечено). Можно создавать файлик index.html (.php, .htm или еще что-нибудь). При загрузке сайта или каталога на сайте всегда открывается файл с именем index.* Если такого файла нет, то сервер выдает ошибку 403 (отказано в доступе), или показывает список файлов в каталоге.

Для начала напишем доктайп и основные теги (<!-- вот такое --> — это комментарии, которые не будут видны в браузере).
<!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. Правильные такие: /*текст комментария*/... Но исправлять мне лень
* {

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" у ссылок-картинок).*/

}


Основа есть. Можно начинать верстать сайт. Сначала разместим логотип. Поставим его вне основного потока форматирования, то есть, зададим ему абсолютное позиционирование. Итак,
<body>



<img src="pic/logo.gif" id="logo" alt="Revolt" title="Тюнинг-центр Revolt">
<!-- идентификатор (id) может быть использован только один раз на странице.
Классы можно использовать сколько угодно раз. Здесь больше логотипов не предвидится alt — обязательный атрибут для всех картинок.
Если нечего писать, оставтье пустым. title — это текст, который появляется в строке состояния при наведении на картинку. --
>



</body>
CSS:
img#logo {

position: absolute;   /*абсолютное позиционирование*/

margin: 30px;   /*отступы от краев экрана равны 30px (кстати, при создании макета используйте линейку (Ctrl+R) и направляющие, будет гораздо удобнее)*/

}


Получилось.

[img]http://demiart.ru/forum/uploads/post-13952-1189338180.jpg[/img]

Теперь вставим блок с описанием (который зеленый :D ). Тоже абсолютное позиционирование.
<div id="desc">

<p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные

цены и отличный результат.</p>

<p>Вам нужен тюнинг? Revolt ждет Вас!</p>

</div>


CSS
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;   /*цвет текста*/

}


Работает.

[img]http://demiart.ru/forum/uploads/post-13952-1189338177.jpg[/img]

Теперь — блок с выбором языка.
<div id="lang">

<a href="english/">English version</a><br>

Русская версия <!-- у нас эта версия активна, так что ссылка не нужна -->

</div>


CSS:
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;   /*внутренний верхний отступ*/

}


Готово.

[img]http://demiart.ru/forum/uploads/post-13952-1189338179.jpg[/img]

Следующий элемент — полоска с историей (положение полоски неудачное, если история будет длинее, то не поместится...).
<div id="hist">

<a href="index.html">Главная</a> &rarr; Контактная информация <!-- &arr; — это стрелка вправо. Спецсимволы HTML. -->

</div>


CSS:
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;

}


Все.

[img]http://demiart.ru/forum/uploads/post-13952-1189338181.jpg[/img]

Теперь — полоска с иконками.

<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 (уже побольше, да? ):
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;

}

/* вот здесь кое-что новое: если написать "тег (пробел) тег", то стили будут относиться только
ко второму тегу, при условии, что он будет вложен в первый.
В данном случае стили присваиваются всем ссылкам, которые находятся в диве с идентификатором icons */
div#icons a {

display: block;   /*отображение элемента, как блочного (div — блочный элемент, например)*/

height: 20px;   /*ну, это уже было :)*/

padding-top: 6px;

}

div#icons a:hover {   /*стили присваиваются ссылке, на которую навели курсор, и которая лежит в диве с указанным id'ом.*/

background: #ccc;   /*изменяется цвет фона.*/

}


Закончили.

[img]http://demiart.ru/forum/uploads/post-13952-1189338398.jpg[/img]

[img]http://demiart.ru/forum/uploads/post-13952-1189338400.jpg[/img]

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

<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:
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;   /*это для того, чтобы машина всегда оставалась справа*/

}


Получилось!

[img]http://demiart.ru/forum/uploads/post-13952-1189338397.jpg[/img]

Ну, сначала напишем самое легкое — копирайт.

<td id="copyright">



2007 © Revolt<br> <!-- © — значок копирайта. Спецсимволы HTML -->

Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</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.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:
div#cont_div {

margin-left: 100px;   /*слева отступ равен 100px*/

margin-right: 150px;   /*а справа — 150px*/

text-align: left;   /*восстанавливаем выравнивание.*/

}

img#car {

margin-bottom: -33px;    /*вот, это надо для того, чтобы машина опустилась на 33px (измеряем :) ) ниже границы экрана. Но если она будет находиться выше, то будет видна целиком.*/

margin-right: 30px; /*отступ от правого края экрана*/

}


Вот.

[img]http://demiart.ru/forum/uploads/post-13952-1189338399.jpg[/img]

Теперь осталось только меню. Я с ним промучился дольше всего, но так и не получилось, чтобы отображалось так, как в макете. Конечный результат — наиболее приемлемый, на мой взгляд. Здесь я просто сделал зеленые боковые границы у ссылки. Сначала я пробовал делать фон ссылки зеленым, а внутрь вставлять див с основным цветом. Потом проверил на валидность, и оказалось, что так нельзя. Пробовал вставить таблицу, но отобразилось криво. В конце концов, остановился на этом варианте.

<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:
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;

}


Готово.

[img]http://demiart.ru/forum/uploads/post-13952-1189338401.jpg[/img]

Собственно, мы сверстали все. В итоге у нас должен получиться вот такой код 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">

<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> &rarr; Контактная информация

</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:

* {

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;

}


А страничка будет выглядеть так:

[img]http://demiart.ru/forum/uploads/post-13952-1189338487.jpg[/img]

Я закончил.

Автор: Net aka Ariser (я)
Оригинал здесь: http://demiart.ru/forum/index.php?showtopic=31627[/img]


Поблагодарили: (3)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_* Гость_0_*
сообщение 27.2.2008, 22:08; Ответить: Гость_0_*
Сообщение #2





Guest


    


Замечательный урок, особенно для новичков:D
Прикрепляю тему!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_* Гость_0_*
сообщение 4.3.2008, 11:31; Ответить: Гость_0_*
Сообщение #3





Guest


    


молодца:) реальная тема, можносраху понять что да как!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rumpel
Rumpel
сообщение 15.6.2008, 2:47; Ответить: Rumpel
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 262
Регистрация: 8.6.2008
Из: Киев
Поблагодарили: 0 раз
Репутация:   1  


Заранее спасибо! Будет время - подробно изучу.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prostors
prostors
сообщение 2.3.2009, 1:57; Ответить: prostors
Сообщение #5


Участник
***

Группа: User
Сообщений: 154
Регистрация: 27.2.2009
Поблагодарили: 0 раз
Репутация:   0  


Начал читать только самое начало где вы режете на картинки.
Учитывая вот эту статью картинку зелёную можно сделать с помощью html и css.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 2.3.2009, 11:53; Ответить: ZiTosS
Сообщение #6


Ваша совесть
*******

Группа: User
Сообщений: 5148
Регистрация: 18.2.2008
Из: Нижний Новгород
Поблагодарили: 0 раз
Репутация:   8  


prostors, А она как сделана? Она сделана фоном в CSS, что вам не нравится?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugiman
Bugiman
сообщение 31.3.2009, 17:57; Ответить: Bugiman
Сообщение #7


0
*

Группа: User
Сообщений: 1
Регистрация: 1.3.2010
Поблагодарили: 0 раз
Репутация:   0  


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

Или таких :(
Прикрепленное изображение

Работы товарища Александра Кизяченко.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 31.3.2009, 22:08; Ответить: ZiTosS
Сообщение #8


Ваша совесть
*******

Группа: User
Сообщений: 5148
Регистрация: 18.2.2008
Из: Нижний Новгород
Поблагодарили: 0 раз
Репутация:   8  


Bugiman, для вёрстки подобных страниц нужно хорошо понимать блочную вёрстку с абсолютным и относительным положением. Так же нужно знать что существуют слои, которые можно накладывать друг на друга.
Очень важно в данном вопросе оптимизировать, сделать так, чтобы фоновые картинки грузились как можно быстрее и были нарезаны правильно(т.е. не нарушали целостность картины)
Очень важно увидеть, то что можно заменить однопиксельными картинками или просто фоновым цветом.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dreemix
dreemix
сообщение 12.4.2009, 22:31; Ответить: dreemix
Сообщение #9


Участник
***

Группа: User
Сообщений: 198
Регистрация: 15.1.2012
Поблагодарили: 0 раз
Репутация:   5  


Хороший урок. Посмотрел еще ваши работы. Просто замечательно для такого юного возроста.

Огорчило только то, что на форуме нет подсветки снтаксиса.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Amicus
Amicus
сообщение 20.5.2009, 20:36; Ответить: Amicus
Сообщение #10


Участник
***

Группа: User
Сообщений: 186
Регистрация: 30.1.2009
Поблагодарили: 28 раз
Репутация:   11  


Спасибо за урок!


--------------------
Качественная верстка + натяжка на WP! аська 472557186 Пишите! Умираю без работы )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Создание html-верстки качественно и недорого
0 Ivan0802 1223 12.8.2017, 13:44
автор: -Иван8748975-
Открытая тема (нет новых ответов) Нужно редактирование шаблона WP, исправление верстки и микроразметки
бюджет 10 долларов
3 devvver 1387 1.3.2017, 16:54
автор: ZaDrotom
Открытая тема (нет новых ответов) Проблема с отображением верстки в Safari
0 Razorio 2526 9.11.2015, 19:38
автор: -Razorio-
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыУрок (Viewport)#2 - создание выпадающих меню
2 c0ns0l3 3247 14.2.2015, 18:35
автор: hnerd
Открытая тема (нет новых ответов) Я начинающий верстальщик, укажите на ошибки верстки плиз
2 Loki 915 4.9.2014, 12:47
автор: Loki


 



RSS Текстовая версия Сейчас: 30.10.2020, 8:02
Дизайн