Навигация

Партнеры


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

Философия Css - дизайна. Часть 3.


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

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

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

Говорит, чго данный документ составлен на языке с ISO-кодом en, то есть на английском.

Определяет кодировку символов для документа, в данном случае UTF-8.

. Присваивайте заголовки
На каждой странице должен быть элемент с содержательным заголовком. Заголовки служат для описания ссылки, на которую в браузере установлена закладка, а поисковые машины повышают приоритет ключевых слов, встречающихся в заголовке, поэтому во многих случаях документ оказывается выше в списке найденных. По возможности каждой странице са йта следует приписывать уникальный заголовок, который описывает именно данную страницу, а не сайт в целом.
Пример:
css Zen Garden: The Beauty in CSS Design

Пользуйтесь подходящими элементами
Мы уже касались этой темы, ио нелишне будет повторить: используйте для разметки такие элементы HTML, которые описывают структуру документа, а не его внешний вид. Элемент р служит для выделения абзацев, а не для разбиения строки. Элемент blockquote нужен для оформления цитат, а не для формирования отступа. И так далее.
Конечно, не все элементы HTML вошли в схему XHTML 1.0 Strict. В ней (а равно и в схеме XHTML 1.1) меньше элементов, зато они служат более четко выраженным целям. Если не существует элемента, отражающего назначение структурной единицы в вашем документе, то стоит вспомнить об универсальных элементах div пли span. Но тут есть ловушка... впрочем, читайте дальше,
Пример:
<h3 />The Road to Enlightenment*/пЗ> а не:
<code style="font-size:">The Road to En1i ght enment</code>

Избегайте чрезмерного употребления
<div>

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

Если же их оказывается чересчур много, то стоит спросить себя, нельзя ли решить задачу с помощью более подходящих HTML-элементов. Например, никогда не следует пользоваться элементом div там, где более уместен h3, а span не рекомендуется употреблять вместо label.
Но это вовсе не значит, что от этих элементов надо отказаться. Несколько div в подходящих местах документа позволяют лучше контролировать стили и логически разграничить разделы. Считайте div повторно используемым контейнером: рассовывать контент по слишком многим контейнерам неудобно, зато несколько удачно размещенных контейнеров помогут рассортировать контент так, как вам хочется.
Пример:

<div id="PageReader">css Zen Garden</hl>
<h2>The beauty ofocronym title="Cascading Style Sheets">CSS<=/
acronym* Design</h2> </div>

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

<P />The Zen Garden aims to excite, inspire, and encourage participation.</p> а не:
<div>.
<p /><span class="text">The Zen Garden aims to excite, inspire, and encourage participation. </div>

Правильно пользуйтесь атрибутами class и id
Если добавить к элементам идентифицирующие атрибуты, то позднее на них можно будет сослаться из таблицы стилей или из сценария на языке javascript. Атрибут class с одним и тем же значением может встречаться у разных элементов на странице, тогда как каждое значение атрибута id в пределах страницы должно быть уникальным.
У одного элемента может быть несколько классов, а один класс может применяться к нескольким элементам. Можно применить к элементу одновременно атрибуты class и id, но не забывайте, что наличие на странице более одного элемента с одним и тем же значением id не допускается. Имена классов и значения идентификаторов могут состоять из букв и цифр (a- z, A- Z, 0- 9), но не должны начинаться с цифры. И лучше считать, что те и другие чувствительны к регистру, хотя некоторые браузеры не обращают на это внимания.
Три примера правильных идентификаторов:

<div id="sections* class=" corner="">
Два примера неправильных идентификаторов:
<span class="15pxhigh"> <div id="footer"><div id="footer9632;">


Испытание временем

Если вам доводилось писать документ, рассчитанный на сколько-нибудь продолжительное существование, то вы понимаете, как важно внимательно подойти к его составлению.
Рассмотрим, например, издательское дело. Эта книга выдержала много правок и рецензий, нацеленных на то, чтобы проверить все факты и улучшить стиль. Поскольку книга обычно стоит на книжной полке куда дольше, чем веб-страница находится в кэше браузера, то всю эту работу надо проделать заранее, чтобы рукопись оказалась безупречной. {Постучим по дереву!)
В Web таких ограничений нет, и это создает как удобства, так и трудности. Сервер возвращает веб-страницу при каждом обращении со стороны посетителя. Обычно это означает, что вы можете вносить изменения в дизайн уже после публикации. При последующем посещении сайта можно увидеть эти изменения, книга же останется неизменной вплоть до переиздания. Искушение продолжить совершенствование сайта зачастую очень сильно, к досаде дизайнеров, подписавших контракт с фиксированным сроком действия.
Хотя сайт Zen Garden и существует в Web, но у него есть особенности, из-за которых составление HTML для него оказалось ближе к написанию книги. Если бы было разрешено изменять разметку после того, как посетители начали присылать свои варианты, то все старые поступления оказались бы неработоспособны,

и сайт перестал бы отвечать своему назначению. В результате модификации текста изменился бы размер документа, а макет страницы мог бы непредсказуемо «разъехаться». Любые структурные или визуальные изменения были бы пагубны, поэтому HTML должен оставаться таким, как в момент запуска сайта.
Исходный HTML-текст сайта Zen Garden
Считайте, что HTML-структура сайта Zen Garden так же неизменна, как текст книги. Она ие изменится никогда, хотя улучшить ее можно было бы миллионом способов. Сам контент может быть слегка модифицирован, но основные HTML-элементы «высечены в камне».
На следующих нескольких страницах приведен исходный HTML-текст Zen Garden, на который мы будем ссылаться в разных местах1.
Во всех основных браузерах она расположена примерно в одном месте: в меню View (Вид). Для простоты можно вместо этого найти на самом сайте Zen Garden ссылку на образец HTML-файла.
Из листинга изъяты комментарии, имеющиеся в оригинальном исходном тексте. Вместо них на полях приведены примечания к некоторым разделам, поясняющие, почему было сделано так, а не иначе. Если вы хотите увидеть оригинальные комментарии, зайдите на сайт.

.!DOCTYPE html PUBLIC "-7/W3C/DTD XKTML 1.0 Strict//EfJ"
"http://artgrafica.net/TR/xhtml1IDTD/xhtmll-
»Crict.dtdu>
<htnl xmlns="http://artgrafica.net/1999/xhtml" />



Этот метод импорта таблицы стилей уже не является необходимым, раньше он гарантировал, что Netscape Navigator 4 не будет пытаться применить внешний CSS-файл вместо отображения простой нестилизованной разметки. См. статью Эрика Мейера (Eric Meyer) «Tricking Browsers and Hiding StyLes».

<ctyle type="text/ess" media="all" />
&#9632;c/head>



Идентификатор (атрибут id} в элементе body называется CSS-сигнатурой. Пользовательская таблица стилей может переопределить все или некоторые стили на странице в зависимости от указанной сигнатуры.
Поместив логически связанные группы элементов в отдельные div, мы упростим и сделаем более гибким процесс верстки.

Всегда стремитесь к простоте. Хотя люди, желающие внести свой вклад в Zen Garden, наверняка понимают, как загрузить файлы с примерами, имея эти ссылки (щелкнуть правой кнопкой мыши и выбрать из контекстного меню пункт Save As (Сохранить как)), но те, кто просто проявляет интерес коду, могут этого и не знать. По электронной почте продолжают приходить письма с вопросами, как сохранить эти файлы. Это означает лишь, что ваша аудитория состоит не только из тех, на кого вы рассчитывали.

<div id="container's <div id="pintrn"> idiv id - "pageHeader"
<hlxspan />css Zen Garden Красота <acronym title="Каскадные таблицы стилей">
CSS< /acronyms-дизайка</spans </h2> </divs
<div id="quickSummary">
<p class="р1" />
Демонстрация того, чего можно достичь в плане визуального представления в дизайне на основе СБ5</ acronyms. Выберите любую таблицу стилей из списка и посмотрите, как будет выглядеть страница.</span>


3aгрузите образец Html-файла и
Путь к прозрению Обочина темной и унылой дороги усыпана останками зависимых от браузеров тегов, несовместимых моделей

<acronym title="Document Object Model">DOK</acronym> и некорректно реализованной поддержки ^.acronym title="Cascading Style Sheets">CSS</ acronyms ,</span><ifp />


Иыне мы должны очистить свой ум от прошлого опыта. Прозрение снизошло на нас благодаря неустанным усилиям людей из W3C

</acronyms, <acronym standards="" project="">
WaSP и создателей основных браузеров.
</span
css Zen Garden приглашает вас отдохнуть душой и поразмышлять над важными уроками мастеров. Пусть снизойдет на вас просветление. Научитесь пользоваться проверенными временем (впрочем, это еще впереди) методами по-новому. Станьте частью Всемирной паутины.Педанты могут возразить, что W3C - это аббревиатура, а не акроним. Это действительно так, и в HTML есть эле¬мент abbr для такого рода сокращений, но Internet Explorer его не поддерживает, так что многие пользуются элементом acronym, который поддержан повсеместно.

</div> </div>
<div id="supportingText"> <div id="explanation's
<h3xspan />0 чем этот сайт?
<p class="pl*" />Существует очевидная необходимость в том, чтобы худояники-графики всерьез восприняли идею <acronym title=" Cascading Style Sheets">CSS</acronym>


. Цепь сайта Zen Garden - пробудить в них энтузиазм и призвать к участию. Для начала ознакомьтесь с уже существующими вариантами дизайна, которые перечислены в списке. Выбор любого варианта приведет к загрузке этой же страницы, но с другой таблицей стилей. Разметка остается той же самой, меняется лишь внешний .ess-файл. Честное слово.

</spanx/p»
CSS</acronym>

обеспечивает полный контроль над стилем гипертекстового документа. Единственный способ доказать истинность этого утверждения, так, чтобы у зрителя осталось глубокое впечатление, -показать, чего можно достичь, когда инструментом пользуется человек, способный превратить голую структуру в произведение искусства. На сегодня большинство трюков демонстрируют ."структурщикй" и кодировщики. Дизайнерам еще только предстоит внести свою лепту. Такое положение дел должно быть изменено.
</div>


Нет, мы не знаем, что означает слово «структурщик». Когда писался этот текст, существовала настоятельная потребность провести четкое различие между теми, кто пишет код, и теми, кто размечает HTML-доку менты. Но почему такая потребность возникла, мы уже не помним.
<div id="participation" />

Раз вы собираетесь модифицировать эту страницу, необходимо глубоко разбираться в технологии
<acronym title="CaEcading Style Sheets"s-CSS</acronym>
, но файлы с примерами достаточно хорошо прокомментированы, так что даже начинающие пользователи acronym title="Cascading Style".





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



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



Поиск

***

Онлайн
Всего на сайте: 48
Гостей: 20
Пользователи: Jabemuby, intacrice, VibAbanny, layerlyDap
Роботы: crawl Bot, robot Bot, robot Bot, robot Bot, robot Bot, robot Bot, Yandex Bot, robot Bot, robot Bot, Google Bot, robot Bot, Google Bot, robot Bot, Google Bot, robot Bot, MSN Bot, robot Bot, robot Bot, robot Bot, robot Bot

20-ка посетителей: intacrice, VibAbanny, Jabemuby, layerlyDap, dradbawl, alorbbiare, alibert.695rBep, Reannedia, Lukasznup, Jamesglunc, surseQuosy, hiпроооо, Mashka_Hiz, Waynepeank, Davidspeem, wordpress, MarkZS, SergeyprokEnato, volodkaOmigh, KesvinHoify


Партнеры

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

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

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

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