Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
web.doc
Скачиваний:
13
Добавлен:
12.03.2016
Размер:
1.99 Mб
Скачать

Проектное задание

Разработайте Web-страницы своей студенческой группы с использованием языка разметки HTML 4.01. Общая страница или страницы группы должны содержать гиперссылки на персональные страницы всех студентов вашей группы.

Тест рубежного контроля №1

Тест содержит 5 заданий; даны три варианта ответа на вопрос, из которых необходимо выбрать один верный. На выполнение каждого задания отводится 3 минуты. Тест оценивается по 5-балльной системе: отлично – 5 правильных ответов; хорошо – 4 правильных ответа; удовлетворительно – 3 правильных ответа; неудовлетворительно – менее 3 правильных ответов.

1. Какой тэг используется для сохранения оригинального форматирования текста?

  1. <DIV>

  2. <PRE>

  3. <P>

2. Чем отличаются тэги <DIV> и <SPAN>?

  1. Оба являются тэгами уровня блока

  2. Первый используется для сохранения предварительного форматирования текста

  3. <DIV> является тэгом уровня блока, а <SPAN> - последовательным тэгом

3. Какой тэг используется для перехода на другую строку?

  1. <WRAP>

  2. <TR>

  3. <BR>

4. В чем состоит различие тэгов <TD> и <TH>?

  1. Тэг <TH> применяется для создания строки таблицы, а тэг <TD> - для создания ячеек

  2. Разным отображением содержимого этих тэгов на экране

  3. Ничем

5. С помощью какого тэга формируются ссылки в языке HTML?

  1. <A>

  2. <IMG>

  3. <REF>

Бланк ответов

1

2

3

1

2

3

4

5

МОДУЛЬ 2

Комплексная цель: изучение каскадных таблиц стилей CSS на основе последней спецификации Консорциума W3C - 2.1 и их практическому применению при построении Web-сайтов.

Краткое изложение программного материала: в модуле представлена теория каскадных таблиц стилей, рассмотрены наиболее часто используемые свойства в правилах определения стилей и их применение. Обсуждаются способы связывания HTML-документа и таблицы стилей, вводятся понятия группирования, наследования, селекторов, псевдоклассов, блоковых элементов, встроенных элементов, визуального форматирования. Представлены свойства для представления текста, визуальных эффектов, автоматической нумерации и списков, цвета и фона, шрифтов, таблиц

Содержание модуля 2

2. Теория css

2.1 Встраивание таблиц стилей в документ

Для управления форматированием HTML-документа можно использовать несколько таблиц стилей, при этом браузер определяет приоритетность применения таблиц. Возникает своего рода «каскад» таблиц, что определяет название технологии CSS – Cascade Style Sheets (Каскадные таблицы стилей).

Каждое правило каскадных таблиц стилей состоит из селектора и определения. Селектор указывает на тэг, который нужно отформатировать в соответствии с определением. В правиле стилей определение включает в себя свойство и его значение, разделенные знаком двоеточия.

В этом разделе рассматриваются основные свойства в правилах определения стилей CSS2.

2.2 Блоковые элементы

В модели форматирования каскадных таблиц стилей каждый элемент HTML представлен вложенными прямоугольниками. Самым внутренним прямоугольником является блок содержимого элемента. Прямоугольник содержимого окружает блок отступа. Следующим располагается блок границы. Самым внешним прямоугольником является блок поля, который всегда прозрачный. Все указанные блоки составляют блок форматирования, тоесть видимое в окне браузера изображение элемента HTML.

Поле определяет расстояние до границ блоков окружающих элементов. Отступ задает интервал между содержимым элемента и его границей. Размеры элемента HTML определяются шириной и высотой блока содержимого.

margin-top

Указывает размер верхнего поля блока. По умолчанию значением данного свойства является 0. Отметим, что используемое в примере обозначение em – относительная единица измерения, масштаб которой изменяется в зависимости от окружения. Единица измерения em относится к размеру шрифта элемента. В данном примере размер верхнего поля в два раза больше размера шрифта в родительском элементе h1.

Пример:

h1 {margin-top: 2em}

margin-bottom

Определяет размер нижнего поля блока. По умолчанию значением данного свойства является 0.

Пример:

h1 {margin-bottom: 2em}

margin-left

Задает размер левого поля блока. По умолчанию значением данного свойства является 0.

Пример:

h1 {margin-left: 2em}

margin-right

Указывает размер правого поля блока. По умолчанию значением данного свойства является 0.

Пример:

h1 {margin-right: 2em}

margin

Определяет размеры всех полей блока. Если значение свойства одно, то значение применяется ко всем полям блока. В случае двух значений первое задает верхнее и нижнее поля, а второе – левое и правое поля. При указании четырех значений они применяются к верхнему, правому, нижнему и левому полям.

Пример:

h1 {margin: 2em}

padding-top

Задает размер верхнего отступа блока. По умолчанию значением данного свойства является 0.

Пример:

h1 {padding-top: 1em}

padding-bottom

Указывает размер нижнего отступа блока. По умолчанию значением данного свойства является 0.

Пример:

h1 {padding-bottom: 1em}

padding-left

Определяет размер левого отступа блока. По умолчанию значением данного свойства является 0.

Пример:

h1 {padding-left: 1em}

padding-right

Задает размер правого отступа блока. По умолчанию значением данного свойства является 0.

Пример:

h1 {padding-right: 1em}

padding

Определяет размеры всех отступов блока. Если значение свойства одно, то значение применяется ко всем отступам блока. В случае двух значений первое задает верхний и нижний отступы, а второе – левый и правый отступы. При указании четырех значений они применяются к верхнему, правому, нижнему и левому отступам.

Пример:

h1 {padding: 1em}

border-top-width

Задает размер верхней границы блока. Значением свойства могут быть thin (Тонкий), medium (Средний), thick (Толстый) и явная величина. По умолчанию значением данного свойства является средняя толщина границы.

Пример:

h1 {border-top-width: thin}

border-bottom-width

Определяет размер нижней границы блока. По умолчанию значением данного свойства является средняя толщина границы.

Пример:

h1 {border-bottom-width: thin}

border-left-width

Указывает размер левой границы блока. По умолчанию значением данного свойства является средняя толщина границы.

Пример:

h1 {border-left-width: thin}

border-right-width

Задает размер правой границы блока. По умолчанию значением данного свойства является средняя толщина границы.

Пример:

h1 {border-right-width: thin}

border-width

Определяет размеры всех границ блока. Если значение свойства одно, то значение применяется ко всем границам блока. В случае двух значений первое задает верхнюю и нижнюю границы, а второе – левую и правую границы. При указании четырех значений они применяются к верхней, правой, нижней и левой границам.

Пример:

h1 {border-width: 1em}

border-top-color

Указывает цвет верхней границы блока.

Пример:

p {border-top-color: black}

border-bottom-color

Задает цвет нижней границы блока.

Пример:

p {border-bottom-color: white}

border-left-color

Определяет цвет левой границы блока.

Пример:

p {border-left-color: blue}

border-right-color

Указывает цвет правой границы блока.

Пример:

p {border-right-color: red}

border-color

Определяет цвета всех границ блока. Если значение свойства одно, то значение применяется ко всем границам блока. В случае двух значений первое задает цвета верхней и нижней границы, а второе – цвета левой и правой границ. При указании четырех значений они применяются к верхнему, правому, нижнему и левому границам.

Пример:

p {border-color: blue}

border-top-style

Указывает стиль верхней границы блока. Значением данного свойства могут быть:

- none – граница отсутствует;

- hidden – граница скрыта;

- dotted – граница отображается пунктирной линией;

- dashed – граница выводится штрих-пунктирной линией;

- solid – граница отображается сплошной линией;

- double – граница отображается двумя непрерывными линиями;

- groove – граница отображается вдавленной линией;

- ridge – граница выводится выпуклой линией;

- inset – блок представляется вдавленным;

- outset – блок отображается выпуклым.

Пример:

p {border-top-style: solid}

border-bottom-style

Задает стиль нижней границы блока.

Пример:

p {border-bottom-style: solid}

border-left-style

Определяет стиль левой границы блока.

Пример:

p {border-left-style: solid}

border-right-style

Указывает стиль правой границы блока.

Пример:

p {border-right-style: solid}

border-style

Определяет стили всех границ блока. Если значение свойства одно, то значение применяется ко всем границам блока. В случае двух значений первое задает стили верхней и нижней границы, а второе – стили левой и правой границ. При указании четырех значений они применяются к верхнему, правому, нижнему и левому границам.

Пример:

p {border-style: solid}

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]