|
|
|
Учебное пособие Создание сайта
С чего начинается создание веб сайтаПервое, что необходимо сделать, прежде чем браться за создание любого веб сайта, это подумать о целях, которые вы ставите перед собой, создавая новый проект. От выбора целей будут зависеть методы их достижения, в том числе и дизайн сайта. От правильной постановки задач будет зависеть успех всего предприятия. Вы хотите домашнюю страничку? Замечательно. Возьмите ручку, лист бумаги и прикиньте, какие тематические разделы должен включать ваш сайт, о чем именно вы хотели бы рассказать посетителям на его страницах. Вы решили создать некоммерческий информационный сайт? Прекрасно. Определитесь, чему он будет посвящен. Если это развлекательный сайт, после того как вы придумаете перечень соответствующих рубрик (например, «анекдоты», «карикатуры» или «юмористические рассказы»), необходимо подобрать для него подходящее дизайнерское решение, более или менее отвечающее содержанию создаваемого сайта. Прогуляйтесь по Интернету, посмотрите, что уже создали ваши «коллеги», какие разделы есть на аналогичные сайтах, оцените, какой информации на них не хватает, а какой — наоборот, переизбыток, как эта информация «подается» потребителю, скучно ее читать или, наоборот, интересно и увлекательно. У вас возникла необходимость создать коммерческий сайт? В этом случае и перечень тематических разделов, и окончательное решение относительно применяемых вами дизайнерских приемов, таких как использование корпоративных цветов, специальных шрифтов или кнопок, стилизованных под общую концепцию проекта, будет принимать, скорее всего, заказчик сайта. Однако в любом случае вам придется предоставить ему несколько пробных вариантов, так называемых дизайн-проектов, показывающих возможные реализации будущего ресурса. Обратитесь к сайтам конкурирующих организаций, отечественных и зарубежных, посмотрите, какие рубрики составляют их веб сайты, какие данные предлагаются в каждом тематическом разделе. После того как вы определитесь с количеством, названиями и содержанием всех разделов своего проекта, можно переходить к следующему этапу создания сайта — проектированию его логической и физической структуры. Необходимо помнить, что и список рубрик, и количество представленных в них материалов, да и содержимое самих документов будет, скорее всего, неоднократно изменяться и дополняться. Логическая и физическая структуры вашего проекта должны отвечать подобным требованиям «мобильности», у вас не должно возникать ни малейших проблем с организацией или реорганизацией гиперсвязей внутри проекта, если какой-либо составляющий его документ вдруг перестанет существовать. У вас не должно также появляться необходимости переделывать дизайн всех веб страниц при добавлении в состав проекта новой рубрики только потому, что существующие гиперссылки не позволяют внести такие изменения, а новую кнопку навигации уже «некуда впихнуть». Подробно продумайте все гиперсвязи между страницами ресурса, разработайте структуру директорий и поддиректорий, в которые вы будете размещать документы. Только после этого можно обратиться непосредственно к вопросам дизайна сайта. Прикиньте и зарисуйте компоновку создаваемых веб страниц. Карандашом. На бумаге. Учтите, что если логическая структура вашего сайта подразумевает наличие стартовых страниц разделов, или, как их еще называют, индексных файлов, дизайн этих страниц, а также стартового документа самого сайта будет, скорее всего, несколько отличаться от дизайна составляющих рубрику информационных страниц. Индексные файлы содержат обычно ссылки на документы, составляющие данную рубрику, иногда — краткие анонсы этих документов. Основное содержание самих информационных страниц составляет информационный текст и, по мере необходимости, иллюстрации. Представте общую компоновку веб страниц и продумайте структуру невидимой таблицы, в которую затем будут включены их компоненты. Проектируя таблицу, необходимо учитывать, что между ее столбцами, содержащими различные элементы документа, желательно оставлять отступ шириной несколько пикселов. Делается это с целью избежать эффекта «прилипания» колонок друг к другу, наблюдающегося, когда между элементами веб страницы отсутствует горизонтальный отступ, что заметно портит внешний вид документа. Создание верстальной таблицы — это, пожалуй, одна из наиболее сложных процедур при разработке сайта. Начертить таблицу безошибочно с первой попытки практически невозможно. Навык, благодаря которому веб мастер за несколько секунд рисует все необходимые строки и столбцы «на глаз», приходит только с опытом. Здесь трудно дать какие-то конкретные советы, чтобы помочь начинающему дизайнеру. Научиться быстро проектировать верстальную таблицу для нового сайта можно только одним способом: загрузите несколько созданных другими авторами веб страниц, посмотрите в html-редакторе, какие таблицы применяются ими для отображения данных документов, внимательно изучите их, после чего попытайтесь создать пару-тройку своих. Для построения сложных таблиц можно применять вложение одной таблицы в другую: например, первичная таблица шириной 900 точек задает горизонтальное разбиение страницы, в каждую из ее ячеек вкладывается еще одна, равная ей по ширине невидимая таблица, обеспечивающая вертикальное разбиение. Такой подход позволяет дробить различные участки веб страницы независимо друг от друга, создавая, к примеру, в одном ее поле четыре вертикальные колонки различной ширины, а в другом — две, оперируя при этом различными параметрами вложенных таблиц в пределах одного и того же документа — размером пространства между колонками, толщиной границ и т. д. После того как будут скомпонованы основные элементы документа и размечена невидимая таблица, у вас должен получиться примерный эскиз будущего сайта. Теперь настала очередь подготовки контента. Сначала рекомендуется набрать в любом текстовом редакторе все необходимые тексты, причем сохранять их лучше всего в формате с расширением .txt. Затем надо нарисовать в векторном редакторе (например, в Corel-Draw) необходимые графические элементы, после чего по мере необходимости оптимизировать их размер с помощью специальных компрессоров или других аналогичных средств. Только после всех описанных выше процедур можно приступать непосредственно к сборке страницы: созданию ее макета в HTML-редакторе, написанию и окончательной отладке кода. Поскольку дизайн всех документов, составляющих ваш будущий сайт, скорее всего, будет практически идентичным, в первую очередь рекомендуется создать так называемый шаблон. Шаблон представляет собой html-документ, содержащий невидимую таблицу, заголовок, все графические объекты, элементы навигации — иными словами, практически все, за исключением непосредственного информационного наполнения. Если впоследствии у вас возникнет необходимость включить в проект новый документ, вам будет достаточно открыть в html-редакторе готовый шаблон и импортировать в него текст и все необходимые иллюстрации. Рекомендуется разработать и сохранить на диске два различных шаблона: для информационной страницы и индексного файла. Когда страница будет готова, ее следует проверить на идентичность отображения в различных броузерах при различных экранных разрешениях и цветовых палитрах. Загрузите созданный вами html-документ в Microsoft Internet Explorer, установите значение цветовой палитры экрана равным 256 цветов, после чего последовательно измените экранное разрешение на 800x600, 1024x768 и, наконец, на 1600x1200 точек. Посмотрите, не меняется ли компоновка страницы, не «съезжают» ли ее элементы относительно друг друга. Проделайте ту же процедуру для Opera, Safari и Firefox . Если никаких существенных изменений вы не заметите, можно быть уверенным, что другие документы, созданные с использованием того же шаблона, с вероятностью 95 % будут отображаться столь же корректно. В итоге последовательность действий по создании веб сайта сводится к следующему несложному алгоритму:
|
|
|