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

Методи за изграждане на успешни уеб сайтове. HTML и CSS са базисните инструменти на уеб дизайна и съвместната им употреба с цел създаване на съвместими, надеждни уеб страници изисква както опит, така и познания. Задачата става още по-сложна, ако разчитате на остарели, объркващи и ненужни NTML хитрини и решения. Авторът Бен Хеник ви показва как да избегнете тези капани, като ви превежда отвъд стандартните съвети, трикове и техники, за да свържете скритата теория и замисъла на HTML и CSS с ежедневния си начин на работа.

"HTML & CSS: Добрите страни" е базисна книга за всеки, който се занимава с изграждане на уеб страници, но желае да обогати знанията си в областта. Разликата между посредствените уеб дизайнери и разработчици (включително тези, работещи с инструменти за изграждане и управление на сайтове) и наистина добрите професионалисти е нивото на знания в областта на HTML и CSS, които притежават."
-Thomas Vander Wal, основател и главен консултант на InfoCloud Solutions

С настоящата практически приложима книга ще научите как да боравите много по-ефективно с тези инструменти, отколкото повечето разработчици успяват. Независимо дали изработвате отделни страници, или изграждате шаблони, HTML & CSS: Добрите страни ще ви помогне да извлечете максималното от тези инструменти във всеки аспект на дизайна на уеб страници - от типографско оформление до цветове.

И още:

• структуриране на маркиращия HTML код с цел увеличаване мощта на CSS;
• реализиране на сложни многоколонни оформления;
• повишаване на стойността на сайт чрез иновативни CSS техники;
• изпълняване на изискванията за приложимост и достъпност чрез вградените в HTML и CSS инструменти;
• избягване на най-изнервящите ограничения от страна на браузърите и платформите.

ЗеСТ Прес ЕООД
София, 1408
жк Иван Вазов, ул. Димитър Манов 75
info@zest-pres.com

Предговор
Какво представлява хипертекстът

• Мрежата без линкове
• URI адреси
• Управление на линковете
• Улесняване на работата със сайта ви чрез линкове
• Предизвикателства при реализацията на хиперлинкове

Работа с маркиращ HTML код

• Синтаксис на HTML
• Тагове, елементи и атрибути
• Структура на страниците
• Режими на интерпретация, разновидности на HTML, декларации на типа документ
• HTML или XHTML?
• Strict, Transitional или Frameset?
• Повест за двата модела кутии
• Как да изберете подходящ тип на документа на вашия проект
• Прекрасните страни: универсалните атрибути
• Добавяне на връзки към листове със стилове чрез class и id
• Описание на съдържанието чрез title и lang
• Атрибутът contenteditable в HTML5
• Разделяне на информация, структура, изложение и поведение
• Как да направите сайтовете си напълно сигурни
• Принципът на разделянето
• Работа с йерархична структура от документи
• Браузъри, обработка и интерпретация
• Динамичен HTML, Ajax и интерпретация

Общ поглед върху CSS

• Свързване на листове със стилове към HTML документи
• Задаване на лист със стилове чрез link
• Обслужване на различни Internet Explorer версии с помощта на условни коментари
• Заместване на link със style
• Използване на @import
• Пазете се от атрибути style!
• Правила за обслужване на специфични медии
• Избор на елементите, които искате да стилизирате: писане на селектори
• Родителски, дъщерни и сродни елементи: взаимоотношения елемент/възел
• Прости селектори
• Множества от селектори и селектори на наследници
• Избор на преки дъщерни елементи
• Конфликт между правила, приоритет и предимство
• Приоритет на селекторите
• Избягване на конфликти между правилата
• Наследяване на стойности
• Обзор на CSS свойствата и стойностите им
• Мерни единици в CSS
• Мерни единици за дължина и размер за различни медийни устройства
• Стъпка на дисплея и стойност на един пиксел
• Мерни единици за дължина, подходящи за документи за печат
• Ключови думи за свойството font-size
• Мерни единици за цвят
• Основни свойства за оформление в CSS

Създаване на здрави взаимоотношения със стандартите

• Обширен преглед на стандартите, свързани с Мрежата
• Защо уеб стандарти?
• Оперативна съвместимост
• Пазарни сили
• Съвместимост със следващи версии
• Достъпност
• Приоритети на фирмите-производители
• Наследен начален тласък
• Най-добрите практики (и липсата на такива)
• Строг конструкционизъм
• Компромисен вариант: придържане към стандартите
• Предимствата на придържане към стандартите
• Правила за разработка чрез придържане към стандартите

Ефективни стилове и структура

• Четирите навика на ефективните стилисти
• Навик №1: Направете го простичко
• Навик №2: Направете го широко приложим
• Навик №3: Направете го съвместим
• Навик №4: Запазете чувството си за ориентация
• CSS Дзен и опитът на стилиста
• Функционалните принципи на CSS Дзен
• Информационна архитектура и уеб използваемост
• Многомерност
• Навигация: ориентация и откриване на правилния път
• Стратегии за посещенията
• Указатели за създаване на използваеми интерфейси
• Предсказване на поведението на потребителя чрез сценарии и анализ на потребителите
• Таксономия и номенклатура
• Приложение на таксономията в каскадите
• Постигане на добро подразделение в по-големи сайтове
• Нови структуриращи елементи (HTML5)

Подреждане пъзела на CSS оформлението

• Модел на кутиите и управление размера на елементите
• Режим на съвместимост (quirks mode) и стриктен режим (strict mode)
• Стойности auto
• Свойството overflow
• Ограничаване, а не фиксиране на размерите на елемента
• Справяне с непредвидимото
• Полета, контури и отстъпи
• Полета с отрицателна стойност
• Комбинирани полета
• Контури
• Отстъпи
• Ефектите на кутиите при основните елементи на документа
• Размери на свойствата на кутиите и стойности в проценти
• Поток на елементите
• Вградени елементи
• Блокови елементи
• Вградено-блокови елементи
• Използване на свойството display за промяна на потока на елемента
• Свойството display
• Свойствата float и clear
• Законите на свойството float
• Отмяна на стойностите на float чрез clear
• Плаващо съдържание
• Реализация на многоколонни оформления
• Преработка на двуколонните оформления от маркиращи таблици във вид на CSS
• Как работи двуколонният стил
• Предимства на изнасяне на детайлите на оформлението в листове със стилове
• Преминаване от две в три колони
• Работа с повече от три колони
• Семантично празни контейнери за многоколонни оформления
• Иновативни оформления с CSS3
• Свойства за позициониране в CSS
• Как работи позиционирането
• Елементи с ограничаващо позициониране
• Свойствата visibility и z-index
• Промяна на облика без засягане на потока в документа
• Подреждане
• Постигане на издържан код за навигация и оформление
• Определяне на местоположението на списъка
• Вкарване на списъка за навигация в желаните координати
• Типове оформления и решетки на прозореца
• Фиксирани, пропорционални и гъвкави оформления
• Изграждане на решетки
• Правилото на третините
• Златното сечение и редицата на Фибоначи
• Реализация на гъвкава решетка на страница

Работа със списъци

• Подредени и неподредени списъци
• Стил по подразбиране за подредени и неподредени списъци според потребителските агенти
• Създаване на правилни подредени и неподредени списъци
• Свойството list-style-type и атрибутът type
• Елементът nav (HTML 5)
• Промяна на номерацията на подреден списък
• Други приложения на списъците
• Структури
• Вградени серийни списъци
• Промяна на оформлението на линкове в долния колонтитул
• Маркери във фона?
• Стилизиране на навигационни елементи
• Разполагане на главната навигация на сайта в изходния код
• Рецепта за оформлението на главната навигация
• Рецепта за навигацията в долния колонтитул
• Списъци с дефиниции
• Стилизиране на списък с дефиниции
• Пример за речник
• Пример за диалог

Заглавия, хиперлинкове, вградени елементи и цитати

• Заглавия и правилното им подреждане
• Заглавия в печатни издания
• Добавяне на заглавия по оптимален начин
• Стилизиране на елементите за заглавие
• Размери на шрифта и обработка на текста
• Нормализиране на размерите на заглавията
• Акцентиране върху заглавията
• Маркиране на линкове
• Атрибути за линковете
• Правилна употреба на атрибута href
• Връзки към определени откъси от документа
• Създаване на ефективно съдържание на линковете и стойности на title
• Стилизиране на линкове
• Псевдокласове на линкове
• Използване на display: block за увеличаване на площта на линка
• Стилизиране на линковете в състояние :hover и :active
• Свойството text-decoration
• Свойството cursor
• Въвеждане на семантично значение чрез вградени елементи
• Цитати

Цветове и фонове

• Цветовете на теория и уеб цветовете на практика
• Приложимост, достъпност и цветове
• Адитивен цветови модел
• Цветови модел HSB
• Субтрактивен цветови модел
• Дизайн, контраст и допълващи цветове
• Разпознаване на цветовете, накратко
• Среди на изобразяване и „безопасни“ цветове
• Създаване на ваши собствени цветови схеми
• Фонове в CSS
• Въвеждане на стойности за background-position
• Стенографското свойство background в CSS
• Композиране на фоновите изображения
• Изкуствени колони
• Подредени текстури и шарки във фона
• Големи текстури във фона и неповтарящи се емблеми
• Падащи сенки, гел ефекти и заоблени ъгли
• Растерен шрифт и заместване с изображения на Фарнер
• Стиловите правила на FIR
• Недостатъци на FIR
• Намаляване на натоварването на сървъра чрез спрайтове

Таблици (с данни)

• Недостатъци на таблиците за оформление
• Ред на изходния код: квадратно колче в кръгла дупка
• CSS Дзен се превръща в мит
• Робуването пред шаблоните е неизбежно
• Позиционирането се оказва безполезно след интерпретацията
• Частите на таблиците с данни
• Пример: кода на таблица в цялата си мощ
• Композиция на клетки
• Композиция на таблицата и данните
• Горни и долни колонтитули и клетки за заглавие в таблицата
• Селектори по атрибути и на дъщерни елементи
• Намаляване контраста на горния и долния колонтитул
• Добавяне на ролоувър акценти в таблица

Изображения и мултимедийни формати

• Заместени елементи
• Подготовка на изображенията за представянето им
• Обяснение на атрибута alt
• Размери и контури на изображенията
• Оформяне на изображенията
• Изрязване
• Матиране: създаване на виртуална „рамка“
• Промяна на резолюцията на изображението
• Промени в нивата на цветовите канали: подобряване на контраста на снимки
• Прилагане на множество настройки
• Работа с цветови профили
• Оптимизация на изображенията
• Избор на правилния формат на изображението
• Откриване на златната среда между размер и качество
• Публикуване на изображенията
• Организиране на изображенията
• Публикуване и управление на изображенията със CMS
• Етикет за публикацията на изображения
• Стилизиране на изображения и плъгини
• Оформяне на изображенията в колони
• Надписване на изображения
• Работа с предварителен преглед (миниатюри) в галерия или настройка на слайдшоу
• Lightbox: Предварителни прегледи, галерии, слайдшоу
• SlideShowPro
• Добавяне на движение и звуци: използване на SWFObject за вмъкване на Flash видео и презентации
• Вмъкване на мултимедия без SWF обвивка
• История за три компании
• Въведете Flash
• Използване на празен маркиращ код за публикуване на мултимедийно съдържание
• Опасности при стилизирането на плъгин съдържанието
• Избягване на плъгините с хедър полето HTTP Content-Disposition
• Бъдете отворени към нови идеи
• Елементите video и audio (HTML5)
• Елемента canvas (HTML5)

Типография в Мрежата

• Кратка история на формите на буквите
• Произход на съвременните западни форми на буквите
• Пресата на Гутенберг и изкуството, наречено типография
• Появата на цифровия набор
• Различни ограничения без промяна на очакванията
• Нагледен речник на типографията
• Алайзинг и антиалайзинг
• Стилове на шрифтовете, четливост и яснота
• Стилизиране с цел четливост
• Стилизиране с цел яснота
• „Подгъвът“ и дребният шрифт
• Оразмеряване на шрифта
• Избор на подходящи мерни единици за оразмеряване на шрифта
• Зависимост между размерите, зададени в em-ове и в проценти
• Ключови думи за размер
• Работа с гарнитури и шрифтове
• Предизвикателствата на ограничения избор
• Прилагане на избрания шрифт: свойството font-family
• Откриване на канонични имена на гарнитури
• Достъп до системния шрифт по подразбиране чрез свойството font
• Накратко за кодирането на символ
• Какво представлява кодирането на символи
• ASCII, ISO 8859-1, Unicde и UTF-8
• Избор на кодираща схема
• Вмъкване на кодове за получаване на символите извън ASCII
• Балансиран анализ на текста
• Предсказуемост, предпочитание и паника
• Оценка на разнообразието на съдържанието
• Отличаване на текста: гарнитура, размер, тежест, стил, цвят
• Настройване на шрифта срещу грешки
• Стилизиране на пасажи със сходна значимост
• Запознайте се с анализа на текста
• Типографски CSS сборник
• Свойството line-height
• Свойствата font-variant и text-transform
• Свойствата letter-spacing и word-spacing
• Свойството white-space
• Добрата практика в уеб типографията

Създаване на изчистени и достъпни форми

• Изграждане на ефективни форми
• Уеб приложения, гледна точка на потребителя и избор на дизайн
• Организиране на потребителския интерфейс по функционалност
• Десет правила за ефективни уеб форми и приложения
• Оценка и структура
• Въвеждане на изискванията
• Маркиращ код и структура
• Основна структура на формите, облика и поведението
• get заявки, произлизащи от формите
• Още за кодирането на URL адреси: ASCII кодове
• Методът post и качване на файлове
• Промяна на размера и вида на отделните контроли
• Създаване на прототипи и оформление
• Основи на създаването на прототипи
• Шаблони за дизайна, нулиране на стиловете и оформление на форми
• Групиране на контролите според облика им
• Задължителни полета и други ограничения за входа
• Означаване на задължителните полета
• Откриване и класифициране на потребителските грешки на входа
• Атрибутите disabled и readonly
• Създаване на достъпни форми
• Реализиране на форми с цел достъпност
• Поддръжка на навигация с клавиатурата от формите
• Функции на формите в HTML5
• Нови типове полета за вход
• Атрибута required

Лошите страни

• Ограниченията на 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
Индекс