Вот внешний вид макета (нажмите, что бы увеличить). Нет ничего особенного и особо сложного. Большая картинка - флеш анимация, будет вставляться динамически при помощи swfObject. Под ней - вывод всех языковых версий сайта. В макете их всего 3 языка.
Справа от флешки мы выводим разделы сайта, их всего 4.
Естественно, что макет верстается для того, что бы потом повесить его на CMS, о чем заранее сообщается верстальщику.
Ошибка №1. Не думаем о будущем.
Связана она с выводом языков под флешкой.
HTML код
<div class="lang">
<ul>
<li><a href="" title="">english</a></li>
<li><a href="" title="">italiano</a></li>
<li><a href="" title="">francais</a></li>
</ul>
</div>CSS код
.lang{ float:left; width:200px; margin:0 0 0 20px; display:inline; font-size:14px;}
.lang ul li{ float:left; margin-right:15px; display:inline}
.lang ul li a{ color: #ffffff; font-weight: normal;}
.lang ul li a:hover{ text-decoration:underline}
При добавлении 4го языка, например русского, наш макет приобретает следующий вид, после чего программисты просят лишить верстальщика возможности воспроизводить подобных себе путем хирургического вмешательства.
Все очень просто - ширина <div class="lang"> жестко задана, она и должна быть жестко задана, иначе после добавления 10го языка макет будет выглядеть совсем уже плохо. Но ширина дива должна быть не более ширины нашего флеш ролика, т.е. width:400px;
Очевидно, что при верстке под CMS, да и вообще при верстке следует понимать, что любой список может быть с легкостью продолжен и ваша верстка должна быть максимально рассчитана под это.
Ошибка №2. Вообще не думаем.
Если вы обратите внимание на вывод разделов - то с легкостью заметите там четыре идентичных блока, которые отличаются лишь картинкой и надписью над ней. Вполне логично ожидать что и в верстке мы увидим четыре идентичных блока, которые отличаются лишь текстом в подписи и картинкой.
Посмотрим внимательно на код.
<div class="menu">
<div class="menuTopBlock">
<div class="siteWeb">
<a href="" title="">site web</a>
<a href="" title=""><img src="images/img1-1.jpg" /></a>
</div>
<div class="supportDuSite">
<a href="" title="">support du site</a>
<a href="" title=""><img src="images/img2.jpg" /></a>
</div>
</div>
<div class="menuBottomBlock">
<div class="valeur">
<a href="" title="">valeur</a>
<a href="" title=""><img src="images/img3.jpg" /></a>
</div>
<div class="contact">
<a href="" title="">contact</a>
<a href="" title=""><img src="images/img4.jpg" /></a>
</div>
</div>
</div>Собственно, никакой идентичности нет. Программисты увидев такой код стали удивляться и готовится делать хирургическое вмешательство.
Выводы
Их всего три
- Если элементы идентичны на макете, они должны быть идентичны в верстке. Исключения бывают, но не столь часто, как пробуют их сверстать.
- Списки всегда надо верстать на максимально возможную по макету длину или ширину
- Всего предусмотреть невозможно, и если не думать на шаг, два, три вперед, то в конце концов получится лажа.
А верстальщика мы уволили. Это был его 7 макет и стало понятно, что думать человек не умеет или не хочет.
