Суть дизайна — формообразование. Форма — внешняя оболочка, представление и способ существования содержания любой вещи или явления, в том числе и сайтов, созданием которых занимаются Web-дизайнеры.
Вы можете заняться разработкой сайта для себя или стороннего заказчика. В любом случае работа состоит из нескольких этапов. Некоторые из них особенно важны, если заказчик и подрядчик (исполнитель) — разные лица. С заказчиком бывает трудно договориться, по крайней мере на первых этапах, не столько из-за его привередливости или скупости, сколько из-за того, что зачастую он сам не вполне осознает, что конкретно ему нужно. Идеальная ситуация — заказчик выдает вам техническое задание, достаточно ясное и подробное, чтобы немедленно приступить к проектированию. В реальности же техническое задание на проект чаще всего вырабатывается совместными усилиями исполнителя и заказчика итеративно.
1. С чего начать?
Как известно, хорошее начало — более половины всего дела. А начать следует с выяснения цели разработки сайта, т.е. того, для чего он нужен. Например, сайт может предназначаться для рекламы и/или продажи товаров и услуг (интернет-магазин), представления сведений о фирме или персоне (сайт-визитка), размещения информационных статей или медиа ресурсов и т.д. Для информационных сайтов также важна тема: культура, наука, искусство, образование, технология, развлечения и т.д. При этом важно знать, какого типа информацию (тексты, графика, видео, аудио) и какие сервисы должен предлагать сайт. Желательно хотя бы приблизительно оценить объем публикуемой информации и частоту ее обновления. Сайты бывают статическими, содержимое которых обновляется время от времени, и динамическими, информация в которых может изменяться чуть ли не ежеминутно (блоги, форумы, гостевые книги). Неплохо также иметь предположения о потенциальной аудитории сайта (социальная и профессиональная группы, образование, возраст). Далее заказчик обычно высказывает свои предположения и пожелания о том, как должна выглядеть главная (домашняя, начальная) страница сайта. Здесь речь может зайти о стиле, цветовой гамме, композиции и т.п. Постарайтесь выяснить, каким должен быть дизайн с эмоциональной точки зрения заказчика: спокойным или вызывающим, строгим или легкомысленным, жизнерадостным или мрачным, пестрым или аскетичным, насыщенным деталями или лаконичным. Ваша задача — выяснить вкусы заказчика. Разумеется, они могут не совпадать с вашими. Но о вкусах, как говорят, не спорят. В данной статье я всячески пытался избежать обсуждения тем, связанных с вкусовщиной. Не критикуйте вкус заказчика, но учитывайте его, предлагая свое решение.
Заказчик может показать вам несколько уже существующих сайтов, которые ему нравятся, но при этом пожелать, чтобы его будущий собственный сайт обладал явно выраженной индивидуальностью. Казалось бы, здесь возникает противоречие: с одной стороны, требуется выдержать некий стиль, схожесть с уже существующими дизайнами, а с другой — обеспечить заметное отличие от последних. Это противоречие и должен разрешить дизайнер. В архитектуре, например, оно ведь разрешается. Так, среди сохранившихся соборов готического стиля много очень похожих, как близнецы, друг на друга, но есть и неповторимые, например, Нотр Дам в Реймсе, Нотр Дам в Париже и Святого Павла Страсбурге.
Не следует забывать, что при всех изысках внешнего вида сайта, его потенциальный посетитель не должен испытывать ни малейших затруднений относительно элементов управления (пользовательского интерфейса). Ссылки, кнопки, поля ввода данных и т.п. должны легко узнаваться, не требуя от посетителя экспериментальных исследований с помощью мыши, чтобы выяснить, с чем именно он имеет дело. Главная цель дизайна — сделать сайт как можно более удобным и облегчить доступ к находящейся в нем информации. Удивить и заворожить посетителя — дело третьестепенное, если не десятое.
Хорошо, если заказчик ограничивается лишь общими замечаниями относительно облика главной страницы. Тем не менее, часто бывает, что он пытается излишне детализировать задание на дизайн. Например, заказчик может явно указать, что заголовки должны мигать, там-то следует разместить Flash-ролики, а фон страницы должен иметь вид кирпичной стены. Казалось бы, это должно упростить задачу дизайнера. Но, как правило, подобного рода указания существенно ограничивают необходимые для творчества степени свободы дизайнера и, наоборот, усложняют его задачу. Может статься, понравившийся заказчику дизайн, вызовет отвращение у самого дизайнера. Тогда, разумеется, можно утешиться тем, что заказчик всегда прав или же просто отказаться от заказа. Однако на практике дизайн, непосредственно воплощающий прямые и слишком детализированные указания заказчика, часто потом не нравится и ему самому. В лучшем случае заказчик получит урок, что “пироги должен печь пирожник, а сапоги тачать — сапожник”, а в худшем — он обвинит вас в непрофессионализме. И тогда дизайнер приступает к разработке макета или эскиза сайта сообразно с собственными знаниями, опытом, навыками и вкусом, но, конечно, учитывая общие пожелания и пристрастия заказчика. Впрочем, опытный дизайнер должен прийти к этому, не тратя излишне свои силы и время на бесплатные уроки. Он просто заранее имеет достаточно весомые аргументы, чтобы убедить заказчика довериться профессионалу. Другое дело, если заказчиком и исполнителем является одно и то же лицо, причем новичок. В этом случае редко когда удается сразу, без переделок, создать хороший проект, потому что обычно “первый блин — комом”.
Если вы создаете сайт для себя лично и в первый раз в жизни, то при выборе дизайнерского решения критически посмотрите на чужие разработки и мысленно представьте себе, что вы делаете не первый и не последний сайт в своей жизни. Даже если в дальнейшем вы не будете этим заниматься, данный психологический прием убережет вас от неуместного загромождения своих страниц всякими экзотическими штучками. Как говорил Л. Толстой, главное свойство во всяком искусстве — чувство меры. А меру мудрецы считали синонимом мудрости. Дело в том, что новички в своем первом проекте стараются продемонстрировать, что они очень много знают и умеют. Аналогично, многие заказчики сайтов для своих фирм нередко хотят, чтобы на их сайте присутствовало все самое модное и “передовое”, чуть ли не все такое, что они уже где-то видели, и даже более того. Так что, неопытные дизайнер и заказчик могут совместными усилиями породить чудовище не только по внешнему виду, но и в структурно-функциональном смысле, отталкивающее посетителей и внешним видом, и плохой функциональностью. На мой взгляд, красивое и гармоничное не может быть чрезмерно сложным. По крайней мере, сложность создаваемого объекта не должна быть видна.
Рассмотренный в предыдущем разделе этап Web-дизайна считается предварительным, поскольку он обычно не завершается заключением письменного договора или хотя бы устного соглашения между заказчиком и исполнителем. Перед тем как заключить такое соглашение заказчик, как правило, хочет получить от исполнителя эскиз (макет) главной и, возможно, еще нескольких страниц будущего сайта, поскольку “лучше один раз увидеть, чем сто раз услышать”. Так возникает задача графического дизайна сайта.
Заказчик может потребовать графический дизайн не только для того, чтобы после возможной его коррекции, принять наконец-то решение о дальнейшей разработке сайта. Графический дизайн может представлять собой и самостоятельный объект договора, т.е. рассматриваться как законченный продукт. Его разработка может быть поручена одному исполнителю, а все остальное (воплощение в кодах, заполнение содержимым и т.д.) — другому. Так что, приступая к графическому дизайну, вы должны отдавать себе отчет о статусе этой разработки: является ли она только промежуточным или же окончательным этапом вашей работы. Нередко разработку и оплату графического дизайна оформляют специальным соглашением.
Если графический дизайн рассматривается как промежуточный этап разработки сайта в целом, то вам следует подготовить несколько (два — три) его вариантов. В результате обсуждения этих вариантов дизайна с заказчиком в идеале должен быть выбран один из них. Однако бывает и так, что заказчик желает сделать некий гибрид из представленных кандидатов. В этом случае возникает опасность разрушения концептуального и художественного единства вашего замысла проекта, о которой уже говорилось в предыдущем разделе. Тем не менее, вы должны быть готовы к итеративному процессу рассмотрения вариантов графического дизайна. Окончательный выбор все равно следует пока считать лишь в качестве рабочего, поскольку дальнейшая разработка сайта может потребовать внесения корректив и в его графическое оформление. Однако, если графический дизайн хорош не только с эстетической, но и с технологической (структурно-функциональной) точки зрения, то необходимая впоследствии его коррекция будет и минимальна, и относительно безболезненна. Иначе говоря, создавая эскизы страниц сайта, нужно все время помнить о технологических аспектах.
Теперь вкратце рассмотрим, как делают графический дизайн страниц сайта. Напомню, что заказчику обычно требуется дизайн одной-двух страниц — главной, которая загружается в браузер первой, и той, которая отображается при переходах по ссылкам. Различные страницы сайта могут иметь разную компоновку и средства навигации, но должны быть выполнены в едином стиле. Это хорошо не только в эстетическом смысле, но и с точки зрения поддержки ориентации потенциального посетителя в информационном пространстве. Единство стиля различных страниц создает ненавязчивое ощущение, что мы находимся в пределах одного и того же сайта. Самый простой способ обеспечения единства стиля различных страниц — применять единые цветовые решения, параметры шрифтов и средств навигации.
Конечный результат графического дизайна можно представить в виде:
графических изображений страниц в целом;
шаблонов страниц, т.е. набора файлов с HTML- и CSS-кодами и графическими изображениями.
Графическое изображение страницы сайта можно нарисовать на бумаге с различной степенью подробности и тщательности отделки. Этот способ многие используют при создании личного сайта. Однако стороннему заказчику нужна не бумага, а файл графического формата, и тогда дизайн выполняют с помощью графических редакторов, таких как коммерческие Adobe Photoshop, Corel Draw и свободно распространяемые GIMP, Inkscape.
В графическом редакторе создают изображение страницы целиком, включая элементы пользовательского интерфейса (гиперссылки, кнопки, переключатели, поля ввода данных и т.п.). Если графический дизайн не является предметом отдельного заказа, а служит лишь в качестве эскиза или прототипа страницы для согласования с заказчиком всего проекта создания сайта, то его сохраняют в файле растрового формата, например, PNG или JPEG, В противном случае (специальный заказ) графический дизайн страницы выполняют как многослойное изображение, в котором каждый элемент страницы рисуется в отдельном слое, наложенном на предыдущие. Это делается для того, чтобы элементы графического дизайна можно было в дальнейшем скорректировать или заменить другими, а также использовать при реализации страниц сайта. Элементы графического дизайна имеют самостоятельную ценность и желательно иметь возможность извлечения их из первоначальной целостной конструкции. В данном случае изображение страницы сохраняют либо в растровом формате с поддержкой слоев (например, PSD, TIFF), либо в векторном формате (например, EPS). Файлы таких форматов можно открыть и изменить во многих графических редакторах, например, Adobe Photoshop, Adobe Illustrator, Corel Draw, GIMP и др.
Графический дизайн в виде картинки в дальнейшем используется как ориентир для разработки структуры и функциональности страницы. Разработчик, взглянув на такое графическое изображение и сопровождающее его словесное описание, должен придумать, какими программными средствами воплотить замысел художника. Например, он решает, сделать ли название сайта как графическое изображение, или вставить его как соответствующим образом отформатированный текст, т.е. применяя HTML и CSS; создать ли обычные гиперссылки, или же графическую карту ссылок.
Вместо того чтобы рисовать картинку страницы, можно сразу создать ее шаблон, используя язык разметки HTML, каскадные таблицы стилей (CSS) и, если потребуется, графические изображения. Шаблон это прототип страницы без информационного содержимого, с ограниченной функциональностью или вообще без таковой (например, не работают ссылки, меню, формы и т.п.). Преимущество данного способа заключается в том, что не требуется в совершенстве владеть графическим редактором и уметь создавать с его помощью оригинальные изображения, навыки рисования в данном случае не являются необходимыми. Важно также, что шаблон легко модифицировать практически на любом этапе разработки сайта. Кроме того, его в дальнейшем можно использовать (немного скорректировав) и для других сайтов. Иначе говоря, использование шаблона позволяет путем относительно небольших модификаций его параметров получить существенные изменения внешнего вида Web-страниц. Если ваша задача состоит в разработке только лишь графического дизайна, то конечный результат вашей работы можно получить просто как скриншот (снимок экрана), загруженного в браузер шаблона.
Даже если графический дизайн выполнен как картинка, последующая разработка сайта все равно предполагает создание прототипов (шаблонов) его страниц, которые можно загрузить и просмотреть в браузере. Так что, создание шаблона — не просто один из методов графического дизайна, но одновременно и этап дизайна сайта вообще.
Готовые шаблоны нетрудно найти в Интернете, а можно сделать их и самому. Корректировать имеющиеся и создавать новые шаблоны, наполнять их содержимым (т.е. делать собственно Web-страницы) можно с помощью специальных программам визуальной разработки, таких как Adobe (Macromedia) Dreamweawer, Microsoft FrontPage или Microsoft SharePoint Designer. Кстати, Microsoft SharePoint Designer 2007 предоставляется бесплатно.
Системы визуальной разработки популярны в среде новичков, не желающих возиться с HTML- и CSS-кодами, не говоря уж о скриптах. Тем не менее, их используют и профессионалы, особенно в условиях разработки одновременно нескольких сайтов, когда необходимо существенно повысить свою производительность. Однако следует иметь в виду, что системы визуальной разработки автоматически создают соответствующие программные коды, причем далеко не оптимальные ни по объему, ни по структуре, ни по выбору привлеченных HTML-элементов. В автоматически созданных кодах нелегко разобраться если не сразу, то, по крайней мере, спустя неделю. А ведь сайт, скорее всего, придется сопровождать (дополнять, модифицировать) после сдачи заказчику.
Cуть создания шаблона заключается в том, что во-первых, разрабатывается компоновочная схема или, другими словами, сруктурная разметка страницы сайта. Такая схема может быть представлена в виде таблицы, ячейки которой определяют места размещения оформительской графики (логотип, элементы украшения), средств пользовательского интерфейса (меню, кнопки, ссылки и др. элементы навигации и взаимодействия с пользователем) и собственно содержимого (контента, как еще говорят) страницы.
Для сайта может потребоваться более одной компоновочной схемы: одна для главной страницы, а другие — для страниц перехода по ссылкам из главной. Очевидно, тривиальная схема представляется одноячеечной таблицей. Простая схема содержит две ячейки. Наиболее часто встречаются схемы из трех – пяти ячеек. Примеры типичных компоновочных схем показаны на рисунке.
Выбор конкретной схемы зависит от многих факторов, основные из которых — характер размещаемых в ее ячейках элементов (графические изображения, средства навигации, тексты и т.д.), степень важности, а также тематической и структурной разнородности информации.
Во-вторых, для ячеек компоновочной схемы определяются цвет фона и/или фоновые графические изображения, а также параметры границ.
В-третьих, для текстовой информации (прежде всего, для шрифтов ) определяются стилевые параметры. Причем, такие параметры могут задаваться и для всей страницы, и отдельно для каждой ее ячейки с текстом.
Наконец, определяется, каким образом компоновочная схема будет позиционироваться в окне браузера: должны ли изменяться ее размеры в зависимости от размеров клиентской области браузера, или нет, должна ли она центрироваться относительно краев этой области.
После выбора компоновочной схемы страницы сайта приступают к реализации проекта, т.е. программированию с использованием HTML, CSS, а если понадобится, то и языков сценариев, таких как JavaScript, PHP и др. На данном этапе разработки сайта следует учесть несколько важных моментов:
Не исключено, что на какой-то стадии реализации придется вернуться к пересмотру компоновочной схемы, а может быть скорректировать и графический дизайн. Вероятность таких попятных движений тем меньше, чем лучше выполнена работа на предыдущих этапах. Последнее означает, что графический дизайн и структура страницы выполнены с учетом технологических особенностей предстоящей реализации проекта в целом.
Разработанный сайт после публикации в Интернете, скорее всего, придется сопровождать: изменять, частично или полностью, информационное содержимое страниц, добавлять новые страницы и т.п. Сложные технические устройства, например, должны обладать целым рядом эксплуатационных свойств, в числе которых — ремонтопригодность. Аналогично, хорошо разработанный сайт также должен обладать хорошими эксплуатационными качествами. Нередко заказчик особо требует, чтобы разработчик сайта обеспечил ему простоту и удобство обновления информационного содержимого без помощи разработчика и даже без обращения к сведущему в Web-дизайне специалисту. Поэтому уже на этапе разработки следует предусмотреть такую возможность.
Современный сайт должен быть инвариантен (одинаково выглядеть и функционировать) относительно всех современных ведущих браузеров, таких как Microsoft Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Apple Safari. При этом инвариантность должна достигаться не только для самых свежих, но и для хотя бы самых распространенных старых версий. В настоящее время, пожалуй, только Internet Explorer широко представлен в сети сразу несколькими своими версиями (6 — 9). Дело в том, что многие используют тот браузер (а это, как правило, интегрированный в Windows Internet Explorer), который они получили с приобретением компьютера. Поэтому следует проверять разрабатываемый сайт по крайней мере для версии 8 — последней для все еще широко распространенной Windows XP и последующих версий браузера, работающих под Windows 7 и более поздними выпусками данной операционной системы. Пользователи других браузеров в подавляющем числе случаев имеют самые последние их версии. Так что, при разработке сайта следует обзавестись несколькими браузерами, хотя бы четырьмя: Internet Explorer, Firefox, Opera и Chrome. Сейчас доля пользователей указанных браузеров составляляла более 97%.
Теперь рассмотрим, каким минимальным оснащением должен обладать разработчик сайта. Прежде всего, нужен обычный текстовый редактор вроде блокнота Windows. Лучше использовать более специализированный редактор, обеспечивающий подсветку синтаксиса программных кодов на различных языках, например, свободно распространяемый Notepad++ (http://notepad-plus-plus.org). В текстовом редакторе создаются коды HTML и CSS, а также сценарии на скриптовых языках, таких как JavaScript и PHP. Само собой, нужен браузер, чтобы просматривать результаты своей работы. Точнее, нужны несколько ведущих браузеров для проверки, что создаваемый сайт достаточно инвариантен относительно них. Для подготовки графических элементов потребуется графический редактор. Сейчас для этой цели широко применяется коммерческий Adobe Photoshop, но вполне можно использовать достаточно мощный, удобный и бесплатный GIMP (http://www.gimp.org). Современные ведущие браузеры оснащены средствами разработчика, которые являются хорошим подспорьем при создании и отладке страниц сайта. Так, вы можете просмотреть HTML-код, параметры CSS, скрипты, сообщения об ошибках, относящиеся к загруженной в браузер странице. Наконец, необходим FTP-клиент — программное обеспечение закачки файлов на сервер по протоколу FTP (File Transfer Protocol). В настоящее время существует множество бесплатных и хороших FTP-клиентов. Кроме того, на сайтах компаний, предоставляющих хостинг, обычно есть и сервис для FTP-обмена файлами.
Если вы создаете сайт без серверной части (т.е. без серверных сценариев), то минимальный набор перечисленных средств достаточен. Чтобы протестировать страницу сайта, вы можете на локальном компьютере открыть в браузере соответствующий html-файл и посмотреть, работает и выглядит ли она согласно вашим требованиям и ожиданиям.
Серверная часть сайта не является необходимой, если вам не нужно принимать, обрабатывать и сохранять данные, введенные посетителем, а также вести базы данных. В противном случае, например, при создании блога, форума, гостевой книги, интернет-магазина и т.п. без серверной части не обойтись. Тогда для тестирования и отладки сайта потребуется Web-сервер.
Где взять Web-сервер? Во-первых, вы можете воспользоваться Web-сервером хоста в Интернете, на котором в дальнейшем собираетесь опубликовать свой сайт или же на другом, который доступен вам и подходит для отладочных целей. В данном случае необходимо перенести уже разработанные файлы на удаленный сервер и далее производить отладку в режиме онлайн, заменяя при необходимости устаревшие версии файлов новыми. В настоящее время имеется довольно много как бесплатных, так и платных хостингов. Однако при выборе хостинга следует учитывать состав предоставляемых возможностей. Например, популярный бесплатный хостинг Яндекс.Народ (http://narod.yandex.ru) не дает возможности использовать серверные сценарии и ограничивает объем файлов. Хостинг “Веб Сервис” (http://www.webservis.ru) бесплатно предоставляет возможность применять серверные сценарии на PHP бесплатно, но не позволяет публиковать мультимедийные файлы некоторых форматов. Хостинг uCoz (http://www.ucoz.ru) предоставляет удобный сервис конструктора в режиме онлайн, обеспечивающий создание динамических сайтов (блогов, форумов, гостевых книг). Однако статические сайты, состоящие только из HTML-документов и не применяющие средства взаимодействия с посетителями, не приветствуются данным хостингом.
Общее ограничение, накладываемое всеми бесплатными хостингами:
публикуемый сайт не должен иметь коммерческой направленности (так что, интернет-магазины на бесплатных хостингах устраивать не стоит);
на страницах вашего сайта хостинг разместит свой баннер. Он может появляться где-попало и портить внешний вид страниц, даже если его можно закрыть щелчком мыши. Такова плата за бесплатный хостинг;
объем отдельных файлов и общий объем дискового пространства для сайта в целом ограничиваются. Например, под сайт может быть отпущено несколько сот мегабайтов, но отдельный файл не должен превышать 2 Мб.
Разумеется, платный хостинг предлагает более широкий набор услуг при меньших ограничениях. Выбираемый для отладки сайта хостинг должен иметь параметры, максимально близкие к параметрам того хостинга, на котором вы собираетесь опубликовать окончательную версию сайта. В идеале это должен быть один и тот же хостинг. Отладка сайта в режиме онлайн хороша тем, что вам не нужно самому устанавливать и, в большинстве случаев, настраивать Web-сервер, а также модули, выполняющие серверные сценарии, системы управления базами данных и т.п. Все это сделает администратор платного хостинга. Если же хостинг бесплатный, то вам нужно лишь адаптироваться к предлагаемому набору уже настроенных средств, получив необходимую информацию на сайте хостинговой компании, либо у ее администратора. Однако вам придется заплатить за трафик. Тем не менее, данный режим широко применяется при создании простых и средних по сложности сайтов.
Во-вторых, вы можете отлаживать разрабатываемый сайт в режиме оффлайн, установив на локальном компьютере Web-сервер самостоятельно, например, Apache или Internet Information Services (IIS). Кроссплатформенный Apache распространяется свободно (http://www.apache.org), а IIS входит в дистрибутивы Windows XP Professional, Windows 7 Professional/Enterprise/Ultimate, но не устанавливается как служба автоматически. При необходимости IIS следует найти среди компонентов Windows и установить самостоятельно.
Серверные сценарии пишут на различных языках. Одним из наиболее популярных из них является PHP и его поддерживает большинство Web-серверов в Интернете. Если вы установили на локальном компьютере Web-сервер, то вам придется также установить и модуль PHP, распространяемый свободно (http://www.php.net или http://ru.php.net).
Если ваш сайт должен взаимодействовать посредством серверных сценариев с базами данных, то потребуется еще установить и систему управления базами данных (СУБД), причем такую, которая поддерживается Web-сервером того хостинга, на котором вы собираетесь опубликовать свой сайт. Это может быть, например, Microsoft SQL Server (для платформы Windows) или кроссплатформенная СУБД MySQL, распространяемая бесплатно (http://www.mysql.ru). Практически все серверы, поддерживающие PHP, поддерживают также и MySQL.
Самостоятельная установка на локальном компьютере Web-сервера, модулей PHP и СУБД — не сложная задача, и начинающему Web-дизайнеру было бы неплохо попытаться ее решить хотя бы в ознакомительных целях, даже если принято решение работать в режиме онлайн. Однако она может быть существенно упрощена, если воспользоваться какой-нибудь системой автоматизации разработки сайтов, например, бесплатной системой WebMatrix от Microsoft (http://www.microsoft.com/web/webmatrix). WebMatrix — среда разработки на платформе Windows с хорошим пользовательским интерфейсом, содержащая все необходимое для создания сайтов: Web-сервер IIS Express, СУБД SQL Server Compact, среды программирования PHP и ASP.NET, удобные редакторы кодов, средства публикации сайта на хостинге по протоколам FTP, FTPS и WebDeploy, функцию анализа сайта с целью выработки рекомендаций по его оптимизации для поисковых систем (т.е. функцию SEO — Search Engine Optimization) и др.
При любом варианте (онлайн или оффлайн) отладки разрабатываемого сайта вам следует продумать структуру папок, в которых будут храниться файлы. Имена папок и файлов должны быть в латинском нижнем регистре. Создайте на локальном компьютере корневую папку вашего сайта, например, mysite. HTML-файл главной (домашней, начальной) страницы должен иметь имя index.html или index.htm и находиться в корневой папке сайта. Все остальные файлы сайта могут располагаться в той же папке, но это неудобно, особенно если их несколько десятков или сотен. Так, желательно хранить файлы каскадных таблиц стилей, графические изображения, скрипты, документы и т.п. в отдельных папках. Пример файловой структуры сайта показан на рисунке.
Разумеется, иерархия и имена папок может быть иной. Так, файлы дополнительных страниц сайта могут располагаться в отдельных папках, например, page1, page 2, и т.д. Главное — чтобы структура папок была удобна вам как разработчику, а также тем, кто будет в дальнейшем сопровождать сайт. Следует также иметь в виду, что имя папки для серверных сценариев нередко предопределяется хостингом. Например, это может быть папка cgi-bin.
При публикации сайта в сети или при использовании Web-сервера на локальном компьютере содержимое корневой папки сайта (а не сама корневая папка) должно быть перенесено в корневую папку (домашний каталог) Web-сервера. Например, если ваш сайт на локальном компьютере имеет файловую структуру как на приведенном здесь рисунке, то в корневой каталог Web-сервера следует перенести не папку mysite, а вложенные в нее другие папки и файл index.html. Иногда хостингом предопределяется подпапка корневой папки Web-сервера, в которой вы должны разместить содержимое локальной корневой папки сайта. Замечу, что при работе с локальным Web-сервером можно указать, какую папку следует считать домашним каталогом последнего, чтобы не переносить файлы в домашний каталог, принятый по умолчанию.
Чтобы открыть HTML-файл в браузере при работе с локальным Web-сервером, следует в адресной строке указать URL-адрес, а не просто путь к файлу на диске: http://localhost/имя_файла или http://имя_сервера/имя_файла. Здесь имя_сервера — сетевое имя или цифровой IP-адрес компьютера, на котором установлен Web-сервер; имя_файла — имя требуемого файла, содержащее при необходимости путь к нему относительно домашнего каталога Web-сервера. Если сервер установлен на вашем локальном компьютере, то вместо конкретного имени сервера можно указать localhost, например, http://localhost/docs/page1.html. Очевидно, http://localhost — URL-адрес главной страницы сайта, т.е. файла index.html или index.htm. Подробно он записывается либо как http://localhost/index.html, либо как http://localhost/index.htm в зависимости от того, какое именно расширение имеет файл главной страницы.
В идеале, наполнение страниц сайта информационным содержимым (контентом) — отдельная задача, а на практике она оказывается тесно связанной с дизайном, в том числе и графическим. Какая-то часть контента, полученная от заказчика, анализируется и форматируется разработчиком в соответствии с общей концепцией дизайна сайта. Например, оформление названия сайта, заголовков рубрик, гиперссылок, данных о контактах и т.п. выполняется дизайнером с самого начала так, как это нужно для публикации в Интернете. Однако обычно сайт справедливо рассматривается заказчиком как система представления информации, первоначально созданной и оформленной посредством других весьма разнообразных средств, таких как текстовый редактор (например, Microsoft Office Word), фото и видеокамера, графический редактор (например, Corel Draw) и т.д. В этом случае требуются мероприятия по преобразованию исходного материала к надлежащему виду.
Вот типичная ситуация. Заказчик сайта имеет файл, созданный в Word и содержащий иллюстрированную хорошо отформатированную статью объемом более десятка страниц. Эта статья вполне хорошо оформлена с точки зрения вывода на печать и неплохо, если ее просматривать на экране компьютера во вьювере, снабженном средствами навигации. Но заказчик хочет разместить эту статью в одном из разделов своего сайта. Для этого проще всего преобразовать (конвертировать) Word-документ в Web-страницу средствами самого редактора Word. Так обычно и поступают на скорую руку, хотя это далеко не лучшее решение.
Так, дизайн статьи в формате Word может не гармонировать с общим дизайном сайта, например, по цвету, шрифту и композиции разделов. Разумеется, можно перед конвертированием изменить стиль документа надлежащим образом средствами самого Word. Но это не снимает всех проблем.
HTML-документ, полученный автоматическим конвертированием Word-документа, обычно оказывается очень избыточным за счет слишком большого объема форматирующей стилевой информации. Содержательная информация в нем перемешана со служебной чуть ли не в одинаковой пропорции; структуру статьи в таком представлении трудно разглядеть, не говоря уже о редактировании ее содержания. В данном случае следует в текстовом редакторе создать содержательно пустой HTML-документ и перенести в него посредством буфера обмена статью из редактора Word, а затем разметить ее HTML-дескрипторами (тегами), указав заголовки, абзацы и, места, требующие особого форматирования (например, выдеделения). Окончательный вид текста статьи следует задать с помощью параметров CSS (шрифты, цвета и др.) для заголовков различных уровней, основного текста и особо выделенных мест.
Статью объемом в несколько страниц не назовешь большой, если она на бумажном носителе. При публикации в Интернете ее объем лучше измерять в экранных страницах. Экранная страница это область Web-страницы в полностью развернутом окне браузера, отведенная для показа статьи. Если статья занимает более двух-трех экранных страниц, то ее желательно снабдить средствами навигации. Очень большие статьи размещают не в одном, а нескольких HTML-файлах. В этом случае система навигации по статье становится необходимой, а не только желательной.
Кроме того, следует проанализировать графические изображения (если они есть) с точки зрения их разрешения, а также соответствующие файлы — с точки зрения графических форматов и объема. Как правило, разрешение графических изображений (а значит, и объем файлов) можно уменьшить в несколько раз, сохранив достаточный уровень качества. Формат файлов изображений должен входить в число широко употребимых в Web-публикациях: JPEG, PNG, GIF, SWF и некоторые другие.
Аналогичным образом дело обстоит с видео и аудио, которые заказчик собирается опубликовать на своем сайте. Часто оказывается, что исходные материалы представлены не в том формате, который нужен. Например, файлы видеороликов, полученные с помощью видеокамеры, обычно требуется конвертировать в формат потокового видео (например, FLV), если требуется демонстрировать их на странице сайта, не дожидаясь окончания загрузки, и не во внешнем проигрывателе, которого может и не быть у пользователя.
Отдельные страницы и сайт в целом неоднократно тестируются практически на всех этапах процесса их разработки. Тем не менее, требуется выполнить генеральное тщательное тестирование сайта в режиме онлайн прежде, чем он будет передан заказчику. Помимо прочего, следует особо проверить следующее:
внешний вид страниц сайта на дисплеях с различными разрешением и глубиной цвета. Типичные разрешения по горизонтали в настоящее время — 1024 и 1280 пикселов, но неплохо проверить и как при меньших (800), так и больших (1366, 1680) разрешениях. Следует обратить особое внимание на возможные изменения относительного расположения элементов внутри страниц, а также на положение страниц относительно краев окна браузера.
Типичная глубина цвета — 24 и 32 бита, но неплохо проверить и при 8 битах (256 цветов). Если вы использовали цвета не из Web-палитры, то на дисплеях с малой цветовой глубиной возможны существенные искажения графики и цветов текстовых элементов;
правильность функционирования всех ссылок, как внутренних (на страницы своего сайта), так и внешних (на страницы других сайтов). Если обнаруживается, что какая-то страница перехода отсутствует, то следует создать ее содержательно пустой аналог с сообщением вроде “Данная страница находится в разработке”. Это не самое лучшее решение. Лучше не помещать ссылку на неготовую страницу совсем или отложить публикацию сайта;
правильность функционирования всех скриптов и поведение сайта в случае, когда выполнение скриптов отключено в настройках браузера;
скорость загрузки страниц сайта при небольшой и средней пропускной способности канала связи (1 — 5 Мбит/c). Хорошо, если время загрузки страниц не превышает нескольких секунд. Для оценки времени загрузки и других параметров можно воспользоваться сайтами, предоставляющими сервис по анализу указанных посетителем опубликованных сайтов, например, http://www.cy-pr.com/analysis;
межбраузерную совместимость (инвариантность) внешнего вида и функционирования сайта. Данную проверку нужно выполнить хотя бы для трех-четырех ведущих браузеров — Mozilla Firefox, Opera, Google Chrome и Microsoft Internet Explorer (для версии 8 и самой свежей). Напомню, что версия 8 Internet Explorer — последняя, поддерживаемая Windows XP/Vista, а версия 9 поддерживается Windows 7/Vista. Возможно, что в различных браузерах некоторые части вашего сайта будут выглядеть и/или функционировать не одинаково. Если вы не можете это устранить, то предусмотрите альтернативные замены элементов для “неадекватных” браузеров или хотя бы предупредите об этом посетителей. Подумайте, а не исключить ли неинвариантные элементы совсем или хотя бы до лучших времен: новые версии браузеров лучше работают, а также точнее и полнее соблюдают стандарты (спецификации языков программирования).
правильность (валидность) кода Web-страниц. Страницы сайта могут отображаться в браузере согласно вашему замыслу даже при некоторых нарушениях стандартных правил написания их кодов. При других же нарушениях возможны видимые неполадки и проявление межбраузерной несовместимости. Поэтому рекомендуется проверять правильность кода страниц. Это можно сделать с помощью онлайновой службы консорциума W3C. На сайте http://validator.w3.org вы можете ввести URL-адрес своей страницы, расположенной на Web-сервере, и получить сведения о ее валидности. Даже если все правильно, еще нет полной гарантии межбраузерной и межплатформенной совместимости вашей страницы. Тем не менее это шаг в направлении к идеалу, даже если он пока достижим не в полной мере.
После успешного, как считает разработчик, тестирования сайт сдается заказчику. Продолжительность приема-сдачи зависит от сложности и объема сайта и может составить от часа до нескольких недель. Как бы тщательно ни проводилось тестирование разработчиком, некоторые ошибки все равно могут остаться незамеченными. Если сайт достаточно сложен и процесс его приема заказчиком может затянуться, то следует договориться о проведении определенного во времени этапа опытной эксплуатации (гарантийного обслуживания), в течение которого разработчиком устраняются обнаруженные ошибки и недочеты. В данном случае этапы окончания разработки и опытной эксплуатации желательно оформить отдельными актами. При этом акт об успешном окончании опытной эксплуатации является одновременно и актом об окончании всех работ по созданию сайта.
Поскольку в период опытной эксплуатации сайт может корректироваться не только вами (автором), но и заказчиком, следует сохранять копии исходной и последующих версий сайта.
Акт о передаче сайта в опытную эксплуатацию (если она предусмотрена договором) очень важен, поскольку оформляет этап завершения его разработки (дизайна). Дело в том, что в период опытной эксплуатации заказчик обычно “созревает”: он наконец-то начинает хорошо понимать, что же ему в действительности было нужно, когда он заказывал сайт. Поэтому будьте осторожны: в данный период он может попытаться под видом исправления ваших недочетов и ошибок “дозаказать” вам то, что упустил при заключении договора или обсуждении на ранних этапах проектирования.
Одно дело выполнить некоторые доработки сайта, хорошо вписывающиеся в уже реализованные структурно-функциональную и графическую схемы, а другое — существенно их перестраивать. Остерегайтесь под нажимом заказчика надстроить пару-тройку “железобетонных этажей” над уже готовым “щитовым дачным домиком”, чтобы ваша модернизированная конструкция не рухнула под собственной тяжестью. Помните также, что, с одной стороны, у совершенства нет предела, а с другой, что лучшее — враг хорошего. Процесс доработок может приобрести циклический характер и затянуться во времени. Быть может, уже необходима не доработка, а редизайн сайта?
Редизайн сайта это модификация графической и/или структурно-функциональной составляющих уже существующего сайта. На первый взгляд может показаться, что редизайн проще создания сайта “с нуля”, поскольку прототип имеется, а требуется изменить лишь некоторую его часть, не поломав при этом всего остального. К тому же, и заказчик обычно считает, что редизайн обойдется ему существенно дешевле разработки нового сайта.
Тем не менее, если не вы автор сайта, то при редизайне вам придется разбираться с чужим кодом, а это, поверьте, очень хлопотно. Многие программисты не без основания считают, что легче написать программу заново, чем скорректировать чужую. Редизайн можно уподобить ремонту квартиры с перестилкой полов без выноса мебели. Таким образом, следует иметь в виду, что по трудоемкости редизайн может превосходить разработку сайта с самого начала. Вам придется тщательно исследовать имеющийся сайт и проанализировать требования к его модернизации прежде, чем решиться на последнюю.
Если же автором сайта являетесь вы, то задача редизайна несколько упрощается. Она будет тем проще, чем лучше в структурном отношении был выполнен исходный проект. Таким образом, еще на этапе разработки сайта стоит предпринять специальные меры, облегчающие возможный его редизайн в будущем.
7. Публикация и оптимизация сайта для поисковых систем
7.1. Доменное имя сайта
Как уже говорилось, создание сайта предполагает размещение его файлов на Web-сервере еще на ранних этапах его разработки для тестирования в режиме онлайн. Прежде чем это сделать, необходимо сайт, пусть еще и не готовый, зарегистрировать на сайте провайдера, предоставляющего хостинг. На этом сайте можно найти достаточно подробные сведения о том, как это сделать практически.
При регистрации своего сайта вы получаете его доменное имя, а также логин и пароль, чтобы иметь доступ к его файлам по протоколу FTP. Обычно на сайте провайдера хостинга предлагается и сервис: онлайн-редактор кода, FTP-клиент, шаблоны Web-страниц и др.
Доменное имя (домен) определяет уникальное в Интернет имя вашего сайта, например, www.mysite.ru. Доменное имя состоит из нескольких слов, разделенных точками, каждое из которых соответствует некоторому уровню иерархии в системе доменных имен (DNS — Domain Name System). Доменное имя читается слева направо, от нижних в иерархии имен к верхним. Самое правое слово представляет домен первого уровня, называемый еще зоной. Примеры доменов первого уровня: ru, uk, de, fr и т.п. — национальные; com — коммерческие; org — некоммерческие; edu — образовательные; net — ресурсы и организации, связанные с сетью; mobi — сайты для мобильных телефонов. Ресурсы, размещенные в зоне ru, образуют сегмент Интернета, называемый еще Рунетом.
Доменное имя второго уровня может быть именем вашего сайта, но его регистрация и получение прав владения — платная услуга. Существует множество фирм, обеспечивающих регистрацию таких доменов. Чтобы их найти, достаточно в поисковой системе подать запрос “регистрация домена”.
Хостинговые компании, предоставляющие возможность размещения сайтов на своих серверах, обычно имеют домен второго уровня и предоставляют регистрацию, платную или бесплатную, доменов третьего уровня, которые могут стать именами вашего сайта. В данном случае полное имя вашего сайта будет состоять из трех слов, например, mysite.narod.ru, mysite.far.ru или mysite.spb.ru. При этом владеет доменом третьего уровня хостинговая компания, а вам он сдается в аренду.
Солидные фирмы и организации, особенно коммерческие, создают сайты с доменными именами второго уровня, чтобы поддержать свою репутацию и снять ограничения, свойственные сайтам с именами третьего уровня. Как известно, имена таких сайтов лучше запоминаются и занимают верхние позиции в индексах поисковых систем и каталогов, а потому и более популярны.
В русскоязычной зоне Интернета наиболее популярным провайдером бесплатного хостинга является Яндекс.Народ (http://narod.yandex.ru). Перед тем как воспользоваться его услугами, требуется в Яндексе завести почтовый ящик. Выбор имени учетной записи почты станет именем вашего сайта. Так, если mysite@yandex.ru — адрес вашего почтового ящика, то доменное имя вашего сайта будет mysite.narod.ru. Таким образом, следует хорошо подумать, как назвать свой почтовый ящик.
Имя сайта должно быть уникальным, как можно более коротким и легко запоминаемым. Неплохо также, если оно благозвучно, чтобы услышав, можно было правильно написать его. Желательно, чтобы имя чему-то соответствовало: тематике сайта, названию фирмы, роду деятельности, предлагаемым товарам и услугам, имени владельца персонального сайта и т.п.. Например, сайт издательства “БХВ-Петербург” имеет имя www.bhv.ru, а издательства “Питер” — www.piter.com; сайт htmlbook.ru посвящен HTML, CSS и верстке Web-страниц, www.1tv.ru — официальный сайт первого канала телевидения, а dunaevv1.narod.ru — персональный сайт автора данной статьи, посвященный Web-разработкам.
Выбор подходящего доменного имени сайта ограничен тем, что многие “хорошие” имена уже заняты другими сайтами. Поэтому приходится как-то изощряться, например, использовать аббревиатуры, дефисы (они не могут быть первым и последним символом в имени) и цифры. Регистр символов в доменном имени не имеет значения.
7.2. Регистрация и индексирование в поисковых системах
Итак, ваш сайт имеет адрес (доменное имя) в Интернете, а его файлы находятся на сервере. Теперь он доступен для посетителей. Но как они узнают о его существовании? Для этого необходимо, прежде всего, зарегистрировать сайт в поисковых системах. Вот список наиболее популярных из них:
На Web-страницах поисковых систем, предназначенных для регистрации вашего сайта, будет предложено ввести его URL и, возможно, другие данные: имя владельца, адрес электронной почты, регион, рубрику, к которой относится сайт, его краткое описание, ключевые слова и т.п. Поисковая система проанализирует ваш сайт и через некоторое время (от нескольких дней до двух-трех недель) он может появиться в так называемом индексе. Индексирование можно ускорить, если разместить ссылку на ваш сайт в каком-нибудь другом сайте или популярном форуме, уже известных поисковой системе.
Индекс это упорядоченный список ресурсов (в том числе и Web-страниц) сети, которые известны в текущий момент времени поисковой системе. Обрабатывая запрос, поисковая система ищет адреса соответствующих (релевантных) ресурсов именно в этом списке. Ответ на запрос представляется списком релевантных ресурсов, который может занимать не одну экранную страницу. Пользователи при поиске обычно просматривают лишь одну-две таких страницы. Поэтому важно, чтобы ваш сайт оказывался возможно ближе к началу индекса.
Положение сайта в индексе (списке), а следовательно и количество его посетителей (популярность) зависит от многих факторов, таких как уровень доменного имени, популярность рубрики, степень уникальности и информативности содержимого, количество ссылок на ваш сайт из других и т.д. Поисковые системы автоматически вычисляют по некоторому алгоритму числовой показатель авторитетности (важности, значимости, информативности) сайта и по нему ранжируют сайты в индексе. Так, поисковая система Яндекс вычисляет тематический индекс цитирования (тИЦ, CY), а Google использует множество показателей, из которых существенную роль играет PageRank (PR). Интересно, что слово PageRank можно перевести с английского как Ранг Страницы, хотя слово Page (страница) Google связывает с именем автора алгоритма ранжирования — Larry Page. Значение PR, также как и тИЦ, определяется количеством и качеством ссылок на сайт.
Алгоритмы ранжирования у различных поисковых систем могут быть разными, но суть у них одна — ранжирование с учетом индекса цитируемости, вычисляемого по количеству и качеству ссылок на ваш сайт с других сайтов. Качество ссылки прямо зависит от авторитетности ссылающегося сайта, которая сама определяется его индексом цитирования. Больший вес имеют односторонние, а не взаимные ссылки. Иначе говоря, лучше, чтобы кто-то ссылался на вас, а вы на него — нет. Предпочтительнее также, чтобы ссылающийся сайт принадлежал той же рубрике (теме), что и ваш. Внутренние ссылки (т.е. ссылки с одних страниц на другую в рамках вашего сайта) не увеличат индекс цитирования последней.
Поисковые системы анализируют также и содержимое Web-страниц: краткое описание, ключевые слова и основной текстовый контент. Ключевые слова и слова краткого описания должны встречаться в основном тексте страницы и лучше — неоднократно, а еще предпочтительнее — в заголовках разделов, причем определяемых специальными дескрипторами HTML, а не представленных графическими изображениями. С другой стороны, ключевые слова вашей страницы должны как можно реже встречаться в языке вообще. Иначе говоря, ключевые слова должны быть редкими вообще и часто встречаться в тексте Web-страницы. Такое соотношение создает у поисковика впечатление, что ваш сайт в чем-то уникален, а значит информативен в некоторой области, поэтому следует увеличить его вес при определении ранга. Вместе с тем, ключевые слова, пусть не все, должны быть из тех, которые часто встречаются в поисковых запросах. Выдержать все эти требования довольно трудно. Следует найти некий компромисс. Если сайт посвящен некоторой очень популярной теме, то список всех таких сайтов огромен и ваш сайт-новичок займет в нем одно из последних мест. Если же в нем представлены специфические, особенные разделы на популярную тему, то это способствует продвижению сайта вверх по списку. Серьезных пользователей Интернета больше интересует специфические сведения, а не банальные общие места.
Таким образом, при формировании текста страниц следует учитывать и некоторые формальные правила, помогающие продвинуть ваш сайт к началу индекса. Вместе с тем, главное, что существенно способствует продвижению сайта, это его содержание — интересное, полезное и информативное для некоторой целевой аудитории. Хорошо также, если оно грамотно, красиво и удобно представлено.
Время от времени специальные программы поисковых систем, называемые роботами, посещают проиндексированный сайт, чтобы очередной раз проанализировать его содержимое и скорректировать индекс. В корневой папке сайта при желании можно разместить текстовые файлы sitemaps и/или robots.txt с информацией для поисковых роботов. Так, файл sitemaps содержит в XML-формате сведения об URL-адресах страниц сайта, которые следует проиндексировать, о времени и частоте их обновления. А файл robots.txt, наоборот, содержит инструкции по ограничению доступа поисковыми роботами к ресурсам сайта. Эту же информацию можно сохранить не в файле, а в тегах в HTML-кодах Web-страниц. Синтаксис инструкций довольно прост, а его описание легко найти в Интернете. Применение данных файлов не обязательно. С другой стороны, указание URL в файле sitemaps еще не гарантирует, что соответствующий ресурс будет проиндексирован поисковой системой.
После опубликования и регистрации своего сайта в поисковых системах, сразу или немного погодя, желательно поместить информацию о нем в каталогах. Каталог — информационно справочный сайт, содержащий описания сайтов (ресурсов сети) и ссылки на них. Каталоги могут содержать несколько тематических разделов (подкаталогов) или быть целиком поясвящены какой-либо узкой теме. Ссылки на ваш сайт из каталога имеют повышенный вес при вычислении индекса цитирования. Поэтому и стремятся занести сайт в каталог.
Свои каталоги имеют и поисковые системы. Вы можете попытаться внести свой сайт в авторитетные каталоги Яндекс (http://yaca.yandex.ru), Rambler Tоп 100 (http://top100.rambler.ru), Апорт (http://catalog.aport.ru/rus), Google (http://www.google.com/dirhp) и др. Для этого следует подать заявление — ввести на странице каталога и отправить сведения о себе и своем сайте. Заявка может рассматриваться редакторами каталога в течение нескольких месяцев. За некоторую плату этот процесс можно несколько ускорить. О результате рассмотрения заявки, как положительном, так и отрицательном, вы не будете извещены каким-либо специальным образом. Об успехе можно судить только по тому, что ваш сайт появился в каталоге. В противном случае объяснений редакторы каталога не дают, а претензии не принимают.
В настоящее время известны методы недобросовестного увеличения индекса цитирования, раскрутки сайтов. Есть в Интернете и предложения такого рода услуг. Однако алгоритмы индексирования постоянно совершенствуются и предусматривают, так или иначе, возможность плутовства. В результате ранг сайта может быть понижен вплоть до исключения из индекса.
Для контроля посещаемости сайта на его страницах устанавливают счетчики (информеры). Они могут быть как видимыми всеми посетителями, так и невидимыми. Доступ к более подробной информации о посетителях обычно защищается паролем. Для получения более объективной информации можно установить сразу несколько счетчиков от различных систем. Например, вы можете поставить счетчик от Яндекс.Метрика (http://metrika.yandex.ru), Rambler Топ100 или создать его самостоятельно с помощью серверного сценария. Счетчики-информеры предоставляют доступ к статистике, развернутой во времени. Так, вы можете узнать количество визитов, уникальных посетителей, их географическое положение, какие поисковые запросы, браузеры, операционные системы и мониторы они используют.
Для получения сведений о сайте с точки зрения поисковых систем (тИЦ, PR, количество внешних ссылок и др.) можно воспользоваться соответствующими сервисами, предоставляемыми на специальных сайтах, например, Яндекс.Вебмастер (http://webmaster.yandex.ru), CY-PR.com (http://www.cy-pr.com/analyisis) и др.
Для сайта может потребоваться более одной компоновочной схемы: одна для главной страницы, а другие — для страниц перехода по ссылкам из главной. Очевидно, тривиальная схема представляется одноячеечной таблицей. Простая схема содержит две ячейки. Наиболее часто встречаются схемы из трех – пяти ячеек. Примеры типичных компоновочных схем показаны на рисунке.
Выбор конкретной схемы зависит от многих факторов, основные из которых — характер размещаемых в ее ячейках элементов (графические изображения, средства навигации, тексты и т.д.), степень важности, а также тематической и структурной разнородности информации.
Разумеется, иерархия и имена папок может быть иной. Так, файлы дополнительных страниц сайта могут располагаться в отдельных папках, например, page1, page 2, и т.д. Главное — чтобы структура папок была удобна вам как разработчику, а также тем, кто будет в дальнейшем сопровождать сайт. Следует также иметь в виду, что имя папки для серверных сценариев нередко предопределяется хостингом. Например, это может быть папка cgi-bin.