2.3 Разработка структуры сайта

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

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

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

Линейная структура с альтернативами и вариантами.

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

Линейная структура с ответвлениями.

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

Древовидная структура.

Древовидная структура - самый универсальный способ размещения веб-страниц. Она подходит для создания практически любых типов сайтов. Ее принцип, наверное, понятен всем. Пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т. п. У древовидной структуры очень много достоинств. Главный недостаток: в древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если "дерево" вашего сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц. Естественно, это будет раздражать. Ну а если вы создадите очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки.

Решетчатая структура.

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

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

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

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

дополнительное меню сайта - как правило, представляет собой наиболее сложную структуру. Имеет иерархическую структуру и бывает 3-х видов:

выпадающее меню - раскрывается (выпадает) при наведении на пункт меню;

раскрывающееся меню - имеет раскрывающуюся структуру по клику на кнопку меню;

раскрытое меню - статическое меню, часто имеет древовидную структуру.

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

на главной странице сайта должна быть представлена карта сайта/меню, если не в графическом то текстовом виде;

на всех последующих страницах должны присутствовать ссылки на главную страницу на которой в свою очередь находятся ссылки на эти же страницы;

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

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

Для исполнения навигации обычно применяются следующие типы ссылок/меню:

-внутренние ссылки, связывающие страницы в пределах одного сайта;

-внешние ссылки, связь с докаментами вне данного сайта;

-ссылки на почту;

-локальные ссылки, внутри страницы между определёнными фрагментами информации.

2.5 Публикация сайта

Нет никакого смысла в прохождении всех трудностей создания привлекательного информативного творческого сайта, если никто его не увидит. Кульминацией вашей работы является момент, когда вы делаете свой сайт доступным внешнему миру, публикуя его в интернете. Публикация сайта в первый раз известна также под названием запуска сайта. Для сайта публикация означает копирование всех файлов этого сайта на веб-сервер. После публикации сайта он считается "действующим"; это означает, что любой человек может видеть ваш сервер в своих браузерах. Можно публиковать веб-сервер тремя способами:

можно использовать протокол HTTP (Hypertext Transfer Protocol) для публикации на веб-сервере с установленными серверными расширениями FrontPage Server Extensions или пакетом SharePoint Team Services компании Microsoft.

можно использовать протокол FTP (File Transfer Protocol) для публикации на веб-сервере, не содержащем FrontPage Server Extensions или SharePoint Team Services. Для использования протокола FTP нужно знать имя FTP-сервера, который будет принимать файлы, а также иметь допустимое имя и пароль пользователя.

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

Прежде чем запускать коммерческий сайт в Интернет, нужно выбрать и зарегистрировать доменное имя. Доменное имя - это базовая часть алфавитно- цифрового адреса, который называется унифицированным указателем ресурсов (URL), где посетители ищут ваш сайт через World Wide Web. Например, URL корпорации Microsoft - это www.microsoft.com, и доменное имя - это microsoft.com. Доменное имя может быть собственным именем, названием вашей компании, словом или фразой, представляющей то, что делает компания, или любой выбранной вами строкой букв и цифр. При выборе доменного имени имеет смысл найти имя, которое будет удобно запоминать и произносить. Хорошо подходят доменные имена, содержащие общеизвестные слова. Доменное имя может состоять из нескольких слов, и тогда требуется решить, как представлять эти слова: подряд или разделять их другими символами; наиболее распространен символ подчеркивания. Все имена в сети разбиты на домены различного уровня. Так для России выделен домен первого уровня «.ru». Это - так называемый территориальный домен, его имеет каждое государство (Германия - .de, Великобритания - .uk и т.д.). Кроме территориальных существуют организационные домены первого уровня, они объединяют учреждения различных типов (коммерческие организации - .com, правительственные учреждения - .gov и т.д.). При желании можно разместить русскоязычный сайт в доменной зоне uk, а в зоне com может располагаться сайт общественной организации. Поэтому деление доменов на территориальные и организационные достаточно условно. Доменов первого уровня мало и новые домены появляются крайне редко. Каждый домен первого уровня может адресовать бесконечное количество доменов более низкого уровня.

Дисковые сайты можно запускать на любом компьютере или даже с гибкого диска или CD-ROM. Они поддерживают только базовые функции HTML. Большинство веб-компонентов, поставляемых вместе с программой FrontPage, не действуют на дисковых сайтах. Серверные сайты запускаются на веб-сервере, то есть на компьютере, который специально сконфигурирован для размещения сайтов. При небольших масштабах веб-сервером может быть локальный компьютер (например, ваш собственный), или это может быть сервер сети интернет вашей компании. Личные сайты часто размещаются на серверах провайдеров (поставщиков) услуг Интернет (ISP). При более крупных масштабах веб-серверы, на которых размещены корпоративные сайты интернет, обычно принадлежат профессиональным компаниям по предоставлению веб-хостинга (Web hosting). Некоторые компании веб-хостинга предлагают бесплатные или очень недорогие услуги по веб-хостингу; однако нужно быть осторожным, поскольку это как раз такие случаи, когда вы действительно получаете то, за что платите. Надежные высокоскоростные серверы и надежные хорошо работающие специалисты никогда не бывают бесплатными или дешевыми. Сменить услуги веб-хостинга можно, но это может потребовать больших усилий, поэтому имеет смысл с самого начала принять обоснованное решение, а не учиться на собственных ошибках.

Заключение

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

Литература

1. http://www.zvirec.com/

2. http://www.postroika.ru/

3. http://on-line-teaching.com/

Приложение А

Структура сайта

Приложение Б

План WEB-страниц

План главной страницы

План страницы инфраструктура города

Приложение В

Код программного продукта

HTML - код главной страницы:

<html>

<head>

<title>Сайт города Щербинки</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<table border="3" bordercolor="#808080" cellspacing="0" cellpadding="4" width="100%">

<tr>

<td rowspan="2"><img src="Images/Герб.gif"></td>

<td colspan="7"><img src="Images/Баннер.jpg"></td>

<td rowspan="2"><script language=JavaScript src="Время и дата.js"></script></td>

</tr>

<tr>

<td height="1%" width="12%"><a class=заголовки href="Сайт города Щербинки.html">Главная страница</a></td>

<td width="11%"><a class=заголовки href="История города.html">История города</a></td>

<td width="3%"><a class=заголовки href="Фотогалерея.html">Фотогалерея</a></td>

<td width="2%"><a class=заголовки href="Транспорт.html">Транспорт</a></td>

<td width="16%"><a class=заголовки href="Ифраструктура города.html">Инфраструктура города</a></td>

<td width="9%"><a class=заголовки href="Карта города.html">Карта города</a></td>

<td width="8%"><a class=заголовки href="Карта сайта.html">Карта сайта</a></td>

</tr>

</table>

<img src="Images/главная.gif" align="right" class=фото_справа>

<img src="Images/главная-1.gif" align="right" class=фото_справа>

<div class=основной_текст>

Щербинка -- город в Московской области России.Население -- 31,7 тыс.жителей (2009).Расположен на автомагистрали Москва - Симферополь. Железнодорожная станция Щербинка на линии Москва -- Курск. Город Щербинка расположен в 6 км к югу от Московской кольцевой автодороги вдоль Варшавского шоссе и железнодорожной магистрали "Москва - Тула". С севера и северо-востока территория города Щербинки соприкосается земли Москвой (район Южное Бутово), юго-восток, юга, запада - земли города Подольска, Подольского, Ленинского районов Московской области. Основная часть земель застроена, занята промышленной зоной, благоустроенными многоэтажными жилыми застройками. Зелеными насаждениями занято 2% городской территории. Общая площадь Щербинки -753 га.Щербинка известна с XIV века как деревня. Пристанционный посёлок с конца XIX века. В 1939 году Щербинка стала рабочим посёлком. Статус города с 1975 года. Основные предприятия: Щербинский лифтостроительный завод, заводы электроплавленных огнеупоров, металлоконструкций, художественных промыслов и сувениров, авиационного технологического оборудования, завод защитных покрытий, Научно-технический центр «Бакор». Экспериментальное кольцо ВНИИЖТ, ФГУП «Щербинская типография». Рядом с городом находится аэропорт Остафьево.Большая часть населения работает в Москве и Подольске.В городе действуют 5 детских садов, 5 средних школ, детско-юношеский центр, детско-юношеская спортивная школа, школа искусств. </div>

</body>

</html>

CSS-код:

body {background-image:url("images/фон.jpg");}

.заголовки{font :bold 15px arial,sans-serif;text-decoration: none;color:#800080}

.фото_справа{clear:right;margin:0.3%}

.основной_текст{width:60%;padding:8px;margin-top:10px;border:7px DASHED #008080;text-indent:1.5%;text-indent: 40px;}

.инфраструктура_города{float:left;}

#список{list-style-type:square;}

#список-1{list-style-type:circle;}

.таблица_автобусов{padding:8p;margin-top:10px;border: 17px RIDGE #FFEC8B;}

#отступ{padding:10px;}

#рамка_таблицы_автобусов{border-left:10px DOTTED gold;border-right:10px DOTTED gold;padding:10px;}

#рамка_таблицы_автобусов-1{border-top:10px DOTTED gold;padding:10px}

#рамка_таблицы_автобусов-2{border-left:10px DOTTED gold;border-right:10px DOTTED gold;border-top:10px DOTTED gold;padding:10px;}

.инфроструктура{margin-left:35%;padding:8px;margin-top:10px;border:7px DASHED #008080;}

#буквица{font : italic normal bold 40px arial,sans-serif;color:#8A2BE2;padding-right: 2px;}

#название_города{letter-spacing:3px;font-weight:bold;font-size:20px;color:#FF69B4}

#a10{border-right:5px SOLID #808080;}

Javascript-код определение даты и времени:

function process(){}

today = new Date()

if(today.getMinutes() < 10) {pad = "0"}

else

pad = "";

document.write("<center><FONT SIZE=4 color=black>Welcome!!</FONT></center>")

if((today.getHours() < 12) && (today.getHours() >= 5))

{ document.write("<center><FONT SIZE=4 color=blue>Доброе утро</FONT></center>")}

if((today.getHours() >= 12) && (today.getHours() < 18))

{ document.write("<center><FONT SIZE=4 color=blue>Добрый день</FONT></center>")}

if((today.getHours() >= 18) && (today.getHours() <= 23))

{ document.write("<center><FONT SIZE=4 color=blue>Добрый вечер</FONT></center>")}

if((today.getHours() >= 0) && (today.getHours() < 5))

{ document.write("<center><FONT SIZE=4 color=blue>Доброй ночи</FONT></center>")}

document.write("<center><FONT SIZE=3 color=red>Ваше время: ",today.getHours(),":",pad,today.getMinutes())

document.write(" Дата: ",today.getMonth()+1,"/",today.getDate(),"/",today.getYear(),"<br></font></center>");

Страницы: 1, 2