Навигация

Партнеры


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

CSS 41. Дизайн сайта


Мнемоника
Дизайнерские трюки, обеспечивающие текучую верстку и дополнительные эффекты


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


Решение задач


После применения начальных стилей (они здесь не приводятся) возникла первая проблема. Для «Мнемоники» нужны были две желтых картинки для фона элемента body: одна повторяющаяся по вертикали и вторая — перекрывающая ее и повторяющаяся по горизонтали.

body {
font-size: small;
font-family: arial, sans-serif;
background: #B0A40B url(bg-1.gif) top left
repeat-x;
margin: Opx;
padding: Opx;


Но к элементу body присоединена горизонтально повторяющаяся фоновая карт - фотоинка, a CSS не позволяет присоединять к одному элементу несколько изображений. Так что оставалось лишь использовать два элемента. К счастью, элемент # c o n t a i n e r находится внутри body и заключает в себе всю остальную разметку, поэтому вторую карт - фотоинку можно присоединить к нему:

#container {
background: transparent urlfbg-2.gif) top
right repeat-у;


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

Организация графики

Взглянув на окончательный вид страницы, вы заметите много отдельных визуальных элементов. Надо ли расположить некоторые поверх других, воспользовавшись
абсолютным позиционированием? Или лучше сохранить все вместе в виде одного большого изображения?
Решение находится посередине. Выбор того, какие элементы объединяются в один JPEG-файл, а какие выделяются в отдельные GIF-файлы, зависит от личных предпочтений дизайнера и ограничений, налагаемых разметкой. Не существует «единственно верного» ответа, два дизайнера могут прийти к различным
решениям.
Поскольку изменять HTML-разметку сайта Zen Garden нельзя, то было принято решение присоединить изображения к двум заголовкам внутри раздела #pageHeader и, быть может, задействовать сам этот div. Таким образом, мы можем взять максимум три
картинки, поэтому левая часть страницы (за вычетом левого верхнего графического уголка) была сохранена в виде одного изображения, а правая часть - в виде
другого. Третий - узкий - GIF повторяется горизонтально под каждой стороной.
Не сразу было понятно, как можно заставить такую графику расширяться в случае текучей верстки; казалось, что фиксированные размеры больше подходят
для верстки с фиксированной шириной. Однако между двумя сторонами заголовка есть разрыв, который можно было бы заполнить однородными полосками,
допускающими расширение. Это сделано специально, так как Ши заранее решил, что верстка должна быть именно текучей.
Итак, картинки выбраны, посмотрим, как их лучше скомбинировать. Повторяющееся изображение должно быть размещено под всеми остальными:

#pageHeader {
height: 171рх;
padding: Opx;
background: transparent url(bg-4.gif) top
left repeat-x;
}


Неизменяемость HTML-разметки Zen Garden сужает диапазон доступных возможностей, но все же их остается достаточно для того, чтобы добиться нужного результата за счет комбинирования графических элементов. Поскольку текст элементов h i и h2 внутри раздела #pageHeader отображается на фоне одной и той же картинки (правой стороны заголовка), то применить стиль нужно только к одному из этих двух заголовков,
и тогда будет виден весь текст. Таким образом, второй заголовок можно использовать для дальнейшей подстановки изображения, и мы присоединим к нему карт - фотоинку, которая появится слева:

#pageHeader hi {
padding: Opx;
margin: Opx;
float: left;
width: 396px;
height: 171px;
background: transparent url(cr-tl.jpg) top
right no-repeat;


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

#pageHeader h2 {
padding: Opx;
margin: Opx;
position: absolute;
top: Opx;
right: Opx;
width: 3 5Opx;
height: 171px;
background: transparent url(cr-tr.jpg) top
right no-repeat;
#pageHeader h2 span {
display: none;


Идем дальше

Мы пропустим описание значительной части процесса верстки страницы и расскажем о некоторых нетривиальных эффектах в «Мнемонике». В конце оригинального CSS-файла есть место, сопровождаемое комментарием о том, что начинаются специальные эффекты. Если исключить из файла все, начиная с этого места, то получится страница, изображенная на. Собственно, именно так и будет выглядеть окончательный результат в Internet Explorer. Однако в браузерах Firefox или Safari страница будет выглядеть так.

Суть проблемы

Выбрать уникальные элементы на странице, которым не назначен ни класс, ни идентификатор, можно с помощью имеющихся в CSS2 селекторов. Беда в том, что
не все браузеры их поддерживают. Ши воспользовался этими селекторами, но вообще-то добиться нужного результата можно было бы и проще: достаточно
изменить разметку, чтобы на нужные элементы можно было сослаться.
Когда составляется разметка, нужно стараться поддерживать баланс между простотой кода и возможностью выбрать затем необходимые элементы. При создании сайта Zen Garden ставилась задача добиться максимальной гибкости, но в некоторых случаях ее все же оказалось недостаточно. В большинстве проектов HTML-разметка и CSS разрабатываются параллельно, так что вы можете поступать так, как удобно.

Список вариантов дизайна


В Internet Explorer список вариантов дизайна представлен в виде одной вертикальной колонки, а в Firefox и Safari - в виде двух колонок, наклоненных под тем же углом, что левый край фона. Чтобы достичь такого эффекта, нужно выбрать и позиционировать отдельные элементы списка. Для этого применяются селекторы дочерних и сестринских элементов, которые определены в спецификации CSS2, но не поддерживаются браузером Internet Explorer для Windows:

ttlselect ul>li {
position: relative;
}
tlselect ul>li+li {
position: relative;
#lselect u
position:
left: -14px;
left: -12px;
relative; left: -lOpx;


Первый селектор выбирает любой элемент l i , являющийся непосредственным потомком элемента u l , находящегося внутри раздела ttlselect, в данном случае -
все восемь таких элементов. Второй селектор аналогичен, только элементу l i должен предшествовать еще хотя бы один такой же элемент, а следовательно, выбираются все элементы l i , кроме первого. Третий селектор делает то же самое, но выбираемому элементу должно предшествовать уже не менее двух таких же элементов, и так далее. Строя каскадный список правил, каждое из которых переопределяет предыдущее, мы в конечном итоге позиционируем все восемь ссылок по отдельности. Это излишне запутанное решение простой, в сущности, проблемы; как правило, вы можете изменить разметку, добавив дополнительные классы, и тем самым избежать написания длинных селекторов CSS. Именно так мы и рекомендуем поступать.

Ссылки на следующий и предыдущий вариант дизайна

Последнее, что осталось сделать, - это заменить невыразительные ссылки под списком вариантов дизайна более симпатичными графическими эквивалентами. Как и раньше, сложность состоит в том, что для этих элементов не определены отдельные классы, так что их не удается выбрать простым способом. Но в спецификации CSS2 описаны не только селекторы дочерних и сестринских элементов, есть и другие. В данном случае удобно воспользоваться селекторами атрибутов, поскольку они позволяют выбрать элемент в зависимости от его уникальных характеристик. Для всех ссылок в HTML-разметке определены различные клавиши доступа:

<а href="
a l l d e s i g n s / " t i t l e = " V i e w every submission to
Accesskey: w" accesskey="w">


Такого рода уникальность идеально подходит для применения селекторов атрибутов:

ftlarchives ul>li+li a[accesskey="w"] {
display: block;
width: 35px;
height: 0;
overflow: hidden;
padding-top: 18px;
background: transparent url(archive-b3a.gif)
top left no-repeat;
position: absolute;
top: 16px;
left: 170px;
color: #958500;


Как следует из самого названия, селектор атрибутов позволяет выбрать элемент, для которого значение именованного атрибута соответствует указанному.
В листинге выше выделена наиболее интересная часть селектора: поскольку у нужного нам элемента действительно есть атрибут a c c e s s k e y и его значение равно
w, то имеет место соответствие, так что к элементу применяется стилистическое правило.
Возможно, вы задаетесь вопросом, почему для списка вариантов дизайна мы применили такие сложные селекторы дочерних элементов, ведь у них тоже имеют-
ся атрибуты accesskey. Вообще-то вы правы, имело смысл так и поступить.

Как сделать правильный выбор

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




css



css


css lbpfqy

css
css

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



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



Поиск

***

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

20-ка посетителей: joshuaor4, jeremylj4, AgnesAccony, lunar.elf, Melvinvor, sherriqr69, AbbasSn, Trompokfus, Jamesvum, julianavq2, DiZa, Ainandyopibia, wordpress, georgetteng2, GuefsElifell, Asteeligo, loly777, NikollCype, SeawPeefs, Huritdync


Партнеры

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

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

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

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