Основные правила и этапы создания сайта

 

- необходимо разбивать  большое количество информации;

 

- именовать, созданные  странички следует на английском  языке;

 

- необходимо избавляться  от горизонтальных прокруток  экрана;

 

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

 

- лучше всего делать  такие страницы, которые можно  изменять. Делайте страницы, которые  доступны всем читателям вне  зависимости от того, каким браузером,  платформой или экраном они  решили или вынуждены пользоваться;

 

- на первой странице  сайта должна находиться краткая  информация о содержании сайта,  представленных материалах, авторах  сайта. Посетитель, случайно попавший  на сайт, не должен гадать, что  он может на нем найти;

 

- крайне желательно, чтобы  графика на сайте имела лишь  вспомогательное значение (за исключением,  конечно, сайтов, посвященных изобразительному  искусству и другим подобным  тематикам). Многие пользователи  отключают отображение графики  в своих браузерах для ускорения  путешествий по Интернету;

 

- не используйте на  сайте текст, набранный заглавными  буквами;

 

- более всего нежелательно - это использование при создании  сайта фреймов;

 

- размер каждой страницы  сайта не должен превышать  предел в 80-100 килобайт вместе  с графикой (оптимально - 40-50), за исключением  страниц с большим количеством  информации - электронных книг, например. В любом случае при большом  размере того или иного файла  об этом должно быть сказано  около ссылки на него.

 

С особенностями разрешения дисплея связан вопрос выбора между  изменяющимися страницами (изменяется размер и осуществляется настройка  под разные размеры окон) и фиксированными по размеру (что позволяет разработчику лучше управлять размерами страницы). В пользу каждого из подходов есть веские аргументы. Естественно, можно  найти хорошие доводы за и против каждого из них.

 

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

 

Достоинства:

 

- Web-страницы будут отображаться на дисплеях с разным разрешением; гибкую страницу можно настроить для вывода на любом дисплее;

 

- заполнено все пространство  дисплея, отсутствует нежелательное  свободное место, наличие которого  часто планируется разработчиками  страниц с фиксированными размерами;

 

- дизайн гибких страниц  по духу и по природе более  близок к золотой середине. Согласно  таким стандартам, "хорошей"  считается страница, которая доступна  для большинства пользователей.

 

Недостатки:

 

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

 

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

 

- результаты гибкого дизайна  непредсказуемы, и страница у  разных пользователей будет выглядеть  по-разному.

 

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

 

Достоинства:

 

- страница будет выглядеть  одинаково независимо от размеров  дисплея. Это особенно важно  для компаний, стремящихся представить  свой имидж одинаково для всех  посетителей;

 

- страницы и столбцы  с фиксированной шириной обеспечивают  лучшее управление длинами строк.  Чтобы строки не становились  слишком длинными при просмотре  на больших дисплеях, можно использовать  таблицы.

 

Недостатки:

 

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

 

- по-прежнему сложно контролировать  размер выводимых символов в  браузерах, так что элементы  могут непредсказуемо смещаться  в результате использования большего  или меньшего размера, по сравнению  с тем, который использовался  при разработке;

 

- стремление полностью  контролировать отображение страницы  означает своего рода выступление  против среды. Web - это не печатное издание, у него свои сильные стороны и особенности. Защитники стратегии гибкого дизайна скажут, что фиксированному дизайну нет места в Web.

 

Разработка комбинированных Web-страниц

 

Конечно, не обязательно, чтобы  Web-страницы были полностью фиксированными или гибкими. Можно разработать страницу, объединяющую оба подхода.

 

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

 

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

 

Стратегия разработки

 

Определив, какие браузеры использует большинство посетителей  вашего сайта, вы сможете решить, какие  теги HTML и Web-технологии целесообразно использовать в вашей разработке. Точно так же можно определить, какую часть пользователей вы рискуете проигнорировать при использовании таких средств, как Java или JavaScript.

 

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

 

Незначительная часть  разработчиков придерживается идеализированного  представления о том, что Web должен быть доступен всем. Также они могут считать, что способ внешнего представления должен находиться в руках конечного пользователя, а не автора. Они стремятся использовать только самый надежный, проверенный стандарт и убедиться, что страницы работают со всеми браузерами, включая Lynx и первые версии самых популярных браузеров.

 

Еще одна группа разработчиков  придерживается другой крайней точки  зрения. Они создают страницы только для самой последней, новейшей версии популярных браузеров. Их не волнует, что  страница не будет доступна для пользователей, использующих другие браузеры. Утверждение "посоветуйте им поставить новую  версию - это бесплатно" очень  часто звучит как оправдание такой  тактики. Кроме того, существуют авторы, которые работают только с последней  версией одного конкретного браузера. Заметим, что такой подход может  быть вполне разумным в рамках сетей  интранет.

 

Большинство дизайнеров предпочитают идти на компромисс. В дизайнерских кругах распространена фраза о Web-страницах, которые "изящно деградируют" ("degrade gracefully"), что означает использование новейших технологий, подобных DHTML или JavaScript, таким образом, чтобы обеспечивать функционирование страницы и на более ранних версиях браузерах.

 

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

 

Еще более один подход - автоматический запуск версии, соответствующей типу браузера, который делает запрос. JavaScript может задавать действия в зависимости от используемого браузера. Кроме того, страницы могут быть скомпонованы в процессе работы для конкретного браузера серверными включениями (Server Side Includes).

 

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

 

- Website Garage;

 

- Net Mechanic;

 

- Doctor HTML.

 

Проверка с использованием редакторов HTML. Базы данных совместимости  браузеров и средства проверки HTML начинают прокладывать путь к авторскому инструментарию HTML. Так, GoLive Cyberstudio предоставляет полную базу всех тегов HTML, а также информацию об их поддержке браузерами. Еще более полезно средство "Check Target Browsers" инструмента Macromedia Dreamweaver. Авторы задают типы браузеров, для которых они разрабатывают сайт (Netscape 2.0, 3.0 и 4.0 и Internet Explorer 2.0, 3.0, 4.0, 5.0), a Dreamweaver проверяет, все ли теги и атрибуты поддерживаются выбранными браузерами.

 

2.3 Обзор и сравнительный  анализ HTML-редакторов

 

Macromedia Flash

 

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы, возможно, использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует «подсветка» текста, в общем, работать с ними может только профессионал, знающий язык HTML.

 

Рассмотрим визуальный HTML-редактор DreamWeaver. Этот программный продукт рассчитан на тех, кто плохо, или почти не знает язык HTML, хотя в нем можно создавать сайты даже не обладая данными знаниями. DreamWeaver содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML-кодом. Интуитивный интерфейс DreamWeaver настолько прост, что даже начинающий дизайнер сможет быстро создать профессиональный Web-сайт. Непосредственно в Dreamweaver можно создавать анимации в формате Macromedia Flash, использовать данные из Microsoft Office, легко импортировать rollover-графику, меню и кнопки из Fireworks. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области. В последнее время она начала выпускать версию за версией данного продукта, тем самым все, более совершенствуя его. DreamWeaver-3,-4,-6 и это еще не предел. Причем в каждой новой версии добавляется всё больше и больше функциональных возможностей, не по одной и не по две, а чуть ли не десятками. Многие разработчики Web-сайтов считают DreamWeaver наиболее удобным HTML-редактором как для начинающих Web-дизайнеров, так и для опытных программистов.

 

Одна из последних версий HTML-редактора компании Macromedia-DreamWeaver 9, который относится к категории WYSIWYG-редакторов (т.е.What You See Is What You Get), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и упрощается преимущество технологии WYSIWYG - что вижу, то и получаю).

 

DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции «запись последовательности команд» вы можете записывать последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит всё в той же последовательности.

 

Macromedia DreamWeaver - профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, DreamWeaver облегчает эту работу и обеспечивает полезными инструментами и средствами, чтобы сделать свои собственные проекты непревзойденными. DreamWeaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать различные текстовые документы, которые поддерживаются в DreamWeaver. Также вы можете настроить DreamWeaver, чтобы он наводил порядок и переформатировал HTML, как вы этого хотите.