год-2008
624 страницы
В книге Самоучитель HTML и CSS. Современные технологии. Чебыкин Рассмотрено совместное использование HTML и CSS для решения практических задач верстки веб-страниц. Технологии описаны на сегодняшнем уровне и опираются на действующие сейчас стандарты Консорциума W3C. Уделено внимание совместимости страниц с популярными браузерами, удобству их практического эксплуатации и оптимизации для поисковиков. Приведены профессиональные приемы создания и редактирования кода HTML и CSS, эксплуатации инструментов разработки, тестирования и контроля качества веб-страниц. В книге обсуждаются перспективы развития веб-технологий в ближайшем будущем.
Содержание книги Самоучитель HTML и CSS. Современные технологии. Чебыкин
Введение
Следите за обновлениями
Благодарности
О моей предыдущей книге
Условные обозначения
ЧАСТЬ I. ПЕРВЫЕ ШАГИ
Глава 1. Предварительная подготовка
1.1. Представление данных в компьютере
1.1.1. Двоичный код
1.1.2. Калькулятор Windows
1.2. Аппаратное и программное обеспечение
1.2.1. Аппаратное обеспечение
Видеорежим
Подключение к Интернету
1.2.2. Программное обеспечение
Операционная система
Безопасность компьютера
Файловая система
Браузеры
Программы для разработки веб-страниц
1.3. Эффективная работа с текстовым редактором
1.3.1. Слепой десятипальцевый метод набора Особенности набора кода
1.3.2. Стандартные операции редактирования
Часто встречающиеся затруднения
Курсор и текущая позиция
Перемещение курсора
Выделение фрагментов текста
Копирование, вырезание, вставка
Удаление символов
Эффективное использование клавиатуры
Глава 2. Элементарные операции с файлами HTML и CSS
2.1. Как работать с файлами HTML
2.1.1. Как просматривать код HTML на действующих сайтах
2.1.2. Как создать файл HTML
Имена файлов и каталогов (папок)
2.1.3. Как наполнить содержанием файл HTML
2.1.4. Как просмотреть файл HTML в браузере
2.1.5. Как редактировать файл HTML
2.1.6. Как проверить файл HTML с помощью валидатора
2.2. Как работать с файлами CSS
2.2.1. Как создать файл CSS
2.2.2. Как подключить файл CSS к файлу HTML
2.2.3. Как редактировать файл CSS
2.2.4. Как проверить файл CSS с помощью валидатора
2.3. Как избежать ошибок
2.3.1. Ошибки при работе с файлами и каталогами (папками)
2.3.2. Ошибки при наборе символов
2.3.3. Ошибки в настройках компьютера
2.3.4. Если ничего не помогает
2.4. Операции с файлами HTML и CSS в Adobe Dreamweaver
2.4.1. Как настроить свойства нового документа по умолчанию
2.4.2. Как создать стандартный шаблон файла HTML
2.4.3. Как работать с файлами HTML и CSS
2.4.4. Как настроить сочетания клавиш
Глава 3. Основы синтаксиса HTML и CSS
3.1. Символы
3.1.1. Как вводить символы, которых нет на клавиатуре
Таблица символов
Сочетания клавиш с Alt
Настройка сочетаний клавиш в среде разработки
3.1.2. Типографские символы
Неразрывный пробел
Дефисы
Знак ударения
3.1.3. Подстановки символов
Как не надо применять подстановки
3.1.4. Unicode и кодировки символов
Кодировки символов Unicode
Устаревшие кодировки символов
Где указывать кодировку символов
Как настроить шрифт в текстовом редакторе
3.2. Основные конструкции языка HTML
3.2.1. Документ HTML. Символьные данные и разметка
3.2.2. Тэги
3.2.3. Элементы
Дерево документа
3.2.4. Атрибуты
3.2.5. Стандарты HTML
Консорциум W3CОбъявление типа документа
Определение типа документа
Официальные стандарты HTML
Документация по HTML на сайтах браузеров
3.3. Основные конструкции языка CSS
3.3.1. Таблица стилей
3.3.2. Правила, свойства, значения
3.3.3. Стандарты CSS
Глава 4. Структурные элементы HTML
4.1. Элемент html — веб-страница
4.1.1. Атрибуты lang и xml.lang— естественный язык
4.1.2. Атрибут xmlns — пространство имён XML
4.2. Элемент head— служебная часть страницы
4.2.1. Элемент title — заглавие веб-страницы
Как составлять заглавия страниц
4.2.2. Элемент meta — сведения о кодировке
4.2.3. Элемент link — подключение файла CSS
4.3. Элемент body — основная часть веб-страницы
Глава 5. Текстовые элементы HTML
5.1. Заголовки
5.1.1. Элемент hi — заголовок 1 -го уровня
5.1.2. Элементы h2-h6— заголовки 2-6 уровней
5.1.3. Как составлять заголовки
5.2. Текстовые блоки
5.2.1. Элементр— абзац текста
5.2.2. Элемент address — короткая надпись
5.3. Выделения в тексте
5.3.1. Элемент ет — логическое выделение (курсив)
5.3.2. Элемент strong— графическое выделение (полужирный шрифт)....
5.4. Цитаты и сокращения
5.4.1. Элемент blockquote — блочная цитата
5.4.2. Элемент cite— название
5.4.3. Элемент q — строчная цитата
5.4.4. Элемент abbr — сокращение
Элемент acronym и типографские нормы
5.5. Особые выделения
5.5.1. Элементы code, dfn, kbd, samp, var
5.5.2. Элементы sub к sup— нижний и верхний индексы
5.5.3. Элементы ins и del — добавленный и удалённый фрагменты
5.5.4. Элементы b, big, i, small, tt
5.6. Пробельные символы и перевод строки
5.6.1. Пробельные символы
Обычный пробел
Табуляция
Перевод строки
Стандартный режим обработки пробельных символов
5.6.2. Автоматический и принудительный перевод строки
Элемент br — принудительный перевод строки
5.6.3. Элемент pre — текст с предварительным форматированием
5.6.4. Свойство white-space — режим обработки пробельных символов
5.7. Как использовать текстовые элементы
Глава 6. Цвет
6.1. Цветовая модель RGB
6.2. Свойство color — цвет текста
6.2.1. Примеры цветов
6.2.2. «Безопасные» цвета
6.3. Свойство background— цвет фона
6.4. Как использовать цвет
6.5. Как предотвратить проблемы пользователей
Глава 7. Линии и рамки
7.1. Горизонтальные и вертикальные линии
7.1.1. Свойства border-top-width, border-right-width, border-bottom-width, border-left-width — толщина линии
7.1.2. Свойства border-top-color, border-right-color, border-bottom-color, border-left-color — цвет линии
7.1.3. Свойства border-top-style, border-right-style, border-bottom-style, border-left-style — стиль линии
7.1.4. Собирательные свойства border-top, border-right, border-bottom, border-left — линия с одной стороны
Эффекты линий
7.2. Рамки
7.2.1. Собирательное свойство border — рамка
7.2.2. Собирательные свойства border-width, border-color, border-style — толщина, цвет и стиль рамки
7.3. Как использовать линии и рамки
Глава 8. Списки (перечни)
8.1. Элементы списков в HTML
8.1.1. Элемент м/ — ненумерованный список
8.1.2. Элемент о/— нумерованный список
8.1.3. Элемент //' — пункт списка
8.1.4. Элементы dl, dt, dd— список определений и его пункты
8.1.5. Многоуровневые списки
8.2. Оформление списков
8.2.1. Свойство list-style-type — вид маркеров списка
8.2.2. Свойство list-style-position — положение маркеров списка
8.2.3. Собирательное свойство list-style — параметры маркеров списка Свойство list-style-image — маркер-изображение
8.2.4. Расширенные возможности оформления списков
8.2.5. Недостатки оформления списков в CSS
8.3. Как использовать списки
Глава 9. Технология и культура разработки кода
9.1. Общие вопросы разработки сайтов
9.1.1. Три главных вопроса
9.1.2. Процесс разработки сайта
Разработка требований
Проектирование содержания
Художественное оформление
Техническая реализация
Тестирование и контроль качества
Сопровождение
9.1.3. Как стать профессионалом
9.2. Какими источниками информации надо пользоваться
9.2.1. Пользуйтесь официальными источниками
9.2.2. Пользуйтесь современными источниками
9.2.3. Пользуйтесь компетентными источниками
9.3. Как тестировать веб-страницы
9.3.1. Просматривайте страницу в разных браузерах
9.3.2. Проверяйте код с помощью валидатора
Как работать с валидатором
9.3.3. Просматривайте страницу при разной ширине окна браузера
9.3.4. Просматривайте страницу при разных размерах шрифта
9.4. Эффективные приёмы разработки кода
9.4.1. Порядок набора конструкций HTML и CSS
Главное правило набора
Тэги
Атрибуты
Непустые элементы
Правила CSS
9.4.2. Пробельные символы в коде HTML и CSS
Стиль кодирования HTML
Стиль кодирования CSS
Объём кода и оптимизация
9.5. Комментарии
9.5.1. Комментарии HTML
9.5.2. Комментарии CSS
9.5.3. Условные комментарии в Internet Explorer
ЧАСТЬ II. ОТ ПРОСТОГО К СЛОЖНОМУ
Глава 10. Гиперссылки
10.1. Элемент а — гиперссылка
10.1.1. Порядок набора гиперссылки
10.1.2. Атрибут href—адрес гиперссылки
Абсолютный адрес
Относительный адрес
10.1.3. Гиперссылка на определённый элемент
Атрибут id— метка элемента
10.1.4. Атрибуты гиперссылок
Атрибут tide — описание гиперссылки
Другие атрибуты гиперссылки
10.2. Оформление гиперссылок
10.2.1. Псевдоклассы гиперссылок
10.2.2. Свойство text-decoration — подчёркивание и другие текстовые эффекты
10.3. Панели навигации
10.3.1. Вертикальные панели навигации
10.3.2. Горизонтальные панели навигации
«Хлебные крошки»
10.4. Как использовать гиперссылки
10.4.1. Не злоупотребляйте гиперссылками
10.4.2. Гиперссылка должна быть заметной
10.4.3. Гиперссылка должна быть понятной
10.4.4. Гиперссылка должна быть доступной
10.4.5. Гиперссылка должна бытьдействующей
10.4.6. Гиперссылка должна быть предсказуемой
Глава 11. Изображения в HTML
11.1. Форматы изображений
11.1.1. Растровая и векторная графика
Оптимизация изображений
11.1.2. JPEG
11.1.3. GIF
11.1.4. PNG
Оптимизация PNG
11.2. Элемент img — изображение
11.2.1. Атрибут src — адрес изображения
11.2.2. Атрибут alt — текстовое описание изображения
Атрибут alt и поисковые системы
Отображение атрибута alt
11.2.3. Атрибут style — размеры изображения
11.3. Особенности работы с изображениями
11.3.1. Зазоры вокруг изображений
11.3.2. Изображения-гиперссылки
11.3.3. Изображения-карты
11.4. Как использовать изображения
11.4.1. Не заключайте текст в изображения
11.4.2. Не используйте изображения там, где лучше подходит текст
11.4.3. Применяйте кадрирование при изготовлении уменьшенных копий
11.4.4. Просматривайте страницу при отключённых изображениях
Глава 12. Типы отображения областей элементов
12.1. Области элементов
12.2. Строчные и блочные области
12.2.1. Области элементов
12.2.2. Безымянные области
12.3. Группы Inline и Block в определении типа документа
12.3.1. Правила иерархии элементов
12.3.2. Модель содержания элементов
12.4. Элементы span и div
12.4.1. Элемент span — универсальный строчный элемент
12.4.2. Элемент div — универсальный блочный элемент
12.5. Свойство display — тип отображения области
12.5.1. Значения inline и block
12.5.2. Значение list-item
12.5.3. Другие значения
Глава 13. Таблицы
13.1. Основные элементы таблиц
13.1.1. Элемент table — таблица
13.1.2. Элемент tr — строка таблицы
13.1.3. Элементы th и td— ячейки таблицы
Пример: разметка простой таблицы
Атрибуты colspan и rowspan — объединение ячеек
Разметка сложных таблиц
13.2. Дополнительные элементы таблиц
13.2.1. Элементы thead и {foot — «шапка» и «подвал» таблицы
13.2.2. Элемент tbody — основная часть таблицы
Совместное использование элементов thead, tfoot и tbody
13.2.3. Элемент caption — заголовок таблицы
13.2.4. Элементы со/ и colgroup — графы (столбцы) таблицы
Оформление граф таблицы
Пример: разметка таблицы с дополнительными элементами
13.3. Рамки в таблицах
Свойство border-collapse — режим соединения рамок
13.3.1. Другие свойства таблиц
13.4. Как использовать таблицы
13.4.1. Не растягивайте таблицу
13.4.2. Не злоупотребляйте рамками
Глава 14. Оформление текста
14.1. Компьютерные шрифты
14.1.1. Принципы отображения текста
14.1.2. Классификация шрифтов
Семейства шрифтов в CSS
14.1.3. Стандартные шрифты Windows
14.2. Свойства шрифта
14.2.1. Свойство font-family — гарнитура шрифта
14.2.2. Свойство font-size — кегль шрифта
14.2.3. Свойство font-weight— насыщенность шрифта
14.2.4. Свойство font-style — наклон шрифта
14.2.5. Собирательное свойство font— параметры шрифта Свойство font-variant — капитель
14.2.6. Свойство text-transform — регистр символов
14.3. Оформление строчных областей
14.3.1. Свойство line-height — высота строки
14.3.2. Свойство letter-spacing— межбуквенный интервал
14.3.3. Свойство word-spacing— междусловный интервал
14.4. Как использовать шрифты
14.4.1. Не злоупотребляйте разнообразием шрифтов
14.4.2. Учитывайте отличия сайтов от печатных изданий
Глава 15. Выравнивание
15.1. Свойство text-align — горизонтальное выравнивание
15.2. Свойство vertical-align — вертикальное выравнивание
15.2.1. Вертикальное выравнивание строчных элементов
Значение по умолчанию baseline
Значения middle, sub, super
Значения top, bottom, text-top, text-bottom
Значения в единицах длины и процентах
15.2.2. Вертикальное выравнивание в ячейках таблицы
Глава 16. Основы компоновки областей
16.1. Основные понятия компоновки областей
16.1.1. Область просмотра и область страницы
16.1.2. Контейнеры областей
16.2.1. Поле содержания
Свойство width — ширина поля содержания
Свойство height — высота поля содержания
Свойства min-width, max-width, nun-height, max-height — минимальные и максимальные размеры поля содержания
Свойство text-indent — абзацный отступ
16.2. поля областей элементов
16.2.1. Поле внутреннего отступа
Свойства padding-top, padding-right, padding-bottom, padding-left —
внутренний отступ с одной стороны
Собирательное свойство padding — внутренние отступы со всех сторон
16.2.2. Поле внешнего отступа
Свойства margin-top, margin-right, margin-bottom, margin-left —
внешний отступ с одной стороны
Собирательное свойство margin — внешние отступы со всех сторон.....
16.3. Совместное применение свойств полей областей
16.3.1. Регулирование ширины и горизонтальных отступов
16.3.2. Регулирование высоты
Как «растянуть» страницу по высоте окна
Как центрировать содержание относительно страницы
16.4. Переполнение поля содержания
16.4.1. Свойство overflow — режим переполнения поля содержания
16.4.2. Свойства overflow-x, overftow-y — переполнение в одном измерении
Глава 17. Селекторы CSS
17.1. Простые селекторы
17.1.1. Селекторы по типу элемента
17.1.2. Универсальный селектор
17.1.3. Селектор по id
17.1.4. Селектор по class
Расширенное использование атрибута class
Не злоупотребляйте атрибутами id и classl
17.1.5. Селекторы атрибутов
Селектор существования атрибута [ ]
Селектор равенства атрибута [=]
Селектор атрибута с пробелами [~=]
Селектор атрибута с дефисом [|=]
Селектор префикса атрибута [Л=]
Селектор суффикса атрибута [$=]
Селектор подстроки атрибута [*=]
17.1.6. Псевдоклассы
Динамические псевдоклассы
Структурный псевдокласс .first-child
Другие псевдоклассы
17.1.7. Последовательность простых селекторов
17.2. Псевдоэлементы
17.2.1. Псевдоэлементы :.[first-letter и ::first-line
17.2.2. Другие псевдоэлементы
17.2.3. Употребление псевдоэлементов
17.3. Комбинаторы
17.3.1. Комбинатор элемента-потомка — пробел
17.3.2. Комбинатор дочернего элемента >
17.3.3. Комбинатор ближайшего смежного элемента +
17.3.4. Комбинатор произвольного смежного элемента-
Не применяйте «трюки» с селекторами
17.4. Группировка селекторов
Глава 18. Вёрстка страниц с помощью таблиц
18.1. Постановка задачи
18.1.1. Макет страницы
18.1.2. Спецификация
Спецификация должна быть хорошей
18.2. Основные этапы вёрстки
18.2.1. Составление схемы страницы по графическому макету
18.2.2. Определение структуры таблиц
18.2.3. Составление кода HTML в соответствии со структурой таблиц
18.2.4. Задание оформления CSS для страницы и элементов таблиц
18.2.5. Заполнение содержанием и оформление ячеек таблиц
Логотип
Адрес
Панель навигации
Текст
Остальные ячейки
18.3. Готовая работа
18.4. Особенности табличной вёрстки
18.5. О «недостатках» табличной вёрстки
Глава 19. Плавающие элементы
19.1. Свойство float — обтекание
19.1.1. Поведение плавающих элементов
19.1.2. Примеры плавающих элементов
19.2. Свойство clear — запрет обтекания
19.3. Применение плавающих элементов для вёрстки страниц
19.3.1. Пример вёрстки
Верхний колонтитул
Основная часть
19.3.2. Готовая работа
Как избежать злоупотреблений
19.3.3. Сравнение табличной и бестабличной вёрстки
Объём кода
Сложность кода
Масштабируемость
Выводы
ЧАСТЬ III. ВЫСШИЙ ПИЛОТАЖ
Глава 20. Формы
20.1. Как работают формы
20.2. Элементы форм
20.2.1. Элемент form— форма
20.2.2. Элемент input — различные элементы управления
input type="text"— поле для ввода текста
input type=''password"— поле для ввода текста
input type=" checkbox" — флажок
input type="radio"— переключатель
input type="file"— поле для выбора файла
input type="hidden"— скрытое поле
input type="submit"— кнопка для отправки формы
input type="button"— кнопка
20.2.3. Элемент button — кнопка
20.2.4. Меню: элементы select, option, optgroup
20.2.5. Элемент textarea —многострочное поле для ввода текста
20.2.6. Структурные элементы формы
Элемент label — надпись при элементе управления
Элементы fieldset и legend — группировка компонентов формы.
20.3. Атрибуты элементов управления
20.3.1. Атрибут tabindex — порядок переключения фокуса
Атрибут accesskey —клавиша быстрого доступа
20.3.2. Атрибут disabled—блокирование элемента управления
20.3.3. Атрибут readonly — доступ только для чтения
20.4. Оформление форм с помощью CSS
20.4.1. Особенности оформления элементов управления
20.4.2. Пример оформления формы
20.4.3. Псевдоклассы действий пользователя для элементов управления
20.4.4. Свойства интерфейса пользователя
Свойство cursor — вид указателя мыши
20.4.5. Свойство outline —контур
20.5. Расширенное использование форм
Глава 21. Изображения в CSS
21.1. Свойства фона и изображений в CSS
21.1.1. Свойство background-color — цвет фона
21.1.2. Свойство background-image — изображение
21.1.3. Свойство background-repeat — режим повторения изображения
21.1.5. Свойство background-position — положение изображения
21.1.6. Собирательное свойство background— фон и изображение
21.2. Эффекты изображений в CSS
21.2.1. Как закрепить изображение в углу окна браузера
21.2.2. Как сделать узорчатые поля страницы
21.2.3. Как разместить изображение рядом с текстом
21.2.4. Как сделать орнамент по краю области
21.2.5. Как сделать красивое обрамление текста
21.2.6. Как сделать «резиновые» изображения
21.2.7. Как сделать подсветку изображения при наведении указателя мыши
Глава 22. Особенности использования CSS
22.1. Подключение таблицы стилей к документу HTML
22.1.1. Элемент link для подключения CSS
Альтернативные таблицы стилей
22.1.2. Элемент style
22.1.3. Атрибут style
22.1.4. Директива (djmport
22.2. Таблицы стилей для разных устройств просмотра
22.2.1. Как подключить таблицу стилей для определённых устройств
22.2.2. Как разрабатывать таблицы стилей для печати
2
