Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Ч.1. Учебное пособие (курс лекций)
.pdf
В случае переопределения существующих тегов, в описании
стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по умолчанию, которые для разных тегов различны.
Псевдоклассы
В CSS есть такое понятие как псевдокласс. В отличие от
обычного класса, действие псевдокласса распространяется не на
весь текст, к которому применен данный стиль, а лишь на его
часть и возможно лишь в определенном состоянии. Чтобы было
понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно
распространенный, и его можно наблюдать в том числе и на этом
сайте. Вот фрагмент таблицы стилей, который позволяет достигать
вышеописанного эффекта:
a { text-decoration: none; }
a:hover { text-decoration: underline;}
Верхняя строчка – это переопределение стандартного тега
<a>, которое запрещает подчеркивать ссылки, а вот нижняя – это
определение стиля для псевдокласса hover, который описывает
стиль ссылки в момент, когда курсор находится над ней.
А вот и другой пример псевдокласса – определение буквицы
вначале абзаца:
p:first-letter { font-size: 200\%; font-weight: bold; }
Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл
псевдоклассов.
Примечания
Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями. Их формат аналогичен классическому C:
/* Этот текст является комментарием */
Для небольших сайтов эта возможность Вам вряд ли пригодится, а вот при создании сложных, многоуровневых таблиц стилей
комментарии могут пригодиться. Кстати, здесь будет уместно при-
71
вести золотое правило – чем понятнее названа переменная (в данном случае имя класса), тем меньше комментариев необходимо.
Основные параметры CSS
Все параметры, используемые для определении стиля, условно можно разделить на несколько больших групп:
– управляющие видом шрифта (гарнитура, кегль, цвет,
наклон, жирность,..);
– управляющие форматированием абзаца (выравнивание, интерлиньяж, расстояние между словами, отступ красной строки,..);
– управляющие свойствами блока (отступы слева-сверхусправа-снизу, местоположение блока на страничке, видимость
блока,..);
– другие, которые не вписываются ни в одну из перечисленных выше групп (цвет ссылок странички, изменение внешнего вида курсора,..).
Рассмотрим подробнее параметры, используемые для управления внешним видом текста и форматирования абзацев – как
наиболее часто употребляемые.
Основные параметры шрифта
font-weight: [bold|normal|number] – жирность шрифта
font-style: [normal|italic|oblique] – наклон шрифта
font-size: number – размер шрифта
font-family: name – гарнитура шрифта
color:number – цвет шрифта
background-color: number – цвет подложки
background: url – текстурная подложка
псевдоклассы Ссылок
A:active{} Таблица стилей для активных ссылок (при
нажатии)
A:link{} Таблица стилей для собственно ссылок
A:visited{} Таблица стилей для посещённых ссылок
A:hover {} Таблица стилей для ссылок при наведении ука-
зателя мыши
Основные параметры абзаца (и Элементов типа "Box")
text-align: [left|right|center|justify] – выравнивание
text-indent: number – отступ красной строки
line-height: number -интерлиньяж
letter-spacing: number – трекинг
72
padding-left: number – отступ от текста слева
padding-right: number – отступ от текста справа
padding-top: number – отступ от текста сверху
padding-bottom: number – отступ от текста снизу
margin-left: number – отступ от границы слева
margin-right: number- отступ от границы справа
margin-top: number – отступ от границы сверху
margin-bottom: number – отступ от границы снизу
Единицы измерения в CSS
В свойствах, которым требуется указание размеров, можно
использовать несколько способов для их задания:
относительный размер в процентах (%)
относительный размер при помощи словесного описания
(larger, smaller, xx-small, x-small, small, medium, large, x-large, xxlarge)
абсолютный размер в типографских единицах – размер
может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней
шириной буквы "m" (em), средней шириной буквы "x" (eх)
абсолютный размер в стандартных единицах длины – раз-
мер может задаваться в сантиметрах (cm), миллиметрах (mm),
дюймах (in) абсолютный в пикселях (px)
Задание цвета в CSS
Цвет для тех свойств, где это нужно, может быть определен
одним из трех способов:
при помощи названия цвета: yellow, red, green, grey,..
шестнадцатеричным заданием цвета в формате #RRGGBB:
#ff0000, #883490, #ffffff,..
десятичным заданием составляющих цвета в формате
rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..
Примеры описания таблицы стилей
.epigraph {
font-size: 12pt;
font-style: italic;
text-align: right;
color: rgb(127,127,0);
}
p.big {
73
font-size: 16px;
font-weight: bold;
color: #ff0000;
}
.menu {
font-weight: bold;
font-size: 9pt;
font-family: arial, helvetica, sans-serif;
}
a:hover {
color: #b63a3a;
text-decoration: none;
}
Слои
CSS оперирует в трёх измерениях – высота, ширина и глубина. Слои/layers – элементы, которые перекрывают друг друга.
Тэг-контейнер для создания слоя
<DIV id="имя слоя" style="…">
Содержимое слоя
</DIV>
Параметры и значения атрибута STYLE
Параметр POSITION – определяет расположение слоя
внутри окна
Атрибут STATIC Неперемещаемый слой. Нормальное распо-
ложение слоя внутри HTML-документов
Атрибут ABSOLUTE Слой с заданными координатами
Атрибут RELATIVE Слой, сдвинутый относительно нор-
мального расположения
Параметры LEFT и TOP – задают сдвиг слоя
Для слоя ABSOLUTE – относительно окна браузера.
Для слоя RELATIVE – относительно нормального расположения в документе.
74
Параметры WIDTH и HEIGHT – определяют размер слоя
по ширине и высоте
Параметр OVERFLOW
Атрибут VISIBLEОтображается все содержимое слоя.
Атрибут HIDDENОбрезанный слой. Без полос прокрутки.
Границу задает clip.
Атрибут SCROLLУсекает слой и всегда выводит две полосы
прокрутки.
Атрибут AUTOУсекает слой и по необходимости выводит
полосу прокрутки
Параметр CLIP – для слоев, имеющих свойство overflow со
значением, отличным от visible
Атрибут AUTOОбласть обрезается под размер указанный,
в width и height.
Атрибут RECTОбласть обрезается под заданный размер.
Пример:
clip: rect(5px, -5px, 10px, 5px);
Параметр Z-INDEX
Определяют порядок наслоения слоев. У самого нижнего индекс равен 1.
Параметр VISIBILITY – задает видимость слоя
Атрибут VISIBLEВидимый слой
Атрибут HIDDENНевидимый слой
Атрибут INHERITДля слоя, расположенного внутри другого
слоя. Наследует свойство видимости от внешнего слоя.
Пример
<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 30pt; font-weight: bold;}
.d1 { position: absolute; color: silver; top: 10%; left: 10%; }
.d2 { position: absolute; color: navy; top: 9%; left: 9%; }
</style>
75
</head>
<body>
<div class="d1">Учебник HTML</div>
<div class="d2">Учебник HTML</div>
</body>
</html>
Рис. 49. Результат работы кода
Несколько простых правил
Фон
Текст должен читаться. Дикий, аляповатый фон сильно мешает восприятию содержания. При выборе фона учитывайте также,
что распечатывать удается лишь темный текст на светлом фоне.
Картинки
Текст с иллюстрациями смотрится лучше, чем просто текст.
Нужно учитывать, что в России пользователи Интернета страдают
от медленной связи, графика загружается долго, поэтому лучше,
если вы поместите небольшие по размеру и количеству килобайт
картинки. Скачивая понравившуюся картинку с чужого сайта,
вы нарушаете закон об авторских правах. Хорошо, когда вы
сами рисуете иллюстрации к своей страничке.
Шрифты
Слишком много разных шрифтов на странице – дурной тон.
Лучше выделять слова размером, курсивом или жирным стилем.
Подчеркивания воспринимаются как ссылки, советую этого избегать. Помните, ничто не раздражает читателя так, как мигающий
текст.
Стиль
Не важно, в каком стиле будет оформлен ваш сайт, поместите
ли вы сердечки, цветочки и вензелечки, или используете в оформлении строгую линейную графику, главное, чтобы все страницы
сайта были оформлены единообразно, подчинены одной идее.
76
Проектирование структуры web-сайта
Жёсткий дизайн – табличный дизайн, в котором величина
каждой ячейки либо задана в пикселах, либо задаётся картинкой
или другим элементом, помещённой в эту ячейку.
Резиновый дизайн – табличный дизайн, в котором ширина
одной или нескольких ячеек задаётся в процентах от ширины окна.
Как хорошо известно любому начитанному (или опытному) дизайнеру, жёсткий дизайн проще разрабатывать (все элементы неподвижны относительно друг друга по длине). Насыщенность графическими элементами в таком дизайне больше среднего по той
же причине, и встречающиеся формы, как правило, сложнее –
много кривых на всю ширину страницы и причудливо разрезанных
картинок. Каркас жёсткой страницы поделен на множество ячеек,
каждая со своим назначением и содержанием.
С другой стороны, у жёсткого дизайна есть только одно оптимальное разрешение экрана. Если при разработке упор был сделан
на совместимость (оптимальный размер 640х480), то уже на
1024х768 поля занимают почти половину ширины страницы –
и чем дальше, тем хуже.
Типы сайтов
Сайт-презентация
– из названия ясно, что сайт представляет информацию о
фирме/услуге/продукте. Как правило имеет конечное количество
страниц. Главная задача – при помощи визуального оформления
максимально быстро и эффективно донести до посетителя суть
представляемой услуги и степень ее полезности и грандиозности.
Такие проекты имеют как правило яркий, уникальный дизайн,
графическое оформление преобладает перед текстовой информацией, часто используется flash-анимация.
Корпоративный сайт
– интернет представительство организации (фирмы, корпорации) в сети, и, следовательно, в таких проектах самые высокие
требования к оформлению информации, к балансу графика/текст.
Соответствие фирменному стилю выражено как в структуре информации, так и в цветовой гамме.
77
Информационные ресурсы
– это электронные библиотеки и газеты. Информация как правило обновляется несколько раз в сутки. Объемы информации очень
большие, и при разработке дизайна таких сайтов следует учитывать
тот факт, что посетители приходят не поглазеть на сайт – они приходят за содержанием.
Электронный магазин
При разработке интерфейса электронного магазина ставится
цель не только быстро и корректно предоставить информацию посетителю, но и добиться того, чтобы он стал покупателем. Здесь
прежде всего следует уделить внимание сервисному обслуживанию – удобный каталог продукции, поиск по товарам и услугам,
ясные и не сложные формы, которые необходимо заполнить пользователю для регистрации, формировании заказа и покупки, оперативная связь со службой техподдержки значат больше, чем
броский графический дизайн, однако графические элементы так
же используются – это не только иллюстрации, фотографии продукции, но и – в первую очередь – пиктограммы, иконки – графические символы, которые помогают посетителю ориентироваться в
информационных объемах.
Принципы web-дизайна
Ключевое слово "Пользователь"
Почитайте некоторое время группы новостей и списки рассылки, посвященные web-дизайну. Время от времени вы будете
наталкиваться в них на одни и те же слова и идеи. Вопрос вопросов, естественно, – "как мне…". Но за вопросами типа "как мне
сделать так, чтобы мои страницы одинаково смотрелись на любой
платформе?" и "как мне сделать так, чтобы мои шрифты были
одинаковыми и на Макинтоше и в Windows?" скрывается главный
вопрос – "как мне управлять браузером пользователя?". И вправду,
слово "управление" встречается нам в группах новостей удивительно часто.
В основании всего этого лежит убеждение, что роль дизайнера
сводится к управлению (вспомните, например, популярный термин
"допиксельная точность"). Дизайнеры стремятся противостоять
желаниям пользователей, и тем привычкам, которые сложились у
пользователей при работе с текстом и изображением (например,
78
путем фиксирования размеров шрифта). Дизайнеры пытаются
справится с неприятностями, вызванными различными логическими разрешениями, принятыми в различных компьютерных платформах. Дизайнеры знают все, и будут корпеть над работой до тех
пор, пока в любом браузере их страница не будет выглядеть до
пикселя в точности, как на их собственной машине.
Разрабатывая дизайн и оформление прежде всего думайте о
людях, которые будут им пользоваться.
Ключевое слово "Гибкость"
Может показаться, что невозможность управлять внешним
видом страницы является ограничением, неприятной ошибкой
Web, создавая изменяемые страницы вы делаете их доступными.
А ведь пожалуй самым многообещающим свойством Web, которое
пока еще далеко от реализации, является простота доступа к информации, независимо от каких-либо ограничений. Важнейшей
идей World Wide Web Consortium (http://www.w3.org/), и эта идея
уже становится фундаментом web-дизайна, является то, что в будущем специальным законом web-дизайнеры будут обязаны обеспечивать универсальный доступ к своим страницам, также, как
сейчас строительное законодательство в любой стране требует
обязательного наличия подъездных дорог к зданиям.
Делайте такие страницы, которые можно изменять. Делайте
страницы, которые доступны всем читателям вне зависимости от
того, каким браузером, платформой или экраном они решили и
вынуждены пользоваться. Это значит, страницы, которые можно
читать вне зависимости от разрешения и размеров экрана или его
цветового режима (не забывайте, что web-страницы еще иногда и
распечатывают, а бывает и зачитывают вслух специальными программами, или читают с помощью браузеров для слепых). Это
значит, страницы, которые адаптируются под нужды читателя,
у которого зрение может быть далеко от идеального, и который
скажем желает читать страницы с увеличив размер шрифта до
максимального.
Думайте не о том, как страницы будут выглядеть, а о том, что
они будут делать. исходите в дизайне из тех функций, с которыми
будут работать пользователи, а не из какой-то абстрактной визуальной идеи. Старайтесь делать, так что бы форма следовала со-
79
держанию, а не наоборот, создавать дизайн, а потом пытаться его
подогнать под задачу.
Если вы правильно пользуетесь таблицами стилей для того,
чтобы предлагать свой вариант внешнего вида страницы, а не
навязывать его, и если вы не делаете внешний вид страницы полностью зависимым от таблицы стилей, тогда ваши страницы будут
прекрасно "работать" в любом браузере, будь то старом или новом.
Браузеры, которые не поддерживают таблицы стилей, будут показывать страницу несколько упрощенно. Но большей головной болью являются браузеры, в которых поддержка таблиц стилей сделана с ошибками. На сегодняшний день это главная проблема. Но
по прошествии короткого времени, эта проблема отпадет.
Еще более важной темой по-прежнему является размер шрифтов. Вы должно быть знаете, что один и тот же шрифт одного и
того же размера на Макинтошах "выглядит меньше", чем на большинстве Windows-машинах. В двух словах: это происходит потому, что "логическое разрешение" на Макинтоше равно 72 точкам
на дюйм, а на Windows-системах – 96 т/д. Следствия из этого факта весьма значительны. Во-первых, совершенно невозможно добиться того, чтобы текст на Макинтоше выглядел также, как и на
Windows-системе. Но если вы руководствуетесь философией изменяемости, для вас это не играет никакой роли.
С помощью CSS можно указать размер шрифта в процентах
относительно размера шрифта родительского элемента. Например,
заголовки <H> располагаются внутри тела <body> страницы. Если
вы явно не зададите размер шрифта для BODY, тогда шрифт в
BODY будет иметь такой размер, который пользователь установит
для себя по умолчанию.
Ключевое слово "Модульность"
Дизайн, и, в частности, веб-дизайн – это проектирование
практичной, удобной, визуально привлекательной системы.
Англоязычные разработчики используют термин "usability" –
целая наука, которая рассказывает, как разрабатывается дизайн,
ориентированный на пользователя – понятный и удобный. В русском языке однозначно сложно подобрать термин, используется
слово "эргономика".
Дизайнер получает информацию, данные, которые необходимо оптимальным образом упорядочить и реализовать в виде веб-
80
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]