- •Фгбоу впо «Башкирский государственный педагогический университет
- •2. Требования к уровню освоения содержания дисциплины «Технологии Internet (Web-мастерство)»
- •3. Объем дисциплины «Технологии Internet (Web-мастерство)» и виды учебной работы
- •4. Содержание дисциплины «Технологии Internet (Web-мастерство)»
- •4.1. Разделы дисциплины и виды занятий
- •4.2.Содержание разделов дисциплины «Технологии Internet (Web-мастерство)»
- •5. Учебно-методическое обеспечение дисциплины
- •6.5. Система подготовки материалов и методических разработок
- •7. Содержание итогового и промежуточного контроля
- •7.1. Перечень примерных контрольных вопросов и заданий для самостоятельной работы
- •7.2 Теоретические вопросы к зачету.
- •Практические задания
- •8. Методические рекомендации по организации изучения дисциплины
- •8.1. Методические рекомендации для преподавателей
- •9.Учебная практика по дисциплине «Технологии Internet (Web-мастерство)» не предусмотрена.
- •2.1. Конспекты лекций по дисциплине «Технологии Internet (Web-мастерство)»
- •2.1. Язык гипертекстовой разметки html.
- •2.1.1. Основные теги.
- •Комментарии
- •Общий вид html-документа
- •2.1.2. Обычный текст или абзац
- •Обычный текст или абзац в сеpедине стpоки
- •2.1.3. Ссылки
- •Ссылки на главы дpугих документов
- •2.1.4. Списки
- •Ненумеpованный список
- •Нумеpованный список
- •2.1.5. Физические стили
- •Наложение различных стилей
- •2.1.6. Рисунки
- •Составные картинки
- •Элемент map
- •2.1.7. Таблицы
- •2.1.8. Формы html
- •Атрибут checkbox
- •Атрибут image
- •Атрибут password
- •Атрибут radio
- •Атрибут reset
- •Атрибут select
- •Атрибут submit
- •Атрибут textarea
- •2.1.9. Фpеймы
- •3.1. Базовый синтаксис css
- •3.3. Применение свойства цвета.
- •Свойство 'background-color'
- •3.4. Фоновые изображения [background-image]
- •3.5. Семейство шрифта [font-family]
- •3.6. Боксовая модель
- •Боксовая модель в css
- •3.7.Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •4.1. Цвет и форма.
- •4.2. Модульная сетка в дизайне.
- •4.3. Типы сайтов. Модели организации сайта.
- •4.3.1. Линейная организация
- •4.3.2. Решетка
- •4.3.3. Иерархия
- •4.3.4. Паутина
- •5.1. Теория навигации
- •5.1.1 Размещение элементов навигации
- •5.1.2. Правила навигации
- •5.1.3. Основные приемы создания ссылок
- •5.2. Программы для создания web-страниц
- •6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
- •6.1.1. Форматы изображений
- •6.1.2. Формат gif
- •6.1.3. Формат jpeg
- •6.1.4. Формат png
- •6.1.6. Другие форматы изображений
- •6.2. Анимация
- •6.3. Звук
- •6.4 Видео
- •7.1. Технологии программирования
- •7.2. Программирование на стороне клиента
- •7.2. Синтаксис языка JavaScript и основы программирования на нем
- •8.1. Технологии, работающие на стороне сервера
- •8.2. Сценарии на стороне сервера
- •8.3. Технологии создания интерактивных страниц: asp, php, ssi
- •8.4. Серверные программные интерфейсы приложений
- •8.4. Сетевые и сопутствующие протоколы
- •8.4.3. Адресация: url/uri/urn/urc
- •9.4 Работа с формами
- •9.5. Рнр: выборочная загрузка
- •9.6 Рнр: гостевая книга
- •10.1. Базовая модель Web-процесса
- •10.2. Планирование сайта
- •I определение цели
- •2. Определение аудитории
- •3. Профилирование пользователей
- •4. Требования к сайту
- •II план сайта
- •III разработка дизайна
- •Логотип
- •Навигатор по сайту
- •IV создание пробного сайта
- •V тестирование
- •10.3 Публикация и продвижение сайта
- •Упражнение 2 – создание списка
- •Упражнение 3 - вставка рисунка
- •Упражнение 4 – гиперссылки
- •Лабораторная работа № 2 Создание home page средствами Notepad (папка web)
- •Последовательность выполнения работы
- •Лабораторная работа № 3
- •Сведения о пользователе
- •Лабораторная работа № 4 Создание домашней странички (папка web)
- •Лабораторная работа № 5 JavaScript
- •Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
- •Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
- •Задания для самостоятельной работы
- •Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
- •Упражнение 6 Создание собственных кнопок
- •Задания для самостоятельной работы
- •Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
- •5 Проверить корректность работы файла стилей!
- •Лабораторная работа №9 по технологиям Internet.
- •Лабораторная работа 10. Введение в язык php
- •Лабораторная работа 11. Обработка данных форм
- •Лабораторная работа 12. Массивы
8.3. Технологии создания интерактивных страниц: asp, php, ssi
Как нетрудно видеть из предыдущего описания, CGI представляет собой некую готовую исполняемую программу, созданную с определенными целями и достаточно сложно перенастраиваемую, если требуется немного изменить ее назначение (точнее, соответствующие возможности настройки уже должны быть заложены в алгоритм, иначе требуется модифицировать листинг и заново транслировать его в исполняемый код, для чего в свою очередь нужны определенные полномочия администратора сервера). Скрипты же (о которых говорится в главе 6) в этом плане гораздо удобнее: нужно лишь вставить в HTML-текст требуемые команды (или мини-программу), а далее такой файл можно разместить практически на любом сервере, не выходя за пределы отведенного под ваш сайт каталога. Но скриптовое программирование обладает крупным недостатком — поскольку скрипты сначала пересылаются в составе копии HTML-файла на локальный компьютер каждого посетителя сайта, а затем выполняются уже непосредственно в браузере, то и результаты их работы будут доступны только на данной локальной машине (не удастся, например, реализовать сбор информации от всех пользователей в единую общедоступную базу данных).
Однако существует и компромисс - «серверные скрипты», реализуемые в нескольких вариантах, немного отличающихся между собой в деталях, но родственных по своей идеологии. Здесь, как и при «классическом» скриптовом программировании, пользователю предоставляется некий язык команд, встраиваемых непосредственно в HTML-текст. Но исполнение этих команд производится не в браузере, а на сервере, аналогично CGI (как правило, обработка таких команд и производится при помощи CGI, так что фактически в этом случае мы имеем дело с неким универсальным и сверхгибким в настройке CGI-приложением!) со всеми ранее описанными преимуществами клиент-серверной технологии. Правда, поскольку скриптовые команды необходимо сначала преобразовать в исполняемый код, Web-страницы с ними обрабатываются несколько медленнее, чем содержащие вызовы готовых CGI-программ (и здесь дело обстоит аналогично сравнению трансляторов с языков программирования — компиляторов и интерпретаторов). В этой книге автор не ставит своей целью подробное изучение серверного скриптового программирования, поэтому здесь мы уделим внимание лишь основным особенностям трех разновидностей этой технологии.
8.3.1. ASP
ASP - (Active Server Page), или активные серверные страницы - это один из наиболее известных компромиссов между клиент-серверной и скриптовой технологиями. Основа ASP — это скрипты, добавленные в HTML-текст страницы (такой файл обычно имеет расширение asp) и выполняемые на сервере, тогда как браузер пользователя получает модифицированный соответствующим образом файл с «чистым» HTML (т. е. сами ASP-скрипты пользователю недоступны, так как ему передается уже результат работы этих скриптов). В этом можно увидеть значительное сходство ASP с Dynamic HTML (см. главу 6), но размещение скрипта на сервере позволяет избавиться от недостатков, присущих скриптовому программированию (в частности, ASP-технологии позволяют реализовать работу с размещенными на сервере базами данных, в том числе пополняемыми вводимой различными пользователями сайта информацией). Правда, сфера применения ASP несколько уже, чем, скажем, для РНР (рассматриваемых далее): это прежде всего создание интерфейсов баз данных с использованием специальных ActiveX — компонентов «ActiveX Data Objects» и общепринятого стандарта формирования запросов к базам данных SQL.
Пример ASP-скрипта:
<%@ LANGUAGE="VBSCRIPT" %> <HTML> <HEAD>
<Т1ТЬЕ>Тест ASP</TITLE> </HEAD> <BODY>
<%= "Московское время " & time %> </BODY> </HTML>
Здесь за основу взят скриптовой язык VBScript, а сгенерированная страница в результате будет содержать внутри контейнера <BODY>. . .</BODY> строку с указанием текущего времени (т. е. значение системной переменной сервера time будет приписано к имеющейся текстовой константе).
8.3.3. РНР
PHP (Personal Ноте Page) — это серверный мультиплатформенный (т. е. не зависящий от применяемого в том или ином случае программно-аппаратного обеспечения, так же, как и язык Java) язык описания сценариев, встраиваемый в HTML-текст. История его создания — типичный пример истории всей идеологии серверных скриптов. Первоначально была создана простейшая CGI-оболочка, отыскивающая в «исходном листинге» на HTML и интерпретирующая требуемым образом несколько специфических по назначению команд, однако сама идея предоставить разработчику Web-страницы простой в освоении и использовании язык «программирования» требуемых от сервера действий вызвала большой интерес, и в 1994 г. РНР получил общепризнанный статус интерактивной Web-технологии.
Работа с PHP достаточно проста. Сам HTML-файл, содержащий в себе PHP-команды, должен носить расширение phtml (предпочтительно), php3 или php. Собственно команды языка РНР всегда заключаются в специальный «тэг», начинающийся с <?php и заканчивается парой символов ?>, и разделяются точкой с запятой. Комментарии записываются аналогично языку Си - между знаками / * и * /, либо после пары символов // и до конца текущей строки. Такие вставки, размещаемые в требуемых местах HTML-кода, позволяют добавлять на Web-страницу те или иные элементы, обычно реализуемые вызовом CGI-программы, либо фактически превращают данный файл в «шаблон», по которому строятся пересылаемые пользователям «результирующие» Web-страницы.
Пример РНР-скрипта
«компоновки» Web-страницы из готовых фрагментов;
...предыдущий HTML-текст...
<?php
$url = "";
if ($link == 1) { $url = "name1.phtml"; }
if ($link == 2) { $url = "name2.phtml"; }
if ($link == 3) { $url = "патеЗ.phtml"; }
if ($link ==4) { $url = "name4.phtml"; }
if ($url == "") { $url = "error.phtml"; }
INCLUDE ($url);
?>
...последующий HTML-текст...
Вставив внутрь «обычного» HTML-кода указанный скрипт, можно в зависимости от текущего значения переменной с именем link, переданной в составе гиперссылки на данный Web-документ, например: http://www.domain.ru/ webdoc.phtml?link=l, подставить в данное место данного HTML-файла соответствующий фрагмент из другого файла, имя которого присваивается переменной url (если же переданное значение link не соответствует ни одному из указанных, то последний из операторов if предпишет вывести в этом месте заранее заготовленное сообщение об ошибке).
Пример PHP-скрипта счетчика посещений:
<р>Посетителей странички -
<?php
$filename = "counter.dat"; -
$fp = @fopen($filename,"r");
if ($fp) { $counter=fgets($fp,10); fclose ($fp); }
else { $counter=0; } $counter++; echo $counter;
$fp = @fopen($filename, "w") ; if ($fp) { $counter=fputs($fp,$counter); fclose($fp); }
?>
</p>
Этот скрипт - наглядная демонстрация алгоритма работы счетчика посещений. Он предельно прост: сначала мы присваиваем переменной filename название некоего файла, хранящего текущее количество посетивших данный сайт пользователей, затем открываем его и считываем в переменную counter хранящееся там значение (или, при невозможности чтения, обнуляем счетчик). Далее значение counter увеличивается на единицу и «впечатывается» в данном месте генерируемого HTML-документа (команда echo, «привычная» нам еще по bat-файлам для MS-DOS), а потом записывается в тот же самый «буферный» файл взамен прежнего.
Однако же сразу заметим и принципиальное отличие этого счетчика от реализуемого при помощи «классической» CGI-программы. Если в последнем случае HTML-файл содержит вызов CGI-приложения, а браузер генерирует обращение к нему, когда данная страница уже в него загружена и требуется подгрузить к ней иллюстрации, то при использовании РНР на сервере сначала, еще до передачи страницы браузеру, формируется запись (или закодированные вызовы изображений цифр) значения счетчика, а затем генерируется и пересылается на ПЭВМ посетителя сайта HTML-документ, который уже содержит в себе эту запись в готовом виде (т. е. для текстового счетчика после загрузки такой страницы в браузер никаких дополнительных обращений к серверу вообще не нужно, а для графического - производится только обычная подгрузка графических файлов с уже известными браузеру именами).
8.3.4. SSI
SSI (Server Side Includes), или «включения на стороне сервера», - это тоже разновидность скриптовых команд, вставляемых в HTML-текст для передачи каких-либо указаний серверу. Выглядят они как обычные HTML-комментарии, содержимое которых начинается с «спецсимвола» #, состоит из указания имени команды и одного или нескольких параметров с их значениями. Всего таких команд предусмотрено около десятка; обычно они применяются (аналогично РНР) для вставки в некоторый «шаблонный» Web-документ HTML-фрагментов из внешних файлов, для генерации страниц в зависимости от значений переменных (например, таким способом можно реализовать «адаптацию» сайта под запрошенные от пользователя тип и версию браузера) и т. п. Например, если какие-либо фрагменты Web-страницы являются типовыми и повторяются почти на всех страницах («панель управления», шаблонные элементы оформления, меню и пр.), можно вынести соответствующий им HTML-текст в отдельные файлы, а в сами страницы добавить SSI-команды, предписывающие вставить указанные блоки кода на предназначенные для них места. Сам же HTML-файл, содержащий такие команды, обычно носит расширение shtral (или shtm). Результирующая же Web-страница формируется сервером непосредственно перед ее пересылкой на компьютер посетителя. И, как и в предыдущих случаях, сами эти команды конечному пользователю не «видны», т. е. он просматривает в своем браузере страницу уже на «чистом» языке HTML, которую сервер скомпоновал в соответствии с данными ему указаниями.
Пример кода:
<p align=center><img src=”images/<!--#echo var=”picture”--> “alt=” /<!--#echo var=”title”--></p>