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

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

Однако наилучшим выбором для web-дизайнера на настоящий момент являются редакторы, сочетающие в себе возможности как первой, так и второй категории. В настоящее время к ним относятся Microsoft Script Editor из пакета программ Microsoft Office 2000/XP и Microsoft FrontPage 98/2000/XP, также входящая в пакет Microsoft Office, однако распространяющаяся и отдельно от него, а также некоторые другие программы. Весьма совершенным инструментом для создания web-страниц является первая программа из этих двух — Script Editor, поэтому стоит уделить ей особое внимание, тем более что она дает разработчику удобную среду еще и для программирования на языках сценариев.

Эта глава — не пошаговое руководство по использованию Script Editor. Ее предназначение — описать возможности этого редактора, а также указать на некоторые не совсем очевидные его функции, чтобы впоследствии вам не потребовалось их искать. Освоить же Script Editor можно лишь одним способом — непосредственно работая с ним и самостоятельно исследуя его. Тем более что это не так и сложно.

Script Editor входит в состав пакета офисных программ Microsoft Office 2000 и Microsoft Office XP и предназначен для разработки Web-сайта, написания программ на языках JavaScript и VBScript и других Интернет-разработок.

При установке пакета Microsoft Office 2000/XP Script Editor по умолчанию не ставится. Для его установки необходимо выбрать 'Выборочную установку', в меню установки компонентов развернуть пункт 'Средства Office', там — 'Редактор HTML-файлов', а, развернув этот пункт, — 'Редактор Web-сценариев', который пометить как 'Запускать с моего компьютера' (рис. 18.1).

Рис. 18.1. Чтобы установить Script Editor, отметьте этот пункт при инсталляции Microsoft Office 2000/XP.

После этого Script Editor может быть вызван из меню Сервис текстового редактора Microsoft Word 2000/XP с помощью пункта меню Макросы-Редактор сценариев. При инсталляции Microsoft Office 2000 исполняемый файл Script Editor по умолчанию устанавливается в папку Program FilesMicrosoft Visual Studio CommonIDEIDE98 и называется MSE.EXE, а если вы устанавливаете Microsoft Office XP, то он будет иметь название MSE7.EXE и разместится в той же папке, что и остальные файлы Office. После окончания установки создайте ярлык на этот файл, который поместите в удобное для вас место.

Во время работы со Script Editor вы наверняка встретитесь и с двумя другими названиями этой программы — Visual Studio[49] и Microsoft Development Environment. Второе из них даже указано в окне About и в заголовке окна программы, но означает оно попросту 'среда разработки'. Поэтому название Script Editor лучше всего соответствует предназначению этой программы.

Script Editor дает web-дизайнеру немалое количество возможностей. Здесь будут описаны лишь некоторые, самые важные из них.

Если в Script Editor создать файл HTML или открыть существующий, то окно с загруженным файлом будет иметь три вкладки. Средняя из них, которая называется Source, показывает HTML-код документа, подсвечивая коричневым цветом тэги, красным — свойства тэгов, а синим — значения свойств (скажем, «font» — это тэг, «size» — это его свойство, а «4» — значение свойства). Левая переводит Script Editor в режим Design — визуальной разработки web-страницы, а правая — Quick View (только в Microsoft Office 2000) — позволяет оценить будущий вид страницы.

Окно Source фактически является полноценным редактором кода HTML. Цветовое выделение тэгов весьма удобно для ориентации в тексте. Имеется функция многократной отмены сделанных изменений.

Для того, чтобы добавить в текст страницы код, соответствующий какому-нибудь элементу, достаточно всего лишь дважды кликнуть мышью на название этого элемента на панели Toolbox (рис. 18.2). Эта панель по умолчанию располагается слева окна Script Editor.

Рис. 18.2. Панель Toolbox редактора Script Editor. Кликнув на названии любого элемента на этой панели, вы вставите на web-страницу код, ему соответствующий, независимо от того, в каком режиме вы работаете — создания кода или визуальной разработки.

Есть даже возможность самому создавать такие элементы — скопируйте в буфер обмена нужный текст, можно с html-тэгами, поставьте мышь на панель Toolbox и выберите из контекстного меню правой кнопки мыши пункт «Paste». После этого двойной клик мыши на этом элементе приведет к вставке в позицию курсора запомненного таким образом текста.

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

Для того, чтобы добавить на страницу многоколоночную таблицу, не нужно долго и упорно прописывать тэги <tr>, <td> и др. — можно вызвать диалоговое окно 'Table'-'Insert Table', указать там нужные параметры таблицы, и ее пустая заготовка будет вставлена в документ, — останется только разместить рисунки и текст. Кликнув правой кнопкой мыши на каком-либо тэге и выбрав пункт Properties, можно задать параметры тэга в специальном диалоговом окне, и они будут правильно и корректно переведены на язык HTML и помещены в код.

Если в стандартном HTML не окажется средств для задания какому-либо элементу нужных свойств, то будет использован язык таблиц стилей — CSS. Тогда при выборе из контекстного меню пункта Properties отобразится не окно задания свойств тэга, а большая панель свойств Properties (рис. 18.3), где можно задать огромное количество параметров тэга. Однако следует помнить, что не все браузеры смогут эти параметры правильно проинтерпретировать. Эту панель можно вызвать и из меню View, выбрав пункт 'Properties Window'.

Рис. 18.3. Панель Properties редактора Script Editor.

В принципе можно везде использовать лишь средства панели Properties — тогда все без исключения тэги будут обрамлены на CSS, причем для создания страницы знать этот язык вовсе не обязательно, так как названия почти всех параметров вполне понятны даже по-английски.[50]