Web-редактор Macromedia Dreamweaver MX

       

Основы работы в Dreamweaver

Программа Dreamweaver создавалась с учетом стремительного развития сетевых технологий и, в то же время, многие разработчики не поспевали за столь бурным развитием технологических новшеств. HTML, редактирование изображений и каскадные таблицы стилей — это одно, а объектные модели документа, циклы с оператором for, относительные данные, объединение массивов, наборы записей, файлы cookie и методы — это совсем иное. Карьера веб-дизайнеров, во многом, определяется их способностью совершить переход от статичного HTML к полноценным динамическим веб-приложениям, — что, разумеется, подразумевает знание хотя бы некоторых из указанных технологий.
Именно это является причиной создания этого курса. После выполнения предложенных в курсе практических упражнений вы приобретете уверенные навыки работы с тремя наиболее популярными сегодня языками разработки приложений: Microsoft ASP (VBScript), Macromedia ColdFusion Markup Language (CFML) и открытым языком PHP. Помимо этого, в курсе приведена информация о разработке баз данных, написании SQL-запросов, каскадных таблицах стилей, новом стандарте XHTML и о многом другом.
В основе курса лежит нестандартный подход, при котором в достаточной мере применяется как ручное кодирование, дающее наиболее ценные навыки программирования на этих языках, так и другие средства, в частности, управление серверами при помощи диалоговых окон и использование готовых объектов Dreamweaver, ускоряющих разработку приложений. Цель курса заключается не просто в обучении способам создания динамических приложений, но и в том, чтобы дать глубокое понимание механизмов их работы, даже если сервер управляется посредством графического интерфейса.

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

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

Модернизация типа документа до XHTML


Возможно, самое заметное изменение, которое привнес XHTML, мало связано с самим кодом. Это принципиально новый подход, который позволяет привести HTML в соответствие языку XML (eXtensible Markup Language – расширяемый язык разметки [гипертекста]). XML является мета-языком, то есть набором правил, которые позволяют разрабатывать новые языки, не выходя за рамки общего стандарта. XML – это язык разметки, такой же, как и HTML, – так что их синтаксис очень похож. Пример фрагмента XML-кода: Jeffrey.

Переопределение элементов HTML при помощи каскадных таблиц стилей
По умолчанию браузеры отображают все HTML-страницы согласно определенному стандарту. В частности, каждый заголовок второго уровня отображается с использованием шрифта Times New Roman размером 18 пунктов и полужирного начертания. Подобное единообразие при создании стиля оформления сайта не позволяет быстро выделить нужный структурный компонент среди других и надоедает пользователям. По этой причине HTML-разработчикам потребовался способ управления внешним видом веб-документов.

Основы динамического веб-сайта
Если на мгновение отвлечься от особенностей сайта Newland Tours, описанных в предыдущих уроках, будет легко понять ряд принципов, которые важны для разработки динамического сайта. Один из них – это отделение структурной разметки от дизайна. К этому моменту за структурную разметку страниц отвечает XHTML-код, а за их внешний вид – каскадные таблицы стилей. Другой принцип – сочетание двух различных типов документов (HTML-страницы и CSS-файла), в результате чего появляется новый документ, непохожий на исходные.

Протокол HTTP
По сути, протокол HTTP – это система обмена сообщениями. Клиент посылает запрос на сервер, а сервер возвращает ответ. В состав запроса входит URL-адрес (Uniform Resource Locator – унифицированный указатель ресурса). При щелчке на ссылке в браузере на сервер отправляется запрос, содержащий адрес нужного файла.

Почтовый сервис SMTP
Возможно, ключевая особенность протокола SMTP состоит в том, что он употребляется только для отправки, а не для получения сообщений. Таким образом, настройка сервера для использования протокола SMTP дает возможность отправлять сообщения при помощи приложений (которые, однако, не будут завершенными почтовыми сервисами). Существуют возможности, позволяющие настроить локальный компьютер как на отправку, так и на получение сообщений, но в этой книге они не рассматриваются.

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

Ускоренный курс по базам данных
При работе с книгой, целью которой является активное обучение на основе выполнения практических упражнений, требуется действовать достаточно оперативно, – поэтому длинных абстрактных рассуждений в уроке нет. Но без уверенного знания баз данных далеко в разработке динамических веб-сайтов продвинуться не получится (хотя и экспертом быть тоже не обязательно). В этом разделе описываются основные принципы и терминология баз данных. В качестве примера задействовано офисное приложение Microsoft Access. Компоновка данных в MySQL (включая и сами данные) не отличается от Access.

Создание динамически наполняемого списка
Для замены умозрительных значений реальными потребуется кое-что сделать. Для начала следует заполнить раскрывающийся список формы реальными данными. Как известно, раскрывающийся список может пересылать только одно значение, в то время как требуется два: стоимость турпоездки для взрослых и для детей. Таким образом, вместо стоимости будет отправляться уникальный идентификатор путешествия. На странице tourprice_processor.asp по этому идентификатору формируется запрос на получение стоимости тура для взрослых и для детей, после чего он направляется в базу данных.

Подготовка страницы ввода
На данный момент на странице Country Profiles (profiles.asp) содержится список, состоящий из многих стран, в которые компания Newland Tours организует турпоездки. Список составлен на основе статического HTML-кода. Следует уточнить, что названия стран будут перечислены на второй странице, которую еще потребуется добавить. Это значит, что все содержимое этой страницы (кроме заголовка) является лишним, так что его нужно удалить.

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

Подготовка страницы поиска и создание ссылки для поиска без фильтрации
В этом упражнении приступаем к реализации подготовительного этапа по созданию страницы поиска. Для этого следует удалить устаревший контент со страницы tours.asp. На данный момент на странице tours.asp содержится статический список всех путешествий. После создания динамического списка туров (tours_details.asp) содержимое страницы tours.asp теряет свою актуальность. Однако, поскольку навигационные панели по всему сайту содержат ссылку Find Tours (Поиск туров), которая указывает на tours.asp, эта страница идеально подходит для размещения на ней поискового интерфейса.

Аутентификация пользователя в веб-приложении
Как обычно, прежде чем начинать работу с серверными моделями поведения, на основе которых можно разработать программные средства для аутентификации, важно понять принципы их работы. Пользователь может зайти на страницу с ограниченным доступом только в том случае, если он ввел правильные данные доступа. Обычно подобные данные состоят из имени пользователя и пароля. После их ввода в базу отправляется запрос ASP, ColdFusion или PHP, проверяющий, содержатся ли в какой-нибудь записи введенные имя пользователя и пароль. Если ответ положительный, проверка завершается успешно, и пользователь регистрируется как вошедший в систему (как правило, незамедлительно).

Создание административного раздела
После завершения работы над сайтом сотрудники Newland Tours смогут выполнять ряд административных задач, в том числе, добавление новых статей в раздел "Traveler’s Journal", управление профилями стран и описаниями путешествий. Права на выполнение этих действий будут предоставлены пользователям, состоящим в группе admin. Для облегчения работы сотрудников необходима главная административная страница, на которой содержатся ссылки на все задачи, выполняемые администраторами сайта.

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

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

Web-редактор Macromedia Dreamweaver MX

В связи с развитием Интернета во всем мире появился спрос на профессию Web-дизайнера. Web-дизайнер — это человек, обладающий художественным вкусом и сведущий в интернет-технологиях, который создает Web-страницы и объединяет их в Web-сайты. Художественный вкус (а желательно и соответствующее образование) — это главное, что должен иметь Web-дизайнер (и -не только Web-дизайнер, но и его коллега из области полиграфии), т. к. только знание интернет-технологий еще не служит гарантией получения качественного результата. Тем более что современные программные средства позволяют ему не вникать во всякие тонкости.
Но что делать, если вы чувствуете в себе творческий порыв, желаете самореализоваться в области Web-дизайна, но с трудом представляете, что такое HTML, CSS и JavaScript? (Конечно, знание всего этого совсем не помешает, но...) Не беда! Специально для вас разработаны программы визуальных Web-редакторов, позволяющие создавать Web-страницы и целые Web-сайты, не вникая в тонкости интернет-технологий и стандартов, так, как вы создаете документы в Microsoft Word.
Эта электронная книга рассказывает о Macromedia Dreamweaver MX — последней версии популярного Web-редактора компании Macromedia. Это исключительно мощная программа, поддерживающая все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, она содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе. По иронии судьбы, Dreamweaver "задвинут" в тень своего более "раскрученного" собрата Microsoft FrontPage. Но — будьте уверены! -он не заслужил такой участи.
Может быть совсем и по-другому. Вы — опытный Web-дизайнер, предпочитающий все делать "врукопашную", но желающий немного автоматизировать свою работу. Dreamweaver поможет вам и в этом случае. Вы сможете быстро сделать "набросок" своей Web-страницы, а потом довести код "до ума" вручную. Поверьте, так работать гораздо удобнее — и вы быстро привыкнете.
Macromedia Dreamweaver — достаточно "старый" пакет. Первая его версия была разработана еще в 1998 году и получила популярность в России благодаря своей "благосклонности" к русскому языку и снисходительному отношению к множеству русскоязычных кодировок. Я пользуюсь Dreamweaver, начиная с версии 2.0. В прошлом году я написал электронная книгау о предыдущей версии Dreamweaver — 4.0. Теперь же, с выходом Dreamweaver MX, я снова взялся за перо, так сказать.

Введение
Изучать Dreamweaver мы будем на конкретном примере. Мы будем делать личный Web-сайт гипотетического Web-дизайнера Ивана Ивановича Иванова. Сначала этот сайт будет совсем простеньким; на его основе мы изучим базовые инструменты программы и основные принципы Web-дизайна. Впоследствии сайт станет сложнее и красивее; мы будем использовать фреймы и таблицы, чтобы придать ему профессиональный вид. Далее мы изучим таблицы стилей, встроенные средства для анимации элементов страницы и сценарии, позволяющие "оживить" страницы нашего сайта.

Как создаются Web-страницы
Так как же делаются те красивые Web-странички, которые выводит нам Web-обозреватель? И откуда они берутся? А вот я слышал в автобусе слово "WWW" и не знаю, что это такое... И вообще, что такое Интернет и почему мы его не видим, как, например, монитор или сообщения об ошибках Windows? Все-все! Сейчас попытаемся ответить на эти вопросы. И начнем с самого последнего.

Основные принципы работы с Dreamweaver
В этой главе мы рассмотрим начальные сведения о работе с Macromedia Dreamweaver MX. Вы узнаете, зачем нужны его многочисленные окна и инструменты, какие из них действительно вам понадобятся, а какие — нет. Также мы узнаем о начальных настройках этой программы, в частности, что нужно сделать, чтобы Dreamweaver поддерживал русский язык (изначально он не знаком с русским, т. к. по происхождению — американец)

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

Фоновые изображения
Выше мы рассмотрели, как размещаются на Web-странице всевозможные изображения в разных форматах. Все эти изображения представляли собой полезное содержание страницы и находились в "потоке" текста либо жестко к нему привязанные, либо "плавающие" в нем. Однако стандарт HTML определяет еще и так называемые фоновые изображения, помещаемые под текстом и "просвечивающие" сквозь "прозрачный" цвет графических элементов страницы.

Таблицы
Если ввести в поле ввода W какое-либо значение и нажать клавишу Enter, данное значение будет применено ко всем ячейкам таблицы. Используйте эту особенность, если хотите создать таблицу с ячейками одинаковой ширины. Но если вы зададите некорректное значение (например, 50% для таблицы из десяти столбцов), Web-обозреватель сам решит, какой ширины будет та или иная ячейка.

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

Фреймы
Для того чтобы задать свойства наборов фреймов и отдельных фреймов, нужно сначала выбрать один из них. Лучше всего это проделывать в панели Frames. Изначально она отсутствует в доке, поэтому выберите пункт Frames в подменю Others меню Window или нажмите комбинацию клавиш Shift+F2.

Табличный дизайн
Группа переключателей Width позволяет вам установить ширину ячейки. Переключатель Fixed и расположенное справа от нее поле ввода Width задают фиксированную ширину ячейки. Прежде чем задавать ширину ячейки, не забудьте включить вышеупомянутый переключатель. Другой переключатель в этой группе — Autostretch — задает режим "саморастягивания" ячейки, т. е. ячейка будет занимать все пространство таблицы, оставшееся от других ячеек. В таблице может быть только одна такая ячейка