Методические указания к практической работе № 5

Тема: Язык гипертекстовой разметки HTML. Разработка статических Web-страниц.

Цель работы:

Формирование умений:

· работы с приложением NotePad для написания HTML-кода;

· разработки Web-страниц, содержащих таблицы;

Порядок выполнения работы.

l Использовать презентации Лекция_3_4.ppt и HTML_1.ppt для выборки нужных табличных тегов.

 

Задание 1.

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

Методические указания к практической работе № 6

Тема: Язык гипертекстовой разметки HTML. Разработка статических Web-страниц.

Цель работы:

Формирование умений:

· разработки Web-страниц, содержащих таблицы;

Порядок выполнения работы.

1. Выполнить самостоятельную работу по вариантам (Приложение 1)

Методические указания к практической работе № 7

Тема: Язык гипертекстовой разметки HTML. Разработка статических Web-страниц с использованием фильтров и псевдоэлементов. Основы построения CSS – стилевых описаний.

Цель работы:

Формирование умений:

· работы с приложением NotePad для написания HTML-кода;

· разработки Web-страниц с использованием текстовых и графических фильтров;

· разработки Web-страниц с использованием псевдоэлементов (стили оформления);

Порядок выполнения работы.

 

l Использовать презентацию Фильтры.ppt для выборки нужных тегов.

Задание 1

1. Создать с помощью фильтра (Shadow) эффект отбрасывающей на страницу тень буквы Ж (как на образце):

 

Сохраните полученную букву как изображение с расширением.gif

2. Встройте изображение буквы Ж из файла формата.gif как буквицу в текст сказки (см рис.).

 

 

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

 

 

4. Представьте на странице различные представления графического изображения (как на образце) (используя различные фильтры):

• Обычное изображение
• Создание эффекта освещения источником света
• Симметрично-повернутое вокруг вертикальной оси
• Инвертированное изображение
• Изображение с удаленной цветовой гаммой в серых тонах
• Прозрачное изображение
• Рентгеновский эффект

 

 

Задание 2

1. Оформите первую букву того же текста как псевдоэлемент (см. рис.)

 

 

1. Определите стили для написания старой и новой цены товара. Старая цена – серого цвета, перечеркнутая. Новая цена – красного цвета, на 50% более крупного кегля, чем остальной текст. Напишите список товаров со старыми и новыми ценами.

 

 

1. Определите два стиля.

В первом стиле:

• Буквы коричневые по светло-серому фону;
• Расстояние между содержимым и рамкой элемента – 0,5см
• Текст выравнивается по левому и правому краям

Во втором стиле:

• Фон бирюзовый
• Расстояние между содержимым и рамкой -0,5 см
• Поля слева и справа – 1см
• Рубленый шрифт

Подготовьте документ с двумя разделами (текст любой). Первый раздел определяется первым стилем, второй – вторым. Второй раздел должен быть вложен в первый, чтобы было видно наследование. Какие стилевые указания наследуются во втором разделе, а какие нет?

1. Подготовьте стиль абзаца «подложка»(.ground) и стиль «надпись» (.poster). Используя созданные стили, создайте страницу с надписью поверх подложки. Подложка пишется очень крупными буквами мягкого светло-серого цвета. Надпись – коричневыми буквами обычного размера.
2. Создайте страницу в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была ниже предыдущей (как на схеме).
3. Используя позиционирование, создайте объемную надпись (свою фамилию) из обычного текста (без картинок) (См. образец).

 

1. Используя стили, сделайте страницу, в которой текст выводится в две колонки (как в газете). Таблицы при этом не используются.
2. Создайте внешний файл с описанием стиля и используйте его для оформления страницы.

 

Приложение 1

Вариант 1

 

 

СПИСОК ПК

Наименование компьютера	Количество	Цена	Стоимость (руб.)
В рублях	В долларах
– Vectra – Vist 1000A – K6-2-300 – Athlon 650 – P3-667E		10 000	322,58	40 000
	11 000	354,84	33 000
	10 214	329,48	40 856
	13 558	437,35	40 674
	15 411	497,13	92 466
Итого		60 183	1941,38	246 996

 

 

 

Вариант 2

 

 

Подписка (фирма Печкин и К^о)
– Условия подписки – Порядок оформления – Будьте внимательны – Продолжение подписки – Отказы партнера	Партнер бесплатно доставит каждый выпуск в ваш офис
Заполните бланк заказа. Передайте его партнеру нашей фирмы
Подписка оформляется только через партнеров нашей фирмы. Не отсылайте бланк заказа в другую фирму!
По окончанию срока подписки, Вы можете оформить с партнером нашей фирмы договор на поставку нашей продукции
Об отказе партнера делать бесплатную доставку сообщите в нашу фирму по телефону 22-33-44 или по E-mail [e-mail]

 

 

 

 

Вариант 3