Оглавление:

Верстка сайта — шпаргалка для начинающих

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

Процесс верстки — один из самых важных этапов создания интернет-ресурса, поскольку от работы верстальщика зависит:

  • Скорость загрузки веб-сайта;
  • Соответствие стандартам HTML;
  • Адекватность отображения в браузере;
  • Соответствие требованиям поисковых систем;
  • Адаптивность под различные экраны пользователя.

Что такое валидная верстка?

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

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

Страница даже с незначительными ошибками в коде не пройдёт через валидатор. Следует помнить, что лучший валидатор — браузер, поскольку восприятие сайта браузером — это восприятие сайта посетителем.

Базовые правила верстки сайта

Каковы основные правила качественной и грамотной верстки?

  1. Вёрстка обязательно должна быть кроссбраузерной для Firefox , Opera , Safari , Google Chrome и Internet Explorer , который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
  2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
  3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
  4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
  5. Логотип веб-сайта должен являться ссылкой на главную страницу;
  6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
  7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно ( menu , footer , header и т.д.);
  8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
  9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
  10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
  11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
  12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1 , h2 и т.д;
  13. Атрибуты всех тегов должны быть заключены в кавычки.

Основные подходы к верстке сайта

Предположим, что существуют два блока, стоящих рядом. Существует несколько основных подходов к вёрстке сайта:

  • Фиксированная верстка . При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
  • Резиновая верстка . В зависимости от размера окна браузера, блоки изменят свою ширину;
  • Адаптивная верстка . Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
  • Отзывчивая верстка . Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
  • Версия сайта для мобильных устройств . Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

Табличная верстка

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

Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:

  • Лёгкость в создании колонок, что положительно влияет на поведение при изменении размера окна браузера и позволяет создавать многоколоночные макеты сайта;
  • Склейка изображений. Зачастую рисунки делят на несколько отдельных фрагментов для уменьшения объёма файлов, создания эффекта анимации и т.д. Каждый рисунок помещается в отдельную ячейку таблицы, параметры которой задаются таким образом, чтобы стыков между ячейками видно не было;
  • Поскольку высоту и ширину таблицы можно задавать в процентах, табличная верстка широко применяется при создании резинового макета;
  • В отличие от некоторых CSS параметров, таблицы в разных браузерах отображаются практически идентично, что упрощает создание страниц;
  • Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению различных элементов дизайна относительно друг друга и на странице в целом расширяются.

Однако имеет место быть и небольшая ложка дёгтя:

  • Для того чтобы содержимое таблицы корректно отображалось браузером, она не будет показываться до тех пор, пока не будет загружена полностью. Если таблица массивная, загрузка сайта займёт довольно много времени;
  • Слишком громоздкий код из-за иерархической структуры тегов, что повышает сложность внесения изменений в отдельные параметры;
  • Плохая индексация поисковыми роботами. Контент сайта с табличной вёрсткой находится относительно далеко друг от друга, что затрудняет попадание сайта в топ поисковой выдачи.

Блочная верстка сайта

Слои, которые создаются с помощью тега div , представляют собой крайне удобные структурные элементы, оформление которых задаётся с помощью таблиц стилей CSS.

Блочная верстка сайта имеет следующие преимущества:

  • Блочная верстка образует гораздо меньший объём кода, в отличие от верстки таблицами, что не только увеличивает скорость загрузки страницы, но и уменьшает нагрузку на сервер;
  • Удобство изменения дизайна путём правки файла стилей;
  • Преимущества в сфере SEO. Вместо кода в первую очередь распознаётся контент и семантически правильно размечается.
  • Повышенная читабельность кода, что способствует соответствию стандартам валидности;
  • Задачи по нестандартному оформлению и расположению элементов веб-сайта могут быть с лёгкостью реализованы;
  • Возможность создать адаптивный дизайн, который будет корректно отображаться как на стационарных, так и на мобильных устройствах.

Несмотря на громадный ряд преимуществ, блочная CSS верстка имеет также и недостатки:

  • Повышенная сложность освоения . Табличную верстку освоить может и новичок, однако таблицы стилей предлагают настолько много различных возможностей, что понадобится немало времени для их изучения;
  • Кроссбраузерность . Решение данной проблемы требует больших усилий, чем в случае с табличной версткой.

Верстка слоями: преимущества, недостатки, сфера применения

Слои – это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript и VBScript , что позволяет использовать различные эффекты.

Достоинствами вёрстки слоями являются:

  • Высокая скорость обработки страниц браузерами;
  • С помощью позиционирования различных слоёв относительно друг друга можно создавать живые и интересные анимационные эффекты;
  • Свойства слоёв настраиваются с помощью CSS;
  • Благодаря поддержке системы декартовых координат, местоположение слоёв на странице сайта можно указать с предельно возможной точностью.

К недостаткам вёрстки слоями можно отнести:

  • Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования ( VBScript , CSS , JavaScript );
  • Отображение сайта в различных браузерах может также быть различным;
  • С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на

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

Страницы со слоями не имеют единого стандарта отображения браузерами, поэтому одна и та же страница в браузерах Opera и Google Chrome может выглядеть по-разному.

Таким образом, единые общепринятые правила верстки не существуют, и в каждом конкретном случае следует действовать по ситуации.

Однако, табличный метод верстки, несмотря на указанные недостатки, практикуется повсеместно и зарекомендовал себя как максимально надёжный.

www.internet-technologies.ru

Паттерны загрузки веб-шрифтов

Загрузка веб-шрифтов может показаться сложной задачей. Однако, на самом деле, она довольно проста, если вы будете использовать описанные ниже паттерны. Комбинируя их, вы сможете управлять загрузкой веб-шрифтов во всех браузерах.

Не проверив HTML5-кода, не суйся в воду — с Майком™ Смитом

Майк™ Смит (известный как @sideshowbarker) из W3C — человек, с головой увязший в исходном коде инструмента W3C для проверки валидности разметки; эта магия работает именно благодаря ему. Вопросы были заданы на радость и в назидание читателю сайта.

Основные способы вёрстки. Часть вторая: бестабличная вёрстка

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

Основные способы вёрстки. Часть первая: таблица

Для профессионального оформления сайтов необходимо знать не только основы CSS, но и понимать как работает браузер, знать правила, которым он следует. Именно они определяют основные способы и приёмы вёрстки. Первым способом раскладки элементов на страницах были таблицы. Они просты и обладают рядом полезных свойств, но не лишены определённых недостатков.

Быстродействие фронтенда для дизайнеров и разработчиков

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

Размеры блоков, или Назад в будущее

Мы стоим на пороге третьей эры Открытого веба, наши инструменты и процессы развиваются, начиная походить на инструменты обычных программистов. Но есть кое-что гораздо менее заметное, о чём бы я хотел поговорить сегодня, тоже способное по-своему изменить разработку сайтов. Это CSS-свойство box-sizing .

Как я научился любить скучные мелочи CSS

В будущем CSS есть много того, чего нам стоит ожидать с нетерпением: с одной стороны, там будет целый спектр новых методов, которые произведут революцию в вёрстке; с другой стороны — новый набор графических эффектов, которые позволят создавать на лету фильтры и шейдеры. Но если эти инструменты можно назвать выставочными лошадками CSS, тогда, думается мне, стоит обратить немного внимания и на рабочих лошадей: на те компоненты языка, которые являются его составными частями: селекторы, единицы измерения, функции.

Ключевые слова в линейных градиентах

Использование линейных градиентов в CSS может приводить к самым разнообразным результатам, которые не назовёшь иначе как странными; иногда даже сам синтаксис кажется странным. Эта статья не о новом «используйте прямо сейчас!» приёме. Как и многое из того, что я пишу, это скорее маленькая прогулка по одному из уголков CSS с целью посмотреть, есть ли здесь что-нибудь интересное.

Как работает nth-child

Существует такие псевдоклассы, которые могут выбирать каждый третий элемент: :nth-child(3n+3) — это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работают такие выражения, и что еще можно сделать с помощью :nth-child .

Элементы details и summary

Вам часто приходилось использовать JavaScript для создания виджета, показывающего и скрывающего какое-то содержимое? Возможно, для этого вы даже скачивали целую JavaScript-библиотеку? Что ж, можете радоваться: HTML5 позволяет создавать подобное всего лишь парой строчек кода, без применения JavaScript.

web-standards.ru

Правила грамотной верстки сайтов

Правильный подход к разработке макета сайта (50,67%)
У вас уже есть идея для будущего сайта, настало время хорошенько обдумать дизайн. Для этого лучше всего нарисовать макет сайта. Некоторые дизайн-студии тратят много времени и денег на создание умопомрачительных макетов. С другой стороны, я знаю людей, зарисовывавших макеты на салфетках. Так или иначе, сначала стоит уделить внимание основам…

Обзор новогодних сайтов (47,27%)
Обзор сайтов, посвященный встрече и проведению Нового 2003 года. Различные интересные и не очень ссылки и цитаты. Полезные и бесполезные ресурсы — одним словом предпраздничная лихорадка……

Геометрия модульной сетки (45,61%)
Обычно веб-дизайнер вкладывает в оформление страницы определенные закономерности. Они могут проявляться в строгой пропорциональности размеров таблиц, форм, в расстояниях между объектами и т.п. Это дисциплинирует структуру сайта. Но HTML-кодер может этого не увидеть. Во избежание осложнений дизайнер должен наглядно описать свой художественный замысел с помощью геометрии модульной сетки…

Дата публикации 25-11-2002 21:00
Статья просмотрена 15744 раз

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

Пробел, как вам известно, используется для разделения слов в тексте. Также пробелом отделяется слово со знаком препинания от следующего за ним слова, поэтому следует писать примерно так:

У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т._д.

Хм… надеюсь, не надо объяснять, что символ «_» поставлен для наглядности, а не потому что так надо 🙂 К тому же представился случай рассказать о неразрывном пробеле ( ). Неразрывный пробел, как и понятно из его названия, не позволяет браузеру «разделить» на странице соединенную этим пробелом фразу, поэтому наш предыдущий пример в html-коде лучше всего записать так, чтобы «д.» случайно не оказалась на другой строке:

У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т. д.

Такая запись позволит избежать разрыва сокращения «и т. д.&raquo. Также можно использовать (если по-другому никак не получается) для выравнивания и позиционирования элементов html-страницы, т. к. любое количество обычных пробелов, следующих друг за другом, браузерами отображается как один пробел, а каждый неразрывный немного отодвигает при отображении страницы следующие за ним элементы.

Дефис и тире

Начну с того, что дефис и тире — это разные вещи. Дефис разделяет между собой части одного слова, а тире — слова в предложении. Дефис не отделяется пробелами от соседних символов, а длинное тире отделяется.

Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят «Китикет», каждая порция которого дает дизайнеру 2–3 тысячи килокалорий…

Уф, пример получился глупый, но зато удалось воплотить в нем все виды дефисов и тире. В html это выглядит так:

Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят «Китикет», каждая порция которого дает дизайнеру 2–3 тысячи килокалорий…

Пожалуй, стоит немного разъяснить:

  • Для дефиса (-) нет html-кода, он ставится клавишей «-», которая еще служит как знак вычитания и находится рядом с клавишей «+» 🙂 Еще раз напомню, что дефис разделяет части сложносоставного слова.
  • Длинное тире (—) разделяет слова в предложении и отделяется от этих слов пробелами. Да, кстати, маленькое домашнее задание: подумайте почему в примере используется код:
    «Веб-дизайн — очень…»
    а не:
    «Веб-дизайн — очень…»?
  • Короткое тире (–) разделяет числа и само не отделяется от них пробелами.

С этим тоже вроде разобрались. Думаю, что не так уж и тяжело набрать «—» вместо нажатия клавиши «-». Знайте, ваши тяжкие муки и страдания в этом случае не пройдут даром, текст будет более читабелен, да и сайт станет выглядеть солиднее.

Существует 2 вида кавычек:

  • Кавычки-«лапки»:
    выглядят: “ и ”
    html-код: “ и ” для левой и правой соответственно.
  • Кавычки-«елочки»:
    левая и правая кавычки: « и »
    html-код: « и » для левой и правой соответственно.

По правилам русской типографии однозначно принято употреблять кавычки-«елочки». Но в интернете пока безоговорочно властвуют кавычки-«лапки». Почему бы это? Может потому что для «лапок» есть соответствующая клавиша, которая прекрасно работает в WYSWYG html-редакторах, а «елочки» надо перелопачивать вручную. Одним словом, лень победила общепризнанные правила, неважно, что от этого страдает престиж сайта.

Подождите! Не стоит выбрасывать кавычки-«лапки» на задворки истории! Если вначале или в конце цитаты встречаются внутренние и внешние кавычки, то они должны визуально различаться:

Один сетевой графоман недавно написал редчайший бред: «Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят “Китикет”».

Ну и напоследок еще несколько известных мне правил:

  • В конце заголовков точка не ставится, но если там стоят другие знаки препинания, то они сохраняются.
  • Многоточие обозначается не тремя точками, а кодом … Мелочь, конечно, но все-таки…
  • Не стоит писать «Вы», «Ваш» и т. п. Такие обращения используются в переписке, вряд ли сайт может сойти за личную переписку. Так что подобные вещи выглядят довольно смешно. Лучше пишите «вы», «ваш»…
  • Знаки copyright и registered — это не буквы «с» и «r» в скобках, а коды © и ® соответственно.

Вот, пожалуй, и все. Тем, кто заинтересовался этой темой, советую просмотреть приведенные ниже ссылки. Думаю пригодится 🙂

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

Статья «Как это пишется в Интернете»
Статья посвящена проблемам орфографии и правильного написания новых для русского языка слов, пришедших к нам вместе с компьютерами и интернетом.

Программа «Автотипографика»
Программа автоматически форматирует текст для веб-публикации, расставляя неразрывные пробелы, кавычки, тире, теги переноса строк и абзацев и удаляя лишние пробелы. Дополнительные фильтры позволяют транслитерировать текст и конвертировать некоторые символы Windows в набор ASCII.

5 правил создания небольшого бизнес-сайта (43,84%)
Вы решили открыть свое небольшое дело в интернете и еще только начинаете создавать веб-сайт. У вас, вероятно, есть миллион разных вариантов того, как он должен выглядеть. Однако, ваши представления об идеальном веб-сайте могут сильно отличаться от того, каким действительно должен быть сайт, предназначенный для бизнеса и продаж…

Проблемы редизайна веб-сайтов (42,62%)
После принятия решения о редизайне существующего сайта план действий становится похож на создание нового сайта с нуля — с тем же обдумыванием используемых технологий, дизайна и планированием работ. Однако есть и специфические проблемы, которых можно избежать. Они-то и рассматриваются в данной статье…

«Смотрелки» графических файлов (40,54%)
Хороших смотрелок (программ для удобной работы с большими коллекциями изображений) немало. Некоторые из них могут похвастаться поддержкой большого количества форматов, другие — интересными и оригинальными возможностями. Эта статья — небольшой обзор интересных бесплатных просмотрщиков изображений…

Игровые сайты сети (40%)
Просто выбрать хорошую игру нелегко. Все они продаются теперь в одинаковых jewel-коробочках от «1C». И, что показательно, на каждой непременно написано, что это эпохальная и величественная игра. В результате можно наткнуться на жуткую самоделку. В общем, без описаний, тестов, обзоров, отзывов на форумах настоящему (да и ненастоящему тоже…) игроману никуда…

Стиль Вашего сайта (40%)
Самое важное для проекта — его уникальность, узнаваемость. Это касается, как содержания, так и дизайна, т. е. того, как Вы преподносите материал. В статье описываются те тонкости дизайна, которые позволят посетителям Ваших проектов сразу же узнавать их автора или, по крайней мере, видеть «руку профессионала»…

computerlibrary.info

Основы верстки

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

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

Вначале дизайнер готовит макеты веб-страниц в графическом редакторе (например, Adobe Illustrator, Adobe Photoshop), утверждает их у заказчика и передает верстальщику на формирование HTML-кода.

Верстальщик получает работу в виде набора рисунков, где каждый из них соответствует макету отдельной страницы со своим дизайном. Например, вид главной страницы показан на рис. 1.

Рис. 1. Изображение главной страницы после работы дизайнера

Теперь необходимо проанализировать рисунок и решить, как же его превратить в веб-страницу. Для удобства происходит логическое разбиение картинки на отдельные блоки, с которыми идет дальнейшая работа. Так, по рис. 1 можно выделить два крупных блока — «шапка» страницы и основной контент. Рассмотрим для начала «шапку», показанную на рис. 2.

Рис. 2. Изображение «шапки» главной страницы

По задумке дизайнера цветная и белая полоса вверху должны занимать всю ширину веб-страницы, а набор пиктограмм с заголовком сайта выравнивается по центру окна браузера. Положение рисунков относительно друг друга меняться не должно и каждый из них является ссылкой на определенный раздел сайта. С учетом указанных особенностей возможны следующие варианты.

  • Сделать один рисунок и применить к нему карту-изображение.
  • Разрезать изображение на фрагменты и объединить их воедино с помощью таблицы, при этом отдельные фрагменты будут служить ссылкой.
  • Воспользоваться позиционированием элементов.

Каждый из приведенных методов хотя и приводит к нужному результату, но имеет также и свои недостатки, о которых верстальщик должен иметь представление.

После того, как первый блок будет готов и воплощен в HTML, можно переходить к работе над следующим блоком. Здесь теперь уже фигурирует текст, поэтому происходит формирование стилевого файла, в котором затронуты следующие факторы:

  • цвет фона веб-страницы;
  • гарнитура основного шрифта, его размер и цвет;
  • размер текста отдельных модулей (новостей, например);
  • цвет, размер и гарнитура шрифта заголовков;
  • параметры горизонтальных линий и рамок.

Дальше верстальщик, используя созданный CSS-файл, создает окончательный HTML-документ главной страницы.

На этом приключения только начинаются, потому как дизайнер подготовил макет не только главной страницы, но и макеты остальных разделов. А они несколько отличаются по своему виду от уже проделанной работы (рис. 3).

Рис. 3. Изображение макета для раздела «Байки»

«Шапку» теперь предстоит переделать, а в CSS включить параметры новых появившихся элементов. И так с каждым разделом.

Во время работы над шаблонами и по ее окончанию происходит проверка, которая должна ответить на такие вопросы:

  • корректно ли отображаются страницы в популярных браузерах?
  • происходит сохранение целостности данных при изменении размера шрифта в браузере как в большую, так и меньшую сторону?
  • можно продолжать работу с сайтом, если отключить показ изображений?
  • как существенно влияет на вид страниц разрешение монитора?

Следует также учесть, что статьи могут иметь разный объем и веб-страница должна сохранять свой вид независимо от этого.

Если ошибки найдены, то в шаблоны с их учетом вносятся исправления, и так до тех пор, пока число ошибок не будет сведено к минимуму.

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

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

Разумеется, из перечисленного дизайн и материалы сайта лежат вне сферы деятельности верстальщика, но все остальное, так или иначе, подвластно именно ему. Хотя работа верстальщика не видна, поскольку она скрыта в коде документа, куда заглядывают далеко не все, именно она обеспечивает правильность отображения веб-страниц и быстроту их загрузки.

Типографское искусство или просто типографика — вот еще одна область, которая также относится к теме верстки. Это именно искусство, объединившее в себе черты дизайна и верстки, и основано оно на знании шрифтов, опыте их использования, психологии восприятия, чувстве стиля и т.д. Действительно, какой шрифт лучше выбрать, чтобы текст хорошо читался, легко воспринимался при изменении размера букв и делал сайт неповторимым? При подготовке полиграфических материалов ответ на этот вопрос возлагают на дизайнера, но при создании сайтов дизайнер и верстальщик, как правило, решают его сообща.

Это связано с изначальной ограниченностью HTML в плане работы со шрифтами. Например, использовать можно только несколько универсальных гарнитур, которые имеются на всех компьютерных платформах. Разумеется, можно указать любой шрифт, установленный у вас в операционной системе и он корректно будет показываться на данном компьютере. Но никто при этом не гарантирует, что точно такой же шрифт находится на удаленном компьютере пользователя.

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

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

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

htmlbook.ru

Правило верстки сайта

Речь в этой небольшой статье пойдет не о специфических техниках для конкретных случаев, также не будет раскрыта тема правильной оптимизации кода и графики под высоконагруженные проекты. Не знаю, много ли здесь людей, часто имеющих дело с вёрсткой небольших проектов, для которых избыточно применение haml/sass и кучи методик правильной оптимизации, отлично описанных в статьях других профессионалов.

Ко мне уже несколько лет регулярно обращаются заказчики с просьбой завершить вёрстку их проекта, которую по каким либо причинам не закончил другой исполнитель, или поправить баги, несмотря на то, что я не работаю с чужим кодом, или ломлю за это двойную цену. Судя по ленте проектов известных российских фрилансерских сайтов, эта проблема стоит достаточно остро, за доработки никто не хочет браться. Самое удивительное, что большая часть ошибок совершенно типовые и легко исправляемые.

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

Логика кода — универсальные классы

Регулярно встречающаяся проблема — отсутствующая или искореженная во время довёрстки логика кода. Я говорю не о грубых ошибках, вроде пересекающихся и незакрытых тегов, а о совершенно отмороженном подходе большого количества начинающих верстальщиков к дальнейшей судьбе их работы. Мои слова могут показаться крамольными, но вёрстку небольших проектов, вроде сайтов-визиток, 30-60-ти страничных корпоративных сайтов и им подобных, нет нужды строить на базе css-«фреймворков», и модульная сетка для верстки таких сайтов тоже не требуется. Это современно, это показывает уровень ваших навыков и это действительно часто оправдано, но в данном случае это лишь усложнит чтение кода и увеличит дерево DOM. Как говорил старик Резо, не преумножай сущности сверх надобности.

Типовая ситуация — блок новостей:

Куда проще и понятнее? Имена классов могут быть любыми, но крайне желательно, чтобы они не выбивались из общего стиля. Зачем писать news-box , homenewsletter ? Особенно удивляет, если в следующем типовом блоке, например статей, класс называется articles-list или даже all_articles .

Обратите внимание на универсальный класс item . Каждый волен обзывать его по разному, скажем box , это не принципиально, мне item кажется абсолютно нейтральным и понятным по смыслу всем, кому предстоит работать с кодом в дальнейшем — это просто блок из списка других таких же, как он.

Update. Рекомендуется ознакомиться с комментариями, чтобы понять минусы такого подхода.
Ветка обсуждения.

Также можно заметить перед общим блоком комментарий, дублирующий название класса. Это может показаться избыточным, но на деле сильно облегчает ориентирование в коде. В редакторах с подсветкой комментарии обычно выделяются серым цветом, и ими удобно предварять относительно крупные куски кода. Злоупотреблять комментариями естественно не рекомендуется, также лично я не вижу смысла в циклопических конструкциях вида:

Другой часто используемый универсальный элемент — wrapper. В основном используется для ограничения размеров блока, находящегося внутри тянущегося контейнера. Простейший пример — резиновый футер с контентной частью фиксированной ширины внутри него.

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

В данном случае внутри контейнера у нас лежит картинка с float: left , и wrapper с контентом внутри, которому надо запретить обтекание( overflow: hidden ). Не будем заострять на этом внимание, напомню лишь на всякий случай, что универсальным классам нужно обязательно указывать родителей в CSS или использовать селектор > для ограничения радиуса действия стиля, чтобы в вёрстке не случился массакр:

Логика кода — забота о программистах

Сначала о формах, совсем немного.

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

Хорошим тоном сейчас считается подключать скрипты перед закрывающим body , с чем я не могу не согласиться, ничего плохого в этом нет. Также рекомендуется выносить статичные вызовы функций, не меняющиеся от страницы к странице в отдельный файл.

Логика кода — общие рекомендации
  • Минимизируйте дерево DOM не в ущерб удобству и здравому смыслу. Минимизуйте количество классов. Не забывайте о :first-child , :nth-child или их js-аналогах.
  • Хорошим тоном считается сброс значения поля по клику. Используйте placeholder или js.
  • Меню в подавляющем большинстве случаев верстается ненумерованными списками ul . Подменю в подавляющем большинстве случаев верстается без div внутри li .
  • Поп-апы и другие невидимые изначально блоки, не привязанные к конкретному контейнеру удобно размещать перед закрывающим body — это не мешает чтению кода с начала.
  • Таблицы, как ни странно, удобно верстать таблицами, иногда помогая блоками. Не забывайте о tr:hover , thead , tbody и tfoot . Чередующиеся строки с разными стилями верстайте через CSS-селекторы или с помощью классов even и odd
  • Имена основных папок корня проекта и названий страниц должны быть стандартизированы. Обычно это css для файлов стилей, images или img для изображений(и подпапка tmp для временных изображений, которые не будут использоваться на живом сайте), js для js, fonts для шрифтов. Имена страниц я для удобства беру из названий файлов макетов, предоставленных заказчиком.

Немного о CSS

Не мне учить кого-либо, как ему оформлять таблицу стилей, я лишь покажу известный способ, который относительно редко используется, зато повышает читаемость CSS до запредельных высот и избавляет от необходимости использования заклинания Ctrl+F .

Древовидная однострочная структура CSS на мой взгляд по всем пунктам дает фору такой форме записи:

Читабельность повышает также последовательность написания селекторов в строку. Некоторые пользуются своей логикой записи, кто-то упорядочивает свойства по алфавиту, часть верстальщиков вообще пишет от балды. Я предпочитаю в первую очередь описывать свойства, описывающие поведение контейнера( position , top/right/bottom/left , float , затем свойство display , если оно присутствует, далее следуют всевозможные маргины и паддинги, outline , cursor и border -ы, после чего идут шрифты и их свойства, за ними — background и наконец свежие CSS3-свойства с префиксами или без).

Update. В комментариях проясняются серьезные минусы однострочного написания таблицы стилей. Рекомендую ознакомиться.
Ветка обсуждения.

CSS — Общие рекомендации
  • Используйте сокращенную круговую форму записи маргинов и паддингов( margin: 0 0 0 0 ). В противном случае ваши строки будут гигантской длины, что ухудшит читаемость.
  • Не выносите reset в отдельный файл, подключайте его в начале общего файла стилей. Надо экономить на запросах к серверу. Внешние шрифты, font-face-kit’s можно подключать сразу после reset .
  • Это же касается изображений. Нет необходимости создавать отдельный файл, например, со всеми иконками сайта. Его будет неудобно редактировать, если у одной из иконок вдруг увеличится размер. Но в разумных пределах спрайты необходимы — link/visited/active/hover подложки для ссылок делать спрайтами нужно обязательно, чтобы при наведении на ссылку hover -подложка не подгружалась в течение пусть и 15-20 миллисекунд.
  • Крупные блоки кода также как и в html рекомендуется предварять комментарием — /* comment */ .
  • По хакам для IE — у меня нет однозначного мнения. В основном я размещаю их в конце общего файла стилей. Если их больше 5-10, подключаю с помощью условных комментариев.

Это всё, что сходу пришло в голову из ситуаций, с которыми я регулярно сталкиваюсь по работе. Если у кого-то имеются поправки или дополнения, укажите их в комментариях. Заранее благодарен.

Из литературы могу порекомендовать отличную книгу Эрика Мейера «CSS — Подробное руководство», брошюру от авторов проекта webo.in «Разгони свой сайт» и собственно спецификации CSS.

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

m.habr.com

Это интересно:

  • Правила забора биологического материала для лабораторных исследований ВНИМАНИЕ! Вы используете устаревший браузер Opera /10.1 Данный сайт построен на передовых, современных технологиях и не поддерживает версии. Настоятельно Вам рекомендуем выбрать и установить любой из современных браузеров. Это […]
  • Разрешение для работы модуля адоб флеш плеер Включение для браузера Internet Explorer От эксперта: включение Flash Player HTML5-версия представленного выше видео находится в разделе Включение Flash Player в Internet Explorer. Щелкните значок «Инструменты» в правом верхнем углу […]
  • Добавить программу в автозагрузку в реестр Как добавить программу в автозагрузку Привет, хочу спросить, как добавить программу в автозагрузку , чтобы при включении компьютера эта программа запускалась сама. Хочется всё автоматизировать у себя в операционной системе. […]
  • Арбитраж на google Lee — seo, манимейкинг Арбитраж трафика с гугл Adwords Перепродажа трафика это очень эффективный способ манимейкинга , при том условии, что вы сможете выжимать из потраченных денег определенный процент профита (прибыли) […]
  • Мазила в реестре Мазила в реестре Думаю не я один задавался вопросом: «Каким образом управлять Mozilla Firefox с помощью групповых политик?» Потратив не один час на поиски более-менее вразумительного ответа, нашел только способы, которые создают […]
  • Кнопка возврата на сайте Веб-дизайн и поисковая оптимизация Вебдизайн с jQuery - это очень просто! • Фотогалерея jQuery - просто и красиво! • Фотогалерея jQuery со слайд-шоу • Фотогалерея для интернет магазина • Фотогалерея prettyPhoto • Фотогалерея […]