Киберсантинг - пакет Dreamweaver
Интеграция с экосистемой Adobe Creative Cloud. Это создаёт бесшовный рабочий процесс между дизайном и разработкой. Например, прямой импорт файлов из Adobe Photoshop с сохранением слоёв и свойств, конвертация дизайнов из Adobe XD в готовый HTML/CSS-код.
Инструменты для адаптивной разработки. Например, встроенная система Fluid Grid Layout («Макет на основе гибкой сетки») позволяет создавать макеты, автоматически адаптирующиеся под различные разрешения.
Система шаблонов и библиотек. Обеспечивает создание многократно используемых компонентов интерфейса, централизованное обновление общих элементов на всех страницах, определение редактируемых и нередактируемых областей в шаблонах.
Поддержка удалённого редактирования через FTP, SFTP и WebDAV.
Функция блокировки файлов (file locking) предотвращает ситуации, когда несколько разработчиков пытаются редактировать один и тот же файл одновременно.
-
DreamWeaver шаг за шагом
Большая часть этих диалогов, например таких как: вставка картинки, горизонтальной линейки, мягкого переноса, флеш, shockwave, generator, plugin, activeX, java applet и server-side include вообще не требуют пояснений, так как либо не содержат никаких диалоговых окон, либо сводятся к указанию нужного файла на жестком диске
В данной части мы познакомимся
Правильная настройка DreamWeaver на работу
Добрались до самого главного
и до создания первой странички
и обещал беремся за изготовление
чего мол не переводишь, все
Сегодня мы будем заниматься чисто
Дошли мы до шага
Как оформлять текст мы уже
о том, как DW упраляется
И до двенадцатого шага. Сегодня
Считает это число несчастливым,
и четырнадцатый шаг? Писал. Вот
Настало время для последнего,
-
Иллюстрированный самоучитель по Dreamweaver MX
В самом деле, что такое Интернет? Электронный океан, таинственная стихия, заключенная в кремниевых кристаллах и медных проводах современных компьютеров. Несуществующая вселенная, иной раз кажущаяся более реальной, чем наш материальный, "настоящий" мир
-
Добавляем программы просмотра Web-страниц
Если же таких программ у вас несколько (например, Microsoft Internet Explorer и Netscape Navigator), то вы, скорее всего, захотите добавить вторую из них в список Dreamweaver, чтобы впоследствии просматривать в ней разрабатываемые Web-страницы
-
Чистка HTML-кода
В процессе работы над Web-страницей Dreamweaver вставляет в текст и убирает из него множество различных HTML-тегов. Хоть он и очень "интеллектуален" и никогда не вставит и не удалит лишнего, все-таки стоит время от времени "чистить" получившийся код, чтобы сделать его яснее и компактнее. Эта "чистка" включает в себя
-
Активные изображения
Оказывается, это можно сделать. Такие изображения, реагирующие на действия пользователя, называются активными. И Dreamweaver позволяет делать их несколькими щелчками мыши. Единственное, о чем вам нужно позаботиться, так это о втором изображении, которое будет появляться на месте исходного, когда пользователь наведет на него курсор мыши
-
Форматирование таблиц Dreamweaver MX
Ну вот, как работать с таблицами, мы разобрались. Теперь пора изучить средства, предлагаемые HTML для форматирования таблиц. Но сначала нужно выяснить, как выделить в окне документа Dreamweaver нужный элемент нашей таблицы
-
Абсолютные и относительные интернет-адреса Dreamweaver MX
Снова откройте главную страницу сайта default.htm. Поместите текстовый курсор на слово "Macromedia" в первом абзаце (если помните, это гиперссылка, указывающая на сайт фирмы). В поле ввода Link редактора свойств вы увидите следующее
-
Цель гиперссылки Dreamweaver MX
Откройте страницу default.htm. Установите текстовый курсор на любой гиперссылке, находящейся во фрейме с основным содержимым. Пусть это будет гиперссылка, ведущая на страницу сведений об авторе About.htm
-
Форматирование таблиц и ячеек разметки Dreamweaver MX
Нам помогло то, что схема дизайна нашего сайта очень проста. (Конечно, это не значит, что она плоха, примитивна, убога; очень и очень многие сайты в Сети построены по этой схеме.) В самом деле, в ней нет ничего сложного: всего четыре ячейки, минимальное количество слияний и полное отсутствие вложенных таблиц. Так что схема наша совершенно очевидна, "прозрачна", как еще говорят
-
Гиперссылки в шаблонах Dreamweaver MX
Чтобы вы лучше поняли, о чем вам хочет поведать автор, ниже приведена физическая структура нашего сайта. Как и раньше, имена папок не имеют расширения, а имена файлов — имеют. Эта структура приведена не полностью, чтобы не загромождать текст книги и не запутывать вас, а ровно настолько, чтобы вы поняли
-
Дополнительные параметры Dreamweaver MX
Как мы уже говорили, CSS — довольно молодой стандарт. Он был принят в 1997 году, уже после того, как многие разработчики выпустили на рынок свои программы Web-обозревателей. Конечно, наиболее популярные из них в то время — Internet Explorer и Navigator — вскорости обзавелись поддержкой недавно принятого стандарта
-
Что такое свободно позиционируемый элемент Dreamweaver MX
Как видите, вы можете задать для свободного элемента довольно много параметров. Вы даже можете сделать его видимым или невидимым, что часто используется в анимации и при создании различного рода спецэффектов. Кроме того, это пригодится, если вы будете программировать для своей страницы интерфейс, аналогичный интерфейсу Windows-приложения.
-
Анимация графических изображений Dreamweaver MX
Выше мы с вами рассмотрели анимацию свободно позиционируемых элементов. По идее только их и можно анимировать, ведь только они могут позиционироваться где угодно и иметь какие угодно размеры. А значит, только их можно двигать по странице, изменять их размеры и делать невидимыми. С обычными, фиксированными элементами такого не сделать
-
Альтернативные технологии Dreamweaver MX
О недостатках Web-сценариев и их преодолении было написано в главе 12. Здесь же можно только кое-что добавить. А именно, опишем две альтернативные технологии, которые можно применять вместо сценариев для расширения функциональности Web-страниц
-
Базовый интернет-адрес Dreamweaver MX
Метатег, задающий базовый интернет-адрес, может быть полезен, если страницы вашего сайта разбросаны по разным Web-серверам. Вместо того, чтобы в гиперссылках указывать полные интернет-адреса, вы можете указать относительные, а в секции заголовка страницы поместить метатег базового адреса. В этом случае полные интернет-адреса будут вычисляться относительно его
-
Как данные передаются по Сети Dreamweaver MX
Как вы уже знаете, для пересылки данных по Интернету, да и по любой локальной или глобальной компьютерной сети, используется особый набор .правил, называемый протоколом. Протокол определяет, каким образом данные будут шифроваться и упаковываться для последующей передачи по сети.
-
Дополнительные элементы управления Dreamweaver MX
Дополнительные элементы управления служат не для ввода данных, а для удобства посетителя страницы. Они поддерживаются только достаточно новыми программами Web-обозревателей, а именно Internet Explorer, начиная с версии 5.0, Navigator, начиная с версии 6.0, и всеми версиями Opera и Mozilla
-
Более сложные серверные страницы Dreamweaver MX
Какой толк в гостевой книге, если посетители сайта не могут просмотреть все записи, добавленные в нее ранее! (Если, конечно, это не "закрытая" книга, только для "своих".) Поэтому давайте сделаем страницу для просмотра этих записей. Создадим новую серверную страницу ASP и сохраним ее под именем Guestbook.asp.
-
Административные страницы сайта Dreamweaver MX
Первоначально создадим набор Web-страниц, служащих для администрирования нашего сайта. В самом деле, нашу базу данных нужно сначала наполнить содержимым — кому нужна пустая библиотека. А это работа администратора, которому необходимо предоставить соответствующие инструменты
-
Использование пакета Dreamweaver
В связи с развитием Интернета во всем мире появился спрос на профессию Web-дизайнера. Web-дизайнер — это человек, обладающий художественным вкусом и сведущий в интернет-технологиях, который создает Web-страницы и объединяет их в Web-сайты. Художественный вкус (а желательно и соответствующее образование) — это главное, что должен иметь Web-дизайнер (и -не только Web-дизайнер, но и его коллега из области полиграфии), т. к. только знание интернет-технологий еще не служит гарантией получения качественного результата. Тем более что современные программные средства позволяют ему не вникать во всякие тонкости.
Но что делать, если вы чувствуете в себе творческий порыв, желаете самореализоваться в области Web-дизайна, но с трудом представляете, что такое HTML, CSS и JavaScript? (Конечно, знание всего этого совсем не помешает, но...) Не беда! Специально для вас разработаны программы визуальных Web-редакторов, позволяющие создавать Web-страницы и целые Web-сайты, не вникая в тонкости интернет-технологий и стандартов, так, как вы создаете документы в Microsoft Word.
Этот сайт рассказывает о Macromedia Dreamweaver MX — последней версии популярного Web-редактора компании Macromedia. Это исключительно мощная программа, поддерживающая все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, он содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе. По иронии судьбы, Dreamweaver "задвинут" в тень своего более "раскрученного" собрата Microsoft FrontPage. Но — будьте уверены! -он не заслужил такой участи.
Экспорт Webстраниц основанных на шаблонах
Диалоговое окно Export
Обновление страниц созданных на основе шаблонов
Управление шаблонами в окне шаблонов
Кнопка Delete панели Assets
Кнопка Refresh Site List панели Assets
Новые возможности шаблонов
Изменяемые атрибуты
Диалоговое окно Editable Tag Attributes
Диалоговое окно добавления нового атрибута
Диалоговое окно Template Properties
Необязательные области
Шаблон Main с колонкой новостей
Кнопка Optional Region панели объектов
Диалоговое окно New Optional Region
Необязательная область
Повторяющиеся области
Кнопка Repeating Region панели объектов
Диалоговое окно New Repeating Region
Повторяющаяся область
Окончательный вид
Текст описания первой
Таблица 9 1 Кнопки и пункты меню
Готовая главная страница
Необязательные изменяемые области
Кнопка Editable Optional Region панели объектов
Необязательная изменяемая
Табличная повторяющаяся область
Кнопка Repeating Table панели объектов
Диалоговое окно Insert Repeating Table
Табличная повторяющаяся
Вложенные шаблоны
Кнопка Make Nested Template панели объектов
Введение в шаблоны Dreamweaver
Недостатки шаблонов и их преодоление
Что дальше?
Работа с шаблонами
Создание шаблона
Кнопка New Template
Новый пустой шаблон в списке шаблонов
Кнопка Make Template панели объектов
Диалоговое окно Save As Template
Редактирование шаблона
Кнопка Edit панели Assets
Открытый в окне документа шаблон Main
Отредактированный
Создание изменяемых областей
Кнопка Editable Region панели объектов
Внимание
Диалоговое окно New Editable Region
Вновь созданная изменяемая область
Внимание
Создание Webстраниц на основе шаблонов
Диалоговое окно New
Только что созданная
Изменяемая область
Применение шаблонов к уже созданным Webстраницам
Диалоговое окно Inconsistent Region Names
Готовая страница списка проектов Projects htm
Гиперссылки в шаблонах
Использование пакета Dreamweaver
ГЛАВА 10 Каскадные таблицы стилей
Параметры шрифта
Комбинированный список
Таблица 10 2 Единицы измерения поддерживаемые стандартом CSS
Параметры фона
Вкладка Background
Параметры абзаца
Вкладка Block диалогового
Параметры размеров и размещения
Вкладка Box диалогового
Графическое изображение
Графическое изображение
Текст с отступами заданными атрибутами стилей
Текстовый абзац
Текстовый абзац
Текстовый абзац
Параметры рамки
Вкладка Border диалогового
Рамка вокруг абзаца
Элемент страницы
Элемент страницы
Вертикальная линия слева от текста абзаца
Параметры маркеров списка
Вкладка List диалогового
Параметры местонахождения
Дополнительные параметры
Вкладка Extensions
Таблица 10 3 Формы курсора мыши
Применение стилей
Webстраница 10 2 htm после задания всех стилей
Панель CSS Styles после задания всех стилей
Страница 10 2 htm
Управление стилями
Панель CSS Styles в режиме правки стилей
Кнопка Delete Style панели CSS Styles
Введение в каскадные таблицы стилей
Управление таблицами стилей
Кнопка Edit Style Sheet панели CSS Styles
Диалоговое окно Edit Style Sheet
Диалоговое окно Link External Style Sheet
Содержимое внешней
Кнопка Attach Style Sheet панели CSS Styles
Поддержка внутренних стилей
Диалоговое окно
Миниредактор HTML
Измененный HTMLкод в миниредакторе HTML
Таблицы стилей и шаблоны
Временные таблицы стилей
Диалоговое окно Design Time Style Sheets
Страница 10 2 htm
Недостатки таблиц стилей и их преодоление
Диалоговое окно
Результат преобразования
Что дальше?
Зачем они нужны
Справка по атрибуту color в панели Reference
Три способа задания стиля
Таблица стилей в этом случае имеет
Почему "каскадные"
Webстраница использующая стили
Псевдостили гиперссылок
Таблица 10 1 Псевдостили гиперссылок
Работа с таблицами стилей в Dreamweaver
Создание стилей
Панель CSS Styles
Кнопка New CSS Style
Диалоговое окно New CSS Style
Определение стиля
Вкладка Type диалогового окна New CSS Style
Внимание
Использование пакета Dreamweaver
Глава 11
Работа с группой свободно позиционируемых элементов
Группа выделенных
Свободно позиционируемые
Параметры свободно позиционируемых элементов
Вид панели редактора
Использование пакета Dreamweaver
Зачем нужна анимация
Создание анимации в Dreamweaver
Создание простейшей анимации
Панель Timelines
Комбинированный список анимаций
Предупреждение выводимое
Новая дорожка анимации
Маркер выделенного кадра
Готовая траектория
Более сложная анимация
Две дорожки анимации
Ключевая точка помещенная
Положение анимированного
Сложная траектория
Управление анимациями
Диалоговое окно Rename Timeline
Набор элементов
Внимание
Диалоговое окно Change Object
Анимация графических изображений
Предупреждение выводимое
Недостатки анимации основанной
Что дальше?
Введение в Webсценарии
Ограничения HTML
Webсценарии
События
Основные принципы анимации
Простейшая анимация
Анимация реального времени
Анимация — подход Dreamweaver
Использование пакета Dreamweaver
ГЛАВА 13 Использование сценариев
Webсценарии — подход Dreamweaver Поведения
Таблица 13 2 Поведения поддерживаемые Dreamweaver
Таблица 13 3 События поддерживаемые Dreamweaver
Работа с поведениями
Панель Behaviors
Панель Behaviors
Меню событий панели Behaviors
Таблица 13 4 Пункты подменю Show Events For меню событий
Диалоговое окно Play Timeline
Внимание
Меню поведений панели Behaviors
Создание поведений
Вызов JavaScriptкода (CallJavaScript)
Диалоговое окно Call JavaScript
Изменение значения свойства (Change Property)
Диалоговое окно Change Property
Перенаправление на другую страницу
Диалоговое окно Check Browser
Проверка наличия модуля расширения (Check Plugin)
Диалоговое окно Check Piugin
Управление фильмом Shockwave или
Диалоговое окно Control Shockwave or Flash
Перетаскивание свободно позиционируемого
Диалоговое окно Drag Layer (вкладка Basic)
Диалоговое окно Drag Layer (вкладка Advanced)
Подробнее о Webсценариях
Переход на заданный кадр анимации (Go To Timeline Frame)
Диалоговое окно Go To Timeline Frame
Переход на другую Webстраницу (Go to URL)
Диалоговое окно Go To URL
Скрытие меню гиперссылок (Hide PopUp Menu)
Открытие нового окна Webобозревателя (Open Browser Window)
Диалоговое окно Open Browser Window
Проигрывание аудиоклипа (Play Sound)
Диалоговое окно Play Sound
Запуск проигрывания анимации (Play Timeline)
Вывод предупреждения (Popup Message)
Диалоговое окно Popup Message
Предварительная загрузка графических
Диалоговое окно Preload Images
Изменение изображенияэлемента
Диалоговое окно
Диалоговое окно
Задание нового содержимого фрейма (Set Text of Frame)
Зачем нужны Webсценарии
Задание нового содержимого
Вывод текста в строке статуса
Диалоговое окно Set Text of Status Bar
Вывод на экран меню гиперссылок (Show PopUp Menu)
Диалоговое окно
Кнопка Indent Item
Подменю в меню гиперссылок
Кнопка Outdent Item
Диалоговое окно
Диалоговое окно
Диалоговое окно
Показ и скрытие свободно позиционируемых
Диалоговое окно ShowHide Layers
Останов проигрывания анимации (Stop Timeline)
Диалоговое окно Stop Timeline
Изменение графического изображения (Swap Image)
Диалоговое окно Swap Image
Восстановление всех изначальных
Написание своих Webсценариев
Особые случаи создания поведений
Привязка поведений к тексту
Язык JavaScript
Поведения и анимации
Кадр анимации в
Поведение привязанное
Отладка Webсценариев
Какие ошибки бывают в программах
Сообщение о синтаксической
Встроенный отладчик Dreamweaver
Альтернативные технологии
Что дальше?
Объекты
Таблица 13 1 Некоторые методы класса Date
Объектная модель документа (DOM)
Как пишутся Webсценарии
Простейший Webсценарий
Текущая дата на Webстранице
Более сложный Webсценарий
Анимированный элемент страницы
Использование пакета Dreamweaver
ГЛАВА 14 Метатеги
Базовый интернетадрес
Кнопка Base панели объектов
Диалоговое окно Base
Редактор свойств
Перезагрузка
Кнопка Refresh панели объектов
Диалоговое окно Refresh
Редактор свойств
Связи между Webстраницами
Кнопка Link панели объектов
Диалоговое окно Link
Внимание
Таблица 14 2 Возможные значения полей ввода Pel и Rev
Таблица стилей
Редактор свойств при выбранномметатеге связи
Специальные метатеги
Кнопка Meta панели объектов
Диалоговое окно Meta
Значок которым в
Редактор свойств
Серверные директивы
Введение в серверные директивы
Стандартный набор серверных директив
Include
Echo
Таблица 14 3 Встроенные переменные Webсервера
Как использовать серверные директивы
Страницапример сделанная
Реклама в Интернете
Поддержка Dreamweaver серверных директив
Webстраницы содержащие
Серверные включения
Кнопка ServerSide Include панели объектов
Вид редактора свойств
Что дальше?
Поисковые машины
Таблица 14 1 Популярнейшие поисковые машины
Как работают поисковые агенты
Метатеги
Пассивная интернетреклама
Работа с метатегами в среде Dreamweaver
Панель заголовка
Описание Webстраницы
Кнопка Description панели объектов
Диалоговое окно Description
Редактор свойств
Ключевые слова
Кнопка Keywords панели объектов
Диалоговое окно Keywords
Редактор свойств
Использование пакета Dreamweaver
Что дальше?
Что такое серверное программирование
Зачем нужны серверные программы
Как Webсервер
Таблица 15 1 Расширения файлов серверных программ
Как Webобозреватель отправляет введенные данные
Как данные передаются по Сети
Серверное программирование — подход Dreamweaver
Введение в базы данных
Пример таблицы входящей в базу данных
Использование пакета Dreamweaver
ГЛАВА 16 Формы
Список
Кнопка List/Menu панели объектов
Вид редактора свойств при выделенном списке
Диалоговое окно List Values
Поле ввода имени файла
Кнопка File Field панели объектов
Вид редактора свойств
Графическая кнопка
Кнопка Image Field панели объектов
Вид редактора свойств
Скрытое (невидимое) поле
Кнопка Hidden Field панели объектов
Помещенное на страницу скрытое поле
Вид редактора свойств
Дополнительные элементы управления
Метка
Кнопка Label панели объектов
Группа
Кнопка Fieldset панели объектов
Диалоговое окно
Внимание
Раскрывающийся список гиперссылок
Кнопка Jump Menu панели объектов
Диалоговое окно Insert Jump Menu
Поведения предназначенные для работы с формами
Создание списка гиперссылок (Jump Menu)
Работа с формами в Dreamweaver
Создание кнопки перехода для списка
Задание нового значения поля ввода (Set Text of Text Field)
Проверка данных введенных в форму (Validate Form)
Простейшая Webформа
Надпись и поле ввода
Надпись и поле ввода
Поля ввода имени и фамилии
Группа переключателей задания пола
Готовая форма в окне Webобозревателя
Использование таблиц и стилей для создания форм
Таблица в форме Рисунок 16 37
Готовая форма созданная
Основные принципы разработки форм
Что дальше?
Создание формы
Кнопка Form панели объектов
Пустая форма на Webстранице
Вид редактора свойств при выделенной форме
Элементы управления
Поле ввода
Иллюстрация
Вид редактора свойств при выделенном поле ввода
Вид редактора свойств
Таблица 16 1 Выбор пункта раскрывающегося списка Wrap
Внимание
Кнопка Textarea панели объектов
Кнопка
Кнопка Button панели объектов
Вид редактора свойств при выделенной кнопке
Флажок
Кнопка Checkbox панели объектов
Вид редактора свойств при выделенном флажке
Переключатели
Кнопка Radio Button панели объектов
Вид редактора свойств
Группа переключателей
Кнопка Radio Group панели объектов
Диалоговое окно Radio Group
Использование пакета Dreamweaver
Страница отображающая данные
Кнопка Dynamic Text панели объектов
Динамический текст
Создание навигатора
Готовая страница Guestbook asp с навигатором
Создание строки статуса набора данных
Готовая страница
Страница для одновременного просмотра нескольких записей
Привязка элементов управления к данным
Создание сложных наборов данных
Диалоговое окно Recordset (расширенное)
Работа с динамическими атрибутами
Получение данных от другой Webстраницы
Внимание
Создание фильтров
Необязательные области серверной страницы
Подготовка
Диалоговое окно Site
Быстрое создание серверных страниц
Что дальше?
Установление соединения с базой данных
Создание источника данных ODBC
Диалоговое окно Администратор
Диалоговое окно Создание
Диалоговое окно Установка
Регистрация базы данных в Dreamweaver
Панель Databases
Диалоговое окно Data Source Name (DSN)
Создание
Создание простейших серверных страниц
Панель Server Behaviors
Более сложные серверные страницы
Создание набора данных
Кнопка Recordset панели объектов
Диалоговое окно Recordset
Использование пакета Dreamweaver
ГЛАВА 18 Создание интерактивных сайтов
Защита страниц от несанкционированного доступа
Реализация выхода с сайта
Страницы общего доступа
Страница списка категорий
Страница списка высказываний
Страница регистрации посетителя
Реализация поиска высказываний
Что дальше?
Принципы создания интерактивных сайтов
Административные страницы сайта
Как администрируются Webсайты
Страница списка высказываний
Страница добавления записи
Таблица sentences как вы уже заметили
Страница изменения записи
Средства удаления записи
Страница входа на сайт
-
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, я снова взялся за перо, так сказать.
Рисунки звуки фильмы
Что такое Интернет
Как создаются Webстраницы
Простейшая Webстраничка
Измененная Webстраничка
Гиперссылки
Два окна Webобозревателя
Клиенты и серверы Интернета
Зачем нужны HTMLредакторы
Web-редактор Macromedia Dreamweaver MX
Основные принципы работы с Dreamweaver
Поиск и замена текста
Диалоговое окно Find and Replace
Диалоговое окно Find
Диалоговое окно Find
Внимание
Панель Search
Использование регулярных выражений
Таблица 2 1 Регулярное выражение поиска интернетадресов
Таблица 2 2 Регулярное выражение
Таблица 2 3 Литералы регулярных выражений
Просмотр Webстраницы
Кнопка Preview/Debug in Browser
Вызов справки
Окно справочной системы Dreamweaver
Панель Reference
Кнопка Reference
Настройка Dreamweaver
Учим русский
Вкладка New Document
Таблица 2 4 Кодировки русского
Вкладка Fonts диалогового окна Preferences
Настраиваем скорость интернетсоединения
Добавляем программы просмотра Webстраниц
Вкладка Status Bar диалогового окна Preferences
Вкладка Preview in
Окно сведений о программе просмотра
Три режима отображения Webстраницы
Кнопки переключения
Режим отображения страницы и кода
Режим отображения кода
Работа с кодом HTML
Панель Code Inspector
Окно миниредактора HTML
Окно миниредактора при вставке нового тега
Окно миниредактора
Диалоговое окно правки тега
Панель Tag Inspector
Кнопка Edit тег Tag
Кнопка Tag Chooser
Диалоговое окно Tag Chooser
Web-редактор Macromedia Dreamweaver MX
Начинаем с текста
Создание обычных гиперссылок
Поле ввода интернетадреса в редакторе свойств
Гиперссылка указывающая на сайт Macromedia
Диалоговое окно Select File
Раскрывающийся список
Создание почтовых гиперссылок
Гиперссылка указывающая на почтовый адрес
Кнопка Email Link панели объектов
Диалоговое окно Email Link
Другие гиперссылки
Создание гиперссылок на РТРсерверы
Использование "якорей"
Учебная Webстраница
Кнопка Named Anchor панели объектов
Диалоговое окно Named Anchor
Значок "якоря"
Общие свойства Webстраницы
Диалоговое окно Page Properties
Внимание
Таблица 3 5 Атрибуты тега BODY
Дополнительные возможности Dreamweaver
Использование цветовых схем
Диалоговое окно Set Color Scheme Command
Вставка и чтение комментариев
Кнопка Comment панели объектов
Диалоговое окно Comment
Значок комментария в окне документа Dreamweaver
Вид редактора свойств
Вставка даты
Кнопка Date панели объектов
Диалоговое окно Insert Date
Создание новой Webстраницы
Диалоговое окно New Document
"Чистка" HTMLкода
Диалоговое окно Clean Up HTML / XHTML
Окно статистики "чистки" HTMLкода
Проверка совместимости HTMLкода
Диалоговое окно Check Target Browsers
Панель Target Browser Check
Работа с текстом
Ввод текста
Наш первый текст
Поле ввода названия
Форматирование абзацев
Раскрывающийся список
Созданный нами заголовок
Кнопки выравнивания
Центрированный заголовок
Кнопки задания отступа
Строка с отступом
Кнопки создания списков
Маркированный список
Таблица 3 1 Пункты подменю List
Кнопка доступа к
Диалоговое окно List Properties
Форматирование отдельных символов
Кнопки изменения начертания шрифта
Жирный текст и курсивная строка
Таблица 3 2 Пункты логического форматирования подменю Style
Примеры различного
Таблица 3 3 Теги вставляемые в
Раскрывающийся список смены шрифта
Раскрывающийся список задания размера шрифта
Увеличенный шрифт
Webстраница после изменения шрифта
Селектор цвета Dreamweaver
Окно выбора цвета селектора цветов
мы приводить не будем
Вставка специальных символов
Кнопка Horizontal Rule панели объектов
Горизонтальная линия
Вид редактора свойств
Новый вид горизонтальной линии
Кнопка Copyright панели объектов
Панель специальных символов
Символ ""
Использование разрыва строк
Кнопка NonBreaking Space панели объектов
Таблица 3 4 Специальные символы
Кнопка Other Characters панели объектов
Диалоговое окно Insert Other Character
Использование HTMLстилей
Панель HTML Styles
Кнопка New Style панели HTML Styles
Диалоговое окно Define HTML Style
Кнопка Delete Style панели HTML Styles
Работа с гиперссылками
Web-редактор Macromedia Dreamweaver MX
Webстраница сведений об авторе
Фоновые изображения
Webстраница с фоновым изображением
Мультимедиа
Поддержка мультимедийных данных
Таблица 4 1 Типы MIME
Таблица стилей HTML
Модули расширения
Кнопка Plugin панели объектов
Модуль расширения
Редактор свойств
Диалоговое окно Parameters
Запущенный модуль расширения
Внимание
Видеоклип на Webстранице
Элементы ActiveX
Кнопка ActiveX панели объектов
Значок элемента ActiveX
Редактор свойств
Работа с графическими изображениями
Два вида графических изображений
Вставка графического изображения
Кнопка Image панели объектов
Диалоговое окно Select Image Source
Страница сведений об авторе с его портретом
Страница сведений
Вид редактора свойств при выделенном изображении
Маркер "плавающего" изображения
Изображениягиперссылки
Значок "коммерческое
Активные изображения
Кнопка Rollover Image панели объектов
Диалоговое окно Insert Rollover Image
Картыизображения
Учебная Webстраница с картойизображением
Элементы управления
Вид редактора свойств
Готовая картаизображение
Диалоговое окно Change Attribute
Графика Macromedia Flash
Кнопка Flash Text панели объектов
Диалоговое окно Insert Flash Text
Только что созданная надпись Flash
Вид редактора свойств
Кнопка Flash Button панели объектов
Диалоговое окно Insert Flash Button
Только что созданная кнопка Flash
Кнопка Flash панели инструментов
Графика Macromedia Shockwave
Кнопка Shockwave панели объектов
Вид редактора свойств
Web-редактор Macromedia Dreamweaver MX
Параметры строки
Результат установки
Параметры таблицы
Вид редактора свойств при выделенной таблице
Внимание
Перекрытие параметров таблицы параметрами ячеек
Кнопки управления
Предопределенные форматы таблиц
Готовый список увлечений
Составные изображения
Схема формирования составного изображения
Проблемы с таблицами и их решение
Общие недостатки таблиц и их преодоление
Проблемы с таблицами в старых версиях Navigator
Является тому примером Не надо
Страница списка законченных проектов
Простые таблицы
Создание таблиц
Кнопка Insert Table панели объектов
Диалоговое окно Insert Table
Наша первая таблица
Таблица с заполненными ячейками
Таблица с заполненными ячейками
Работа с таблицами
Диалоговое окно Insert
Диалоговое окно Insert
Кнопка разделения ячейки редактора свойств
Диалоговое окно Split Cell
Формирование таблиц
Таблица создается с помощью парного
Форматирование таблиц
Выделение элементов таблиц
Параметры ячейки
Вид редактора свойств
Вид таблицы при включенном флажке No Wrap
Таблица со строкой заголовка
Web-редактор Macromedia Dreamweaver MX
Настройка проксисервера или брандмауэра
Диалоговое окно Preferences (вкладка Site)
Панель Site
Панель Site
Дерево"
Кнопка Expand/Collapse
Панель Site в расширенном виде
Кнопка Connect to
Кнопка Refresh инструментария панели Site
Диалоговое окно Edit Sites
Работа с файлами сайта
Внимание
Диалоговое окно Update Files
Взаимодействие панели Site и окна документа
Абсолютные и относительные интернетадреса
Раскрывающийся список
Проверка правильности ссылок и HTMLкода
Диалоговое окно Reports
Панель Site Reports
Панель Link Checker
Диалоговое окно Change Link Sitewide
Работа с сервером
Публикация сайта
Кнопка Put File(s) инструментария панели Site
Диалоговое окно Synchronize Files
Окно списка синхронизируемых файлов
Dreamweaver только что закончил синхронизацию
Работа с копиями сайта
Кнопка Get File(s) инструментария панели Site
Дополнительные возможности работы
Начала сайтостроения
Примечания
Диалоговое окно Site
Диалоговое окно Design
Диалоговое окно Design Notes (вкладка All Info)
Кнопка Edit панели Assets
Список избранных элементов
Кнопка Add to Favorites панели Assets
Панель Assets отображающая
Кнопка New Favorites
Многоуровневая структура
Кнопка Remove from
Библиотека
Список содержимого библиотеки
Кнопка Delete панели
Диалоговое окно Update Pages
Дополнительные возможности поиска и замены
Другие возможности
Планирование сайта
Основные этапы планирования сайта
Логическая структура Webсайта
Физическая структура Webсайта
Публикация Webсайта
Управление Webсайтом в Dreamweaver
Регистрация сайта в Dreamweaver
Диалоговое окно Site
Диалоговое окно Site
Диалоговое окно Site
Диалоговое окно Site
Web-редактор Macromedia Dreamweaver MX
Свойства наборов фреймов
Панель Frames
Вид редактора свойств
Внимание
Свойства фреймов
Вид редактора свойств при выделенном фрейме
Таблица 7 2 Параметры фреймов нашего набора
Замещение и работа с ним
Текст замещения
Создание содержимого фреймов
Заполнение фреймов
Готовый заголовок сайта
Готовые сведения об авторских правах
Готовое основное
Создание остальных страниц сайта
Цель гиперссылки
Раскрывающийся список
Полоса навигации
Кнопка Navigation Bar панели объектов
Диалоговое окно Insert Navigation Bar
Таблица 7 3 Данные полосы навигации
Готовая полоса навигации
Оптимизация фреймов
Уменьшение объема и сложности HTMLкода
Структура набора из трех фреймов
Ускорение обработки фреймов
Решение проблем с фреймами
Недостатки фреймов и их преодоление
Структура фреймов сайта — каталога программ
Проблема с фреймами в старых версиях Navigator
Окно предупреждающее
Окно предлагающее
Введение во фреймы
Фрейм и набор фреймов
Классический набор из четырех фреймов
Схемы наборов фреймов
Набор фреймов с набором
Набор фреймов с набором
Набор фреймов с двумя
Набор фреймов с заголовком
Набор фреймов с заголовком
Набор фреймов с двумя рекламными блоками
Сложные наборы фреймов
Иллюстрирует вышесказанное
Сложный набор фреймов
Работа с фреймами
Создание фреймов
Вкладка Frames панели
Таблица 7 1 Кнопки вкладки Frames
Два горизонтальных фрейма
Три горизонтальных фрейма
Готовый набор фреймов
Толстая штриховая
Работа с фреймами и наборами фреймов
Web-редактор Macromedia Dreamweaver MX
Форматирование таблиц и ячеек разметки
Параметры ячеек разметки
Вид редактора свойств
Задание ширины ячеек
Диалоговое окно Choose Spacer Image
Обозначение ячейки
Обозначение "саморастягивающейся"
Меню строки ширин
Параметры таблицы разметки
Вид редактора свойств
Заполнение начальной страницы
Новая начальная страница
Недостатки табличного дизайна
Недостатки таблиц
Таблица разметки должна быть как
Таблица в любом случае получится
Таблица разметки как правило занимает
Таблица 1 заголовок сайта
Таблица 2 набор гиперссылок (полоса навигации)
Таблица 2 основное содержание сайта
Таблица 3 сведения об авторских правах
Многотабличный дизайн начальной страницы
Дизайн главной страницы
Главная страница
Недостатки табличного дизайна
Основы табличного дизайна
Зачем нужны таблицы
Создание примечаний к тексту с помощью таблиц
Описание товара в
Классический табличный дизайн
Схемы табличного дизайна
Иллюстрация
Иллюстрация
Режим разметки страницы Dreamweaver
Заголовок таблицы
Строка ширин
Готовая разметка
-
Dreamweaver 4
В наше время профессия Web-дизайнера стала массовой; почти каждая фирма и даже фирмочка имеет свое “представительство” в Интернете, авторам новых продуктов или технологий трудно рассчитывать на успех беи массированной рекламы в сети. Этот мощный “социальный заказ” породил целую индустрию средств Web-проектирования и программирования. Американская софтверная фирма Macromedia Inc., точно уловив тенденции рынка, сделала ставку на развитие программных средств, ориентированных на различные секторы Weft-дизайна и электронной коммерции. Ее успехи, достигнутые за последние несколько лет, впечатляют. Многие продукты фирмы заняли лидирующие позиции в своих отраслях, а некоторые из них можно считать флагманами, определяющими направления и тенденции развития программного обеспечения данного класса. К числу таких, редких в наше время примеров принадлежит программа Dreamweaver.
Система Dreamweaver — это визуальный редактор гипертекстовых документов. Эта совершенно корректная классификационная формулировка не способна точно передать существо дела. Мощная профессиональная программа Dreamweaver обладает всеми необходимыми средствами для генерации страниц HTML любой сложности и масштаба. Она обеспечивает режим визуального проектирования (WYSIWYG), отличается очень чистой работой с исходным текстом Web-документов, обладает встроенными средствами поддержки больших сетевых проектов.
Создание
Работа с HTML
Документ
Источники текста
Форматирование текста
Изображения
Ссылки
Таблицы
Формы
Компоновка страницы
Фреймы
Управление ресурсами узла
Шаблоны
Настройка программы
Клавиатурные комбинации