ГЛАВА 2. Основные принципы работы с Dreamweaver В этой главе мы рассмотрим начальные сведения о работе с Macromedia Dreamweaver MX. Вы узнаете, зачем нужны его многочисленные окна и инструме...
Поиск и замена текста
Поиск и замена текста Все текстовые редакторы, за исключением самых примитивных, предоставляют пользователю возможность найти нужный фрагмент текста и при необходимости заменить его другим. Р...
Рисунок 2 27 Диалоговое окно Find and Replace
Рисунок 2.27. Диалоговое окно Find and Replace Всплывающее меню Search For позволяет задать, в каком тексте нужно произвести поиск: в тексте страницы (пункт Text), в "сыром" HTML-ко...
Рисунок 2 28 Диалоговое окно Find
Рисунок 2.28. Диалоговое окно Find and Replace (выбран режим "хитрого" поиска) Если же вы выберете пункт Text (Advanced), в окне поиска и замены кое-что добавится (Рисунок 2.28). Э...
Рисунок 2 29 Диалоговое окно Find
Рисунок 2.29. Диалоговое окно Find and Replace (выбран режим поиска тега) Without Attribute — не содержащие атрибут, заданный в следующем раскрывающемся списке; Containing — содержащи...
Внимание
Внимание К сожалению, Dreamweaver не будет искать заданный вами тег, если вы не ввели никаких значений в раскрывающиеся списки группы элементов управления, задающих дополнительные условия...
Рисунок 2 30 Панель Search
Рисунок 2.30. Панель Search А теперь давайте представим себе такую ситуацию. Вы задали какое-то сложное условие поиска (и, возможно, замены) и теперь хотите сохранить его для дальнейшего испо...
Использование регулярных выражений
Использование регулярных выражений Как и было обещано, сейчас мы познакомимся с регулярными выражениями. Чем же они могут нам помочь? Представим себе такую ситуацию. Вам нужно найти в исходн...
Таблица 2 1 Регулярное выражение поиска интернетадресов
Таблица 2.1. Регулярное выражение поиска интернет-адресов Символы Описание "http://...
Таблица 2 2 Регулярное выражение
Таблица 2.2. Регулярное выражение поиска последнего знака препинания абзаца Символы Описание...
Таблица 2 3 Литералы регулярных выражений
Таблица 2.3. Литералы регулярных выражений Литерал Описание
^ Начало...
Просмотр Webстраницы
Просмотр Web-страницы Хоть Dreamweaver в режиме просмотра страницы и представляет ее почти в таком виде, как она будет показана в Web-обозревателе, все же часто возникает необходимость уви...
Рисунок 2 31 Кнопка Preview/Debug in Browser
Рисунок 2.31. Кнопка Preview/Debug in Browser Как видите, при нажатии этой кнопки появляется меню, предлагающее несколько пунктов. В данный момент нас интересует пункт Previews in iexplore. П...
Вызов справки
Вызов справки В процессе работы с Dreamweaver вам может понадобиться — и наверняка понадобится! — помощь. Как и все серьезные Windows-приложения, Dreamweaver снабжен мощной справочной системо...
Рисунок 2 32 Окно справочной системы Dreamweaver
Рисунок 2.32. Окно справочной системы Dreamweaver В составе Dreamweaver также поставляется полное руководство по HTML от издательства "O'Relly". Его содержимое отображается в особой...
Рисунок 2 33 Панель Reference
Рисунок 2.33. Панель Reference...
Рисунок 2 34 Кнопка Reference
Рисунок 2.34. Кнопка Reference...
Настройка Dreamweaver
Настройка Dreamweaver А сейчас самое время настроить наш Dreamweaver так, чтобы он нормально понимал русский язык. Заодно мы расскажем о других настройках, которые могут вам пригодиться в дал...
Учим русский
Учим русский Выберем в списке вкладок пункт New Document. Окно настройки примет вид, показанный на Рисунок 2.35. Итак, что же здесь изображено?...
Рисунок 2 35 Вкладка New Document
Рисунок 2.35. Вкладка New Document диалогового окна Preferences Но прежде чем начать разговор о русификации Dreamweaver, немного поговорим об особенностях национального Web-творчества. А имен...
Таблица 2 4 Кодировки русского
Таблица 2.4. Кодировки русского текста, поддерживаемые Dreamweaver Обозначение Описание ISO-8...
Рисунок 2 36 Вкладка Fonts диалогового окна Preferences
Рисунок 2.36. Вкладка Fonts диалогового окна Preferences Ниже приведен фрагмент этого файла, в котором перечисляются русские кодировки, интересующие нас: <mm:encoding name="Cyrillic...
Настраиваем скорость интернетсоединения
Настраиваем скорость интернет-соединения Выше было сказано, что строка статуса окна документа содержит секцию, где показывается примерный размер открытой в окне Web-страницы и время ее загрузк...
Добавляем программы просмотра Webстраниц
Добавляем программы просмотра Web-страниц Если на вашем компьютере установлена одна программа Web-обозревателя, настройка закончена, и вы можете нажать кнопку ОК. Если же таких программ у вас...
Рисунок 2 37 Вкладка Status Bar диалогового окна Preferences
Рисунок 2.37. Вкладка Status Bar диалогового окна Preferences Выберем вкладку Preview in Browser. To, что вы увидите, показано на Рисунок 2.38. В списке Browsers перечислены все программы пр...
Рисунок 2 38 Вкладка Preview in
Рисунок 2.38. Вкладка Preview in Browser диалогового окна Preferences...
Рисунок 2 39 Окно сведений о программе просмотра
Рисунок 2.39. Окно сведений о программе просмотра Dreamweaver позволяет вам из всех занесенных в его список программ просмотра выбрать двоих "любимчиков". Этих "любимчиков"...
Добавляем внешний HTMLредактор
Добавляем внешний HTML-редактор Всем хорош Dreamweaver. И Web-страницы позволяет редактировать, и до HTML-кода добраться несложно. Однако иногда возникает необходимость во внешнем HTML-редакто...
Рисунок 2 40 Вкладка File Types
Рисунок 2.40. Вкладка File Types / Editors диалогового окна Preferences По окончании настройки Dreamweaver нажмите кнопку ОК, чтобы сохранить сделанные установки. Конечно, возможности настрой...
Что дальше?
Что дальше? Выяснив, что есть что в Dreamweaver, можно приступать к созданию наших первых Web-страничек. В следующей главе мы создадим первую, главную и самую простенькую Web-страницу. На не...
Среда Dreamweaver MX
Среда Dreamweaver MX Итак, начнем рассматривать рабочую среду Dreamweaver MX, т. е. наборы окон и различных инструментов, предлагаемых им Web-дизайнеру. Но для начала запустим Dreamweaver. З...
Выбор рабочей среды
Выбор рабочей среды Через некоторое время после запуска программы на экране появится небольшое диалоговое окно Workspace Setup, предлагающее вам выбрать вид рабочей среды Dreamweaver MX (Рису...
Рисунок 2 1 Диалоговое окно Workspace Setup
Рисунок 2.1. Диалоговое окно Workspace Setup Как видите, в этом окне находятся два переключателя и один флажок. Также вы можете видеть два небольших изображения, наглядно показывающие, какие...
Внимание
Внимание Дальнейшее повествование будет вестись исходя из того, что вы выбрали "стиль MX" рабочей среды Dreamweaver....
Главное окно программы
Главное окно программы Главное (или основное) окно программы Macromedia Dreamweaver MX показано на Рисунок 2.2. Рассмотрим его подробнее....
Рисунок 2 2 Главное окно Dreamweaver
Рисунок 2.2. Главное окно Dreamweaver Скажем сразу, что Dreamweaver — программа с многодокументным интерфейсом или просто многодокументная программа. Это значит, что вы можете открыть в одном...
Рисунок 2 3 Панель отделенная от края родительского окна
Рисунок 2.3. Панель, отделенная от края родительского окна "Отклеенная" от края главного окна панель может быть перемещена в любое место экрана, даже за пределы главного окна програ...
Рисунок 2 4 Панели объединенные в группу
Рисунок 2.4. Панели, объединенные в группу Все панели, находящиеся в группе, представлены в виде вкладок. Чтобы переключиться на нужную панель в группе, щелкните мышью вкладку, на которой нап...
Внимание
Внимание Когда вы выносите какую-либо панель за пределы группы, вы фактически создаете новую группу, состоящую из одной этой панели. В дальнейшем вы можете поместить в эту группу любые др...
Рисунок 2 5 "Сжатое" окно панели
Рисунок 2.5. "Сжатое" окно панели Большинство групп панелей имеют так называемое дополнительное меню. Оно открывается при щелчке мышью по небольшой кнопке, расположенной в правом ве...
Рисунок 2 6 Дополнительное меню группы панелей (открыто)
Рисунок 2.6. Дополнительное меню группы панелей (открыто) Теперь обратите внимание на правый край главного окна. Там находится настоящее сборище всяческих панелей. Это так называемый док — об...
Рисунок 2 7 Кнопка скрытияраскрытия дока
Рисунок 2.7. Кнопка скрытия-раскрытия дока Панели всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы вы могли всегда получить к ним дос...
Рисунок 2 8 Редактор свойств
Рисунок 2.8. Редактор свойств Редактор свойств можно переключить в компактный или полный вид. Изначально он находится в компактном виде, не показывая некоторых, малоиспользуемых, с точки зрен...
Рисунок 2 9 Инструментарий документа
Рисунок 2.9. Инструментарий документа...
Управление окнами и панелями Dreamweaver
Управление окнами и панелями Dreamweaver Как видите, Dreamweaver может вывести на экран сразу множество разнообразнейших окон. Как разобраться во всем этом многообразии? Прежде всего, нужно...
Рисунок 2 10 Вкладки обозначающие
Рисунок 2.10. Вкладки, обозначающие все открытые окна документа в раскрытом состоянии Если вам нужно держать на виду сразу два или больше окон, воспользуйтесь пунктами Cascade, Tile Horizonta...
Рисунок 2 11 Диалоговое окно Rename Panel Group
Рисунок 2.11. Диалоговое окно Rename Panel Group Вы также можете воспользоваться контекстным меню инструментария. Щелкните правой кнопкой мыши по любому инструментарию — и увидите небольшое м...
Работа с Webстраницами
Работа с Web-страницами А теперь рассмотрим основные принципы работы с Web-страницами в Dreamweaver. И заодно поговорим об окне документа....
Работа в окне документа
Работа в окне документа Итак, как же в Dreamweaver создаются Web-страницы? Очень просто. Точно так же, как создаются обычные текстовые документы в вашем любимом текстовом редакторе, например...
Внимание
Внимание Операции создания, открытия, сохранения, пересохранения, закрытия и печати документа называются файловыми. Текст в Dreamweaver набирается точно так же, как и в любом текстовом...
Рисунок 2 12 Секция тегов
Рисунок 2.12. Секция тегов Предположим, что нам нужно выделить весь текст, помеченный тегом (курсивное начертание). (В нашей первой странице — это название Web-обозревателя Microsoft Interne...
Рисунок 2 13 Секция размера окна с открытым списком
Рисунок 2.13. Секция размера окна с открытым списком Самая правая секция показывает примерный размер созданной вами Web-страницы и время, в течение которого она будет загружаться с Web-сервер...
Рисунок 2 14 Секция размера страницы
Рисунок 2.14. Секция размера страницы Закончив работу со страницей, вы должны ее сохранить. Для этого выберите пункт Save в меню File или нажмите комбинацию клавиш <Ctrl>+<S>. Ес...
Три режима отображения Webстраницы
Три режима отображения Web-страницы Окно документа Dreamweaver может показывать редактируемую Web-страницу в трех режимах отображения. Сейчас мы их рассмотрим. Как уже говорилось, Dreamweave...
Рисунок 2 15 Кнопки переключения
Рисунок 2.15. Кнопки переключения режимов отображения Web-страницы На Рисунок 2.15 крайняя правая кнопка нажата. Она включает режим отображения, предлагаемый Dreamweaver по умолчанию, — режим...
Рисунок 2 16 Режим отображения страницы и кода
Рисунок 2.16. Режим отображения страницы и кода Как видите, окно документа разделилось на две части. В верхней части отображается HTML-код нашей страницы, а в нижней — сама страница в режиме...
Рисунок 2 17 Режим отображения кода
Рисунок 2.17. Режим отображения кода Ну, а левая кнопка включает режим отображения кода (Рисунок 2.17). Для переключения режимов отображения вы также можете воспользоваться пунктами Design,...
Работа с кодом HTML
Работа с кодом HTML А теперь давайте выясним, какие средства Dreamweaver предлагает тем, кто знаком с языком HTML. Прежде всего, вы можете переключиться в режим отображения исходного кода HT...
Рисунок 2 18 Панель Code Inspector
Рисунок 2.18. Панель Code Inspector Пусть, например, нужно немного поправить значения атрибутов какого-либо тега. Для этого поставьте текстовый курсор в его содержимое и выберите в контекстно...
Рисунок 2 19 Окно миниредактора HTML
Рисунок 2.19. Окно мини-редактора HTML Как видите, окно мини-редактора позволяет вам править только теги, а не их содержимое. Исправить содержимое тегов можно и в окне документа. Если вам н...
Рисунок 2 20 Окно миниредактора при вставке нового тега
Рисунок 2.20. Окно мини-редактора при вставке нового тега Введите в окно мини-редактора весь код, который вы хотите вставить (Рисунок 2.21), и нажмите клавишу <Enter>. Он будет помещен...
Рисунок 2 21 Окно миниредактора
Рисунок 2.21. Окно мини-редактора с новым кодом HTML, который будет вставлен в страницу И, наконец, вы можете "завернуть" любой выделенный фрагмент текста в тег HTML. Для этого выде...
Внимание
Внимание Вообще-то существует еще пункт Quick Tag Editor меню Modify и кнопка в редакторе свойств, но лучше ими не пользоваться. По какому принципу они работают, знают, наверное, только п...
Рисунок 2 22 Диалоговое окно правки тега
Рисунок 2.22. Диалоговое окно правки тега Пользуясь этим окном и своим знанием английского, вы можете в удобной форме задавать значения различных атрибутов выбранного тега. В левом списке выб...
Рисунок 2 23 Панель Tag Inspector
Рисунок 2.23. Панель Tag Inspector...
Рисунок 2 24 Кнопка Edit <тег> Tag
Рисунок 2.24. Кнопка Edit <тег> Tag...
Рисунок 2 25 Кнопка Tag Chooser
Рисунок 2.25. Кнопка Tag Chooser С помощью другого диалогового окна вы можете поместить на страницу какой-либо тег или "завернуть" в него выделенный фрагмент текста. Для этого служи...
Рисунок 2 26 Диалоговое окно Tag Chooser
Рисунок 2.26. Диалоговое окно Tag Chooser Сразу после нажатия кнопки Insert на экране появится уже знакомое вам диалоговое окно правки тега, в котором вы сможете задать значения атрибутов выб...
