Примеры из книги "HTML и CSS. Путь к совершенству"
Big-Pig копилочка интересной и полезной информации

Поиск

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Примеры из книги "HTML и CSS. Путь к совершенству"


Бен Хеник

HTML и CSS. Путь к совершенству

Примеры текста из книги


СОДЕРЖАНИЕ

Предисловие ....15
Для кого и о чем эта книга?
  Что значит «самое интересное»?
  Что нужно знать для чтения этой книги
  Идеальный читатель
  Книга может показаться скучной (либо слишком сложной)
Цели этой книги
  Чего нет в этой книге
  Веб-стандарты
  Photoshop
  Чем интересен сопутствующий сайт
  Условные обозначения
  «Почувствуй силу, Люк!»
  Примеры кода
  Слова благодарности

Глава 1. Сущность гипертекста ....27
Интернет без ссылок
URI
Управление ссылками
Усовершенствование взаимодействия с пользователем с помощью ссылок
Проблемы применения гипертекста

Глава 2. Работа с разметкой HTML ....32
Синтаксис HTML
  Теги, элементы и атрибуты
  Структура страницы
Режимы отображения, версии HTML и объявление типа документа (DTD)
  HTML или XHTML?
  Strict, Transitional или Frameset?
  Два типа блочных моделей
  Выбор правильного типа документа
Универсальные атрибуты
  Создание стилевых крючков с помощью class and id
  Описание контента с помощью title и lang
  Атрибут contenteditable в HTML5
Разделение контента, структуры, презентации и интерфейса
  Создание абсолютно безопасного сайта
  Разделение на практике
  Работа с деревом документа
Браузеры, парсинг и отображение
  Динамический HTML, Ajax и отображение

Глава 3. Обзор CSS ....47
Связь таблиц стилей с HTML-документом
  Связь с помощью тега link
  Определение версии Internet Explorer с помощью условных комментариев
  Замена тега link тегом style
  Применение ©import
  Будьте осторожны с атрибутами style!
  Определение правил для специфических сред
Применение селекторов стилей
  Родительские, дочерние и братские элементы: отношения узлов элементов
  Простые селекторы
  Комбинации селекторов
  Селектор дочерних элементов
Конфликты правил, приоритеты и очередность
  Приоритет селекторов
Конфликты правил
  Наследование значений
Параметры CSS и обзор единиц измерения
Единицы измерения CSS
  Единицы измерения в переменных средах
  Зерно и размер пиксела
  Единицы измерения для печатных форм
  Размер шрифта. Ключевые слова
  Цвет. Единицы измерения
  Основные свойства визуализации в CSS

Глава 4. Разработка в соответствии со стандартами ....64
Обзор стандартов Всемирной паутины
Для чего нужны стандарты?
  Интероперабельность
  Рыночные силы
  Совместимость снизу вверх
  Доступность
  Приоритеты поставщиков
  Косность стандартов
  Факторы успеха (и их отсутствие)
  Жесткий конструктивизм
Третий путь — дружественность к стандартам
  Преимущества дружественной к стандартам разработки
  Правила дружественной к стандартам разработки

Глава 5. Создание эффективных стилей и структуры ....71
Четыре правила для эффективного создания стиля
  Правило № 1. Будь проще
  Правило № 2. Будь гибким
  Правило № 3. Будь последовательным
  Правило № 4. Придерживайся своего курса
CSS-дзен
Информационная архитектура и удобство использования Интернета
  Мультиразмерность
  Навигация: ориентация и указатели
  Стратегия посещения сайтов
  Рекомендации по созданию удобных интерфейсов
  Предсказание поведения пользователей с помощью сценариев и тестов
  Таксономия и номенклатура
  Применение таксономии к таблицам стилей страницы
  Новые структурные элементы (HTML5)

Глава 6. Создание макета в CSS ....97
Блочная модель CSS и контроль размера элементов
Режим совместимости и строгий режим
Значение auto
  Свойство overflow
  Ограниченные, но не фиксированные размеры элементов
  Управление непредсказуемым
Отступы, поля и рамки
  Отрицательные поля
  Схлопывание полей
  Рамки
  Отступы
  Блочное поведение корневых элементов документа
  Параметры блоков и процентное значение
Поток элементов
  Элементы inline
  Элементы block
  Элементы inline-block
Использование display для изменения потока элементов
  Свойство display
Свойства float и clear
  Правила свойства float
  Отмена значений float с помощью clear
  Контекст float
Создание макета с несколькими колонками
  Конвертация двухколоночных макетов из разметки в CSS
  Как работают двухколоночные стили
  Преимущества использования CSS для создания макетов
  Переход с двух колонок на три
  Если колонок больше трех
  Семантически пустые контейнеры для многоколоночных макетов
  Дополнительные функции в CSS3
Свойства позиционирования в CSS
  Как работает позиционирование
  Связанные элементы позиционирования
Видимость и свойство z-index
  Изменение видимости, не затрагивающее поток документов
  Стек
Создание точного кода и макета для навигации
  Ориентирование списка
  Размещение навигационного списка в заданной области
Типы верстки и сетка
  Фиксированные, пропорциональные и «резиновые» макеты
  Создание сетки
  Правило третей, золотое сечение и ряд Фибоначчи
  Внедрение гибкой сетки

Глава 7. Работа со списками ....139
Упорядоченные и неупорядоченные списки
  Стили по умолчанию для упорядоченных и неупорядоченных списков в разных браузерах
  Создание эффективных упорядоченных и неупорядоченных списков
  Свойство list-style-type и атрибут type
  Nav-элемент (HTML5)
  Изменение области упорядоченного списка
Другие функции списков
  Контурные списки
  Внутристрочные серийные списки
  Изменение внешнего вида ссылок в футере
  Фоновые буллиты?
Оформление навигации
  Размещение навигации в коде документа
  Способ расположения основной навигации
  Размещение навигации в футере
  Списки определений
  Создание стилей для списков определений
  Пример разметки текста словаря
  Пример разметки диалога

Глава 8. Заголовки, гиперссылки, строковые элементы и цитаты ....155
Заголовки и их правильное использование
  Заголовки в печати
  Оптимальное размещение заголовка
Оформление элементов заголовка
  Размеры и шрифты заголовков
  Нормализация размеров заголовка
  Выделение заголовков
Разметка ссылки
  Атрибуты ссылок
  Эффективное применение атрибута href
  Создание ссылок на специальные области документа
  Эффективные названия ссылок и значения заголовка
Оформление ссылок
  Псевдоклассы ссылок
  Применение display: block для улучшения внешнего вида ссылки
  Свойство text-decoration
  Свойство cursor
Добавление семантических значений строковыми элементами
Цитаты

Глава 9. Цвета и фоны ....170
Теория цвета и практика применения веб-цветов
  Удобство, доступность и цвет
  Аддитивная цветовая модель
  Цветовая модель HSB
  Субтрактивная цветовая модель
  Дизайн, контраст и дополняющие цвета
  Идентификация цветов, вкратце
  Графические приложения и палитра, безопасная для Сети
  Разработка собственной палитры
Фоны CSS
  Свойство background-position
  Свойство CSS background: краткая запись
Составление фоновых изображений
  «Ложные колонки»
  Текстуры и образцы черепичного фона
  Огромные фоновые текстуры и специальные вставки
  Падающие тени, глянцевые эффекты и закругленные углы
Растровая копия и замена изображений по методу Фарнера
  Правила таблицы стилей FIR
  Минусы FIR
Оптимизация работы сервера с помощью спрайтов

Глава 10. Таблицы данных ....191
Недостатки макетных таблиц
  Исходный порядок: квадратный стержень, круглая дыра
  CSS-дзен становится легендой
  Неизбежное рабство перед шаблонами
  Позиционирование оказывается бесполезным
Части таблицы данных
  Пример разметки таблицы: все вперемешку
Создание ячеек
  Построение таблицы и размещение данных
Верхние/нижние шапки и заголовочные ячейки таблицы
  Селекторы атрибутов и дочерние селекторы
  Уменьшение контраста верхней и нижней шапки
  Добавление эффектов наведения

Глава 11. Изображения и мультимедиа ....205
Замещенные элементы
Подготовка изображения к обработке
  Что такое атрибут alt
  Размеры и границы изображения
Обработка изображений
  Обрезка
  Матирование: создание воображаемой «рамки»
  Ресемплинг: изменение абсолютного размера изображения
  Изменения уровня: оптимизация контраста фотографий
  Применение нескольких настроек
Работа с цветовыми профилями
Оптимизация изображений
  Выбор правильного формата изображения
  Как найти золотую середину между размером и качеством
Публикация изображений
  Сохранение изображений в порядке
  Публикация изображений и управление сайтом с помощью CMS
  Правила публикации изображений
Оформление изображений и встраиваемого контента
  Расположение изображения в колонке
  Создание заголовков для изображений
Работа с эскизами в режиме галереи и показа слайдов
  Lightbox: эскизы, галереи и показ слайдов
  SlideShowPro
Движение и звук: добавление Flash-видео и Flash-презентаций с помощью SWFObject
Добавление мультимедиа без контейнера
  Рассказ о трех компаниях
  Использование Flash
  Использование простой разметки для публикации мультимедийного контента
  Стили для встраиваемого контента
  Как решить проблемы встраиваемого контента с помощью поля заголовка HTTP Content-Disposition
  Важно сохранять объективность
  Элементы video и audio (HTML5)
  Элемент canvas (HTML5)

Глава 12. Веб-типографика ....234
Краткая история буквенных форм
  Происхождение современных западных буквенных форм
  Пресс Гутенберга и искусство типографики
  Появление цифрового типографского набора
  Ограничений много, но ожидания не меняются
Типографский глоссарий на практике
Алиасинг и сглаживание
Стили шрифтов, читаемость и разборчивость
  Обеспечение читаемости
  Обеспечение разборчивости
  Шапка и мелкий шрифт
Размер шрифта
  Выбор правильных единиц размера шрифта
  Пересчет размеров для 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. Понятные и доступные формы ....270
Разработка эффективных форм
  Сетевые приложения, пользовательская перспектива и выбор дизайна
  Организация пользовательского интерфейса при помощи функций
  Десять правил разработки эффективных веб-форм и приложений
Оценка и структура
  Определение требований
Разметка и структура
Структура, отображение и поведение простой формы
  Созданные формой запросы get
  Кодирование символов в URL: сущности ASCII
  Метод post и загрузки файлов
  Изменение размера и внешнего вида отдельных элементов управления
Создание прототипа и макета
  Основы прототипирования
  Дизайнерские шаблоны, исходные стили и макеты форм
  Группировка элементов управления по внешнему виду
Обязательные для заполнения поля и другие ограничения при подтверждении
  Определение обязательных для заполнения полей
  Поиск и распознавание пользовательских ошибок ввода
  Атрибуты disabled и readonly
Создание форм, доступных для всех
  Реализация форм с учетом доступности
  Поддержка перемещения по форме при помощи клавиатуры
Свойства форм в HTML5
  Новые типы вводимых данных
  Атрибут required

Глава 14. Отрицательные стороны ....300
Поразительные свойства 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-itis
  Атрибуты обработчика событий
  Беспричинное подчеркивание
  Атрибут http-equiv
Подводя итог

Приложение. URI, архитектура клиент-сервер и HTTP ....329
Базовая архитектура клиент-сервер
Что каждый веб-разработчик должен знать о HTTP
Коротко о MIME-типах
Управление объемом запроса




Предисловие

HTML и CSS применяются уже более десяти лет, и их развитие не стоит на месте. За пятнадцать лет работы разработчиками были реализованы всевозможные типы проектов, опробованы различные функции и выявлены их достоинства и недостатки.

Но разработчикам HTML и CSS, несмотря на все их усилия, не всегда удавалось применять правильно эти технологии. Ряд экспериментов оказался не особо успешным. С другой стороны, потенциал некоторых решений превзошел все ожидания. Для совершенствования этих технологий было необходимо выявить бесперспективные элементы и прекратить работу с ними, а также выбрать наиболее удачные элементы, заслуживающие самого широкого применения. Уделяя внимание передовым методам в HTML и CSS, вы не только создаете работоспособные сайты, но и эффективнее проектируете наиболее перспективные их образцы с минимальными материальными и временными затратами.




Рекомендации по созданию удобных интерфейсов

Для создания интерфейса мало объявить что «x ведет туда-то». Первейшая цель любого интерфейса — быть удобным для пользователей. Однако простого следования за вкусами толпы еще недостаточно для того, чтобы создать хороший интерфейс.

Первейшая и важнейшая цель, которую нужно преследовать, — это последовательность. Рассмотрим несколько различных интернет-страниц. Для пользователя ситуация будет идеальной, если на каждой из них элементы навигации и интерфейса (ссылки, теги, окно поиска, заголовки и т.д.) будут располагаться на одних и тех же местах.

Еще лучшим (хотя и гораздо более трудным) вариантом было бы сохранение этой последовательности внутри отдельных секций страницы, так, чтобы пользователь мог очень быстро найти как необходимую ему информацию, так и подсказку, иллюстрирующую его положение на странице.

Теперь перейдем к различным техникам создания указателей, которые, пусть и постепенно, упростят пользователям достижение их целей.

• Площадь, занимаемая навигационными ссылками или тегами, должна быть по возможности большой. Как минимум для каждого элемента свойству display следует присвоить значение block и добавить дополнительный отступ (см. главу 8). Также рекомендуется добавлять к поисковому окну кнопку подтверждения.

• Следует избегать использования всплывающих меню, выводящих внутренние ссылки, при наведении на них мышки (такие же, как например «Все программы» в меню «Пуск» в Windows), поскольку подобные меню требуют от пользователя очень хорошей моторики, что неудобно для людей с ограниченными возможностями, а подчас и для обычных пользователей. Microsoft применяет подобное меню, для того чтобы сохранить область отображения с целью приведения к наименьшему общему знаменателю аппаратной конфигурации. Так же в Windows реализована поддержка обращения к меню «Пуск» с клавиатуры и возможность помещать ссылки на программы прямо на рабочий стол. Указатели на странице должны быть подобны иконкам на рабочем столе Windows. Они должны быть так же хорошо заметны и информативны.

• На многих страницах ссылки первичной навигации сделаны меньшими по размеру, чем основной текст, а некоторые дизайнеры еще и уменьшают их контрастность. На самом деле, все следует делать наоборот — ваши усилия необходимо направить на увеличение размера и контрастности этих элементов, помогающих пользователям ориентироваться и перемещаться по сайту.

• Делайте пометки и подсказки четкими и ясными. Иначе они рискуют превратиться в так называемую «мистическую навигацию» (термин предложен Винсентом Фландерсом), когда вы знаете, что на другом конце ссылки что-то есть, но вот что там — совершенно непонятно. Переход по такой ссылке чем-то сродни прогулке по неосвещенным аллеям парка глубокой ночью.

• Старайтесь не пользоваться миниатюрными полями input type="text" в поисковых формах. Уменьшенный размер полей приводит к тому, что поисковый запрос хуже читается, что сразу же повышает вероятность ошибки и потратить время впустую. Конечно, не стоит делать эти поля гигантскими, но их размер должен дать возможность пользователю легко прочитывать все, что он туда вводит.

• При отображении текущего документа в навигационном контексте, четко выделяйте его из окружения. Если возможно, удалите элемент a, сохранив его содержание.




Перейти на страницу скачивания книги: Хеник Б. - HTML и CSS. Путь к совершенству


Форма входа

Облако тегов

сказки кулинария Рыбалка бисер родители малышам аудиокниги аудиосказки html Веб дизайн Web дизайн сайтостроение css беременность и роды Вязание Детям скачать воспитание детей проза журналы техника аудиокнига AVI мультфильмы приключения

Книги

Абрамова Л.П.Бyшки-бapaшки. Пaльчикoвыe игpы (1-3 года)
Скачать

Популярное

• Флеш-открытки с Днем рождения. Коллекция 
• Торговые советники FOREX (торговые роботы) 
• Мамины сказки: Доброта. Как воспитать ребенка добрым 
• Сказки дядюшки Римуса (аудиокнига, mp3) 
• Macromedia Flash Professional 8 на примерах (2006) 
• Флеш-открытки к женскому дню 8 Марта. Коллекция 
• Коллекция флеш-открыток о любви 
• Мамины сказки: Ваш ребенок - лидер. Как воспитать ребенка лидером 
• Мамины сказки: Антикапризин. Сказки для исцеления от капризов 
• Восточные сладости (2002) 
• Флеш-открытки. Новый год и Рождество. Большая коллекция 
• Macromedia Flash 8 для начинающих (видео-курс) 
• Азбука вежливости (1984) 
• Следы зверей и птиц. Энциклопедический справочник-определитель (2007) 
• Вниз по волшебной реке (1992)