Практическое занятие № 14 Разработка web-сайта. Слои в css
Цель работы: знакомство со слоями стилей CSS, создание страниц со слоями.
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3
Теоретические сведения
Создавая блок в CSS, всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным.
Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.
За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.
З
адание
1. Рассмотрим пример,
отображающий из карт знаменитую
комбинацию Royal Flash (см. рисунок).
Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:
.desatka_buba {position: absolute;left: 200px;top: 200px;z-index: 1;} .valet_buba {position: absolute;left: 215px;top: 215px;z-index: 2;} .dama_buba {position: absolute;left: 230px;top: 230px;z-index: 3;} .korol_buba {position: absolute;left: 245px;top: 245px;z-index: 4;} .tuz_bubna {position: absolute;left: 260px;top: 260px;z-index: 5;}
Ну а в html коде, просто присваиваете рисункам соответствующие стили, типа:
<img src="10buba.gif" class="10_buba"> и так далее...
<html> |
|
|
<head> |
|
<META NAME="ROBOTS" CONTENT="NOINDEX"> |
|
<title>Слои</title> |
|
<link href="style24.css" rel="stylesheet" type="text/css"> |
|
</head> |
|
<body> |
|
<h1>ROYAL FLUSH - СУПЕР КОМБИНАЦИЯ!!!</h1> |
|
<p><img src="../../img_uchebniki/valet_buba.gif" width="70" height="96" class="valet_buba"> <img src="../../img_uchebniki/tuz_buba.gif" width="70" height="96" class="tuz_bubna"> <img src="../../img_uchebniki/korol_buba.gif" width="70" height="96" class="korol_buba"> <img src="../../img_uchebniki/dama_buba.gif" width="70" height="96" class="dama_buba"> <img src="../../img_uchebniki/10buba.gif" width="70" height="96" class="desatka_buba"></p> |
|
</body> |
</html> |
|
Задание 2. По образцу задания 1 создайте свой пример использования слоев в веб-страницах
Практическое занятие № 15 Разработка web-сайта. Планирование и разработка web-сайта
Цель работы: Закрепление полученных навыков планирования, создания и редактирования Web-сайтов.
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3
Задание: Разработайте проект web-сайта для одной из перечисленных ниже фирм:
Рекламное агентство.
Магазин канцтоваров.
Мебельная фабрика.
Консалтинговое агентство.
Издательский дом.
Туристическое агентство.
Гостиничный комплекс.
Строительная компания.
Образовательное учреждение
Web-сайт должен состоять не менее чем из шести страниц и представлять следующую информацию: название фирмы, общую краткую информацию о фирме, перечень продуктов/услуг, краткие отзывы о вашей деятельности, список крупнейших клиентов со ссылками на их Web-сайты.
Проект Web-сайта должен отвечать следующим требованиям: четкость формулировок, структурированность материалов, единство стиля, иметь собственное лицо.
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 16
Разработка web-сайта. Тестирование web-сайта
Цель работы: Закрепление полученных навыков тестирования Web-сайтов.
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3
Задание: Отладить и протестировать web-сайт, спроектрованного и разработанного на предыдущем практическом занятии
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 17
Создание JavaScript-функций
Цель работы: Получение навыков использования JavaScript-функций в web-странице.
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3
ЗАДАНИЕ:
Создайте web-страницу, которая отражает сведения о плоских геометрических фигурах (не менее трех фигур: рисунок, формула вычисления площади) и напишите сценарий, который будет рассчитывать площадь фигуры по введенным пользователем данным.