Интернет-журнал "Домашняя лаборатория", 2007 №3
Шрифт:
Во время работы со Script Editor вы наверняка встретитесь и с двумя другими названиями этой программы — Visual Studio[49] и Microsoft Development Environment. Второе из них даже указано в окне About и в заголовке окна программы, но означает оно попросту "среда разработки". Поэтому название Script Editor лучше всего соответствует предназначению этой программы.
Script Editor дает web-дизайнеру немалое количество возможностей. Здесь будут описаны лишь некоторые, самые важные из них.
Если в Script Editor создать файл HTML или открыть существующий,
Окно 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),
Рис. 18.3. Панель Properties редактора Script Editor.
В принципе можно везде использовать лишь средства панели Properties — тогда все без исключения тэги будут обрамлены на CSS, причем для создания страницы знать этот язык вовсе не обязательно, так как названия почти всех параметров вполне понятны даже по-английски[50].
Чтобы вставить на страницу рисунок, достаточно перетащить его иконку из "Проводника" в окно Script Editor на нужное место, а потом слегка откорректировать его имя, если он находился на локальном диске.
Превосходные средства работы с Html-кодом — это лишь очень малая часть возможностей Script Editor (хотя и их вполне бы хватило на небольшой web-редактор, причем очень даже неплохой для своего класса)! Вкладка Design основного окна этой программы представляет собой полноценный WYSIWYG-редактор Web-страницы (рис. 18.4), многократно превосходящий по своим возможностям большинство других аналогов.
Рис. 18.4. Вкладка Design окна программы Script Editor. Включен режим отображения границ таблиц и непечатаемых символов.
Система генерации кода в режиме визуальной разработки в Script Editor построена очень разумно. Фактически она ничем не отличается от такой же генерации в режиме Source, когда в текст страницы попросту помещаются заранее приготовленные шаблоны из тэгов. Поэтому фрагменты кода, генерируемые Script Editor при помещении на страницу какого-либо объекта в режиме Design, совпадают с кодом, вставляемым в документ в режиме отображения HTML-текста, что делает работу Script Editor очень корректной.
В то время как количество лишних тэгов, "мусора" у многих WYSIWYG-редакторов вроде FrontPage Express или Microsoft Word 97 достигает порой астрономической величины, а уборка их становится долгим и неприятным занятием, код, генерируемый Script Editor в режиме Design, является настолько компактным и правильным, что практически не требует последующей коррекции (разве что адреса рисунков придется подправить, так как по умолчанию указывается полный путь к ним на локальном диске). Все диалоги задания свойств элементов страницы и панель свойств элементов в режиме Design работают точно так же, как и в режиме Source. Возможности вставления таблиц, указания параметров тэгов работают как в режиме написания кода, так и в режиме визуальной разработки, просто в первом случае вы увидите, как вставляется собственно код, а во втором — соответствующий ему элемент.