ВЛАП МЕРЖЕВИЧ HTML и CSS !Vertir.s ? U ч L ,:' ОФОРМЛЕНИЕ .- -rt / r ЭЛЕМЕНТОВ ФОРМ, ТАБЛИЦ И СПИСКОВ С ПОМОЩЬЮ СТИЛЕЙ ИСПОЛЬЗОВАНИЕ СЛОЕВ В ПИЗАЙНЕ ВЕБ-СТРАНИЦ СОЗДАНИЕ ВКЛАДОК, ВЕРТИКАЛЬНЫХ, НИСПАДАЮЩИХ, ПЛАВАЮЩИХ И ДРУГИХ МЕНЮ СОВЕТЫ, РЕЦЕПТЫ И ХИТРОСТИ ПРИ РАБОТЕ С HTML И CSS Влад Мержевич H T ML C SS и НА ПРИМЕРАХ Санкт-Петербург «БХВ-Петербург» 2005 УДК 681.3.068+800.92HTML ББК 32.973.26-018.1 М52 Мержсвич В. В. М52 HTML и CSS на примерах. — СПб.: БХВ-Петербург, 2005. — 448 с: ил. ISBN 5-94157-360-Х На практических примерах раскрываются технологии HTML и CSS в плане решения различных аспектов создания веб-страниц. Приведены воз- можности и средства по оформлению текста и изменению его вида. Описа- ны основные графические форматы, которые используются на сайтах. Ос- вещены вопросы работы с рисунками, ссылками, списками, линиями и рамками. Раскрыты возможности управления видом таблицы, ускорения за- грузки табличных данных, использования шаблонов. Рассмотрены элемен- ты форм, их параметры и примеры изменения оформления с помощью цве- та, изображений и рамок. Приведены способы выравнивания рисунков, слоев и текста, использования отступов и полей и многие другие приемы оформления веб-страниц. Даются подробные сведения об особенностях по- пулярных браузеров и о том, как они работают с тегами и стилями. Объяс- няется, как учитывать различия между браузерами и создавать универсаль- ные документы, которые будут корректно в них отображаться. Детальные примеры и пошаговое описание действий позволяют реали- зовать приведенные рекомендации на практике. Для веб-разработчиков УДК 681.3.068+800.92HTML ББК 32.973.26-018.1 Группа подготовки издания: Главный редактор Екатерина Копдукова Зам. главного редактора Евгений Рыбаков Зав. редакцией Григорий Добин Редактор Наталья Довгулевич Компьютерная верстка Ольги Сергиенко Корректор Зинаида Дмитриева Дизайн обложки Игоря Цырулышкова Зав. производством Николай Тверских Лицензия ИД № 02429 от 24.07.00. Подписано в печать 22.04.05. Формат 70хЮ01/ . Печать офсетная. Усл. печ. л. 36,12. )в Тираж 5000 экз. Заказ №1001 "БХВ-Петербург", 194354, Санкт-Петербург, ул. Есенина, 5Б. Санитарно-эпидемиологическое заключение на продукцию Ns 77.99.02.953.Д.006421.11.04 от 11.11.2004 г. выдано Федеральной службой по надзору в сфере защиты прав потребителей и благополучия человека. Отпечатано с готовых диапозитивов в ГУП "Типография "Наука" 199034, Санкт-Петербург, 9 линия, 12 ISBN 5-94157-360-Х о мс ж«ич в. в., 2005 Р © Оформление, издательство БХВ-Петербург , 2005 Оглавление Введение 9 Для кого предназначена книга 10 Как организована книга 11 Соглашения, используемые в книге 13 Поддержка 13 Глава 1. Текст 15 Аз и буки шрифтовой науки 15 Шрифты 16 Шрифты с засечками 17 Шрифты без засечек 17 Моноширинный шрифт 18 Декоративные шрифты 18 Размер текста 19 Насыщенность 20 Наклон текста 20 Начертание 20 Работа со шрифтами 21 Установка шрифта 23 Цвет текста 25 Размер символов 27 Изменение насыщенности 29 Курсивный текст 29 Верхний и нижний индекс 30 Капитель 33 Прописные и строчные буквы 34 Работа с текстом 35 Подчеркивание текста 36 Использование тега ЯЛ 36 Применение таблиц 37 Использование стилей 38 Создание буквицы 40 Буквица в тексте 41 Буквица на поле 42 Оглавление Выступающий инициал 43 Отступ первой строки 44 Пробелы между словами .- 46 Выравнивание текста 47 Отбивка строк..... 49 Интерлиньяж (межстрочное расстояние) 52 Межбуквенный интервал 53 Глава 2. Изображения 55 Добавление изображений 55 Форматы графических файлов 57 GIF 57 JPEG , 58 PNG-8 59 PNG-24 59 Рамка вокруг изображения 59 Выравнивание изображений 61 Создание паспарту 64 Использование таблиц 65 Применение стилей 65 Подрисуночная подпись 67 Обтекание изображения текстом 72 Использование параметра align тега IMG 72 Применение таблиц 72 Использование стилей 73 Альтернативный текст 74 Добавление фонового рисунка на веб-страницу 75 Использование фонового рисунка 78 Фоновый рисунок 78 Создание тени 80 Панель на изображении в браузере Internet Explorer 83 Карты-изображения 84 Глава 3. Ссылки 89 Создание ссылок 89 Виды ссылок 91 Ссылки без подчеркивания 93 Подчеркивание ссылок при наведении на них курсора мыши 94 Изменение цвета ссылки 96 Изменение цвета подчеркивания ссылки 97 Декоративное подчеркивание ссылок 98 Ссылки разных цветов 99 Альтернативные способы выделения ссылок 101 Использование фонового цвета 101 Рамка вокруг ссылки 102 Добавление волнистой линии под ссылкой 105 Рисунки возле внешних ссылок 107 Ссылки на новое окно 109 Ссылки во фреймах 110 Оглавление Глава 4. Списки •. 113 Создание списка 113 Маркированные списки 115 Изменение вертикальных отступов в списке 116 Отступы от маркера до текста 118 Вид маркера 119 Список с рисованными маркерами 122 Маркеры разного цвета 123 Положение текста и маркера 124 Нумерованные списки 126 Нумерация списка 126 Многоуровневые списки 127 Глава 5. Линии и рамки 131 Создание линий 131 Горизонтальные линии 132 Использование тега ЯЛ 132 Применение рисунков 134 Использование таблиц 135 Применение стилей 136 Линия с рисунком 139 Вертикальные линии 143 Создание вертикальных линий через таблицы 143 Создание вертикальных линий с помощью стилей 145 Создание рамок 147 Использование параметра таблицы border 148 Использование параметра таблицы cellspacing и bgcolor 149 Вложенные таблицы 149 Заливка ячеек таблицы цветом 150 Декоративная рамка 152 Использование стилей для создания рамки 154 Рамки и плавающие фреймы 158 Рамки с тенью 160 Создание тени с помощью атрибута border 160 Применение слоев 161 Использование таблицы 164 Рамки и заголовки 165 Простая панель 165 Панель с фиксированным заголовком 168 Панель с графическим заголовком 170 Глава 6. Таблицы 177 Создание таблиц 177 Особенности таблиц 182 Заголовок таблицы 182 Выравнивание таблиц 185 Таблицы и рамки 188 Оглавление Таблицы с фиксированным заголовком 191 Ускорение загрузки таблиц 194 Выделение ячеек таблицы курсором мыши 195 Шаблоны таблиц 199 Простая таблица 199 Простая таблица с заголовком 200 Таблица с цветным заголовком 201 Таблица с чередующимися строками 202 Таблица с выделенными колонками 204 Глава 7. Формы 209 Добавление формы 210 Элементы форм 212 Текстовое поле 213 Однострочное текстовое поле 213 Поле для ввода пароля 216 Многострочное текстовое поле : 217 Рисунки в текстовом поле 220 Кнопки 221 Кнопка SUBMIT 223 Кнопка RESET 224 Цветные кнопки 224 Переключатели 226 Флажки 229 Поле со списком 231 Скрытое поле 233 Поле с изображением 234 Отправка файла 235 Группирование элементов формы 236 Глава 8. Выравнивание элементов 241 Выравнивание рисунков по горизонтали 241 Центрирование по вертикали 245 Выравнивание слоя по центру 250 Использование отступов 251 Применение параметра text-align 252 Параметр align тега D1V 253 Абсолютное позиционирование слоя 253 Манипуляции с текстом 255 Выравнивание текста внутри слоя 262 Выравнивание по верхнему краю 262 Выравнивание по центру слоя 263 Выравнивание по нижнему краю 265 Глава 9. Отступы и поля 269 Создание отступов 269 Отступы на веб-странице 272 Отступы в форме 274 Оглавление Создание полей 274 Поля у блочных элементов 276 Использование отступов и полей 279 Поля вокруг текста 279 Отступы в тексте 281 Создание двух колонок 283 Глава 10. Элементы оформления 287 Полосы прокрутки 287 Полосы прокрутки во фреймах 290 Новые окна 290 Изменение цвета полос прокрутки 292 Вид курсора мыши 295 Ссылка на иконку сайта 298 Создание тени 299 Использование фильтров 300 Применение слоев 301 Использование спецсимволов 304 Глава 11. Создание меню 307 Горизонтальное меню 308 Создание меню с помощью таблиц 309 Применение слоев 313 Текстовые вкладки 315 Графические вкладки 321 Создание вкладок : 321 Предварительная загрузка изображений 324 Объединение изображений в одно 327 Вертикальное меню 328 Простое меню с рамкой 328 Меню с подсветкой 330 Меню и подменю 332 Ниспадающее меню 339 Плавающее меню 343 Приложение. Свойства CSS 347 Пояснения 347 Параметр background 350 Параметр background-attachment. 351 Параметр background-color. 353 Параметр background-image 354 Параметр background-position 355 Параметр background-repeat 357 Параметр border 358 Параметр border-bottom 360 Параметр border-bottom-color 361 Параметр border-bottom-style 362 _S Оглавление Параметр border-bottom-width 364 Параметр border-collapse 365 Параметр border-color 367 Параметр border-style 369 Параметр border-width 371 Параметр bottom 373 Параметр clear 375 Параметр clip 376 Параметр color 378 Параметр cursor 380 Параметр display 382 Параметр float 384 Параметр font 386 Параметр font-family 388 Параметр font-size 389 Параметр font-style 391 Параметр font-variant 392 Параметр font-weight. 394 Параметр height 395 Параметр left 397 Параметр letter-spacing 399 Параметр line-height 400 Параметр list-style 402 Параметр list-style-image 403 Параметр list-style-position 405 Параметр list-style-type 406 Параметр margin 408 Параметр margin-bottom 411 Параметр overflow 412 Параметр padding 414 Параметр padding-bottom 416 Параметр position 417 Параметр right 420 Параметр text-align 422 Параметр table-layout 423 Параметр text-indent 425 Параметр text-decoration 426 Параметр text-transform 428 Параметр top 429 Параметр vertical-align 431 Параметр visibility 433 Параметр white-space 435 Параметр width 437 Параметр word-spacing 438 Параметр z-index 439 Предметный указатель 443 Введение HTML (HyperText Markup Language, язык разметки гипертекста) — это пре- жде всего система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ ее представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит. Вместе с тем, HTML имеет ряд огра- ничений, которые породили самые неожиданные способы верстки, в част- ности применение изображений вместо текста, активное использование таблиц с невидимой границей, прозрачных рисунков для контроля пустого пространства и т. д. Подобные методики увеличивают сложность разработки сайта — совокупности связанных между собой веб-страниц — ведь вместо того, чтобы заниматься творчеством, приходится решать, как обойти то или иное ограничение. Стили частично решают эти проблемы, в то же время, не заменяя собой HTML, но дополняя его механизмы. Что же такое стили или CSS (Cascading Style Sheets, каскадные таблицы стилей)? Стилем называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие парамет- ры хранятся в определенном месте и легко "прикручиваются" к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намно- го больше возможностей для форматирования, чем обычный HTML. CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц. Любой сайт отображается в специальной программе просмотра, называемой браузером. Таким образом, получается, что разработчики сайта зависят от производителей браузеров, от того, насколько корректно и правильно они