Разработка мультимедийного сайта (стр. 6 из 15)
Рисунок 2.3 – Страницы веб-сайта в режиме Папки
2.4 Разработка макетов веб-страниц
Существуют следующие наиболее распространенные компоновки веб-страниц (рисунок 2.4) в соответствии с расположением навигационной панели:
· левосторонняя (правосторонняя);
· с верхним расположением навигации;
· комбинированная.
 |  |  |
| Левосторонняя компоновка | Верхнее позиционирование | Комбинированная компоновка |
Рисунок 2.4 – Виды компоновок веб-страниц
В данной курсовой работе была выбрана комбинированная компоновка веб-страниц, что обеспечит пользователю максимальное удобство работы.
При создании веб-сайта в редакторе MicrosoftOfficeFrontPage была выбрана технология создания страниц на основе макетной таблицы.
При создании макетной таблицы и добавления ячеек в веб-страницу были использована средства макетирования, доступные в панели задач Макетные таблицы и ячейки. В таком случае, можно либо выбрать предварительно определенный шаблон макетной таблицы, либо создать собственную макетную таблицу и отрегулировать нужные высоту, ширину, выравнивание, поля страницы, цвет и особенности границ, что и было сделано.
В ходе редактирования были заданы ширина столбцов и высота строк. Был выбран один столбец в таблице, которому было разрешено автоматически занимать максимальное доступное пространство в окне обозревателя. Такая способностьназывается авторастягиванием.
После того, как основная структура веб-страницы была задана с помощью добавления макетной таблицы и ячеек, были добавлены такие детали, как цвет, границы из рисунков, тени и другие декоративные элементы.
Остальные страницы справочника были сделаны на основе уже спроектированной путем ее копирования и вставки. Компоновка всех страниц была выбрана комбинированная. Она представлена на рисунке 2.5.
Рисунок 2.5 – Компоновка главной страницы
2.5 Разработка контента и оформление веб-страниц
Контент сайта - это информационное наполнение страниц сайта. В основном используется графический и текстовый контент. Информация на странице сайта должна отражать основную цель создания страницы и быть доступно написана для пользователя.
В большинстве случаев, весь контент сайта ограничивается только кратким описанием услуг (или товаров) и присутствием контактной информации. Но у большинства потребителей всегда существует огромное количество вопросов и обычных потребительских страхов. Соответственно - сайт, содержащий максимальное количество информации (необходимой данной целевой аудитории) и будет пользоваться особым доверием у этой аудитории и будет иметь большую посещаемость.
2.5.1 Принципы веб-дизайна
Веб-дизайн значительно улучшился за последние несколько лет. Он стал более дружественный к пользователю и более привлекательным — и есть все основания для этого: на протяжении многих лет мы шли к выводу, что дизайн, который сфокусирован на юзабилити и пользователе, является более эффективным. Современные дизайны не заполнены радостными и громко кричащими баннерами. Мы научились общаться с посетителями, привлекать их к обсуждению и получать их доверие, удовлетворять их потребности и говорить с ними честно и открыто.
Выделим некоторые требования веб-дизайна:
1. Web-сайт должен грузиться быстро и быть прост в использовании.
2. Необходимо предоставлять определенную информацию, необходимую пользователям.
3. Графика должна быть столь стилизована, чтобы соответствовать информационному наполнению, а не наоборот, чтобы не отвлекать внимание от информационного наполнения.
4. Необходимо выбрать начертание шрифта и цвет, который может легко читаться. Частое использование полужирных шрифтов делает страницу нечитаемой. Цвет фона должен также быть контрастным по отношению к цвету текста.
5. Использовать графику на сайте в умеренном количестве, чтобы сделать его привлекательным. Но графика не должна отклонить внимание читателей от информационного наполнения.
6. Нужно избежать "дьявольских" изображений. Они отвлекают внимание читателей от информационного наполнения.
7. Избегать неработающих (битых) ссылок.
8. Использовать контрастирующие элементы на сайте для привлечения внимания посетителей.
9. Информационное наполнение должно эстетически нравиться, а также должны быть сильные функциональные возможности сайта.
10. Нельзя повторять заголовки страниц.
11. Информационное наполнение и заголовки страницы должны быть грамматически правильными.
12. Главная страница должна быть привлекательной и обеспечить посетителя анонсами полезной информации.
2.5.2 Структурирование и формирование контента
Структурирование текста, да и самого контента, занимает чуть ли не главное место в процессе разработки веб-страниц. Правильное расположение информации, выделение главного, создание таблиц, списков намного облегчает восприятие текста.
Таким образом, для выделения заголовков был выбран полужирный шрифт в 18 пунктов оранжевого цвета (рисунок 2.6).
Рисунок 2.6 – Выделение заголовков
Также использовались маркированные списки с заданным рисунком в виде стрелки (рисунок 2.7) [19].
Рисунок 2.7 – Применение маркированного списка
Для того, чтобы структурировать некоторую часть материала были применены таблицы. Чтобы не утяжелять их громоздкими и «тяжелыми» границами была выбрана толщина линий, равная одному пикселю, одномерная. Для реализации такого решения были применены следующие атрибуты [4]:
<table bordercolor=0 border=1 cellpading=2 style="border-collapse: collapse">
Пример использования таблицы представлен на рисунке 2.8.
Рисунок 2.8 – Применение таблиц
Для более наглядного представления информации на странице Карта сайта был применен рисунок с использованием гиперссылок на другие страницы. Для этого использовались гиперпрямоугольники, доступные на панели инструментов Рисунки (рисунок 2.9).
Рисунок 2.9 – Использование гиперпрямоугольников
2.5.3 Графика и анимация в HTML-документах
На сегодняшний день 90% графики, представленной в Интернет, хранится в основных графических форматах GIF и JPG (JPEG). В них заложены различные алгоритмы сжатия изображений, позволяющие уменьшить размеры графических файлов.
Одним из способов использования графики в HTML является внедрение графических образов в документ с помощью тега IMG, что позволяет пользователю непосредственно увидеть изображения [4].
Синтаксис тега IMG:
<IMG SRC="URL" ALT="text" HEIGHT=число WIDTH=число ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom|left|right BORDER=число VSPACE=число HSPACE=число >
На страницах разрабатываемго сайта было использовано множество различным графических изображений. Пример приведен на рисунках 2.10, 2.11.
Рисунок 2.10– Использование графики на сайте
Рисунок 2.11 – Использование графических изображений
2.6 Разработка и настройка системы гиперссылок
Гипертекстовые связи (ссылки) являются наиболее важным элементом веб-страниц. С их помощью реализуется технология гипертекста. Гипертекст - текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д.
Технология гипертекста основывается на использовании так называемых гиперссылок. Гиперссылка – это фрагмент HTML-документа, указывающий на другой файл, который может быть расположен в Интернет, и содержащая полный путь (URL) к этому файлу. Также могут использоваться закладки (якорь), позволяющие быстро переходить от одного раздела к другому внутри документа, не используя прокрутку экрана.