Создайте документ, вид которого показан на рисунке в конце этой страницы.
Стилевые определения записывайте в отдельный файл с именем task04.css, а HTML-код — в файл task04.htm. Файлы сохраняйте в каталоге, который вам укажет учитель. В этом каталоге есть подкаталог pic, в котором содержатся следующие картинки.
![]() |
menu00.gif (52×9) | ||
![]() |
menu01.gif (65×12) |
![]() |
menu01_.gif (65×12) |
![]() |
menu02.gif (73×12) |
![]() |
menu02_.gif (73×12) |
![]() |
menu03.gif (61×12) |
![]() |
menu03_.gif (61×12) |
![]() |
menu04.gif (38×9) |
![]() |
menu04_.gif (38×9) |
![]() |
menu05.gif (51×9) |
![]() |
menu05_.gif (51×9) |
![]() |
menu06.gif (40×12) |
![]() |
menu06_.gif (40×12) |
![]() |
08.gif (67×67) |
![]() |
08_.gif (67×67) |
В качестве средств оформления используйте свойства, приведённые в таблице.
Свойство | Описание и значения |
---|---|
color | Задаёт цвет текста. Значения: название цвета или его номер (как в соответствующем атрибуте HTML). |
background |
Значение свойства записывается в виде последовательности параметров:
цвет скролл повтор координаты картинка ![]() |
border |
Задаёт рамку вокруг элемента. Записывается в формате: border: толщина стиль цвет, например, border: 1px solid red. Некоторые значения стиля рамки: solid (сплошная линия), dashed (штриховая линия), double (двойная линия). |
margin-left margin-right margin-top margin-bottom |
Определяет размер отступа элемента: со всех сторон (margin) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. |
padding-left padding-right padding-top padding-bottom |
Определяет расстояние между содержимым и границей элемента слева со всех сторон (padding) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. |
Задаёт способ выравнивания внутри элемента. Значения: left, right, center, justify. | |
Задаёт гарнитуру шрифта. Можно указывать название конкретного шрифта или задавать родовое название: serif (шрифт с засечками), sans-serif (рубленый шрифт), monospace (моноширинный шрифт). | |
Задаёт размер шрифта. Значения: мнемонические размерные единицы (xx-small, x-small, small, medium, large, x-large, xx-large), мнемонические относительные указания (smaller, larger), проценты по отношению к текущему размеру (%), любые допустимые абсолютные единицы: pt (пункты), pt (пики), px (пикселы), in (дюймы), cm (сантиметры), mm (миллиметры). | |
Задаёт стиль написания. Значения: normal (обычный шрифт), italic (отображение курсивом). | |
Задаёт вес шрифта (толщину линий). Значения: normal (нормальный вес), bold (полужирное начертание), bolder (больший вес относительно текущего шрифта), lighter (меньший вес относительно текущего шрифта). В качестве значений можно использовать числа от 100 до 900 с шагом 100 (Значение 400 — это то же, что normal, 700 — то же, что и bold). | |
Задаёт ширину элемента. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. | |
Определяет тип обтекания элемента другими элементами (слева или справа). Значения: none (нет обтекания), left (элемент слева, обтекание справа), right (элемент справа, обтекание слева). | |
Определяет добавочное расстояние между буквами. Значения: число с допустимой единицей измерения (например, px). Процентная запись не поддерживается. | |
Определяет адрес картинки, использумой в качестве маркера для элемента списка. Адрес записывается в виде: url("путь_к_файлу"). | |
Задаёт тип позиции блока в окне. Значением является ключевое слово: absolute (блок с абсолютными координатами), relative (блок с относительными координатами), static (действуют обычные правила размещения блока). | |
Расстояние элемента от левого края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. | |
Расстояние элемента от верхнего края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. |
В качестве текстового редактора используйте PSPad или Блокнот. Заготовки файлов можно скопировать в текстовый редактор через буфер обмена.
Файл task04.css
/* --------- Белый фон, чёрный текст, фоновая полоска нулевые отступы и нулевые поля ------------*/ BODY { } /* --------- Зелёный цвет (#009900;), выравнивание слева ------------*/ H1,H2,H3,H4,H5,H6 { } /* --------- Картинка disc.gif в качестве маркера ------------*/ UL LI { } /* --------- Картинка в левом верхнем углу * Абсолютное позиционирование (10,10) ------------*/ .block1 { } /* --------- Вертикальная полоса (меню и слоган) * Абсолютное позиционирование * Явно заданные координаты ------------*/ .menu00 { } .menu01 { } .menu02 { } .menu03 { } .menu04 { } .menu05 { } .menu06 { } .disc { } .slogan { } /* --------- Заголовок и горизонтальное меню * Фон цвета #DFF2E5 * Нулевой отступ блока * Отступ содержимого на 10 пикселов от границ * Дополнительно отступ от левой границы на 100 пикселов ------------*/ .block2 { } /* --------- Меню * Отступ от рамки слева на 5 пикселов * Рубленый шрифт * Уменьшеннвй на 30% размер шрифта ------------*/ .menu { } /* --------- Основная часть страницы * Нулевой отступ блока * Отступ содержимого от рамки на 10 пикселов * Дополнительно отступ от левой границы на 100 пикселов ------------*/ .block3 { } /* --------- Выделение подписи * Рубленый шрифт * Уменьшеннвй на 30% размер шрифта * Отступ от левой границы на 105 пикселов ------------*/ .sign { }
Файл task04.htm