- •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. Каскадные таблицы стилей (css)
Стиль определяет особенность форматирования и отображения элементов веб-страниц. Стили HTML-,XHTML- иXML-документов задаются с помощью каскадных листов стилей (CSS).
CSSпозволяют:
1. Создать файл, содержащий листы стилей и ссылаться на него из всех HTML-документов.
2. Осуществить контроль над шрифтами, цветом фона и другими характеристиками, влияющими на отображение документа.
3. Быстро и легко изменять внешний вид страницы.
4. Уменьшить время загрузки документов.
3.1. Синтаксис css
Каскадные листы стилей состоят из правил, отображающих особенности отображения элементов web-страниц. Правило состоит из двух частей: селектора и декларации. Селектор определяет элемент, на который воздействует правило. Декларация содержит инструкции о том, как должен быть обработан элемент, свойство и значение. Правило записывается следующим образом: Селектор{свойство: значение}.
Селектор можно рассматривать как обозначение дескриптора, к которому применяется правило, а свойство – как атрибут, который необходимо изменить. Свойство и его значение помещаются в фигурные скобки и разделяются двоеточчием.
Формат записи стилевых правил CSSпохож на табличное представление данных. Заголовок таблицы напоминает описание элемента, класса или идентификатора стиля, в качестве ячеек и рядов таблицы выступают свойства и значения стилей.
В листинге 2.5 приведен пример записи CSS.
Листинг 2.5 Формат записи стилевых правил CSS.
A.menu:link
{
COLOR: #c2ala0;
FONT-FAMILY: Arial;
FONT-SIZE: 14px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
При использовании стилей в коде необходимо включить в заголовок документа МЕТА-определение: <METAhttp-equiv=Content-Style-Typecontent=”text/css”>
Стили предоставляют разработчику максимальный уровень контроля над особенностями отображения веб-страниц /5/.
3.2. Использование css
Существуют четыре варианта использования листов стилей в HTML-документе: встраивание, подключение, связывание и импорт.
Встраиваемые стили определяются в HTML-теге и оказывают влияние только на этот тег.
Подключаемые (внутренние) стили применяются ко всей веб-странице. Для этого служит тег <STYLE>, помещаемый в заголовокHTML-документа.
Связываемые (внешние) стили применяются к документам всего web-сайта.
Импортируемые стили используют импорт в сочетании с другими методами определения стилей. В листинге 2.6 приведен пример импорта внешних стилей.
Листинг 2.6 Импорт внешних стилей.
<HTML><HEAD><TITLE> Пример импорта внешних стилей </TITLE>
<styletype=”text/css”>
<!-
@import C:\PRIMER\Листинг.css
H3 {color: maroon; font-family: courier}
->
</style>
<HEAD><BODY>
<H3> Современные технологии форматирования </H3>
<p> Импорт внешних стилей <BR>
позволяет сократить <BR>
размеры HTML-файлов<BR>
</P></BODY></HTML>
Внешний файл для веб-страницы представлен в листинге 2.7.
Листинг 2.7 Внешний файл Листнг.css.
<STYLEtype=”text/css”>
H3 {color:crimson font-family:Arial Black}
P {background:cornsilk; font-family: times}
</STYLE>
В примере браузер сначала импортирует правила, содержащиеся в файле Листинг.css, а затем формирует набор правил для веб-страницы /5/.