Лабораторный практикум по курсу создание web-сайтов Учебно-методическое пособие
..pdfЛабораторная работа № 4 СОЗДАНИЕ ПРИМИТИВНОГО ИНТЕРНЕТ-МАГАЗИНА
С ИСПОЛЬЗОВАНИЕМ СЛОЕВ
Слой – это объект, позволяющий ориентировать контент в любой части веб-страницы.
Для создания примитивного интернет-магазина вам необходимо:
1.Создать главную страницу, на которой разместить заголовок в виде элемента таблицы, ниже – баннер с основным товаром.
2.Под баннером расположить 5 слоев («Вставка» – «Объекты макета» – «Слой АР»).
3.В каждом слое поместить изображение с товаром, чуть ниже – название товара и цену.
4.Название товара сделать гиперссылкой, которая открывает страничку
сописанием каждого товара.
5.Зарегистрироваться на бесплатном домене http://www.hostinger.ru/.
6.С помощью FTP-менеджера перенести всю структуру веб-сайта на хостинг. Это можно сделать через веб-интерфейс или, скачав программу
Filezilla portable.
Лабораторная работа № 5
СОЗДАНИЕ ОДНОСТРАНИЧНИКА – LANDING PAGE
Landing Page – это модный формат одностраничного сайта, в котором страницыпередвигаютсяпутемлистания, чтореализованоспомощьюслоев.
В программе Dreamweaver создать пустую страницу. С помощью пункта меню «Вставка» – «Объекты макета» – «Слой AP». Разместить первый слой, в его свойствах задать (Ширина – 100 %, ID – page1, высота– порядка 400–600 пикселей), далее разместить несколько таких слоев и для каждого задать свой ID – page2, page3… (не менее 5 слоев). В свойствах страниц CSS для каждой задать свой цвет. Далее наполнить каждую страницу контентом – текст, графика, некоторыеэлементытакжеможноразмещатьспомощьюдополнительныхслоев.
11
Лабораторная работа № 6 ВЫВОД ГРАФИКИ SVG
SVG – Scalable Vector Graphics (масштабируемая векторная графика), для ее вывода в HTML необходимо в теле веб-страницы указать область вывода графики SVG:
<!DOCTYPE html> <html>
<body>
<svg height="1000" width="1000"> размер полотна (высота, ширина)
Здесь теги вывода графики. </svg>
</body>
</html>
Вывод окружности:
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
Значение тегов:
cx, cy – позиция окружности по ширине и по высоте; r – радиус;
stroke – цвет рамки; stroke-width – толщина рамки; fill – заполнение цветом.
Вывод прямоугольника:
<rect x="200" y="200" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
Значение атрибутов:
x,y – положение левой верхней точки;
12
width, height – ширина, высота;
style=fill:rgb(0,0,255) – заливка прямоугольника синим цветом (r – red, g – green, b – blue, спектр каждого цвета от 0 до 255, 255 – максимальный);
stroke-width – толщина рамки прямоугольника; stroke:rgb – цвет рамки прямоугольника.
Ввод линии:
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
Значение атрибутов:
x1, y1 – точка начала линии; x2, y2 – точка конца линии;
stroke:rgb(255,0,0) – цвет линии (красный); stroke-width – толщина линии.
Финальный код выглядит примерно так:
<!DOCTYPE html> <html>
<body>
<svg height="1000" width="1000"> <line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
<rect x = "200" y = "200" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
</svg>
</body>
</html>
13
Вышеописанный код позволяет получить следующее изображение:
Рис. 5. Пример графики SVG
Необходимо на основе этих тэгов построить следующее изображение:
Рис. 6. Изображение, которое необходимо построить
14
Лабораторная работа № 7 ИСПОЛЬЗОВАНИЕ СКРИПТОВ НА ВЕБ-СТРАНИЦАХ
С помощью слоев АР начертить блоки-меню:
Рис. 7. Блоки-меню
Выделить каждый блок отдельно и в инспекторе тэгов установить курсор на событие – OnMouseMove (при перемещении мышью), нажать черный плюсик, выбрать подпункт «Эффекты» и для каждого элемента меню веб-страницы задать «Эффект тряска».
Рис. 8. Эффекты инспектора тегов
Далее сбоку сделать панель аналогичных блоков для новостного меню с эффектом «Высвечивание».
В качестве основной части – контента – начертить слой АР, на котором написать текст и вставить графику главной страницы. После этого его необходимо скопировать и вставить на том же месте так, чтобы каждый по-
15
следующий слой скрывал предыдущий. На каждом слое разместить свой контент. Далее в панели «Элементы АР», напротив последующих после главного слоев, поставить закрытый глаз, оставив открытый напротив слоев с блоками меню и слоем с контентом главной страницы:
Рис. 9. Элементы AP
Для каждого из полученных пунктов меню в инспекторе тегов добавить поведение по событию onClick – «Показать-скрыть элементы»:
Рис. 10. Показать-скрыть элементы в инспекторе тегов
Впоявившемся окне скрыть все контентные слои ненужных страниц
иотобразить нужную страницу, открываемую по данному пункту меню.
Врезультате при клике по каждому из пяти пунктов меню и 3 пунктам панели новостей будет сменяться основной – контентный – слой с содержимым.
16
Лабораторная работа № 8 JQUERY MOBILE
В разделе «Вставка» выбрать пункт JQuery Mobile:
Рис. 11. Раздел «Вставка»
Выбрать элемент «Страница» и поместить его на вашу веб-страницу:
Рис. 12. Страница JQuery Mobile
17
В результате получится следующее:
Рис. 13. Пример отображения страницы JQuery Mobile
Поместить в заголовок тему веб-сайта, в колонтитуле вывести ваши
ФИО.
Сделать веб-сайт из 5 страниц. На главной – в нижней части разместить элемент «Просмотр» в виде списка, где добавить 5 элементов. Организовать гиперссылки, ссылающиеся на 4 страницы. На каждой странице, помимо текста и графики, добавить элемент: «Сворачиваемый блок», в котором будут размещены реклама, дополнительная информация, рецепт, анонс и прочее.
18
Лабораторная работа № 9 ИСПОЛЬЗОВАНИЕ «НАБОРОВ ДАННЫХ»
Подготовить XML файл, содержащий новостную ленту. Для этого в программе Dreamweaver создать XML файл:
<?xml version="1.0" encoding="utf-8"?> <news>
<Mynew data = "12/01/2015"> <title>Первая новость</title>
<text>Эта новость порадовала воронежцев............</text> </Mynew>
<Mynew data = "13/01/2017"> <title>Вторая новость</title>
<text>Эта новость порадовала жителей Орла............</text> </Mynew>
<Mynew data = "15/11/2017"> <title>Третья новость</title>
<text>Эта новость порадовала жителей Орла............</text> </Mynew>
</news>
В атрибуте date указывается дата новости, title – ее заголовок, а text – содержимое.
Далее добавить Набор данных Spry:
19
Рис. 14. Набор данных Spry
20