Работа с кодом HTML
А теперь давайте выясним, какие средства Dreamweaver предлагает тем, кто знаком с языком HTML.
Прежде всего, вы можете переключиться в режим отображения исходного кода HTML, нажав крайнюю левую кнопку из показанных на рис. 2.13. Также вы можете воспользоваться пунктом Code или Switch View меню View.
Кроме того, создатели Dreamweaver предусмотрели возможность просмотра исходного HTML-кода в панели, называемой Code Inspector (рис. 2.18). Чтобы вызвать ее на экран, выберите в меню Window пункт Others и в появившемся на экране подменю – пункт Code Inspector. Но проще всего нажать клавишу F10.
Во многих случаях этого хватает. Однако часто бывает нужно отредактировать фрагмент кода страницы, держа ее перед глазами. Для этого Dreamweaver предоставляет так называемый мини-редактор. HTML. Пользуясь мини-редактором, вы можете править атрибуты выбранного тега, вставлять код HTML в любое место текста – и все это без переключения в режим отображения кода.
Рис. 2.18. Панель Code Inspector
Пусть, например, нужно немного поправить значения атрибутов какого-либо тега. Для этого поставьте текстовый курсор в его содержимое и выберите в контекстном меню пункт Edit Tag Code <тег>. На экране появится окно мини-редактора, показанное на рис. 2.19. Введите в него нужный код и нажмите клавишу Enter, чтобы Dreamweaver принял все изменения, или Esc, чтобы отказаться от них.
Рис. 2.19. Окно мини-редактора HTML
Как видите, окно мини-редактора позволяет вам править только теги, а не их содержимое. Исправить содержимое тегов можно и в окне документа.
Если вам нужно вставить в текст Web-страницы какой-либо тег с содержимым, поставьте в это место текстовый курсор и выберите в контекстном меню пункт Insert Tag. На экране также появится окно мини-редактора, на этот раз пустое (рис. 2.20).
Работа с кодом HTML
Вы спросите: а что это за странный список, в котором перечислены непонятные слова? Это одна из замечательных возможностей, появившаяся в Dreamweaver MX – подсказка по коду. Как только вы поставите где-либо в коде HTML значок <, как Dreamweaver отобразит список, в котором перечислены все теги HTML. Если вы нажмете на клавиатуре какую-либо буквенную клавишу, в списке появятся только теги, начинающиеся на эту букву. Чтобы выбрать нужный тег в списке, выделите его и нажмите клавишу Enter или просто щелкните по нему мышью.
Рис. 2.20. Окно мини-редактора при вставке нового тега
Введите в окно мини-редактора весь код, который вы хотите вставить (рис. 2.21), и нажмите клавишу Enter. Он будет помещен на то самое место, где стоит текстовый курсор.
Рис. 2.21. Окно мини-редактора с новым кодом HTML, который будет вставлен в страницу
И, наконец, вы можете "завернуть" любой выделенный фрагмент текста в тег HTML. Для этого выделите нужный текст и выберите в контекстном меню пункт Wrap Tag. Введите в появившемся окне нужный тег со всеми нужными атрибутами и нажмите клавишу Enter. Дело сделано!
Внимание
Вообще-то существует еще пункт Quick Tag Editor меню Modify и кнопка в редакторе свойств, но лучше ими не пользоваться. По какому принципу они работают, знают, наверное, только программисты фирмы Macromedia. Поэтому пользуйтесь лучше контекстным меню окна документа – так надежнее.
Чтобы удалить тег, в который "завернут" какой-либо фрагмент текста, поставьте в него текстовый курсор и выберите в контекстном меню пункт Remove Tag <тег>. Dreamweaver удалит этот тег, но оставит его содержимое, которое "вольется" в содержимое родительского тега.
Если вы пока еще плохо знаете теги HTML, не беда. Dreamweaver MX идет вам на помощь, предоставляя несколько новых инструментов для правки уже существующих и вставки новых тегов, которые наверняка понравятся неопытным пользователям.
Прежде всего, это диалоговое окно правки тега. Выделите целиком содержимое какого-либо тега, воспользовавшись секцией тегов строки статуса (рис. 2.12). После этого выберите пункт Edit Tag <тег>. На экране появится диалоговое окно, показанное на рис 2.22.
Работа с кодом HTML
Вы спросите: а что это за странный список, в котором перечислены непонятные слова? Это одна из замечательных возможностей, появившаяся в Dreamweaver MX – подсказка по коду. Как только вы поставите где-либо в коде HTML значок <, как Dreamweaver отобразит список, в котором перечислены все теги HTML. Если вы нажмете на клавиатуре какую-либо буквенную клавишу, в списке появятся только теги, начинающиеся на эту букву. Чтобы выбрать нужный тег в списке, выделите его и нажмите клавишу Enter или просто щелкните по нему мышью.
Рис. 2.20. Окно мини-редактора при вставке нового тега
Введите в окно мини-редактора весь код, который вы хотите вставить (рис. 2.21), и нажмите клавишу Enter. Он будет помещен на то самое место, где стоит текстовый курсор.
Рис. 2.21. Окно мини-редактора с новым кодом HTML, который будет вставлен в страницу
И, наконец, вы можете "завернуть" любой выделенный фрагмент текста в тег HTML. Для этого выделите нужный текст и выберите в контекстном меню пункт Wrap Tag. Введите в появившемся окне нужный тег со всеми нужными атрибутами и нажмите клавишу Enter. Дело сделано!
Внимание
Вообще-то существует еще пункт Quick Tag Editor меню Modify и кнопка в редакторе свойств, но лучше ими не пользоваться. По какому принципу они работают, знают, наверное, только программисты фирмы Macromedia. Поэтому пользуйтесь лучше контекстным меню окна документа – так надежнее.
Чтобы удалить тег, в который "завернут" какой-либо фрагмент текста, поставьте в него текстовый курсор и выберите в контекстном меню пункт Remove Tag <тег>. Dreamweaver удалит этот тег, но оставит его содержимое, которое "вольется" в содержимое родительского тега.
Если вы пока еще плохо знаете теги HTML, не беда. Dreamweaver MX идет вам на помощь, предоставляя несколько новых инструментов для правки уже существующих и вставки новых тегов, которые наверняка понравятся неопытным пользователям.
Прежде всего, это диалоговое окно правки тега. Выделите целиком содержимое какого-либо тега, воспользовавшись секцией тегов строки статуса (рис. 2.12). После этого выберите пункт Edit Tag <тег>. На экране появится диалоговое окно, показанное на рис 2.22.
Работа с кодом HTML
Рис. 2.22. Диалоговое окно правки тега
Пользуясь этим окном и своим знанием английского, вы можете в удобной форме задавать значения различных атрибутов выбранного тега. В левом списке выберите одну из категорий атрибутов, и в правой части окна появятся соответствующие элементы управления. Вы также можете щелкнуть "потайную" кнопку Tag Info, выглядящую как обычная надпись, после чего в окне правки тега появится краткая подсказка по выбранному тегу. Закончив правку, нажмите кнопку ОК, чтобы сохранить все изменения, или кнопку Cancel, чтобы отказаться от них.
Если вы хотите исправить тег, держа страницу перед глазами, или просто не любите лишние диалоговые окна, воспользуйтесь панелью Tag Inspector. Чтобы вызвать ее на экран (если ее еще нет на экране), выберите пункт Tag Inspector в меню Window или просто нажмите клавишу F9. Сама эта панель показана на рис. 2.23.
В верхней части этой панели находится иерархический список тегов, присутствующий в открытой Web-странице. В нижней части панели располагается список атрибутов выбранного в иерархическом списке тега и их значений. Вы выбираете нужный тег и правите значения его атрибутов в нижнем списке, а в окне документов тут же отображаются все заданные вами изменения. Удобно, не правда ли?
Кстати, нажав расположенную в правом нижнем углу панели Tag Inspector кнопку Edit <тег> Tag, вы вызовете уже знакомое вам диалоговое окно правки тега. Эта кнопка показана на рис. 2.24.
Рис. 2.23. Панель Tag Inspector
Рис. 2.24. Кнопка Edit <тег> Tag
Рис. 2.25. Кнопка Tag Chooser
Работа с кодом HTML
С помощью другого диалогового окна вы можете поместить на страницу какой-либо тег или "завернуть" в него выделенный фрагмент текста. Для этого служит диалоговое окно Tag Chooser. Чтобы его вызвать, вам нужно выполнить одно из следующих действий:
· выбрать пункт Tag меню Insert или нажать комбинацию клавиш CTRL + E;
· выбрать пункт Insert Tag контекстного меню окна документа (действует только тогда, когда окно документа находится в режиме отображения HTML-кода);
· нажать кнопку Tag Chooser, находящуюся на вкладке Common панели объектов (рис. 2.25).
Само окно Tag Chooser показано на рис. 2.26.
В иерархическом списке тегов, расположенном слева, вы можете выбрать категорию тегов. (В данный момент нам, вероятнее всего, понадобится категория, обозначенная ветвью HTML Tags списка.) Как только вы выберете нужную категорию тегов, в правом списке появятся все теги, относящиеся к этой категории. Вам останется только выбрать тег и нажать кнопку Insert, чтобы вставить его в страницу.
Рис. 2.26. Диалоговое окно Tag Chooser
Сразу после нажатия кнопки Insert на экране появится уже знакомое вам диалоговое окно правки тега, в котором вы сможете задать значения атрибутов выбранного тега. Сам тег будет вставлен только после нажатия кнопки ОК окна правки тега. Заодно Dreamweaver сам переключит окно документа в режим отображения страницы и кода, чтобы вы могли видеть, где вставленный вами тег начинается и где он заканчивается.
Если вы щелкнете по кнопке Tag Info диалогового окна Tag Chooser, в этом окне появится краткое описание выбранного вами тега. Учтите, что при этом оба списка "съежатся", чтобы освободить место.
Если вы перед вызовом окна Tag Chooser выделите какой-либо фрагмент текста вместо того, чтобы просто поставить в какое-то его место текстовый курсор, то выделенный текст будет "завернут" во вновь вставленный тег. Как видите, Dreamweaver ведет себя достаточно "разумно", если так можно сказать об обычной программе.
Заметьте, что после вставки любого тега окно Tag Chooser останется на экране, так что вы сможете сразу же вставить новый тег. Еще обратите внимание, что это диалоговое окно является немодальным, т. е. оно не препятствует доступу к любым другим окнам программы. (Абсолютное большинство других диалоговых окон Dreamweaver являются модальными, запрещающими пользователю доступ к остальным окнам программы, пока данное диалоговое окно не будет закрыто.) Чтобы закрыть окно Tag Chooser, нажмите кнопку Close.
Поиск и замена текста
Все текстовые редакторы, за исключением самых примитивных, предоставляют пользователю возможность найти нужный фрагмент текста и при необходимости заменить его другим. Разумеется, Dreamweaver также поддерживает эту возможность. И не просто поддерживает, а возносит ее на новую высоту.
Выберите пункт Find and Replace меню Edit или нажмите комбинацию клавиш CTRL + F. На экране появится окно Find and Replace, показанное на рис. 2.27. Обратите внимание, что это также немодальное диалоговое окно, т. е. вы не потеряете доступ к окну документа.
Рис. 2.27. Диалоговое окно Find and Replace
Всплывающее меню Search For позволяет задать, в каком тексте нужно произвести поиск: в тексте страницы (пункт Text), в "сыром" HTML-коде (Source Code), в тексте страницы, но более хитрым образом (Text (Advanced)), или в тексте заданного тега (Specific Tag). Если выбраны первые два пункта, то искомый текст (подстрока) вводится в текстовое поле Search For, а текст, на который нужно заменить искомый, – в текстовое поле Replace With.
Здесь все более-менее просто. Вы, наверное, уже пользовались функцией поиска и замены в других текстовых редакторах, так что уже знакомы со всем этим.
Рис. 2.28. Диалоговое окно Find and Replace (выбран режим "хитрого" поиска)
Если же вы выберете пункт Text (Advanced), в окне поиска и замены кое-что добавится (рис. 2.28). Это будет новая группа элементов управления, состоящая из двух кнопок и двух раскрывающихся списков, позволяющих задать, внутри какого тега будет искаться тот или иной текст.
Раскрывающийся список, находящийся справа, задает тег, в котором будет искаться текст. А раскрывающийся список, находящийся слева, задает, где будет производиться поиск: внутри этого тега (пункт Inside Tag) или вне его (Not Inside Tag). Если вам нужно искать текст внутри (или вне) нескольких тегов, то, щелкая кнопку со значком плюса, вы можете добавить сколько угодно таких групп элементов управления. Соответственно, кнопка со значком минуса удаляет группу элементов, в которой она расположена.
Но самые мощные возможности Dreamweaver предоставляет для поиска и замены тегов, для чего достаточно выбрать пункт Specific Tag всплывающего меню Search For. В окне поиска и замены появится группа элементов управления для задания параметров поиска и еще одна группа – для задания параметров замены (рис. 2.29).
Рис. 2.29. Диалоговое окно Find and Replace (выбран режим поиска тега)
Поиск и замена текста
Искомый тег выбирается в раскрывающемся списке, расположенном правее всплывающего меню Search For. Если вы хотите искать любой тег, выберите пункт [any tag].
В группе поиска самый левый раскрывающийся список задает, какие теги будут искаться:
· With Attribute – содержащие атрибут, заданный в следующем раскрывающемся списке (в порядке слева направо). В третьем раскрывающемся списке задается знак сравнения ("равно", "больше", "меньше" или "не равно"), а в четвертом – значение искомого атрибута или [any value], если нужно найти атрибут, имеющий любое значение;
· Without Attribute – не содержащие атрибут, заданный в следующем раскрывающемся списке;
· Containing – содержащие внутри себя заданный текст или тег. Если необходимо найти текст, выберите пункт Text во втором всплывающем меню, а в поле ввода справа от него введите сам текст. Если нужно найти тег, выберите пункт Specified Tag во втором раскрывающемся списке, а в третьем – выберите сам тег;
· No Containing – не содержащие внутри себя заданный текст или тег;
· Inside Tag – находящиеся внутри тега, заданного во втором раскрывающемся списке;
· No Inside Tag – не находящиеся внутри тега, заданного во втором раскрывающемся списке.
Кнопки со знаками "плюс" и "минус" вам уже знакомы. Так что сразу перейдем к следующей группе элементов управления.
Внимание
К сожалению, Dreamweaver не будет искать заданный вами тег, если вы не ввели никаких значений в раскрывающиеся списки группы элементов управления, задающих дополнительные условия поиска. Так что, если вы не собираетесь задавать дополнительных условий, например, атрибута искомого тега, рекомендуем вам удалить все пустые группы.
Раскрывающийся список Action задает действие, производимое над найденным тегом. А сделать с ними можно следующее:
· Replace Tag & Contents – заменить найденный тег на другой, введенный в области редактирования, расположенной правее;
· Replace Contents Only – заменить содержимое найденного тега на другое, введенное в области редактирования, расположенной правее;
· Remove Tag & Contents – удалить найденный тег вместе с содержимым;
· Strip Tag – удалить тег, но оставить содержимое;
· Change Tag – изменить тег на другой, выбранный в расположенном правее раскрывающемся списке, но оставить прежнее содержимое;
· Set Attribute – установить атрибут, выбранный во втором раскрывающемся списке (в порядке слева направо), со значением, заданным в комбинированном списке То;
· Remove Attribute – удалить атрибут, выбранный во втором раскрывающемся списке;
· Add Before Start Tag – добавить перед начальным тегом текст, введенный в текстовом поле;
· Add After End Tag – добавить после конечного тега текст, введенный в текстовом поле;
· Add After Start Tag – добавить после начального тега текст, введенный в текстовом поле;
· Add Before End Tag – добавить перед конечным тегом текст, введенный в текстовом поле.
Флажок Match Case предписывает Dreamweaver учитывать регистр символов при поиске. По умолчанию он отключен, т. е. регистр символов при поиске не учитывается.
Флажок Ignore Whitespace Differences предписывает Dreamweaver считать несколько расположенных подряд пробелов за один. По умолчанию он включен.
Флажок Use Regular Expressions включает обработку регулярных выражений. Регулярные выражения – это своего рода шаблоны, по которым Dreamweaver будет искать и заменять сложные последовательности символов. Мы особо опишем их использование – настолько это мощное средство.
Но как теперь запустить сам поиск (замену)?
Вы можете щелкнуть на кнопке Find Next – и первое вхождение найденной последовательности символов (подстроки) будет выделено в окне документа. Чтобы найти следующую подстроку, опять щелкните на кнопке Find Next или, если окно Find and Replace уже закрыто, нажмите клавишу F3 (при активном окне документа) или выберите пункт Find Next в меню Edit. Аналогично работает кнопка Replace: при ее нажатии выделяется первая найденная подстрока, а при последующих нажатиях ранее выделенная подстрока заменяется заданной и выделяется следующая найденная подстрока. После того как все подстроки будут заменены, Dreamweaver выдаст окно-предупреждение с указанием, сколько замен было произведено.
Чтобы заменить сразу все подстроки, нажмите кнопку Replace All.
Вы также можете сразу найти все вхождения подстроки в тексте страницы, нажав кнопку Find All. Конечно, Dreamweaver сразу не сможет все их выделить – это не сможет сделать ни одно Windows-приложение. Поэтому он использует другой подход. На экране появляется панель Search (рис. 2.30), содержащая список, в котором представлены все найденные подстроки. При двойном щелчке мышью на любой его позиции в окне документа будет выделена соответствующая подстрока.
Рис. 2.30. Панель Search
А теперь давайте представим себе такую ситуацию. Вы задали какое-то сложное условие поиска (и, возможно, замены) и теперь хотите сохранить его для дальнейшего использования или на память потомкам. Как это сделать? Очень просто: Dreamweaver предоставляет вам и такую возможность. Просто щелкните на кнопке с изображением дискеты в окне Find and Replace, после чего на экране появится стандартное диалоговое окно сохранения файла Windows, где вы сможете задать имя вновь создаваемого файла или выбрать для перезаписи уже существующий. А чтобы загрузить сохраненное ранее в файле условие, щелкните на кнопке с изображением папки; на экране появится стандартное диалоговое окно открытия файла Windows, где вы сможете выбрать нужный файл условия.
Использование регулярных выражений
Как и было обещано, сейчас мы познакомимся с регулярными выражениями. Чем же они могут нам помочь?
Представим себе такую ситуацию. Вам нужно найти в исходном HTML-коде страницы интернет-адрес, причем любой. Как вы это сделаете? Правильно, введете в поле Search For окна поиска и замены (см. рис. 2.27) символы www. И найдете… кое-что. Но не все. Ведь интернет-адреса совсем не обязательно начинаются на "www". Что в этом случае искать? Точку? Но точек в тексте и так хватает, и далеко не всякая из них является частью интернет-адреса.
В этом случае нам на помощь придет регулярное выражение. Оно будет иметь следующий вид:
"https://.+\..{2.3}"
Ну и как оно вам? Больше похоже на бессмысленный набор символов, в котором с трудом угадывается что-то знакомое. Признаться, автор и сам сначала с трудом в них разбирался. Ему помогала вот такая табличка – см. табл. 2.1.
Таблица 2.1. Регулярное выражение поиска интернет-адресов.
| Символы | Описание |
| https:// | Первая кавычка и начало интернет-адреса |
| . | Точка обозначает любой символ |
| + | Плюс обозначает, что предыдущий символ должен повториться минимум один раз |
| \. | Обычная точка. Ее предваряет обратная косая черта, т. к. точка – служебный символ |
| . | Опять любой символ |
| {2.3} | Предыдущий символ должен повторяться от двух до трех раз |
| Закрывающая кавычка |
Вы можете попробовать это регулярное выражение в действии. Только не забудьте выбрать в раскрывающемся списке Search For пункт Source Code.
Как видите, в регулярных выражениях используются специальные символы – литералы. С их-то помощью и задаются условия поиска тех или иных символов. Если вы хотите найти какой-либо символ, совпадающий с литералом, вы должны будете предварить его обратной косой чертой. Например, чтобы найти точку, вы должны использовать такую последовательность символов: "\."
С помощью регулярных выражений вы можете выполнять поиск самых разных слов и словосочетаний. Например, регулярное выражение совпадает со словами "multimedia" и "hypermedia", но не совпадает со словом "media". Литерал | задает поиск либо первой, либо второй подстроки (в нашем случае либо "multi", либо "hyper"), а скобки здесь использованы для того, чтобы отделить друг от друга две части выражения. Если бы мы их не поставили, получилось бы выражение:
"(multi | hyper) media" "multi | hypermedia"
…совпадающее со словами "multi" и "hypermedia". А регулярное выражение:
"/b.+@.+\.com"
…ищет адреса электронной почты на серверах, чей интернет-адрес оканчивается на "com". Здесь вам все знакомо, за исключением литерала /b, обозначающего границу слова. То есть точка задает поиск любого символа, а /b. – только символа, с которого начинается слово (пробел или возврат каретки). А как насчет вот такого выражения:
Оно ищет любой знак препинания, находящийся в конце текстового абзаца. В этом выражении используется много новых символов, так что мы рассмотрим его подробно. По аналогии с предыдущим регулярным выражением, расшифруем его с помощью табл. 2.2.
Таблица 2.2. Регулярное выражение поиска последнего знака препинания абзаца.
| Символы | Описание |
| [\.!\?] | Один из возможных символов: точка, восклицательный и вопросительный знаки. Заметьте, что вопросительный знак предварен обратной косой чертой, т. к. иначе Dreamweaver воспринял бы его как литерал |
| $ | Этот литерал обозначает конец строки |
Хорошо, при поиске подстрок регулярные выражения очень нам помогают. Но помогут ли они при замене?
Еще как!