Смекни!
smekni.com

Сайт города Щербинка: проект и разработка (стр. 2 из 4)

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

Скрипт, или сценарий, это программа такая, которая выполняется для сборки или обеспечения работоспособности веб-сайта. Скрипты бывают разных типов и, в зависимости от этого, могут выполняться либо на ПК (клиентские скрипты), либо на сервере. Задача клиентских скриптов – обеспечить динамичность страницы сайта. У серверных скриптов, естественно, гораздо больше возможностей и задач.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. CSS это язык стилей, определяющий отображение HTML-документов.

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

2.2 Формирование требований к программному обеспечению

Веб-обозреватель, бра́узер (от англ. Web browser; вариант броузер — неправильно) — программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой. Браузеры постоянно развивались со времени зарождения Всемирной паутины и с её ростом становились всё более востребованными программами. Ныне браузер — комплексное приложение для обработки и вывода разных составляющих веб-страницы и для предоставления интерфейса между веб-сайтом и его посетителем. Практически все популярные браузеры распространяются бесплатно или «в комплекте» с другими приложениями: Internet Explorer (совместно с Microsoft Windows), Mozilla Firefox (бесплатно, свободное ПО), Safari (совместно с Mac OS или бесплатно для Windows), Opera (бесплатно, начиная с версии 8.50), Google Chrome (бесплатно, свободное ПО).

Mozilla Firefox — свободно распространяемый браузер. Второй по популярности браузер в мире и первый среди свободного ПО — в феврале 2010 года его рыночная доля составила 24,23 %, в отдельных странах — до 45 %.В браузере присутствуют вкладочный интерфейс, проверка орфографии, поиск по мере набора, «живые закладки», менеджер закачек, поисковая система. Новые функции можно добавлять при помощи расширений.Firefox выпускается для Microsoft Windows, BeOS, Mac OS X, Linux и множества других Unix-подобных операционных систем.

JavaScript — объектно-ориентированный скриптовый язык программирования. JavaScript предназначен для написания сценариев для активных HTML-страниц. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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