Задания

1. Создайте каскады стилей для какой-нибудь страницы сайта:

   1. Создайте файл стилевой таблицы в формате CSSс набором стилей для вашего сайта. Примените стилевую таблицу ко всем страницам вашего сайта.

   2. Для домашней страницы расширьте стиль, используя стилевые правила уровня документа. Постарайтесь добиться, чтобы стили документа частично перекрывали действие внешней стилевой таблицы.

   3. В некоторых тегах этого документа используйте встроенные стили. Добейтесь, чтобы встроенные стили частично перекрывали действие стилей уровня документа и внешней стилевой таблицы.

2. Максимально удалите из HTML кода всю визуальную разметку, перенеся ее во внешнюю CSS таблицу.

Занятие 6. Css – селекторы и свойства Упражнения

1. Для каждого элемента P, следующего послеH1 илиH2 установите следующее отображение буквиц: красный цвет и размер в 400% от основного шрифта.

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

3. Для рисунков, использующих навигационные карты, определите ряд стилевых правил. В частности, добейтесь появления видимой границы при наезде мышью на такой рисунок.

Задание к занятию

1. Применяя селекторы классов, задайте стилевое оформление содержания панели горячих ссылок:

   1. Назначьте элементам типов заголовки, абзацы и рисунки, относящимся к панели, класс note.Установите особый стиль, размер, цвет, выделяющий информацию панели от остального содержимого страницы.

   2. Назначьте некоторым информационным единицам дополнительно класс new. Установите стиль, который в конце (или в начале) каждого такого элемента будет размещать яркий блок выше линии основного текста с надписью NEW.

   3. Задайте для элементов панели вид просмотренных и не просмотренных ссылок. Определите для ссылок, на которые наезжает курсор стиль, фиксирующий внимание (изменение цвета, подчеркивание или мерцание).

2. Оформите текст основного информационного блока с помощью буквиц:

   1. Для первого (но только первого!) абзаца в информационном блоке (следует, в зависимости от выбранной вами структуры документа, например, за H1, IMG, или является первым в специальном блоке DIV) определите буквицу в 400%, красного цвета.

   2. Задайте обтекание буквицы, установите ей пунктирную границу

3. Вернитесь к таблицам, организующим верстку страниц сайта:

   1. Определите ширину таблицы в 1280 px. Явно задайте левое и центральное положение полосы документа на экране.

   2. Задайте размеры под заголовок и подвал.

   3. Добейтесь того, чтобы при слабом заполнении страницы нижняя граница подвала совпадала с нижней границей окна браузера.

Занятие 7. URL+HTTP

Упражнения

1. Скачайте OpenServer– портативную программную платформу для Веб-разработки. Установите ее на локальный носитель -USBфлеш диск (в директорию OpenServer).

2. Разместите в корневой директории локального веб сервера (OpenServer/domains/localhost) несколькоhtmlфайлов. Просмотрите их по HTTP протоколу через локальный веб сервер.

3. Откройте фрейм инструментов разработчика IE (F12)

   1. Рассмотрите содержание и структуру HTTP запроса к локальному веб серверу при запросе html файлов.

   2. Рассмотрите содержание и структуру HTTP ответа к локальному веб серверу при запросе html файлов.

   3. Проделайте то для HTTPзапросов и ответов при просмотре файлов изображений, предварительно разместив их в директории localhost, обслуживаемой локальным веб сервером.