11. Основные функциональные зоны при верстке сайтов. Жесткий и резиновый дизайн.
Резиновый дизайн - способ верстки, при котором страница растягивается на всю ширину экрана вне зависимости от размера и разрешения монитора. Текст и элементы HTML-файла попадают в окно броузера, заполняя все доступное пространство, вне зависимости от размеров монитора. Если размер окна браузера изменяется, элементы повторно выводятся, чтобы настроиться на новые размеры. Резиновый дизайн - это когда размеры элементов являются относительными и задаются в процентах от ширины страницы. Термин "Резиновый дизайн" возник из-за того, что размеры блоков (в пикселях) изменяются при изменении размера окна браузера.
Фиксированный дизайн (жесткий дизайн) - способ верстки в веб-дизайне, при котором ширина страницы сайта зафиксирована. Это означает, что на мониторах с большим разрешением страница будет занимать не весь экран, а только его часть. Термин "фиксированный дизайн" используется для обозначения макета страницы, который создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 1024х768 пикселей размер таблицы следует брать не более 1000 пикселей. Такая ширина получается за счет вычитания из значения 1024 ширины вертикальной полосы прокрутки и границ окна браузера. Фиксированный дизайн может применяться для достижения полного контроля над отображением странцы. При фиксированном дизайне размеры элементов страницы, обычно, указываются в пикселях, и, соответственно, их размер не зависит от разрешения экрана пользователя и размера окна браузера. Действительно, у такого способа верстки есть свои преимущества - элементы страницы никогда не налезут друг на друга, текст можно разбивать на строки как угодно, не опасаясь того, что строка будет где-либо разорвана, и так далее. Однажды изготовленные, они редко подвергаются правке, поэтому отображение всех текстов может быть подогнано с точностью до пикселя. Фиксированный размер позволяет добиться того, чтобы содержимое страниц отображалось абсолютно одинаково на всех компьютерах. Благодаря этим обстоятельствамфиксированный дизайн, с жестко заданными размерами, весьма популярен при создании современных веб-сайтов.
12. Понятие модульной сетки
Модульная сетка (шаблон, трафарет) — воображаемая сетка, образованная, как правило, горизонтальными и вертикальными линиями, к которым «привязываются» основные элементы страницы.
Это понятие заимствовано из издательского дела (впрочем, как и верстка), но актуальное и для создания Web-страниц. Именно модульная сетка позволяет определить основные крупные блоки сайта. Даже если о ней не задумываться, она получается как бы сама по себе. По сложности модульной сетки можно в некоторой степени оценить сложность самой верстки сайта и его компоновочных блоков.
Содержимое страницы визуально разделено на отдельные модули. Модульная сетка отражает второй уровень структуры сайта — уровень компоновки страниц.
Применение текста и шрифтов на сайтах. Задание параметров текста с использованием тегов и атрибутов тегов html и с использованием свойств css
Табл. 1. Атрибуты CSS для управления шрифтами |
|
|||
Свойство |
Значение |
Описание |
Пример |
|
font-family |
имя шрифта |
Задает список шрифтов |
P {font-family: Arial, serif} |
|
font-style |
normal italic oblique |
Нормальный шрифт Курсив Наклонный шрифт |
P {font-style: italic} |
|
font-variant |
normal small-caps |
Капитель (особые прописные буквы) |
P {font-variant: small-caps} |
|
font-weight |
normal lighter bold bolder 100–900 |
Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный |
P {font-weight: bold} |
|
font-size |
normal pt px % |
нормальный размер пункты пикселы проценты |
font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
|