Главная CSS-верстка

5 советов верстальщику

Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что «пинок» получил от трех человек.

1) Читайте блоги специалистов в данной сфере. Хотя уже и не так часто, но в них периодически появляются интересные приемы верстки. А если заглянуть в архивы оных сайтов, то можно найти очень много полезного материала. Лично мне такие блоги здорово помогли в свое время, когда я стал переходить с табличной верстки на дивовую.

2) Используйте CSS-спрайты. CSS-спрайт — это картинка, объединяющая в себе несколько изображений, относящихся к какому-либо элементу страницы. Например, изменение изображения при наведении курсора. Плюсы CSS-спрайтов заключаются в том, что, во-первых, снижается количество запросов к серверу при загрузке страницы, во-вторых, не будет задержки в появлении изображения в момент наведения курсора.

3) CSS и xHTML в руках верстальщика — это отличный способ внутренней оптимизации сайта для целей SEO. Так пользуйтесь этим плюсом. Благодаря CSS, можно легко разместить контентную часть страницы в начале кода страницы, а все второстепенные элементы после него, при этом позволяя визуально сохранить все элементы так, как было задумано дизайном.

4) Создайте свои шаблоны CSS и HTML-файлов. В процессе верстки вы заметите, что в каждой новой работе используете одни и те же стили, возможно, похожую разметку страницы. Исходя из этого, сделайте базовые шаблоны, которые будут использоваться для каждого нового проекта, что позволит значительно сократить время на верстку.

5) Используйте структурные отступы в разметке (иными словами — отступы лесенкой или елочкой). Это позволит самому же не запутаться в своем коде, и, если будут обнаружены (не дай Бог), какие-либо баги, поможет их легко выявить.

Можно также посмотреть список других участников.

Эстафету никому передавать не стану, т.к. по-моему, уже все наигрались =)

Комментарии (32)

  1. Зависит от желания и количества времени, потраченного на изучение материалов и практику.

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

  3. allcorp, а кроме текстового редактора, по большому счету, ничего и не нужно.

  4. Довольно интересный сайт, просмотрел всё что есть у ваз из материала по css верстке. НО не нашёл одной штуки. Иногда встречал сайты в которых в конце адреса к css стилю писали параметр как к php скрипту
    Пример
    src="style.css?v=1″ или что-то в этом роде. Может ктонибудь объяснит для чего это?

  5. JiLiZART, насколько мне известно, это позволяет сбросить CSS-кэш у поситителей сайта.

  6. спрайты — вещь, при деланье менюшек. А для SEO, почему-то все забывают, найпервейшим является валидная семантическая верстка. HTML — это прежде всего документ, который должен быть написан правильно и CSS в этом смысле очень помогает — уменьшает код, делает док логичным и досягаемым для всех броузеров — мобильников. наладонников, ноутов и пр.

  7. Не подскажешь какая программа лучшая для выполнение DIV верстки с CSS?

  8. Я бы рекомендовал в качестве редактора WeBuilder 2008.

  9. Димокс, посоветуй удобные инструменты для верстки…
    Знакомый работает в дримвьювере, а мне он почему-то не сильно понравился!
    Есть какие то программы, которые ты мог бы посоветовать начинающему верстальщику?

  10. Dimox,
    по поводу совета № 5.
    Вы не могли бы порекомендовать какую-нибудь программу или онлайн-сервис, который бы помог выстроить лесенкой коды html-страниц сайта?