49806 (Разработка мультимедийного сайта), страница 5

Рисунок 2.3 – Страницы веб-сайта в режиме Папки

2. Разработка макетов веб-страниц

Существуют следующие наиболее распространенные компоновки веб-страниц (рисунок 2.4) в соответствии с расположением навигационной панели:

• левосторонняя (правосторонняя);

• с верхним расположением навигации;

• комбинированная.

Левосторонняя компоновка	Верхнее позиционирование	Комбинированная компоновка

Рисунок 2.4 – Виды компоновок веб-страниц

В данной курсовой работе была выбрана комбинированная компоновка веб-страниц, что обеспечит пользователю максимальное удобство работы.

При создании веб-сайта в редакторе Microsoft Office Front Page была выбрана технология создания страниц на основе макетной таблицы.

При создании макетной таблицы и добавления ячеек в веб-страницу были использована средства макетирования, доступные в панели задач Макетные таблицы и ячейки. В таком случае, можно либо выбрать предварительно определенный шаблон макетной таблицы, либо создать собственную макетную таблицу и отрегулировать нужные высоту, ширину, выравнивание, поля страницы, цвет и особенности границ, что и было сделано.

В ходе редактирования были заданы ширина столбцов и высота строк. Был выбран один столбец в таблице, которому было разрешено автоматически занимать максимальное доступное пространство в окне обозревателя. Такая способность называется авторастягиванием.

После того, как основная структура веб-страницы была задана с помощью добавления макетной таблицы и ячеек, были добавлены такие детали, как цвет, границы из рисунков, тени и другие декоративные элементы.

Остальные страницы справочника были сделаны на основе уже спроектированной путем ее копирования и вставки. Компоновка всех страниц была выбрана комбинированная. Она представлена на рисунке 2.5.

Рисунок 2.5 – Компоновка главной страницы

2. Разработка контента и оформление веб-страниц

Контент сайта - это информационное наполнение страниц сайта. В основном используется графический и текстовый контент. Информация на странице сайта должна отражать основную цель создания страницы и быть доступно написана для пользователя.

В большинстве случаев, весь контент сайта ограничивается только кратким описанием услуг (или товаров) и присутствием контактной информации. Но у большинства потребителей всегда существует огромное количество вопросов и обычных потребительских страхов. Соответственно - сайт, содержащий максимальное количество информации (необходимой данной целевой аудитории) и будет пользоваться особым доверием у этой аудитории и будет иметь большую посещаемость.

2. Принципы веб-дизайна

Веб-дизайн значительно улучшился за последние несколько лет. Он стал более дружественный к пользователю и более привлекательным — и есть все основания для этого: на протяжении многих лет мы шли к выводу, что дизайн, который сфокусирован на юзабилити и пользователе, является более эффективным. Современные дизайны не заполнены радостными и громко кричащими баннерами. Мы научились общаться с посетителями, привлекать их к обсуждению и получать их доверие, удовлетворять их потребности и говорить с ними честно и открыто.

Выделим некоторые требования веб-дизайна:

1. Web-сайт должен грузиться быстро и быть прост в использовании.

2. Необходимо предоставлять определенную информацию, необходимую пользователям.

3. Графика должна быть столь стилизована, чтобы соответствовать информационному наполнению, а не наоборот, чтобы не отвлекать внимание от информационного наполнения.

4. Необходимо выбрать начертание шрифта и цвет, который может легко читаться. Частое использование полужирных шрифтов делает страницу нечитаемой. Цвет фона должен также быть контрастным по отношению к цвету текста.

5. Использовать графику на сайте в умеренном количестве, чтобы сделать его привлекательным. Но графика не должна отклонить внимание читателей от информационного наполнения.

6. Нужно избежать "дьявольских" изображений. Они отвлекают внимание читателей от информационного наполнения.

7. Избегать неработающих (битых) ссылок.

8. Использовать контрастирующие элементы на сайте для привлечения внимания посетителей.

9. Информационное наполнение должно эстетически нравиться, а также должны быть сильные функциональные возможности сайта.

10. Нельзя повторять заголовки страниц.

11. Информационное наполнение и заголовки страницы должны быть грамматически правильными.

12. Главная страница должна быть привлекательной и обеспечить посетителя анонсами полезной информации.

1. Структурирование и формирование контента

Структурирование текста, да и самого контента, занимает чуть ли не главное место в процессе разработки веб-страниц. Правильное расположение информации, выделение главного, создание таблиц, списков намного облегчает восприятие текста.

Таким образом, для выделения заголовков был выбран полужирный шрифт в 18 пунктов оранжевого цвета (рисунок 2.6).

Рисунок 2.6 – Выделение заголовков

Также использовались маркированные списки с заданным рисунком в виде стрелки (рисунок 2.7) [19].

Рисунок 2.7 – Применение маркированного списка

Для того, чтобы структурировать некоторую часть материала были применены таблицы. Чтобы не утяжелять их громоздкими и «тяжелыми» границами была выбрана толщина линий, равная одному пикселю, одномерная. Для реализации такого решения были применены следующие атрибуты [4]:

Пример использования таблицы представлен на рисунке 2.8.

Рисунок 2.8 – Применение таблиц

Для более наглядного представления информации на странице Карта сайта был применен рисунок с использованием гиперссылок на другие страницы. Для этого использовались гиперпрямоугольники, доступные на панели инструментов Рисунки (рисунок 2.9).

Рисунок 2.9 – Использование гиперпрямоугольников

1. Графика и анимация в HTML-документах

На сегодняшний день 90% графики, представленной в Интернет, хранится в основных графических форматах GIF и JPG (JPEG). В них заложены различные алгоритмы сжатия изображений, позволяющие уменьшить размеры графических файлов.

Одним из способов использования графики в HTML является внедрение графических образов в документ с помощью тега IMG, что позволяет пользователю непосредственно увидеть изображения [4].

Синтаксис тега IMG:

На страницах разрабатываемго сайта было использовано множество различным графических изображений. Пример приведен на рисунках 2.10, 2.11.

Рисунок 2.10 – Использование графики на сайте

Рисунок 2.11 – Использование графических изображений

1. Разработка и настройка системы гиперссылок

Гипертекстовые связи (ссылки) являются наиболее важным элементом веб-страниц. С их помощью реализуется технология гипертекста. Гипертекст - текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д.

Технология гипертекста основывается на использовании так называемых гиперссылок. Гиперссылка – это фрагмент HTML-документа, указывающий на другой файл, который может быть расположен в Интернет, и содержащая полный путь (URL) к этому файлу. Также могут использоваться закладки (якорь), позволяющие быстро переходить от одного раздела к другому внутри документа, не используя прокрутку экрана.

Для создания ссылки на закладку необходимо выполнить следующие шаги:

1. Создать закладку (маркер, якорь раздела):

Текст, к которому идет переход

2. Создать ссылку на закладку (маркер):

Текст-ссылки

Для реализации гиперссылок в HTML используется тег А:

тело-ссылки , где атрибут HREF указывает на расположение открываемого объекта, TARGET – на способ загрузки (в новом окне, в текущем). Также можно задавать всплывающие подсказки при помощи атрибута title [4].

В разрабатываемом сайте использовано большое количество гиперссылок. Для того, чтобы создать гиперссылку в редакторе FrontPage, необходимо выделить фрагмент текста либо рисунок, который будет служить телом ссылки. Далее по команде КЗМ/Гиперссылка либо Вставка/Гиперссылка необходимо в диалоговом окне (рисунок 2.12) указать адрес, способ загрузки (кнопка Выбор рамки), по необходимости задать стиль.

Рисунок 2.12 – Диалоговое окно Изменение гиперссылки

Так, например при создании страницы Вопрос-Ответ были использованы гиперссылки на закладки в текущем документе (рисунок 2.13).

Рисунок 2.13 –Использование гиперссылок на закладки в документе

На странице Источники был использован ряд гиперссылок на внешние источники. Пример такого использования представлен на рисунке 2.14.

Рисунок 2.14 – Использование гиперссылки на внешний источник.

Схема гиперссылок отображается в режиме Гиперссылки. Например, для главной страницы она представлена в следующем виде (рисунок 2.15):

Рисунок 2.15 – Схема гиперссылок на главной странице

1. Публикация и тестирование веб-сайта

Обычно под понятием услуги хостинга подразумевают как минимум услугу размещения файлов сайта на сервере, на котором запущено ПО, необходимое для обработки запросов к этим файлам (веб-сервер). Как правило, в услугу хостинга уже входит предоставление места для почтовой корреспонденции, баз данных, DNS, файлового хранилища и т. п., а также поддержка функционирования соответствующих сервисов.

Хостинг (англ. hosting) — услуга по предоставлению вычислительных мощностей для физического размещения информации на сервере, постоянно находящемся в сети (обычно Интернет). Хостингом также называется услуга по размещению оборудования клиента на территории провайдера с обеспечением подключения его к каналам связи с высокой пропускной способность [2].

По условиям предоставления хостинг часто разделяется на платный и бесплатный. Обычно компания, предоставляющая бесплатный хостинг, зарабатывает путем показа рекламы на страницах, размещенных на нем. Бесплатный хостинг, как правило, медленнее платного, предоставляет только базовые услуги и иногда ненадёжен (то есть может закрыться).

Также можно разделить услуги хостинга по типу предоставляемого ресурса:

• виртуальный хостинг — предоставляется место на диске для размещения веб-сайтов, среда исполнения веб-сервисов единая для многих пользователей, ресурсы распределены между всеми пользователями на одном сервере, где может размещаться от 50 до 1000 пользователей;

• виртуальный частный/выделенный сервер (VPS или VDS) — предоставляется место на диске, часть общей памяти, процессорное время сервера. Выглядит для пользователя так же, как и выделенный сервер, но физически на одном реальном сервере располагается несколько виртуальных серверов. Услуга предназначена для проектов средней тяжести;

• выделенный сервер — предоставляется сервер целиком. Используется для реализации нестандартных задач (сервисов), а также размещения «тяжёлых» веб-проектов, которые не могут сосуществовать на одном сервере с другими проектами и требуют под себя все ресурсы сервера;

• колокация (Collocation) — предоставление места в датацентре провайдера для оборудования клиента (обычно путем монтажа в стойке) и подключение его к интернету.

По данным РУП «Белтелеком» установлены следующие цены на услуги хостинга (таблица 5):

Таблица 5 − Цены на хостинг (РУП «Белтелоком»)

Вид хостинг	Цена, бел. руб.
Виртуальный хостинг	3300 – 15700 (в зависимости от объема предоставляемого пространства)
Виртуальный выделенный сервер	71 170 (объем дискового пространства 1Гб, объем принятой информации 1Гб и объем переданной информации 1Гб)
Колокация	От 12300 (плата за каждый 1Unit в стойке при размещении оборудования) до 2 000 000 (абонентская плата за предоставление в пользование серверного шкафа)

Microsoft FrontPage позволяет работать с двумя типами веб-сайтов: разрабатываемыми на диске и на сервере. Разрабатываемый на диске сайт представляет собой веб-сайт FrontPage, который создается на жестком диске локального компьютера и затем публикуется на веб-сервер. Создание и работа с разрабатываемым на сервере сайтом осуществляется непосредственно на веб-сервере, при этом исключается дополнительная операция – публикация.