Работа с кодом HTML

Прежде всего, можно переключиться в режим отображения исходного кода HTML, нажав крайнюю левую кнопку из показанных на рисунке 14. Также можно воспользоваться пунктом Code или Switch View меню View.

Рисунок 14 Секция размера окна с открытым списком Кроме того, создатели Dreamweaver предусмотрели возможность просмотра исходного HTML-кода в панели, называемой Code Inspector (рисунке 15). Чтобы вызвать ее на экран, надо выбрать в меню Window пункт Others и в появившемся на экране подменю — пункт Code Inspector. Но проще всего нажать клавишу .

Во многих случаях этого хватает. Однако часто бывает нужно отредактировать фрагмент кода страницы, держа ее перед глазами. Для этого Dreamweaver предоставляет так называемый мини-редактор. HTML. Пользуясь мини-редактором, можно править атрибуты выбранного тега, вставлять код HTML в любое место текста — и все это без переключения в режим отображения кода[23].

Рисунок 15 Панель Code Inspector.

Пусть, например, нужно немного поправить значения атрибутов какого-либо тега. Для этого нужно поставить текстовый курсор в его содержимое и выбрать в контекстном меню пункт Edit Tag Code . На экране появится окно мини-редактора, показанное на рисунке 16. Надо ввести в него нужный код и нажмите клавишу, чтобы Dreamweaver принял все изменения, или, чтобы отказаться от них.

Рисунок 16 Окно мини-редактора HTML.

Как видно, окно мини-редактора позволяет вам править только теги, а не их содержимое. Исправить содержимое тегов можно и в окне документа.

Если нужно вставить в текст Web-страницы какой-либо тег с содержимым, надо поставить в это место текстовый курсор и выбрать в контекстном меню пункт Insert Tag. На экране также появится окно мини-редактора, на этот раз пустое (рисунок 17).

А список, в котором перечислены непонятные слова это одна из замечательных возможностей, появившаяся в Dreamweaver MX — подсказка по коду. Как только поставить где-либо в коде HTML значок <, как Dreamweaver отобразит список, в котором перечислены все теги HTML. Если нажать на клавиатуре какую-либо буквенную клавишу, в списке появятся только теги, начинающиеся на эту букву. Чтобы выбрать нужный тег в списке, нужно выделить его и нажать клавишу или просто щелкнуть по нему мышью[13].

Рисунок 17 Окно мини-редактора при вставке нового тега В окно мини-редактора весь код, который надо вставить (рисунок 18), и нажать клавишу. Он будет помещен на то самое место, где стоит текстовый курсор.

Рисунок 18 Окно мини — редактора с новым кодом HTML, который будет вставлен в страницу Теперь можно «завернуть» любой выделенный фрагмент текста в тег HTML. Для этого надо выделить нужный текст и выбрать в контекстном меню пункт Wrap Tag. Надо ввести в появившемся окне нужный тег со всеми нужными атрибутами и нажать клавишу .

Чтобы удалить тег, в который «завернут» какой-либо фрагмент текста, надо поставить в него текстовый курсор и выбрать в контекстном меню пункт Remove Tag . Dreamweaver удалит этот тег, но оставит его содержимое, которое «вольется» в содержимое родительского тега[11].

В диалоговом окне правки тега надо выделить целиком содержимое какого-либо тега, воспользовавшись секцией тегов строки статуса. После этого нужно выбрать пункт Edit Tag . На экране появится диалоговое окно, показанное на рисунке 19.

Рисунок 19 Диалоговое окно правки тега Пользуясь этим окном и своим знанием английского, можно в удобной форме задавать значения различных атрибутов выбранного тега. В левом списке надо выбрать одну из категорий атрибутов, и в правой части окна появятся соответствующие элементы управления. Также можно щелкнуть «потайную» кнопку Tag Info, выглядящую как обычная надпись, после чего в окне правки тега появится краткая подсказка по выбранному тегу. Закончив правку, нужно нажать кнопку ОК, чтобы сохранить все изменения, или кнопку Cancel, чтобы отказаться от них[23].

Если нужно исправить тег, держа страницу перед глазами, или просто не любите лишние диалоговые окна, можно воспользоваться панелью Tag Inspector. Чтобы вызвать ее на экран (если ее еще нет на экране), необходимо выбрать пункт Tag Inspector в меню Window или просто нажав клавишу. Сама эта панель показана на рисунке 20.

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

Если нажать расположенную в правом нижнем углу панели Tag Inspector кнопку Edit Tag, то, вызовется уже знакомое вам диалоговое окно правки тега. Эта кнопка показана на рисунок 21.

Рисунок 20 Панель Tag Inspector.

Рисунок 21 Кнопка Edit Tag.

Рисунок 22 Кнопка Tag Chooser.

С помощью другого диалогового окна можно поместить на страницу какой-либо тег или «завернуть» в него выделенный фрагмент текста. Для этого служит диалоговое окно Tag Chooser. Чтобы его вызвать, нужно выполнить одно из следующих действий[26]:

• · выбрать пункт Tag меню Insert или нажать комбинацию клавиш +;
• · выбрать пункт Insert Tag контекстного меню окна документа (действует только тогда, когда окно документа находится в режиме отображения HTML-кода);
• · нажать кнопку Tag Chooser, находящуюся на вкладке Common панели объектов (рисунок 22).

Само окно Tag Chooser показано на рисунок 23.

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

Рисунок 23 Диалоговое окно Tag Chooser.

Сразу после нажатия кнопки Insert на экране появится уже знакомое диалоговое окно правки тега, в котором можно задать значения атрибутов выбранного тега. Сам тег будет вставлен только после нажатия кнопки ОК окна правки тега. Заодно Dreamweaver сам переключит окно документа в режим отображения страницы и кода, чтобы можно было видеть, где вставленный тег начинается и где он заканчивается[29].

Если щелкнуть по кнопке Tag Info диалогового окна Tag Chooser, в этом окне появится краткое описание выбранного тега. Учтите, что при этом оба списка «съежатся», чтобы освободить место.

Если перед вызовом окна Tag Chooser выделить какой-либо фрагмент текста вместо того, чтобы просто поставить в какое-то его место текстовый курсор, то выделенный текст будет «завернут» во вновь вставленный тег.

После вставки любого тега окно Tag Chooser останется на экране, так что можно сразу же вставить новый тег.