Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

  • Закрытая тема Тема закрыта

Урок верстки

#1 Ariser

Ariser
  • Пользователь
  • 10 сообщений
  • Репутация: 0
2

Отправлено 27 Февраль 2008 - 20:18

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

Изображение

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

Изображение

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

Изображение

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

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

Изображение

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

Изображение

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

Изображение

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

Изображение

Изображение

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

Изображение

Остаются иконки. С ними, думаю, проблем возникнуть не должно :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) и направляющие, будет гораздо удобнее)*/

}

Получилось.

Изображение

Теперь вставим блок с описанием (который зеленый :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;   /*цвет текста*/

}

Работает.

Изображение

Теперь — блок с выбором языка.
<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;   /*внутренний верхний отступ*/

}

Готово.

Изображение

Следующий элемент — полоска с историей (положение полоски неудачное, если история будет длинее, то не поместится...).
<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;

}

Все.

Изображение

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

<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;   /*изменяется цвет фона.*/

}

Закончили.

Изображение

Изображение

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

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

}

Получилось!

Изображение

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

<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; /*отступ от правого края экрана*/

}

Вот.

Изображение

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

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

}

Готово.

Изображение

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

}

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

Изображение

Я закончил.

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

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Дайте урок верстки
  2. Как научиться верстке сайтов?
  3. Уроки для начинающих: дизайн, верстка, создание сайтов
  4. [Урок 1] Выбор макета и инструментов для верстки.
  5. [Урок 4] Часть 1. Верстка макета HTML5/CSS3

#2 admin

admin
  • Пользователь PRO
  • 5 272 сообщений
  • Репутация: 54

Отправлено 27 Февраль 2008 - 21:08

Замечательный урок, особенно для новичков:D
Прикрепляю тему!
  • 0

Сколько лет прошло, а ссылки всё ещё лучше покупать тут



#3 Гость_negative-life_*

Гость_negative-life_*
  • Гости

Отправлено 04 Март 2008 - 10:31

молодца:) реальная тема, можносраху понять что да как!!
  • 0

#4 Rumpel

Rumpel
  • Пользователь
  • 262 сообщений
  • Репутация: 1

Отправлено 15 Июнь 2008 - 01:47

Заранее спасибо! Будет время - подробно изучу.
  • 0

#5 prostors

prostors
  • Пользователь
  • 154 сообщений
  • Репутация: 0

Отправлено 02 Март 2009 - 00:57

Начал читать только самое начало где вы режете на картинки.
Учитывая вот эту статью картинку зелёную можно сделать с помощью html и css.
  • 0

#6 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 02 Март 2009 - 10:53

prostors, А она как сделана? Она сделана фоном в CSS, что вам не нравится?
  • 0

#7 Bugiman

Bugiman
  • Пользователь
  • 13 сообщений
  • Репутация: 0

Отправлено 31 Март 2009 - 16:57

Замечательный материал. С удовольствием бы узнал как верстаются более сложные страницы :( С полным, так сказать, использованием бэкгрануда :)
Вроде таких :)
cybermed_avshl.jpg
Или таких :(
vkopilke_1.jpg
Работы товарища Александра Кизяченко.
  • 0

#8 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 31 Март 2009 - 21:08

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

#9 Renovatio

Renovatio
  • Пользователь
  • 187 сообщений
  • Репутация: 4

Отправлено 12 Апрель 2009 - 21:31

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

Огорчило только то, что на форуме нет подсветки снтаксиса.
  • 0

#10 Amicus

Amicus
  • Пользователь
  • 87 сообщений
  • Репутация: 0

Отправлено 20 Май 2009 - 19:36

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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru