«Философия CSS-дизайна»

Философия CSS-дизайнаСвоим появлением эта книга обязана сайту, запущенному 8 мая 2003 года. Он изменил существовавшее до тех пор отношение к веб-дизайну и через некоторое время получил мировое признание. Сайт, названный CSS Zen Garden, является результатом совместной работы многих одаренных людей из разных стран.

От издателя

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

Эта книга не является учебником по CSS, но представляет несомненный интерес для различных категорий пользователей: от новичков до маститых профессионалов.

Издание состоит из 7 глав, предметного указателя и приложения.

Почитать отзывы покупателей книги.

Создание сайтов

16.07.08. Создание сайта «Обучение английскому языку в Уфе».

01.07.08. Создание сайта «Рудольф Нуреев: биография, фотографии, статьи, интервью, воспоминания».

Об уdivительной технологии

Позаботьтесь о красоте HTML-разметки

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

О красоте HTML-разметки я задумалась, когда прочитала великолепную и роскошную книгу Дэйва Ши и Молли Е. Хольцшлаг «Философия CSS-дизайна» (Dave Shea, Molly E. Holzschlag «The Zen of CSS Design: Visual Enlightenment for the Web», буквально «Путь CSS-дизайна: Визуальное просвещение для сети»).

Интересно, насколько противоречивы отзывы покупателей этой книги. Читать.

Книга посвящена сайту www.csszengarden.com (русская версия сайта — http://csszengarden.com/tr/russian/). Создатель сайта Дейв Ши разработал очень хитрую HTML-разметку: она проста и в то же время позволяет создавать бесконечное число вариантов дизайна при помощи CSS-технологии.

Дейв Ши предложил дизайнерам использовать его HTML-разметку и создать свой уникальный дизайн. Визуальное представление сайт должен получить с помощью новых правил в CSS-файле.

Привожу 4 изумительные работы:

Сайт www.csszengarden.com показал мне, что внешняя красота рождается благодаря CSS-технологии, уникальной графике, умению работать со шрифтами и особенной HTML-разметке. 

Особенности HTML-кода www. csszengarden.com

Как просмотреть HTML-код страницы? Если вы пользуетесь браузером Internet Explorer: Вид > Просмотр HTML-кода; в браузерах Mozilla, Opera: Вид (View) > Исходный текст (Page Source).

1. В исходном коде сайта нет ни одного табличного тега (<table>, <td>, <tr>), т.е. страница структурирована без таблиц (самый распространенный вариант макетирования в Рунете). Поэтому такую верстку называют бестабличной.

2. Страница структурирована посредством блоков (<div>). Поэтому распространилось и другое название такой верстки — дивная.

3. Каждый блок имеет свое уникальное имя. Логично, что блок с шапкой страницы получил название «pageHeader» (англ. «голова страницы»), блок со ссылками — «linkList» (с англ. «список ссылок»), блок с контентом — «supportingText» — разбит в свою очередь на блоки, которые тоже имеют свои имена, хвостовик документа — «footer».

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

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

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

На этот вопрос отвечу поговоркой: «Называйте вещи своими именами».

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

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

5. Страница создана в соответствии со стандартом XHTML 1.0 Strict, о чем свидетельствует в начале документа декларация DOCTYPE.

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

Разметка сайта www. csszengarden.com не содержит оформительского кода, соответствует WEB-стандартам, по сравнению с жестким табличным структурированием она дает возможность изменить внешний вид сайта без его правки. Каждый элемент разметки имеет соответствующее по смыслу название. Любой человек с базовыми знаниями HTML может разобраться в таком коде. Именно такую разметку я и называю красивой.

Автор: Регина Шайбакова

Добавлено к этой статье 14.02.08 г. Спустя несколько месяцев после написания статьи я выяснила, что мои мысли совсем не оригинальны.

Авторы книги «Мастерская CSS. Профессиональное применение Web-стандартов» — Энди Бадд, Камерон Молл, Саймон Коллизон — показывают, что «эстетически привлекательным должен быть не только внешний вид Web-страницы, но и ее код, что значительно облегчает поддержку и модификацию страницы как самим разработчиком, так и другими дизайнерами».

Кратко о книге. Книга посвящена современным технологиям Web-дизайна на основе каскадных таблиц стилей (CSS). Рассматриваются такие темы, как верстка на основе изменяемой и фиксированной ширины контейнеров; типы селекторов; абсолютное и относительное позиционирование; использование плавающих элементов; стилизация гиперссылок, форм, списков и панелей навигации; позиционирование фоновых изображений. Кроме того, обсуждаются вопросы применения фильтров и трюков для нивелирования на Web-страницах ошибок браузеров. Много внимания уделяется концепциям чистоты разметки и надежности кода.

Отзыв. Методично собираю библиотеку книг по CSS, купила и эту. Поначалу насторожила толщина -- она явно уступает остальным. Но! Она легко заменила в работе все остальные. Это самый свежий взгляд на многие проблемы вёрстки: здесь сведены воедино "глюки" различных браузеров и способы решения. Закрепление теории, оригинальные идеи и авторское видение процесса создания сайта.
Рекомендую. Гриценко Татьяна (отзыв покупателя книги на ozon.ru).

Рассылки Subscribe.Ru
Обучающие видеоуроки по созданию сайтов.
Подписаться письмом

CSS. Рецепты программирования

CSS. Рецепты программирования.Автор: Кристофер Шмитт

Эта книга поможет Вам сэкономить время и быстро решить проблемы Web-дизайна. Большое количество рецептов для новичков и искушенных пользователей CSS, важные подсказки и хитрости помогут воплотить в жизнь Ваши лучшие дизайн-проекты.

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

Дополненное обсуждением особенностей поведения новейших Web-обозревателей, включая Internet Explorer, Firefox и Opera, второе издание уделяет особое внимание сложному взаимодействию технологии CSS и графики.

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

Книга сокращает путь от теории к практике, предлагая решение следующих задач:

  • применение технологии CSS в программах Adobe Dreamweaver и Microsoft Expression Web Designer;
  • размещение элементов на странице с помощью плавающей модели, абсолютного и относительного позиционирования;
  • подробное описание популярных методов замещения HTML-текста изображением;
  • стилевое оформление элементов, определяющих типографику Web-страницы;
  • проектирование форм средствами CSS;
  • создание пользовательских навигационных меню;
  • разработка таблиц стилей для печати Web-страницы;
  • тестирование отображения Web-сайтов в различных Web-обозревателях с помощью одного компьютера.


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

Купить можно на ozon.ru.