o Сохранить страницу и просмотреть в браузере. Уменьшить ширину окна и убедиться, что текст содержимого будет накладываться на фоновый рисунок.
4. Настроить границы и размеры основных разделов страницы:
· Выяснить ширину рисунка в пикселях: отобразить вспомогательную страницу в браузере, щелкнуть правой кнопкой мыши на рисунке и выбрать команду Свойства и посмотреть размеры рисунка. В примере ширина рисунка оказалась 183 пикселя.
· Для Заголовка, Меню и контейнера Содержимое сайта задать границы (категория Box, свойство margin) по 0 пикселей, а правую границу (margin: right)–183 пикселя (ширина фонового рисунка). Задать ширину (категория Position, свойство width) Главного контейнера 800 пикселей.
· Сохранить изменения и просмотреть страницу в браузере. Теперь содержимое страницы не ужимается при уменьшении размеров окна, оно «прибито» к левому краю страницы.
· Отцентрировать содержимое страницы с помощью стилей: для Главного контейнера задать значение auto для левой и правой границ (категория Box, свойства margin: left и right), для верхней и нижней (top, bottom) границ задайте значение 0. Сохраните изменения и откройте страницу в браузере. Содержимое должно быть выровнено по центру.
5. Задать фоновые цвета разделов страницы.
· Задать фоновый цвет Главного контейнера:
o В правой колонке после текста отбить (клавишей Enter) пустые строки таким образом, чтобы стала видна нижняя граница рисунка.
o Открыть для редактирования вспомогательную страницу и скопировать в буфер из параметров тэга BODY код фонового цвета (в примере – #0B0B0B).
o Вернуться к странице maket.html и изменить стиль Главного контейнера – в качестве значения параметра background-color вставить скопированный код фонового цвета.
· Задать белый фоновый цвет контейнера Содержимое сайта.
· Выбрать и задать фоновые цвета разделов Заголовок, Меню и Низ. Желательно, чтобы цветовая схема страницы согласовывалась с цветами рисунка. Для выбора цветов можно использовать вспомогательную страницу и инструмент More Colors/Select (пипетка). Сохранить страницу и просмотреть в браузере.
· По краям страницы видно белое пространство – содержимое отстоит от края страницы. Убрать отступы и настроить другие параметры страницы – шрифт, фоновый цвет.
o Во внешней таблице стилей style_css.css создать новый стиль для тэга BODY, задать:
o все отступы (padding) и границы (margin) – 0,
o выбрать и задать фоновый цвет;
o задать тип шрифта (свойство font-family, рекомендуется выбрать Arial, Helvetica, sans-serif) и его размер. Можно задавать как относительный размер (например, medium), так и абсолютный (например, 1 em). Если использован относительный размер, то впоследствии все шрифты надо задавать относительными размерами. В этом случае пользователь сможет настраивать размеры шрифтов (например, командой Вид/Размер шрифта в IE). Если же задан абсолютный размер, то и все остальные размеры также следует определять в абсолютных величинах.
· Выделить содержимое страницы рамкой – определить рамку (категория Border) для Главного контейнера: одинарную сплошную (solid), задать толщину (в примере – 2 пикселя) и цвет рамки.
6. Настроить параметры видимых разделов страницы:
· Настроить параметры левой колонки: ширина – 230 пикселей, правая граница (margin): 20 пикселей, остальные – 10 пикселей; отступы (padding): справа – 10 пикселей, остальные – 0; рамка – только справа, одинарную сплошная, задать ее толщину (в примере – 1 пиксель), задать цвет рамки.
· Настроить параметры правой колонки: все отступы – 0.
· Настроить параметры раздела Низ: отключить обтекание с обеих сторон (категория Layout, свойство clear, значение both); задать отступ слева – 10 пикселей, остальные отступы – 5; рамка – только сверху, сплошная (solid), задать ее толщину (в примере – 1 пиксель), задать цвет рамки; задать уменьшенный размер шрифта.
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.