Основные правила и этапы создание сайта

СОДЕРЖАНИЕ

 

ВВЕДЕНИЕ 2

1 КОНЦЕПЦИЯ  WWW 3

2 ОСНОВНЫЕ  ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА 5

2.1 Правила  Web-дизайна 6

2.1.1 Что такое  стиль? 6

2.1.2 Цветовые  ассоциативные и эмоциональные  модели 8

2.2 Браузеры 9

2.3 Обеспечение доступности Web-страницы 11

2.4 Представление графики на Web-страницах 12

2.5 Графические редакторы 14

3 ДВИЖОК DATALIFE ENGINE 17

3.1. Общие  возможности 17

3.2 Общее описание  сайта LoreLie.tk 21

ЗАКЛЮЧЕНИЕ 23

СПИСОК ИСПОЛЬЗОВАНЫХ  ИСТОЧНИКОВ 24

 

 

ВВЕДЕНИЕ

 

World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

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

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

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

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

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

 

 

 1 КОНЦЕПЦИЯ WWW

 

WWW - это распределенная  информационная система мультимедиа,  основанная на гипертексте. Давайте  разберем это определение по  порядку.

Распределенная информационная система: информация сохраняется на огромном великом множестве так  называемых WWW-серверов (servers). То есть компьютеров, на которые установленное специальное программное обеспечение и которое объединенные в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который сохраняет файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol,  сокращенно - HTTP.

Мультимедиа: информация включает в себя не только текст, но и двух- и трехмерную графику, видео и  звук.

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

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

Итак, Web-страница может содержать стилизованный и форматированный текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра.

 

2 ОСНОВНЫЕ  ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА

 

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

Все предугадать невозможно, но на начальном этапе можно придерживаться следующих правил:

– если разрабатывается  сайт научного или академического содержания, особое внимание следует обратить на то, как сайт работает в Lynx (или в другом неграфическом браузере);

– если сайт предназначен для  потребителей – например, сайт, который  предлагает обучающие игрушки для  детей, – внимание обращается на скорость загрузки и внешний вид сайта  для AOL-браузеров;

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

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

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

2.1 Правила Web-дизайна

2.1.1 Что такое стиль?

 

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

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

Основные элементы стиля  сайта:

• Логотип
• Модульность
• Шрифты
• Цвета
• Иллюстративный ряд (приемы обработки изображений)

На данный момент можно  определить как типы -

"текстовый" дизайн - определяется содержанием и концепцией автора. "Текстовый" не означает простой или примитивный. На первом уровне это означает почти полное отсутствие изображений как таковых, что значительно ускоряет загрузку страницы. А навигационные и декоративные элементы выполняются теми же "символьными" приемами. Нужно сказать, что HTML как таковой значительно расширил возможности при разверстке страниц этого типа, и теперь при помощи кода можно делать и тени, и даже изображения (хотя изображение кодом зачастую больше по "живому весу", чем аналогичное в GIFе или JPGе)... При таких разверстках следует хорошо знать классические верстальные приемы, особенности используемых шрифтов.

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

"интерфейсный" дизайн - сейчас его еще называют usability. Стиль, призванный максимально облегчить жизнь пользователю во всех ее проявлениях, от загрузки странички (минимизирование кода и предельная оптимизация изображений) до особого, доведенного до религиозного поклонения тщательного исполнения каждого элемента. Досконально продуманная (как правило) навигация, изначально понятность пользования общей схемой сайта - такой подход к веб-дизайну вызывает только глубокое почтение и уважение. И даже если с точки зрения изобразительной эстетики на таком сайте окажется не все гладко, то с лихвой окупится остальными достоинствами.

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

2.1.2 Цветовые  ассоциативные и эмоциональные  модели

 

Цвет - это эмоции и настроение. Вы можете взбодрить зрителя, навеять на него осеннее или весеннее настроение, или наоборот, вогнать в смертную тоску. Светло-серый цвет у нас называется серебряным, темно-серый с оттенками - «мокрый асфальт», грязно-белый - «белая ночь». «Коррида» - и мы сразу представляем алый, но особого оттенка. В ход идут названия напитков - «кофейный», «шоколадный», «молочный». Не брезгуем и названиями фруктов - «оливковый», «вишневый». Идет в ход все, с чем можно сравнить необычный оттенок.

«Престижные», золото, серебро, темно-серый, черный. Их задача - передать солидность, уверенность, стабильность и высокую стоимость.

«Пастельные», нежные бежевые, розовые, голубоватые... Женственные, мягкие, расслабляющие...

«Здоровые», из американской психологии... Чистота, здоровье, уверенность, семья.... (соя, кукуруза…)

«Природные», близкие к естественным органическим, природным компонентам...

 

 

Как вариант использования цвета - «Растяжки»... Обычно тональные оттенки  одного цвета, и как акцент - более  активный цвет.

 

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

 2.2 Браузеры

 

Многие Web-дизайнеры сходятся во мнении, что одна из главных проблем Web-дизайна – многообразие браузеров и платформ, каждая из которых по-разному поддерживает HTML и сценарии. С выпуском каждого нового браузера улучшаются их характеристики и возможности, но это не означает, что более ранние версии при этом исчезают. В большинстве своем люди не склонны гнаться за новейшим и лучшим. Одни довольствуются тем, что у них имеется, а другие, вероятнее всего, работают на компьютерах фирм или учреждений, которые выбрали браузеры за них.

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

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

Opera – это маленький и простенький браузер, созданный норвежской компанией Opera Software в Осло. Этот браузер обладает исключительно малым временем загрузки и минимальными требованиями к объему диска. Достоинством Opera является полное соответствие стандартам HTML. Неточности в написании тегов (например, пропущенные закрывающие теги, неправильное вложение и т. д.), которые пропускают более солидные браузеры, не будут правильно отображаться этим браузером. Opera 5.0 поддерживает Java, каскадные таблицы стилей и DHTML.

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

Lynx. Lynx – это распространяемый бесплатно браузер, обеспечивающий просмотр только текста, предлагает вам быстрый и надежный доступ в Web. Он заслужил известность как наименьший общий знаменатель стандарта, пригодный для тестирования Web-страницы по базовым функциональным характеристикам. Несмотря на простоту, этот браузер не устаревает. Lynx постоянно совершенствуется и модернизируется. Сейчас он обеспечивает поддержку таблиц, форм и даже JavaScript!