Прежде чем приступить к созданию сайта в HTML-редакторе, нужно четко представить, что именно вы хотите сделать: как должна выглядеть главная страница сайта и его информационные страницы (причем сначала лучше представлять дизайн не задумываясь о реализации с помощью тегов). Очень желательно нарисовать его либо на бумаге, либо в графическом редакторе, причем второй вариант предпочтительнее: продвинутые HTML-редакторы (например, DreamWeaver) позволяют использовать этот рисунок при создании сайта (т.е. сайт делается как бы поверх рисунка).
Задуманный дизайн можно реализовать двумя способами: с помощью вложенных друг в друга таблиц с невидимыми границами или с помощью слоев. Слои дают гораздо больше возможностей, чем таблицы, однако они сложнее в использовании, кроме того, некоторые старые броузеры не отображают их вообще или делают это некорректно. Таблицы являются более подходящим способом для сайтов с простой структурой и четко выделяемыми прямоугольными областями. Если же сайт имеет достаточно сложный дизайн, а элементы расположены нелинейно и их позиции должны быть четко фиксированными, то таблиц может потребоваться достаточно много, что приведет к большому объему HTML-кода. В этом случае лучше воспользоваться слоями.
Важнейшими элементами дизайна являются заголовок сайта, навигационное меню, а также “подвал”, т.е. нижняя часть сайта, в который размещаются контактная информация, счетчики, сообщения об авторском праве и тому подобное.
Основное предназначение заголовка – это сделать сайт запоминающимся, выделить его из множества других схожих сайтов. Как правило, заголовок содержит графический логотип, полное название сайта (если оно не является частью логотипа). Обычно логотип является не просто картинкой, а ссылкой на главную страницу. Также в заголовок можно вынести некоторые навигационные элементы, в частности, указание на раздел, в котором находится пользователь. Если на логотипе и в названии сайта URL не указан явно (или написан на русском языке, что приводит к возможности его неоднозначного написания латиницей), имеет смысл написать его отдельно а в некоторых случаях - URL главной страницы (но без излишеств вроде http:// в начале или index.htm в конце), чтобы пользователь мог его запомнить. Для пользователей MSIE в заголовке можно также предусмотреть ссылку для добавления сайта в “Избранное”.
Задача навигационного меню – показать пользователю, где он находится в данный момент и обеспечить удобное перемещение в другие разделы сайта. Навигационное меню, пожалуй, самый важный элемент сайта после его содержимого. К разработке меню следует подходить очень тщательно. Неудачно сделанная навигация может привести к тому, что пользователи будут уходить, посмотрев одну-две страницы. При создании навигационного меню следует, что пользователь может начать просмотр сайта с любой страницы (например, если он придет с поисковой системы), а не только с главной.
Вот несколько наиболее распространенных способов создания навигации:
1. Древовидная структура. Ссылки на разделы есть только на главной странице, а на страницах с информацией есть ссылка только на главную страницу (и на основную страницу раздела, если каждый раздел сайта содержит по несколько страниц). Это самый простой способ организации навигации, но самый неэффективный: пользователь, не видевший главной страницы, не будет знать, где он находится в данный момент, и какие еще есть разделы на сайте. Поэтому он может покинуть сайт, ознакомившись только с одной его страницей. Тем не менее, этот способ подходит для небольших непрофессиональных сайтов, например, домашних страниц.
2. Фреймы. Сайт содержит два фрейма (frames), в одном отображается список разделов (часто называемый меню сайта или навигационной панелью), а в другом - непосредственно сама информация. Этот способ очень удобен с точки зрения Web-мастера, но очень неудобен с точки зрения пользователя, так как фреймы будут отображаться корректно, только при заходе через главную страницу, а при обновлении сайта пользователь будет снова оказываться на ней. Кроме того, фреймы некорректно обрабатывают некоторые поисковые системы. Поэтому использовать фреймы крайне не рекомендуется. Исключение составляют только “внутренние фреймы” (iframes), и далеко не всегда, а в очень специфических ситуациях (например, когда надо периодически обновлять часть содержимого сайта).
3. Меню-список разделов. Страница содержит таблицу (или набор слоев), в одном столбце которой находится список разделов сайта в виде текстовых ссылок или графических кнопок, а в другой - информация. Это самый надежный и наглядный для пользователя способ, но если на сайт будет добавлен новый раздел, то обновлять придется все страницы. Однако эту проблему можно решить с помощью HTML-редакторов: во многих из них имеется такая возможность, как шаблоны файлов, и если меню вынести в такой шаблон, то любое изменение редактор сам скопирует во все страницы, созданные на основе этого шаблона.
4. Вставленное меню-список. Внешне этот способ похож на предыдущий, но меню находится в отдельном файле, и включается в страницу с помощью директивы SSI (писать ее надо, переключившись в режим просмотра HTML-кода): <!--#include virtual="/menu.htm"-->. В файле menu.htm должно находиться меню сайта, причем у этого файла не должно быть никаких тегов типа <HEAD>,<BODY>, так как он целиком будет включен внутрь основного файла страницы непосредственно на сервере. Файл с меню можно получить в HTML-редакторе. Для этого нужно сделать на одной из страниц ссылки обычным способом, а потом переключиться в режим просмотра HTML-кода, вырезать их и через Буфер Обмена перенести в отдельный файл. Этот способ имеет два недостатка: первый - на большинстве бесплатных серверов применение директив SSI запрещено, второй – использование SSI незначительно повышает нагрузку на сервер (хотя для небольших проектов это не столь важно). Кроме этого, часто применение SSI требует использования определенного расширения файлов (например, .shtml вместо .htm), что тоже может вызвать некоторые неудобства.
5. Вставленное меню-список на JavaScript. Если сервер не поддерживает SSI, то можно попытаться использовать вместо них JavaScript. Для этого вместо директивы #include следует написать: <SCRIPT language="JavaScript" src="/menu.js"></SCRIPT>. Файл menu.js должен содержать следующиее: document.write('....'); Вместо многоточия следует вставить ссылки, при этом следует обратить внимание на кавычки в тегах <A href="..."> Если они парные ("), то в после слова write нужно использовать одинарные ('), как в рассмотренном примере, в противном случае - наоборот. Но при этом следует помнить, что бывают пользователи, у которых отключен JavaScript (или он вообще не поддерживается). Для таких пользователей придется добавить ссылку на главную страницу, и заключить ее (опять же, перейдя в HTML-режим) в тег <NOSCRIPT>. В результате получится примерно следующее:
При создании сайта следует также учитывать, что у посетителей могут быть различные броузеры, разрешение экрана и количество цветов на экране. Существует два подхода к дизайну: дизайн сайта пропорциональной ширины и дизайн сайта фиксированной ширины. Первый подход является более универсальным, так как сайт будет отображаться нормально почти при любом разрешении и размере окна броузера, однако он более сложен с точки зрения реализации, а для сайтов, содержащих много больших графических объектов или сделанных на слоях, может оказаться вообще не применимым. Второй способ значительно проще, однако он требует оптимизации сайта под конкретное разрешение экрана (сейчас наиболее оптимальным является 1024x768). В результате этого на меньших разрешениях часть текста окажется за краем экрана и для ее просмотра придется делать горизонтальную прокрутку, а на больших разрешениях наоборот, на экране возникнут большие области неиспользуемого места.
Также в процессе создания сайта нужно учитывать, что при просмотре сайта броузер использует только те шрифты, которые установлены на компьютере у пользователя (исключением являются вроде бы только некоторые последние версии MSIE, которые могут производить загрузку шрифтов по мере необходимости, но это увеличивает время загрузки), поэтому при разработке нужно использовать только шрифты, которые являются стандартными (например, Arial, Times New Roman, Verdana, Gevena, Courier New). В противном случае сайт может отобразиться совсем не так, как это задумывалось изначально.
Когда сайт закончен, следует убедиться, что он корректно отображается на всех разрешениях (кроме 640x480, которое сейчас почти не используется) и во всех наиболее распространенных броузерах: MSIE, Opera, Mozilla, Netscape Navigator. Кроме этого не лишним будет провести проверку орфографии, так как даже самые грамотные люди иногда делают глупые опечатки. После этого сайт можно помещать в Сеть.
После загрузки сайта в Сеть рекомендуется проверить работоспособность всех его ссылок, так как бывают ситуации, когда визуальные HTML-редакторы неправильно указывают адреса ссылок из-за ошибок при настройке проекта (например, адрес может получится таким: file://E:/Sites/XXXXPro4/images/title.gif вместо ../images/title.gif или /images/title.gif). Если позволяют размеры сайта, проверку ссылок желательно делать вручную, так как это позволит также обнаружить ошибки в логической структуре сайта (т.е. ситуации, когда ссылка ведет не на тот файл, на который она должна вести, а на какой-нибудь другой).
