Разработка информационного web-сайта типографии ООО Камчатпресс

Из системы навигации строится структура сайта. Так будет выглядеть наша структура информационного Web-сайта типографии ООО «Камчатпресс»  (рис. 2.3. ).

Рис. 2.3. Структура информационного

Web-сайта типографии ООО «Камчатпресс»

2.2.           Разработка графического макета будущего web-сайта

Компоновка макета

Под компоновкой макета принято понимать условное (схематическое) рас­положение блоков информации на будущем Web-сайте. Всего можно выде­лить четыре блока информации (рис.5). Рассмотрим каждый из них:

1              "шапка" — занимает верхнюю часть сайта в окне браузера (как правило, не больше 1/4 видимой части экрана без прокрутки) и может содержать:

•              логотип;

•              слоганы, лозунги, девизы;

•              рекламную информацию (баннеры и текстовые блоки) и др.;

2              меню навигации— оно может быть вертикальным, горизонтальным, со­держать подменю и т. д. и т. п.

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

4              "подвал" — нижняя часть сайта в окне браузера, не является обязательным блоком, он лишь подчеркивает четкую структуру сайта и выделяет содер­жательную часть относительно других блоков информации. Он может со­держать:

•              информацию об авторском праве разработчиков Web-сайта (полный текст или ссылка на него);

•              координаты для связи;

•              дублирующую навигацию (текстовую);

•              рекламную информацию (баннеры и текстовые блоки) и др.

Рис. 2.4. Компоновка блоков информационного

Web-сайта типографии ООО «Камчатпресс».

Тип верстки

Еще одним важным моментом, предшествующим началу работы над графи­ческим макетом, является выбор типа верстки. Всего существует два типа:

□              "фикс" — в этом случае сайт "затачивается" под конкретное минимальное разрешение экрана и при изменении размеров окна браузера его компо­новка остается фиксированной;

□              "резина" — структура сайта изменяется пропорционально изменениям размеров окна браузера (т. е. сайт "растягивается").

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

Таблица № 2.1. 

Статистика экранного разрешения поданным системы интернет-статистики HotLog (январь 2006 года, российский Интернет)

Таблица № 2.2.

Статистика экранного разрешения по данным исследовательской группы OneStat (январь 2006 года, мировой Интернет)

Работа над макетом

Наконец мы подошли к моменту, когда нужно открывать Adobe Photoshop (или любой другой удобный вам графический пакет) и творить.

Составим план создания нашего графического макета.

1.              Компоновка блоков: вверху— "шапка", слева и вверху посередине— меню навигации, справа посередине — содержательная часть, внизу — "подвал".

2.              Тип верстки: "резина", минимальное разрешение — 800x600.

3.              Цветовая гамма: белый, черный, серый, оранжевый, красный.

4.              Шрифты: Tahoma.

Итак, задание понятно, приступаем к работе.

Первым делом создаем заготовку размером 780X600 (при разработке макета из ширины в 800 вычитается размер полосы прокрутки в Microsoft Internet Explorer, как правило, 20 пикселов). В основной слой ставим текстуру оранжевого цвета и делаем неподвижный фон. Выбираем инструмент линия и проводим разделительную линию (рис.2.5.).

Рис. 2.5. Разработка макета сайта.

В программе Corel Draw делаем логотип предприятия, если такового нет.

Выбираем инструмент кривую Безье, рисуем логотип, добавляем текст, применяем к логотипу цветовую гамму, и наш логотип готов (рис.2.6.).

Рис. 2.6.Создание логотипа.

Логотип сохраняем в формате Jpeg и добавляем в шапку макета  Photoshop. Рисуем баннер на котором будет располагаться название страницы (рис.2.7.).

Рис. 2.7. Создание баннера.

Баннер сохраняем в формате Jpeg и добавляем в шапку макета  Photoshop.

Также рисуем 3 кнопки к меню навигации (нажатая кнопка, наведенный курсор на кнопку, обычная кнопка )  и сохраняем в формат Jpeg (рис. 2.8.).

Рис. 2.8. Создание кнопки меню навигации.

Добавляем в меню навигации макета Photoshop. Добавляем линию подвала, в котором будет располагаться информация об авторском праве и дублирующая навигация (рис.2.9.).

Рис. 2.9. Готовый макет Web-сайта в Photoshop.

Таким образом, на нашем макете остается незаполненной лишь содержательная часть. Содержательную часть заполняем необходимой для компании информацией, будь-то текст или картинки (рис.2.10.).

Рис. 2.10. Содержательная часть.

Наш графический макет готов к верстке!

2.3. Верстка сайта в редакторе Namo Web Editor.

Открываем программу Namo Web Editor. Во вкладке правка создаем таблицу исходя из шаблона макета в Photoshop. Берем шаблон, делим на 5 частей. Первая часть шапка, откладываем для нее 1 горизонтальную ячейку.

Вторая часть горизонтальная полоса меню навигация, откладываем для   нее 1 горизонтальную ячейку. Для третьей и четвертой части будет разбита горизонтальная ячейка на две вертикальных. Третья часть вертикальная полоса меню навигация, откладываем для нее левую вертикальную ячейку. Четвертая часть  вертикальная содержательная, откладываем для нее правую вертикальную ячейку. Пятая часть подвальная, откладываем для нее горизонтальную ячейку. Все линии таблицы делаем невидимыми. Таблицу выравниваем по центру страницы. Таблица готова (рис.2.11.).

Рис.2.11. Таблица

Все графические элементы (кнопки, баннер, логотип) созданные в Corel Draw, конвертируем в программе Photoshop в формат gif для web, с минимальной потерей качества и максимального уменьшения размера файла (рис.2.12.).

Рис.2.12. Сохранение в gif для Web.

Логотип и баннер вставляем в первую горизонтальную ячейку. Кнопки в строку меню навигации,  2  горизонтальная ячейка и в вертикальную левую ячейку. В вертикальную правую ячейку, содержательную, вставляем всю интересующую информацию о предприятии (текстовую и графическую). Графическую информацию конвертируем в программе Photoshop, сохраняя в jpeg или gif формат для web, с минимальной потерей качества и максимального уменьшения размера файла. В подвал добавляем авторскую информацию и дублирующую текстовую полосу меню навигацию. Текст и графические элементы необходимо отформатировать, задать особый размер и выровнять для лучшего визуального восприятия. Теперь гипертекстовая страница готова. Таким же образом создаем остальные страницы. Связываем их ссылками и сайт готов (рис.2.13.).

Рис.2.13. Гипертекстовая страница.

В программе Namo Web Editor почти полностью исключено ручное написание тегов, необходимо только открыть нужное вам меню и выбрать, что вы хотите сделать с нужным вам объектом либо это текст, картинка или таблица. Но и также можно вручную писать весь алгоритм страницы. Программа Namo Web Editor очень удобная и полезная в редактировании гипертекстовых страниц.

2.4. Внедрение информационного Web-сайта в Интернет сеть.

Предварительно хочу отметить некоторую особенность положения дел в области Интернет коммуникаций на Камчатке. Как и в других случаях с ценами, цены на Интернет услуги превосходят средние цены по стране почти в два раза. Связано это с различными причинами, такими как отсутствие конкуренции среди провайдеров, отсутствием выбора у конечных пользователей, и многих другим. В связи с высокими ценами на Интернет услуги, среди пользователей особенно среди камчатской молодежи, пользующейся услугами диалап-входа в сеть, получило большое распространение такое понятие как городской или локальный Интернет (также известен как Интранет). Это явление знакомо также и другим регионам, но Камчатку в этом отличает неестественная пропорции в отношении между пользующихся локальным и глобальным Интернетом. По данным исследования проведенным редакцией еженедельной газеты «Компьютера», в европейской части России пользуются локальным Интернетом только около 14% пользователей использующих диалап вход в сеть, по приблизительным расчетам на Камчатке этот процент составил примерно около 70%. Связано это с большой разницей в ценах между услугами выхода в глобальный и локальный Интернет. Тариф на услугу в Камчатсвязьинформе на выход в глобальный Интернет составляет от 25 до 60 руб в час, а на локальный всего 13 руб. за тоже время. Ко всем проблемам с ценовой политикой присоединяется проблема качества, очень узкий судя по качеству связи спутниковый канал является также очень непостоянным, скачивание информации происходит в несколько раз медленнее чем при пользовании локальным Интернетом.