Создание Web-страниц

Основные понятия

World Wide Web – средство графического представления информации в Интернете
Web-страница

World Wide Web

Интерактивная мультимедийная гипертекстовая среда, использующая язык разметки и

Гипертекст -

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

Протокол Интернета - HTTP

способ связи, с помощью которого страницы с

Технология клиент-сервер

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

Основные Web - браузеры

Netscape Communicator
(фирма Netscape)
Internet Explorer
(фирма Microsoft)

Создание Web-сайта

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

Логическая структура сайта

Разбиение материла на логические разделы с заранее спроектированными гиперсвязями
Домашняя

Иерархическая структура сайта

Линейная структура сайта

Страница 1

Страница 2

Страница 3

…

Организация сайта в виде паутины

Web-страница с точки зрения файловой структуры

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

Физическая структура сайта

Алгоритм размещения файлов по подкаталогам папки сайта

Только строчные латинские

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

Текст, отображающийся в строке заголовка браузера при просмотре страницы
Первым появляется

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

Элементы Web-страницы. Текст

Форматирование:
Гарнитура
Способ начертания
Цвет
Размер
Интервал
Поля
Цвет фона
…

Соотношение цветов текста и фона

Ваш браузер

Браузер посетителя

Необходимо указывать цвет и фона,

Элементы Web-страницы. Графика

В HTML-документе присутствует лишь адрес файла с графическим изображением
D:\мои рисунки\ris.gif

Элементы Web-страниц. Графика

Размер изображения: в пикселях или процентах от ширины окна

Элементы Web-страниц. Графика

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

Элементы Web-страниц. Графика

Фоновое изображение

Браузер отображает графику

Браузер не отображает графику, фоновый цвет страницы

Элементы Web-страницы. Гиперссылки

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

Элементы Web-страницы. Гиперссылки

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

Элементы Web-страницы. Гиперссылки

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

Элементы Web-страницы. Гиперссылки

Адресная часть ссылки
Ссылка указывает на страницу того же сайта

Относительный адрес
a.htm
..\eng\b.htm

Элементы Web-страницы. Гиперссылки

Адресная часть ссылки
Ссылка указывает на страницу внешнего сайта
Полный URL
http://www.nihe.niks.by
ссылка внешнего

Элементы Web-страницы. Гиперссылки

Адресная часть ссылки
Ссылка указывает на определенную область страницы
в нужном месте

Элементы Web-страницы. Гиперссылки

Адресная часть ссылки
Ссылка указывает на документ другого типа

Относительный адрес:
..\..\other\abc.zip
Для просмотра

Элементы Web-страницы. Гиперссылки

Адресная часть ссылки
Ссылка указывает на другой ресурс Интернет
Ссылка на адрес

Элементы Web-страницы. Таблицы

Метод представления данных
Средство компоновки страницы

Элементы Web-страницы. Фреймы

Фрейм – область окна браузера, в которой осуществляется просмотр отдельного

Элементы Web-страницы. Фреймы

Название сайта

Выбранный документ

Элементы Web-страницы. Фреймы

Установочный файл фреймов – отдельный документ HTML, задающий способ раскладки

Элементы Web-страницы. Фреймы

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

Элементы Web-страницы. Фреймы

ссылка 5

Элементы Web-страницы. Фреймы

Проблемы использования фреймов:
«Висячая» полоса прокрутки
В адресной строке браузера отображается URL

Средства создания Web-страниц

Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor
Специализированные

Средства создания Web-страниц

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

Редакторы визуального проектирования

Создание сайта с использованием шаблона: создание логической и физической

Редакторы визуального проектирования

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

Редакторы визуального проектирования

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

Редакторы визуального проектирования

Гиперссылки и закладки
Фоновый звук
Фреймы

Редакторы визуального проектирования

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

Методы реализации динамических страниц

JavaScript – модули интегрируются в файл HTML как

Методы реализации динамических страниц

PHP (Personal Home Page)-сценарии вставляются в тот участок

Методы реализации динамических страниц

ASP (Active Server Page) - скрипт исполняется на

Методы реализации динамических страниц

Flash – программа для создания интерактивной анимации
Разрабатывается с

Методы реализации динамических страниц

DHTML – расширение стандарта HTML
Использование сценариев («скриплетов»), обрабатываемых

Формы

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

Формы

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

Формы

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

Создание динамических страниц средствами MS FrontPage 2000

Счетчик посещений
Рекламный баннер
Временный рисунок
Бегущая строка
Анимационный

Этапы создания Web-сайта

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

Удобство пользователя

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