Строительство корпоративных сайтов. Часть I1

Шаблоны и базы данных

Покушение на данные

Web и поток

Этап 1. Организационная структура сайта

Этап 2. Проектирование интерфейса

Этап 3. Предварительное проектирование структуры сайта

Этап 4. Программирование скриптов по индивидуальным проектам

   Познакомьтесь с основными терминами

 

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

Однако для начала присядьте. Мы собираемся сообщить вам одну новость, которая, возможно, вас очень удивит. Оказывается, публикация баз данных на Web’е — не такая уж и сложная задача, как вы могли подумать. Конечно, по сравнению с «нормальным» Web-сайтом в данном случае вас ждет больше суеты и волнений на этапе планирования, но если уж вы возьметесь за это дело, то вопреки ожиданиям оно окажется вполне посильным.

Покушение на данные

Существует несколько способов переноса баз данных на Web. Одна из самых сложных задач — строительство «живой» базы данных — такой, в которую пользователь мог бы сам вводить данные и редактировать их в интерактивном режиме. Задачи такого рода заставляют Web-мастеров, у которых нет кандидатской степени по информатике, вскакивать среди ночи в холодном поту.

Самый простой путь распространения информации через Web — взять файл базы данных, в котором клиент хранит свою информацию, и положить его на Web-сервер, поддерживающий Microsoft ASP (Active Server Pages) или Netscape SSJS (Sever-Side JavaScript). Можно также воспользоваться дополнительным серверным программным обеспечением от стороннего разработчика, например ColdFusion фирмы Allaire.

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

 

В начало

В начало

Web и поток

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

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

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

 

В начало

В начало

Этап 1. Организационная структура сайта

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

  1. В GoLive 4.0 предусмотрены инструменты для создания и управления сайтами. Ими-то мы и воспользуемся. Выберите команду File>New Site>Blank, затем в диалоговом окне выберите панель Create Folder и введите название сайта (желательно строчными буквами и без пробелов).
  2. Если для тестирования скриптов, действующих на стороне сервера, вы запускаете на своей машине Web-сервер, поместите сайт в предусмотренный по умолчанию каталог HTML. В противном случае его можно размещать где угодно.
  3. В верхней части окна Site выберите папку Site и щелкните на пиктограмме New Folder (Новая папка). Переименуйте папку images и создайте папки с названиями shockwave и data. Возможно, полезно будет завести еще папку resources, в которой можно было бы хранить промежуточные результаты работы.

 

В начало

В начало

Этап 2. Проектирование интерфейса

Нам необходимо в каком-нибудь графическом пакете, например в Fireworks, Xara Webster или Imageready, сделать набросок того, как будет выглядеть наш сайт в готовом виде. Мы обратились к программам Fireworks и Photoshop, поскольку в них есть великолепные инструменты для деления изображения на слои и для экспорта...

  1. У вашего клиента наверняка уже есть готовый логотип. Предположим, к примеру, что этот логотип предоставлен вам в векторном формате. Наш первый шаг — импортировать его в Fireworks, надлежащим образом изменить его масштаб и затем экспортировать файл в формат GIF, оптимизированный для Web’а.
  2. Следующий шаг — открыть GIF в программе Photoshop и вставить его в новое изображение на белом фоне шириной 500 пикселов и высотой примерно 300 пикселов. В программе Photoshop сделайте набросок заголовка сайта. Используйте при этом цвета логотипа.
  3. Изображенная здесь полоса навигационных кнопок — это лишь примерный эскиз, резервирующий место на странице. Позднее мы разработаем более полную и сложную версию полосы навигационных инструментов. На данном этапе мы лишь прикидываем в общих чертах внешний вид страницы, чтобы можно было приступить к конструированию архитектуры сайта.
  4. После того как вы поместили заголовок на нужное место, вытащите из горизонтальной и вертикальной линеек вспомогательные направляющие и постройте из них сетку, отделяющую друг от друга компоненты страницы (как показано на иллюстрации). Включите в меню View режим Snap to Guides («Прилипание» к направляющим) и выберите инструмент marquee (выделение прямоугольной области) и аккуратно, пользуясь вспомогательными направляющими, выделите в изображении логотип.
  5. С помощью команды Edit>Copy (или клавиш CTRL+C в Windows или COMMAND+C в Mac OS) скопируйте выделенную область в буфер. После этого создайте новый документ и вставьте в него содержимое буфера. Переведите файл в режим индексированных цветов и сохраните его в формате GIF в папке изображений, которую вы создали раньше.
  6. Повторите этот процесс с остальными фрагментами изображения, пользуясь при их выделении направляющими в качестве ориентиров. При конвертировании файла в индексированные цвета в диалоговом окне следует выбрать вариант Previous. Чтобы еще больше сократить размер файла, мы воспользовались также программой HVS ColorGIF (см. http://www.digfrontiers.com).

 

В начало

В начало

Этап 3. Предварительное проектирование структуры сайта

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

  1. Переключитесь обратно в Adobe GoLive 4.0, откройте созданный ранее сайт и щелкните на закладке Site. Поместите курсор над нижней частью пиктограммы файла index.html и задержите его там до тех пор, пока не появится пиктограмма маленькой странички. Щелкните на этой пиктограмме, и программа создаст новую страницу, связанную с предыдущей. Назовите ее main.html.
  2. Теперь сделайте двойной щелчок на файле main.html, чтобы открыть его в режиме Layout. Вставьте в него заранее заготовленную графику и с помощью таблиц или монтажной сетки, размеченной посредством направляющих GoLive, воссоздайте тот приблизительный дизайн, который вы набросали в графическом пакете. Более подробно мы поговорим о методах верстки страниц в следующей части.
  3. Выделите графику, изображающую полосу навигационных кнопок, и при помощи инструментов Imagemap в разделе Inspector создайте для каждого значка «активные» области (hotspots). Для первой кнопки в поле ссылки введите имя lettings.html и далее — finance.html, contact.html, infopack.html и about.html. Мы создадим эти файлы чуть позже...
  4. Щелкните в окне Layout на значке Page, чтобы в разделе Inspector появились атрибуты страницы. Установите цвет фона белый. Для этого нужно открыть палитру цветов (Colour Palette) и перетащить белый цвет в поле Background в разделе Inspector. Выполните и другие настройки, соответствующие вашей цветовой схеме.
  5. После того как построение страницы будет закончено, сохраните ее посредством обычной команды File>Save, а затем выберите команду Save As. В открывшемся диалоговом окне выберите из разворачивающегося меню пункт Stationaries и замените имя файла на template.html. Нажмите кнопку OK.
  6. Найдите свою палитру (Palette) и щелкните на закладке Site Extras, чтобы убедиться, что пункт Stationaries виден в разворачивающемся меню. Шаблон, который мы только что создали, должен быть виден в палитре. Щелкните на нем и перетащите его в окно сайта поверх main.html.
  7. Повторяйте эту операцию до тех пор, пока у вас не появится пять новых файлов. Назовите их lettings.html, finance.html, contact.html, infopack.html и about.html. По мере того как вы будете именовать файлы, между ними будут образовываться ссылки, поскольку мы заранее встроили их в шаблон...
  8. Чтобы сохранить целостность карты вашего сайта, сделайте двойной щелчок на файле index.html и добавьте ссылку от него на main.html. Для этого нужно ввести в файл какой-либо текст, выделить его и щелкнуть на значке New Link (Новая ссылка) в палитре инструментов, а затем в разделе Inspector найти файл main.html. В конце концов мы превратим index.html в splash-страницу.
  9. Вернитесь в окно Site, щелкнув в палитре инструментов на значке Toggle Between Windows (Переключение между страницами), и нажмите кнопку New From Links. В результате будут вычерчены созданные вами ссылки между страницами.

 

В начало

В начало

Этап 4. Программирование скриптов по индивидуальным проектам

Работа в режимах drag-and-drop и WYSIWYG — это, конечно, хорошо, но для того, чтобы использовать скрипты на стороне сервера, необходимо опуститься до уровня исходных кодов…

  1. Adobe GoLive — один из самых гибких инструментов Web-дизайна, работающих в режиме drag-and-drop. Он предлагает сразу несколько способов ввода и редактирования сырого кода. Первый и самый очевидный — режим Source. Это режим прямого ввода текста скриптов, в котором подсветкой выделяются URL и места расположения изображений.
  2. В этом режиме GoLive работает, как любой стандартный HTML-редактор, позволяющий непосредственно вводить код или использовать готовые метки из палитры. Именно в этом режиме в полную силу используются Site Components и Custom Objects.
  3. Site Components — это куски кода, которые вы задаете точно так же, как и создаете Stationaries. Разница только в том, что их можно вставлять в любое место на странице (идеальный вариант для создания объектов, управляемых скриптами).
  4. Components — это компоненты, которые используются исключительно в том сайте, над которым вы в данный момент работаете. Помимо этого из любого фрагмента кода можно создать Custom Object, если перетащить этот фрагмент из окна Source или Layout в палитру. Это можно сделать в GoLive, а можно воспользоваться кодом, сгенерированным в любом другом месте.
  5. Уникальный редактор Outline разбивает HTML-документы на компоненты. В этом виде их легче вставлять в Custom Objects. Это очень удобно, когда вы строите интерактивные страницы из заранее заготовленных компонентов и хотите сосредоточиться на самом скрипте.
  6. GoLive «на лету» формирует HTML, хотя он достаточно умен, чтобы оставлять только коды Microsoft ASP и ColdFusion. Кроме того, здесь есть встроенный редактор JavaScript, доступ к которому осуществляется нажатием значка Java в основном окне.

 

КомпьютерПресс 2'2000

1999 1 2 3 4 5 6 7 8 9 10 11 12
2000 1 2 3 4 5 6 7 8 9 10 11 12
2001 1 2 3 4 5 6 7 8 9 10 11 12
2002 1 2 3 4 5 6 7 8 9 10 11 12
2003 1 2 3 4 5 6 7 8 9 10 11 12
2004 1 2 3 4 5 6 7 8 9 10 11 12
2005 1 2 3 4 5 6 7 8 9 10 11 12
2006 1 2 3 4 5 6 7 8 9 10 11 12
2007 1 2 3 4 5 6 7 8 9 10 11 12
2008 1 2 3 4 5 6 7 8 9 10 11 12
2009 1 2 3 4 5 6 7 8 9 10 11 12
2010 1 2 3 4 5 6 7 8 9 10 11 12
2011 1 2 3 4 5 6 7 8 9 10 11 12
2012 1 2 3 4 5 6 7 8 9 10 11 12
2013 1 2 3 4 5 6 7 8 9 10 11 12
Популярные статьи
КомпьютерПресс использует