Web дизайн\Учебник по HTML
Глава 20. Графические редакторы
Лично я придерживаюсь мнения, что путь автора веб-сайтов должен лежать
через изучение кодов XHTML. Графические редакторы веб-страниц — это лишь
инструмент, позволяющий создать некую основу. Решение всех проблем, отладка
страниц, доведение их до ума все равно сводится к редактированию исходного
кода. А для этого его необходимо знать и хорошо представлять себе, что
делает каждая автоматически сгенерированная строка. Если вы внимательно
ознакомились с главами этой книги, то никаких проблем возникнуть не должно.
Преимущества использования графических редакторов очевидны: не нужно
вручную печатать весь этот сумасшедший код. Практически любая из стандартных
программ редактирования веб-страниц позволяет разместить таблицы, создать
фреймы и даже прикрутить кое-какие скрипты на JavaScript. Так называемые
профессиональные редакторы умеют работать со сложными таблицами стилей,
CSSP, выполнять процедуры, присущие DHTML. В этой главе мы рассмотрим,
как пользоваться некоторыми из них:
- Netscape Composer;
- Adobe GoLive;
- Macromedia Dreamweaver;
- Microsoft FrontPage 2002.
Netscape Composer
Netscape Composer — это продукт того же класса, что и все остальные
графические редакторы, которые мы будем рассматривать в данной главе.
Однако он имеет одно существенное преимущество: Netscape Composer является
бесплатным приложением. Среди авторов веб-сайтов о нем, впрочем, ходит
дурная слава. То ли именно потому, что он бесплатный и этим людям обидно,
что они потратили уйму денег на коммерческие программы, то ли потому,
что он все-таки ориентирован на элементы, присущие исключительно Netscape,
и иногда возникают проблемы совместимости созданных с его помощью страниц
с другими браузерами. Кроме того, тот факт, что Netscape Communicator
(базовый продукт Netscape в 1990-е годы) долгое время просуществовал без
существенных изменений, тоже наложил свой отпечаток на Composer — HTML
успел уйти вперед.
Тем не менее к моменту выхода в свет 6-й версии браузера Netscape Composer
подчистили и обновили. Он по-прежнему является частью комплекта Netscape
Communicator (веб-браузер, редактор писем и групп новостей, графический
ре дактор (Composer)). В 6-м поколении редактора все, что вам нужно сделать,
чтобы приступить к созданию страницы, — это выбрать из меню File >
New > Blank Page to Edit.
Где его можно найти?
Composer можно скачать вместе со всем комплектом Netscape с сайта http://home.
netscape, com/computing/download/index.html. После установки с ним сразу
можно начать работать.
Преимущества Netscape Composer
Этот графический редактор по своей спецификации является совместимым
с DTD-Transitional для HTML 4.01. Страницы, создаваемые с его помощью,
не следуют всем правилам стандарта XHTML, — например, пустые элементы
не имеют закрываю щей косой черты. И все же многие другие правила соблюдаются:
большинство кон тейиеров имеют закрывающие теги, наиболее спорные элементы
старательно исклю чаются, а для создания большей части разметки используется
вполне адекватный инструментарий. Автоматически создаваемый код понятен
и неплохо читается (а отсутствие этого качества всегда было недостатком
и этого, и других редакторов).
Рис. 20.1. В режиме показа всех
тегов Composer дает возможность увидеть исходный код создаваемых элементов.
Можно изменять его, добавлять свои стили и т. д.
Composer имеет несколько режимов работы, среди которых есть крайне полез
ные для тех, кто изучает HTML. Это режим показа всех тегов (Show All Tags).
При создании какого-либо элемента появляется маленькая картинка, надпись
на к<и торой соответствует тому тегу, который располагается в этом
месте (рис. 20.1). Это помогает не только изучать язык HTML, но и находить
ошибки (например, два элемента <div> на рис. 20.1). Можно дважды
щелкнуть на элементе и изме нить его атрибуты, добавить внутристрочный
стиль или обработчик событий! на JavaScript.
Существуют еще два режима: режим исходного кода (HTML Source) и режим
предварительного просмотра (Preview). Первый используется для внесения
некоторых изменений вручную и просмотра созданного в автоматическом режиме
кода, второй режим безусловно полезен тем, что можно в браузере увидеть
плоды евоего труда. В этом же режиме можно продолжать редактирование страницы,
только без тех подсказок, которые есть в обычном режиме (Normal).
Недостатки Netscape Composer
Netscape Composer не соответствует стандарту XHTML. Страницы, создаваемые
им, будут удовлетворять только Transitional DTD HTML 4.01 (инструментарий
для этого встроен в редактор). Netscape Composer любит элемент <font>,
который уже давно устарел. Более современным подходом было бы использование
для тех же целей внутрнстрочных стилей.
Вообще-то, этот редактор предназначен для редактирования отдельных страниц
и в этом, пожалуй, основной его недостаток. Далее в этой главе описываются
пр граммы профессионального уровня, которые принципиально отличаются тем,
что ориентированы на управление целыми сайтами. Среди их функций есть
загрузка и выгрузка с сервера и другие операции подобного рода. Что касается
Netscape Composer, то его правильнее всего называть именно редактором
веб-страниц, но не сайтов. Еще одним большим минусом этой программы является
практически полное отсутствие поддержки элементов <style> и <script>.
Их можно включить в состав веб-страницы только в режиме редактирования
исходного кода (HTML Source). Он ничего плохого этим элементам не сделает
при переходе в другие режимы, но и не распознает, скорее всего. Например,
ручное определение стиля для <head> никак не повлияет на вид документа
в редакторе. Если щелкнуть на кнопке Browse (просмотр в браузере), то
все свои изменения вы, конечно, увидите. Такое несоответствие между режимом
предварительного просмотра и обычным просмот ром в браузере, мне кажется,
никуда не годится.
Еще один недостаток касается вопроса интерфейса программы. Многие ком
мерческие редакторы давно уже перешли на применение маленьких окошек,
называемых панелями инструментов, появляющихся и исчезающих в зависимости
от того, какую часть или элемент страницы вы в данный момент редакти руете.
На панели обычно собраны близкие по назначению настройки. Например, для
работы с таблицами в соответствующем окошке будут собраны настройки ширины
ячеек, количества строк и столбцов и т. д. В Composer доступ ко всем инструментам
осуществляется через диалоговые окна, что добав ляет лишний шаг в процесс
редактирования. Причем, чтобы они появились,
нужно дважды щелкнуть на элементе либо в обычном режиме, либо в режиме
просмотра всех тегов. Хотя, конечно, диалоговые окна позволяют менять
сразу несколько настроек элемента, но эти бесконечные двойные щелчки очень
быстро утомляют.
Кое-какие подробности использования
Composer
Каким бы большим ни показался вам перечень недостатков, на деле не так
уж все и плохо, особенно если учесть бесплатность программы. Допустим,
вы решили попробовать поработать с редактором. Просто запустите браузер
Netscape 6.x. Из меню File выберите New t Blank Page to Edit. Можно попасть
в редактор и по-другому: Tasks > Composer. К тому же в браузере есть
маленькая строка меню, обычно располагающаяся в левом нижнем углу, в которой
среди прочего есть кнопка запуска редактора. Composer запускается, появляется
чистая страница. Вы сразу попадаете внутрь контейнера <body>, и
до тех пор, пока вы не залезете в исходный код, все, что вы будете редактировать,
добавлять, удалять и настраивать, будет происходить именно в теле страницы.
Вы начинаете набирать текст. Обратите внимание на то, что меню в левом
верхнем 1 углу позволяет изменить стиль текста — например, сделать его
заголовком. Это показано на рис. 20.2. Блок текста не нужно выделять,
чтобы изменить его стиль. Будет достаточно просто поместить на него курсор.
Рис. 20.2. Изменение абзацного
стиля при помощи выпадающего меню
А вот шрифт, размер, оформление текста изменяется с предварительным
выделением. Выделяем слово (или букву, или предложение, или целый абзац),
затем в юн струментальной линейке находим ту настройку, которая нас интересует.
Можно, впрочем, открыть меню Format и выбрать пункты Font (шрифт), Size
(размер шрифта) или Text Style (оформление).
В том же меню Format имеются настройки свойств таблицы, здесь же можно
настроить элементы <head>-уровня (заголовок страницы и т. п.).
Большинство элементов добавляются через меню Insert (Вставка). Среди
них, можно найти изображения, гиперссылки, таблицы и т.п. Например, если
выбрать Insert > Image, то появится диалоговое окно, в котором нужно
указать расположение изображения на своем жестком диске. (Помните, что
относительный путь при загрузке сайта на сервер должен остаться неизменным.)
Там же вы указываете альтернативный текст, ширину и высоту картинки либо
создаете карту ссылок. Настроив все, что настраивается в этом диалоговом
окне, нажимаете ОК и видите", что изображение действительно появилось
на странице. Чтобы изменить его расположение, можно «взять» кадр за рамку
и перетащить.
Таблица вставляется аналогичным образом. Из меню Insert выбираем пункт
Table. Появляется новое диалоговое окно. Здесь необходимо выбрать количество
строк и столбцов, ширину ячеек, толщину границ. Можно задать и некоторые
дополнительные параметры, такие как впутристрочные отступы и межклеточное
расстоя ние. После щелчка на ОК появится долгожданная таблица. В ее ячейки
можно вводить данные.
Как опытный мастер, вы, возможно, захотите поковыряться в исходном HTML-коде.
Для этого существует режим HTML Source. В этом режиме можно вручную редактировать,
добавлять свои стили, элементы <head>-уровня и скрипты. Netscape
Composer в этом смысле удобен тем, что довольно уважительно относится
к ва шим поправкам и никакой самодеятельности в их изменении не проявляет.
(Но вы можете настроить редактор таким образом, чтобы он доводил имеющееся
форматирование кода HTML до стандартного, используя диалоговое окно Preferences
(Свойства).)
Наконец, можно по-разному просматривать готовую страницу. Один из путей
воспользоваться предварительным просмотром. Для этого достаточно выбрать
режим Preview mode. Это режим просмотра с одновременным редактированием.
Я не рекомендую его использовать. Во-первых, либо мы смотрим на результат,
либо редактируем. Всякая универсальность способна погубить даже самую
хорошую идею. Во-вторых, как я уже говорил, многие вещи просто не отображаются
в таком режиме. Взять хотя бы те же стили. Второй путь — открыть страницу
в реальном браузере (разумеется, этим браузером будет Netscape 6). Для
этого в редакторе существует специальная кнопка, на которой написано Browse.
А еще можно проверить созданную страницу на соответствие стандартам. Для
этого следует из меню Edit выбрать пункт Validate HTML. При этом произойдет
подключение к веб-странице консорциума W3C, на которой будет произведено
тестирование. (Повторюсь, что сравнение будет производиться со спецификацией
HTML 4.01 Transitional. В общем-то, большой разницы с XHTML 1.0 в правилах
и соглашениях нет, разве что переходный DTD чуть менее строг, чем строгий.)
Adobe GoLive
Редактор GoLive вначале был веб-редактором под Macintosh, назывался
GoLive CyberStudio и считался большим достижением для своего времени.
Более того, это была одна из первых программ, которая предлагала несколько
отступить от общепринятого принципа ручного создания страниц. Использовался
принцип «программирования без программирования». Для того чтобы написать
веб-страницу, оказалось достаточным овладеть несложным редактором, а что
уж он там создавал, могло оставаться тайной. Поначалу возможность показалась
очень перспективной, но со временем у такого подхода появилось больше
противников, нежели сторонников. С самого начала программа GoLive была
межплатформенной и остается популярной вот уже многие годы. Сейчас права
на владение ею принадлежат Adobe, да и по виду GoLive является продолжением
линейки графических приложений, разрабатываемых этой фирмой.
Создателям веб-продукции предлагается выбрать один из прототипов страниц,
после чего заниматься подгонкой под собственные нужды. У GoLive есть огромное
множество разных функций, включая редактор JavaScript, поддержку технологии
«drag-&-drop» (перетаскивания элементов из одних документов в другие),
причем для мультимедиа, возможность работы с технологиями типа CSSP. По
определению, это приложение находится на профессиональном уровне, что,
несомненно, отражается на его цене: $299 для обычных пользователей. Но
если вы собираетесь серьезно работать с GoLive, то эти затраты будут оправданны.0
ПРИМЕЧАНИЕ
Как и у большинства приложений, у GoLive существуют более
дешевые «учебные» версии для преподавателей и учащихся.
Где его найти?
Купить Adobe GoLive можно в любом компьютерном магазине. Можно заказать
и через Интернет, воспользовавшись услугами многочисленных дистрибьюторов.
Если же вы не уверены в том, что редактор вам понравцтся настолько, что
вы решитесь его приобрести, то советую вам скачать 30-дневную пробную
версию, предлагаемую Adobe: http://www.adobe.com/products/golive/main.html.
Архив установочного комплекта пробной версии под Windows занимает 35 Мб,
под Мае — 50 Мб. Сами понимаете, такие объемы информации можно скачивать,
только имея достаточно «широкий» канал.
Преимущества GoLive
Если вы загорелись идеей попробовать поработать с GoLive и у вас есть
уже готовые сайты, то советую начать именно с их редактирования. Даже
если это вам и не очень нужно, вы сможете оценить, с какой легкостью этот
редактор умеет скачивать и отправлять на сервер целые сайты. Все, что
вам потребуется, — это указать URL начальной страницы, все остальное GoLive
отыщет сам. После скачивания сайта вы получаете доступ сразу ко всем файлам,
входящим в него, в таком виде, как показан на рис. 20.3.
Рис. 20.3. Adobe GoLive позволяет
визуально управлять сайтом
Одним из очевидных преимуществ GoLive является максимальная интеграция
веб-редактора с другими продуктами фирмы Adobe. Можно напрямую работать
с изображениями Photoshоp, анимацией, созданной в Adobe ImageReady, а
также файлами Adobe Illustrator или Adobe LiveMotion. Как видите, это
целый комплекс] программ, дополняющих друг друга, но в то же время способных
работать совершенно независимо. Между прочим, если вы купите их все вместе
(Adobe Web Studio), то это обойдется гораздо дешевле, чем приобретение
отдельных приложений. При этом вы получите набор высокопрофессиональных
программ, позволяющих создавать веб-продукты от начала до конца.
У GoLive существует множество возможностей, включая профессиональную
под держку доступа к базам данных, возможность создания страниц, работающих
с Mi crosoft ASP серверами, автоматическое преобразование кода из HTML
в XHTML. На высоком уровне реализован редактор исходного кода, в нем есть
множество интересных функций. Например, можно увидеть все элементы вашей
страницы, выстроенные в древовидную структуру. Можно попросить GoLive
усмирить свою силу и не трогать написанный вручную код.
На самом деле, если при чтении этой книги у вас под рукой оказалась
бы эта программа, то вы бы обнаружили, что режим просмотра исходных кодов
очень удобен для изучения и работы в XHTML. (В режим Source можно попасть,
если щелкнуть на соответствующей закладке вверху.) Маленькие кнопки, выстроен
ные в линию, позволяки-выделять определенные части кода. Например, можно
выделить только ссылки или только тот код, который будет исполняться на
се вере. Можно вывести на экран счетчик строк. Это особенно удобно при
отладке ошибок JavaScript при просмотре в Internet Explorer, поскольку
этот браузер, выводя свои сообщения, указывает, в какой строке произошел
сбой. В GoLive есть маленький счетчик ошибок, позволяющий быстро перейти
к тому месту,| которое нужно отладить.
Хотя Go Live является продуктом, ориентированным в основном на Windows,
его Мас-корни проявляются до сих пор в таких, например, вещах, как поддержка
AppleScript, QuickTime, непосредственная работа с применением технологии
WebObjects (npo граммная среда Apple самого высокого уровня, используемая
для построения та ких крупных объектов, как Интернет-магазины).
Недостатки GoLive
Пользователи и аналитики сравнивают GoLive с Macromedia Dreamweaver
— программой того же уровня — и приходят к выводу, что именно последняя
является лидером в этой категории. В то время как все основные достоинства
GoLive основываются на интеграции с другими программами фирмы Adobe, Dreamweaver
отличается простотой использования. Дело в том, что на изучение GoLive
требуется очень много времени — программа получилась все-таки очень сложная.
Зато, конечно, никакой другой редактор не умеет так работать с сайтами,
которым нужна поддержка баз данных.
В GoLive 5 имеются некоторые сложности со следованием стандартам, поскольку
используется особенный подход к созданию страниц. Далеко не все страницы,
написанные в этом редакторе, пройдут ратификационный тест W3C. Речи о
генерации совместимого с XHTML 1.0 кода пока не идет. Особенно много самодеятельности
редактор проявляет при настройке таблиц.
Если вы хотите работать с GoLive, вам понадобится хороший большой монитор
с высоким разрешением. Это связано с огромным количеством панелей инструментов,
которые при разрешении, скажем, 800 х 600 просто не поместятся на экране
(рис. 20.4). Требуется много пространства и хорошая мышь, способная быстро
бегать по этим просторам.
Рис. 20.4. Панели инструментов
GoLive с трудом поместятся на экране при разрешении 800 х 600
Кое-какие подробности использования
GoLive
Если вы собрали весь свой сайт, можно заняться вопросом размещения его
на сервере. Редактор предоставляет для этого много возможностей. Когда
вы освоите GoLive, вы предпочтете с его помощью заниматься не только редактированием,
но и управлением сайтом (например, с использованием FTP). Более того,
если ваш сервер имеет поддержку протокола WebDAV, то можно заниматься
и редактиро ванпем страниц, размещенных на сервере.
Если сайт хранится на вашем локальном жестком диске, его следует импортировать
с помощью File > New Site > Import From Folder. Если же сайт находится
уже на сервере, следует импортировать его по-другому: File > New Site
> Import. В этом случае вы будете работать по FTP. Помните, что загрузка
всего сайта с сервера может занять довольно много времени.
После импортирования сайта вы увидите окно Site. В нем будут представлены
все страницы, все атрибуты разметки. Причем последние группируются. На
пример, можно щелкнуть на закладке Colors (Циста) и просмотреть все цвета,
используемые на страницах. GoLive позволяет присваивать собственные име
на конкретным шестнадцатеричным значениям цветов. Это очень удобно, особенно
при работе над одним проектом целой группы дизайнеров. Щелкнув на закладке
установки шрифтов (Font Sets), можно просмотреть используемые се мейства
шрифтов — опять же это удобно при командной работе над проектом. Закладка
Errors (Ошибки) содержит список некорректных и неработающих ссылок.
Рис. 20.5. Можно использовать
сетку для точного размещения элементов на странице, не заботясь о том,
какой код за этим стоит
Если дважды щелкнуть на окне Site (или создать новый с помощью команды
File > New), появится главное окно редактора. Сверху вы увидите множество
закладок, переключающих различные режимы работы (Layout, Source, Preview).
При работе в режиме Layout (главный режим редактирования) вы обнаружите,
что такие элементы, как изображения, части форм и многое другое, не нужно
описывать, набирая что-то вручную или обращаясь к командам из меню. Достаточно
лишь перетащить соответствующий значок с панели инструментов Objects (Объекты)
на страницу. Там вы найдете такие элементы, как комментарии, разрывы строк,
горизонтальные линии и т. д., вплоть до объектов QuickTime или RealMedia.
При выборе (с помощью мыши) элемента, находящегося на странице, появляется
окно инспектора объектов (Inspector), в котором можно редактировать его
свойства.
Очень удобной для создателя веб-страниц вещью, которая имеется в GoLive,
является «сетка» (рис. 20.5). С ее помощью можно очень точно разместить
все свои элементы, и при этом не играет роли ни стиль, ни тип, ни свойство
элемента. На самом деле при этом автоматически создается невидимая таблица,
и именно в нее помещаются объекты.
Macromedia Dreamweaver
По мнению большинства профессиональных веб-дизайнеров, Dreamweaver является
наилучшим инструментом для создания сайтов. В то время как GoLive и Microsoft
FrontPage все свои преимущества получают за счет интеграции с другими
программными средствами, Dreamweaver выигрывает за счет удобного интерфейса
и оригинального подхода к созданию веб-страниц. Я лично знаю множество
людей, которые начинали изучать веб-технологии с помощью этой программы
— настолько она проста и удобна в обращении. Даже обычная функция отправки
файлов на сервер по FTP выполнена элегантно. В целом подход Dreamweaver
к дизайну интерфейса сводится к тому, что вы можете работать с минимальным
количеством панелей инструментов на экране. Например, можно перетаскивать
значки с одной панели на другую, работать с небольшим количеством окон,
разместив в них только самые необходимые инструменты. Очень важно — иметь
быстрый доступ к часто используемым функциям.
В то же самое время не стоит забывать о том, что Dreamweaver — продукт
Macromedia, фирмы-разработчика мультимедийных приложений. Это означает
интеграцию с таким популярным сейчас инструментом, как Macromedia Flash.
Более гого, Macromedia распространяет Dreamweaver вместе с Flash, Fireworks
(приложение для создания анимации и оптимизированных изображений) и т.
п. Эти пакеты (Macromedia называет их Studio) обычно обходятся дешевле,
чем наборы из ядельных программ.
Где его найти?
Существует демо-версия Dreamweaver, рассчитанная на работу в течение
30 дней. Ее можно скачать с http://www.macromedia.com/software/dreamweaver/.
Нopмaльнaя вepcия программы стоит $299, существует возможность льготного
обновления.
Преимущества Dreamweaver
Этот редактор удобен своим сочетанием визуального и текстового подходов
к соз данию веб-страниц. С ним будет приятно работать как новичку, так
и профессио нальному автору XHTML-страниц. Можно начать работу с чистого
листа, и пере, вами будет нечто вроде мощного текстового редактора. Небольшая
панель иистру ментов содержит самые популярные элементы, которые можно
перетаскивать на страницу и сразу же настраивать. Причем в такую панель
можно поместить раз личные части страницы, начиная от горизонтальных линий
и закапчивая больши ми объектами.
Тема текстового процессора с широкими возможностями, что называется,
красной нитью проходит через весь Dreamweaver. Например, в самом низу
имеется окно Properties (Свойства), содержимое которого изменяется в зависимости
от того, какой элемент находится в данный момент в обработке. Сделанные
вами изменения видны сразу же и влияют на генерируемый код. Это касается,
например, размеров шрифтов, стилей текста, параметров изображений. Гиперссылки
создаются с использованием окна Properties путем подсвечивания текста
или изображения и ввода URL в поле ввода Link (рис. 20.6).
Рис. 20.6. При создании страницы
используйте окно Properties для быстрого изменения параметров
Одной из полезных возможностей при создании страниц в Dreamweaver является
работа с двойным окном кода и графического представления. В редакторе
имеется три режима: просмотра исходного кода, просмотра результирующей
страницы и двойного окна, в котором сверху расположен код, а снизу — его
представление в графическом режиме (рис. 20.7). Редактировать можно и
то и другое. Это очень популярная и полезная возможность. Вы сразу же
видите, как влияет код на результат, но можете и поинтересоваться, как
сделать ту или иную вещь на XHTML. Если же вам не нравится то, что автоматически
создает программа, вы можете отредактировать это место в исходном коде.
Активными являются оба окна. По крайней мере, подсвечивается и там и там
всегда одна и та же часть страницы.
В Dream weaver имеется панель References (Руководства), которая включает
в себя тексты кратких справочников по HTML и CSS. Такая шпаргалка может
помочь в очень многих случаях, будь то создание стилей для всего сайта,
переопределение элементов или классов. К большому сожалению, даже Dreamweaver
не умеет в полной мере отображать все возможные стили CSS, для этого существуют
полноценные браузеры.
Еще одна уникальная вещь, присущая исключительно данному редактору,
— это такая панель, которую можно назвать кладовкой или сундуком (в программе
ее можно обнаружить под именем Asset). Она особенно удобна, если ваш сайт
имеет большие размеры. В ней собраны все изображения, цвета, URL, мультимедийные
элементы... В общем, все, что есть на вашем сайте. Конечно, в отличие
от большинства реальных кладовок и тем более сундуков, здесь все разложено
по полочкам. Для чего нужна подобная панель? Прежде всего для перетаскивания
повторяющихся элементов. Согласитесь, зачастую приходится вставлять на
разных страницах одни и те же ссылки, одни и те же заголовки и т. д. Можно
разработать их один раз, а затем только перетаскивать.
Рис. 20.7. Двойное окно Dreamweaver
позволяет одновременно редактировать исходный код и создавать элементы
в графическом режиме
Основной режим Layout (Макет) напоминает GoLive, однако имеет оригинальную
визуальную обратную связь. Если выбрать значок Layout из секции View панели
Objects, появится новая панель инструментов. Так вот, можно нарисовать
на странице таблицу и начать заполнять ее, а можно нарисовать отдельные
ячейки, которые Dreamweaver сам превратит в таблицу (размером во всю страницу,
только вы этого не увидите). И вот вы рисуете, рисуете эти плавающие ячейки
и наблюдаете очертания всей остальной таблицы. Так можно создавать очень
сложные вещи (рис. 20.8), основанные на табличном интерфейсе.
Рис. 20.8. В режиме Layout (Макет)
можно создавать ячейки таблицы в любом месте экрана, что может привести
к интересным эффектам дизайна
Среди других особенностей программы хочется отметить встроенный отладчик
JavaScript. С его помощью можно отыскать ошибки в скриптах, решить многие
проблемы или хотя бы понять, куда копать.
Благодаря тому что у Dreamweaver и Flash как-никак общие родители, можно
создавать кое-какие анимационные эффекты прямо в редакторе, без помощи
внешних приложений.
Недостатки Dreamweaver
По сравнению с другими веб-редакторами высокого уровня, Dreamweaver
больше всех отстает в вопросах работы с элементами серверной стороны.
У GoLive есть множество встроенных функций для работы с базами данных,
FrontPage привер жен своим родным серверам от Microsoft, а вот Dreamweaver
требует установки Dreamweaver UltraDev для нормальной работы с серверными
приложениями. Но зато UltraDev — это мощный пакет с поддержкой ASP, JSP
и Cold Fusion. Эти названия должны значить много для разработчиков веб-приложений.
Если вы ищете графический редактор с поддержкой серверных функций, будьте
внимательны и смотрите не только на перечисление возможностей, но и на
ценники.
Придется разочаровать вас, но если вы ищете редактор со 100%-ной совместимостью
с XHTML 1.0 Strict, то и Dreamweaver не будет для вас идеалом. Однако
архитектура плагинов позволяет третьим приложениям разного рода вписываться
в строги и DTD при работе с этим редактором. Такой инструментарий можно
найти на http://www.macromedia.com/exchange/dreamweaver/.
Обобщая вышеизложенное, можно сказать: у Dreamweaver не так уж много
недостатков, особенно если вам близок интерфейс этого редактора. FrontPage
выглядит традиционно, то есть как большинство продуктов Microsoft Office;
GoLive будет, наверное, привычнее пользователям Мае и продукции Adobe.
Однако Dreamweaver, как мне кажется, благодаря гибкости настройки интерфейса
способен удовлетворить любого.
Кое-что о работе с Dreamweaver
Окно Site — самое подходящее место для начала работы, если какие-то
зачатки сайта у вас уже имеются. Выберите из меню Site пункт Define Sites,
тем самым вы преобразуете существующие файлы в понятный редактору формат.
В окне Site Definition (Определение сайта) можно задать имя, выбрать локальную
корневую папку, указать URL, по которому будет размещен сайт. При этом
обратите внимание на множество дополнительных настроек. В частности, в
Remote Info можно внести данные о FTP-сервере или каком-нибудь другом
механизме обновления сайта. При включенной функции Design Notes (Замечания
по дизайну) можно обмениваться сообщениями с другими людьми, работающими
над сайтом.
Для завершения работы с настройками щелкните на кнопке ОК. Теперь, чтобы
открыть сайт, можно будет применять команду Site > Open Site. Если
вы настроили доступ по FTP, то можно использовать окно Site для быстрого
входа в систему и обмена файлами со своим сервером (рис. 20.9).
Для того чтобы перейти к редактированию какой-нибудь отдельной страницы,
щелкните дважды па панели Local Folder (Локальная папка) в окне Site.
(Или File > New, или File > Open). Затем я бы рекомендовал перейти
в режим двойного окна. (Это делается с помощью центральной из трех кнопок
переключения режимов. Можно и так: View > Code and Design.) Если вы
раньше уже работали со страницей, можно прокрутить код и посмотреть, не
выделено ли там что-нибудь. Выделенный код — это неправильный код. Внесите
коррективы, щелкните на кнопке Refresh (Обновить) на панели инструментов
(или выберите команду View > Refresh Design View) и убедитесь в том,
что все стало хорошо.
Добавление элементов осуществляется очень просто: для этого наводите
указатель мыши на нужный значок на панели объектов (Objects) и перетаскиваете
его на страницу. Если вам такой способ не нравится, можно воспользоваться
командами из меню Insert. Объекты могут быть как простыми, так и сложными.
Например, можно создать слой (как CSS, так и Netscape) или какой-нибудь
элемент серверной обработки.
Рис. 20.9. Окно Site великолепно
подходит для управления целым веб-узлом
Во время работы следует пользоваться окном Properties, ведь именно в
нем вы определяете свойства XHTML-элементов. Если вы выделяете текст на
странице, то в окне свойств вы будете редактировать его параметры. (Внимательно
смотрите, что при этом происходит в коде: есть шанс, что будут использованы
«переходные» элементы типа<font>.) Если вы выделяете ячейку таблицы,
появятся свойства, относящиеся к таблицам.
Также при работе бывает удобно иметь под рукой окно CSS Styles, в котором
можно | редактировать стили. Многие из них сразу же повлияют на внешний
вид страницы ] в редакторе. Если вы откроете окно Asset, то сможете запросто
перетаскивать по вторяющиеся элементы со страницы на страницу или даже
копировать их внутри одной страницы.
После окончания редактирования сайта всегда проверяйте созданные ссылки.
Для этого из меню Site нужно выбрать команду Check Links Sitewide. Отчет,
который будет сгенерирован, можно будет использовать для устранения ошибок.
Microsoft FrontPage 2000
FrontPage 2000 — это популярный веб-редактор, особенно среди приверженцев
набора программ Microsoft Office и тех, кто создает сайты специально для
сервер на основе Microsoft-технологий. Он имеет сильные родственные связи
с таки сложными программами, как Word, Excel, и другими Office-приложениями.
B то же время заметна интеграция и в веб-технологии с применением языков,
скрип и интерфейса Microsoft.
Где найти программу?
Я думаю, вы догадываетесь, что никаких демонстрационных версий FrontPage,
доступных в Сети, не существует. Да и слишком велик объем программы, чтобы
ее скачивать из Интернета. Тем не менее существует пробная версия, но
только на компакт-диске. Возможно, она продается в компьютерном магазине.
В противном случае можно заказать компакт-диск через Интернет на сайте
Microsoft: http:// www.microsoft.com/frontpage/evaluation/trial.html.
В отличие от всех остальных редакторов, обсуждавшихся в этой главе, FrontPage
существует в версии только под Windows. Никаких Mac, Linux, Unix этот
продукт Microsoft традиционно не признает. Версия 2002 может поставляться
вместе с другими продуктами Office. Отдельно FrontPage тоже можно купить,
он стоит $169.
Достоинства FrontPage
Самое очевидное преимущество данного редактора заключается в его интеграции
с Microsoft Office. Он и выглядит как типичное приложение из этой серии.
Чело- век, знакомый с Word, Excel, Access, может начать пользоваться FrontPage
сразу же, основываясь на опыте работы с другими приложениями. Вы найдете
тут и панели инструментов, очень похожие на панели инструментов Word,
и эту вездесущую «скрепку» с ее советами. Есть здесь и наборы мастеров,
автоматически создающих страницы в соответствии с заданными параметрами
шаблонов.
В редакторе существует множество инструментов, и самые нужные из них
можно поместить на видное место в главном окне. Есть переключатель режимов,
позволяющий посмотреть на страницу в разных ракурсах. Например, инструмент
Hyperlinks показывает структуру ссылок, a Navigation — навигационную иерархию
сайта.
FrontPage удобен для начинающих пользователей. Это общая концепция,
которой компания Microsoft традиционно придерживается во всем, начиная
от служебных утилит и небольших приложений и заканчивая операционной системой.
Например, DHTML-обработчик события наведения указателя мыши на элемент
создается с помощью выделения этого элемента при выбранном в панели инструментов
соответствующем значке.
FrontPage неплохо работает с серверами Microsoft, имеет довольно обширные
возможности по управлению сайтами. Можно просматривать статистику, касающуюся
количества посещений, операционных систем, установленных у пользователей,
URL, с которых попали на ваш сайт. Можно включить и монитор, позволяющий
отслеживать происходящее на узле. Есть возможность интеграции с содержимым
и веб-технологиями Microsoft, представленными, например, на сайте bCentral.com
(трафик и доходы от сайта), Expedia (онлайновые туристи-ческие ссылки)
и даже MSNBC (размещение свежих новостей на своих страницах).
Одна из самых сильных сторон этого редактора — это простота использования.
Например, один скромный веб-компонент (Insert > Web Component) представляет
собой ни больше ни меньше как фотогалерею (можно вставить ее и по-другому:
Insert > Picture > New Photo Gallery). Мастер поможет создать традиционный
интер фейс с маленькими изображениями для предварительного просмотра,
являющимися одновременно ссылками на изображения нормального качества.
С помощью шаблонов можно организовать монтаж, слайд-шоу или страницу,
где к каждой картинке будут добавлены пояснения (рис. 20.10).
Рис. 20.10. Окно свойств фотогалереи
помогает собрать множество изображений на одной странице
Существует еще множество подобных мастеров, шаблонов, всяческих помощников...
Их применение освобождает автора веб-сайта от рутинной работы. Если сайт
вам нужен для чисто утилитарных, практических целей и вы не понимаете,
где здесь место творчеству, можете за полчаса создать веб-узел с гостевой
книгой, форумом, обратной связью и HTML-формами. Но помните, что все это
будет выглядеть весьма банально. Следует учитывать: чтобы это все работало,
на вашем сервере должен быть установлен пакет FrontPage Extensions.
ПРИМЕЧАНИЕ
FrontPage Extensions — это набор приложений, в основном
для серверов, разработанных фирмой Microsoft, хотя теоретически их могут
поддерживать и Unix-серверы. Эти расширения редактора используются для
создания интерактивных элементов и эффектов: счетчиков посещений, досок
объявлений, форм и т. д. Без FrontPage Extensions, установленного на сервере,
все эти компоненты работать не будут.
Недостатки FrontPage
Интерфейс FrontPage — это то, что вы либо любите, либо ненавидите. Если
вы не ярый приверженец Microsoft Office, то при работе с этим редактором
вы увидите, что он страдает от тех же самых болезней, что и другие приложения
из этой линейки Microsoft. Шаблоны, мастера, помощники, подсказчики, указчики...
Однако все, что вы будете создавать, получится стандартным, а интимного
общения с кодом XHTML вы так и не получите. Редактор очень сильно зависит
от собственных расширений: FrontPage Extensions, специфические коды Internet
Explorer и т. д. Причем, например, о необходимости установки первого на
сервере вы можете и не знать. В этом случае вы будете долго удивляться,
почему не работают или (что еще хуже и загадочнее) работают некорректно
такие классные «мулечки», ведь при локальном тестировании все вроде бы
было нормально!
Наконец, такой Office-центрический подход может быть интересен в лучшем
случае пользователям Windows, но для тех, чья жизнь протекает перед монитором
Mac-машины или с профессиональной Unix-системой, радость беспечных коллег
недоступна. Несмотря на все кажущиеся прелести, удел FrontPage — быть
веб-редактором для создателей небольших персональных сайтов.
Кое-что об использовании FrontPage
С самого начала работы с редактором вас будут сопровождать. Вам не дадут
работать без присмотра ни минуты. С того момента, как вы из меню File
выбираете New > Page или New > Web, вы окунетесь в удивительный
мир шаблонов и стандартных решений. Итак, появится окно, в котором вам
придется сразу решить, что же вы хотите создать. То ли чистую страницу,
то ли новый сайт, то ли вы хотите использовать шаблон. Шаблоны можно увидеть,
выбрав Page Templates или WebSite Templates в соответствующей колонке.
Иногда при выборе шаблонов можно даже увидеть маленькую картинку, показывающую,
как будет выглядеть ваша страница. Если вам понравилось что-нибудь из
предложенного, нажмите ОК. Будьте готовы к тому, что появится мастер.
Но это необязательно будет так. Может быть, вы сразу начнете работу с
шаблоном.
После прохождения всех этих шагов, казалось бы, можно уже приступить
и к редактированию, собственно, страницы. Если вы знакомы с Word, то никаких
вопросов у вас не возникнет. Хотите действительно изменить вид страницы?
Вам пет необходимости разбираться в исходном коде, что-то там исправлять.
Выбираете из меню Format пункт Theme, появляется диалоговое окно, здесь
вы находите какую-нибудь предопределенную тему, которую Microsoft заботливо
включил в состав редактора, выбираете ее и нажимаете на ОК. Надо отдать
должное этим темам. Среди них есть очень профессиональные и красивые.
Правда, есть и несколько эксцентричные. Настройку темы можно произвести
даже на уровне используемого кода. Если вы в упомянутом диалоговом окне
установите флажок Apply Using CSS (Использовать CSS), то вместо элементов
<font> будут применены стили.
ПРИМЕЧАНИЕ
Кстати, тему можно назначить уже существующей странице
или даже целому сайту. Сделать это можно все в том же диалоговом окне.
Эту возможность имеет смысл использовать, только если дизайн примитивен.
Если же вы на свой дизайн наложите еще и сложную тему, получится что-то
ужасное, а восстановить исходный вариант, не имея резервного файла, будет
трудно.
Еще одна трудность состоит в добавлении веб-компонентов. Команда Insert
> Web Component загрузит для вас специального мастера. С ним кувыркаться
можно долго, поскольку под веб-компонентами FrontPage понимает буквально
все: динами ческие эффекты, какие-то содержания и указатели, счетчики
посещений и т. д Можно добавить компоненты, берущие данные с других сайтов
и служб Microsoft
Хотя многое из этого и является привилегией FrontPage Extensions, вы
обнаружите, что есть компоненты, просто обеспечивающие навигацию по сайту
(например ссылки типа Назад и Вперед или список ссылок на все страницы,
из которых состоит сайт). Вам следует пройти до конца работы мастера.
Рано или поздно выбранный компонент все-таки появится на странице.
И наконец, вы приняли решение опубликовать свое произведение: File >
Publish Web.
Резюме
Выбор веб-редакторов не так уж и богат, и каждому под силу, попробовав
каждый из них, предпочесть какой-нибудь один для себя. В этой главе я
попытался, возможно несколько субъективно, оценить сильные и слабые стороны
каждого из представленных приложений, не скрывая своего негативного отношения
к продуктам фирмы Microsoft.
Для меня оптимальным подходом является режим «двойного окна» Dreamweaver,
где сверху исходный код, а снизу — результирующая страница. Именно так,
на мой взгляд, и следует работать. У каждого из редакторов есть достоинства
и недостатки. Adobe GoLive хорошо работает с другими продуктами Adobe,
Macromedia Dreamweaver неплохо сотрудничает с другими продуктами Macromedia,
Microsoft FrontPage... Разве что про Netscape Composer невозможно сказать
ничего определенного в смысле его интеграции с какими-то третьими продуктами.
Но он бесплатный, и в этом его преимущество.
У большинства из редакторов есть демо-версии, я бы рекомендовал вам
скачать их и попробовать поработать, прежде чем делать окончательный выбор.
Факты, конечно, остаются фактами, но их восприятие каждым отдельным пользователем
может очень сильно отличаться. К тому же у каждого, кто берется за создание
сайта, свои цели. А разным целям соответствуют разные средства.
В следующей главе мы рассмотрим некоторые дополнительные возможности
веб-технологий. Вы узнаете кое-что новое о CGI-скриптах и серверных приложениях. |
®Abifost,
2006. Копирование информации сайта разрешается только с указанием ссылки на
этот сайт.
Гостевая книга Контакты, резюме,
об авторе
