Содержание Стр. Введение 2 Обзор Dreamweaver MX 4 Работа с текстом 7 Панель Вставить 7 Меню Основное 7 Меню Расположении 8 Меню Текст 8 Меню Таблицы 9 Меню Фреймы 9 Меню Формы 9 Меню Шаблоны 11 Меню Символы 13 Меню Медиа 13 Меню Заголовок 14 Меню Скрипт 15 Сценарии 16
Анимация 17 Достоинства Dreamweaver 17 Недостатки Dreamweaver 18 Заключение 18 Системные требования 19. Введение. В наше время профессия Web-дизайнера стала массовой почти каждая фирма и даже фирмочка имеет свое представительство в Интернете, авторам новых продуктов или технологий трудно рассчитывать на успех беи массированной рекламы в сети. Этот мощный социальный заказ породил целую индустрию средств
Web-проектирования и программирования. Американская софтверная фирма Macromedia Inc точно уловив тенденции рынка, сделала ставку на развитие программных средств, ориентированных на различные секторы Web-дизайна и электронной коммерции. Ее успехи, достигнутые за последние несколько лет, впечатляют. Многие продукты фирмы заняли лидирующие позиции в своих отраслях, а некоторые из них можно считать
флагманами, определяющими направления и тенденции развития программного обеспечения данного класса. К числу таких, редких в наше время примеров принадлежит программа Dreamweaver. Система Dreamweaver это визуальный редактор гипертекстовых документов. Эта формулировка не способна точно передать существо дела. Мощная профессиональная программа Dreamweaver обладает всеми необходимыми средствами для генерации
страниц HTML любой сложности и масштаба. Она обеспечивает режим визуального проектирования WYSIWYG или What You See Is What You Get что ты видишь, то ты и получишь отличается очень чистой работой с исходным текстом Web-документов, обладает встроенными средствами поддержки больших сетевых проектов. Ни в одном из существующих в наше время редакторов концепция WYSIWYG не реализована полностью. Программа Dreamweaver подошла к декларируемому идеалу ближе конкурентов. Прямая работа с кодами не исключена полностью, но сведена к разумному минимуму. Программа не только обладает мощным арсеналом средств визуального проектирования, но и способна отображать Web-страницы почти как специализированные программы просмотра Microsoft Internet Explorer или Netscape Navigator. Уже первая версия программы привлекла внимание специалистов своими большими функциональными возможностями,
а также устойчивой и быстрой работой. С каждой новой версией расширялся потенциал редактора и отрабатывалось его программное ядро. Все издания Dreamweaver отмечались компьютерными специалистами, занимали ведущие позиции в рейтингах и обзорах ведущих компьютерных изданий, имели большой коммерческий успех. В 2003 году вышла шестая MX версия программы. Теперь только инерция заставляет называть этот продукт программой. По сути дела, это развитая среди Web-проектирования, и которую интегрировано несколько программных
средств и модулей, обеспечивающих весь операционный цикл разработки и поддержки виртуальных проектов. На данный момент существует множество программ, с помощью которых можно создать собственную web-страницу, не вникая во все тонкости интернет технологий и стандартов. Но Macromedia Dreamweaver MX одна из самых мощных программ, поддерживающих все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач.
Кроме того, она содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе. По иронии судьбы, Dreamweaver задвинут в тень своего более раскрученного собрата Microsoft FrontPage, но он не заслужил своей участи. Macromedia Dreamweaver достаточно старый пакет. Первая его версия была разработана еще в 1998 году и получила популярность в России благодаря благосклонности к русскому языку и снисходительному отношению к множеству русскоязычных кодировок. Программа Dreamweaver основана на принципах открытой архитектуры. Это значит, что полностью открыт интерфейс прикладного программиста Application Programming Interface, API, с помощью которого сторонние программисты и софтверные фирмы могут выполнить радикальные изменения функциональных возможностей программы и ее интерфейса добавить
новый инструмент, создать панель или раздел меню, запрограммировать новый объект или мультимедийный ролик и пр. Можно сказать, что в настоящее время вокруг системы Dreamweaver сложилась целая индустрия по разработке программных дополнений и расширений. Фирма Macromedia создала специальный сайт для рекламы и распространения этих средств. К этому моменту, число зарегистрированных и сертифицированных дополнений приближалось к четырем сотням.
Современные сайты представляют собой сложноструктурированные гетерогенные документы с динамическим контентом и интерактивными эффектами. Один, даже самый, как сейчас принято говорить, продвинутый редактор HTML не способен удовлетворить все потребности Web-дизайнера, Авторам гипертекстовых страничек приходится прибегать к услугам многочисленных программ и программных дополнений, предназначенных для работы с графикой, создания анимаций, загрузки содержимого узла на удаленный
сервер и другое. Пользуясь спортивной терминологией, можно сказать, что программа Dreamweaver – командный игрок. Она прекрасно взаимодействует со всеми программами, которые фирма Macromedia позиционирует на рынке средств разработки и поддержки сетевых проектов. Это, прежде всего, векторный редактор Flash, с которым система Dreamweaver образует хорошо наигранную связку, и непосредственный партнер растровый редактор Fireworks. Обзор Dreamweaver MX Интерфейс программы по сравнению с предыдущими версиями претерпел изменения. Новый стиль заметно облегчает работу с программой. Если в предыдущих версиях программы приходилось постоянно переключатся между окнами, что создавало дополнительные неудобства, то теперь можно одновременно работать и с кодом и с конечным видом сайта, что существенно облегчает работу. Исчезли панели, загромождающие экран, теперь вместо них в правой
части экрана появилась удобная панелька докеров, играющих роль своеобразных закладок, раскрывающих соответствующие меню. Кроме того, в любой момент можно спрятать и сами докеры, а затем с той же легкостью вернуть их обратно. Таким образом, удалось сохранить всю функциональность и при этом не загромождать рабочее пространство. Плюс появилась возможность собирать и свои панели команд. Работа в Dreamweaver MX теперь доставляет одно удовольствие – многочисленные меню, редактор тегов,
автодополнение, настраиваемая подсветка кода, настраиваемые шрифты для тегов, скриптов. В нижней части документа расположена строка состояния. Многие windows- приложения используют строку состояния для отображения нужной информации. Но строка состояния в Dreamweaver не только отображает такую информацию, но и выполняет несколько очень важных функций. Она разделена на три секции. Слева расположена секция тегов, занимающая большую часть
строки. С помощью этой секции можно выбрать фрагмент текста, помеченный тем или иным тегом. К примеру, если выделить какой-нибудь текст, то на этой секции появятся несколько кнопок, соответствующие тегам внутри этого текста и если нажать на одну из кнопок, то выделится соответствующий текст, помеченный этим тегом. Секция для тегов- мощнейший инструмент для правки страницы. Правее находится вторая секция, отображающая размер окна в пикселях. Если щелкнуть на ней мышью, то на экране появится меню список размеров окна. Каждый размер соответствует какому-либо разрешению экрана, который может установить пользователь на своем компьютере. Самая правая секция показывает примерный размер созданной страницы и время, в течение которого она будет загружаться, причем можно выбрать скорость соединения от 14,4 Кбс до 1500 Кбс. Окно документа Dreamweaver может показывать редактируемую web- страницу в трех режимах
отображения в режиме код, где виден только исходный код, в режиме дизайн, где видна только отображаемая страница, а также код и дизайн, где документ разделяется на две части. Кроме того, создатели предусмотрели возможность исходного кода в панели code inspector, не прибегая к окну в режиме код. Во многих случаях этого хватает. Однако часто бывает нужно отредактировать фрагмент кода страницы, держа ее перед глазами.
Для этого предусмотрен так называемый мини-редактор HTML. Пользуясь мини-редактором можно править атрибуты выбранного тега, вставлять код HTML в любое место текста и это все без переключения в режим отображения кода. Вызвать его можно правым кликом по нужному тексту, и выбрать пункт Редактировать ко тега тег . Но окно редактора позволяет править только теги, а не их содержимое.
Исправить их содержимое можно в окне документа. Если нужно вставить в текст web- страницы какой- либо тег с содержимым, то нужно выбрать Вставить Тег. Появится окно редактора, но на этот раз пустое. Также существует кнопка быстрый редактор тегов. Также можно удалить тег, не затрагивая сам текст. Для этого надо выбрать Удалить Тег. Для тех, кто не очень хорошо знаком с языком HTML, существует мощная система справки. Если выделить целиком содержимое какого-нибудь тега и выбрать пункт Редактировать тег тег . На экране появится диалоговое окно правки тега. В этом окне можно в удобной форме задавать значения различных атрибутов выделенного тега. При выборе в левом списке одной из категорий атрибутов, в правой части окна появляются соответствующие элементы управления. Кроме того, в нижней части окна находится полезная справка по выделенному тегу. Можно воспользоваться панелью Инспектор тега. В верхней части панели располагается иерархический список
всех тегов в web- странице, наподобие проводника в Windows. В нижней части панели располагается список атрибутов выбранного в списке тега и их значений. Нужно только выбрать тег, исправить значение в нижнем списке и наблюдать, как в окне документов тут же отображаются все изменения. С помощью диалогового окна Выбор тега можно поместить на страницу какой- либо тег или завернуть в него выделенный фрагмент текста.
В иерархическом списке тегов, расположенных слева, можно выбрать категорию тегов. После выбора нужной категории тегов, в правом списке появятся все теги, относящиеся к этой категории. Остается только выбрать тег и вставить его в страницу. Сразу после этого появится диалоговое окно правки тега, в котором можно задать значения атрибутов выбранного тега. В нижнем окне так же как и в окне Редактора тега, снизу располагается справка по каждому тегу.
В составе Dreamweaver, помимо стандартной справки, также поставляется полное руководство по HTML, CSS и Java Script от издательства O Relly. Пользуясь панелью Сноска можно получить исчерпывающую информацию о каждом атрибуте любого тега HTML. Практически все текстовые редакторы предоставляют пользователю возможность найти нужный фрагмент текста и при необходимости заменить его другим. Разумеется, Dreamweaver тоже поддерживает эту возможность. И не просто поддерживает, а возносит ее на новую высоту. В окне поиска можно задать, в каком тексте нужно произвести поиск в исходном коде, в тексте страницы, но более хитрым способом, или в тексте заданного тега. В первых двух вариантах искомый текст вводится в текстовое поле поиск для, а текст, который нужно заменить – в заменить на. Если же выбрать пункт текст расширенный, то в окне поиска и замены добавится новая
группа элементов управления, состоящая из двух кнопок и двух раскрывающихся списков, позволяющих задать, внутри какого тега будет икаться тот или иной текст. Но самые мощные возможности Dreamweaver предоставляет для поиска и замены тегов, с многочисленными дополнительными настройками. Кроме того, параметры поиска можно сохранять в отдельный файл. Хотя Dreamweaver в режиме показа страницы и представляет ее почти в таком виде, как она будет показана
в web- обозревателе, часто возникает необходимость увидеть ее в самом web- обозревателе, ведь Dreamweaver не может учесть многие тонкости конкретной программы просмотра. И такая возможность предусмотрена не закрывая окно документа, можно вызвать любой из установленных на компьютере web- обозревателей и оценить окончательный вид страницы. Microsoft Internet Explorer и Netscape Navigator, установленные на компьютере,
Dreamweaver обнаруживает и заносит в свои настройки сам, сразу после инсталляции. Кроме того, есть возможность самому изменить настройки и занести свой web- обозреватель. Также можно добавить свой собственный HTML- редактор. В Dreamweaver MX появилась возможность создания web- страниц на основе шаблонов, но в этом он проигрывает своему главному конкуренту от Microsoft. Правда, есть возможность создания своих собственных шаблонов и возможность загрузить новые шаблоны из интернета. Работа с текстом. В Dreamweaver можно форматировать текст, не прибегая к редактированию тегов. Для этого достаточно ввести текст и в визуальном дизайне страницы выбрать тест, щелкнуть правой кнопкой мыши и в появившемся меню выбрать формат абзаца, тип списка, сторону выравнивания, шрифт, стиль или выбрать из шаблона. Там же можно сделать из текста гиперссылку.
Все эти пункты меню находятся внизу, в панели свойства. Кроме того, в этой панели можно задать цвет текста. Также в Dreamweaver находится встроенная проверка орфографии. Панель вставить. В верхней части окна находится очень удобная панель вставить, выполненная в виде дока, ее стоит рассмотреть поподробнее. Меню основное. Первое меню основное предоставляет возможность вставки
гиперссылок. Для ссылки на другие адреса. После нажатия на эту кнопку или перетаскивания ее в нужное место на странице, появляется меню, где следует выбрать текст ссылки, ввести адрес или выбрать документ на жестком диске. Выбрать цель blank- новое пустое окно программы просмотра, parent- родительский фреймовый документ текущего фрейма, self-текущий фрейм, top- внешний документ текущего фрейма без разбиения на составные части и заголовок ссылки. Следующая кнопка создает ссылку на
E-mail. В появившемся меню необходимо написать текст ссылки и e-mail адрес. Следующая кнопка создает якорь. Якорь нужен для ссылок внутри страницы. Четвертая кнопка создает таблицы. В диалоговом окне можно выбрать ширину, высоту, количество колонок, столбцов, номер таблицы, размер рамки и выравнивание в длину, или в ширину. После создания таблицы появляется еще одно окно с вводом имени, заголовка и типом выравнивания. Следующая кнопка позволяет рисовать слои для свободно позиционируемых элементов. Шестая по счету кнопка вставляет изображение. После выбора рисунка в диалоговом окне открыть, появляется окно с вводом альтернативного текста и описания. Причем, изображение можно выбрать как из какого-нибудь места, так и из исходных данных. В нижней панели свойства можно задать имя рисунка, ширину, высоту, вертикальный пробел, горизонтальный пробел, задать ссылку на адрес, вставить другое изображение, выбрать
нижнее оно заменит исходное после клика на него, выбрать цель, отредактировать во внешнем редакторе, выровнять, задать размер рамки и сбросить размеры рисунка. Следующая кнопка создает изображение- заполнитель. Восьмая и девятая импортирует объекты из Macromedia Fireworks HTML и Macromedia Flash соответственно. Кнопка изображение прокрутки вставляет два рисунка,
исходный и изображение, прокрутки, которые сменяют друг друга при наведении мышки, а по клику переходит на сайт, заданный пользователем. Кнопка панель навигации служит для создании колонки или строки гиперссылок, оформленных в виде изображений. В списке элементы перечислены все элементы полосы навигации, которые уже имеются. Можно выбрать один из элементов и изменить его свойства или создать новый. В поле ввода имя элемента вводится имя. В поле верхнее изображение вводится имя файла изображения,
отображаемое в обычном случае. В поле ввода изображение поверх вводится имя файла изображения, отображаемого, когда пользователь помещает курсор мыши. Нижнее изображение имя файла после нажатия мыши, а в поле изображение сверху вниз имя файла изображения нажатой гиперссылки, над которой пользователь поместил курсор. Возле каждого поля ввода находится кнопка обзор. В поле альтернативный текст – вводится альтернативный текст. К сожалению, в этом окне, Dreamweaver некорректно отображает русские буквы, поэтому приходится либо вручную править код HTML, либо писать альтернативный текст по-английски. В поле ссылка вводится адрес гиперссылки, а список в – позволяет выбрать, в каком окне будет открыта ссылка. В опции показать нижнее изображение вначале сначала грузится изображение нажатой кнопки, а флажок preload image указывает Dreamweaver создать код, заставляющий web- обозреватель загружать заранее все
изображения, задействованные в полосе навигации и кэшировать их. Благодаря чему, постановка нужных изображений будет происходить мгновенно, не дожидаясь загрузки с сайта. После создания полосы навигации, можно посмотреть на HTML- код и увидеть, как много работы проделал Dreamweaver. Здесь пришлось проделать достаточно много работы сформировать таблицу, разместить в ней все указанные
графические изображения, превратить их в гиперссылки и главное – написать сценарии, которые будут ими управлять. Двенадцатая копка – горизонтальная линейка. Создает горизонтальную линейку. В поле свойства можно задать длину, ширину, указать единицу измерения пиксели или проценты, выровнять, а еще выбрать наличие тени. Кнопка дата – позволяет вставить дату. В появившемся меню остается указать формат дня, времени, даты
и выбрать флажок обновить автоматически при сохранении. После даты идет табличные данные, с указанием файла с табличными данными. Затем комментарий, создающий строку, которую видно только в HTML- коде и, последняя кнопка- выбор тега, рассматривавшаяся выше. В каждом меню, помимо основных кнопок, расположена кнопка помощи.
Меню расположение. В меню расположение можно переключатся между стандартным видом и видом размещения. Эти опции доступны только в окне дизайн. В стандартном виде можно либо вставить таблицу, либо нарисовать слой, а виде размещения нарисовать таблицу или ячейку. Меню текст Меню текст, предназначено для форматирования выбранного участка текста. Здесь можно выбрать редактор шрифта тегов – редактор тега font . В появившемся меню нужно задать шрифт, цвет, размер, стиль, направление, язык. Существует возможность импорта своих шрифтов. Кнопка жирный делает выбранный текст жирным, курсив – курсивом, сильный сильным и выразить, соответственно, выраженным, внешне схожим с курсивом. Следующая три кнопки – это абзац, то есть форматированный текст, Блок в кавычках, форматированный текст, отображаемый точно также как и в коде, правда, равноширинной.
Далее идет заголовок первого уровня, второго и третьего. Затем список, упорядоченный список, элемент списка, список определения и описание определения. После создания списка, в панели свойства можно изменить тип списка, его отображение и стиль. Последние две кнопки делают из текста аббревиатуру и акроним. В появившемся меню останется ввести полный текст и язык.
Меню таблицы Самая первая кнопка меню создает таблицу, аналогично кнопке вставить таблицу, меню основное. Остальные пять кнопок служат только для вставки тегов тег таблицы, ряд таблицы, заголовок таблицы, данные таблицы, заголовок таблицы. Затем, в панели свойства, можно изменить настройки таблицы. Выбрать тип выравнивания слева, по центру, справа или стандарт. Как правило, стандарт- это выравнивание слева. Также можно задать ширину, высоту, фоновый рисунок,
фоновый цвет, цвет рамки, задать перенос текста и сделать ячейку титульной. Меню фреймы C помощью этой панели можно создать фреймы. На выбор предлагается левый фрейм, правый фрейм, верхний фрейм, нижний фрейм, нижний и вставленный слева фрейм, нижний и вставленный справа фрейм, левый и вставленный снизу фрейм, правый и вставленный снизу фрейм, верхние и нижние фреймы, левый и вставленный сверху фрейм, правый и вставленный сверху фрейм, верхний и вставленный слева фрейм, сверху и вставленный справа фрейм. Оставшиеся три кнопки вставляют тэги набор фреймов, фрейм, плавающий фрейм и последний – нет фрейма. Справа, в наборе панелей, есть док, отображающий схематичное расположение фреймов под названием продвинутый вид. С помощью этой панели можно удобно выделять нужный фрейм или его границу, для изменения его свойств. В панели свойства можно изменить исходный файл фрейма, задать прокрутку, увеличить или уменьшить длину
и ширину фрейма. Изменить цвет и показ рамки. В свойствах границы фрейма можно изменить ширину рамки и размер самого фрейма. Меню формы С помощью меню можно создавать регистрационные формы, формы для опроса и т.д. Первая кнопка создает пустую форму. Созданная форма отображается в окне дизайна в виде красной рамки. К сожалению, выделение формы никак не отображается на экране, что усложняет работу с формами. В поле ввода имени формы вводится имя самой формы.
В поле действие вводится интернет – адрес серверной программы, которая будет обрабатывать форму. В комбинированном списке цель, задается место, куда будет выводиться web- страница, сгенерированная серверной программой. Метод пересылки задается с помощью ниспадающего меню метод POST, где форма приходит по E-mail, GET, когда форма отправляется на сервер и DEFAULT, обычно это POST. Следующие кнопки создают элементы формы.
Это текстовое поле, самый популярный элемент управления в форме. В поле textfield, панели свойства, вводится уникальное имя элемента управления. В поле ширина символа задается ширина поля ввода, его горизонтальный размер в символах. В поле максимум задается максимальное количество символов, которое может быть введено в созданное на web- странице поле ввода. Это число может быть больше, чем ширина символа в этом случае содержимое поля ввода будет прокручиваться по горизонтали. В начальное значение вводится начальный текст, отображаемый при загрузке страницы. Группа переключателей тип, задает тип поля ввода это либо поле ввода в одну строчку, либо многострочное, либо поле ввода пароля. В последнем случае, вводимых символов не будет видно. С помощью раскрывающегося списка перенос задается, как область редактирования будет выполнять перенос текста и в каком виде этот текст будет отправлен серверной программе.
Скрытое поле- это особый элемент управления, не отображаемый в web- странице. Значение, изначально присвоенное этому полю не может быть изменено посетителем сайта. Это своего рода тайные данные, спрятанные в форме и недоступные посетителю. В поле hiddenfield вводится уникальное имя, в поле значение вводится значение. Четвертая кнопка создает область текста, точно также, как и текстовое поле, с измененным типом на многострочное.
Следующая группа трех кнопок создает важные элементы формы флажок, радиокнопка, радиогруппа. Свойства всех трех элементов управления схожи между собой это уникальное имя, значение кнопки и начальное состояние. Радиогруппа отличается от других тем, что при создании появляется меню, где можно создать и удалить радиокнопку в группе, задать каждой кнопке свое имя и выбрать тип расположения разрывами или таблицей. Кнопка списокменю создает список или ниспадающее меню, в зависимости от того, что выберет
пользователь в панели свойства. Также в свойствах можно задать высоту списка, выделение одно или несколько, а нажатием на кнопку список значений – вызвать меню, в котором можно вставить или удалить элементы списка. Следующая кнопка меню перехода, действует по тому же принципу, что и списокменю. Отличие составляет в том, что при выборе одного из пунктов меню, web- обозреватель переходит на ссылку. После клика на кнопку меню перехода, появляется меню, где можно создать или удалить пункт меню, написать адрес ссылки, выбрать цель или вставить кнопку для перехода. После создания меню, Dreamweaver записывает скрипт, позволяющий переходить. Но иногда из-за какой-то ошибки он не создается. Десятая кнопка- поле изображения. При нажатии этой кнопки вызывается диалоговое окно, в котором следует указать имя файла изображения. Поле изображения – это обычное графическое изображение, по совместительству выполняющее роль отправки
данных на сервер при клике. В поле ввода imagefield вводится уникальное имя, в поля ш. в. вводятся ширина и высота, в поле ввода src вводится адрес изображения, в поле alt альтернативный текст. Ниспадающее меню выровнять указывает, каким образом кнопка будет выравниваться относительно окружающего ее содержимого страницы. Кнопка edit image открывает картинку во внешнем редакторе, задаваемым пользователем. Поле файла. Иногда может понадобится отправить на сервер файл, этому способствует кнопка поле файла.
Единственное условие данные должны быть закодированы с использованием кодировки multipartform-data и отправлены с помощью POST. Поле ввода имени файла представляет собой поле ввода с кнопкой обзор справа. Из всех свойств доступны только ширина символов и максимальная длина символа. Следующая кнопка с названием кнопка создает кнопку. Кнопка служит для отправки формы или ее сброса. В поле ввода имя кнопки вводится уникальное имя кнопки,
в поле метка- текст, отображаемый на кнопке. С помощью группы переключателей задается действие, происходящее при нажатии на кнопку. Всего есть три действия отправить форму, сбросить форму замена данных начальным значением и не выполнять никаких действий. Последние две кнопки – это дополнительные элементы управления. Они служат не для ввода данных, а для удобства посетителя страницы. Они поддерживаются только Internet Explorer v5.0 и выше, Netscape Navigator v5.0 и выше, а также все версии Opera и Mozilla. Метка. Метка- это текстовая подпись, добавляемая к элементу управления. Для добавления метки к элементу, достаточно выделить его и щелкнуть кнопку метка. Автоматически откроется окно HTML- кода, где Dreamweaver поместит элемент в метку и останется ввести только текст метки. Набор поля – Это простой прямоугольник, объединяющий несколько элементов управления
и имеющий текстовую метку. Меню шаблоны. Шаблон- это своеобразный образец web- страницы, содержащий общие для всех страниц элементы. При создании новой страницы на основе шаблона, все что остается, это только вписать в нужные места уникальное содержимое этой самой страницы и сохранить ее. Впоследствии можно изменить шаблон и Dreamweaver сам обновит все созданные на его основе страницы. Изначально изменить шаблон нельзя, то есть когда во время создания на его основе страницы, помещать
содержимое можно только в специально отведенных для этого местах – изменяемых областях. Элементы самого шаблона редактировать нельзя, так как они являются неизменяемыми областями. Для того, чтобы что-то исправить, придется открыть в окне документа сам шаблон. Таким образом, Dreamweaver спасает пользователя от ошибочного изменения шаблона и, соответственно, от искажения созданных на его основе web- страниц.
Шаблоны сохраняются в файлах с расширением dwt в папке templates, находящейся в корневой папке локальной копии сайта. Из этого следует, что шаблоны неотъемлемая часть сайта. Вместе с Dreamweaver поставляется много шаблонов, созданных профессиональными web- дизайнерами. Ими можно воспользоваться для создания страниц. Но все же в этом Dreamweaver проигрывает Front Page. В Dreamweaver эти шаблоны несколько примитивны, просты и похожи друг на друга, однако, существует возможность загрузки новых шаблонов с сайта Macromedia. Есть два способа создать шаблон Dreamweaver. Во-первых, его можно создать с нуля, а потом заполнить содержимым, как обычную web-страницу. Во-вторых, существующую страницу можно сохранить как шаблон, а потом отредактировать, удалив полезное содержимое и оставив только общие элементы. И то и другое сделать одинаково легко.
В Dreamweaver MX появились новые, весьма полезные возможности поддержки шаблонов. Можно сделать некоторые атрибуты любых тегов HTML- кода шаблона изменяемыми. К примеру, можно менять цвет фона тех или иных страниц или цвет какой-нибудь надписи. После выбора пункта меню сделать шаблон изменяемым появится диалоговое окно editable tag attributes. В раскрывающемся меню атрибут необходимо выбрать изменяемый атрибут.
Чтобы выбрать атрибут изменяемым, надо включить флажок сделать атрибут изменяемым, после этого станет доступной группа элементов управления, находящаяся ниже. В поле метка вводится имя созданного изменяемого атрибута. Раскрывающийся список тип задает тип значения атрибута. В нем доступно несколько пунктов текст- текстовое значение,
URL- интернет- адрес, цвет- значение цвета, правдаложь- значение данет, номер- числовое значение. Для создания нового шаблона, достаточно нажать на кнопку сделать шаблон. После нажатия появится меню сохранить как. В ниспадающем меню надо выбрать сайт, в котором сохраняется шаблон, а в списке перечислены уже сохраненные в этом сайте шаблоны. Есть возможность выбрать в этом списке другой шаблон и перезаписать его.
Шаблон, в отличие обычной web- страницы имеет свои особенности. Вложенный шаблон. Эта возможность появилась только в Dreamweaver MX. Вложенный шаблон- это шаблон, созданный на основе другого шаблона так называемого, базового шаблона. При создании вложенного шаблона используются изменяемые области базового шаблона в них вносится новое неизменяемое содержимое, и создаются новые изменяемые области. Редактируемая область. Редактируемая область служит для создания изменяемых областей внутри шаблона. Она имеет вид прямоугольника и обязательно должна иметь свое уникальное имя. В Dreamweaver MX также появилось еще несколько возможностей это дополнительная область. Дополнительная область- это неизменяемая необязательная область. Дополнительная область может либо присутствовать на странице, либо нет, в зависимости от ситуации,
задаваемой пользователем. Единственный недостаток в том, что эта область неизменяема. Но можно поместить внутрь дополнительной области редактируемую область. Повторяемая область создает неизменяемую область, которая может содержать сколько угодно содержимых пунктов. С помощью меню изменить, можно добавлять, удалять, перемещать области, содержащиеся внутри повторяемой области. Чтобы пользователю не мучится, вкладывая редактируемые области внутрь дополнительных,
тем самым, перегружая код, разработчики сделали кнопку с названием редактируемая дополнительная область. Еще одна весьма удобная возможность Dreamweaver MX- табличная область. Это обычная повторяющаяся область, пункты которой организованы в виде таблицы. При этом каждая ячейка такой таблицы содержит изменяемую область. В появившемся меню надо указать имя области, в поле ряды – количество рядов, в поле колонки количество
колонок, указать количество рядов и ширину таблицы. Поля ввода начальный ряд и конечный ряд позволяют задать номера соответственно первой и последней строк таблицы, которые будут помещены в создаваемую область. Это строки, которые станут пунктами повторяющихся областей. Помимо преимуществ шаблонов, предоставляемых Dreamweaver
MX, существуют еще и недостатки. В сущности, недостатков всего два, но не очень серьезных. Первый недостаток состоит в том, что шаблон- штука очень статичная, он жестко навязывает определенный дизайн страниц, загоняет в рамки, выйти из которых очень трудно. Невозможно произвольно менять содержимое страниц, основанных на шаблонах, т.к. шаблон состоит из сплошной нередактируемой области. Второй недостаток – дополнительный код HTML, добавляемый Dreamweaver для собственного удобства. Правда, он не слишком велик, но для любителей чистоты кода, может оказаться чересчур большим. Но этот недостаток преодолим- Dreamweaver MX поддерживает экспорт сайтов с удаление всей специальной разметки. Меню символы. Меню символы требуется для вставки специальных символов, таких как йена, знак доллара, кавычки, звездочки. Разрыв линии – это особый тег, заставляющий все следующие за ним символы
переносить на новую строку. При этом он не создает нового абзаца. Web- обозреватель при недостатке места будет все переносить на новую строку, чтобы этого не произошло, надо вставить символ неразрывный пробел. Тогда web- обозреватель ни в коем случае не перенесет строку по этому пробелу. Следующие кнопки левая кавычка, правая кавычка, длинное тире, знак фунта, знак евро, знак йены, копирайт значок , зарегистрированная торговая марка значок , торговая марка значок .
С помощью Последней кнопки другие символы можно вставить в документ любой доступный в HTML специальный символ. В текстовом поле вставить, диалогового окна вставить другой символ, появляется HTML код выбранного символа. Меню медиа. Macromedia Dreamweaver MX и Macromedia Flash MX- это не только две программы имеющие одну фирму разработчика, это два мощных популярных пакета, находящиеся в тесной интеграции друг с другом.
В частности, если на одном компьютере установлены Flash и Dreamweaver, то можно запустить Flash из Dreamweaver, нарисовать изображение и вставить его в web- страницу, открытую в окне Dreamweaver. Также Dreamweaver предлагает пользователю несколько заготовок различных надписей и кнопок, выполненных в формате Flash, которые можно поместить на страницу. Кнопка Flash позволяет пользователю вставить в документ файл, в формате flash. Но можно воспользоваться средствами, предлагаемыми Dreamweaver. Следующая кнопка панели – кнопка flash. С помощью этой кнопки можно использовать графику Macromedia Flash, не прибегая к помощи самой программы Flash.
После нажатия на кнопку появляется меню, в котором нужно ввести текст кнопки, выбрать шрифт текста, размер текста, задать ссылку, дать название файла, выбрать цвет фона. На выбор предлагается сорок пять стилей кнопок, причем слева располагается кнопка получить больше стилей. Благодаря этой кнопке можно получить легкий доступ к разделу сайта Macromedia.com, где можно загрузить новые стили кнопок.
После создания кнопки в панели свойства можно изменить качество отображения кнопки, изменить параметры, размер кнопки, а также проиграть анимацию кнопки при наведении мыши. Но и здесь Dreamweaver не обошелся без ошибок если ввести название кнопки на русском языке, вместо ожидаемых букв, на кнопке появится просто набор непонятных символов. Текст Flash- это изображение в формате Flash, содержащее строку текста и работающего как изображение-
гиперссылка. При помощи кнопки Flash текст можно создать такое изображение и поместить его на страницу. В меню предлагают ввести сам текст, выбрать шрифт, цвет, ссылку, задать цель, выбрать цвет фона, размер и выравнивание относительно страницы. В панели свойства настройки такие же как и у кнопки Flash. C помощью кнопки Shockwave можно вставить объект Shockwave, предшественника Flash. Для вставки апплетов
Java, можно воспользоваться кнопкой апплет, а следующая кнопка редактирует тег param . Для вставки на страницу мультимедийных данных музыки, видеоклипов, рисунков, используются две последние кнопки это ActiveX и Плагин. Для того, чтобы поместить на web- страницу какое-либо мультимедийное содержание, обрабатываемое с помощью модуля расширения, прежде всего надо удостоверится, что этот модуль расширения установлен на компьютере. В противном случае он не будет появляться. Для вставки на страницу модуля расширения служит кнопка Плагин. На экране появится диалоговое окно вставки плагина. В свойствах плагина можно изменить ширину, высоту, вертикальный пробел, горизонтальный пробел, название плагина. В поле ввода исх. вводится путь к файлу, а над вводом имени плагина отображается размер самого файла. Поле ввода url используется для задания интернет – адреса файла, содержащего дистрибутивный комплект
этого модуля расширения. Кнопка параметры используется для дополнительных параметров модуля расширения. В большинстве случаев это не пригодится. Кнопка выровнять, выравнивает модуль расширения, а кнопка проиграть проигрывает медиа файл в окне документа Dreamweaver. Кнопка ActiveX вставляет в документ элемент ActiveX. У этого элемента нет собственного параметра для задания файла данных, как это было у модуля расширения.
Файл данных задается в списке дополнительных параметров, вызываемых с помощью кнопки параметры. В списке ClassID выбирается нужный элемент ActiveX RealPlayer, Shockwave или Flash. В свойствах ActiveX можно изменить ширину, высоту, имя элемента, тип выравнивания. В поле ввода Alt Img задается имя файла изображения, которое будет отображаться вместо элемента ActiveX, если web- обозреватель не сможет загрузить или не в полной мере поддерживает технологию
ActiveX. Если web- обозреватель встречает неизвестный тег, то он просто игнорирует его, тогда можно написать код тега ActiveX, а внутри него – тег модуля расширения. Поэтому знакомая с элементами ActiveX программа посчитает и обработает первый тег и проигнорирует второй, а незнакомая, наоборот, проигнорирует первый, так как его не знает, зато обработает второй. Dreamweaver автоматически создаст такой двойной тег, если в редакторе свойств был включен флажок Встав. В этом случае доступно поле ввода Исх, где задается имя файла данных для модуля расширения. При включенном флажке Встав, становится недоступное поле ввода Alt Img. Меню Заголовок. Метатег – это особый тег HTML, предназначенный для помещения в код web- страницы информации о ней самой. Эта информация используется, в основном, поисковыми агентами, web- обозревателями и web- редакторами и никак не отображается в окне web- обозревателя.
Меню заголовок служит для быстрой вставки метатегов. При нажатии на кнопку мета, появляется диалоговое окно вставки метатега. В списке надо выбрать тип создаваемого метатега имя содержащее информацию о странице или HTTP- эквивалент системная информация. В поле ввода значение вводится наименование информации, сама же информация вводится в область редактирования содержимое.
После ввода, в свойствах тега, можно изменить содержимое. Чтобы поместить на страницу метатег, содержащий набор ключевых слов, надо выбрать кнопку ключевые слова. Ключевые слова, разделенные запятыми, вводятся в область редактирования ключевые слова. Но, к сожалению, Dreamweaver и в этом случае искажает русские буквы. После этого остается нажать Ok и Dreamweaver создаст метатег ключевых слов.
На длину набора ключевых слов существует ограничение в двести символов. Для создания описания страницы служит кнопка описание. Чтобы перезагрузить текущую страницу, или перейти по другому адресу по прошествии определенного времени, используется метатег refresh. Для вставки такого метатега используется кнопка Обновить. В диалоговом окне, появившемся после клика мышью на кнопке, нужно ввести время задержки и
выбрать тип обновления либо обновление текущей страницы, либо переход на другой адрес. В последнем случае придется указать адрес перехода. Если страницы сайта разбросаны по разным web- серверам, то в этом случае может пригодится базовый интернет адрес. Вместо того, чтобы указывать полные интернет- адреса, можно указывать относительные, а в секции заголовка страницы поместить метатег базового интернет- адреса. В этом случае полные интернет – адреса будут вычисляться относительно его. Кроме того, такой метатег может устранять ошибки загрузки страниц, которые должны отображаться во фреймах, но почему- то выводятся в полном окне web- обозревателя. Для этого достаточно указать в этом метатеге имя базового фрейма, в котором должна отображаться web- страница. При нажатии на кнопку Основа, появляется диалоговое окно вставки метатега основа.
В поле ввода Href вводится базовый интернет – адрес, а в списке цель задается место, куда будет выводиться страница. Последняя кнопка меню создает метатег, задающий связь между двумя разными web- страницами или между web- страницей и другим файлом. Однако этот метатег используется очень редко и практически всегда- только специальными программами. Обычными web- обозревателями применяется только одна его форма, которая служит для привязки к странице внешней таблицы стилей.
Другие формы этого метатега не нашли широкого применения. Для того, чтобы поместить на страницу этот метатег, надо нажать на кнопку ссылка и в появившемся диалоговом окне задать параметры метатега в поле href вводится адрес страницы или файла, поля ввода ID и title заполняются только в случае если потом надо будет управлять этим метатегом из сценария, а вид связи задается с помощью полей rel и rev. Значения можно увидеть, нажав на кнопку помощь.
Меню скрипт. Это меню позволяет создать тег скрипта. Для создания тега, надо нажать первую кнопку скрипт и в появившемся окне ввести содержание скрипта. В ниспадающем меню язык можно выбрать язык скрипта. После создания самого скрипта, в меню свойства, можно изменить язык, содержание, выбрать источник и изменить тип client-side или server-side. C помощью кнопки noscript задается тег noscript, а при нажатии на кнопку включение сервера предлагается выбрать файл, который будет рассматриваться как сервер. Сценарии. Рассмотренная выше панель предоставляет быстрый и удобный доступ к большинству функций программы. Но это далеко не все что может предложить Dreamweaver MX создателям электронных документов. Dreamweaver MX помимо размещения на странице статичных элементов позволяет довольно легко создавать анимацию, web- сценарии и т.д.
Для создания сценария, придется знать множество имен объектов, классов, свойств, методов и событий, с помощью которых создается тот или иной эффект. Но разработчики Dreamweaver решили облегчить жизнь начинающих web- программистов. Для этого они ввели понятие поведения- заранее определенного действия, которое будет происходить в ответ на какое- либо событие, произошедшее внутри или вне системы.
Dreamweaver поддерживает достаточный набор таких поведений, который покроет практически все потребности начинающего, да и опытного web- дизайнера. После задания какого- либо поведения для того или иного элемента страницы, Dreamweaver автоматически создаст необходимый для этого набор web- сценариев и помещает его в HTML- код страницы. Это делается независимо от пользователя пользователь просто работает со списком поведений, отображаемых в специальном списке. Таким образом,
Dreamweaver дает возможность прикоснуться к web- программированию даже тем web- дизайнерам, которые не знают ни языка JavaScript, ни объектной модули документа. Всего, Dreamweaver MX поддерживает двадцать семь поведений для различных элементов. Причем стоит отметить существующую возможность для выбора поведений в различных версиях web- обозревателей. Таким образом, можно узнать, какие поведения поддерживают различные версии Internet Explorer или Netscape Navigator. Также существует возможность быстрой загрузки поведений с web- сайта фирмы Macromedia. После выбора поведения надо выбрать событие, при котором будет происходить поведение. Всего Dreamweaver поддерживает около сорока событий, также есть возможность выбора отдельных поведений для отдельных версий web- обозревателей. После создания поведения можно изменить его свойства, дважды кликну на нем в списке.
Таким довольно легким образом Dreamweaver представляет мощную систему создания сценариев, реализованных на языке JavaScript. Пользователю ничего не остается делать, кроме того, чтобы выбирать мышкой действия и вводить с клавиатуры значения для этих действий. Но Dreamweaver не только представляет удобный интерфейс для визуального создания и редактирования web- страниц, но и такой же удобный доступ к исходному
HTML- коду. Поэтому можно без труда вписать туда свои сценарии, реализующие все, что только угодно. Правда, Dreamweaver в этом случае никак не может облегчить работу. Очень часто только что написанная программа содержит ошибки. Обычно программист сразу же после написания программы обязательно ее проверит, выявит все ошибки, то есть, занимается отладкой. В Dreamweaver есть встроенный отладчик, который позволяет проверить программы,
используемые в web- страницах, а именно web- сценарии. Сам отладчик состоит из двух окон в верхнем окне отображается исполняемый код, а в нижнем – переменные. При отладке можно задавать кнопки останова, для самой отладки, а также пошаговую отладку. Встроенный отладчик доступен только тогда, когда на компьютере установлена виртуальная машина Java. Анимация. Для создания сложных анимаций приходится делать сложные математические расчеты рассчитывать каждое движение элемента и если это движение буде достаточно сложным, то сценарий, реализующий эту траекторию получится слишком громоздким и медленным. А для того, чтобы изменить траекторию движения, придется переписывать весь код сценария. Для того чтобы создать анимацию в Dreamweaver, вовсе необязательно выполнять сложные расчеты, программа сделает все это сама. Для создания анимации нужно вызвать панель timelines и выбрать объект, или несколько объектов для анимации.
Dreamweaver может управлять несколькими параметрами анимации изменять положение объекта, изменять ширину и высоту объекта, порядком перекрытия индекс z то есть глубина экрана и видимость объекта. Управлять анимацией в Dreamweaver очень легко, достаточно выделять ключевые кадры на полосе timelines и передвигать сами анимируемые элементы. Создание анимации очень схоже с созданием роликов в программе Macromedia Flash. Существует возможность объединения элементов в отдельные группы.
Как и у каждой программы, у Dreamweaver есть свои недостатки, дело в том, что необходимый для создания анимации набор web- сценариев помещается в секцию HTML- заголовка страницы тег head . Из этого следует, что если используется страница основанная на шаблонах, то создать анимируемые элементы можно только в самом шаблоне, но никак не в странице на основе шаблона. Потому что Dreamweaver не даст этого сделать, ведь заголовок- это неизменяемая область, а поместить
какой- либо тег в неизменяемую область нельзя. Еще один недостаток связан скорее с самим созданием анимации. Ведь web- сценарии создания сложной анимации огромны в размерах и сценарии выполняются не самим обозревателем, а специальной программой- интерпретатором, являющейся по отношению к web- обозревателю внешней программой. Интерпретатор, расшифровывающий код сценария и исполняющий его, довольно требователен к ресурсам. Мало того, что нужно где- то хранить код сценария, исходный и расшифрованный, и свои данные, так еще нужно обрабатывать и сохранять данные самого сценария. И чем больше и сложнее сценарии, тем больше интерпретатор требует ресурсов. Анимация и поведения являются детищем Dreamweaver. Они называются так потому, что не являются возможностями ни HTML, ни JavaScript, ни объектной модели документа
DOM. И анимация, и поведения придуманы разработчиками Dreamweaver, чтобы помочь в создании сложных web- сценариев, решающих весьма непростые задачи. Пользователь работает с анимациями и поведением, используя удобный интерфейс web- редактора, создает их, изменяет и удаляет, а Dreamweaver в это время выполняет с кодом довольно сложные действия. Достоинства Dreamweaver MX Среди основных достоинств, хочется отметить действительно удобный интерфейс,
где наиболее полно реализована система WYSIWYG. Также одно из достоинств – это отсутствие всевозможных wizard ов, волшебников, которые по идее должны облегчить труд, путем взятия на себя основных забот, при этом нередко зря загромождая экран. Также меню, все доступные горячие клавиши можно настраивать на свой собственный лад, большое количество настроек интерфейса, открытая архитектура, что позволяет перекроить интерфейс полностью на свой лад. Среди основных достоинств – это простота и легкость создания
сайта, где можно даже и не прибегать к редактированию кода HTML и быть уверенным в том, что HTML код останется чист, и в нем не появятся лишние теги, часто создаваемые различными web- редакторами. Вообще создатели Dreamweaver придерживаются принципа не вставлять лишних тегов, к примеру, если открыть в Dreamweaver какую- либо страницу, а потом закрыть, то в HTML- коде ничего не изменится. Также присутствует довольно удобный чистильщик кода, удаляющий незакрытые, ненужные теги, в зависимости от настроек, проверка орфографии, правда, доступна только на английском языке. Одно из удобных достоинств в Dreamweaver MX- это создание страниц на основе шаблонов. Работать в Dreamweaver MX с помощью – это одно удовольствие, ведь практически в каждом диалоговом окне есть кнопка Помощь, а в панели код, есть три меню, в первом отображаются все теги, в виде проводника windows, во втором сделаны шаблоны JavaScript, комментариев, заголовков и др ну а в третьем можно найти
исчерпывающую информацию о любом теге. Здесь перечислены далеко не все достоинства Dreamweaver MX, на самом деле их есть гораздо больше. Недостатки Dreamweaver MX. Самый главный недостаток Dreamweaver MX- это конечно нелюбовь к русскому языку. К тому же, после русификации исчезают все русские кодировки, кроме одной-
UTF-8 Unicode. Программа некорректно обрабатывает русские имена файлов, названия кнопок Flash, а также может испортить документ тем, что преобразит все русские буквы в непонятные символы. Из-за этого приходится вручную редактировать файлы программы, содержащие данные о кодировках. Среди прочих недостатков – это то, что каждый раз заново приходится делать видимыми рамки фреймов после, выхода из программы. Заключение. Линейка продуктов
Macromedia MX, прежде всего ориентирована на удобство конечного пользователя. По сравнению с предыдущими версиями, компания сделала большой шаг вперед, предложив дизайнерам новый, продуманный дизайн и гибкость интерфейса. Dreamweaver MX- это программа, которая подойдет как и начинающим пользователям, не знакомыми с основами HTML, так и продвинутым пользователям, которые уже не один год занимаются профессиональным web-дизайном. Не зря большинство пользователей отдают предпочтение именно Dreamweaver, ведь эта компания на протяжении восьми лет создает продукты, существенно облегчающие создание сайтов и существенно оживляющие жизнь интернета. Системные требования для удовлетворительной работы с Dreamweaver MX. Системные требования для Apple Macintosh Power Macintosh G3 или выше Mac OS 9.1, Mac OS 9.2.1, или
Mac OS X 10.1 или более поздний Mac OS Runtime for JAVA 2.2 MRJ или выше Internet Explorer или Netscape Navigator не ниже V4.0 96 MB оперативной памяти 128 MB рекомендуется 275 MB свободного места на жестком диске 256 цветов, 800×600 точек рекомендуется 1024×768, миллион цветов
CD-ROM 4x Системные требования для Microsoft Windows Pentium II 300 MHz или больше Win982000NT SP3MEXP Internet Explorer или Netscape Navigator v4.0 275 MB на жестком диске RAM 128 MB 256 цветов, 800×600 точек рекомендуется 1024×768, миллион цветов CD-ROM 4x Список используемой литературы 1. А, Горячев,
Ю. ШафринИнформатика, Практикум по информационным технологиям, М Лаборатория базовых знаний, 19992. Ю. ШафринИнформатика, Информационные технологии, М Лаборатория базовых знаний, 20003. И. Семакин, Е. ХеннерИнформатика. 10 и 11класс, М БИНОМ, Лаборатория знаний, АО Московские учебники,20044.
Microsoft Office 2000. Шаг за шагом. Практическое пособие. Изд. ЭКОМ, М 20005. Н.УгриновичИнформатика и информационные технологии,10-110 класс, М Лаборатория базовых знаний, АО Московские учебники,20026. Н.УгриновичПрактикум по информатике и информационным технологиям, М Лаборатория базовых знаний, АО Московские учебники,20027.
Брент Хеслоп, Ларри БандикHTML с самого начала, для пользователей Windows. Питер, Санкт Петербург, 19978. Владимир ДроновMacromedia Dreamweaver MX Наиболее полное руководство, БХВ-Петербург, 2003 К диплому прилагается пример в виде Web- сайта на двух 1.44- дюймовых дискетах.