Лабораторная работа №3. Применение каскадных таблиц стилей CSS
- Изменить с помощью каскадных таблиц стилей html-документ, созданный в лабораторной работе №2. Все элементы форматирования должны быть созданы средствами 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>. Примеры контейнерного дизайна см. Романчик В.С. «Web – программирование Средства разработки клиентских приложений», ср. 94-95.
Пример 1. Двухколоночный контейнерный макет сайта с применением 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>
Пример 2. Трехколоночный контейнерный макет сайта с применением css.
| top | ||
| left-side | center | right-side |
| footer |
<html>
<head>
<style>
#left-side {
float:left;
width:200px;
}
#wrapper {
margin-left:200px;
background-color: yellow;
}
#right-side {
float:right;
width:200px;
}
#center {}
#footer {
clear:both;
}
</style>
</head>
<body>
<div id="top"> top
</div>
<div id="content">
<div id="left-side"> left-side </div>
<div id="wrapper">
<div id="right-side"> right-side </div>
<div id="center"> center </div>
</div>
</div>
<div id="footer"> footer
</div>
</body>
</html>
- Проверьте сайт на валидность.
http://validator.w3.org/unicorn
- Проверьте сайт на кроссбраузерность (правильность отображения вашего сайта в различных браузерах).
- .Добавьте в свой сайт страницу, созданную на основе одного из стандартных шаблонов предоставляемых DreamWeaver.
- Познакомьтесь с ресурсом http://www.csszengarden.com/tr/russian/. На этом сайте наглядно демонстрируется то, что может быть достигнуто визуально посредством дизайна на основе CSS. На сайте собрано большое число вариантов дизайна. Содержимое контента не меняется, изменяется только стилевой файл и картинки. Код исходной html-страницы сайта и стилевой css-файл доступны для скачивания. Можно выбрать любой вариант дизайна из списка, загрузить его и просмотреть стилевой файл. На основе исходных файлов можно попытаться построить свой дизайн. Файлы примеров достаточно хорошо прокомментированы, так что даже новички в CSS смогут использовать их в качестве отправной точки.
Главная страница сайта:
Примеры дизайнов:
- Продемонстрируйте возможность использования готового кода. На одной из страничек сайта заголовок обрамите рамочкой с закругленными углами. Воспользуйтесь стилями приведенными в книге Романчика В.С. «Web – программирование Средства разработки клиентских приложений», ср. 95.
Пример 3. Сглаженные закругленные углы без использования изображений.
<html>
<head>
<title>Сглаженные закругленные углы без использования изображений</title>
<style>
.b1, .b2, .b3, .b4, .b5,
.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,
.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,
.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {
height: 1px;
font-size: 1px;
overflow: hidden;
border-style: solid;
border-width: 0 1px;
display: block;
}
.b1 {
margin: 0 2px;
background: #EBEEF0;
border: none;
}
.b1 b {
margin: 0 1px;
background: #B8C3C8;
border-color: #CBD3D7;
}
.b2 {margin: 0 1px; border-color: #D6DCDF;}
.b2 b {border-color: #B8C3C8;}
.b2 i {border-color: #E4E8EA;}
.b2 q {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 b {border-color: #BCC6CB;}
.b3 i {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 b {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 b {border-color: #FAFBFB;}
.text {
border: 1px solid #B0BCC2;
border-width: 0 1px;
padding: 0 12px;
}
</style>
</head>
<body>
<div class="b1"><b></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b4"><b></b></div>
<div class="b5"><b></b></div>
<div class="text">
Здесь каждый угол состоит из пяти расположенных специальным образом пикселей, придающих углу закругление.
</div>
<div class="b5"><b></b></div>
<div class="b4"><b></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b1"><b></b></div>
</body>
</html>
- Проверьте сайт на валидность.
http://validator.w3.org/unicorn
- Проверьте сайт на кроссбраузерность (правильность отображения вашего сайта в различных браузерах).
- Информеры. Погода, афиша, курсы валют, гороскоп: например, на afn.by
<a href= “http://www.afn.by/”>
<ima stc= “http://www.afn.by/finances/ticket/”>
border=”0”/> </a> – включение инфорера