Влад мержевич верстка веб страниц. Мержевич, Влад. Приемые верстки Web-страниц. Продвинутые уроки по HTML и CSS
На практических примерах раскрываются технологии HTML и CSS в плане решения различных аспектов создания веб-страниц. Приведены возможности и средства по оформлению текста и изменению его вида. Описаны основные графические форматы, которые используются на сайтах. Освещены вопросы работы с рисунками, ссылками, списками, линиями и рамками. Раскрыты возможности управления видом таблицы, ускорения загрузки табличных данных, использования шаблонов. Рассмотрены элементы форм, их параметры и примеры изменения оформления с помощью цвета, изображений и рамок. Приведены способы выравнивания рисунков, слоев и текста, использования отступов и полей и многие другие приемы оформления веб-страниц. Даются подробные сведения об особенностях популярных браузеров и о том, как они работают с тегами и стилями. Объясняется, как учитывать различия между браузерами и создавать универсальные документы, которые будут корректно в них отображаться.
Детальные примеры и пошаговое описание действий позволяют реализовать приведенные рекомендации на практике.
Содержание
Введение
Для кого предназначена книга
Как организована книга
Соглашения, используемые в книге
Поддержка
Глава 1. Текст
Аз и буки шрифтовой науки
Шрифты
Шрифты с засечками
Шрифты без засечек
Моноширинный шрифт
Декоративные шрифты
Размер текста
Насыщенность
Наклон текста
Начертание
Работа со шрифтами
Установка шрифта
Цвет текста
Размер символов
Изменение насыщенности
Курсивный текст
Верхний и нижний индекс
Капитель
Прописные и строчные буквы
Работа с текстом
Подчеркивание текста
Использование тега HR
Применение таблиц
Использование стилей
Создание буквицы
Буквица в тексте
Буквица на поле
Выступающий инициал
Отступ первой строки
Пробелы между словами
Выравнивание текста
Отбивка строк
Интерлиньяж (межстрочное расстояние)
Межбуквенный интервал
Глава 2. Изображения
Добавление изображений
Форматы графических файлов
GIF
JPEG
PNG-8
PNG-24
Рамка вокруг изображения
Выравнивание изображений
Создание паспарту
Использование таблиц
Применение стилей
Подрисуночная подпись
Обтекание изображения текстом
Использование параметра align тега IMG
Применение таблиц
Использование стилей
Альтернативный текст
Добавление фонового рисунка на веб-страницу
Использование фонового рисунка
Фоновый рисунок
Создание тени
Панель на изображении в браузере Internet Explorer
Карты-изображения
Глава 3. Ссылки
Создание ссылок
Виды ссылок
Ссылки без подчеркивания
Подчеркивание ссылок при наведении на них курсора мыши
Изменение цвета ссылки
Изменение цвета подчеркивания ссылки
Декоративное подчеркивание ссылок
Ссылки разных цветов
Альтернативные способы выделения ссылок
Использование фонового цвета
Рамка вокруг ссылки
Добавление волнистой линии под ссылкой
Рисунки возле внешних ссылок
Ссылки на новое окно
Ссылки во фреймах
Глава 4. Списки
Создание списка
Маркированные списки
Изменение вертикальных отступов в списке
Отступы от маркера до текста
Вид маркера
Список с рисованными маркерами
Маркеры разного цвета
Положение текста и маркера
Нумерованные списки
Нумерация списка
Многоуровневые списки
Глава 5. Линии и рамки
Создание линий
Горизонтальные линии
Использование тега HR
Применение рисунков
Использование таблиц
Применение стилей
Линия с рисунком
Вертикальные линии
Создание вертикальных линий через таблицы
Создание вертикальных линий с помощью стилей
Создание рамок
Использование параметра таблицы border
Использование параметра таблицы cellspacing и bgcolor
Вложенные таблицы
Заливка ячеек таблицы цветом
Декоративная рамка
Использование стилей для создания рамки
Рамки и плавающие фреймы
Рамки с тенью
Создание тени с помощью атрибута border
Применение слоев
Использование таблицы
Рамки и заголовки
Простая панель
Панель с фиксированным заголовком
Панель с графическим заголовком
Глава 6. Таблицы
Создание таблиц
Особенности таблиц
Заголовок таблицы
Выравнивание таблиц
Таблицы и рамки
Таблицы с фиксированным заголовком
Ускорение загрузки таблиц
Выделение ячеек таблицы курсором мыши
Шаблоны таблиц
Простая таблица
Простая таблица с заголовком
Таблица с цветным заголовком
Таблица с чередующимися строками
Таблица с выделенными колонками
Глава 7. Формы
Добавление формы
Элементы форм
Текстовое поле
Однострочное текстовое поле
Поле для ввода пароля
Многострочное текстовое поле
Рисунки в текстовом поле
Кнопки
Кнопка SUBMIT
Кнопка RESET
Цветные кнопки
Переключатели
Флажки
Поле со списком
Скрытое поле
Поле с изображением
Отправка файла
Группирование элементов формы
Глава 8. Выравнивание элементов
Выравнивание рисунков по горизонтали
Центрирование по вертикали
Выравнивание слоя по центру
Использование отступов
Применение параметра text-align
Параметр align тега DIV
Абсолютное позиционирование слоя
Манипуляции с текстом
Выравнивание текста внутри слоя
Выравнивание по верхнему краю
Выравнивание по центру слоя
Выравнивание по нижнему краю
Глава 9. Отступы и поля
Создание отступов
Отступы на веб-странице
Отступы в форме
Создание полей
Поля у блочных элементов
Использование отступов и полей
Поля вокруг текста
Отступы в тексте
Создание двух колонок
Глава 10. Элементы оформления
Полосы прокрутки
Полосы прокрутки во фреймах
Новые окна
Изменение цвета полос прокрутки
Вид курсора мыши
Ссылка на иконку сайта
Создание тени
Использование фильтров
Применение слоев
Использование спецсимволов
Глава 11. Создание меню
Горизонтальное меню
Создание меню с помощью таблиц
Применение слоев
Текстовые вкладки
Графические вкладки
Создание вкладок
Предварительная загрузка изображений
Объединение изображений в одно
Вертикальное меню
Простое меню с рамкой
Меню с подсветкой
Меню и подменю
Ниспадающее меню
Плавающее меню
Приложение. Свойства CSS
Пояснения
Параметр background
Параметр background-attachment.
Параметр background-color.
Параметр background-image
Параметр background-position
Параметр background-repeat
Параметр border
Параметр border-bottom
Параметр border-bottom-color
Параметр border-bottom-style
Параметр border-bottom-width
Параметр border-collapse
Параметр border-color
Параметр border-style
Параметр border-width
Параметр bottom
Параметр clear
Параметр clip
Параметр color
Параметр cursor
Параметр display
Параметр float
Параметр font
Параметр font-family
Параметр font-size
Параметр font-style
Параметр font-variant
Параметр font-weight
Параметр height
Параметр left
Параметр letter-spacing
Параметр line-height
Параметр list-style
Параметр list-style-image
Параметр list-style-position
Параметр list-style-type
Параметр margin
Параметр margin-bottom
Параметр overflow
Параметр padding
Параметр padding-bottom
Параметр position
Параметр right
Параметр text-align
Параметр table-layout
Параметр text-indent
Параметр text-decoration
Параметр text-transform
Параметр top 429
Параметр vertical-align
Параметр visibility
Параметр white-space
Параметр width
Параметр word-spacing
Параметр z-index
Предметный указатель
метки темы:
HTML, DHTML, CFML (Cold Fusion), CSS
Наверняка многие из вас, кто верстает, активно использует htmlbook.ru в качестве онлайн справочника, к примеру, по стилям. Кто-то, возможно, является постоянным посетителем форума htmlbook.ru. Я уверен, что среди читателей есть те, кто читал книги «Ускорение работы сайта» и «HTML и CSS на примерах», а возможно и учились по ним. Кто объединяет всё это? Влад Мержевич, встречаем аплодисментами:)
Привет, Влад!
Привет, Дмитрий.
Расскажи, пожалуйста, когда ты заинтересовался Вебом?
Наверное, мне в некотором роде повезло, что первым редактором для создания веб-страниц, с которым я столкнулся, был WebEdit. Это не визуальный редактор и, хотя все можно было делать через кнопки меню, невольно приходилось учить HTML. Так и научился самостоятельно создавать веб-страницы. Потом, как и у многих начинающих было увлечение фреймами, но быстро с ними распрощался, когда понял, что это вещь недостаточно гибкая. Как пример, из-за небольшой ошибки фреймовая структура открывалась сама в себе несколько раз. Это, конечно, говорит не о недостатках фреймов, а о неправильном их использовании, тем не менее, после этого перешёл на другую систему вёрстки, а именно на таблицы. Было ещё увлечение программой Microsoft FrontPage, именно тогда понял в чем её основной недостаток. Нет, дело совершенно не в том, что она создана Microsoft, это ребячество. FrontPage много берет на себя, считая, что сам сделает гораздо правильней, чем человек. Как итог - приходится постоянно контролировать эту программу, «держать её в узде», при этом требуется знать и HTML и особенности вёрстки во FrontPage, а у новичков этих знаний как раз пока и нет.
А когда и как родилась идея издать первую книгу?
В свое время написал несколько статей, посвящённых сокращению объёма данных на сайте и ускорению его работе. Но оказалось, что статей хватает на небольшую книжку, так что решил связаться с различными издательствами, чтобы ее опубликовать. И в этот момент ко мне обратился Евгений Рыбаков из BHV и предложил написать книгу. Вот такое удивительное совпадение желаний и возможностей. После обсуждения концепции и содержания книги она вышла под названием «Ускорение работы сайта».
Какой общий тираж? Кстати, сколько книг всего?
Две книги - «Ускорение работы сайта» и «HTML и CSS на примерах». Тираж для тематики стандартный - по 5 тысяч экземпляров.
Расскажи, как ты создавал htmlbook.ru? Какие были трудности?
Как и многие, пытался придумать, какую информацию можно поместить на свой будущий сайт. Домашнюю страницу намеренно не хотелось делать из-за узости темы. Вот пришла идея размещать небольшие советы по верстке веб-страниц. Оказалось, что данную область почему-то обходят, хотя убеждать в ее актуальность никого не нужно. Так началось с десятка небольших статей, постепенно объем информации вырос до пары сотен статей, при этом и тематика расширилась. Уже не только советы по верстке, а HTML, CSS и многое другое.
Какая сейчас посещаемость сайта? А форума?
Сайт в среднем посещают 9к уников в день, а форум около тысячи. Но вот что интересно, темы форума просматривают раза в четыре чаще, чем материалы сайта. Понятно, что используют как тематическую базу знаний.
Я наслышан о проблемах с доступностью форума, когда планируешь их решить?
Эх, это больная тема, связанная с популярностью ресурса и соответственно, возросшим количеством посетителей. Совместно с хостером ищем способы снизить нагрузку за счёт технических средств или перехода на выделенный сервер.
Не раскроешь секрет, готовятся ли новые проекты? Какие? Расскажи подробней.
В этом году планирую запустить «долгострой» WebReference.Ru, в начале 2008 на htmlbook.ru проводился конкурс на дизайн этого сайта. Сейчас пока отрабатываю технологии и принципы работы этого ресурса на примере сайта «Графика для Web» (webimg.ru), который в каком-то смысле выступает экспериментальной площадкой.
Также есть одна интересная идея, связанная с Красноярском, городу в этом году исполняется 380 лет. По этому поводу хочу сделать сайт с панорамными фотографиями города с применением технологии QuickTime VR. То есть это не просто плоские изображения, их можно крутить по горизонтали на 360°. Эффект присутствия обеспечен.
Какие блоги и сайты читаешь? Поделись подборкой от «шеф-повара».
Утро, как и у многих пользователей Интернета, начинается с башорга. Также обязательно хожу на сайты о кино, люблю это дело. Тематические ресурсы о веб-технологиях посещаю по мере необходимости, ежедневно обращаться не приходится.
А пишешь статьи куда-нибудь кроме своих проектов?
Нет, и так заимствуют мои статьи разные сайты. Такую практику даже поощряю, но с обязательной ссылкой на первоисточник. Так рейтинг проектов и растёт потихоньку.
Если я напишу очень интересную статью, опубликуешь её, к примеру, на htmlbook.ru?
Конечно, тем более обращения уже были и статьи сторонних авторов публиковались.
А кем ты сейчас работаешь? Где?
Недавно работал начальником IT-отдела в одной красноярской компании, но вскоре осознал, что работа уже не радует и на неё уходит слишком много времени. Так что теперь работаю на себя, занимаюсь консалтинговыми услугами по веб-технологиям.
Покажешь своё фото? Жуть любопытно.
Спасибо за то, что уделил время! Посоветуешь что-нибудь начинающим веб-мастерам?
В веб-дизайне нет абсолютных законов и прописных истин. Знать азы конечно необходимо, но все остальное зависит только от вас. Надо учиться и превращать свои знания в предмет, которым стоит гордиться!
- Чулан
Наверняка многие из вас, кто верстает, активно использует htmlbook.ru в качестве онлайн справочника, к примеру, по стилям. Кто-то, возможно, является постоянным посетителем форума htmlbook.ru. Я уверен, что среди читателей есть те, кто читал книги «Ускорение работы сайта» и «HTML и CSS на примерах», а возможно и учились по ним. Кто объединяет всё это? Влад Мержевич, встречаем аплодисментами:)
Привет, Влад!
Привет, Дмитрий.
Расскажи, пожалуйста, когда ты заинтересовался Вебом?
Наверное, мне в некотором роде повезло, что первым редактором для создания веб-страниц, с которым я столкнулся, был WebEdit. Это не визуальный редактор и, хотя все можно было делать через кнопки меню, невольно приходилось учить HTML. Так и научился самостоятельно создавать веб-страницы. Потом, как и у многих начинающих было увлечение фреймами, но быстро с ними распрощался, когда понял, что это вещь недостаточно гибкая. Как пример, из-за небольшой ошибки фреймовая структура открывалась сама в себе несколько раз. Это, конечно, говорит не о недостатках фреймов, а о неправильном их использовании, тем не менее, после этого перешёл на другую систему вёрстки, а именно на таблицы. Было ещё увлечение программой Microsoft FrontPage, именно тогда понял в чем её основной недостаток. Нет, дело совершенно не в том, что она создана Microsoft, это ребячество. FrontPage много берет на себя, считая, что сам сделает гораздо правильней, чем человек. Как итог - приходится постоянно контролировать эту программу, «держать её в узде», при этом требуется знать и HTML и особенности вёрстки во FrontPage, а у новичков этих знаний как раз пока и нет.
А когда и как родилась идея издать первую книгу?
В свое время написал несколько статей, посвящённых сокращению объёма данных на сайте и ускорению его работе. Но оказалось, что статей хватает на небольшую книжку, так что решил связаться с различными издательствами, чтобы ее опубликовать. И в этот момент ко мне обратился Евгений Рыбаков из BHV и предложил написать книгу. Вот такое удивительное совпадение желаний и возможностей. После обсуждения концепции и содержания книги она вышла под названием «Ускорение работы сайта».
Какой общий тираж? Кстати, сколько книг всего?
Две книги - «Ускорение работы сайта» и «HTML и CSS на примерах». Тираж для тематики стандартный - по 5 тысяч экземпляров.
Расскажи, как ты создавал htmlbook.ru? Какие были трудности?
Как и многие, пытался придумать, какую информацию можно поместить на свой будущий сайт. Домашнюю страницу намеренно не хотелось делать из-за узости темы. Вот пришла идея размещать небольшие советы по верстке веб-страниц. Оказалось, что данную область почему-то обходят, хотя убеждать в ее актуальность никого не нужно. Так началось с десятка небольших статей, постепенно объем информации вырос до пары сотен статей, при этом и тематика расширилась. Уже не только советы по верстке, а HTML, CSS и многое другое.
Какая сейчас посещаемость сайта? А форума?
Сайт в среднем посещают 9к уников в день, а форум около тысячи. Но вот что интересно, темы форума просматривают раза в четыре чаще, чем материалы сайта. Понятно, что используют как тематическую базу знаний.
Я наслышан о проблемах с доступностью форума, когда планируешь их решить?
Эх, это больная тема, связанная с популярностью ресурса и соответственно, возросшим количеством посетителей. Совместно с хостером ищем способы снизить нагрузку за счёт технических средств или перехода на выделенный сервер.
Не раскроешь секрет, готовятся ли новые проекты? Какие? Расскажи подробней.
В этом году планирую запустить «долгострой» WebReference.Ru, в начале 2008 на htmlbook.ru проводился конкурс на дизайн этого сайта. Сейчас пока отрабатываю технологии и принципы работы этого ресурса на примере сайта «Графика для Web» (webimg.ru), который в каком-то смысле выступает экспериментальной площадкой.
Также есть одна интересная идея, связанная с Красноярском, городу в этом году исполняется 380 лет. По этому поводу хочу сделать сайт с панорамными фотографиями города с применением технологии QuickTime VR. То есть это не просто плоские изображения, их можно крутить по горизонтали на 360°. Эффект присутствия обеспечен.
Какие блоги и сайты читаешь? Поделись подборкой от «шеф-повара».
Утро, как и у многих пользователей Интернета, начинается с башорга. Также обязательно хожу на сайты о кино, люблю это дело. Тематические ресурсы о веб-технологиях посещаю по мере необходимости, ежедневно обращаться не приходится.
А пишешь статьи куда-нибудь кроме своих проектов?
Нет, и так заимствуют мои статьи разные сайты. Такую практику даже поощряю, но с обязательной ссылкой на первоисточник. Так рейтинг проектов и растёт потихоньку.
Если я напишу очень интересную статью, опубликуешь её, к примеру, на htmlbook.ru?
Конечно, тем более обращения уже были и статьи сторонних авторов публиковались.
А кем ты сейчас работаешь? Где?
Недавно работал начальником IT-отдела в одной красноярской компании, но вскоре осознал, что работа уже не радует и на неё уходит слишком много времени. Так что теперь работаю на себя, занимаюсь консалтинговыми услугами по веб-технологиям.
Покажешь своё фото? Жуть любопытно.
Спасибо за то, что уделил время! Посоветуешь что-нибудь начинающим веб-мастерам?
В веб-дизайне нет абсолютных законов и прописных истин. Знать азы конечно необходимо, но все остальное зависит только от вас. Надо учиться и превращать свои знания в предмет, которым стоит гордиться!
Кросс-пост из моего
Что это такое, для чего, как влияет на элементы, как использовать на практике для вёрстки разных элементов. Как обычно, теория подкрепляется интерактивными заданиями для закрепления материала и самостоятельными работами. С ответами, если что.
Ещё в качестве эксперимента добавил к свойству float песочницу . Красивого названия для этой фичи не придумал, пока песочница называется. Короче, щёлкаешь по значениям свойства и тут же видишь результат применения. Как вам?
Продвинутые уроки по HTML и CSS
Влад Мержевич
Продолжаем переводить вторую книгу Шэя Хоу, посвящённую разным веб-технологиям. Уже выложено три урока , в том числе о позиционировании и адаптивной вёрстке. Остальные главы будут добавляться по мере перевода и как обычно будут анонсированы здесь.
Как верстать на HTML5 и CSS3
Влад Мержевич
Компоненты Bootstrap
Влад Мержевич
Bootstrap
Влад Мержевич
Если вас всегда интересовало, что такое Bootstrap и что он даёт для веб-разработки, то вот вам небольшое руководство по этому фреймворку.
После написания, кстати, пришло несколько идей, как сделать это руководство лучше и интереснее. Но улучшать можно до бесконечности, поэтому в определённый момент надо представить публике результат, а затем уже отталкиваться от него. Тем более, на сайте всегда можно дополнить и дописать. Это не бумага, откуда слово не вырубить.
Электронный сомелье
Сверстайте форму из PSD-файла для ввода коктейля.
Пошаговая форма
Форма для коктейлей
Внутренняя страница
Влад Мержевич
Внутренними будем называть все веб-страницы сайта кроме главной. Они основаны на двухколоночном фиксированном макете, где в правой колонке располагается навигация (ссылки по сайту) и блок с интересной информацией, а в левой текст статьи.
Позиционирование элементов
Влад Мержевич
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position , изменяется и система координат.
Благодаря комбинации свойств position , left , top , right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.
Поток документа
Влад Мержевич
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Блочная модель
Влад Мержевич
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.
Рис. 3.1. Свойства, формирующие блочный элемент
Блочная вёрстка
Влад Мержевич
Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем я буду активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.
Первоначально слои ввела компания Netscape, включив в свой браузер поддержку
тега
Влад Мержевич
Приемы верстки
веб-страниц
Вступление................................................................................................... | |||
Благодарности.............................................................................................. | |||
Поддержка.................................................................................................... | |||
ОСОБЕННОСТИ ВЕРСТКИ ВЕБ-СТРАНИЦ............................................... | |||
ИСПОЛЬЗОВАНИЕ ФОНОВОГО РИСУНКА.............................................. | |||
СОЗДАНИЕ РАМОК................................................................................... | |||
ВЫРАВНИВАНИЕ ПО ЦЕНТРУ................................................................. | |||
ЦЕНТРИРОВАНИЕ ПО ВЕРТИКАЛИ......................................................... | |||
ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ............................................................... | |||
ВЕРТИКАЛЬНЫЕ ЛИНИИ........................................................................ | |||
ГОРИЗОНТАЛЬНЫЕ ЛИНИИ................................................................... | |||
СОЗДАНИЕ КОЛОНОК............................................................................. | |||
КОЛОНКИ С РАЗДЕЛИТЕЛЕМ............................................................... | |||
ПОДРИСУНОЧНАЯ ПОДПИСЬ............................................................... | |||
СОЗДАНИЕ БУКВИЦЫ........................................................................... | |||
ОТСТУП ПЕРВОЙ СТРОКИ..................................................................... | |||
ОТСТУПЫ НА ВЕБ-СТРАНИЦЕ............................................................... | |||
Влад Мержевич. Приемы верстки веб-страниц
Вступление
В этой книге вы не найдете описания тегов, здесь не дается структура HTMLдокумента и ничего не говорится о вставке изображений и их создании. Вы не узнаете ни про параметры стилей, ни про скрипты, ни про формы, ни про фреймы. Ничего этого здесь нет. Но зато есть другое, более ценное, то, с чем сталкивался каждый начинающий веб-мастер, который изучил HTML и приступил к созданию сайтов - решение тех задач, над которыми многие ломают голову и задают себе вопрос: «как же это сделано?». Ответы на эти вопросы собраны здесь, в этой книге, в простой и удобной форме с примерами и подробным описанием.
Верстка веб-страниц – не просто знание приемов и хитростей создания различных эффектов. Это умение предугадывать результат действий с элементами веб-страниц и понимание особенностей различных браузеров, которые могут по-разному показывать сайт. Работа верстальщика сродни работе шеф-повара, который точно знает, какие ингредиенты и в каком количестве нужно добавить, чтобы улучшить вкус конечного блюда. Вооружившись простыми, но действенными рецептами верстки, которые даются в этой книге, вы сможете создавать впечатляющие сайты. Добро пожаловать на кухню верстки веб-страниц!
Благодарности
Выражаю признательность своему учителю и наставнику Петру Никифоровичу Сильченко за его неоценимые советы по написанию научных работ. Благодаря ему, стиль и удобочитаемость текстов улучшились.
Также хочу сказать спасибо Егору Москвичеву за множество полезных рекомендаций по содержанию сайта, которые он мне дал.
Поддержка
Ваши замечания, предложения и вопросы по книге направляйте автору по адресу электронной почты [email protected] .
Все описанные в книге материалы и примеры можно посмотреть в Интернете на сайте автора по адресу:
http://www.htmlbook.ru/layout
Исправления и дополнения по книге, а также новые версии доступны по адресу: http://www.htmlbook.ru/book
Влад Мержевич. Приемы верстки веб-страниц
1. ОСОБЕННОСТИ ВЕРСТКИ ВЕБ-СТРАНИЦ
При верстке веб-сайта, несмотря на некоторую аналогию его с печатными изданиями, следует все же помнить, что мы имеем дело с компьютерным текстом, который зависит от ряда факторов. Учет этих особенностей необходим для создания удобных для восприятия и пользования материалов, которые будут выглядеть одинаково в различных браузерах.
Ширина страницы зависит от размера и разрешения монитора
Данная особенность породила метод верстки веб-страниц, основанный на использовании таблиц с невидимой границей. Идеология HTML рекомендует использовать таблицы только по их прямому назначению, т.е. для создания именно таблиц. Но что делать, располагая столь слабыми средствами верстки, приходится использовать разные ухищрения.
Все многообразие дизайна можно свести к двум типам: «фиксированный» и «резиновый» дизайн.
При «фиксированном» дизайне макет страницы создается на основе таблиц или слоев определенной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640Ч 480 пикселей размер таблицы следует брать не более 619 пикселей. Для всех пользователей сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Интернета является разрешение 800Ч 600, разработчики сайтов ориентируются именно на него и делают таблицы шириной 700-770 пикселей.
Для «резинового дизайна» характерно использование таблиц с шириной, заданной в процентном отношении от ширины браузера. Достоинства – используется все доступное пространство веб-страницы, недостаток – при большом разрешении монитора текст сложно читать. Попробуйте, почитайте страницу со строчками длиной символов 200, глаза устанут по ней бегать.
Хотя и «резиновый» и «фиксированный» дизайн можно увидеть на различных сайтах повсеместно, в последнее время предпочтение все больше отдается гибкой структуре.
Размер шрифта зависит от настроек операционной системы и браузера
Не любят разработчики сайтов, когда их пользователи изменяют размер шрифта. Потому что в этот момент могут проявляться всякие разные недочеты верстки. И чтобы пользователь не мог менять размер шрифта, эта величина жестко прописывается в стилях. Даже если текст мелкий-мелкий, изменить его простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах, например: font-size: 150% . Тогда в опциях браузера размер шрифта можно делать большим или меньшим, что невозможно при абсолютном задании размера шрифта в пунктах. Это позволит установить размер шрифта подходящим для комфортного чтения. Только надо проверить вначале, что все на сайте корректно работает при любом размере шрифта.
Влад Мержевич. Приемы верстки веб-страниц
Несколько идущих подряд пробелов показываются как один
Сколько бы пробелов не стояло между словами, все равно на веб-странице мы увидим лишь один. В общем, правильное решение, чего лишний раз пробелы плодить. Но как же тогда быть с красными строками и другими отступами, которые так иногда необходимо использовать. Вот тут и полюбился многим символ неразрывного пробела () за то, что позволяет делать столько подряд идущих пробелов, сколько хочется.
Нет переносов слов в тексте
К сожалению, HTML не поддерживает перенос слов, так как это делают текстовые редакторы. Это условие совершенно несущественно, пока не используется выравнивание текста по ширине. В этом случае, блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами. Иногда пустые блоки между словами настолько велики, что портят внешний вид страницы и ухудшают читабельность текста.
Количество используемых для текста шрифтов ограничено
Разумеется, можно указать любой шрифт, установленный у вас в операционной системе и он будет корректно показываться на данном компьютере. Но никто при этом не гарантирует, что точно такой же шрифт будет находиться на удаленном компьютере пользователя. Поэтому для совместимости используется всего несколько шрифтов, которые встречаются повсеместно: Arial, Times, Verdana, Courier, Comic Sans MS. В случае если хочется воспользоваться понравившимся шрифтом, следует создать картинку в графическом редакторе, содержащую надпись.
Использование изображений вместо текста
Особенность непосредственно связана с предыдущим пунктом. Количество шрифтов, которые можно применять на веб-странице ограничено, а стили неудобно или невозможно применять для управления некоторыми параметрами текста, как это позволяют делать текстовые или графические редакторы. Поэтому некоторые блоки текста, например, заголовки и меню вставляют в виде изображения.
Высота содержимого страницы не ограничена рамками окна браузера
Несмотря на очевидность данного воззрения, из него следуют некоторые выводы:
поскольку высота текста на страницы не ограничена определенными рамками, как на листе бумаги и напрямую зависит от разрешения монитора, размера и типа шрифта и еще от кучи других параметров, вычислить ее не представляется возможным;
вертикальные линии привязанные к высоте текста можно строить только с использованием таблиц.
Использование распорок
Распоркой называется прозрачный рисунок, как правило, размером 1 на 1 пиксел, предназначенный для контроля пустого пространства. Распорки
Влад Мержевич. Приемы верстки веб-страниц
вставляются в ячейки таблиц, чтобы они не меняли свой размер при изменении окна браузера или разрешения монитора.
Написание программных скриптов вместо кода HTML
HTML не является языком программирования и имеет массу ограничений. Чтобы изменить его статическую природу, для создания различных эффектов используются скрипты – программы, которые встраиваются в тело веб-страницы и исполняются на стороне клиента. С помощью скриптов можно создавать на сайте игры, различные меню, динамически управлять стилями и многое другое.
2. ИСПОЛЬЗОВАНИЕ ФОНОВОГО РИСУНКА
Используя фоновый рисунок веб-страницы или таблицы можно создавать различные графические эффекты на сайте, например, вертикальные и горизонтальные линии, тени, полоски и многое другое.
Ôîí веб-страницы
Чтобы на веб-странице с левого края шла вертикальная фоновая полоса, используется следующий прием. Создаем рисунок шириной примерно 2000 пикселов. Такая большая ширина нужна для того, чтобы на всех мониторах независимо от их разрешения страница выглядела бы одинаково (рис. 2.1). С левой части рисунок зарисовывается нужным цветом желаемой ширины. Можно создавать не только прямоугольник, но и любые декоративные изображения, главное, чтобы они состыковывались по вертикали. Полученный рисунок вставляем на веб-страницу как обычный фон параметромbackground тега BODY. Поскольку рисунок широк и не помещается на всю ширину экрана монитора, на странице он будет повторяться только вниз.
Рис. 2.1. Фоновый рисунок для различных разрешений монитора
В итоге получим страницу, у которой по левому краю идет декоративная полоса (рис. 2.2).
Влад Мержевич. Приемы верстки веб-страниц
Рис. 2.2. Результат использования широкого фона
Приведенный прием можно использовать для создания и горизонтальных полос. В этом случае, фоновое изображение должно располагаться вертикально.
Для размещения содержимого страницы строго в определенных областях, можно использовать таблицу с нулевой границей как каркас (рис. 2.3). Самой таблицы видно не будет, но она позволяет отделить одну часть веб-страницы от другой, например, ссылки от содержания.
Рис. 2.3. Использования таблицы для разделения материала
Аналогичный подход можно использовать и с таблицами. Только вначале создается таблица, а уже в одной из ее ячеек размещается фоновый рисунок. Ширина ячеек задается фиксированной и зависит от фонового рисунка, а чтобы она не менялась, внутри ячейки рекомендуется поместить распорку – прозрачный рисунок заданных размеров (рис. 2.4).
Рис. 2.4. Фоновый рисунок для ячейки таблицы
Код для данного использования таблицы с фоном приведен в Примере 2.1.
Пример 2.1. Создание фона с помощью таблицы
 Меню | Текст |
Влад Мержевич. Приемы верстки веб-страниц
Рисунок bg.gif является фоном, аspacer.gif служит распоркой. В правой ячейке фон залит серым цветом, что можно делать по желанию.
Создание вертикальной линии
Очень удобно и просто делать вертикальные линии с помощью таблицы и фонового рисунка. Вначале готовим изображение в графическом редакторе, это может быть сплошная, пунктирная или любая декоративная линия (рис. 2.5).
Почему рисунок именно такого размера и формы описано чуть ниже.
Рис. 2.5. Заготовка для создания линии
Следующий этап – создание таблицы. Ширина одной из ячеек должна совпадать с толщиной линии, обычно это 1-2 пиксела. Внутри нее и размещаем фоном изображение.
Пример 2.2. Создание вертикальной линии
|  | При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной. Если ширина таблицы фиксирована, лучше задавать точные размеры всех ячеек. При ширине заданной в процентах, возможны небольшие изменения размеров ячеек. Вот для такого случая и делается изображение линии (рис. 2.5) с пустым полем справа. Если этого не сделать, линия может получиться несколько толще, чем ожидалось. А так, если ширина ячейки и будет увеличиваться, несмотря на прописанные размеры, вид линии останется неизменным. Вдобавок, такой «запас» позволяет изменять значение параметра cellpadding , который управляет отступом от края таблицы до ее содержимого, без отрицательных последствий. Рисунок достаточно делать шириной 20-30 пикселов, а цвет фона рисунка должен быть таким же, как у веб-страницы.
Влад Мержевич. Приемы верстки веб-страниц 3. СОЗДАНИЕ РАМОК Информация обведенная рамкой позволяет отделить один материал на вебстранице от другого и привлечь внимание читателя. Кроме того, рамка вносит элегантность в оформление сайта. Для создания рамок применяется несколько способов, их которых большая часть использует свойства таблиц. Стили дополняют возможности таблиц и позволяют сделать рамки разных видов простыми средствами. Ниже приводятся распространенные приемы получения рамок, которые можно встретить повсеместно на разных сайтах. Использование параметра таблицы border Самый простой способ создания рамки заключается в использовании параметров таблицы border, определяющего толщину рамки и bordercolor, который задает ее цвет. Рамки созданные таким образом отличаются по своему виду в разных браузерах (рис. 3.1). Рис. 3.1. Рамка полученная с помощью параметра border Netscape имитирует трехмерность рамки, браузер Opera вообще оставляет ее цвет без изменения, а Internet Explorer делает рамку сплошной. Пример 3.1. Использование параметра border
Влад Мержевич. Приемы верстки веб-страниц наложим еще один прямоугольник белого цвета, чуть меньшего размера, то увидим красную рамку. Только вместо листа бумаги используем тег TABLE, а цвет таблицы задаем параметром bgcolor . Пример 3.2. Использование вложенных таблиц
В верхней таблице устанавливаем ширину и высоту таблицы по желанию, параметром bgcolor задаем цвет рамки,cellspacing присваиваем нулю, аcellpadding управляет толщиной границы. Чем этот параметр больше, тем толще будет и рамка. Для внутренней таблицы надо обязательно задать ее цвет, отличный от цвета внешней, совпадающий с цветом фона веб-страницы, в примере, например, задан белый. Параметрcellspacing èëècellpading (в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы. Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы. Замечание: Перенос строки в тексте кода HTML автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк. Заливка ячеек таблицы цветом Использование цвета фона ячеек таблицы – один из универсальных и распространенных способов создания рамки. Создаем таблицу (рис. 3.2) и заливаем крайние ячейки нужным цветом (рис. 3.3).
Популярное в рубрике:
© 2024 Мобильные телефоны и связь
|
