2 Проектирование сайта

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

Логическая структура сайта — это система ссылочного взаимодействия между страницами виртуального ресурса. Она должна продумываться на самых ранних этапах разработки сайта и являться основой функциональности дизайна [3].

index.html

text1.html

text2.html

text3.html

rez.html

rec.html

Рисунок 2.1– Логическая структура сайта

2.2 Описание элементов структуры

В логической структуре данных:

1. index.html – главная страничка сайта, содержащая навигацию, свежие новости клуба Арсенал и регистрационное поле пользователей.

2. text1.html – страничка содержащая сведения об истории ФК Арсенал.

3. text2.html – страничка содержащая сведения об истории и изображения эмблемы клуба ФК Арсенал.

4. text3.html – страничка содержащая сведения об истории и изображения клубного стадиона.

5. rez.html – страничка содержащая информация разработчика сайта.

6. rec.html – страничка содержащая форму для регистрации пользователей.

2.3 Взаимодействие конструктивных элементов

В построении логической структуры сайта я использовал решётчатую структуру. В ней все страницы размещаются в различных ветках. У пользователя есть возможность перемещаться по ним не только к главной страничке, но и от одной ветви структуры к другой. 

2.4 Вывод по разделу

Логическая структура сайта — это система ссылочного взаимодействия между страницами виртуального ресурса. Она должна продумываться на самых ранних этапах разработки сайта и являться основой функциональности дизайна.

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

3 Реализация сайта

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

Физическая структура подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.

Так как мой сайт расположен не на сервере, а на жёстком диске П.К.

физическая структура моего сайта имеет вид :

E:\

\labaWeb#6

index.html

text1.html

\Жалобы.png

\imeges

text2.html

text3.html

rec.html

rez.html

Загрузка.png

Стадиона.png

История.png

Эмблема.png

Резюме.png

На главную.png

1.jpg

2.jpg

3.jpg

4.jpg

655324074.jpg

Рисунок 3.1 – Реализация сайта

3.2 Описание структуры типовой странички сайта

Страничка сайта состоит из трёх блоков (рис.3.2), а именно: левый, в котором содержится навигация сайта; центральный, в котором находится эмблема и информация сайта; правый, в котором содержится регистрационной поле пользователей.

Рисунок 3.2 – Структура странички сайта

3.3 Стилизация сайта

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

3.4 Интерактивность сайта

Я подключил JavaScript к форме регистрации пользователей на страничке index.html, а так же rec.html, для обработки вводимой пользователем информации. [стр.22]

3.5 Вывод по разделу

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

4 Интерфейс пользователя

4.1 Основные решения по поводу дизайна

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

4.2 Пример роботы пользователя с сайтом

При входе на сайт на главной страничке расположено навигационной поле, расположенное в левой части экрана (рис.4.1) оно предназначается для перехода между страничками сайта.

В правой части экрана расположено поле авторизации пользователей (рис.4.2).

Рисунок 4.1 – Навигационное поле»

Рисунок 4.2 – Поле авторизации пользователей

4.3 Выводы

Для создания сайта и выполнения лабораторных работ былои использованы HTML, CSS и JavaScript.

CSS (Cascading Style Sheets)  каскадные таблицы стилей, служащие для хранения информации об оформлении гипертекстовых документов.

HTML (Hyper Text Markup Language)  стандартный язык разметки гипертекстовых документов, используемый для создания страниц WWW.

JavaScript  прототипно-ориентированный сценарный язык программирования. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью.

Логическая структура сайта  это система ссылочного взаимодействия между страницами виртуального ресурса. Она должна продумываться на самых ранних этапах разработки сайта и являться основой функциональности дизайна.

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

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

Разрабатывая сайт, необходимо прежде всего думать о пользователях, которые будут проводить значительное время на сайте. Поэтому сайт необходимо сделать максимально понятным и простым в эксплуатации. Цветовая гамма сайта не должна быть слишком яркой, и не должна вызывать усталость глаз.