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

Наименование: Оформление документа средствами CSS (часть 2)

1. Цель: Научиться создавать правила при оформлении веб – страниц средствами CSS. Формировать компетенции ОК 1, ОК 2, ОК 4, ОК 8, ОК 9; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5

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

2.1 Каким способом можно создать меню на веб - странице?

2.2 Как разбить текст на две колонки?

2.2 Какие правила применяются для создания тени и закругления рамок?

 

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

3.1 Шомас Е.А. Веб – дизайн, учебное пособие. Самара, КС ПГУТИ, 2014

3.2 https://html5book.ru/osnovy-html/ - Основы HTML

 

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

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

4.2 Браузеры

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

 

5. Задание:

5.1 Создать веб – страницу по образцу:

5.2 Применить к странице свойства CSS

 

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

6.1 На странице должно присутствовать два вида меню – вертикальное и горизонтальное. Меню выполнено в виде списка, пункты которого прописаны через ссылки, но к ним применяются правила, которые позволяют убрать маркер и подчеркивание у ссылок. Горизонтальное меню – все буквы должны быть прописными, шрифт в обоих случаях – Verdana.

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

6.3 Выполнить везде отступы, чтобы текст не прилипал к рамкам и был более читаемым

 

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

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

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

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

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

 

8. Контрольные вопросы:

8.1 Что такое блоковая модель? Из каких основных составляющих она строится?

8.2 Как изменить строчный элемент на блочный? Какое свойство при этом используется? Для чего это делается?

ПРИЛОЖЕНИЕ:

Любой тег включает в себя следующие составляющие:

- свойство margin (поля) – пустое место за пределами тега, которое отделяет один тег от другого;

- свойство border – граница определенного цвета, которая обрамляет тег;

- свойство padding (отступы) – пустое пространство внутри тега, которое отделяет содержимое тега от границы;

- само содержимое тега;

Свойство padding (значение по умолчанию = 0) позволяет задать отступы от границы тега до начала его содержимого.

- padding-left – левой границы тега;

- padding-right – правой границы тега;

- padding-top – верхней границы тега;

- padding-bottom – нижней границы тега;

Отступ задается числовым значением с указанием единицы измерения, как правило в px.

Свойство margin (значение по умолчанию = 0) задает внешний отступ до границы тега, т.е. позволяет отделить тег от других тегов на странице.

Свойство border – задает границу между внешними и внутренними отступами. Для свойства могут быть указаны значения через пробел толщина границы, ее тип и цвет. Например: border: 1px solid #fff;

Закругление границ

В современном дизайне часто используются закругленные границы. Их можно выполнить свойствами CSS. Для этого существует целый набор свойств:

-moz-border-radius: радиус; // для Firefox

-webkit-border-radius: радиус; // для Chrome и Safari

-border-radius: радиус; // для opera, iOS, Android

Тени

Верстальщики часто сталкиваются с задачей, когда вокруг определенного блока нужно создать тень. Тень добавляется точно таким способом, как и закругление рамок, только используются другие свойства:

-moz-box-shadow: 0px 3px 7px #02041c;

-webkit-box-shadow: 0px 3px 7px #02041c;

-box-shadow: 0px 3px 7px #02041c;

В значении этих свойств через пробел указывается следующее:

- сдвиг тени в пикселях по горизонтали;

- сдвиг тени в пикселях по вертикали;

- радиус размытия тени;

- цвет тени;

Свойство display – тип тега (значение по умолчанию inline). Свойство позволяет изменить тип любого тега либо вообще удалить его со страницы. С его помощью строчный тег можно сделать блочным и наоборот. Тип тега задается одним из следующих значений данного свойства:

- block – преобразует тег в блочный. (позволяет сделать так, чтобы теги span, a, li вели себя как блочные теги)

- inline – преобразуеттег в строчный, например сделать тег div строчным.

- inline-block – позволяет создать тег строчного типа, который поддерживает отдельные возможности блочных тегов, например можно будет задать ширину и высоту (width и height) для строчных тегов.

- inline – table – позволяет создать тег. Который будет вести себя как таблица, но при этом окажется строчного типа, т.е. его будет обтекать содержимое веб – страницы и другие теги.

- list – item – преобразует тег в элемент списка – в тег li, т.е. в блочный тег с маркеров слева от содержимого.

- none – полностью удаляет тег с веб – страницы

Свойство visibility по своему действию напоминает значение none свойства display. Оно также позволяет при необходимости скрыть содержимое тега, но место, которое занимает тег остается зарезервированным за скрытым тегом.