Бесплатный софт, вэб-сервисы, ресурсы по раскрутке и заработку, свежие номера журнала "Internet Zone". Посетите нас: http://www.izcity.com/ 

Разметчики

Владимир МАЛЬЧИКОВ

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

 

Итак, все решено окончательно и бесповоротно. Тогда приготовьте карандаш и бумагу... хотя зачем? Это я так, по привычке - у вас же в руках номер газеты, где уже все напечатано. Для начала определимся, что за программы нам понадобятся. Так как мы только начинаем приобщаться к web-дизайну, то пока что нас не будут интересовать изысканные новомодные технологии вроде Macromedia Flash или VRML. Для создания относительно простых, но в то же время хорошо смотрящихся страниц, вам понадобятся всего два типа программ :
- редактор HTML-кода
- редактор графических изображений.
Программы подобного рода являются основными инструментами web-дизайнера - так сказать, его "джентльменский набор".
Сюда же следует присовокупить еще несколько вспомогательных программ. Это, в первую очередь, web-браузер - чтобы знать наверняка, что созданная вами страница отображается именно так, как вы задумали. А если учесть, что в разных браузерах одна и та же страница может отображаться по-разному, нелишне будет иметь еще парочку альтернативных. Во-вторых, понадобится также ftp-клиент - он будет применяться для загрузки полностью готовых страниц на сервер. Но начнем с самого главного:

Редактор HTML-кода.
HTML - аббревиатура английских слов HyperText Markup Language (язык гипертекстовой разметки). Фактически web-страница представляет собой обычный текстовый файл, в который вставлены соответствующие дескрипторы языка, сообщающие браузеру о том, что и как нужно показать пользователю. Так что в качестве HTML-редактора можно использовать любой обычный текстовый редактор, который позволяет сохранять результаты работы в обычный текстовый файл, например, стандартный Notepad (Блокнот) или встроенный редактор в составе оболочек FAR или Volkov Commander. Однако в этом случае необходимо хорошо разбираться в основных тэгах (дескрипторах) языка HTML. Начинающему же web-дизайнеру стоит поискать более дружественный редактор, параллельно изучая какое-нибудь описание HTML, коих в Сети предостаточно.
В данный момент существует довольно много разнообразных программ, позволяющих создавать web-страницы - от простейших, распространяющихся бесплатно, до полноценных коммерческих продуктов всем известных фирм-производителей программного обеспечения. Искони существовало достаточно четкое разделение web-редакторов на два класса:
- визуальные редакторы (их еще иногда называют WYSIWYG-редакторами)
- код-ориентированные редакторы
Первый тип редакторов позволяет создавать свою страницу, заботясь только о ее внешнем виде, практически не зная языка HTML. От пользователя требуется только указать, какие элементы (текст, картинки) и где он хотел бы разместить на странице. Все остальное, а именно генерацию html-файла, редактор сделает сам. При работе с редакторами второго типа пользователь фактически сам выполняет роль такого генератора, набирая код страницы и вручную расставляя требуемые тэги языка HTML. Подобные редакторы предназначены уже для продвинутых в HTML пользователей. Обычно они обладают набором полезных функций, как то: проверка правильности кода, автоматическая вставка закрывающего дескриптора и др.
Итак, приступим к рассмотрению возможностей конкретных программ. Начнем с визуальных редакторов.

Netscape Composer
Если у Вас установлен Netscape Communicator версии 4 и выше, то, в его составе вы найдете и Netscape Composer - программу редактирования web-страниц. Что можно сказать об этой программе?
Netscape Composer представляет собой простейший визуальный редактор с довольно небольшим числом возможностей. В нем имеются следующие функции: вставка и форматирование текста, расположение на странице изображений, построение таблиц, расстановка гипертекстовых ссылок, а также публикация страницы на удаленном Web-сервере. Поддержка фреймов, использование диалоговых форм и возможность создания карт изображений отсутствует. Точнее сказать, отсутствует их визуальная поддержка. Пользователь, разбирающийся в языке HTML, может сам вставить в текст страницы тэги, соответствующие диалоговым формам, элементам JavaScript и т.п. Однако, Composer не будет отображать такие объекты.
Из заслуживающего внимания можно отметить следующее:
- функция Remove All Styles, которая позволяет убрать все параметры форматирования выделенного фрагмента текста, приведя его к стандартному виду
- возможность публикации страницы на web-сервере или отправки ее по определенному e-mail адресу не выходя из редактора. При публикации от пользователя требуется указать адрес сервера и логин/пароль для входа, а также файлы, связанные с данной страницей. Для отправки страницы по электронной почте используется Netscape Messenger.
- в процессе создания страницы Composer позволяет проверять, как она будет выглядеть в браузере. Используется для этого, естественно, Netscape Navigator.
- Composer не скрывает от пользователя исходного кода создаваемой страницы. Однако редактирование кода при этом эквивалентно редактированию страницы с использованием обычного текстового редактора.

Macromedia Dreamweaver
Первое, что бросается в глаза после загрузки программы, это ее оригинальный интерфейс с плавающими окнами. Хотя Dreamweaver и позволяет пользователю непосредственно редактировать вручную код страницы, происходит это так же, как в Netscape Composer. Правда, в нем имеется возможность подключения внешнего код-ориентированного редактора. Подобно рассматриваемому немного ниже редактору Adobe GoLive, Dreamweaver можно использовать для создания как отдельных страниц, так и полноценного web-сайта - как "с нуля", так и на основе уже имеющегося материала. Также есть возможность создавать сайты, используя готовые шаблоны.
В окне Objects размещены практически все элементы, которые можно разместить на странице (лишь для вставки списка придется воспользоваться меню). Они разбиты на группы: Common (изображения, списки, таблицы, скрипты, апплеты, элементы ActiveX), Characters (различные полезные символы, например, символ ©), Forms (содержит элементы создания диалоговых форм), Frames (рамки), Head (тэги, которые могут находиться в области <HEAD< документа), Invisible (невидимые объекты). Чтобы разместить нужный элемент, достаточно просто щелкнуть на нем, и он моментально отобразится на странице.
Редактирование свойств объектов, помещенных на Web-страницу, осуществляется в окне Properties (по умолчанию оно размещается под окном редактирования страницы). Для каждого объекта в нем отображаются значения его атрибутов. Например, к какому-нибудь изображению можно привязать ссылку, прямо в этом окне установив соответствующие характеристики.
Для вящего комфорта в строке состояния окна редактирования отображаются установленные размеры страницы (в пикселях), а также предполагаемое время загрузки страницы при заданной скорости соединения - это будет полезно для любителей "забивать" страницу огромным количеством графики.
Dreamweaver позволяет работать также с DHTML, CSS и Layers ("слои" отдельных html-фрагментов), создавать и редактировать стили, устанавливать стилевые шаблоны.
Также полезна функция Check Target Browsers, которая позволяет проверить корректность кода для различных браузеров (Microsoft Internet Explorer 2.0 - 5.0, Netscape Navigator 2.0 -4.0).

Cool Page
Еще один визуальный редактор. По словам разработчиков программы, данный редактор легок и в освоении, и в работе. Он вполне подойдет начинающим Web-дизайнерам, которым нужно срочно создать простую страницу с графическими элементами; более продвинутым же дизайнерам данная программа покажется неудобной. Разместить элемент на странице можно либо через функцию Import (для любого элемента страницы), либо перетащив его мышью из окна Objects (для изображений). В принципе, библиотека изображений - единственный полезный элемент в данном редакторе. К великому сожалению, большая часть их будет доступна только после регистрации.
В общем, программа оставила после себя далеко не лучшие воспоминания. Так что, если вас интересует визуальный редактор, проинсталлируйте у себя либо Adobe GoLive, либо Macromedia DreamWeaver. Поверьте, и по возможностям, и по удобству работы и изучения они намного превосходят CoolPage.

Adobe GoLive 4.0
Это довольно мощная программа, соединяющая в себе свойства как визуального, так и код-ориентированного редактора, позволяющая создавать и отдельные web-страницы, и целые web-сайты. Есть возможность доработки готового сайта - нужно только указать его местонахождение на диске или ftp-сервере в Интернете (в состав программы входит встроенный ftp-клиент) - а также работы со сценариями JavaScript.
Все действия пользователь производит в едином окне редактирования. Выбрав закладку Layout, мы попадаем в визуальный режим. Элементы будущей страницы расположены в отдельном окне Palette и отсортированы по группам, среди которых: Basic (включает в себя основные элементы Web-страницы - изображения, таблицы, скрипты и апплеты Java, элементы ActiveX и др.); Forms (включает в себя основные элементы диалоговых форм - кнопки, метки, поля ввода текста и пароля, меню и списки); Head (тэги, находящиеся в разделе <HEAD< html-документа); Frame (различные комбинации фреймов).
Чтобы вставить на страницу какой-нибудь элемент, его можно просто перетащить на поле создаваемой страницы. Для настройки свойств элемента существует окно Inspector, в котором отображаются все возможные свойства выбранного пользователем объекта. Их значения можно изменить, либо, если они не определены, установить. Есть еще одно полезное окно - Link Inspector - в нем отображаются все гиперссылки, имеющиеся на текущей странице.
Как было отмечено выше, GoLive предоставляет возможность работы непосредственно с кодом страницы - этот режим включается выбором закладки Source в окне редактирования. Из приятных особенностей этого режима стоит отметить цветовое выделение кода, причем на выбор пользователя будет выделяться либо весь код, либо изображения, либо адреса гиперссылок. Радует возможность автоматической нумерации строк, а также столь необходимая функция код-ориентрованных редакторов, как проверка синтаксиса созданной страницы. При этом можно установить, в соответствии с каким браузером будет осуществляться проверка синтаксиса. После проверки выдается список ошибок и предупреждений.
Что мне еще понравилось, так это возможность представления web-страницы в виде схемы с отображением значений установленных атрибутов ее элементов (вызывается закладкой Outline окна редактирования). При этом область кода, находящаяся между двумя парными тэгами, может быть представлена как в развернутом, так и в сжатом виде (т.е. только своим открывающим тэгом).
Когда страница уже создана, можно воспользоваться режимом Preview (соответствующая закладка в окне редактирования) и убедиться, что она в выбранном типе браузера будет выглядеть так, как вы и хотели (или несколько иначе :-) - уж как получилось).

Источник: http://www.mycomp.com.ua/

 


Copyright © 2000г. "Internet Zone" & Nik Romanov, info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.