Практическое занятие №10

Наименование: Форматирование текста средствами CSS

1. Цель: Научиться создавать правила установки стиля форматирования, выбора шрифта и задание цвета

2. Подготовка к занятию: по предложенной литературе повторить тему «Форматирование текста средствами CSS» и ответить на следующие вопросы:

2.1 Какое свойство применяется для задания определенного типа шрифта?

2.2 Как указать размер шрифта?

2.3 Что относится к декоративному оформлению текста?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»

3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.

3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 Создать html – страницу с заголовком h1 – Форматирование текста средствами CSS

В §1: Намек: добивается успеха только тот, кто старается

В h2: Предисловие

В §2: В CSS нет ничего сложного, к концу занятия вы научитесь изменять цвет текста, шрифт, размер. Научитесь управлять его положением на странице и выучите много других приемов форматирования, которые сделают вас настоящим профессионалом веб – дизайна.

В §3: Вам будет под силу отформатировать любой текст. И вы сделаете это так же просто, как в обычном текстовом редакторе.

Вы сможете заставить читать посетителя по буквам.

В §4: К примеру, задать «жирность» в 600 для данного абзаца средствами HTML просто невозможно.

В §5: Если из практической работы вам все понятно, то вы можете сразу перейти далее к практической работе № 11

В последнем абзаце сделать ссылкой практическая работа №9

5.2 В таблице CSS создать правила для html – страницы

Вариант 1

1. h1 – цвет фона сделать синего цвета

2. шрифт абзацев - Arial

3. стиль шрифта §1- italic

4. вид шрифта для h2 – small-caps

5. ширина шрифта для §4 – 600

6. размер шрифта для всех абзацев – 14 pt

7. отступы для всех абзацев – 25px

8. выравнивание h1 – по центру, §1 – по правому краю

9. декоративное оформление ссылки:

непосещенная – синяя, с нижним подчеркиванием;

посещенная – красная, зачеркнутая;

под указателем мыши – мигает;

Вариант 2

1. h1 – цвет фона сделать желтого цвета

2. шрифт абзацев - Verdana

3. стиль шрифта §1- oblique

4. вид шрифта для h2 – small-caps

5. ширина шрифта для §4 – 700

6. размер шрифта для всех абзацев – 16 pt

7. отступы для всех абзацев – 30 px

8. выравнивание h1 – по центру, §1 – по правому краю

9. декоративное оформление ссылки:

непосещенная – красная, с нижним подчеркиванием;

посещенная – зеленая, зачеркнутая;

под указателем мыши – мигает;

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

6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

7. Содержание отчета:

7.1 Наименование и цель работы

7.2 Код таблицы CSS

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе