Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

Философия CSS дизайна. Часть 2.

Основной вариант дизайна -«Безмятежность».

Хотя каждый из первых пяти вариантов дизайна внес важный вклад в успех проекта, однако только один вариант должен был постоянно оставаться на виду в течение длительного времени. В качестве основного варианта была выбрана утонченная, минималистская «Безмятежность», хотя на эту роль претендовал и вариант 002 «Плавленый сыр с лососем» из-за более яркой образности; к счастью, предпочтение все-таки было отдано «Безмятежности».
Все изображения и текст в основном варианте дизайна, за исключением текста в самом теле страницы, были нарисованы в Adobe Photoshop. Сначала предполагалось, что тексты заголовков будут состоять из нарисованных вручную каллиграфических штрихов, но, потратив час на работу с кисточкой и тушью, Ши решил, что шрифт Calligraphic 421 от компании Bitstream подходит гораздо лучше.
Китайским иероглифам присуща замысловатость и внутренняя красота, поэтому многие дизайнеры любят дополнять ими свой замысел. Пытаясь уйти от типичной западной привычки вставлять бессмысленный набор иероглифов для придания таинственности, Ши потратил некоторое время на то, чтобы иероглифы на вертикальном свитке, идущем вдоль левого края страницы, имели определенный смысл. И хотя идея была хороша, но результат все равно получился не слишком вразумительным: выбранные иероглифы означают «начало», «полный» или «целый» и «умение».
Помните, как детьми вы развлекались, капая тушью на лист белой бумаги и дуя на кляксу через соломинку? В результате получалась черная древовидная фигурка, которую можно было перевести на мятую салфетку и представить как цветок. Дерево в правом верхнем углу страницы - это дань воспоминаниям о таких забавах. На рис. 13 показано, что оно прошло несколько этапов, Сначала простыми цветами был нарисован грубый эскиз, а затем добавлено несколько слоев с деталями.

Последствия
Уже через несколько дней стали приходить варианты дизайна от посетителей сайта; за первую же неделю трафик вырос до нескольких тысяч посетителей в день. Люди вызывались добровольно перевести сайт на десятки других языков. Сразу стало понятно, что Zen Garden сумел удовлетворить долго накапливавшийся спрос, для которого в Web не было никаких других предложений.

С тех пор сайт Zen Garden упоминался в десятках журналов, издаваемых в разных странах, и во множестве книг, так что его канонический статус в истории веб-дизайна можно считать зафиксированным. Со всего света приходят благодарственные письма от дизайнеров и разработчиков, которым с помощью этого сайта удалось убедить своих работодателей, клиентов и коллег в ценности дизайна на основе CSS. А многие из тех, кто прислал свои работы, испытали резкое уско¬рение в своем карьерном росте, ощутив мощное воздействие сайта Zen Garden.
Хотя сайт Zen Garden создан и поддерживается одним человеком, он тем не менее является плодом коллективных усилий добровольцев. Своим успехом он обязан многим талантливым дизайнерам, приславшим свои работы. Каждый находит в Zen Garden что-то свое и, хотя этот сайт задумывался главным образом ради демонстрации ценности CSS для целей дизайна, но у него обнаружились и другие, заранее неведомые достоинства.
+ Дизайнерам, решающим проблему верстки, теперь есть куда обратиться, если что-то не получается; когда в одном месте собраны сотни работ, шансы, что кто-то раньше уже сталкивался с подобной задачей, весьма высоки. Использовать представленные на сайте таблицы стилей в качестве образца для верстки допустимо и даже поощряется.
+ Там же можно найти новые способы применения CSS и создания различных эффектов. Вполне вероятно, что среди сотен вариантов вы найдете для себя что-то новенькое.
♦ Это замечательный способ проверить поведение браузера. Весь код заведомо корректен и соответствует стандарт - фотоам, так что теоретически страницы должны одинаково выглядеть в любом браузере. (На практике так обстоит дело не всегда. Из-за ошибок и отсутствия поддержки для некоторых элементов в конкретном браузере дизайнерам приходится учитывать возможные различия во внешнем виде, применяя для этого всяческие CSS-фильтры и уловки.)
+ Именно сюда приводят работодателей и клиентов, когда хотят убедить их в пользе дизайна на основе стандарт - фотоов.
♦ Это прекрасное лекарство от творческого застоя. Ничего не выходит? Загляните в поисках вдохновения.
+ Это биржатруда как для высококвалифицированных профессионалов, таки для начинающих дизайнеров.
Работодатели и потенциальные клиенты регулярно обращаются к авторам понравившихся работ с предложением временного контракта или постоянной работы. Их произведения часто появляются на страницах книг и журналов.
♦ Преподаватели находят этот сайт полезным инструментом для обучения современным методам веб-дизайна.

Заложение фундамента
Еще до составления таблицы стилей необходимо определиться с разметкой своей веб-страницы. Раз вы читаете эту книгу, то, наверное, слышали об отделении структуры от представления. Для тех же, кому эта идея внове, скажем, что основное достоинство дизайна на основе CSS состоит в том, что таблицы стилей можно присоединить к имеющемуся хорошо структурированному документу, дабы сделать его визуально привлекательным.
Под форматированием веб-страниц долго понимали выбор нужных базовых элементов HTML в зависимости от того, как они представляются. Если вам нужен был абзац с отступом, следовало поместить текст вну грь тега , чтобы создать поля с обеих сторон. У элемента
, однако, есть вполне конкретное назначение - подчеркнуть, что фрагмент текста является цитатой; отсюда и название. Применение этого элемента для выделения текста, не являющегося цитатой, просто ради создания отступа, означает неверный подход к задаче; ведь CSS позволяет сделать отступ для любого элемента.
Правильное структурирование документа - это, по сути дела, выбор подходящих элементов, причем решение должно основываться на том, для чего элемент предназначен, а не на том, как он выглядит.
Теперь целью становится перенос всего форматирования в CSS-файл и использование HTML-разметки только для описания структуры. CSS - это язык дизайна, который накладывается на существующую структуру и позволяет визуализировать ее. Язык HTML более не следует использовать для дизайна.
Ну а все-таки — что мы выигрываем, уделяя такое внимание правильности структуры? Вообще, что в этом контексте означает слово «структура»?

Семантическая разметка


На фотографии Мэтт и Джереми. Как обычно, Мэтт корчит рожи. У нас не так много фотографий, где бы он этого не делал.
А вот тот же текст, размеченный семантически:
Наша ceмья
На фотографии Мэтт и Джереми. Как обычно, Мэтт корчит рожи. У нас не так много фотографий, где бы он этого не делал.

Грубо говоря, элемент - это часть структуры, тогда как тег-лишь синтаксическая конструкция, позволяющая описать структуру.
В первом примере все геги предназначены исключительно для форматирования. Теги нужны для вставки пустого места между строками, теги - для отображения текста полужирным шрифтом, а геги - для задания размера шрифта.
Во втором примере внешнему виду страницы не уделяется никакого внимания; упор сделан на то, насколько хорошо элементы ИЗ и р описывают назначение каждого фрагмента на странице. Элемент р содержит собственно текст, а элемент h3 описывает заголовок, который в контексте всей страницы имеет уровень 3.
Главное во втором примере—это то, что внешнее представление элементов на данном этапе несущественно; мы все равно переопределим его с помощью CSS. Элементы выбраны только исходя из соображений адек¬ватного описания контента. Именно в этом и состоит семантика HTML - выбирать элементы, основываясь на их предназначении, а не внешнем виде.
У семантического форматирования документа есть весомые преимущества, которые мы обсудим чуть ниже. А пока имейте в виду, что применять таблицы стилей следует к правильному, хорошо семантически структурированному документу.














Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 18
Гостей: 9
Пользователи: - отсутствуют
Роботы: Yandex Bot, Yahoo Bot, MSN Bot, Google Bot, Google Bot, Google Bot, crawl Bot, robot Bot, InternetSeer

20-ка посетителей: Melvinvor, esterta3, blancaxf69, lorenahr11, edwinkg18, Joshuabara, GeraldRix, Nathantag, augustaqv4, JamesGeons, KennethGek, patta16, AgnesAccony, MichaelRok, roseannic1, sallylr2, glennfw18, Lrwxm78v, staceyaa2, Michaelflill


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги