Лабораторная работа №3. Применение каскадных таблиц стилей CSS

  1. Изменить с помощью каскадных таблиц стилей html-документ, созданный в лабораторной работе №2. Все элементы форматирования должны быть созданы средствами CSS. Использовать три способа определения каскадных таблиц стилей: связанные (связанные), внедренные (внутренние), встроенные (внешние). Продемонстрировать действие приоритетов при применении различных способов определения CSS. Например, определить различный цвет шрифта, во всех трех видах таблиц и посмотреть, какое из трех правил будет действовать.
  2. Создайте три варианта стилевого оформления (и соответственно три варианта стилевых таблиц) ориентированных на различные группы пользователей: для Ваших друзей (так, как нравится Вам), строгий деловой стиль (для потенциальных работодателей), стиль рекламы (навязчиво-яркий).
  3. Предусмотрите на сайте вариант для печати резюме. Эта страница должна иметь минимум элементов оформления, не должна содержать меню, а только текст резюме, ссылку для сохранения файла и ссылку на главную страницу.
  4. Поменяйте цвет фона на странице или в блоке (свойство background-color).
  5. Измените стандартные стили отображения основного контента и заголовков, в соответствии с выбранным дизайном. Цвет шрифта ‑ свойство color, свойство font дает возможность задать сразу шесть свойств шрифта: font-family, font-size, font-style, font-variant, font-weight, и line-heigh.
  6. Используя свойство letter-spacing, выведите разреженный текст, это акцентирует внимание на тексте.
  7. Свойство text-indent устанавливает величину отступа первой строки блока текста, используя это свойство, регулируйте характеристики красной строки абзаца.
  8. Свойство text-transform управляет регистром вывода символов текста. Для усиления значимости выведите фразу текста прописными буквами.
  9. Свойство word-spacing устанавливает величину пробельного символа или расстояние между словами в тексте. Используйте это свойство для изменения расстояний между словами.
  10. Используя свойство list-style-image, поставьте в качестве маркера списка рисунок (найти в Интернете).
  11. Регулируйте отступы от картинок, размещенных на странице.
  12. Для оформления ссылок используйте псевдоклассы гипертекстовых ссылок (:link, :visited, :hover, :active).
  13. При оформлении страниц используйте отступы между границей блока и границей элемента, в который помещен блок (свойство margin), отступы от границы блока до его содержимого (свойство padding). Обрамите любой из блочных тегов границей (свойства border, border-color, border-width и border-style).
  14. Измените табличный дизайн страниц на контейнерный. При разбиении странички на зоны пользуйтесь не таблицей, а тегами <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>

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

http://validator.w3.org/unicorn

  1. Проверьте сайт на кроссбраузерность (правильность отображения вашего сайта в различных браузерах).
  2. .Добавьте в свой сайт страницу, созданную на основе одного из стандартных шаблонов предоставляемых DreamWeaver.
  3. Познакомьтесь с ресурсом http://www.csszengarden.com/tr/russian/. На этом сайте наглядно демонстрируется то, что может быть достигнуто визуально посредством дизайна на основе CSS. На сайте собрано большое число вариантов дизайна. Содержимое контента не меняется, изменяется только стилевой файл и картинки. Код исходной html-страницы сайта и стилевой css-файл доступны для скачивания. Можно выбрать любой вариант дизайна из списка, загрузить его и просмотреть стилевой файл. На основе исходных файлов можно попытаться построить свой дизайн. Файлы примеров достаточно хорошо прокомментированы, так что даже новички в CSS смогут использовать их в качестве отправной точки.

Главная страница сайта:

Примеры дизайнов:

 

  1. Продемонстрируйте возможность использования готового кода. На одной из страничек сайта заголовок обрамите рамочкой с закругленными углами. Воспользуйтесь стилями приведенными в книге Романчика В.С. «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>

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

http://validator.w3.org/unicorn

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

<a href= “http://www.afn.by/”>

<ima stc= “http://www.afn.by/finances/ticket/”>

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