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


         

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

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

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

Принцип построения курса
Работа над проектом сайта
Соглашения
Если возникли трудности
Какие знания и навыки вы получите
Системные требования для Windows
Системные требования для Macintosh
Предварительные замечания
Принцип построения курса
Работа над проектом сайта

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

Регистрация статичного сайта
Регистрация статичного сайта - 2
Регистрация статичного сайта - 3
Регистрация статичного сайта - 4
Регистрация статичного сайта - 5
Создание страницы контактов
Создание страницы контактов - 2
Создание страницы контактов - 3
Форматирование страницы контактов
Форматирование страницы контактов - 2

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

Замена строк в исходном коде
Замена строк в исходном коде - 2
Замена тегов
Замена тегов - 2
Удаление ненужных тегов
Удаление ненужных тегов - 2
Закрытие пустых тегов с атрибутами
Закрытие пустых тегов с атрибутами - 2
Закрытие пустых тегов с атрибутами - 3
Поиск изображений, не содержащих атрибут alt

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

Шаблон для многократного применения
Шаблон для многократного применения - 2
Скрытый элемент навигации
Скрытый элемент навигации - 2
Скрытый элемент навигации - 3
Резюме
Переопределение и каскадные таблицы
Переопределение и каскадные таблицы - 2
Переопределение и каскадные таблицы - 3
Переопределение и каскадные таблицы - 4

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

Создание простого динамического приложения
Создание страницы ввода
Создание страницы ввода - 2
Создание страницы вывода
Создание страницы вывода - 2
Резюме
Выбор серверной модели
Выбор серверной модели - 2
Стратегия изучения ASP, ColdFusion и PHP
Стратегия изучения ASP, ColdFusion и PHP - 2

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

Отправка данных при помощи гиперссылок
Отправка данных при помощи гиперссылок - 2
Отправка данных при помощи гиперссылок - 3
Установка и считывание файлов cookie
Установка и считывание файлов cookie - 2
Установка и считывание файлов cookie - 3
Резюме
Протокол HTTP
Получение данных из URL-адреса
Получение данных из URL-адреса - 2

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

Создание веб-формы
Создание веб-формы - 2
Пересылка динамических значений формы
Пересылка динамических значений формы - 2
Проверка правильности заполнения формы
Проверка правильности заполнения формы - 2
Резюме
Почтовый сервис SMTP
Настройка для отправки сообщений по SMTP
Настройка IIS для отправки почты

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

Создание формы
Создание формы - 2
Создание формы - 3
Получение, обработка и отображение данных
Получение, обработка и отображение данных - 2
Получение, обработка и отображение данных - 3
Получение, обработка и отображение данных - 4
Получение, обработка и отображение данных - 5
Создание сценария для проверки формы
Создание сценария для проверки формы - 2

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

Введение в объекты баз данных
Введение в объекты баз данных - 2
Связи между таблицами
Связи между таблицами - 2
Базы данных в сети
Безопасность баз данных и сеть
Установка и запуск MySQL
Установка и запуск MySQL для Windows
Установка и запуск MySQL для Windows - 2
Установка и запуск MySQL для Mac OS X

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

Фильтрация наборов записей
Фильтрация наборов записей - 2
Добавление динамических данных в сценарий
Добавление динамических данных в сценарий - 2
Добавление динамических данных в сценарий - 3
Добавление к коду комментариев
Добавление к коду комментариев - 2
Добавление к коду комментариев - 3
Добавление к коду комментариев - 4
Резюме

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

Блок ASP
Блок ColdFusion
Блок PHP
Блок PHP - 2
Подготовка страницы вывода
Наполнение динамическими данными
Наполнение динамическими данными - 2
Добавление динамических изображений
Добавление динамических изображений - 2
Добавление динамических изображений - 3

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

Создание записей из объединенных таблиц
Создание записей из объединенных таблиц - 2
Создание записей из объединенных таблиц - 3
Создание разделов с информацией
Создание разделов с информацией - 2
Создание разделов с информацией - 3
Добавление изображений и атрибутов alt
Добавление изображений и атрибутов alt - 2
Реализация вывода наборов записей
Реализация вывода наборов записей - 2

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

Cоздание ссылки для поиска без фильтрации
Cоздание ссылки для поиска без фильтрации - 2
Поиск по регионам: создание интерфейсов
Поиск по регионам: создание интерфейсов - 2
Поиск по регионам: создание интерфейсов - 3
Поиск по регионам: создание интерфейсов - 4
Обновление запроса и комментирование кода
Обновление запроса и комментирование кода - 2
Обновление запроса и комментирование кода - 3
Обновление запроса и комментирование кода - 4

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

Создание страницы доступа
Создание страницы доступа - 2
Создание страницы доступа - 3
Создание файла application.cfm
Активация управления сессиями
Активация управления сессиями - 2
Ограничение доступа на страницы
Ограничение доступа на страницы - 2
Резюме
Аутентификация пользователя в веб-приложении

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

Использование переменных сессии
Использование переменных сессии - 2
Вставка записи
Вставка записи - 2
Резюме
Создание административного раздела
Создание административного раздела - 2
Создание административного раздела - 3
Форматирование записей, хранящихся в базе
Создание интерфейса формы

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

Добавление сценариев на детальную страницу
Добавление сценариев на детальную страницу - 2
Добавление сценариев на детальную страницу - 3
Резюме
Подготовка страниц
Планирование основной и детальной страниц
Планирование основной и детальной страниц - 2
Планирование основной и детальной страниц - 3
Планирование основной и детальной страниц - 4
Планирование основной и детальной страниц - 5

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

Создание сценария для добавления данных
Создание сценария для добавления данных - 2
Создание сценария для добавления данных - 3
Создание основной страницы
Создание основной страницы - 2
Создание основной страницы - 3
Создание основной страницы - 4
Создание страницы для обновления записей
Создание страницы для обновления записей - 2
Создание страницы для обновления записей - 3

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? Все-все! Сейчас попытаемся ответить на эти вопросы. И начнем с самого последнего.

Рисунки звуки фильмы
Что такое Интернет
Как создаются Web страницы
Простейшая Web страничка
Измененная Web страничка
Гиперссылки
Два окна Web обозревателя
Клиенты и серверы Интернета
Зачем нужны HTML редакторы
Что дальше?

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

Поиск и замена текста
Диалоговое окно Find and Replace
Диалоговое окно Find
Диалоговое окно Find - 2
Внимание
Панель Search
Использование регулярных выражений
Регулярное выражение поиска интернетадресов
Регулярное выражение
Литералы регулярных выражений

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

Создание обычных гиперссылок
Поле ввода интернет адреса в редакторе свойств
Гиперссылка указывающая на сайт Macromedia
Диалоговое окно Select File
Раскрывающийся список
Создание почтовых гиперссылок
Гиперссылка указывающая на почтовый адрес
Кнопка Email Link панели объектов
Диалоговое окно Email Link
Другие гиперссылки

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

Фоновые изображения
Webстраница с фоновым изображением
Мультимедиа
Поддержка мультимедийных данных
Типы MIME
Таблица стилей HTML
Модули расширения
Кнопка Plugin панели объектов
Модуль расширения
Редактор свойств

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

Параметры строки
Результат установки
Параметры таблицы
Вид редактора свойств при выделенной таблице
Внимание
Перекрытие параметров таблицы
Кнопки управления
Внимание
Предопределенные форматы таблиц
Готовый список увлечений

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

Панель Site
Панель Site
"Дерево"
Кнопка Expand/Collapse
Панель Site в расширенном виде
Кнопка Connect to
Кнопка Refresh инструментария панели Site
Диалоговое окно Edit Sites
Работа с файлами сайта
Внимание

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

Свойства наборов фреймов
Панель Frames
Вид редактора свойств
Внимание
Свойства фреймов
Вид редактора свойств при выделенном фрейме
Параметры фреймов нашего набора
Замещение и работа с ним
Текст замещения
Создание содержимого фреймов

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

Меню строки ширин
Параметры таблицы разметки
Вид редактора свойств
Заполнение начальной страницы
Новая начальная страница
Недостатки табличного дизайна
Недостатки таблиц
Таблица разметки
Таблица в любом случае получится
Таблица разметки как правило


Механические торговые системы - перейти
Торговые системы - перейти
Теханализ в МТС - перейти
Управление капиталом - перейти
Управление капиталом - перейти
Биржевая игра - перейти
Магия в управлении - перейти
Математика управления - перейти
Связывание файлов - перейти
Шаблоны и сценарии - перейти
Структура публикации - перейти
Компоновка текста и графики - перейти
Специальные эффекты - перейти
Верстка таблиц и бланков - перейти
Верстка книг - перейти