Файл: Разработка сайта по интересам.pdf

Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое – базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.

Главное предназначение сайта – это предоставление информации. И, несмотря на то, что в мире существует масса других способов передачи информации, огромное количество людей сегодня выбирает именно этот как наиболее эффективный.

Зачем нужен сайт крупной компании, небольшой фирме или индивидуальному предпринимателю. Сайт компании или корпоративный сайт поможет найти новых клиентов, организовать представительство вашей фирмы на самой активно развивающейся рекламной площадке будущего – сети интернет. Он поможет создать дополнительные, а возможно и основные места продаж товаров или услуг. Это средство заявить о собственном присутствии на весь мир. Ведь именно на вашем сайте будут размещены все контактные данные, стоимость товаров и услуг, карта проезда к ближайшему офису или магазину, доступная любому пользователю в любое время дня и ночи. Таким образом, вы обретете больше новых клиентов, а постоянные никогда вас не потеряют.

2. Задание

Формулируется задание на проект в размере от одной страницы, связанное с темой курсовой.

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

2. Предусмотреть структуру иерархии страниц не менее трех уровней.

3. Количество разделов на странице в пределах трех-шести.

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

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

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

7. На сайте должна быть предусмотрена связь с одной таблицей из базы данных MS Access, содержащей не менее пяти полей и не менее десяти записей

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

3. Концептуальное проектирование сайта

Всемирная паутина охватила абсолютно все сферы жизни человека. Обладание собственным ресурсом – это возможность рассказать о себе людям практически в любой точке земного шара. Да и прорекламировать себя можно и через газету, и через местное радио и телевидение. Все дело в том, что искать информацию гораздо проще в Интернете. Человек уже прекрасно обходится и без телевизора, и без радио, и без газет, ведь, заглянув в сеть, можно получить всю нужную информацию. Даже для того, чтобы узнать погоду, не обязательно вставать и подходить к окошку. Прогноз погоды можно получить быстрее, чем сделать эти пару шагов.

Прежде всего, надо отметить, что сайт компания – это второе "я" заведения. Будучи безмолвным помощником, он, в то же время, красноречиво предоставит всю интересующую вашего гостя информацию. Сайт может выполнять как роль визитной карточки заведения, так и полноценного "виртуального компания".

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

Цели создания сайта:

Создание сайта "Темной Кофейни" должно:

• привести дополнительных покупателей,

• рассказать об истории кофе в целом,

• рассказать об истории некоторых сортов кофе.

Дизайн сайта:

• Простой, ничего не "мозолит" глаза, светлая основная часть сайта.

• На сайте есть удобное меню.

• За 1 клик посетитель может перейти на любую нужную информацию.

4. Разработка приложения

Макет страниц сайта

Данный сайт состоит из 14 страниц. На всех 14 страницах будут присутствовать панель меню и текстовая информация с изображениями (рис.1). В панели меню находится 5 разделов.

Рис. 1. Шаблон для всех страниц сайта.

Главная страница –"Главная"

При входе на сайт мы попадаем на главную страницу (рис.2). На главной странице содержится небольшая информация для любителей кофе о самом напитке.

Рис. 2. Главная страница.

Раздел "История кофе"

На данной странице представлен краткий экскурс в историю кофе (рис 3).

Рис. 3. Раздел "История кофе"

Раздел "Сорта кофе"

Это самый большой раздел сайта, он содержит информацию о продукции, которую продает наша компания. Страница, на которой выбирается сорт по странам представлена на рис. 4.

Рис. 4. Страница выбора сорта по стране

Нажав на флаг любой из предложенных стран, или гиперссылку под флагом, клиент попадет на предложенные сорта кофе из этой страны. Перейдем по ссылке в раздел колумбийских сортов (рис. 5).

Рис. 5. Сорта колумбийского кофе

Из рисунка видно, что наша компания предлагает 2 сорта кофе из Колумбии. Выбрав любой из них, мы попадем на страницу с описанием сорта. (рис. 6).

Рис. 6. Описание сорта Colombia Excelso

Слева имеется меню навигации, с помощью которого можно вернуться на раздел назад, на 2 раздела назад или на главную страницу.

Раздел "Цены"

В разделе "Цены" представлена таблица, в которой покупатель может ознакомиться с ценами на продукцию нашего магазина (рис. 7).

Рис. 7. Прайс лист

Раздел "Заказать"

В разделе "Заказать" наши покупатели могут непосредственно оформить заказ, заполнив ряд полей, представленных на рис. 8.

Рис. 8. Форма заказа

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

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

Основные модели логической структуры:

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

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

Основные сферы использования линейной структуры:

• Создание презентаций в режиме реального времени;

• Пошаговое описание процессов.

Среди основных преимуществ рассматриваемой модели следует выделить предсказуемость поведения пользователей и упрощение процедур разработки сайта. Линейную структуру не имеет смысла использовать при реализации крупных проектов, поскольку она не приспособлена для представления информации в больших объемах.

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

3. Логическая структура сайта, так называемое "дерево". Наиболее распространенная модель, выстраиваемая в определенной иерархической последовательности. Посетители получают полную свободу управления глубиной анализа ресурса и могут заходить на страницы любого уровня.

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

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

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

В нашем сайте мы использовали древовидная логическая структура сайта (рис.9).

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

6. Физическое проектирование

Изучение языка HTML нужно начать с того, что необходимо понять, что это за язык. HTML – это Hyper Text Markup Language – язык гипертекстовой разметки. HTML – компьютерный язык, а следовательно он имеет свои собственные правила (синтаксис), которые необходимо соблюдать.

HTML – это язык разметки, значит он берет определенные части документа и придает им особый.

HTML – это язык гипертекстовой разметки. Гипертекстом можно назвать текст в любом формате, некоторые части текста которого, могут ссылаться на другие части этого текста, что позволяет быстро переходить от одной части текста к другой. На сегодняшний день язык HTML существенно усовершенствован. Его прекрасно дополняют технологии JavaScript, DHTML, CSS, PHP и др., что позволяет использовать новые возможности, но основой всего этого остаются все те же стандартные теги, которые и задают внешний вид web-страницы. Сейчас уже никого не удивишь таким за мудрёным словом, как браузер, и каждый первоклашка скорей всего знает, что это такое и для чего он предназначен. Так вот браузер, считывая информацию со страниц размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Все существующие теги заключены в угловые скобки (<тег>), это и указывает браузеру на то, что перед ним тег, который ориентирует на определенное отображение страницы, причем сами теги на экране не отображаются. Многие теги имеют свои атрибуты (свойства, параметры), которые прописываются в теге и придают обозначенному этим тегом объекту (изображению, тексту, ссылке, слову и т.д.), определенное значение. Регистр букв в наименовании тега значения не имеет. Почти все теги являются парными, то есть существует открывающий "зону действия" тег (<тег>), и соответственно закрывающий (</тег>). Покажу это на примере:

Гипертекстовый документ хранится в файлах с расширением HTML или HTM. Существуют различные редакторы языка HTML, но рекомендуется использовать стандартное средство WINDOWS – блокнот. Большинство тегов HTML являются контейнерами и имеют открывающую и закрывающую форму (по аналогии с открывающей и закрывающей скобкой), то есть их действие распространяется на то, что заключено между открывающей и закрывающей формой тега. Открывающая форма тега отличается от закрывающей формы тега тем, что в закрывающей форме тега перед названием тега ставится наклонная вправо черта (флеш). Название тега и все его атрибуты, если они указываются, заключается в угловые скобки, например: