Познавательное чтиво

17 Июн

Полуавтоматическая верстка кода

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

Для вызова диалогового окна Tag Chooser можно использовать несколько способов.

□ Находясь в текстовом режиме, щелкните по нужному месту в коде правой кнопкой мыши и в контекстном меню выберите команду Insert Tag.

□ В любом режиме выберите команду меню Insert | Tag.

□ В любом режиме используйте комбинацию клавиш <Ctrl>+<E>.

После этого открывается диалоговое окно (рис. 4.23). Если Dreamweaver находился в визуальном режиме, он автоматически переключается в комбинированный режим редактирования.

clip_image002

Рис. 4.23. Диалоговое окно Tag Chooser позволяет автоматизировать процесс

использования тегов

Диалоговое окно Tag Chooser по умолчанию делится на две части. Слева располагается список библиотек различных тегов. В правой части отображается список тегов для выбранной библиотеки. Чтобы выбрать нужный элемент в любом окне, надо один раз щелкнуть на нем мышью. Я подчеркиваю этот момент, потому что двойной щелчок по тегу приводит к его вставке. Поскольку диалоговое окно Tag Chooser при этом не закрывается, а его размеры достаточно велики, вы можете не заметить, как наставите кучу лишних тегов.

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

Выбор нужного тега облегчается благодаря тому, что каждая библиотека разбивается на ряд категорий. В случае с HTML, классификация идет еще дальше — категории тегов делятся на следующие группы:

□ General — общие теги, никаких противопоказаний к применению.

□ Browser-specific — теги, специфичные для некоторых браузеров. Для более подробной информации следует включить информацию о теге.

□ Deprecated — теги, использование которых не рекомендуется.

□ Obsolete — устаревшие теги.

Чтобы получить информацию по выбранному тегу, нажмите кнопку Tag Info, расположенную справа под списком библиотек. При этом диалоговое окно дополняется снизу информационным полем, в котором выводится справка по текущему выбранному тегу. Если тег не выбран, эта панель описывает текущую выбранную библиотеку или группу элементов.

clip_image004

Рис. 4.24. Диалоговое окно Tag Chooser с открытой информационной областью

Справку можно получить и альтернативным методом — с помощью панели Reference. Выделите интересующий вас тег в списке справа и нажмите кнопку рядом с кнопкой Tag Info. При этом открывается область справки и показывает статью, посвященную выделенному тегу (рис. 4.24). Надо сказать, что практически информация на панели Reference и в информационной области дублирует друг друга. Поэтому чем вы будете пользоваться — это лишь вопрос ваших пристрастий.

Совет

При работе с Tag Chooser панель Reference немного удобнее, чем встроенная информационная область. Это проявляется в том, что в Reference вы можете сразу посмотреть и описание, и атрибуты выбранного тега, а также пролистать статьи на любую другую тематику.

После того, как вы решили, какой тег будете использовать, можно дважды щелкнуть по его имени в правой панели Tag Chooser или нажать кнопку Insert. Диалоговое окно при этом не закрывается, так что вы можете вставить таким образом хоть все теги, принимающее участие в вашем проекте. Для закрытия диалогового окна надо нажать кнопку Close.

Последняя пара предложений о Tag Chooser, и я заканчиваю с ним. В момент вставки тега может появиться дополнительное диалоговое окно Tag Editor (рис. 4.25). Это редактор тегов, точнее его атрибутов. В заголовке редактора тегов, после слов Tag Editor, указывается имя редактируемого тега (через черточку). Редактор тегов появляется при использовании Tag Chooser, когда у тега есть какие-то атрибуты. Также его можно вызвать для редактирования любого тега в текстовом режиме Dreamweaver. Для этого надо выделить тег (или просто поставить курсор на него), после чего применить команду меню Modify | Edit Tag.

С помощью Tag Editor вы можете быстро и без ошибок прописать много параметров, не споткнувшись ни об одну запятую. Для каждого тега существует практически уникальный набор параметров. И тем более удивительно, что Tag Editor охватывает все возможные варианты. В левой части окна приводится список групп, на которые делятся параметры выбранного тега. При выборе группы в правой части окна появляются текстовые поля и списки, с помощью которых можно задать значения атрибутов тега. К примеру, для графических изображений можно указать путь к файлу и альтернативную подпись. Поскольку эти параметры и их комбинации стандартны для тегов, я воздержусь от их описания. Иначе объем этой книги неоправданно увеличился бы в несколько раз, а время ее выхода в свет отодвинулось бы на неопределенные сроки.

Итак, коротко: чем полезны такие автоматические средства, как Tag Chooser и Tag Editor? Они обеспечивают правильное написание тегов и их атрибутов. Вы можете видеть все доступные варианты и параметры выбранного тега — возможно, даже такие, о которых вы забыли или вообще не догадывались. И вы можете даже не задумываться о таких мелочах, как правильное написание того или иного тега — очень полезное качество при работе поздней ночью, переходящей в раннее утро.

clip_image006

Рис. 4.25. Диалоговое окно Tag Editor упрощает процесс заполнения атрибутов для тегов. Представлен пример работы с тегом <meta>, что отражается в заголовке диалогового окна Tag Editor – Meta

Leave a Reply

© 2012 Познавательное чтиво | Entries (RSS) and Comments (RSS)