Разработка сайта «Припять» Сайт посвящен Чернобыльской трагедии

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

 

 

 

 

1.4 Меню

 

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

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

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

 

Для крупных сайтов, где просто физически  невозможно уместить все наименования разделов в меню, лучше всего добавить поисковую форму. При этом есть возможность  установить специальный поисковый  скрипт, либо занести на свой сайт поиск, любезно предоставленный поисковой  системой (например, Яндекс или Google). Преимущества «поиска» в том, том, что благодаря нему пользователь находит несколько текстов, в которых встречалось искомое слово, поэтому имеет возможность наиболее полно ознакомиться с интересующей информацией.

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

В своём сайте  я поместил меня в «подвале сайта». На мой взгляд это очень удобно. Пользователи при просмотре моего сайта и отдельно взятой страницы в итоге прокрутят её в самый низ и им удобнее будет перейти в следующий, интересующий их раздел.

 

 

Рис1. Меню сайта Припять

 

 

 

1.5 Главная страница сайта

 

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

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

 

 

 

Рис 2. Главная страница сайта Припять.

 

 

 

 

1.6 Компоновка страницы

 

Компоновка  веб-страницы — так называется процесс  создания отдельного HTML-файла; в сущности, это не что иное, как эстетичное и корректное размещение на веб-странице всех составляющих её контент (содержание) элементов. Иначе говоря, так мы называем работу по заполнению страницы тематическим содержанием, её макетирование. Очень  важным отличием от всех иных работ, проводимых вплоть до описываемого момента, является начало иллюстрирования всего проекта (непосредственно на данном этапе).

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

 

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

В технологиях веб-дизайна известны три традиционные схемы компоновки контента: вертикальная, горизонтальная и комбинированная. Кроме них, существует ещё и так называемая смешанная  схема (иначе — «свободная»), в  которой контент на веб-страницах  размещается без какого-либо «стандарта», но только по прихоти автора-компоновщика. Приводить примеры такого размещения я не собираюсь, поскольку это  стало бы просто натуральной профанацией.

 

 

 

1.7Фотогалерея.

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

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

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

• изображения, входящие в фотогалерею, должны быть оптимизированы, то есть иметь минимальный объем при сохранении высокого качества картинки;
• если фотографии открываются в отдельном окне, то в нем должно присутствовать меню сайта и кнопка возврата к началу фотогалереи, чтобы посетитель мог легко продолжить просмотр или перейти в другой раздел сайта;
• на все изображения желательно наносить полупрозрачный логотип компании или хотя бы название сайта. Это затруднит использование ваших фото на других сайтах, а кроме того, будет ненавязчиво привлекать внимание посетителя к названию вашей фирмы;
• желательно при демонстрации фотографий использовать некоторые приёмы, характерные дляслайд-шоу, например, эффекты переходов и т.п. Однако применять их следует с большой осторожностью, так как далеко не у всех пользователей быстрый интернет

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Заключение.

 

 

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

Список  используемой литературы

1. AdobeDreamweaverCS4: офиц. учебный курс. – М.: Эксмо, 2009. - 304 с.
2. Александров, А.В. Создание web-страниц и web-сайтов / А.В. Александров, Г.Г. Сергеев, С.П. Костин. - М.: Триумф, 2008. – 288 с.
3. Дронов, В.А. AdobeDreamweaverCS4 (+ CD-ROM) / В.А. Дронов. – М.: BHV, 2009. - 832 с.
4. Кисленко, Н.П. HTML. Самое необходимое (+ CD-ROM) / Н.П. Кисленко. - СПб: БХВ-Петербург, 2008. - 352 с.
5. Коэн, И.Л., Коэн, И.Д. Полный справочник по HTML, CSS и JavaScript: [пер. с англ.] / И.Л. Коэн, И.Д. Коэн. - М.: ЭКОМ, 2007. - 1168 с.
6. Мейер, Э. CSS - каскадные таблицы стилей: подробное руководство / Э. Мейер. – М.: Символ-Плюс, 2008. - 576 с.
7. Хольцшлаг, М. Языки HTML и CSS для создания Web-сайтов: официальный учебный курс: [пер. с англ.] / М. Хольцшлаг. – М.: Триумф, 2007. - 304 с.
8. http://pro.net.ru/ - Записки web-мастера.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение.

 

Приложение 1. Измерения страницы.

 

• Цвет  фона – #000
• Фоновая картинка – fon.jpg
• Шрифт сайта – impact, CenturyGothic
• Размер шрифта – 30pt
• Цвет шрифта - #fff

 

 

Расстояние:

• От начала страницы до логотипа – 30px
• От конца страницы до меню – 40px
• От начала страницы до текста – 486px
• От бока страницы до текста – 93px
• Размер логотипа: 340х117
• Размер картинки: 720х518
• Размер ветки: 183х192

 

 

 

 

 

Приложение 2. Код главной страницы.

 

<html>

<style>

body {height: 100%;width: 100%;background-repeat: no-repeat;

background-image:url(image/fon.jpg) ;margin: 0px;padding: 0px;}

#sait{

 

 

#logo{height: 117px; width: 340px;background-repeat: no-repeat;background-image: url(image/logo.png);margin-top: 30px; }

 

#photo{height: 518px; width: 720px;background-repeat: no-repeat;background-image: url(image/photo.png);margin-left: 450px;margin-top: -130px;}

 

#text{

height: 175px; width: 665px;background-repeat: no-repeat;background-image: url(image/text.png);margin-left: 60px;margin-top: -50px;}

 

#list{height: 100px; margin-left: 200px;margin-top: 130px}

 

#list img{float: left;}

 

</style>

<body>

<div id="sait">

<div id="logo"></div>

<div id="photo"></div>

<div id="text"></div>

<div id="vetka"></div>

 

<div id="list">

<a href="istoria.html"><imgsrc="image/istoria.png" border=0/></a>

<a href="tragedia.html"><imgsrc="image/tragedia.png" border=0/></a>