Рейтинг: 4.0/5.0 (1914 проголосовавших)Категория: Windows: Редакторы
Создание сайта в dreamweaver - пример
Среди программ для создания сайта самым известным является редактор Dreamweaver, созданный компанией Macromedia и продолжаемый разрабатываться и совершенствоваться в настоящее время компанией Adobe.
Dreamweaver - мощное и в то же время удобное средство для разработки сайтов. В этой статье я рассмотрю, как создать простой сайт из трёх страничек с помощью этой программы.
Как уже упоминалось в статье "Как создать свой собственный сайт ", при создании сложного, хорошо оформленного сайта обычно сначала целиком рисуют дизайн страницы в графическом редакторе, например, Фотошопе, а затем полученная картинка разрезается на кусочки и верстается при помощи html-редактора, такого, как Dreamweaver. Но если сайт простой, графические элементы можно сделать отдельно и сразу начинать его создание в html-редакторе. Так и поступим. Пусть сайт, который мы решили сделать, будет рассказывать об Антарктиде. Сделаем для него простую шапку и выберем фон:
Создадим на компьютере папку "antarktida" и сохраним туда эти рисунки.
Запустим Dreamweaver CS5. Жмите на цифры внизу, чтобы последовательно посмотреть выполняемые действия.
Итак, Вы добрались до этой интересной и нужной странички которую я создал для того чтобы научить Вас создавать сайты в dreamweaver. И именно создавать множество сайтов так как я надеюсь, что на одном сайте Вы не остановитесь. Если Вы человек который любит трудиться не только для других, но в первую очередь и для себя.
Все знания которые здесь я Вам буду давать, позволят Вам освоить технику стройки сайтов своими руками, но и канечно при помощи dreamweaver. Данным способом создания сайтов я лично сам пользуюсь. Скажу чесно, мне это очень нравиться так как я осознал простоту данного занятия. Вам это на начальном этапе может показаться странным, но поверьте ничего в этом сложного нет. Здесь самое главное нужны Ваше терпение и интерес. Все остальное прийдет к Вам постепенно и Вы станете профессиональными сайтостроителями.
Но все же как создать сайт в dreamweaver новичку, который только осваивает азы данной техники, а именно созданию сайта.
Чесно сказать возможностей в программе dreamweaver очень много и данная программа является лидером среди WEB-дизайнеров. Но и для новичков данная программа вполне подойдет. Ведь как я уже говорил все что нам нужно от данной программы, так это ее небольшая часть. Но эта часть является основной при каждом создании сайтов в dreamweaver.
Настраиваем программу Adobe Dreamweaver.
Вам нужно зайти в настройки dreamweaver и сделать некоторые изменения которые позволят использовать данную программу в качественном объеме.
После того как Вы сделали настройки программы можем смело приступать к началу работы непосредственно при создании сайта.
Создаем шаблон будующего сайта.
Первое что нам нужно это сделать шаблон будующего сайта. Как правило он в dreanweavere уже готовый. Вы его можете наблюдать в меню код при создании нового документа, который называется по умолчанию Untitled-новый документ. И если Вы посмотрите в код данного документа, то увидите готовый шаблон который необходим для любого сайта. Этот код нужен для каждой новой страницы сайта. Код должен выглядеть так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
</head>
<body>
</body>
</html>
Этот шаблон является стандартным в большенстве случаев. В данном шаблоне может меняться 1 и 5 строчки. Все зависит от версии HTML и языка текста. Но я Вас буду учить создавать сайт именно по этому шаблону. Если Вы захотите создавать свой сайт в другом шаблоне, то пожалуйста, как говориться на вкус и цвет. Но запомните что от этого Ваш сайт не изменится и результат во всех случаях будет одинаковый. Если Вас данный шаблон устраивает то продолжаем.
Действия за пределами программы Dreamweaver.
Сохраните данный документ где нибудь у себя на компьютере. Создайте общую папку для Вашего будущего сайта и назовите ее на Ваше усмотрение.
В этой папке создайте еще одну папку с названием www (именно так и никак иначе).
Откройте эту папку и создайте еще одну с названием images (можно назвать ее как угодно, но при условии что она будет на английском языке. Здесь будут храниться Ваши картинки для сайта.
Далее сохраните Ваш созданный в dreamweavere новый документ в папку www под именем index.html. Это будет Ваша главная страница сайта, которая должна иметь именно такое название. Другое название главной страницы сайта не допустимо.
Запомните эти главные требования которые необходимы при начальном этапе создании любых сайтов. Эти требования необходимы для того чтобы в дальнейшем при создании сайта, не наткнуться на неприятные сюрпризы. Я не пугаю Вас, но данные требования нужны каждому, который хочет увидеть свой сайт в интернете.
Подготовительная работа в Dreamweaver.
Если все вышесказанное Вами сделано, то приступаем еще к одной подготовительной работе в dreamweavere. Без данных действий можно обойтись, но Вам будет очень не удобно тогда работать с программой dreamweaver. Поэтому сделайте данные действия о которых я Вам сейчас расскажу.
Справа от Вас в рабочем окне программы находится панель программы Adobe Dreamweaver. Все что Вам понадобиться в данной программе, так это два пункта этой панели "Файлы" и "Стили CSS". Но сперва Вам нужно зайти в меню "Файлы".
В этом окне нужно нажать на верхнюю кнопочку, как показано ниже.
В выпадающем списке нажать на строку "Управление веб-сайтами".
Далее у Вас появится окно "управления сайтами", где нас интересует кнопка "создать".
Нажимаем на эту кнопку и увидим еще одно окно, где необходимо создать Ваш сайт внеся информацию которую Вы создали у себя на компьютере, когда сохраняли Вашу первую страницу. А именно в подпункте "веб-сайт" нужно Вам ввести название Вашего сайта (можно называть как угодно и любым языком) и локальную папку сайта ту которая навается "www". Тоесть у Вас будет полный путь к этой папке.
Далее переходим в подменю "дополнительные настройки", где в строке "папка изображений по умолчанию" Вам нужно указать полный путь к Вашей папке с картинками, а именно папку "images". Важно при указании этих папок нужно обязательно зайти в них и затем нажать ок, чтобы в строке было название этой папки.
Все, после того как Вы сделали данные действия, нажимаете на кнопку сохранить в низу окна. После у Вас появиться уже знакомое окно, но с той разницей, что в окне будет название Вашего созданного сайта.
Теперь Вам нужно нажать на кнопку "готово". И в меню "файлы" в окне справа у Вас должен появиться Ваш созданный сайт с папкой www и файлом index.html.
Если Вы нажмете на эту папку то у Вас появится еще одна с картинками. Здесь будут отображаться все Ваши файлы при создании сайта.
Все, основную работу мы сделали. Осталась лишь самая маласть перед тем как мы начнем создавать сайт. Для это мы подключим таблицу стилей CSS к нашему сайту и это будет последнее приготовление которое позволит начать создавать сайт.
Для начала следующего урока, перйдите на следующую страницу сайта.
Видеокурсы, видео уроки Dreamweaver
К учебнику по Macromedia Dreamweaver MX
"Все Технические Моменты Сайтостроения в Видеоформате". Коллекция видеокурсов. которая за 36 часов и 45 минут сделает из Вас профессионала во всех технических моментах создания сайта.
Основные уроки работы с Dreamweaver.
В этих уроках мы рассмотрим начальные сведения о работе с Macromedia Dreamweaver MX. Вы узнаете, зачем нужны его многочисленные окна и инструменты, какие из них действительно вам понадобятся, а какие — нет. Также мы узнаем о начальных настройках этой программы, в частности, что нужно сделать, чтобы Dreamweaver поддерживал русский язык (изначально он не знаком с русским, т. к. по происхождению — американец). Все это вам нужно знать для того, чтобы потом, во время создания нашей первой Web-странички, не задавать лишних вопросов.
Единственное пожелание: было бы очень неплохо, если бы вы знали хоть немного английский язык. В конце концов, персональный компьютер -детище американского образа жизни, и, несмотря на все "локализации" и "интернационализации", он всегда остается американцем, разговаривающим на своем языке. Хотя автор и попытается рассказать обо всех щекотливых моментах, с которыми вы можете столкнуться, и путях их решения или обхода, Dreamweaver вполне может огорошить вас каким-нибудь предупреждением, прочитать которое вы без знания английского не сможете. А раз вы не сможете его прочитать — то не сможете и отреагировать на него, что может быть весьма чревато.
Урок Dreamweaver MX
Итак, начнем рассматривать рабочую среду Dreamweaver MX, т. е. наборы окон и различных инструментов, предлагаемых им Web-дизайнеру. Но для начала запустим Dreamweaver.
Запустить программу в Windows проще простого! Нажмите хорошо знакомую вам кнопку Start (Пуск), выберите в меню пункт Programs (Программы), далее — пункт Macromedia и в появившемся подменю — пункт Macromedia Dreamweaver MX.
Выбор рабочей среды
Через некоторое время после запуска программы на экране появится небольшое диалоговое окно Workspace Setup, предлагающее вам выбрать вид рабочей среды Dreamweaver MX (рис. 2.1).
Рис. 2.1. Диалоговое окно Workspace Setup
Как видите, в этом окне находятся два переключателя и один флажок. Также вы можете видеть два небольших изображения, наглядно показывающие, какие виды рабочей среды вы можете выбрать. Давайте их рассмотрим.
Переключатель Dreamweaver MX Workspace выбирает "новый" вид рабочей среды Dreamweaver MX ("стиль MX"). В этом случае все нужные вам инструменты будут находиться в одном большом окне, что, на взгляд автора, исключительно удобно. Рекомендуем вам включить именно этот переключатель (впрочем, он включен по умолчанию).
Переключатель Dreamweaver 4 Workspace выбирает "старый" вид рабочей среды, использовавшийся в старых версиях Dreamweaver — с 1-й по 4-ю ("старый стиль"). В этом случае на экране перед вами будут находиться два окна: окно документа и окно сайта, между которыми вам придется часто переключаться. Это не очень удобно — в самом деле, когда все находится в одном окне, работать намного удобнее. Поэтому вам стоит включить этот переключатель только в том случае, если вы "пересаживаетесь" на Dreamweaver MX со старых его версий и еще не привыкли к его новой среде.
Флажок HomeSite/Coder-Style доступен только при выборе переключателя Dreamweaver MX Workspace. Он заставляет Dreamweaver сразу же после открытия очередной Web-страницы переключиться в режим редактирования HTML-кода. Это может пригодиться только тем, кто привык набирать код HTML вручную. Если же вы не знакомы с HTML, лучше не включайте этот флажок.
Задав нужный вид рабочей среды Dreamweaver, нажмите кнопку ОК. Через некоторое время вы увидите либо главное окно, либо окно документа, в зависимости от того, какой переключатель — Dreamweaver MX Workspace или Dreamweaver 4 Workspace — вы выбрали в окне Workspace Setup. Теперь можно начинать знакомство с этой замечательной программой.
Дальнейшее повествование будет вестись исходя из того, что вы выбрали "стиль MX" рабочей среды Dreamweaver.
Главное окно программы
Главное (или основное) окно программы Macromedia Dreamweaver MX показано на рис. 2.2. Рассмотрим его подробнее.
Рис. 2.2. Главное окно Dreamweaver
Скажем сразу, что Dreamweaver — программа с многодокументным интерфейсом или просто многодокументная программа. Это значит, что вы можете открыть в одном и том же окне программы сразу несколько документов. В этом случае окна, содержащие открытые документы, открываются внутри большого окна самой программы. К многодокументным приложениям также относятся Microsoft Word и Adobe Photoshop.
В отличие от них, программы с однодокументным интерфейсом (однодокументные программы) могут открыть только один документ; чтобы открыть второй, нужно запустить вторую копию программы. Примерами однодокументных приложений являются, в частности, текстовый редактор Microsoft WordPad и графический редактор Microsoft Paint, поставляемые в составе Windows.
Но вернемся к нашему Dreamweaver.
Главное окно служит "вместилищем" для превеликого множества других окон, содержащих как открытые Web-страницы, так и различные инструменты, предназначенные для работы с ними. Также в главном окне находится строка главного меню, с помощью которого вы сможете получить доступ ко всем возможностям Dreamweaver.
Окно документа Dreamweaver служит для отображения открытой Web-страницы (на рис. 2.2 вы можете видеть, что в Dreamweaver открыта одна из наших первых Web-страничек). Как и любая другая многодокументная программа, Dreamweaver может открыть в главном окне сколько угодно окон документов. Вы можете перемещать, свертывать и развертывать эти окна и изменять их размеры, в общем, проделывать с ним те же манипуляции, что и с любым другим окном Windows. Единственное исключение: вы не можете "вытащить" ни одно из этих окон за пределы главного окна программы (его еще называют родительским окном).
Надо сказать, что при первом запуске Dreamweaver MX выводит на экран еще одно небольшое окно — так называемое окно-приглашение. Это окно содержит текст рекламного характера, предлагающий пользователю прочитать некоторые справочные данные или запустить интерактивные презентации, объясняющие, как работать в Dreamweaver. Вы можете просмотреть их или сразу же закрыть это окно, щелкнув кнопку закрытия. При последующих запусках окно-приглашение появляться больше не будет.
Выше, ниже и правее окна документа находятся панели. Это небольшие окна, которые могут быть либо "приклеены" к одному краю главного окна, либо свободно "плавать" рядом с ним. Они предназначены для самых разных целей; подробнее мы рассмотрим их в следующих разделах книги. В верхней части каждой панели имеется ее заголовок — темно-серая полоса, на которой написано название панели.
Изначально все панели, имеющиеся на экране, "приклеены" к какому-либо краю главного (родительского) окна программы Разработчики из фирмы
Macromedia считают, что так будет удобно большинству пользователей Dreamweaver, и, похоже, они правы. Однако вы можете придерживаться иного мнения. Поэтому и здесь существует возможность отделить какую-либо панель от края родительского окна и превратить ее в отдельное окно (рис. 2.3) (так называемая "плавающая" панель). Для этого каждая панель имеет "ручку" для ее "переноски", находящуюся в левой части заголовка панели и выглядящую как пять темных точек. Ну и, конечно же, вы всегда можете присоединить панель обратно к краю главного окна, чтобы она не загораживала документ.
Рис. 2.3. Панель, отделенная от края родительского окна
"Отклеенная" от края главного окна панель может быть перемещена в любое место экрана, даже за пределы главного окна программы. Перетаскивать такую панель можно как за ее "ручку", так и за заголовок ее окна. Кроме того, вы можете изменять размеры окон панелей (многих, но не всех).
Если вы перетащите одну панель на другую, эти панели будут объединены в общую группу панелей, занимающую одно окно (рис. 2.4). Такие группы можно также "приклеивать" к краю главного окна программы. (Если вы посмотрите на рис. 2.2, то увидите несколько групп панелей, "приклеенных" к краю главного окна.) Рекомендуется объединять в одну группу панели, выполняющие сходные функции.
Рис. 2.4. Панели, объединенные в группу
Все панели, находящиеся в группе, представлены в виде вкладок. Чтобы переключиться на нужную панель в группе, щелкните мышью вкладку, на которой написано название этой панели. Если вы хотите вынести какую-либо панель из такой группы, щелкните правой кнопкой мыши по соответствующей вкладке, выберите пункт Group <название панели> with и в появившемся на экране подменю — пункт New Panel Group.
Когда вы выносите какую-либо панель за пределы группы, вы фактически создаете новую группу, состоящую из одной этой панели. В дальнейшем вы можете поместить в эту группу любые другие панели. Это значит, что в Dreamweaver все панели должны находиться в группах.
Чтобы временно уменьшить площадь, занимаемую "плавающей" панелью (фактически, группой панелей), вы можете ее "сжать", чтобы на экране остался только заголовок (рис. 2.5). Для этого щелкните по названию панели, находящемуся в ее заголовке. Чтобы "развернуть" панель до обычного состояния, снова щелкните по ее заголовку.
Рис. 2.5. "Сжатое" окно панели
Большинство групп панелей имеют так называемое дополнительное меню. Оно открывается при щелчке мышью по небольшой кнопке, расположенной в правом верхнем углу панели и имеющей изображение списка из трех позиций и небольшой стрелки, направленной вниз (рис. 2.6). В дополнительном меню находятся пункты, выполняющие редко используемые команды. В частности, вы можете найти там уже знакомое вам подменю Group <название панели> with.
Рис. 2.6. Дополнительное меню группы панелей (открыто)
Теперь обратите внимание на правый край главного окна. Там находится настоящее сборище всяческих панелей. Это так называемый док — область, специально предназначенная для помещения на нее панелей. Док отделен от остального пространства главного окна толстой серой полосой, которую вы можете перетаскивать мышью, изменяя размеры дока. Вы также можете щелкать мышью довольно приметную кнопку (рис. 2.7), чтобы быстро скрыть док со всеми его панелями или открыть его снова. Поверьте — это настоящая находка программистов фирмы Macromedia; благодаря ей, пользоваться Dreamweaver стало намного удобнее.
Рис. 2.7. Кнопка скрытия-раскрытия дока
Панели всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы вы могли всегда получить к ним доступ, вне зависимости от того, какое окно сейчас активно. Если же вы хотите убрать какую-либо из этих панелей, "вынесите" ее за пределы окна документа или вообще закройте, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. В дальнейшем вы сможете открыть нужную панель, выбрав соответствующий пункт меню Window.
Когда окно программы Dreamweaver перестает быть активным (например, когда пользователь переключается в другую программу), все "плавающие" панели временно скрываются. При активизации Dreamweaver они опять появляются на экране.
Как правило, все панели Dreamweaver имеют примерно одинаковые возможности (но, конечно, разное назначение). Но две из них стоят особняком. И мы сейчас их рассмотрим.
Первая из них — это панель объектов, показанная в "плавающем" виде на рис. 2.3 (она носит название Insert). Эта панель служит для быстрой вставки в документ различных элементов: рисунков, таблиц, специальных символов, расширений Web-обозревателя и пр. (Также она служит для переключения режимов работы окна документа, но об этом поговорим позже.) Панель объектов содержит множество вкладок, между которыми вы можете переключаться, — это способ сделать ее чуть более вместительной.
Если в данный момент времени панель объектов вам не нужна, можете закрыть ее, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. Чтобы открыть ее впоследствии, выберите в меню Windows пункт Insert или нажмите комбинацию клавиш <Ctrl>+<F2>.
Вторая панель, имеющая заголовок Properties, — это редактор свойств (рис. 2.8), один из важнейших и незаменимейших инструментов Dream weaver. Редактор свойств служит для задания параметров того или иного элемента Web-страницы (фактически — значений атрибутов соответствующего HTML-тега). Если панель объектов вы можете со спокойной душой закрыть, чтобы освободить место на экране, и использовать для вставки элементов страницы пункты меню главного окна, то редактор свойств вам будет нужен всегда. Поэтому держите его под рукой. Если же вы его все же случайно закрыли, выберите в меню Windows пункт Properties или нажмите комбинацию клавиш <Ctrl>+<F3>.
Рис. 2.8. Редактор свойств
Редактор свойств можно переключить в компактный или полный вид. Изначально он находится в компактном виде, не показывая некоторых, малоиспользуемых, с точки зрения разработчиков Dreamweaver, свойств. Автор рекомендует его сразу же развернуть, для чего щелкните мышью по кнопке, имеющей вид стрелки, направленной вниз, — она расположена в правом нижнем углу панели. После этого редактор свойств покажет вам все доступные свойства. (На рис. 2.2 редактор свойств находится как раз в развернутом виде.) Заметьте, что при этом кнопка развертывания изменит вид на стрелку вверх, и при щелчке на ней вы, наоборот, свернете редактор свойств.
Осталось рассказать совсем немного.
Взгляните на верхний край главного окна, туда, где находится панель объектов. Выше или ниже ее вы увидите узкую серую панельку, заполненную кнопками (рис. 2.9). Это один из инструментариев Dreamweaver. Инструментарий — особая панель, лишенная многих возможностей обычных панелей и предназначенная только для того, чтобы предоставить быстрый доступ к некоторым часто используемым операциям. Таких инструментариев в Dreamweaver два:
Вы можете перетаскивать инструментарий, "ухватив" его за "ручку", имеющую вид расположенной у левого его конца вертикальной линии. Инстру ментарий, как и обычная панель, может быть "приклеен" к верхнему или нижнему краю главного окна программы или "плавать" отдельно от него.
Рис. 2.9. Инструментарий документа
Управление окнами и панелями Dreamweaver
Как видите, Dreamweaver может вывести на экран сразу множество разнообразнейших окон. Как разобраться во всем этом многообразии?
Прежде всего, нужно знать пункты меню, с помощью которых осуществляется управление этими окнами. Все эти пункты находятся в подменю Window. Рассмотрим их подробнее.
Если вы открыли несколько Web-страниц, разобраться в них может быть очень трудно. Окна перекрывают друг друга, и добраться до нужного окна удается далеко не сразу. Откройте подменю Window и посмотрите его нижнюю часть. Там будут находиться пункты, имеющие имена, схожие с именами файлов открытых страниц. Для того чтобы переключиться в окно, где открыт нужный файл, просто выберите соответствующий пункт. Dreamweaver тотчас выведет это окно на первый план, т. е. активизирует его.
Если же вы раскрыли одно из окон документов на весь экран (точнее, на все главное окно), то переключаться между окнами станет еще проще. В этом случае все открытые окна будут перечислены в нижней части окна документа в виде вкладок (рис. 2.10) — вам останется только выбрать необходимое.
Рис. 2.10. Вкладки, обозначающие все открытые окна документа в раскрытом состоянии
Если вам нужно держать на виду сразу два или больше окон, воспользуйтесь пунктами Cascade, Tile Horizontally или Tile Vertically меню Window. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в окне программы так, что вы можете видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в окне программы "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий — по вертикали.
Пункты Insert и Properties служат для вывода на экран или скрытия соответственно панели объектов и редактора свойств. Если слева от имени одного из этих пунктов стоит галочка, это значит, что соответствующая панель выведена на экран (или, как еще говорят, что соответствующий пункт меню "включен"). Чтобы убрать панель, снова выберите нужный пункт — и панель исчезнет вместе с галочкой. Такие пункты меню, меняющие свое состояние на противоположное при выборе, называют выключателями. Вместо выбора пунктов Insert и Properties вы можете нажать "горячие" комбинации клавиш <Ctrl>+<F2> и <Ctrl>+<F3> соответственно.
Большую часть меню Window занимает набор аналогичных пунктов-выключателей, служащих для вывода на экран или скрытия различных панелей. Далее в книге будут описаны эти пункты вместе с рассмотрением той или иной панели.
Если вам нужно скрыть на время все панели, чтобы без помех просмотреть открытую Web-страницу, выберите пункт Hide Panels в меню Window или одноименный пункт в меню View. Этот пункт работает как выключатель, т. е. при первом выборе он скрывает все панели, а при втором — снова выводит их на экран. Вы также можете нажать клавишу <F4> — это проще и быстрее, чем лезть в меню.
Как вы уже знаете, каждая группа панелей имеет дополнительное меню. Кроме того, каждая отдельная панель имеет контекстное меню, появляющееся при щелчке правой кнопкой мыши по нужной вкладке и содержащей те же пункты. Пользуясь пунктами этого меню, вы можете выполнить над данной группой или панелью различные манипуляции:
Чтобы вывести на экран нужный инструментарий, выберите соответствующий пункт-выключатель подменю Toolbars меню View. Всего таких пунктов два — по числу инструментариев:
Рис. 2.11. Диалоговое окно Rename Panel Group
Вы также можете воспользоваться контекстным меню инструментария. Щелкните правой кнопкой мыши по любому инструментарию — и увидите небольшое меню, содержащее те же самые пункты.
Работа с Web-страницами
А теперь рассмотрим основные принципы работы с Web-страницами в Dreamweaver. И заодно поговорим об окне документа.
Работа в окне документа
Итак, как же в Dreamweaver создаются Web-страницы?
Очень просто. Точно так же, как создаются обычные текстовые документы в вашем любимом текстовом редакторе, например, Microsoft Word. Вы просто набираете нужный текст, форматируете его и, наконец, сохраняете готовый документ в виде файла. Только в случае Dreamweaver этот документ будет иметь расширение htm или html и может быть сразу же помещен на Web-сервер.
Но прежде чем писать текст, нужно создать сам документ. Для этого вам необходимо выбрать пункт New в меню File или нажать комбинацию клавиш <Ctrl>+<N>. Более детально процесс создания новой Web-страницы описан в главе 3.
Также вы можете открыть для правки уже существующую Web-страницу. Для этого выберите пункт Open в меню File или нажмите комбинацию клавиш <Ctrl>+<O>. После этого вам останется выбрать нужный файл в стандартном диалоговом окне открытия файла и нажать кнопку открытия.
Операции создания, открытия, сохранения, пересохранения, закрытия и печати документа называются файловыми.
Текст в Dreamweaver набирается точно так же, как и в любом текстовом редакторе (Блокнот и WordPad, поставляющиеся в составе Windows, Microsoft Word и др.). В этом все Windows-приложения, работающие с текстом, похожи друг на друга. И это правильно — зачем обескураживать пользователя!
Мы не будем учить вас азам работы с текстом. Если вы пользовались текстовым редактором (а вы наверняка им пользовались), то без труда разберетесь с Dreamweaver. Благо разработчики сделали все, чтобы Dreamweaver ничем не отличался от других Windows-приложений. Мы просто кратко напомним вам некоторые приемы работы с текстом, которые вам скорее всего пригодятся.
Разумеется, текст набирается с помощью клавиатуры (а вы как думали?). При этом Dreamweaver самостоятельно разобьет текст на строки. Если вам нужно создать новый абзац, нажмите клавишу <Enter>, Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый вами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также вы можете "листать" текст, нажимая клавиши <PgUp> и <PgUp>, мгновенно перемещаться к началу и концу строки клавишами <Ноmе> и <End>. Чтобы быстро переместиться в начало или конец документа, нажмите, соответственно, комбинацию клавиш <Ctrl>+<Home> или <Ctrl>+<End>. Вы также можете устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.
Если вы ошиблись, то всегда можете удалить неправильно введенный текст, воспользовавшись клавишами <Backspace> и <Del>. Первая при нажатии удаляет символ, находящийся слева от текстового курсора, и идеально подходит для удаления только что введенного неправильного символа. Вторая удаляет символ, находящийся справа от текстового курсора.
Кроме того, в окне документа Dreamweaver доступны такие операции, как перемещение ("вырезание"), копирование текста в буфер обмена Windows и последующая его вставка в место, где находится текстовый курсор. Это может быть очень полезно, если вам нужно переместить фрагмент текста с места на место или поместить похожие фрагменты текста в разные места документа.
Чтобы выделить текст, просто щелкните в начале нужного фрагмента мышью и, не отпуская левой кнопки, протащите ее до конца, после чего отпустите кнопку. Вы также можете поставить текстовый курсор в начало необходимого фрагмента и воспользоваться комбинацией клавиш <Shift>+ +<Клавиша-стрелка в нужную сторону> для его выделения. Чтобы выделить остаток строки до конца, нажмите клавиши<Shift>+<End>, до начала — <Shift>+<Home>, остаток документа до конца -- <Ctrl>+<Shift>+<End>, остаток документа до начала — <Ctrl>+<Shift>+<Home>. Вы также можете выделить строку, щелкнув мышью слева от нее, а если вы протащите мышь, не отпуская ее левую кнопку, то будут выделены сразу несколько строк. Чтобы выделить сразу весь текст, нажмите клавиши <Ctrl>+<A>.
Для выделения родительского тега вы можете выбрать пункт Select Parent Tag меню Edit или нажать комбинацию клавиш <Ctrl>+<Shift>+<<>. Для выделения первого дочернего тега выберите пункт Select Child меню Edit или нажмите комбинацию клавиш <Ctrl>+<Shift>+<>>.
Чтобы вырезать выделенный фрагмент, нажмите комбинацию клавиш <Ctrl>+<X> или выберите пункт Cut меню Edit; чтобы скопировать его -комбинацию клавиш <Ctrl>+<C> или пункт Сору того же меню. Для вставки текста в нужное место расположите там текстовый курсор и нажмите комбинацию клавиш <Ctrl>+<V> или выберите пункт Paste меню Edit. Вы также можете стереть выделенный текст, нажав клавишу <Del> или выбрав пункт Clear все того же незаменимого меню Edit.
Если вам необходимо переместить выделенный фрагмент текста с места на место, вовсе не нужно беспокоить меню Edit — вы можете просто "взять" и перетащить его мышью. Чтобы скопировать этот фрагмент в другое место, перетащите его мышью при нажатой клавише <Ctrl>.
Щелкнув правой кнопкой мыши по тексту, вы получите доступ к контекстному меню, где тоже содержатся пункты Cut, Copy и Paste.
Если же вы сделали что-то не так, воспользуйтесь пунктом Undo <команда> меню Edit или нажмите комбинацию клавиш <Ctrl>+<Z>.
Форматирование текста выполняется точно так же, как и в обычных текстовых редакторах. Для этого вам достаточно выделить текст и воспользоваться редактором свойств, чтобы задать его параметры. Попробуйте, например, выделить в тексте нашей первой страницы какой-либо фрагмент и нажать кнопку В, которая хорошо заметна в редакторе свойств.
Однако Dreamweaver, как и любая специализированная программа, имеет свои особенности. И сейчас мы их рассмотрим.
В нижней части окна документа расположена строка статуса. Многие Windows-приложения используют строку статуса для отображения нужной .пользователю информации. Но строка статуса окна документа Dreamweaver не только отображает информацию, но и выполняет несколько очень важных функций. Она разделена на три секции, каждую из которых мы рассмотрим отдельно.
Слева расположена секция тегов, занимающая большую часть строки статуса (рис. 2.12). С помощью этой секции можно выбрать фрагмент текста, помеченный тем или иным тегом HTML. Секция тегов имеет вид небольшой панели инструментов, чьи кнопки соответствуют тегам и расположены слева направо в порядке вложенности.
Рис. 2.12. Секция тегов
Предположим, что нам нужно выделить весь текст, помеченный тегом <i> (курсивное начертание). (В нашей первой странице — это название Web-обозревателя Microsoft Internet Explorer.) Для этого сделаем следующее. Поместим текстовый курсор куда-либо на текст "Microsoft Internet Explorer", после чего секция тегов примет вид, показанный на рис. 2.12. Далее нажмем кнопку <i> этой секции. Весь текст "Microsoft Internet Explorer" будет выделен, т. к. он помечен тегом <I>.
Если теперь щелкнуть кнопку <р>, будет выделен весь текст, помеченный тегом <Р>, т. е. весь абзац. Осталось проверить, как работает кнопка <body>. Если ее щелкнуть, будет выделена вся страница (все содержимое тега <BODY>).
Секция тегов — мощнейший инструмент правки страницы. Благодаря ей вы можете получить доступ именно к тому тегу, который вам нужен. Попробуйте ей попользоваться — и скоро вы не сможете представить, как люди работают в других программах.
Правее находится вторая секция, отображающая размер окна документа в пикселах, — секция размера окна. Если вы щелкнете на ней мышью, на экране появится меню — список размеров окна (рис. 2.13). Каждый размер соответствует какому-либо разрешению экрана, которое может установить пользователь на своем компьютере. Вы можете выбрать любой такой размер и посмотреть, как будет выглядеть ваша Web-страница в окне. Это может понадобиться, если вы делаете Web-страницу под конкретное разрешение экрана — такое встречается довольно часто.
Рис. 2.13. Секция размера окна с открытым списком
Самая правая секция показывает примерный размер созданной вами Web-страницы и время, в течение которого она будет загружаться с Web-сервера. Это секция размера страницы (рис. 2.14). Она отображает два значения в виде дроби: в числителе ее находится размер страницы, округленный до килобайт, а в знаменателе — скорость загрузки, округленная до секунд. При этом скорость загрузки, по которой вычисляется это время, задается в настройках программы и по умолчанию равна 28,8 Кбит/с (не самый быстрый на сегодняшний день модем).
Рис. 2.14. Секция размера страницы
Закончив работу со страницей, вы должны ее сохранить. Для этого выберите пункт Save в меню File или нажмите комбинацию клавиш <Ctrl>+<S>. Если вы сохраняете страницу в первый раз, на экране появится стандартное диалоговое окно сохранения файла; введите имя файла страницы и нажмите кнопку сохранения. В противном случае Dreamweaver просто сохранит страницу.
Dreamweaver, как и большинство других программ-редакторов, позволяет вам также сохранить страницу в другом файле под другим именем. Это может быть полезно, если вы хотите создать множество примерно одинаковых страниц. Выберите пункт Save As в меню File или нажмите комбинацию клавиш <Ctrl>+<Shift>+<S>. На экране появится стандартное диалоговое окно сохранения файла; введите имя файла страницы и нажмите кнопку сохранения.
Выбрав пункт Print Code все того же меню File или нажав комбинацию клавиш <Ctrl>+<P>, вы сможете распечатать HTML-код страницы. На экране появится стандартное диалоговое окно печати; задайте необходимые параметры и нажмите кнопку запуска печати.
Все хорошее рано или поздно кончается. Готовую страницу нужно, в конце концов, закрыть, чтобы освободить системные ресурсы компьютера. Проще всего сделать это, щелкнув кнопку закрытия соответствующего окна документа (не главного окна программы!). Также можно выбрать пункт Close меню File или нажать комбинацию клавиш <Ctrl>+<W>. После этого страница будет закрыта, но сам Dreamweaver останется открытым.
Сам же Dreamweaver можно закрыть, щелкнув кнопку закрытия его главного окна. При этом он спросит вас, сохранять ли отредактированные, но еще не сохраненные страницы, которые вы к этому времени открыли. Если же вы предпочитаете пользоваться меню, то выберите пункт Exit меню File или нажмите комбинацию клавиш <Ctrl>+<Q> или <Alt>+<F4>.
Три режима отображения Web-страницы
Окно документа Dreamweaver может показывать редактируемую Web-страницу в трех режимах отображения. Сейчас мы их рассмотрим.
Как уже говорилось, Dreamweaver относится к гибридным Web-редакторам, позволяющим работать как с самой Web-страницей, так и непосредственно с ее HTML-кодом. Осуществляется это очень легко благодаря тому, что Dreamweaver может отображать одновременно и HTML-код, и саму страницу в одном окне.
Но как получить доступ к HTML-коду? Ведь по умолчанию Dreamweaver предлагает вам редактировать Web-страницу в режиме WYSIWYG.
Очень просто!
Взгляните на инструментарий документа (лучше всего держать его открытым). Слева видны три кнопки (рис. 2.15). Они переключают три доступных режима отображения (перечислены в порядке справа налево): страница, страница и HTML-код и только HTML-код.
Рис. 2.15. Кнопки переключения режимов отображения Web-страницы
На рис. 2.15 крайняя правая кнопка нажата. Она включает режим отображения, предлагаемый Dreamweaver по умолчанию, — режим отображения страницы. В этом режиме вы можете работать с Web-страницей в режиме WYSIWYG.
Теперь нажмем на среднюю кнопку, включающую режим отображения страницы и кода. На рис. 2.16 показано, что из этого получится.
Рис. 2.16. Режим отображения страницы и кода
Как видите, окно документа разделилось на две части. В верхней части отображается HTML-код нашей страницы, а в нижней — сама страница в режиме WYSIWYG. Такой режим очень полезен, когда нужно "отшлифовать" код, при этом держа перед глазами саму Web-страницу. Вы можете перемещать мышью разделительную полосу, чтобы увеличить ту или иную часть окна.
Рис. 2.17. Режим отображения кода
Ну, а левая кнопка включает режим отображения кода (рис. 2.17).
Для переключения режимов отображения вы также можете воспользоваться пунктами Design, Code and Design и Code меню View, соответственно. При выборе одного из этих пунктов слева от его названия появляется галочка, показывающая, что данный пункт и, следовательно, данный режим включены. Такие пункты называются переключателями,
Кроме того, вы можете быстро переключаться между режимом отображения страницы и режимом кода, выбрав пункт Switch Views меню View или нажав комбинацию клавиш <Ctrl>+<'>.
Работа с кодом 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 в любое место текста — и все это без переключения в режим отображения кода.
Рис. 2.18. Панель Code Inspector
Пусть, например, нужно немного поправить значения атрибутов какого-либо тега. Для этого поставьте текстовый курсор в его содержимое и выберите в контекстном меню пункт Edit Tag Code <тег>. На экране появится окно мини-редактора, показанное на рис. 2.19. Введите в него нужный код и нажмите клавишу <Enter>, чтобы Dreamweaver принял все изменения, или <Esc>, чтобы отказаться от них.
Рис. 2.19. Окно мини-редактора HTML
Как видите, окно мини-редактора позволяет вам править только теги, а не их содержимое. Исправить содержимое тегов можно и в окне документа.
Если вам нужно вставить в текст Web-страницы какой-либо тег с содержимым, поставьте в это место текстовый курсор и выберите в контекстном меню пункт Insert Tag. На экране также появится окно мини-редактора, на этот раз пустое (рис. 2.20).
Вы спросите: а что это за странный список, в котором перечислены непонятные слова? Это одна из замечательных возможностей, появившаяся в 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.
Рис. 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
С помощью другого диалогового окна вы можете поместить на страницу какой-либо тег или "завернуть" в него выделенный фрагмент текста. Для этого служит диалоговое окно Tag Chooser. Чтобы его вызвать, вам нужно выполнить одно из следующих действий:
Само окно 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).
Искомый тег выбирается в раскрывающемся списке, расположенном правее всплывающего меню Search For. Если вы хотите искать любой тег, выберите пункт [any tag].
В группе поиска самый левый раскрывающийся список задает, какие теги будут искаться:
Рис. 2.29. Диалоговое окно Find and Replace (выбран режим поиска тега)
Кнопки со знаками "плюс" и "минус" вам уже знакомы. Так что сразу перейдем к следующей группе элементов управления.
К сожалению, Dreamweaver не будет искать заданный вами тег, если вы не ввели никаких значений в раскрывающиеся списки группы элементов управления, задающих дополнительные условия поиска. Так что, если вы не собираетесь задавать дополнительных условий, например, атрибута искомого тега, рекомендуем вам удалить все пустые группы.
Раскрывающийся список Action задает действие, производимое над найденным тегом. А сделать с ними можно следующее:
Флажок 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". Что в этом случае искать? Точку? Но точек в тексте и так хватает, и далеко не всякая из них является частью интернет-адреса.
В этом случае нам на помощь придет регулярное выражение. Оно будет иметь следующий вид:
Ну и как оно вам? Больше похоже на бессмысленный набор символов, в котором с трудом угадывается что-то знакомое. Признаться, автор и сам сначала с трудом в них разбирался. Ему помогала вот такая табличка — см. табл. 2.1.
