Задание к занятию 3. Создание сайта

1. С помощью гиперссылок создайте из подготовленных документов сайт. Для этого с помощью тега A создайте гипертекстовые связи между подготовленными документами. Обратите внимание, что в сайте не должно быть «тупиковых» страниц, а логика переходов должна быть интуитивно понятна пользователю.

2. Вставьте на сайт изображения товаров. С помощью атрибута ALT создайте ярлычки изображений с названиями товаров.

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

Занятие 4. Таблицы и фреймы Упражнения к занятию 4

1. Создайте HTMLдокумент с таблицей товаров. Определите следующие столбцы: артикул, название товара, цена. Вставьте заголовок таблицы и заголовки столбцов. Введите данные по трем товарам. Задайте рамку таблицы.

2. Создайте HTMLдокумент с таблицей, организующей верстку. Задайте ячейку заголовка, подвала, информационных блоков. Задайте фоновые цвета и картинки для различных блоков документа. Сделайте границы таблицы невидимыми.

3. Разделите окно браузера на два фрейма, расположенных горизонтально (в одной строке). Загрузите в левый фрейм содержание книги. Используйте правый фрейм для отображения частей документа.

4. Создайте в документе плавающий фрейм. Подгружайте в него изображения из списка, организованного в основном документе.

Задание к занятию 4. Таблицы и фреймы

1. Выполните верстку страниц сайта с помощью таблиц. Пользуйтесь следующими правилами:

   1. На каждой странице присутствуют заголовок (header). Заголовок имеет единый дизайн для всех страниц сайта, кроме, возможно, «домашней». Заголовок обеспечивает единообразный переход на домашнюю страницу с любой другой страницы сайта.

   2. На каждой странице присутствуют подвал (footer). Разместите в подвале логотип и название фирмы – разработчика сайта и копирайт владельца сайта.

   3. Слева организована навигационная панель, задающая навигацию по сайту

   4. Задайте оформление фоновыми цветами и рисунками, скройте границы.

2. Вставьте на страницу «Контакты» плавающий фрейм. Содержимое фрейма должно загружаться по одной из двух ссылок: «как нас найти в городе» и «как нас найти в здании». Первая загружает карту Google, на которой изображен план части города, где расположен магазин. Вторая – план здания (нарисуйте план здания в одном из графических редакторов). Наложите на план здания навигационную карту, обеспечивающую комментарий по различным участкам плана в соседнем плавающем фрейме. Например, «у двери позвоните в звонок три раза».

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

1. Создайте внешнюю таблицу стилей и примените ее к тестовой htmlстранице.

2. Задавайте различные значение изученных свойств к элементам документа и просмотрите их влияние на внешний вид страницы.

3. Задайте для документа стили уровня документа, а для некоторых элементов и внутренние стили, так, чтобы CSSправила каскадировались.

4. С помощью инструментов разработчика встроенных в IE(F12) рассмотрите каскады стилей для различных элементов документа. Посмотрите различные опции инструментария в отношении стилей, в том числе блокировку правил.