Создание Web-страниц Н.Г.Гончарик Кафедра информатизации профессионального образования РИПО

Основные понятия World Wide Web – средство графического представления информации в Интернете Web-страница – гипермедийный HTML- документ HTML (Hyper Text Markup Language) – язык гипертекстовой разметки HTML Web-сайт – группа Web-страниц, связанных единой темой, схемой оформления и гипертекстовыми ссылками Браузер – программа, предназначенная для просмотра Web-страниц Браузер

World Wide Web Интерактивная мультимедийная гипертекстовая среда, использующая язык разметки и поддерживающая множество протоколов Интернета (текст, графика, видеоклипы, звук)

Гипертекст - означает, что определенная часть выделенной информации ссылается на другие фрагменты информации

Протокол Интернета - HTTP способ связи, с помощью которого страницы с информацией отправляются и принимаются в Интернет Hyper Text Transfer Protocol

Технология клиент-сервер Компьютер с программным обеспечением Web-сервера Web-браузеры, получающие информацию с Web-сервера Пользователи (клиенты), работающие с Web-браузерами

Основные Web - браузеры Netscape Communicator (фирма Netscape) Internet Explorer (фирма Microsoft)

Создание Web-сайта Цель создания сайта Задачи, решаемые посредством сайта Потенциальная аудитория Информация на сайте

Логическая структура сайта Разбиение материла на логические разделы с заранее спроектированными гиперсвязями Домашняя (стартовая) страница содержит ссылки на все (или основные) разделы сайта, анонсы их содержимого и т.д. Заглавная страница – не содержит содержательной информации и элементов навигации. Содержит логотип, выбор кодировки, языка, счетчик посещений и т.д.

Иерархическая структура сайта начальная страница Раздел 1 …… … … Раздел 2Раздел 3 ……

Линейная структура сайта Страница 1Страница 2Страница 3 …

Организация сайта в виде паутины Домашняя страница Страница 1 Страница 2 Страница 3 Страница 4

Web-страница с точки зрения файловой структуры Web-страница – это HTML-документ + Файлы мультимедиа + Активные компоненты

Физическая структура сайта site html rus eng image video other Алгоритм размещения файлов по подкаталогам папки сайта Только строчные латинские буквы в именах файлов и папок

Элементы Web-страницы. Заголовок Заголовок Текст, отображающийся в строке заголовка браузера при просмотре страницы Первым появляется при загрузке Служит закладкой на страницу Имеет больший вес при индексации

Элементы Web-страницы. Заголовок Заголовок

Элементы Web-страницы. Текст Форматирование: Гарнитура Способ начертания Цвет Размер Интервал Поля Цвет фона …

Соотношение цветов текста и фона Ваш браузерБраузер посетителя Необходимо указывать цвет и фона, и шрифта Или не указывать ни цвет фона, ни цвет шрифта

Элементы Web-страницы. Графика В HTML-документе присутствует лишь адрес файла с графическим изображением D:\мои рисунки\ris.gif D:\site\image\ris.gif..\..\image\ris.gif site html rus eng image video other

Элементы Web-страниц. Графика Размер изображения: в пикселях или процентах от ширины окна

Элементы Web-страниц. Графика Альтернативный текст отображается в режиме отключения графики или неграфическими браузерами

Элементы Web-страниц. Графика Фоновое изображение Браузер отображает графику Браузер не отображает графику, фоновый цвет страницы не задан Браузер не отображает графику, фоновый цвет страницы задан

Элементы Web-страницы. Гиперссылки Гиперссылка устанавливает связи между Web-страницами Элементы гиперссылки: Указатель ссылки Адресная часть

Элементы Web-страницы. Гиперссылки Указатель ссылки: Фрагмент текста - Подчеркнутый - Выделенный цветом непросмотренная ссылка просмотренная ссылка

Элементы Web-страницы. Гиперссылки Указатель ссылки: Графическое изображение - Кнопка - Изображение-карта

Элементы Web-страницы. Гиперссылки Адресная часть ссылки Ссылка указывает на страницу того же сайта site html rus my.htm a.htm eng b.htm image Относительный адрес a.htm..\eng\b.htm

Элементы Web-страницы. Гиперссылки Адресная часть ссылки Ссылка указывает на страницу внешнего сайта Полный URL ссылка внешнего ресурса

Элементы Web-страницы. Гиперссылки Адресная часть ссылки Ссылка указывает на определенную область страницы - в нужном месте документа назначения создается закладка с неким именем - в исходном документе создается ссылка Относительный или полный адрес + имя закладки c.htm#end

Элементы Web-страницы. Гиперссылки Адресная часть ссылки Ссылка указывает на документ другого типа site html rus my.htm eng image other abc.zip Относительный адрес:..\..\other\abc.zip Для просмотра файла на компьютере посетителя должна быть установлена соответствующая программа

Элементы Web-страницы. Гиперссылки Адресная часть ссылки Ссылка указывает на другой ресурс Интернет Ссылка на адрес электронной почты Ссылка на группу новостей: news:news.newusers.com

Элементы Web-страницы. Таблицы Метод представления данных Средство компоновки страницы

Элементы Web-страницы. Фреймы Фрейм – область окна браузера, в которой осуществляется просмотр отдельного HTML-документа

Элементы Web-страницы. Фреймы Название сайта ссылка 1 ссылка 2 ссылка 3 ссылка 4 Выбранный документ

Элементы Web-страницы. Фреймы Установочный файл фреймов – отдельный документ HTML, задающий способ раскладки фреймов, их форматирование и текст для браузеров, не поддерживающих фреймы

Элементы Web-страницы. Фреймы Форматирование фреймов: Граница - изменение цвета - изменение месторасположения при помощи мыши - отображение границы Отображение полосы прокрутки у фрейма

Элементы Web-страницы. Фреймы Название сайта ссылка 1 ссылка 2 ссылка 3 ссылка 4 Выбранный документ ссылка 5

Элементы Web-страницы. Фреймы Проблемы использования фреймов: «Висячая» полоса прокрутки В адресной строке браузера отображается URL установочного файла фреймов Не отображаются неграфическими браузерами Некорректно индексируются некоторыми поисковыми системами

Средства создания Web-страниц Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor Специализированные HTML-редакторы – Homesite, Hotdog Professional, Coffee Cup HTML Editor ++ Редакторы визуального проектирования WYSIWYG – MS Word, MS Front Page, Macromedia Dreamweaver

Средства создания Web-страниц Любой HTML-документ можно редактировать любым средством создания Web-страниц

Редакторы визуального проектирования Создание сайта с использованием шаблона: создание логической и физической структуры Создание отдельной страницы с фреймами или без них (с использованием шаблона)

Редакторы визуального проектирования Форматирование текста Списки Горизонтальные линии Таблицы

Редакторы визуального проектирования Вставка объектов мультимедиа Выбор папки для размещения графического файла При указании на файл указывается относительный путь

Редакторы визуального проектирования Гиперссылки и закладки Фоновый звук Фреймы

Редакторы визуального проектирования Проверка гиперссылок Автоматическое обновление ссылок при переименовании или перемещении документа Публикация сайта

Методы реализации динамических страниц JavaScript – модули интегрируются в файл HTML как подпрограмма Java – модули существуют как самостоятельные приложения (апплеты.class) создание бегущих строк, часов, анимации, чатов, передача изображений с web-камеры

Методы реализации динамических страниц PHP (Personal Home Page)-сценарии вставляются в тот участок документа, где необходимо разместить интерактивный элемент Позволяет организовать счетчик посещений, статистику обращений к разделам сайта, защищать доступы к файлам паролями Поддерживается не всеми серверами

Методы реализации динамических страниц ASP (Active Server Page) - скрипт исполняется на сервере, пользователю отсылается готовый HTML-документ с результатами работы ASP Программное обеспечение пользователя не имеет значения

Методы реализации динамических страниц Flash – программа для создания интерактивной анимации Разрабатывается с использованием приложения Macromedia Flash На компьютере пользователя инсталлируется надстройка к браузеру Macromedia Flash Player

Методы реализации динамических страниц DHTML – расширение стандарта HTML Использование сценариев («скриплетов»), обрабатываемых браузером совместно с кодом HTML Позволяет создать движущиеся объекты, выпадающие меню, подсвечивающиеся кнопки …

Формы Посетитель заполняет форму и отправляет серверу Программа на сервере обрабатывает полученные данные Программа на сервере генерирует и отсылает посетителю новую страницу

Формы CGI-сценарий – программа, обрабатывающая данные из формы PERL (Practical Extraction and Report Language) – язык написания CGI- сценариев

Формы Обработка данных из формы: Запись в указанный файл Отправка по электронной почте Сохранение в базе данных Передача другой программе Определение внешнего вида генерируемой страницы

Создание динамических страниц средствами MS FrontPage 2000 Счетчик посещений Рекламный баннер Временный рисунок Бегущая строка Анимационный эффект при переходе к другой странице Полиморфная кнопка Формы

Этапы создания Web-сайта Выбор темы и информационного наполнения Проектирование логической структуры Проектирование физической структуры Создание отдельных страниц и установка связей между ними Тестирование Публикация

Удобство пользователя Учет аппаратных средств пользователя Учет программных средств пользователя Минимальный объем Корректный дизайнерский стиль

Литература 1. Веб-дизайн: книга Дмитрия Кирсанова – Спб.: Символ-плюс, Веб-дизайн: книга Якоба Нильсена – Спб.Ж Символ-плюс, Холмогоров В. Основы Web-мастерства – Спб.: Питер, Дж. Вайскопф. Microsoft FrontPage 2000: учебный курс – Спб.: Питер, Исагулиев Г. Macromedia Dreamweaver 4 – Спб.: БХВ-Санкт-Петербург, 2001