
- •Web программирование
- •231000.62 – “Программная инженерия”
- •Содержание
- •Введение
- •Дисциплина web программирование имеет целью обучить студентов разработке web - приложений, дать студентам теоретические знания и практические навыки в проектировании и реализации web-сайтов.
- •1. Протоколы и модели Internet-взаимодействия
- •1.1. Протоколы
- •1.2. Модель клиент-сервер
- •1.3. Формат описания адреса
- •2. Статическое web – программирование
- •2.1. Структура html-документа
- •2.2. Работа с текстом
- •2.3. Работа с таблицами
- •2.4. Работа с формами
- •2.5. Работа с фреймами
- •3. Каскадные таблицы стилей (css)
- •3.1. Синтаксис css
- •3.2. Использование css
- •3.3. Свойства css
- •4. Язык xml
- •4.1. Структура xml-документа
- •4.2. Правила создания xml-документа
- •4.3. Конструкции языка xml
- •4.3.1. Элементы данных
- •4.3.2. Комментарии
- •4.3.3. Атрибуты
- •4.3.4. Cпециальные символы
- •4.3.5. Директивы анализатора
- •4.3.6. Cdata
- •5. JavaScript сценарии
- •5.1. Клиентские и серверные сценарии
- •5.2. Операторы и функции JavaScript
- •5.3. Встроенные объекты JavaScript
- •5.4. Динамический html
- •5.5. Ajax технология
- •6. Работа с субд MySql
- •6.1. Особенности
- •6.2. Основные команды
- •7. Php. Динамическое web-программирование
- •7.1. Особенности
- •7.2. Php и объектно-ориентированное программирование
- •8. Проектирование полнофункциональных web-сайтов
- •8.1. Виды сайтов
- •8.2. Этапы проектирования web-сайтов
- •9. Задания для выполнения лабораторных работ
- •Последовательность выполнения задания
- •9.2. Задания для выполнения лабораторной работы №2 «Разработка сайта, содержащего карту-изображение с заданными активными зонами»
- •Варианты
- •Последовательность выполнения задания
- •9.3. Задания для выполнения лабораторной работы №3 «Разработка сайта, содержащего таблицы»
- •Варианты
- •9.4. Задания для выполнения лабораторной работы №4 «Разработка сайта “Электронный тест проверки знаний студентов изучаемых дисциплин”»
- •Варианты
- •Последовательность выполнения задания
- •9.5. Задания для выполнения лабораторной работы №5 «Разработка сайта с динамическими эффектами»
- •Варианты
- •Последовательность выполнения задания
- •9.6. Задания для выполнения лабораторной работы №6 «JavaScript. Горизонтальное и вертикальное меню»
- •Варианты
- •Последовательность выполнения задания
- •2.1 Горизонтальное меню
- •2.2 Вертикальное выпадающее меню
- •2.3 Вертикальное раскрывающееся меню
- •9.7. Задания для выполнения лабораторной работы №7
- •2. Ход работы
- •9.8. Задания для выполнения лабораторной работы №8 «Динамическая поддержка выбора значений из предлагаемого списка»
- •Варианты
- •Последовательность выполнения задания
- •9.9. Задания для выполнения лабораторной работы№9 «MySql. Проектирование базы данных и обеспечение прав доступа»
- •Варианты
- •Последовательность выполнения задания
- •9.10. Задания для выполнения лабораторной работы№10 «Разработка интернет-магазина»
- •Варианты
- •Последовательность выполнения задания
- •10. Контрольная работа
- •10.1. Назначение, цели и задачи контрольной работы
- •10.2. Требования к контрольной работе
- •10.3. Варианты заданий курсовой работы
- •11. Пример программы «Создание динамического эффекта» к выполнению лабораторной работы №5 «Разработка сайта с динамическими эффектами»
- •11.1. Плавное появление и исчезновение текста
- •11.2. Текст, движущийся на наблюдателя
- •11.3. Создание бегущих строк
- •11.4. Волнообразнодвижущийся текст
- •10.5. Текст, прилетающий по частям
- •10.6. Имитация движения текста по кругу в 3 d пространстве
- •10.7. Движение фонового рисунка страницы («летящие звезды», «эффект фейерверка», «падающий снег», «часы со стрелками»)
- •Заключение
- •Список литературных первоисточников
- •231000.62 – «Программная инженерия»
3.3. Свойства css
Свойства CSSпозволяют управлять фоном, отображением текста, шрифтами, обрамлением, списками, позиционированием, определять границы, размеры области заполнения, отображение строк и тестовых блоков.
Свойства CSSдля управления фоном позволяют разработчику задавать цвет фона и фоновые изображения, а также управлять размещением фоновых изображений. Для создания фона документа используются свойства:
- background-color– устанавливает цвет фона для выбранных элементов. Например, .highlighted{background-color:yellow}.
- background-image– задает фоновое изображение для выбранных элементов. Например, .flowery{background-image:url(flowers.gif);}.
- background-position– позиционирует фоновое изображение.
- background-repeat– определяет, должно ли повторяться фоновое изображение для указанного элемента.
- background-attachment– указывает, должно ли фоновое изображение перемещаться вместе с элементом или оставаться фиксированным. Например,BODY{background-attachment:fixed} /5/.
4. Язык xml
XML (Extensible Markup Language) - язык разметки, описывающий класс объектов данных, называемых XML- документами. ЯзыкXMLиспользуется в качестве средства для описания грамматики других языков и контроля за правильностью составления документов /6/.
В отличие от HTMLязыкXMLпозволяет
1. Создавать собственные элементы.
2. Присваивать имена по своему выбору.
3. Представлять документы любого типа.
4. Сортировать, фильтровать и выполнять поиск информации.
5. Представлять информацию в структурированном (иерархическом) виде /7/.
4.1. Структура xml-документа
Структура XMLдокумента включает заголовок, секциюDOCTYPE, телоXMLдокумента. В заголовке описывается версия и кодировка. В секцииDOCTYPEописываются сущности. Сущность - константа, используемая в теле XML-документа для сокращения записи и лёгкой сопровождаемости. В телеXMLдокумента в отличии от HTML, Вы сами придумываете названия элементов. В XML очень строгий синтаксис, то есть не должно быть незакрывающих дескрипторов или пропущенных кавычек в значениях атрибутов. В листинге 2.7 приведен примерXMLдокумента.
Листинг 2.7 Пример XMLдокумента.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE shop [ <!ENTITY n "Ноутбук"> <!ENTITY g "Игра"> ]> <shop id="1"> <notebooks> <prod>&n; IBM Lenovo V570</prod> <prod>&n; DELL Inspiron N5010</prod> </notebooks> <games> <prod>&g; Готика 2</prod> <prod>&g; Might & Magic 6</prod> </games> </shop>
Существует 5видов связей:
1. Родитель. Родителем является элемент, который находится ровно на1уровень выше.Например, для элемента "notebooks" родителем является "shop".
2. Дочерний элемент. Дочерним является элемент, который находится ровно на1уровень ниже и находится внутри заданного элемента. Например, дочерними элементами "shop" являются "notebooks" и "games".
3. Предок. Предком является тот элемент для заданного, который находится на более, чем1уровень выше. Например, для элемента "prod" предком является "shop".
4. Потомок. Аналогично дочернему элементу, но только элементы должны быть ниже1-гоуровня вложенности в заданный элемент. Например, для "shop" потомком является "prod".
5. Брат. Элемент называется братом другому элементу, если он находится на том же уровне, что и другой. Помимо одного уровня требуется и наличие общего родителя. Например, элементы "notebooks" и "games" являются братьями /8/.