Лабораторная работа №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 устанавливает величину пробельного символа или расстояние между словами в тексте. Используйте это свойство для изменения расстояний между словами.
Используя свойство l ist-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>

</div>

</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="right-side"> right-side </div>

<div id="center"> center </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>

</body>

</html>

Проверьте сайт на валидность.

http://validator.w3.org/unicorn

Проверьте сайт на кроссбраузерность (правильность отображения вашего сайта в различных браузерах).
Информеры. Погода, афиша, курсы валют, гороскоп: например, на afn.by

border=”0”/> </a> – включение инфорера

Баннеры.
Разместите сайт на любом бесплатном хостинге.