[Асмодиан]

Левое меню
Для готовой страницы осталось совсем немного – сделать левое меню и определить область и стили контента. Вспоминаем, что левое меню не тянется со всей страницей. Если контента много, то оно целиком лежит на фоне дерева, если мало, то перекрывает куст снизу. В этом перекрытии кроется сложность: нижняя часть меню, содержащая «набалдашник», должна иметь прозрачные части, чтобы не появилось чёрного али древесного прямоугольника, закрывающего куст. Поэтому вырезать её придётся как gif. Вспоминаем способ QLLQACm
Quick Mask, Levels, Levels, Quick Mask, Select All, Copy Merged.
Теперь скроем все текстовые сэмпл-надписи, выделяем все части меню.

У меня оно было в группе, и я просто скопировал всю группу (перетащить группу на кнопку new в палитре слоёв), а затем нажал Ctrl+E, чтобы свести все лои копии группы, Ctrl+Click на получившимся слое и немедленное удаление слоя, чтоб не мешал.

Применяем QLLQACm и получаем следующее изображение для последующей над ним работы:
les12.jpg
Как видно на рисунке, я его тутже и нарезал. Не забываем: кусок - бэкграунд делаем так, чтоб он был цикличен (целое кол-во страз), делаем его побольше, чтобы кожанный фон не показывал явной цикличности. Кроме фона нужны 3 заголовка и набалдашник снизу (реально я их очень основательно подпилил, тем самым немного изменив макет для того, чтобы можно было схлопнуть неактивный раздел.
Всю эту красоту сохраняем в gif (поскольку везде полупрозрачности), и можно ставить в макет.

<ul id="leftmenu">
  <li>
    <img src="/images/menuheader1.gif" alt="Галерея нейл-арт" />
    <ul>
      <li><a href="#">Последние работы</a></li>
...
      <li><a href="#">Последние работы</a></li>
    </ul>
  </li>
  <li>
    <img src="/images/menuheader2.gif" alt="Мастер-класс" />
    <ul>
      <li><a href="#">Последние работы</a></li>
...
      <li><a href="#">Последние работы</a></li>
    </ul>
  </li>
  <li>
    <img src="/images/menuheader3.gif" alt="Важно" />
    <ul>
      <li><a href="#">Последние работы</a></li>
...
      <li><a href="#">Последние работы</a></li>
    </ul>
  </li>
  <li class="footer">&nbsp;</li>
</ul>

В каждом пункте по несколько сэмпловых подпункта. Можно дать более "живые" названия, для лучшего понимания и представления макета.

и css

#leftmenu
{
	clear:left;
	float:left;
	width:189px;
}

#leftmenu, #leftmenu ul, #leftmenu li
{
	list-style-image:none;
	list-style-type:none;
	display:block;
	margin:0px;
	padding:0px;
}

#leftmenu li
{
	background:url(../images/menu.gif) left top repeat-y;
}

#leftmenu ul.hidden
{
	display:none;
}

#leftmenu img
{
	cursor:pointer;
}

#leftmenu li ul
{
	padding:10px 0px;
}

#leftmenu li li
{
	background:url(../images/bullit.gif) left 4px no-repeat;
	margin:0px 30px 0px 30px;
	padding:0px 0px 5px 14px;
}

#leftmenu li a
{
	color:#ccc5b2;
	text-decoration:none;
}

#leftmenu li a:hover
{
	text-decoration:underline;
}

#leftmenu li.footer
{
	background:url(../images/menufooter.gif) left bottom no-repeat;
	width:189px;
	height:29px;
}

В css уже заложенны ньюансы для создания аккордиона (при клике на любой заголовок, его подменю разворачивается, остальные сворачиваются).
отдельно можно рассмотреть #leftmenu li.footer - этот пункт используется для отображения набалдашника - больше он ни для чего не нужен.
Конечно, в данном примере я не рассмотрел создание буллета из макета (он создавался всё темже QLLQACm) и полировкой размеров и шрифтов пунктов - это остаётся вам самим.

Но на этом левое меню тоже законченно.

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

[Асмодиан]

Пара слов о контенте
Визуально контент уже готов, осталось только добавить в макет div, который не даст ему вылезать куда не нужно.
После 2-х сенюшек дописываем:

<div id="contentinner">

</div>

Всё что будет внутри - и будет контентом, а нам надо определить контейнер в css

#contentinner
{
	float:left;
	display:inline;
	margin:0px 0px 0px 22px;
	width:734px;
	padding:50px 6px 30px 6px;
	overflow:hidden;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#000000;
}

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

А теперь осталась кропотливая часть: в зависимости от макета создать стили для:
a
a:hover
ul - li
table - td - th
strong (b)
em (i)
h1 - h2 -h3 -h4

Ну чтоб хоть чтото прояснить для новичка, покажу пару примеров:

h1
{
	font-size:20px;
	font-weight:bold;
	color:#9a1e6c;
	margin:0px;
	padding:10px 0px;
}

h2
{
	font-size:16px;
	color:#9a1e6c;
	font-weight:normal;
	margin:0px;
	padding:8px 0px;
}

/* На самом деле em - это слабовыделенный текст, он не обязан быть курсивом*/
em, i
{
	color:#9a1e6c;
	font-style:normal;
}

/* strong - сильное выделение текста, bold к месту */
strong, b
{
	color:#9a1e6c;
}

a
{
	color:#9a1e6c;
	text-decoration:underline;
}

Для ховерссылки макет спец стиля не предусматривает.

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

Собственно и всё. Макет не приложишь, он большой

[Асмодиан]

Общее: о линиях среза
Вообщето линии среза (или разреза) - это враг верстальщика №1.
Для тех, кто ещё не понял что это: линя среза - это линия на которой чётко видна состыковка 2 кусков одного предмета (как правило фона).
Возникает она в 2-х случаях: состыковка и наложение.
Если говорить про состыковку, то это как паравило вопрос получение цикличекого фона. Если фон не цикличен, то мы, посмотрев на чистую страницу этого фона увидем, что она какбы разделена на квадратики - гадкое зрелище.
Таже срезы при состыковки возникают тогда, когда мы пытаемся крупный узорчатый фон впихнуть в ячейки таблицы. Это самый ужасный вариант, как правило единственный выход - это вообще отказаться от таблицы. В вышеописанном примере мы победили данный недуг тем, что у нас соседних ячеек было лишь 2, и мы отцентровали фон так, чтобы он примыкал к месту их стыка.

Срезы же при наложении - явление гораздо более частое. Ах, если бы IE6 без скриптов мог бы нормально отображать png, то термин срез при наложении был бы вообще излишен. Но он не может, и поэтому поддерживающий полупрозрачность png мы вынужденны заменять на gif и jpg. И потому мы вынужденны использовать приёмы QLLQACm... Но они спасают далеко не всегда. Если фон сильноконтрастен, а накладываемое сверху изображение имеет приличную тень... То скорее всего придётся тень убрать вообще. Если фон неконтрастен и негеометричен (как контент в предложенном уроке), то теоритически любой отрисованный на нём объект можно было-бы вырезать прямоугольником и на этот фон положить... Но скорее всего линия среза проявит себя и тут. Уж лучше использовать QLLQACm. Хато можно не бояться крупных теней. Если из-за тени мы захватим немаленький кусок фона, то лини среза всё-равно не будет.
В случае с негеометрическими и слабокнотрастными фонами есть главное правило: непрямая линия среза не видна. Вот когда она прямая линия - да, вероятность получить нежелательный эффект большая. А если округлая или какая-то ещё, то уже не видно.

А вот если фон контрастен и/или строгогеометричен (например квадратики полупрозрачного фона в Photoshop), то эффект приёма QLLQACm кажется крайне невероятным. Ведь узор порушиться!!!
Не тут - то было. Посмотрите увеличенный шрифт TrueType. вы увидите что буквы на границе окрашенны самыми невероятными цветами. Но при этом на 100% шрифт кажется ровно чёрным. Это всё так называемый краевой эффект. Если мы с нашим изображением захватим кусочки фона в 1px, то несостыковку этих кусочов ни один зоркий глаз не заметит.

Добавлено через 10 минут

Общее: как это делал я
Ну на самом деле примерно как делал, так и написал, хотя есть несколько моментов.
1. Разумеется некоторые вещи (вроде точных padding-ов) я подбирал
2. Некоторые вещи пришлось делать не с первого раза.
3. HTML код для всего я писал в 2 этапа: сначала табличку для визулаьного расширения сайта (до получения визуального результата (со стилями, вырезкой изображений, итд)), а потом разом верхнее, левое меню, контент и также немного сэмпловых строк контента. Лишь после этого я занялся вырезанием изображений и составлением css для них.

[sokol666]

Давно меня интересовало как можно избавиться от стыков. Спасибо!
А что это за QLLQACm?

[Асмодиан]

Перечитай с начала

Добавлено через 32 секунды

Про нижний уголок. А расшифровка аббревиатуры на этой странице

[sokol666]

Makarenya, понятно. Хреново я как-то прочитал )) следую совету - перечитываю

[Silver]

Makarenya, спасибо огромное за урок!

[Poizonsky]

Ооочень круто! Прилепите тему как «важную».

[Silver]

Poizonsky, готово.

[Ferzus]

Хороший, а главное полезный урок!