Macromedia dreamweaver 8, что это за программа

Обновлено: 21.11.2024

После того как вы настроили свой локальный сайт, вы можете начать наполнять его страницами. Для этого вам нужно создать страницу, дать ей название, добавить на страницу некоторый контент и сохранить ее. Чтобы проверить свою работу, вы должны просмотреть страницу в одном или нескольких веб-браузерах, прежде чем загружать ее на свой веб-сервер. К счастью, Dreamweaver позволяет легко просматривать вашу работу в разных браузерах. Эта глава поможет вам приступить к созданию веб-сайта в Dreamweaver.

Эта глава из книги

Эта глава из книги 

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

В этой главе мы также кратко обсудим, как добавлять текст, ссылки и изображения на свои страницы, хотя более подробно мы рассмотрим эти темы в главах 4, 7 и 8 соответственно.

Создание новой страницы

Первой HTML-страницей, которую вы создаете на новом сайте, должна быть индексная страница, т. е. страница, которую веб-браузер автоматически загружает, когда посетитель переходит на сайт. В зависимости от того, как вы называете страницы на своем сайте, индексная страница может иметь разные имена, но чаще всего она называется index.html. После того как вы создадите индексную страницу, вы захотите создать другие страницы для сайта.

Как вы увидите, в Dreamweaver часто бывает так, что существует несколько способов выполнить поставленную задачу. Вы можете создать новую страницу с помощью стартовой страницы или использовать диалоговое окно «Новый документ».

Использование стартовой страницы

Стартовая страница — это самый быстрый способ создать новую HTML-страницу. Оно появляется, когда вы закрыли все остальные окна документов.

Чтобы создать новую страницу из стартовой:

Рис. 3.1. Щелкните ссылки на стартовой странице, чтобы открыть последний элемент, создать новый элемент или создать новый элемент из образцов страниц Dreamweaver.

Рис. 3.2. Совершенно новая страница в Dreamweaver с представлением «Дизайн».

Вы также можете использовать стартовую страницу для открытия страниц, над которыми вы недавно работали. Просто нажмите на название элемента в разделе "Открыть последний элемент" на стартовой странице.
Нажатие кнопки ColdFusion или PHP на стартовой странице также создает HTML-страницу. Щелкнув CSS, вы создадите новую таблицу стилей CSS. При выборе любого другого варианта создаются документы, разработанные для разных языков веб-программирования, с которыми вы обычно работаете в режиме просмотра кода.
Если щелкнуть любой из элементов, перечисленных в разделе «Создать из образцов» на стартовой странице, Dreamweaver откроет диалоговое окно «Новый документ», в котором можно выбрать нужный образец страницы. См. раздел «Использование образцов страниц» далее в этой главе.
Если вы вообще не хотите использовать стартовую страницу, вы можете отключить ее в настройках Dreamweaver. Выберите «Правка» > «Настройки» («Dreamweaver» > «Настройки») и щелкните категорию «Общие». Затем снимите флажок "Показать стартовую страницу".

Использование диалогового окна «Новый документ»

Диалоговое окно «Новый документ» дает вам немного больше гибкости, чем Стартовая страница, при создании новых документов. Как и на стартовой странице, вы можете создать несколько различных типов новых документов, а также выбрать doctype нового документа.

Чтобы создать новую страницу из диалогового окна "Новый документ":

Рис. 3.3. Скорее всего, вы будете создавать большинство новых страниц из диалогового окна "Новый документ".

Рисунок 3.4. Вы можете выбрать один из доступных DTD в диалоговом окне "Новый документ".

Рис. 3.5. Изменение значений по умолчанию для новых страниц в категории «Новый документ» диалогового окна «Настройки» Dreamweaver.

Что скрывается за типом документа

Если вы не знакомы с doctype, это объявление в начале HTML-страницы, указывающее DTD (определение типа документа), которое используется для файла. Веб-браузеры используют объявление doctype, чтобы определить, как должна отображаться страница.

По умолчанию Dreamweaver 8 вставляет "XHTML 1.0 Transitional" doctype, и создаваемый код соответствует этому стандарту.

Несмотря на то, что это большая программа, установка Macromedia Dreamweaver 8 заняла всего несколько минут. После установки интерфейс Macromedia Dreamweaver 8 напоминает интерфейс MX 2004. Под рукой тот же знакомый дизайн и макеты кода в правой рабочей области, а также левые инструментальные палитры и нижнее окно свойств. Тем не менее, тонкие, но приятные изменения начинают проявляться, когда вы копаетесь в этой программе. Для начала, в отличие от предыдущих версий Dreamweaver, вы не привязаны к макету по умолчанию. В интерфейсе можно перетаскивать окна или сохранять и загружать настраиваемые макеты через меню «Окно». Dreamweaver 8 также представляет возможность просмотра файлов с вкладками в версии для Mac.

Macromedia Dreamweaver 8.0

Хорошее

Упрощенная интеграция XML и CSS; ролловеры и сворачиваемые представления кода; передача файлов в фоновом режиме; улучшенный предварительный просмотр.

Плохое

Новичкам в веб-дизайне этот инструмент может показаться сложным в использовании без предварительного изучения его функций; некоторые небольшие особенности интерфейса не были исправлены.

Итог

Быстрее, проще в использовании и мощнее, чем предыдущая версия, Dreamweaver 8 – достойный апгрейд для профессионалов, но любителям лучше использовать менее сложное приложение, такое как HomeSite.

Dreamweaver 8
Macromedia Dreamweaver 8 – это сложное приложение для веб-дизайна, которое лучше всего подходит профессионалам, добавляющим мультимедийные элементы и содержимое на основе баз данных на свои сайты. Интерфейс этого привлекательного обновления сложен, но хорошо организован, что смягчает большинство наших претензий к его предшественнику. Например, усовершенствования интерфейса позволяют увеличивать масштаб для детального просмотра страниц, направляющие линейки упрощают измерение элементов на странице, разделы кода теперь можно сворачивать, а вложение и цветовое кодирование упрощают идентификацию элементов CSS. Dreamweaver 8 также позволяет перетаскивать синдицированные XML-каналы. Но не всем понадобится все, что есть в Dreamweaver; дизайнерам-любителям следует придерживаться более простого программного обеспечения, такого как HomeSite или Microsoft FrontPage. Специалисты Adobe должны рассмотреть GoLive CS2, который хорошо интегрируется с Adobe Creative Suite 2. Тем не менее, низкая плата за обновление Dreamweaver 8 в размере 199 долларов США делает решение легким для нынешних профессиональных пользователей Dreamweaver MX 2004 или более ранних версий. Вы также можете купить Dreamweaver 8 в комплекте с Macromedia Studio 8 за 999 долларов – это обновление за 399 долларов США для существующих владельцев Studio.

Не знаете, с чего начать? Мастера в Dreamweaver помогут вам создать базовый или расширенный веб-сайт с нуля. В то время как опытные веб-специалисты сочтут этот процесс легким, новички в дизайне могут запутаться даже в базовых запросах, начиная с вопроса о серверной технологии.

После использования Dreamweaver 8 мы заметили многочисленные улучшения рабочего процесса. Если вы кодер, новая панель инструментов форматирования и сворачиваемый код станут настоящим подспорьем, позволяя отображать и скрывать отдельные разделы HTML и другого кода. Эта настройка обеспечивает гораздо более быструю навигацию, чем в Dreamweaver MX 2004, и позволяет получить обзор большого проекта. Однако складная функция не интуитивно понятна; вы должны выбрать код, который хотите свернуть, а не просто выделить заголовок раздела.

В представлении «Дизайн» теперь можно увеличить страницу для просмотра крупным планом. А направляющие выравнивания на линейках по краям экрана позволяют точно размещать элементы. Новый ручной инструмент позволяет переставлять объекты, не захватывая их тонкие границы. Dreamweaver 8 теперь группирует функции каскадных таблиц стилей на отдельной панели для облегчения доступа, с цветовой кодировкой и вложенными представлениями div.

Macromedia также улучшила внутренний механизм рендеринга Dreamweaver 8, чтобы ваш дизайн более точно отражал то, как страницы будут отображаться в веб-браузере, устраняя возможные проблемы с выравниванием. В наших тестах страницы дизайна точно имитировали то, что мы видели в Internet Explorer и Firefox.

Ни одно обновление не было бы полным без дополнительной мощности под капотом, и Macromedia добавила или улучшила поддержку почти всех веб-технологий, включая XML, CSS, PHP, WebDAV, ColdFusion 7 MX и, конечно же, Flash 8. Не хватает поддержка АЯКС. Macromedia исправила способ, которым Dreamweaver импортирует HTML-код из Microsoft Word и Outlook, более точно отображая документы без усечения таблиц или добавления других сбоев. Новая удобная функция «Специальная вставка» позволяет сохранить форматирование текста и таблиц.

Хотя пользователи широкополосного доступа могут этого не заметить, пользователи коммутируемого доступа оценят новую функцию фоновой передачи файлов; вы не будете тратить время на иконку занятости во время передачи файлов на ваш веб-сайт и обратно. Увы, по-прежнему невозможно передавать файлы, пока курсор находится в поле «Свойства» — одна из наших давних жалоб.

В подробном руководстве по началу работы с Macromedia Dreamweaver 8 инструкции адаптированы к вашему уровню навыков. Учебники подробные, хотя мы были бы признательны за дополнительные скриншоты или анимацию. Dreamweaver 8 включает в себя обширный файл справки, а также доступ к превосходному онлайн-центру поддержки с хорошо написанными часто задаваемыми вопросами и учебными пособиями, а также к бесплатным форумам, где вы можете общаться с другими пользователями. Но поддержка по телефону может дорого обойтись в спешке, поэтому мы рекомендуем вам прочитать руководство, прежде чем звонить. Macromedia позволяет вам позвонить в службу технической поддержки по поводу четырех инцидентов, связанных с началом работы, но через 90 дней у вас останутся цены, которые смутят Дональда Трампа: один инцидент стоит 99 долларов США, а планы расширенной поддержки начинаются с 449 долларов США в год.

Macromedia Dreamweaver позволяет разрабатывать и развертывать веб-сайты в соответствии с передовыми методами разработки. Как и в случае с любой парадигмой программирования, рекомендуется разрабатывать файлы в среде, отдельной от которой может получить доступ пользователь. Это позволяет разработчикам вносить изменения в сайт без простоев и проводить полное тестирование перед развертыванием новых файлов. Эта глава поможет вам работать с веб-страницей в локальной среде.

Из книги

В ЭТОЙ ГЛАВЕ

Создание сайта Dreamweaver

Использование панели файлов

Согласно рекомендациям, создавать веб-страницы можно в следующих трех средах:

Сервер разработки, на котором только разработчики веб-сайтов имеют доступ к страницам. Эти страницы часто находятся в стадии разработки.
Промежуточный или тестовый сервер, на котором члены группы контроля качества могут протестировать страницы, гарантируя, что страницы не изменятся в процессе тестирования.
Производственный сервер, на котором пользователи могут просматривать конечный веб-сайт.

Dreamweaver поддерживает создание всех трех типов сред. Все начинается с определения вашего сайта.

Создание сайта Dreamweaver

В Dreamweaver термин сайт относится к расположению файлов и подпапок веб-сайта. Он может ссылаться либо на работающий веб-сайт, либо на локальное хранилище копий файлов, принадлежащих веб-сайту. Для создания страниц в среде разработки рекомендуется создать локальный сайт, хотя это и не обязательно.

Локальный сайт в Dreamweaver – это просто папка на жестком диске, в которой будет выполняться разработка веб-сайта. Этот каталог верхнего уровня также известен как корневой каталог.

Организация папок

При планировании веб-сайта уделите время разработке иерархии папок. Некоторые подпапки, которые вы можете захотеть определить в своей корневой папке, включают следующее:

Папка, возможно, для каждого раздела вашего веб-сайта, в соответствии с вашей основной панелью навигации.
Одна папка /images для хранения изображений для всего сайта или папка /images в папке каждого раздела.
Папки для других типов файлов объектов, таких как Flash-ролики, звуки или видео.

Вы можете создать эту иерархию папок вне Dreamweaver и установить ее в качестве своего локального сайта или определить локальный сайт и использовать Dreamweaver для создания вложенных папок.

Управление сайтами

Для управления сайтами в Dreamweaver выберите «Сайт» > «Управление сайтами». Диалоговое окно «Управление сайтами» позволяет выполнять следующие операции:

Создать новый сайт
Изменить существующий сайт
Повторяющийся сайт
Удалить сайт
Экспорт сайта
Импорт сайта

Если у вас есть определение сайта, аналогичное другому сайту, который вы хотите создать, вы можете выбрать этот сайт и создать дубликат, нажав кнопку Дублировать. Затем вы можете изменить определение сайта, например перенаправить в новую локальную корневую папку.

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

Создание нового сайта

Вы можете создать новый сайт двумя способами:

Выберите «Сайт» > «Управление сайтами», а затем выберите «Создать» > «Сайт».
Выберите «Сайт» > «Новый сайт».

При нажатии кнопки "Создать" вы получите два варианта создания сайтов:

Сайт
FTP (протокол передачи файлов) и RDS (службы удаленной разработки)

Второй вариант, FTP и RDS, позволяет обойти создание сайта Dreamweaver, чтобы подключиться к удаленному серверу и быстро изменить файлы. При создании нового сайта вы сможете настроить свой сайт Dreamweaver в появившемся диалоговом окне «Определение сайта» в базовом или расширенном режиме.

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

В таблице 3.1 показаны свойства определения локального сайта в расширенном режиме.

Таблица 3.1. Настройки локального сайта

НАСТРОЙКА

ОПИСАНИЕ

Это должно быть уникальное имя, значимое для вашего веб-сайта. Он не отображается в браузере и используется только для справки.

Локальная корневая папка

Укажите папку на жестком диске, в которой будут храниться файлы сайта, шаблоны и элементы библиотеки. Если локальная корневая папка еще не существует, ее можно создать с помощью диалогового окна просмотра файлов.

Автоматическое обновление списка локальных файлов

Этот параметр указывает, следует ли автоматически обновлять список локальных файлов каждый раз, когда вы копируете файлы на локальный сайт. Отмена выбора этого параметра приводит к повышению производительности при добавлении файлов, но. затем вам придется вручную обновить панель «Файлы».

Папка изображений по умолчанию

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

Значение этого атрибута содержит URL-адрес, который будет использоваться вашим готовым веб-сайтом, чтобы Dreamweaver мог проверять ссылки на сайте, использующие абсолютные URL-адреса.

Этот параметр указывает Dreamweaver, что все операции проверки ссылок должны сравнивать ссылки с использованием точного регистра.

Укажите, следует ли создавать локальный кэш для повышения скорости выполнения задач управления ссылками и сайтами (например, использования карты сайта). Если вы не выберете этот параметр, Dreamweaver спросит вас, хотите ли вы снова создать кеш, прежде чем он создаст сайт. Рекомендуется выбрать этот параметр, поскольку панель «Ресурсы» работает только в том случае, если создан кэш.

Дополнительную информацию о панели «Ресурсы» см. в главе 11 «Ресурсы сайта».

В диалоговом окне "Определение сайта" вы также можете указать удаленный сайт, который представляет собой предполагаемый рабочий сервер, и путь к файлу, используемый для рабочего веб-сайта.

Дополнительную информацию об удаленных узлах см. в главе 17 "Передача файлов на удаленные серверы".

Корневые ссылки — это ссылки на файлы и ресурсы, относящиеся к корневому каталогу вашего веб-сайта. Если в документах используются ссылки, относящиеся к корневому каталогу, Dreamweaver будет использовать параметр «Локальная корневая папка» для разрешения ссылок, относящихся к корневому каталогу.

Преимущества локального сайта

Dreamweaver позволяет создавать отдельные веб-страницы, но объединение этих страниц в локальный сайт дает много преимуществ, в том числе:

После нескольких лет использования Dreamweaver Мэтью Дэвид в восторге от новых функций последней версии для дизайнеров и разработчиков. В этой статье он рассказывает о своих новых фаворитах.

Понравилась эта статья? Мы рекомендуем

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

Несмотря на то, что Dreamweaver 8 прочно построен на фундаменте, заложенном в Dreamweaver MX 2004, в предстоящем выпуске Macromedia сосредоточилась на четырех ключевых областях:

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

Улучшения для дизайнеров

В Dreamweaver 8 представлены инструменты, о которых дизайнеры мечтали в течение многих лет, в том числе сетки, направляющие и инструмент масштабирования, который я запросил еще после выпуска оригинальной версии Dreamweaver. Впервые вы можете увеличить часть страницы, над которой работаете, и просмотреть — с точностью до пикселя — правильно ли вы строите свой дизайн. Инструмент «Масштаб» является стандартной функцией большинства графических приложений, таких как Fireworks, Illustrator и Quark. Теперь он доступен и в Dreamweaver.

Компания Macromedia давно активно поддерживает каскадные таблицы стилей (CSS). Изначально Dreamweaver поставлялся со сторонними продуктами, такими как TopStyle от Bradbury Software, для удовлетворения потребностей передовых дизайнеров в CSS. В Dreamweaver MX Macromedia предложила более агрессивную поддержку CSS. Dreamweaver 8 делает еще один шаг вперед, предоставляя дизайнерам новую панель CSS, которая позволяет легко получить доступ к любому формату CSS. Включение этой панели, основанной на существующих инструментах, делает невозможным для вас не использование CSS.

Усовершенствования CSS распространяются не только на панель CSS, но и на реальную среду разработки страницы. Представление «Дизайнер» было значительно улучшено, чтобы сделать вашу работу с CSS еще проще. Теперь вы можете просматривать сложные макеты CSS с разными цветами и границами. Выберите любой из регионов CSS, чтобы увидеть всплывающую справку, объясняющую каскад стилей, применяемых к этому конкретному региону. Когда вы вносите изменения в CSS в Dreamweaver 8, проверяйте, что было изменено; вы будете удивлены тем, как быстро вы освоите CSS по мере того, как будете учиться на практике.

Dreamweaver также значительно расширил возможности точного отображения элементов CSS, таких как псевдоэлементы или элементы управления модификацией формы, без необходимости предварительного просмотра дизайна в веб-браузере.

Почему все внимание уделяется CSS? По одной причине, с помощью CSS легче управлять специальными возможностями, чем с помощью более старых опций макета, таких как тег FONT. Во-вторых, почти все браузеры поддерживают CSS, включая Internet Explorer 3 и выше, Netscape 4 и выше, Opera, Safari и Firefox. Если вы разрабатываете сайты, не поддерживающие CSS, остановитесь! Dreamweaver 8 предоставляет инструменты, средства управления и простоту использования для перехода к превосходному управлению макетом. Наконец, современный клиентский интерфейс, основанный на AJAX, требует сложных интерфейсов, созданных с помощью CSS.

Сегодняшний мир веб-дизайна меняется по сравнению с опытом, который нас просили рассмотреть пять лет назад. Компьютеры больше не являются единственной областью работы ваших клиентов в Интернете. Мы используем сотовые телефоны, передовые телевизионные системы и различные беспроводные устройства для подключения к Интернету. Буквально на прошлой неделе мой друг бродил по Интернету на своей Sony PSP (да, я тоже думал, что это прикольно). Реальность такова, что мир веб-дизайна существует не только для компьютеров. Dreamweaver снова приходит к вам на помощь с панелью инструментов Style Rendering. Эта новая функция точно представляет ваш новый дизайн в том виде, в котором он будет отображаться в веб-браузере, на портативном компьютере или в распечатанном виде.

Читайте также: