HTML&CSS: Добрите страни

Предговор ………… xvii
1. Какво представлява хипертекстът………… 1
Мрежата без линкове
URI адреси
Управление на линковете
Улесняване на работата със сайта ви чрез линкове
Предизвикателства при реализацията на хиперлинкове
2. Работа с маркиращ HTML код………… 7
Синтаксис на HTML
Тагове, елементи и атрибути
Структура на страниците
Режими на интерпретация, разновидности на HTML,
декларации на типа документ
HTML или XHTML?
Strict, Transitional или Frameset?
Повест за двата модела кутии
Как да изберете подходящ тип на документа за вашия проект
Прекрасните страни: универсалните атрибути
Добавяне на връзки към листове със стилове чрез class и id
Описание на съдържанието чрез title и lang
Атрибутът contenteditable в HTML5
Разделяне на информация, структура, изложение и поведение
Как да направите сайтовете си напълно сигурни
Принципът на разделянето
Работа с йерархична структура от документи
Браузъри, обработка и интерпретация
Динамичен HTML, Ajax и интерпретация
3. Общ поглед върху CSS………… 25
Свързване на листове със стилове към HTML документи
Задаване на лист със стилове чрез link
Обслужване на различни Internet Explorer версии с помощта
на условни коментари
Заместване на link със style
Използване на @import
Пазете се от атрибути style!
Правила за обслужване на специфични медии
Избор на елементите, които искате да стилизирате: писане
на селектори
Родителски, дъщерни и сродни елементи:
взаимоотношения елемент/възел
Прости селектори
Множества от селектори и селектори на наследници
Избор на преки дъщерни елементи
Конфликт между правила, приоритет и предимство
Приоритет на селекторите
Избягване на конфликти между правилата
Наследяване на стойности
Обзор на CSS свойствата и стойностите им
Мерни единици в CSS
Мерни единици за дължина и размер за различни медийни
устройства
Стъпка на дисплея и стойност на един пиксел
Мерни единици за дължина, подходящи за документи за печат
Ключови думи за свойството font-size
Мерни единици за цвят
Основни свойства за оформление в CSS
4. Създаване на здрави взаимоотношения със стандартите………… 47
Обширен преглед на стандартите, свързани с Мрежата
Защо уеб стандарти?
Оперативна съвместимост
Пазарни сили
Съвместимост със следващи версии
Достъпност
Приоритети на фирмите-производители
Наследен начален тласък
Най-добрите практики (и липсата на такива)
Строг конструкционизъм
Компромисен вариант: придържане към стандартите
Предимствата на придържане към стандартите
Правила за разработка чрез придържане към стандартите
5. Ефективни стилове и структура………… 55
Четирите навика на ефективните стилисти
Навик №1: Направете го простичко
Навик №2: Направете го широко приложим
Навик №3: Направете го съвместим
Навик №4: Запазете чувството си за ориентация
CSS Дзен и опитът на стилиста
Функционалните принципи на CSS Дзен
Информационна архитектура и уеб използваемост
Многомерност
Навигация: ориентация и откриване на правилния път
Стратегии за посещенията
Указатели за създаване на използваеми интерфейси
Предсказване на поведението на потребителя чрез
сценарии и анализ на потребителите
Таксономия и номенклатура
Приложение на таксономията в каскадите
Постигане на добро подразделение в по-големи сайтове
Нови структуриращи елементи (HTML5)
6. Подреждане пъзела на CSS оформлението………… 83
Модел на кутиите и управление размера на елементите
Режим на съвместимост (quirks mode) и
стриктен режим (strict mode)
Стойности auto
Свойството overflow
Ограничаване, а не фиксиране на размерите на елемента
Справяне с непредвидимото
Полета, контури и отстъпи
Полета с отрицателна стойност
Комбинирани полета
Контури
Отстъпи
Ефектите на кутиите при основните елементи на документа
Размери на свойствата на кутиите и стойности в проценти
Поток на елементите
Вградени елементи
Блокови елементи
Вградено-блокови елементи
Използване на свойството display за промяна на потока на елемента
Свойството display
Свойствата float и clear
Законите на свойството float
Отмяна на стойностите на float чрез clear
Плаващо съдържание
Реализация на многоколонни оформления
Преработка на двуколонните оформления от маркиращи
таблици във вид на CSS
Как работи двуколонният стил
Предимства на изнасяне на детайлите на
оформлението в листове със стилове
Преминаване от две в три колони
Работа с повече от три колони
Семантично празни контейнери за многоколонни оформления
Иновативни оформления с CSS3
Свойства за позициониране в CSS
Как работи позиционирането
Елементи с ограничаващо позициониране
Свойствата visibility и z-index
Промяна на облика без засягане на потока в документа
Подреждане
Постигане на издържан код за навигация и оформление
Определяне на местоположението на списъка
Вкарване на списъка за навигация в желаните координати
Типове оформления и решетки на прозореца
Фиксирани, пропорционални и гъвкави оформления
Изграждане на решетки
Правилото на третините
Златното сечение и редицата на Фибоначи
Реализация на гъвкава решетка на страница
7. Работа със списъци………… 131
Подредени и неподредени списъци
Стил по подразбиране за подредени и неподредени
списъци според потребителските агенти
Създаване на правилни подредени и неподредени списъци
Свойството list-style-type и атрибутът type
Елементът nav (HTML 5)
Промяна на номерацията на подреден списък
Други приложения на списъците
Структури
Вградени серийни списъци
Промяна на оформлението на линкове в долния колонтитул
Маркери във фона?
Стилизиране на навигационни елементи
Разполагане на главната навигация на сайта в изходния код
Рецепта за оформлението на главната навигация
Рецепта за навигацията в долния колонтитул
Списъци с дефиниции
Стилизиране на списък с дефиниции
Пример за речник
Пример за диалог
8. Заглавия, хиперлинкове, вградени елементи и цитати………… 149
Заглавия и правилното им подреждане
Заглавия в печатни издания
Добавяне на заглавия по оптимален начин
Стилизиране на елементите за заглавие
Размери на шрифта и обработка на текста
Нормализиране на размерите на заглавията
Акцентиране върху заглавията
Маркиране на линкове
Атрибути за линковете
Правилна употреба на атрибута href
Връзки към определени откъси от документа
Създаване на ефективно съдържание на линковете и стойности на title
Стилизиране на линкове
Псевдокласове на линкове
Използване на display: block за увеличаване на площта на линка
Стилизиране на линковете в състояние :hover и :active
Свойството text-decoration
Свойството cursor
Въвеждане на семантично значение чрез вградени елементи
Цитати
9. Цветове и фонове………… 167
Цветовете на теория и уеб цветовете на практика
Приложимост, достъпност и цветове
Адитивен цветови модел
Цветови модел HSB
Субтрактивен цветови модел
Дизайн, контраст и допълващи цветове
Разпознаване на цветовете, накратко
Среди на изобразяване и „безопасни“ цветове
Създаване на ваши собствени цветови схеми
Фонове в CSS
Въвеждане на стойности за background-position
Стенографското свойство background в CSS
Композиране на фоновите изображения
Изкуствени колони
Подредени текстури и шарки във фона
Големи текстури във фона и неповтарящи се емблеми
Падащи сенки, гел ефекти и заоблени ъгли
Растерен шрифт и заместване с изображения на Фарнер
Стиловите правила на FIR
Недостатъци на FIR
Намаляване на натоварването на сървъра чрез спрайтове
10. Таблици (с данни) ………… 189
Недостатъци на таблиците за оформление
Ред на изходния код: квадратно колче в кръгла дупка
CSS Дзен се превръща в мит
Робуването пред шаблоните е неизбежно
Позиционирането се оказва безполезно след интерпретацията
Частите на таблиците с данни
Пример: кода на таблица в цялата си мощ
Композиция на клетки
Композиция на таблицата и данните
Горни и долни колонтитули и клетки за заглавие в таблицата
Селектори по атрибути и на дъщерни елементи
Намаляване контраста на горния и долния колонтитул
Добавяне на ролоувър акценти в таблица
11. Изображения и мултимедийни формати………… 205
Заместени елементи
Подготовка на изображенията за представянето им
Обяснение на атрибута alt
Размери и контури на изображенията
Оформяне на изображенията
Изрязване
Матиране: създаване на виртуална „рамка“
Промяна на резолюцията на изображението
Промени в нивата на цветовите канали:
подобряване на контраста на снимки
Прилагане на множество настройки
Работа с цветови профили
Оптимизация на изображенията
Избор на правилния формат на изображението
Откриване на златната среда между размер и качество
Публикуване на изображенията
Организиране на изображенията
Публикуване и управление на изображенията със CMS
Етикет за публикацията на изображения
Стилизиране на изображения и плъгини
Оформяне на изображенията в колони
Надписване на изображения
Работа с предварителен преглед (миниатюри) в галерия или настройка на слайдшоу
Lightbox: Предварителни прегледи, галерии, слайдшоу
SlideShowPro
Добавяне на движение и звуци: използване на SWFObject за вмъкване на Flash видео и презентации
Вмъкване на мултимедия без SWF обвивка
История за три компании
Въведете Flash
Използване на празен маркиращ код за публикуване на мултимедийно съдържание
Опасности при стилизирането на плъгин съдържанието
Избягване на плъгините с хедър полето HTTP Content-Disposition
Бъдете отворени към нови идеи
Елементите video и audio (HTML5)
Елемента canvas (HTML5)
12. Типография в Мрежата………… 235
Кратка история на формите на буквите
Произход на съвременните западни форми на буквите
Пресата на Гутенберг и изкуството, наречено типография
Появата на цифровия набор
Различни ограничения без промяна на очакванията
Нагледен речник на типографията
Алайзинг и антиалайзинг
Стилове на шрифтовете, четливост и яснота
Стилизиране с цел четливост
Стилизиране с цел яснота
„Подгъвът“ и дребният шрифт
Оразмеряване на шрифта
Избор на подходящи мерни единици за оразмеряване на шрифта
Зависимост между размерите, зададени в em-ове и в проценти
Ключови думи за размер
Работа с гарнитури и шрифтове
Предизвикателствата на ограничения избор
Прилагане на избрания шрифт: свойството font-family
Откриване на канонични имена на гарнитури
Достъп до системния шрифт по подразбиране чрез свойството font
Накратко за кодирането на символи
Какво представлява кодирането на символи?
ASCII, ISO 8859-1, Unicode и UTF-8
Избор на кодираща схема
Вмъкване на кодове за получаване на символите извън ASCII
Балансиран анализ на текста
Предсказуемост, предпочитание и паника
Оценка на разнообразието на съдържанието
Отличаване на текста: гарнитура, размер, тежест, стил, цвят
Настройване на шрифта срещу грешки
Стилизиране на пасажи със сходна значимост
Запознайте се с анализа на текста
Типографски CSS сборник
Свойството line-height
Свойствата font-variant и text-transform
Свойствата letter-spacing и word-spacing
Свойството white-space
Добрата практика в уеб типографията
13. Създаване на изчистени и достъпни форми………… 275
Изграждане на ефективни форми
Уеб приложения, гледна точка на потребителя и избор на дизайн
Организиране на потребителския интерфейс по функционалност
Десет правила за ефективни уеб форми и приложения
Оценка и структура
Въвеждане на изискванията
Маркиращ код и структура
Основна структура на формите, облика и поведението
get заявки, произлизащи от формите
Още за кодирането на URL адреси: ASCII кодове
Методът post и качване на файлове
Промяна на размера и вида на отделните контроли
Създаване на прототипи и оформление
Основи на създаването на прототипи
Шаблони за дизайна, нулиране на стиловете и оформление на форми
Групиране на контролите според облика им
Задължителни полета и други ограничения за входа
Означаване на задължителните полета
Откриване и класифициране на потребителските грешки на входа
Атрибутите disabled и readonly
Създаване на достъпни форми
Реализиране на форми с цел достъпност
Поддръжка на навигация с клавиатурата от формите
Функции на формите в HTML5
Нови типове полета за вход
Атрибута required
14. Лошите страни………… 307
Ограниченията на Internet Explorer (особено IE 6)
Войната на браузърите 2.0
Липсваща или ненадеждна поддръжка на селектори
hasLayout
Удвояване на полетата
Стойности на expression()
ActiveX филтри и преходи
Поддръжка на PNG (и липсата на такава)
Слаба поддръжка на свойства
Проблеми с XHTML и XML
Цялостна грозота
Деликатност на шаблони и съдържание, подадено от трети страни
Валидиране на маркиращия код като необходимо условие за правилно изпълнение на стиловете
„Изобразява се най-добре под...”
Оценяване на поддръжката
embed срещу object
Контроли за форми, плъгини и подредба на елементи
Неправилен маркиращ код поради Глупави причини
Лошите съседи и задънените улици на HTML
Рамки
Елементът strike
Атрибутът name
Елементите noscript и noframes
Семантични изкривявания и ограничените изразни средства на HTML
Вградени елементи за облика
Промяна на вертикалното пространство: hr и br
Елементът pre срещу свойството white-space
Заместници на CSS
@-правила
Изчислени стойности и разлики при закръгляването
Представки -moz и –webkit, зависещи от браузъра
Стойността inherit
Прикриване: свойствата z-index и clip
Броячи
Правила за потока на елементите
Стойности за кодови позиции в Unicode и свойството content
Ужасните страни
Елементите marquee и blink
Свойствата за потребителски интерфейс на MSIE
Атрибутът align
Атрибутът style
div-ит
Атрибути за обработка на събития
Безпричинно подчертаване
Атрибута http-equiv
Равносметката
Приложение: URI адреси, архитектура клиент-сървър и HTTP………… 337
Речник ………… 343
Индекс ………… 351

Бен Хеник се занимава с изграждане на уеб сайтове от септември 1995, а над първия си уеб проект започва да работи като доброволец в университета. Той се е занимавал с почти всички аспекти на дизайна и разработката на уеб сайтове, от базисен HTML до специфичен CSS, както и големи архитектури и управление на съдържанието. Той е писал за A List Apart, Web Standards Project, а последното му участие е в Web Standards Curriculum на Opera Software.