[Асмодиан]

Вёрстка
Вёрстка – это довольно сложная и не однотипная наука. Вот просто взять и дать COMPLETE руководство по вёрстке невозможно. Так же как невозможно вот взять и научить человека делать красивые сайты. Вёрстка – это скорее совокупность приёмов и различных подходов. Да, в основе вёрстки находится HTML и CSS, которые вы должны знать, но зная только их, многое сразу не сделаешь. Ведь даже зная, как пользоваться молотком и кузнечной печью, вы наврят-ли сможете сковать себе нож. Лучший способ улучшить свои знания, и понять, как использовать инструментарий – это посмотреть, как работают другие. Вот я и даю вам пример: довольно непростой сайт, в вёрстке которого используется кучка мелких «фишечек».
Макет
les1.jpg
Я думаю что многие начинающие верстальщики подумают, что его нужно срочно начать верстать... Ан нет. Первоочередная работа верстальщика при получении макета – это исправление БАГОВ дизайнера. У меня, как правило, уходит на эту работу от 3 до 8 часов перед вёрсткой и примерно столько же в процессе. Все косяки показывать не буду, на видимой вами картинке они уже все исправлены. Это были и вылезающие куски одних слоёв: не до конца стёртые и в ненужных местах, на левой менюшке снизу были несостыковки вертикальных и горизонтальной линии, и многое другое.
Фон
background.gif
Ну и как только мы разобрались с багами, тут же можно приступать к вёрстке. А точнее сделать первый шаг – вырезать фон. Ну не знаю даже, за что меня дизайнер так невзлюбила, что поставила на фон ТАКУЮ текстуру: кожа, причём оригинальная текстура была, видимо, без цикла (то есть если поставить рядом 2 куска такой текстуры, то между ними будет чёткая линия разреза). Для создания циклических (мостящихся без линий разреза) текстур есть несколько способов простого получения. Например: если текстура представляет собой любого типа узор, но не подкрашенный светом и тенью, то можно взять кусок текстуры и выставить рядом с ним квадратом ещё 3, каждый раз зеркально отображая новый кусок. Ещё один способ помогает с неконтрастным фоном. Есть и ещё способы, но главное понимать, что текстуру, имеющую ярко выраженную светотеневую картинку, и, при этом, довольно контрастную, сделать циклической практически невозможно, разве что ручками её дорисовывая. Но, как оказалось при довольно кропотливом подборе, представленный слева кусок неплохо мостится, давая практически невидимые линии разреза. Такой решено было и оставить.
Анализ макета
Продолжаем смотреть на макет и думать. Для начала посмотрим, как он ведёт себя по ширине. Сразу понятно, что макет у нас фиксированный по ширине, общая ширина всех частей макета, помимо фона, составляет 1200px, что ни как не влезет в 1000px (максимальная ширина сайта при разрешении 1024x768). Хотя с другой стороны весь контент в положенные 1000px прекрасно умещается. Значит первое, что мы делаем – выставляем центральную рамку шириной в 990px (меньше максимального на 10px для перестраховки). Центральная рамка выглядит так:
les2.jpg
Всё что находится в центре рамки, будет отображаться на 1024px и больше, а вот вне рамок на 1024 будет скрыто. Но при этом нужно, чтобы даже на 1024 горизонтальной полосы прокрутки не появилось. Для получения такого эффекта, используется следующий трюк, который можно использовать как готовое решение.

Продолжение следует...

[Асмодиан]

Трюк: визуальное расширение макета
Для начала проанализируем наш макет. Центральная часть нам не важна. Просто факт, что она есть и ширина её 990px, остальное неважно, а вот края за ней намного интереснее.
les3.jpg
Наш макет, в зависимости от количества контента, может изменяться по высоте, но при этом зелёные области всегда будут оставаться в самом верху макета, синие в самом низу, а красные должны моститься, занимая всё доступное для них пространство. Итак, давайте возьмёмся за html. Непосредственно внутри body Пишем табличку:

<table id="pageouter" cellpadding="0" cellspacing="0">
  <tr>
    <td class=”pagec”></td>
    <td id="pagesizer"><div></div></td>
    <td class=”pagec”></td>
  </tr>
  <tr>
    <td id="pagelt"><div></div></td>
    <td id="pageinner" rowspan="2"></td>
    <td id="pagert"><div></div></td>
  </tr>
  <tr>
    <td id="pagelb"><div></div></td>
    <td id="pagerb"><div></div></td>
  </tr>
</table>

Выглядеть она будет так:

+----------+------------------------------+-----------+
| .pagec   |        #pagesizer            | .pagec    |
+----------+------------------------------+-----------+
| #pagelt  |        #pageinner            | #pagert   |
+----------+                              +-----------+
| #pagelb  |                              | #pagerb   |
+----------+------------------------------+-----------+

Данная табличка станет для нас внешней для сайта, теперь о каждом её элементе подробнее:
Верхняя строчка на самом деле необязательна. Она нужна лишь затем, чтобы браузер ПРАВИЛЬНО рассчитал ширину столбцов ДО отображения содержимого. Стили будут такими:

.pagec { width:50%; height:10px ) 
#pagesizer div { width: 990px height 10px; }

Вот тут прошу обратить особое внимание. Задаваемая таким образом таблица является НЕПРАВИЛЬНОЙ. Так как указание 50% обозначает половину ширины таблицы, суммарная ширина колонок получается равной ВСЕЙ ширине таблицы + 990px. Важно то, что в случае с центральной колонкой, ширина задаётся для элемента, находящегося внутри её. Если задать ширину для самой колонки, то в некоторых браузерах она просто схлопнется – станет шириной в 0px. Если же не задавать ширину в 50% (или любое другое количество процентов – это неважно) для боковых колонок, то может схлопнуться либо левая, либо правая колонка (то есть сайт прилипнет к одному из краёв). И только такой способ задания размеров гарантирует нужное нам поведение по ширине во всех браузерах: центральная колонка строго по центру и нужной нам ширины, а боковые заполняют расстояние от центральной до границ окна. Суммарно таблица получается шириной во всё окно. Поскольку невозможно точное задание ширины для центральной колонки, то также невозможно и использование col-ов вместо пустой строки. Для данного макета верхняя строка имеет высоту в 10 px потому, что именно такая высота обусловлена макетом – там верхние 10px свободны и заполнены фоном. Для других же макетов, в которых шапка примыкает вплотную к верху страницы, можно использовать верхнюю строку в 1px в качестве фона #pagesizer div ставить кусочек шапки.

Продолжение следует

[Асмодиан]

Часть таблицы #pageinner в данном случае пока неинтересна, её проработаем позднее Важно только то, что находящийся в ней контент будет раздвигать по высоте всю таблицу до нужных размеров. Самое важно сейчас заполнить блоки #pageXX. Особенность отображения таблиц с объединённой центральной ячейкой в разных браузерах заключается в том, что точную позицию линии раздела между верхней и нижней ячейками, каждый браузер выбирает по-своему. У одних она будет ровно по середине, у других максимально вверху, и указания размеров по высоте для этих ячеек ни к чему не приведут, их будут попросту игнорировать. Именно поэтому нельзя использовать подход в лоб, разбив по высоте таблицу не на 2, а на 3 ячейки поставив в них соответственно зелёную, красну и синюю часть макета (см рисунок вверху).

Первым делом нужно поставить красную (мостящуюся) часть. Для этого в фотошопе определяем высоту циклически повторяющегося участка боковинки и вырезаем её. Для того, чтобы определить цикличекую часть, нужно найти в узоре какой-нибудь запоминающийся элемент (например в данном случае это окончание вензеля, и найти повторение этого же элемента снизу или сверху. Пример показан на рисунке. Это левая боковинка. Справа она ограниченна контентной частью, а слева фоном страницы. Также вырезается и правая часть.
les4.jpg

В таблицу эта левая боковинка ставится следующим образом:

#pagelt { background:url(images/pagel.gif) right bottom repeat-y; }
#pagelb { background:url(images/pagel.gif) right top repeat-y; }

То есть данная боковинка моститься по вертикали, и, ВАЖНО, в верхнюю ячейку она лепится к нижнему, а в нижнюю – к верхнему краю. Так обязательно необходимо сделать для того, чтобы в месте разделения верхней и нижней ячейки не было линии среза. Теперь, вне зависимости от того, где бы линия раздела не находилась, боковинка станет ровно. Также важно ориентация фона справа. Это сделано для того, чтобы боковинка прилипала не к левому краю страницы, а к центральной колонке. Теперь. Если ширина страницы будет большой, и левые ячейки будут шире нашей боковинки, то боковинка вместе с центральной колонкой создаст как бы единый массив, а если ширина ячеек меньше, то левая часть боковинки скроется. Аналогично поступаем с правой боковинкой, с той лишь разнецей, что она должна быть ориентированна у левого края.

Теперь верхние и нижние части боков сайта. В некоторых макетах их достаточно вырезать прямоугольными блоками (ровно как подкрашены на разметке) и поставить в боковые ячейки, но в данном случае у нас есть довольно контрастный мостящийся фон, который, разумеется, создаст линии среза (как показано на рисунке).
les5.jpg
Поэтому верхние и нижние части НЕ должны содержать вот этот узорчатый фон. Данная задача решается при помощи gif.

Для того, чтобы правильно вырезать нижний левый угол боковинки, нужно выделить все элементы, из которых он состоит. Для этого ищем все нужные слои. На первый (первый найденный) слой Ctrl+Click в палитре слоёв, а на остальные Ctrl+Shift+Click. То есть алгоритм наший действий следующий: выбираем указатель: (V), убеждаемся, что на тулбаре стоит флажок “Auto-select: Leyers”, и щёлкаем на любой объект нашего уголка. На палитре слоёв выделяется нужный слой, на него Ctrl+Click. Видим, что выделен не весь угол, потому щёлкаем на любом элементе уголка ВНЕ выделения, выделяется слой, Ctrl+Shift+Click на нём, и так, пока выделенным не будет весь угол. Вот так:
les6.jpg

Продолжение следует...

[Асмодиан]

После выделение всех объектов уголка, нам нужно ограничить выделение нужным прямоугольником. Справа он ограничен центральной колонкой, снизу высотой всего макета (кроме фона) а сверху и справа лишь самим выделением (то есть всё должно помещаться в него). Поэтому используем инструмент выделение (M) в режиме Intersect (Shift+Alt), этим инструментом выделяем область, соответствующую прямоугольнику (#15) на картинке. Все лишние части выделения скроются. Если мы просто скопируем полученное (Ctrl+Shift+C), сохраним в gif и вставим в макет, то результат нас, как минимум, разочарует. Для успешного результата нужно:

1. В области под уголком оставить фон, чтобы сквозь просвет не появилась боковинка.
2. То же самое сделать и со всеми «дырками» в выделении
3. Выделить все пиксели, в которых есть изображение, без полупрозрачности.

Используем Quick Mask для получения требуемых эффектов. Нажимаем Q, все выделенные области (уголок) остаются неизменными, а всё остальное закрашивается красным. Теперь решаем проблему №3. Для этого используем уровни (Levels, Ctrl+L). Белый (правый) ползунок уровней ведём до упора влево, нажимаем ОК, и делаем уровни ЕЩЁ раз (необходимо проделать дважны). В результате такой операции, выделение стало ступенчатым, на изображении не осталось ни одного полупрозрачного пикселя. Теперь берём ластик в режиме карандаш (Pencil) (нам важно избегать полупрозрачностей, так как это приведёт к получению НЕПРАВИЛЬНОГО gif, а ступенчатые края в готовом варианте видны всё-равно не будут). Ластиком стираем красные пятна внутри узора и область под ним. Убираем Quick Mask (Q) и жмём Ctrl+Shift+C. Создаём новый документ, вставляем результат, удаляем слой-фон этого документа. Сохраняем в gif и получаем вот такую картинку:
pagelb.gif

Возвращаемся к таблице. Дополняем стиль левого нижнего уголка:

#pagelb 
{ 
  background:url(images/pagel.gif) right top repeat-y; 
  vertical-align:bottom;
}

Как видно в html-разметке страницы, внутри угловых ячеек есть div-ы. Именно они предназначены для отображения уголков сайта. Причём div-ы в верхних ячейках должны быть ориентированны сверху, а нижние – снизу.
Пишем стиль

#pagelb div { background:url(images/pagelb.gif) right top no-repeat; height:176px; }

Фон – это и есть вырезанная картинка. Отцентрован справа, по высоте не имеет значения, так как высота самого дива и высота картинки одинаковы. Используется div, а не img потому, что у img-а фиксированная ширина, а div занимает по ширине всё достуное пространство, и из-за ориентации у правого края, уголок станет именно там где нужно – ровно снизу, впритык к центральной колонке. Причём этот уголок перекроет сделанную ранее боковинку, создав с ней нужный результат. Никаких линий разреза не будет. Аналогично делаем правый нижний уголок, а вот с верхними натыкаемся на проблему. Верхние части слишком велики (550x100px) и разнообразны по цветам, что не даёт их сохранить в 256-цветовой gif без очень резкого ухудшения качества (сильно проявляется эффект диффузии). Поэтому придётся разделить верхние части на 2 сектора: ровный прямоугольник без прозрачностей сверху, и небольшой «фигурный» gif снизу. Верхние прямоугольники можно получить стандартной шоповской резкой(Slice, затем Save For Web And Devices в jpg), а gif-ы путём, аналогичным вырезанию нижних уголков. Как результат, получаем следующие изображения:
les7.jpg
Также требуется модифицировать html таблицы, изменив:

    <td id="pagelt"><div></div></td>

на

    <td id="pagelt"><div class=”top”></div><div class=”bottom”></div></td>

И

    <td id="pagert"><div></div></td>

на

    <td id="pagert"><div class=”top”></div><div class=”bottom”></div></td>

Теперь все стили разом:

#pagelt
{
	background:url(../images/pageleft.gif) right bottom repeat-y;
	vertical-align:top;
}

#pagelt .top
{
	background:url(../images/pagelt.jpg) right top no-repeat;
	height:462px;
}
#pagelt .bottom
{
	background:url(../images/pagelt.gif) right top no-repeat;
	height:33px;
}
#pagelb
{
	background:url(../images/pageleft.gif) right top repeat-y;
	vertical-align:bottom;
}
#pagelb div
{
	background:url(../images/pagelb.gif) right top no-repeat;
	height:176px;
}
#pagert
{
	background:url(../images/pageright.gif) left bottom repeat-y;
	vertical-align:top;
}
#pagert .top
{
	background:url(../images/pagert.jpg) left top no-repeat;
	height:383px;
}
#pagert .bottom
{
	background:url(../images/pagert.gif) left top no-repeat;
	height:158px;
}

#pagerb
{
	background:url(../images/pageright.gif) left top repeat-y;
	vertical-align:bottom;
	width:50%;
}

#pagerb div
{
	background:url(../images/pagerb.gif) left top no-repeat;
	height:191px;
}

На этом визуальное расширение сайта законченно. На разрешении 1024 он будет выглядеть немного обрезанным, но зато без скрола, а на 1280 выглядит на всю ширину.

Продолжение следует...

[rashan]

много нашел интересного для себя, большое спасибо!!!

[Асмодиан]

Продолжение завтра

[sokol666]

Makarenya, замечательная статья. Я даже до некоторых приемов тобой описаных сам додумался, не такой я глупый как думал
P.S. Завтра когда выкладывать продолжение, если можно размести его поверх наших сообщений.
P.P.S я понимаю что сказал вещь которая, так сказать, подразумевается по умолчанию ))

[Асмодиан]

Теперь центральная часть. В целом её можно разделить на 4 важные составляющие: шапка (всё что сверху), контент (светлая область посредине), верхнее меню, боковое меню. Важно сразу определить, как какой блок будет себя вести при уменьшении/увеличении высоты своего содержимого, а также в случае с контентом и боковым меню, что делать, когда одно выше другого и наоборот. Данный макет довольно прост, поэтому правил поведения немного:

1. Шапка и верхнее меню фиксированы по высоте, вне зависимости от контента (у шапки его вообще нет), а потому неинтересны.
2. Левое меню по высоте всегда должно ровняться по своему содержимому, в случае, если в контентной области содержимого много, меню должно заканчиваться, и под ним должно оставаться свободное пространство.
3. Контентная область не должна быть ниже левой менюшки, и должна вытягиваться вместе со всей страницей, даже если в ней недостаточно или нет вообще содержимого.

Верхнее меню: Для удобства, а также для минимизации результативного веса сайта, верхнее меню мы будем накладывать СВЕРХУ на шапку, и вообще сделаем это уже вместе с проработкой контента. Потому скрываем все надписи на верхнем меню и на время про него забываем.

Левое меню: поскольку предполагается, что при небольшом размере левого меню и большой контентной области, под левым меню будет идти фон, то требуется этот фон получить, поэтому для начала работы, скрываем всё левое меню.

Контентная часть: Всегда растягивается вслед за страницей, под ней не может образоваться фона, и поэтому её можно вставить непосредственно в дизайн всей страницы.

После скрытия всего ненужного (текста верхней менюшки, всей левой менюшки), разбиваем макет на 3 slice-а, как показано не рисунке:
les8.jpg
Верхний слайс – это не только шапка, но также вся часть сайта, которая остаётся фиксировано верху. Нижний – вся нижняя часть, а посередине мостящийся фон. Поскольку фон очень однороден и неконтрастен, то заботиться о поисках цикличности не стоит. Довольно высокий кусок был сделан для того, чтобы уменьшить вероятность явной цикличности (этот эффект возникает тогда, когда на фоне присутствует некая неоднородность вроде светлого пятна, которая при замостке повторяется через равные промежутки - смотрится отвратительно). Далее Save for web and devices, сохраняем ТОЛЬКО эти слайсы (перед сохранением, в окне «for web and devices» выделяем Shif+Click эти слайсы), а в диалоге сохранения Save As type: Images Only, Slices: Selected Slices. Такими большими кусками мы сохраняем не случайно. Дело в том, что размер jpg-файла увеличивается логарифмически от количества пикселей, и вес одного jpg будет всегда меньше, чем 2-х его кусков, сохранённых в jpg с темже качеством.

Теперь html.
Строчку

<td id="pageinner" rowspan="2"></td>

Дополняем, получив следующее:

<td id="pageinner" rowspan="2"><div id="pagebottom"><div id="pagetop">
    </div></div></td>

И стили:

#pageinner { background:url(../images/contentbackground.gif) left top repeat-y; }

Наш мостящийся участок

#pagebottom { background:url(../images/footer.jpg) left bottom no-repeat; }

Низ страницы

#pagetop { background:url(../images/header.jpg) left top no-repeat; }

Также в #pagetop позже добавится необходимый padding.
Для того чтобы посмотреть результат, нужно добавить временную растяжку:

    <td id="pageinner" rowspan="2"><div id="pagebottom"><div id="pagetop">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      …
      <p>&nbsp;</p>
    </div></div></td>

Эта растяжка нужна только чтобы увидеть результат, посмотрев-удалим. Но загрузив всё в браузер, увидим следующее:
les9.jpg
Удаляем растяжку, и переходим к верхнему меню.

Продолжение следует...

[Асмодиан]

Верхнее меню
les10.jpg
Одного взгляда на верхнее меню достаточно, чтобы понять: сделать его этически красиво невозможно, так как шрифт меню нестандартен, да ещё и с градиентом, ролловер применяется на фон пункта, но крайние пункты не прямоугольные. Можно либо приблизится к этическим нормам, потеряв на этом пару часов времени, либо «нарезать всё большими кусочками». На последнем и остановимся. Используя обычные слайсы и SFW&D, разрежем меню по пунктикам сначала со светлой подложкой, затем с тёмной. Вот подборка:
les11.jpg
HTML - код у меню будет таков:

<ul id="mainmenu">
    <li><a href="#"><img src="images/menuitem1.gif" rsrc="images/menuitem1_ro.gif" alt="Главная" /></a></li>
    <li><a href="#"><img src="images/menuitem2.gif" rsrc="images/menuitem2_ro.gif" alt="Мои достижения" /></a></li>
    <li><a href="#"><img src="images/menuitem3.gif" rsrc="images/menuitem3_ro.gif" alt="Об услугах" /></a></li>
    <li><a href="#"><img src="images/menuitem4.gif" rsrc="images/menuitem4_ro.gif" alt="Свадебный маникюр" /></a></li>
    <li><a href="#"><img src="images/menuitem5.gif" rsrc="images/menuitem5_ro.gif" alt="Цены" /></a></li>
    <li><a href="#"><img src="images/menuitem6.gif" rsrc="images/menuitem6_ro.gif" alt="Контакты" /></a></li>
    <li><a href="#"><img src="images/menuitem7.gif" rsrc="images/menuitem7_ro.gif" alt="Гостевая книга" /></a></li>
</ul>

То есть ссылки пока не проставляем, они нам понадобятся уже в процессе установки макета на CMS, хотя alt-ы нужно забить сразу. Прошу также обратить внимание на аттрибуты rsrc. Это ролловерные изображения кнопок - используются написанным мной скриптом, по моему довольно простой способ сделать rollover не коряча html-код.

Стили для менюшки такие:

#mainmenu, #mainmenu li
{
	height:41px;
	float:left;
	display:inline;
	list-style-image:none;
	list-style-type:none;
	padding:0px;
}

#mainmenu { margin:0px 0px 399px 75px; }

Указали точно высоту, чтобы в процессе подгрузки изображений кнопок макет не ездил, display:inline - это таблетка для ie6 (не укажешь, и в нём у mainmenu отступ слева станет аж 150-px вместо 75), убрали все аттрибуты списка (list-stype-image, list-style-type, padding).

Rev2: забыл упомянуть о margin-е для mainmenu: Подобные отступы удобно вымерять следующими способами:
- Использовать Slice-ы в фотошопе. Когда щёлкаешь дважды по слайсу, можно увидеть его размер в пикселях. Такчто просто. Рисуем слайс ил левого верхнего угла центральной колонки к левому верхнему углу нашей менюшки и смотрим его размеры. Его ширина есть margin-left его высота есть margin-top.
- Далеко не всега подобный способ отрабатывает, и если вам уж приходится подбирать ручками циферьки, то лучше это делать при помощи IE Dev Tolbar али FireBug... меняя циферьки у маргина до тех пор, пока двигаемый кусок не встанет пиксель в пиксель. А делее готовые циферьки копируем в css

Верхнее меню готово.

Продолжение следует...

[Niemans]

Поставлю в рамку, буду каждый день смотреть и учиться. Шикарно!