Новинка! CD "CSS от А до Я: Энциклопедия блочной верстки"
Современный подход к созданию веб-сайтов предполагает активное использование стилей для управления видом элементов веб-страниц и их верстки. Так называемая блочная верстка или верстка с помощью слоев приобретает все больше поклонников, а это в свою очередь предполагает знание свойств CSS и их правильное применение на сайте.
Сборник книг, представленных на диске, содержит самую полную, исчерпывающую информацию о всех свойства CSS, тегах, атрибутах, поддержке различными броузерами, хаках и т.д. Вы узнаете о сложном стилевом оформлении документов, пользовательском интерфейсе, верстке таблиц, о списках и генерируемом содержимом, о свободном перемещении и позиционировании, о семействах шрифтов и механизмах резервирования, о том, как работает модель блоков, о новых слекторах CSS3 и многое-многое другое.
Крис Койер (Chris Coyier), автор
CSS-Tricks, опубликовал замечательную схему того, как, по его мнению, должен выглядеть красивый и современный HTML-код.
В
своей статье он показывает пример, который представлен в трех вариантах:
PNG-скриншот;
оригинал в PSD-формате;
текстовый вариант.
Ниже я хочу привести свой свободный перевод комментариев к скриншоту (читай – рекомендации по написанию HTML-кода):
HTML5 – веб-стандарт HTML5 с его новыми элементами позволяет создать самый красивый HTML-код.
DOCTYPE (тип документа) – HTML5 имеет лучший DOCTYPE из всех существующих. Он прост в написании и легок для запоминания.
Indentation (отступы) – в коде используются отступы (через табуляторы или пробелы), это помогает проследить иерархию кода, т.е. увидеть структуру родительских и дочерних тегов.
Charset (кодировка) – указывается до какого-либо содержимого страницы.
Title (заголовок) – заголовок сайта прост и понятен. Сначала в заголовке идет название страницы (если это не главная), затем ставится разделитель, и после него идет название сайта.
CSS – используется только один файл стилей (типы носителей указываются внутри таблицы стилей) и отдается он только хорошим браузерам. Браузеру IE версии 6 и ниже передается
универсальный файл стилей.
Body (тег <body>) – к нему добавлен идентификатор, чтобы можно было оформлять разные страницы без дополнительной разметки.
JavaScript – jQuery (самый красивый JavaScript-фреймворк) подключается с сайта Google. Подключается только один файл с JavaScript. Оба файла прописываются внизу кода страницы.
File Paths (пути к файлам) – для повышения эффективности используются относительные пути к файлам. К таким файлам, как, например, изображения, указываются абсолютные пути, т.к. они могу быть синдицированы, т.е. использованы в RSS-потоках.
Image Attributes (параметры изображений) – изображения содержат альтернативный текст. Высота и ширина указываются для эффективности рендеринга страницы.
Main Content First (главный контент – в самом начале) – главное содержимое страницы идет после названия сайта с описанием и меню, но до второстепенной информации, которая обычно размещается в сайдбарах.
Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы) – используются теги <header>, <nav>, <section>, <article>, <aside> и т.д. Все они надлежаще описывают содержимое, которое в них находится, нежели тег <div>, используемый ранее.
Hierarchy (иерархия) – используются теги заголовков <h1>…<h6>, которые показывают иерархию содержимого страницы.
Appropriate Descriptive Tags (семантически правильные теги) – списки оформлены в HTML как списки в зависимости от их содержимого: либо нумерованные <ol>, либо ненумерованные (<ul>), либо списки определений (<dl>).
Common Content Included (подключение повторяемого содержимого) – повторяемые части страниц подключаются на стороне сервера, неважно какой метод, CMS или язык программирования при этом используется.
Semantic Classes (семантические классы) – используются семантически правильные названия классов и идентификаторов, они должны описывать содержимое тега. Например, класс col гораздо лучше, чем left.
Classes (классы) – используются и для любых других элементов, которым необходимо применить такое же оформление.
IDs (идентификаторы) – применяются только к какому-то одному элементу в пределах страницы.
Dynamic Elements (динамические элементы) – элементы, которые должны быть динамическими, являются динамическими.
Characters Encoded (символы закодированы) – если это специальные HTML-символы, то они закодированы.
Free From Styling (независимость от стилей) – контент на странице должен быть доступен независимо от того, применяются к элементу стили или нет (извините, я не совсем понял этот пункт при переводе – прим. Dimox).
Comments (комментарии) – закомментированы те участки кода, которые при его изучении могут быть не сразу очевидны для понимания.
Valid (валидность) – код должен быть валидным в соответствии со стандартами: теги закрыты, используются обязательные параметры, нет запрещенных элементов и т.д.
P.S. Признаюсь, я грешен =) Я не всегда выполняю некоторые из рекомендаций, однако стремлюсь это делать.
Видеокурс "Профессиональное создание Интернет-магазина под ключ"
Полный и качественный видеокурс по созданию интернет-магазина под ключ для любого уровня подготовленности.
68 уроков полностью раскроют все тонкости и нюансы профессионального создания интернет-магазинов.
Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail:
admin@wm-zone.info
Современный подход к созданию веб-сайтов предполагает активное использование стилей для управления видом элементов веб-страниц и их верстки. Так называемая блочная верстка или верстка с помощью слоев приобретает все больше поклонников, а это в свою очередь предполагает знание свойств CSS и их правильное применение на сайте.
