1  2  3  4  5  6  7

Три режима отображения Web - страницы
Окно документа Dreamweaver может показывать редактируемую Web - страницу в трех режимах отображения. Сейчас мы их рассмотрим.
Как уже говорилось, Dreamweaver относится к гибридным Web -редакторам, позволяющим работать как с самой Web -страницей, так и непосредственно с ее HTML -кодом. Осуществляется это очень легко благодаря тому, что Dreamweaver может отображать одновременно и HTML -код, и саму страни­цу в одном окне.
Но как получить доступ к HTML -коду? Ведь по умолчанию Dreamweaver предлагает вам редактировать Web -страницу в режиме WYSIWYG .
Очень просто!
Взгляните на инструментарий документа (лучше всего держать его открытым). Слева видны три кнопки. Они переключают три доступных режима отображения (перечислены в порядке справа налево): страница, страница и HTML -код и только HTML -код.
Вы видите крайняя правая кнопка нажата. Она включает режим отображения, предлагаемый Dreamweaver по умолчанию, — режим отображения страницы. В этом режиме вы можете работать с Web -страницей в режиме WYSIWYG .Теперь нажмем на среднюю кнопку, включающую режим отображения страницы и кода.
Как видите, окно документа разделилось на две части .В верхней части отображается HTML -
код нашей страницы, а в нижней -—"сама страница в режиме WYSIWYG . Такой режим очень полезен, когда нужно "отшлифовать" код, при этом держа перед глазами саму Web -страницу. Вы можете перемещать мышью разделительную полосу, чтобы увеличить ту или иную часть окна.
Ну, а левая кнопка включает режим отображения кода .
Для переключения режимов отображения вы также можете воспользоваться пунктами Design , Code and Design и Code меню View , соответственно. При выборе одного из этих пунктов слева от его названия появляется галочка, показывающая, что данный пункт и, следовательно, данный режим включены. Такие пункты называются переключателями.
Кроме того, вы можете быстро переключаться между режимом отображения страницы и режимом кода, выбрав пункт Switch Views меню View или нажав комбинацию клавиш
<Ctrl>+<'>.
Работа с кодом HTML
А теперь давайте выясним, какие средства Dreamweaver предлагает тем, кто знаком с языком HTML .
Прежде всего, вы можете переключиться в режим отображения исходного кода HTML , нажав крайнюю левую кнопку. Также вы можете воспользоваться пунктом Code или Switch View меню View .
Кроме того, создатели Dreamweaver предусмотрели возможность просмотра исходного HTML -кода в панели, называемой Code Inspector . Чтобы вызвать ее на экран, выберите в меню Window пункт Others и в появившемся на экране подменю — пункт Code Inspector . Но проще всего на­жать клавишу < F10>.
Во многих случаях этого хватает. Однако часто бывает нужно отредактировать фрагмент кода страницы, держа ее перед глазами. Для этого Dream weaver предоставляет так называемый мини-редактор HTML . Пользуясь мини-редактором, вы можете править атрибуты выбранного тега, вставлять код HTML в любое место текста — и все это без переключения в режим отображения кода.
Пусть, например, нужно немного поправить значения атрибутов какого- либо тега. Для этого поставьте текстовый курсор в его содержимое и выбе­рите в контекстном меню пункт Edit Tag Code <тег>. На экране появится окно мини-редактора. Введите в него нужный код и нажмите клавишу < Enter >, чтобы Dreamweaver принял все изменения, или < Esc >, чтобы отказаться от них.
Как видите, окно мини-редактора позволяет вам править только теги, а не их содержимое. Исправить содержимое тегов можно"и в окне документа.
Если вам нужно вставить в текст Web -страницы какой-либо тег с содержимым, поставьте в это место текстовый курсор и выберите в контекстном меню пункт Insert Tag . На экране также появится окно мини-редактора, на этот раз пустое.
Вы спросите: а что это за странный список, в котором перечислены непонятные слова? Это одна из замечательных возможностей, появившаяся в Dreamweaver MX — подсказка по коду. Как только вы поставите где-либо в коде HTML значок <, как Dreamweaver отобразит список, в котором перечислены все теги HTML . Если вы нажмете на клавиатуре какую-либо буквенную клавишу, в списке появятся только теги, начинающиеся на эту букву. Чтобы выбрать нужный тег в списке, выделите его и нажмите клавишу < Enter > или просто щелкните по нему мышью.
Введите в окно мини-редактора весь код, который вы хотите вставить , и нажмите клавишу
<Enter>. Он будет помещен на то самое место, где стоит текстовый курсор.
И, наконец, вы можете "завернуть" любой выделенный фрагмент текста в тег HTML . Для этого выделите нужный текст и выберите в контекстном меню пункт Wrap Tag . Введите в появившемся окне нужный тег со всеми нужными атрибутами и нажмите клавишу <Еnter>. Дело сделано!
Внимание!
Вообщето существует еще пункт Quick Tag Editor меню Modify и кнопка в редакторе свойств , но лучше ими не пользоваться . По какому принципу они работают , знают , наверное , только программисты фирмы Macromedia . Поэтому пользуйтесь лучше контекстным меню окна документа — так надежнее .

Чтобы удалить тег, в который "завернут" какой-либо фрагмент текста, поставьте в него текстовый курсор и выберите в контекстном меню пункт Remove Tag <тег>. Dreamweaver удалит этот тег, но оставит его содержимое, которое "вольется" в содержимое родительского тега.
Если вы пока еще плохо знаете теги HTML , не беда. Dreamweaver MX идет вам на помощь, предоставляя несколько новых инструментов для правки уже существующих и вставки новых тегов, которые наверняка понравятся неопытным пользователям.
Прежде всего, это диалоговое окно правки тега. Выделите целиком содержимое какого-либо тега, воспользовавшись секцией тегов строки статуса . После этого выберите пункт Edit Tag <тег>. На экране появится диалоговое окно правки тега.
С помощью другого диалогового окна вы можете поместить на страницу какой-либо тег или "завернуть" в него выделенный фрагмент текста. Для этого служит диалоговое окно Tag Chooser . Чтобы его вызвать, вам нужно выполнить одно из следующих действий:
Выбрать пункт Tag меню Insert или нажать комбинацию клавиш < Ctrl >+< E>;
Выбрать пункт Insert Tag контекстного меню окна документа (действует только тогда, когда окно документа находится в режиме отображения HTML -кода); Нажать кнопку Tag Chooser , находящуюся на вкладке Common панели объектов.
В иерархическом списке тегов, расположенном слева, вы можете выбрать категорию тегов. (В данный момент нам, вероятнее всего, понадобится ка­ тегория, обозначенная ветвью HTML Tags списка.) Как только вы выберете нужную категорию тегов, в правом списке появятся все теги, относящиеся к этой категории. Вам останется только выбрать тег и нажать кнопку Insert , чтобы вставить его в страницу.
Пользуясь этим окном и своим знанием английского, вы можете в удобной форме задавать значения различных атрибутов выбранного тега. В левом списке выберите одну из категорий атрибутов, и в правой части окна по­ явятся соответствующие элементы управления. Вы также можете щелкнуть "потайную" кнопку Tag Info , выглядящую как обычная надпись, после чего в окне правки тега появится краткая подсказка по выбранному тегу. Закончив правку, нажмите кнопку ОК, чтобы сохранить все изменения, или кнопку Cancel , чтобы отказаться от них.
Если вы хотите исправить тег, держа страницу перед глазами, или просто не любите лишние диалоговые окна, воспользуйтесь панелью Tag Inspector . Чтобы вызвать ее на экран (если ее еще нет на экране), выберите пункт Tag Inspector в меню Window или просто нажмите клавишу < F9>.
В верхней части этой панели находится иерархический список тегов, присутствующий в открытой Web -странице. В нижней части панели располагается список атрибутов выбранного в иерархическом списке тега и их значе­ ний. Вы выбираете нужный тег и правите(значения его атрибутов в нижнем списке, а в окне документов тут же отображаются все заданные вами изме­нения. Удобно, не правда ли? Кстати, нажав расположенную в правом нижнем углу панели Tag Inspector кнопку Edit <тег> Tag , вы вызовете уже знакомое вам диалоговое окно правки тега.
Сразу после нажатия кнопки Insert на экране появится уже знакомое вам диалоговое окно правки тега, в котором вы сможете задать значения атрибутов выбранного тега. Сам тег будет вставлен только после нажатия кноп­ ки ОК окна правки тега. Заодно Dreamweaver сам переключит окно документа в режим отображения страницы и кода, чтобы вы могли видеть, где вставленный вами тег начинаете)? и где он заканчивается.
Если вы щелкнете по кнопке Tag Info диалогового окна Tag Chooser , в этом окне появится краткое описание выбранного вами тега. Учтите, что при этом оба списка "съежатся", чтобы освободить место.
Если вы перед вызовом окна Tag Chooser выделите какой-либо фрагмент текста вместо того, чтобы просто поставить в какое-то его место текстовый курсор, то выделенный текст будет "завернут" во вновь вставленный тег. Как видите, Dreamweaver ведет себя достаточно "разумно", если так можно сказать об обычной программе.
Заметьте, что после вставки любого тега окно Tag Chooser останется на эк­ ране, так что вы сможете сразу же вставить новый тег. Еще обратите внимание, что это диалоговое окно является немодальным, т. е. оно не препятствует доступу к любым другим окнам программы. (Абсолютное большинство других диалоговых окон Dreamweaver являются модальными, запрещающими пользователю доступ к остальным окнам программы, пока данное диалоговое окно не будет закрыто.) Чтобы закрыть окно Tag Chooser , нажмите кнопку Close.

1  2  3  4  5  6  7

Вверх