Средства  разработки Web – страниц

     В нашем информационном обществе интернет занимает существенное место. С его  помощью можно относительно быстро найти практически любую нужную нам информацию. Общество прогрессирует, поэтому прогрессируют и его  запросы. Современному человеку необходимо постоянно получать информацию. Но, т.к. информация порой  слишком разнообразна, то приходится часть из нее отсеивать  и собирать только «нужную» информацию. Телевидение и радио давно  не могут эту проблему решить. И  тогда на помощь нам может придти интернет, т.к.  в нем можно сортировать  информацию.

     Веб -страницы  - это фактически основа известного нам интернета. Поэтому вопрос о средствах разработки Web - страниц является одним из наиболее важным.

     Существует  два способа технической  разработки Web-страниц. Первый из них – это открыть какой-либо текстовый файл и набрать в нем HTML код. Разумеется , здесь же можно использовать CSS,  Javascript, DHTML, Active-X , PHP и другие. Таким способом пользовались до появления специального ПО.

     Второй  способ - программные средства, которые имеют специальные встроенные компоненты для конвертирования данных, созданных в этих продуктах, в HTML формат. Например, программы широко используемого пакета MS Office, начиная с версии 97, позволяет сохранить документ в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Многие современные графические редакторы предоставляют возможность сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком конвертировании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.

     Третий способ – использовать некие программные средства для разработки Web-страниц. Этот способ разумеется легче, т.к. можно «видеть» то, что ты создаешь. Хотя, по–моему, для начинающего web-мастера было бы полезным сначала научиться  писать код « по - старинке », т.е. познать HTML, DHTML, Active-X, javascript и CSS, SQL , PHP на собственной шкуре. Примером такого программного обеспечения может служить Adobe Dreamweaver.

Современные требования, предъявляемые к web-редакторам, включают в себя:

• Поддержку каскадных таблиц стилей.
• Использование современных скриптовых языков, таких как JavaScript и т.д.
• Генерацию Dynamic HTML для различных браузеров.
• Средства наглядного дизайна: вставка изображений, таблиц и фреймов.
• Динамическое отображение создаваемой страницы в браузере.
• Шаблоны WWW-страниц или специальные программы - "мастера" по их созданию.
• Средства по управлению web-сайтом (создание файловой структуры сайта, отслеживание связей и проверка ссылок между страницами, публикация сайта в Интернет).

Существуют две  разновидности web-редакторов: визуальные и не визуальные.

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

     Визуальные  редакторы позволяют работать с  самой web-страницей "как она есть", в режиме WYSIWYG (What You See Is What You Get - То, что ты видишь, то и получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц, гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама программа формирует (генерирует) соответствующий HTML-код. Кроме средств визуального редактирования эти web-редакторы одновременно предоставляют доступ к получившемуся HTML-коду. Визуальные редакторы — отличная стартовая площадка для начинающих web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро "сверстать" web-страничку, а потом довести ее до ума вручную.

     Выбор редактора, который будет использоваться для создания HTML-документов, зависит  исключительно от понятия удобства и личных пристрастий каждого автора. На сегодняшний день разработано большое число web-редакторов, которые можно разбить на три группы.

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

2) Условно-бесплатные. Web-редакторы этой группы характеризуются  невысокой ценой – от 300 рублей.

3) Платные. В  эту группу входят невизуальные и визуальные редакторы, разработанные крупными фирмами. Отвечают всем требованиям, предъявляемым к современным web-редакторам. Накладывают определенные ограничения на ресурсы компьютера. Обычно имеются демо-версии продукта, которые можно установит бесплатно и работать с ними ограниченное время (30 дней).

Вообще при  разработке сайта можно выделить три основных этапа .

      Первый  этап. Создание дизайна сайта.

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

      Второй  этап. Создание кода.

            На этом этапе  web- мастер принимает то, что ему заказал дизайнер, и начинает воплощать все задумки в реальность. В современном моделировании сайтов используется . например, табличная верстка и верстка слоями.

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

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

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

     Типографское  искусство или просто типографика — вот еще одна область, которая также относится к теме верстки. Это именно искусство, объединившее в себе черты дизайна и верстки, и основано оно на знании шрифтов, опыте их использования, психологии восприятия, чувстве стиля и т.д. Действительно, какой шрифт лучше выбрать, чтобы текст хорошо читался, легко воспринимался при изменении размера букв и делал сайт неповторимым? При подготовке полиграфических материалов ответ на этот вопрос возлагают на дизайнера, но при создании сайтов дизайнер и верстальщик, как правило, решают его сообща.

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

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

      Табличная верстка

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

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

      Верстка с помощью слоев

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

     Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <LAYER>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <LAYER> не был включен в спецификацию HTML и так и остался лишь расширением браузера Netscape.

     Однако  необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был  разработан и одобрен в рабочем  проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.

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

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

   Хак — это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

   Есть  и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами ее поддерживают, они прогрессируют именно в этом направлении. А именно, полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.

   Снова вернемся к слоям. Понятно, что они  непосредственно связаны со стилями. Раз так, то не получается ли, что  каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся  относить этот термин только к тегам  <DIV>.