Сайт типографии

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

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

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

     Этап 4. Кодирование

     Под кодированием обычно понимается создание дизайна, написание всех необходимых  скриптов и их совместная отладка.

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

• качество оформления (просто обязательно) без ущерба для функциональности, при простоте управления; 
  индивидуальность дизайна сайта, узнаваемость марки (компании);
• удобство навигации (с учётом задач управления навигацией); 
  задачи удачной индексации сайта;

• скорость загрузки с контролем режимов загрузки страниц сайта.

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

     В кодирование сайта входит способ преобразования текстовой информации для передачи в сети Интернет. При  создании сайта, необходимо учитывать  кодировку его страниц. Язык по умолчанию  определяет раскладку клавиатуры, кодовую  страницу системы, вид кодировки HTML, используемый установленными на компьютере приложениями. Кодовые страницы и  виды кодировок могут применяться  к различным языкам. Тип кодировки  указывается в разделе заголовка  html-документа. Для корректного отображения сайта различными браузерами используется кодировка utf-8: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     Этап 5. Наполнение

     На  этом этапе происходит наполнение сайта  информацией.

     Этап 6. Внедрение

           

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

     Этап 7. Развитие

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

     Общий алгоритм работы сайта  состоит из следующих пунктов:

1. Открытие  любого браузера. Ъ
2. Загрузка основной страницы index.html.
3. Подключение каскадной таблицы стилей style.css.

4. Генерация основной страницы на основе каскадной таблицы стилей. Формирование меню.

5. При нажатии на различные ссылки– вызов соответствующего html-документа.
6. При вызове из меню пункта «Главная» – загрузка в браузер файла index.html.
7. При вызове из меню пункта «О нас» – загрузка в браузер файла onas.html.(Данная страница содержит краткую информацию о предприятии).
8. При вызове из меню пункта «Контакты» – загрузка в браузер файла сontact.html.(Здесь находится список необходимых для пользователя контактов)
9. При вызове из меню пункта «Заказчикам» – загрузка в браузер файла zakaz.html (Данная страница содержит  конкретную информацию о принимаемых материалах).
10. Слева находится меню «Наша продукция» и перечень соответствующих ссылок, нажав на любую из них пользователь может подробно ознакомится с выпускаемой продукцией.

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

 

      2.2 Описание программы 

     Данный  сайт разработан с помощью  языка  разметки гипертекста HTML с использованием языка Java Script и применением каскадной таблицы стилей.

     Проект  состоит из  следующих файлов:

     index.html – главная страница сайта.

     onas.html – страница, содержащая информацию  о типографии.

     cont.html – список необходимых контактов.

     zakaz.html –информация для заказчиков.

     Подпункт  меню «Наша продукция» содержит следующие  файлы: brosh.html, bykl.html, flaer.html, gazet.html, gram.html, kal.html (kal1.html, kal2.html, kal3.html, kal4.html), katal.html, knig.html, listov.html, otkr.html, plakat.html, vizit.html.

     style.css – внешние каскадные таблицы стилей.

     Существует  папка images, где содержатся все используемые в проекте изображения в форматах JPG и GIF.

     Первым  тэгом, с которого нужно начинать описание документов html, является тэг <html>, а завершается документ тэгом </html>. Эти тэги обозначают, что находящиеся между ними строки представляют собой единый html-документ.

     Раздел  заголовка документа определяется тэгом <head>.

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  – в данном тэге указывается кодировка страниц.

     Тэг <title>ОАО "Ковылкинская типография"</title> содеожит заголовок сайта, в заголовке  должно использоваться не более 64 символов.

     Для вызова всплывающего меню, в разделе  заголовка описывается соответствующий скрипт:

     <style>.smenu

           position: absolute;

           padding: 5px;

           width: 174px;

           visibility: hidden;

           background-color: #EEEEEE;

           border: 1px solid gray;

           left: 245px;

           top: 420px;

     </style>

     <script language="JavaScript"> over_header = new Array();

     over_menu = new Array(); for(i=1;i<=3;i++) over_header[i] = 0;

     over_menu[i] = 0; function Turn(id, mode)  if(mode)

     eval("setTimeout(\"On(" + id + ");\",200)");

     else eval("setTimeout(\"Off(" + id + ");\",200)"); function On(id)

     eval("document.getElementById('smenu" + id + "')").style.visibility =

     "visible"; function Off(id) if(!over_menu[id] && !over_header[id])

     eval("document.getElementById('smenu" + id + "')").style.visibility =

     "hidden";</script>

     <link rel="stylesheet" type="text/css" href="style.css" />  – осуществляет вызов каскадной таблицы стилей.CSS позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

     Тэг <body>  определяет основную часть документа, здесь содержаться все основные конструкции документа.

      <div id="logo"> –  является  элементом уровня блока, служащего  для выделения фрагмента документа,  целью этого выделения является  управление параметрами данного  фрагмента.

     <ul id="nav">               

     <li class="grey"><a href="knig.html">Книги</a></li>

     <li class="grey"><a href="listov.html">Листовки</a></li>

     <li class="grey"><a href="plakat.html">Плакты, афиши, постеры</a></li>

     <li class="grey"><a href="otkr.html">Открытки и приглашения</a></li> <li class="grey"><a href="gram.html">Сертификаты, дипломы, грамоты</a></li> <li class="grey"><a href="flaer.html">Флаеры</a></li>

           </ul> – создает маркированный список, внутри которого располагаются элементы списка.

     <p align="center"> – разделяет текст  на абзацы, внутри тега параметр  выравнивания текста по центру.

     <font  size="+3" color="#000033">… </font> – указывает параметры шрифта, относится к тегам физического форматирования.

     <a href="bykl.html">Буклеты</a> – определяет ссылку на документ.

     С помощью тега <table>  осуществляется  добавление таблицы, таблица в HTML строится по строкам, тег <tr> определяет строку, тег < td> – данные в ячейке,  <th> содержит заголовок таблицы.

     <h2>Вас  приветствует сайт ОАО &quot;Ковылкинская  типография&quot;!</h2> – заголовок  в документе, может принимать  значение от одного до 6. <h1> – самый крупный, <h6> – самый маленький.

     Теги  <b>, <i>, <tt>, <u>, <big>,< small>, <sub>, <sup> – служат для физического форматирования текста, заключенного между ними.

     Теги  <cite>, <code>, <del>, <em>, <samp>,<strong> – служат для логического форматирования.

     <img src="images/DSC00023.JPG" width="263" height="195" /> – вставляет изображение в документ, параметры width и height определяют ширину и высоту.

     Вызов всплывающего меню осуществляется при  помощи следующей конструкции:

     <a href="kal.html" onMouseOut="Turn(1,0); over_header[1]=0;"

     onmouseover="Turn(1,1); over_header[1]=1;">Календари</a>

     <div id="smenu1" class="smenu"

     onmouseover="over_menu[1]=1;" onMouseOut="Turn(1,0); over_menu[1]=0;">

     <a href="kal1.html" title="Календарь карманный">Календарь карманный</a><br>