Лабораторная работа 3 (4часа). Применение каскадных таблиц стилей css
Познакомьтесь с ресурсом http://www.csszengarden.com/tr/russian/. На этом сайте демонстрируется дизайн на основе CSS. На сайте собрано большое число вариантов дизайна. Код исходной html-страницы сайта и стилевой css-файл доступны для скачивания. Можно выбрать любой вариант дизайна из списка, загрузить его и просмотреть стилевой файл. На основе исходных файлов можно попытаться построить свой дизайн. Файлы примеров достаточно хорошо прокомментированы.
Главная страница сайта:
Изменить с помощью каскадных таблиц стилей html-документ, созданный в предыдущей лабораторной работе. Все элементы форматирования должны быть созданы средствами CSS. Использовать три способа определения каскадных таблиц стилей: связанные (связанные), внедренные (внутренние), встроенные (внешние). Продемонстрировать действие приоритетов при применении различных способов определения CSS. Например, определить различный цвет шрифта, во всех трех видах таблиц и посмотреть, какое из трех правил будет действовать.
Создать варианты стилевого оформления сайта (стилевых таблиц), ориентированные на различные группы пользователей: для друзей, деловой стиль, стиль рекламы (навязчиво-яркий), детский (веселые чистые цвета), образовательный стиль.
Предусмотрите на сайте вариант для страницы резюме. Эта страница должна иметь минимум элементов оформления, не должна содержать меню, а только текст резюме, фото, ссылку для сохранения файла и ссылку на главную страницу.
Поменяйте цвет фона на странице или в блоке (свойство background-color).
Измените стандартные стили отображения основного контента и заголовков, в соответствии с выбранным дизайном. Цвет шрифта ‑ свойство color, свойство font дает возможность задать сразу шесть свойств шрифта: font-family, font-size, font-style, font-variant, font-weight, и line-heigh.
Используя свойство letter-spacing, выведите разреженный текст, это акцентирует внимание на тексте.
Свойство text-indent устанавливает величину отступа первой строки блока текста, используя это свойство, регулируйте характеристики красной строки абзаца.
Свойство text-transform управляет регистром вывода символов текста. Для усиления значимости выведите фразу текста прописными буквами.
Свойство word-spacing устанавливает величину пробельного символа или расстояние между словами в тексте. Используйте это свойство для изменения расстояний между словами.
Используя свойство list-style-image, поставьте в качестве маркера списка рисунок (найти в Интернет).
Регулируйте отступы от картинок, размещенных на странице.
Для оформления ссылок используйте псевдоклассы гипертекстовых ссылок (:link, :visited, :hover, :active).
При оформлении страниц используйте отступы между границей блока и границей элемента, в который помещен блок (свойство margin), отступы от границы блока до его содержимого (свойство padding). Обрамите любой из блочных тегов границей (свойства border, border-color, border-width и border-style).
Измените табличный дизайн страниц на контейнерный. При разбиении странички на зоны пользуйтесь не таблицей, а тегами <div>.
.Добавьте в свой сайт страницу, созданную на основе одного из стандартных шаблонов предоставляемых DreamWeaver.
Продемонстрируйте возможность использования готового кода CSS.
Двухколоночный контейнерный макет сайта.
top |
|
left-side |
center |
footer |
|
<html> <head>
<style>
#left-side { float:left;
width:200px;
}
#center { margin-left:200px;
}
#footer {
clear:both;
}
</style>
</head>
<body>
<div id="top"> </div>
<div id="content">
<div id="left-side"></div>
<div id="center"></div>
</div>
<div id="footer"> </div>
</body></html>