Macromedia Dreamweaver MX

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

А теперь давайте выясним, какие средства Dreamweaver предлагает тем, кто знаком с языком HTML.

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

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

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

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

Это простейшая Web-страничка созданная в стандартном Блокноте и отображенна

В Microsoft Internet Explorer]

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

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

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

Вы спросите: а что это за странный список, в котором перечислены непо­нятные слова? Это одна из замечательных возможностей, появившаяся в

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

Введите в окно мини-редактора весь код, который вы хотите вставить (рис. 2.21), и нажмите клавишу <Епгег>. Он будет помещен на то самое ме­сто, где стоит текстовый курсор.

И, наконец, вы можете "завернуть" любой выделенный фрагмент текста в тег HTML. Для этого выделите нужный текст и выберите в контекстном меню пункт Wrap Tag. Введите в появившемся окне нужный тег со всеми нужными атрибутами и нажмите клавишу <Enter>. Дело сделано!

Вообще-то существует еще пункт Quick Tag Editor меню Modify и кнопка в ре­дакторе свойств, но лучше ими не пользоваться. По какому принципу они рабо­тают, знают, наверное, только программисты фирмы Macromedia. Поэтому пользуйтесь лучше контекстным меню окна документа — так надежнее.

Чтобы удалить тег, в который "завернут" какой-либо фрагмент текста, по­ставьте в него текстовый курсор и выберите в контекстном меню пункт Remove Tag <тег>. Dreamweaver удалит этот тег, но оставит его содержи­мое, которое "вольется" в содержимое родительского тега.

Если вы пока еще плохо знаете теги HTML, не беда. Dreamweaver MX идет вам на помощь, предоставляя несколько новых инструментов для правки уже существующих и вставки новых тегов, которые наверняка понравятся неопытным пользователям.

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

Пользуясь этим окном и своим знанием английского, вы можете в удобной форме задавать значения различных атрибутов выбранного тега. В левом списке выберите одну из категорий атрибутов, и в правой части окна по­явятся соответствующие элементы управления. Вы также можете щелкнуть "потайную " кнопку Tag Info, выглядящую как обычная надпись, после чего в окне правки тега появится краткая подсказка по выбранному тегу. Закончив правку, нажмите кнопку ОК, чтобы сохранить все изменения, или кнопку Cancel, чтобы отказаться от них.

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

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

Кстати, нажав расположенную в правом нижнем углу панели Tag Inspector кнопку Edit <тег> Tag, вы вызовете уже знакомое вам диалоговое окно правки тега. Эта кнопка показана на рис. 2.24.

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

□ выбрать пункт Tag меню Insert или нажать комбинацию клавиш <Ctrl>+<E>;

□ выбрать пункт Insert Tag контекстного меню окна документа (действует только тогда, когда окно документа находится в режиме отображения HTML-кода);

□ нажать кнопку Tag Chooser, находящуюся на вкладке CoMmOn панели объектов (рис. 2.25).

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

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

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

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

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

Заметьте, что после вставки любого тега окно Tag Chooser останется на эк­ране, так что вы сможете сразу же вставить новый тег. Еще обратите вни­мание, что это диалоговое окно является немодальным, т. е. оно не препят­ствует доступу к любым другим окнам программы. (Абсолютное большинст­во других диалоговых окон Dreamweaver являются модальными, запрещаю­щими пользователю доступ к остальным окнам программы, пока данное диалоговое окно не будет закрыто.) Чтобы закрыть окно Tag Chooser, на­жмите кнопку Close.