Разработка Web-сайтов средствами DreamWeawer4

Разработка Web-сайтов
средствами DreamWeaver 4
Презентация разработана Холодовой Г.Б.
Комментарий
Каталог презентации содержит
папку drwapp с исходными
файлами для выполнения
практических заданий. Скопируйте
эту папку в Мои документы для
использования и сохранения в ней
документов, созданных в
Dreamweaver 4.
Рассматриваемые вопросы:
Интерфейс программы
 Начало работы
 Работа с текстом
 Работа с рисунком
 Работа с таблицами
 Работа со слоями
 Работа с фреймами
 Окончание работы

Запуск программы DreamWeaver 4
В меню Пуск выберите:
Программы\
Macromedia Dreamweaver 4\
Dreamweaver 4
Интерфейс программы (1 из 11)
Интерфейс DreamWeaver 4
Строка меню
 Панель Objects
 Панель Document
 Инспектор кода
 Инспектор объектов
 Инспектор свойств

Интерфейс программы (2 из 11)
Строка меню
File (Файл) – создание, открытие,
закрытие файлов, предварительный
просмотр в браузере
 Edit (Правка) – команды работы с
буфером обмена, отмена или возврат
действий, команды выделения текста,
поиск
 View (Вид) – установка режимов
просмотра (кода, объектов и т.д.)

Интерфейс программы (3 из 11)
Строка меню (1 из 3)
Строка меню
Insert (Вставить) – вставка различных
объектов (картинок, фреймов, слоев и т.д.)
 Modify (Изменить) – изменение свойств
страницы, таблиц, фреймов, добавление
объектов в Инспектор эффектов
 Text (Текст) – изменение параметров
текста
 Сommands (Команды) – запись команд,
установка цветовой схемы, создание webфото-альбома

Интерфейс программы (4 из 11)
Строка меню (2 из 3)
Строка меню
Site (Сайт) – команды работы с
сайтами (Web-узлами)
 Window (Окно) – установка или
скрытие окон различных инспекторов
(инспектора свойств, слоев и т.д.)
 Help (Помощь) – вызов справочной
системы

Интерфейс программы (5 из 11)
Строка меню (3 из 3)
Панель Objects
Вкладка Character: вставка
различных символов
Вкладка Common: вставка
основных элементов (гиперссылок,
якорей, таблиц, слоев, картинок,
анимации, панелей навигации и т.д.)
Вкладка Forms: добавление
кнопок, полос прокрутки, полей
ввода, списков и т.д.
Интерфейс программы (6 из 11)
Панель Insert (1 из 2)
Панель Objects
Вкладка Frames: разделение
страницы на фреймы
Вкладка Head: вставка метатегов, добавление гиперссылок
Вкладка Invisibles: вставка
подписи, имени автора, скриптов
Вкладка Special: вставка
апплетов, plugin, объектов АctivX
Интерфейс программы (7 из 11)
Панель Insert (2 из 2)
Панель Document
Панель Document позволяет выбрать режим
просмотра и редактирования документа
(только HTML, HTML и объекты, только
объекты), ввести название документа,
осуществить предварительный просмотр
документа в браузере.
Интерфейс программы (8 из 11)
Инспектор кода
Инспектор кода (Code View) позволяет
редактировать теги HTML выделенных
объектов в Инспекторе объектов
Интерфейс программы (9 из 11)
Инспектор объектов
Инспектор
объектов
(Design View)
позволяет
работать
непосредственно с объектами: картинками,
текстом, таблицами, слоями, формами и т.д.
Интерфейс программы (10 из 11)
Инспектор свойств
В инспекторе свойств (окно Properties)
отображаются свойства выделенного
объекта. Например: название, высота,
ширина картинки и т.д.
Интерфейс программы (11 из 11)
Задание 1. Создание сайта
1. В меню Site (Сайт) выберите пункт New Site
(Новый сайт)
2. В списке Category (Категория) выберите
Local Info (Локальная информация)
3. В поле Site Name (Имя сайта) введите имя
сайта: myhomepage
4. В поле Local Root Folder (Локальная папка)
выберите папку для хранения сайта
Мои документы\drwapp\
5. Нажмите кнопку «Ok»
Начало работы (1 из 5)
Задание 2. Создание и сохранение
файла
1. В меню File (Файл) выберите пункт Save
(Сохранить)
2. В диалоговом окне укажите папку
Мои документы\drwapp для сохранения
файла
3. В поле «Имя файла» запишите my.html
4. Нажмите кнопку «Сохранить»
5. В меню File (Файл) выберите пункт
New (Новый)
6. Сохраните новый файл под именем
index.html
Начало работы (2 из 5)
Параметры страницы
Для вызова окна параметров страницы
можно воспользоваться одним из
способов:
Способ 1: в меню Modify выбрать пункт
Page Properties
Способ 2: щелкнуть правой кнопкой
мыши на свободном месте страницы и
в появившемся меню выбрать пункт
Page Properties
Начало работы (3 из 5)
Параметры страницы
C:\drwapp\
C:\drwapp\
Начало работы (4 из 5)
Заголовок
Кнопки
документа
управления
Фоновый
рисунок
Цвет фона
Цвет
Цвет текста
Цвет
посещенной
ссылки
активной
в
ссылки
тексте
Поля
ссылки
страницы
Кодировка
Рисунок
на
документа
задний
план с
Помощь
заданием
Документ
Сайт
прозрачности
назначения
назначения
(имя
(имя файла)
сайта)
Задание 3. Установка параметров
страницы
1. В меню Modify (Изменить) для файла
index.html выберите пункт Page
Properties…(Свойства страницы)
2. Установите следующие параметры
страницы:
Title = Наша первая страница
 Background Image = love.jpg
 Document Encoding = Cyrillic(Windows1251)

Начало работы (5 из 5)
Задание 4. Добавление текста на
страницу
1. Щелкните левой кнопкой мыши в окне
инспектора объектов
2. Наберите текст: Моя домашняя
страница
3. С помощью мыши выделите текст
Работа с текстом (1 из 5)
Параметры текста
Инспектор свойств текста позволяет установить:





формат
заголовка
тип шрифта
размер
цвет
начертание
Работа с текстом (2 из 5)




центрирование на странице
задать ссылку и целевой
объект
преобразовать текст в список
увеличить или уменьшить
вложенность
Задание 5. Изменение параметров
текста
С помощью инспектора свойств для
выделенного текста (задание 4) установите:
 Формат заголовка = Heading1
 Шрифт = Times New Roman
 Цвет = синий
 Начертание = В (жирный)
 Расположение = по центру
Работа с текстом (3 из 5)
Задание 6. Добавление списка на
страницу
1. На страницу добавьте текст:
Я расскажу вам:
о своих вкусах
о своих увлечениях
о своих успехах
2. Выделите последние три строки текста с
помощью мыши
Работа с текстом (4 из 5)
Задание 6 (1 из 2)
Задание 6. Добавление списка на
страницу
3. В инспекторе свойств нажмите кнопку
«Unordered List» (Маркированный
список)
4. Самостоятельно установите тип
шрифта, цвет и центрирование для
текста
5. Сохраните файл и запустите
предварительный просмотр в браузере
(F12)
Работа с текстом (5 из 5)
Задание 6 (2 из 2)
Задание 7. Вставка картинки
1. В меню Insert (Вставка) выберите пункт
Image (Рисунок) или на панели Common
нажмите кнопку «Insert Image»
2. В появившемся диалоговом окне
выберите в каталоге drwapp файл с
картинкой 123.jpg
3. Нажмите кнопку Select
4. Нажмите F12 для проверки в браузере
Работа с рисунком (1 из 3)
Свойства картинки
В инспекторе свойств рисунка можно установить:
 ширину и высоту
 назначить целевой
объект
 путь к файлу с
картинкой
 назначить
предварительный
 положение в тексте
рисунок
 задать гиперссылку
 ширину рамки
 подпись к картинке
 центрирование на
 назначить карту
странице
Работа с рисунком (2 из 3)
Задание 8. Изменение свойств
картинки
1. Выделите рисунок (щелкните левой
кнопкой мыши в центре рисунка)
2. В инспекторе свойств установите:




W = 200
H = 200
Alt = это наша картинка
Нажмите кнопку «Align Center»
(Расположить по центру)
3. Сохраните и нажмите F12
Работа с рисунком (3 из 3)
Таблицы
Таблицы - это мощный инструмент
размещения данных и изображений на
странице.
Таблицы
позволяют
строить
вертикальные
и
горизонтальные
структуры за счет вложенных таблиц.
Часто
таблицы
используются
в
качестве макета страницы.
Работа с таблицами (1 из 9)
Задание 9. Вставка таблицы
1. В окне редактирования поместите курсор в
нужную точку документа
2. В меню Insert выберите пункт Table (Таблица)
или на панели Common нажмите кнопку
Insert Table
3. В диалоговом окне установите: Rows=3
(количество строк) и Columns=4 (количество
столбцов), Borders=3 (ширина рамки)
4. нажмите кнопку «Ок»
Работа с таблицами (2 из 9)
Параметры таблицы
 количество строк и
столбцов
 ширина и высота
таблицы
 выравнивание
относительно других
элементов абзаца
 цвет фона таблицы
Работа с таблицами (3 из 9)
 обнуление высоты строк
и ширины столбцов
 ширина рамки
 цвет рамки
 отступ во вертикали и
горизонтали в таблице
 фоновый рисунок
Задание 10. Изменение свойств таблицы
1. Выделите таблицу, щелкнув левой кнопкой
мыши на рамке таблицы в левом верхнем углу
2. Измените размер таблицы, потянув за один из
появившихся маркеров
3. В окне свойств установите цвет и толщину
рамки, фоновый рисунок, поменяйте количество
строк и столбцов
4. Заполните ячейки текстом по своему
усмотрению
Работа с таблицами (4 из 9)
Выделение блока и группы ячеек
Выделение блока ячеек: установить курсор
на первую выделяемую ячейку. Нажать
левую кнопку мыши и, не отпуская ее,
потащить указатель мыши на последнюю
выделяемую ячейку
Выделение группы ячеек: нажать Ctrl на
клавиатуре и, не отпуская, левой кнопкой
мыши щелкать на тех ячейках, которые
надо выделить
Работа с таблицами (5 из 9)
Задание 11. Выделение группы ячеек
1. Установите курсор мыши в первую
выделяемую ячейку
2. Нажмите левую кнопку мыши и, не
отпуская ее, потяните до последней
ячейки
3. Отпустите кнопку мыши. Рамка
выделенных ячеек закрашивается
другим цветом
Работа с таблицами (6 из 9)
Параметры выделенных ячеек
 выравнивание текста в
ячейках
 высота и ширина
 объединение или
разбивка ячеек
 цвет рамки
 запрет переноса по
словам
 отформатировать как
заголовок
 фоновый цвет
 фоновый рисунок
В выделенных ячейках можно изменить параметры
текста
Работа с таблицами (7 из 9)
Задание 12. Создание таблицы со
сложной структурой
1. Выделите таблицу и нажмите клавишу Del
(Delete) на клавиатуре для удаления таблицы
2. Добавьте на страницу текст: Сегодня я изучаю
DreamWeaver 4. И вот так я умею оформлять
таблицы:
3. Вставьте на страницу таблицу размером
3 столбца и 4 строки
4. Заполните таблицу текстом и отформатируйте
текст в ячейках по своему усмотрению
Работа с таблицами (7 из 9)
Задание 12 (1 из 2)
Задание 12. Создание таблицы со
сложной структурой
5. Объедините ячейки в соответствие с рисунком
6. Сохраните документ и просмотрите в браузере
Работа с таблицами (9 из 9)
Задание 12 (2 из 2)
Слой
Слой - это контейнер для того или иного
содержимого, ограниченного тегами DIV или
SPAN. Слой можно вставить в любое место
страницы и наполнить любыми из объектов,
размещаемых в теле HTML-документа.
Слои обеспечивают полный контроль (вплоть
до пиксела) над размещением объектов на
странице, позволяют управлять очередностью
появления элементов на странице.
Работа со слоями (1 из 13)
Создание одного слоя
Способ 1: щелкнуть на странице в месте, куда
надо поместить слой, и выбрать в меню Insert
пункт Layer
Способ 2: перетащить кнопку Draw Layer с
панели Common на страницу в то место, куда
надо поместить слой
Способ 3: нажать кнопку Draw Layer и мышью
определить область страницы для вставки
Способ 4: для рисования нескольких слоев
нажать Shift, нажать Draw Layer и рисовать
слои, не отпуская Shift
Работа со слоями (2 из 13)
Задание 13. Вставка слоя
1. Создайте новый документ
2. Установите кодировку документа Cyrillic
(Windows-1251)
3. Сохраните его под именем indexlr.html в папке
drwapp
4. Нажмите кнопку Draw Layer на панели
Common и мышью определите размер слоя
5. Аналогичным образом вставьте еще два слоя
Работа со слоями (3 из 13)
Выделение и активизация
слоя
Для выделения слоя щелкните левой кнопкой мыши
на рамке слоя или на маркере слоя (маркер слоя будет
выделен темным цветом, по периметру слоя появятся
квадратики-маркеры). После этого слой можно
перемещать, изменять его свойства, добавлять во
временную диаграмму.
Для активизации слоя щелкните левой кнопкой
мыши внутри слоя (внутри слоя начнет мигать курсор).
После этого можно добавлять или удалять объекты из
слоя, изменять текст.
Примечание: если маркеры слоя не отображаются, надо включить режим
отображения невидимых элементов View\Invizible Elements
(Вид\Визуальные добавления\Скрыть все)
Работа со слоями (4 из 13)
Вложенные слои
Слой является вложенным, если он
находиться на другом слое. Слой, на котором
расположен вложенный слой называется
родителем.
У одного родителя может быть несколько
вложенных слоев.
Чтобы создать вложенный слой, надо
активизировать слой, на который помещается
вложенный слой, и выбрать в меню Insert
пункт Layer
Работа со слоями (5 из 13)
Задание 14. Создание нескольких
вложенных слоев
1. Активизируйте слой первый (Layer1)
2. В меню Insert выберите пункт Layer
для вставки вложенного слоя
3. Аналогичным образом вставьте еще
один слой в слой Layer1
Работа со слоями (6 из 13)
Инспектор слоев
Инспектор слоев вызывается
из меню Window\Layers (или
по клавише F2).
Слои в инспекторе
отображаются в порядке
согласно значениям Z-индекса.
Вложенные слои отображаются в виде подсписка
родительского слоя.
Для преобразования слоя во вложенный, надо
выделить слой в списке, нажать CTRL и перетащить
имя слоя к родительскому.
Работа со слоями (7 из 13)
Задание 15. Создание и удаление
слоев
1. С помощью инспектора слоев сделайте
слой Layer5 вложенным относительно
слоя Layer3
2. В инспекторе слоев перетащите слой
Layer5 на первый уровень
3. Для удаления слоя выделите слой Layer3
на странице или в инспекторе слоев и
нажмите Del (Delete) на клавиатуре
4. Аналогичным образом удалите слои
Layer4 и Layer5
Работа со слоями (8 из 13)
Свойства выделенного слоя
 идентификатор (имя)
слоя
 размещение на
странице
 высота и ширина
 видимость
 порядок
 фоновый цвет
Работа со слоями (9 из 13)
 фоновый рисунок
 режим отображения
слоя, если содержимое
не помещается в слой
 усечение слоя для
отображения только
содержательной части
 вид тега
Задание 16. «Убегающая картинка»
1. Измените имена слоев Layer1 и Layer2 на
Lay1 и Lay2 соответственно
2. Задайте разные цвета фонов, чтобы слои
хорошо различались на фоне документа
3. Вставьте в оба слоя по одинаковой
картинке sail.gif из папки drwapp
4. Измените свойство Vis (Вид) слоя Lay2 на
Hidden
5. В меню Window выберите пункт
Behaviors (Поведение) для открытия
инспектора действий
Работа со слоями (10 из 13)
Задание 16 (1 из 2)
Задание 16. «Убегающая» картинка
6. Выделите картинку в первом слое
7. В панели Behaviors нажмите кнопку «+»
для добавления нового эффекта
8. В списке выберите Show&Hide Layers
9. Установите Lay1=Hide, Lay2=Show
10. Аналогично добавьте эффект для второго
слоя (Lay1= Show, Lay2= Hide)
11. Сохраните документ и просмотрите в
браузере
Работа со слоями (11 из 13)
Задание 16 (2 из 2)
Задание 17. Движение слоя
1. Добавьте на страницу еще один слой с
картинкой или текстом
2. Поместите слой в то место страницы, откуда он
должен начитать свое движение
3. В меню Modify выберите TimeLine\Record path
of layer (Временная диаграмма\Записать путь
слоя)
4. С помощью мыши задайте траекторию
движения слоя по странице (например, кольцо)
Работа со слоями (12 из 13)
Задание 17 (1 из 2)
Задание 17. Движение слоя
5. Установите флаг Autoplay
6. Сохраните документ и просмотрите в
браузере
7. Вернитесь к редактированию объектов и
в окне TimeLine (Временные
диаграммы) установите флаг Loop
(Зациклить)
8. Снова запустите предварительный
просмотр в браузере
Работа со слоями (13 из 13)
Задание 17 (2 из 2)
Фрейм
Фрейм - определенная область HTML-документа,
представляющая
отдельный
документ.
Обычно
фреймы используются для разделения страницы на
область навигации и область содержания.
Фреймы строятся на базе двух компонентов:
структуры фреймов (FrameSet) и собственно
фреймов (Frames).
Структура фреймов - это отдельная HTMLстраница, содержащая информацию о количестве
фреймов в документе, их размере, пути к документам
фреймов и других параметрах.
Работа с фреймами (1 из 11)
Создание фреймов
Способ 1 (шаблоны фреймов): на панели
объектов выбрать вкладку Frames. Из списка
выбрать нужную структуру и нажать на
соответствующей кнопке
Примечание: голубым цветом на кнопке закрашена та часть
документа, которую можно снова разбить на фреймы
Способ 2 (отдельные фреймы): в меню
Insert\Frames выбрать вид фрейма
Способ 3 (структура фреймов): в меню
Modify\Frameset выбрать SplitFrameLeft,
SplitFrameRight, SplitFrameUp или SplitFrameDown
Работа с фреймами (2 из 11)
Изменение размеров и удаление
фреймов
Чтобы изменить размер фрейма,
нужно перетащить его границу на нужную
высоту или ширину или отредактировать
соответствующие теги в редакторе кода.
Чтобы удалить фрейм, надо мышью
перетащить границу фрейма к границе
документа.
Работа с фреймами (3 из 11)
Задание 18. Создание фреймов
1. Создайте новый документ
2. На панели элементов нажмите кнопку «Insert
Top and Nested Left Frame»
3. Щелкните левой кнопкой мыши на рамке
фреймов для выделения структуры фреймов
4. В меню File (Файл) выберите Save FrameSet
(Сохранить набор фреймов)
5. Выберите папку drwapp, введите имя файла
структуры фреймов indexfrm.html и нажмите
кнопку «Сохранить»
Работа с фреймами (4 из 11)
Задание 18 (1 из 2)
Задание 18. Создание фреймов
6. Щелкните левой кнопкой мыши в верхнем
фрейме
7. Установите кодировку документа
Cyrilic(Windows-1251)
8. Выберите в меню File (Файл) пункт Save
(Сохранить)
9. Введите имя файла frm1.html и нажмите
кнопку «Сохранить»
10. Аналогично сохраните левый (frm2.html) и
правый (frm3.html) фреймы (предварительно
установив кодировку)
Работа с фреймами (5 из 11)
Задание 18 (2 из 2)
Инспектор фреймов
Для просмотра
структуры фреймов,
выделения фреймов
для редактирования
свойств используется
инспектор фреймов:
Window\Frames (или
Shift+F2)
Для выделения фрейма, надо щелкнуть на
соответствующем фрейме в инспекторе
фреймов
Работа с фреймами (6 из 11)
Свойства выделенного
фрейма




имя фрейма
документ-HTML
(источник)
полосы прокрутки
установка постоянного
размера
Работа с фреймами (7 из 11)



выбор способов
отображения границ
фреймов
цвет границ
определение полей
между границей фрейма
и его содержимым
Свойства выделенной
структуры фреймов
Для выделенной структуры фреймов
можно установить свойства:
выбор способов отображения границ
фреймов
 ширина границ фреймов
 цвет границ

Работа с фреймами (8 из 11)
Задание 19. Изменение свойств
фреймов
1. В инспекторе фреймов выделите
верхний фрейм
2. В инспекторе свойств измените имя
фрейма на frm1
3. Аналогично переименуйте левый
фрейм в frm2, а правый – в frm3
4. Установите цвет границ и фоновый
рисунок фреймов по своему
усмотрению
Работа с фреймами (9 из 11)
Задание 20. Создание простейшей
панели навигации
1. В фрейм frm2 (левый вертикальный)
вставьте две большие картинки и
задайте им размер 100х100
2. В полях Link (Ссылка) для
вставленных картинок добавьте ссылки
на файлы соответствующих картинок
3. Ниже картинок напишите текст:
Вернуть…
4. Выделите текст и в поле Link задайте
для него ссылку на файл frm3.html
Работа с фреймами (10 из 11)
Задание 20 (1 из 2)
Задание 20. Создание простейшей
панели навигации
5. В свойствах Target для картинок и
текста установите имя фрейма frm3
(правого вертикального)
6. В меню File (Файл) выберите пункт
Save all frames (Сохранить все
фреймы)
7. Запустите предварительный просмотр в
браузере и опробуйте ссылки
Работа с фреймами (11 из 11)
Задание 20 (2 из 2)
Задание 21. Собираем сайт
1.
2.
3.
4.
5.
6.
7.
В документ indexlr.html добавьте текст: Вернуться
на главную…
Выделите этот текст и назначьте к нему ссылку на
файл index.html из папки drwapp
В поле target установите top
Сохраните документ indexlr.html
В документ indexfrm.html добавьте текст: Вернуться
на главную…
Выделите этот текст и назначьте к нему ссылку на
файл index.html из папки drwapp, в поле target
установите top
Сохраните все фреймы
Задание 21. Собираем сайт
В документ index.html добавьте текст: Перейти к
странице со слоями…
7. Выделите этот текст и назначьте к нему ссылку на
файл indexlr.html из папки drwapp
8. В поле target установите top
9. В документ index.html добавьте текст: Перейти к
странице с фреймами…
10. Выделите этот текст и назначьте к нему ссылку на
файл indexfrm.html из папки drwapp
11. В поле target установите top
12. Сохраните этот документ и нажмите «F12»
6.
Результат работы
1.
2.
В меню Site выберите пункт
Open site
В списке сайтов выберите
myhomepage. Появится
окно со структурой сайта.
Если домашняя страница сайта не
установлена выполните следующие
действия:
1. В списке Local Folder щелкните правой кнопкой мыши на
имени файла index.html
2. В списке выберите пункт Set as home page (Установить как
домашнюю страницу)
Спасибо за внимание!
Список использованной литературы:
Б.Карпов, А.Жданов, М.Левченко.
DreamWeaver 3: краткий курс –
СПб.:Питер, 2001г.
 Йеркс Анна-Мария, Пиккетт Джон и др.
DreamWeaver 4. Искусство создания webсайтов. Пер. с англ. – СПб.:ООО «ТНД
«ДС», 2002г.

Словарь терминов
Завершить показ
Словарь терминов
Гиперссылка – фрагмент текста или
картинка, с которыми ассоциирован адрес
ресурса Интернет
 Якорь – ссылка на некоторый текст или
картинку в пределах одной страницы
 Мета-теги – теги заголовка HTML-документа
(ключевые слова, автор, подпись, скрипты)
 Апплет – приложение, разработанное с
помощью языка Java и встроенное в
документ web.

Словарь терминов
Скрипт – фрагмент программного кода Java,
выполняющий определенные действия (по
щелчку мыши, остановка фильма и т.д.)
 Plugins – подключаемые модули,
обеспечивающие воспроизведение в
браузере Netscape Navigator файлов
мультимедиа различных форматов.
 ActiveX – многократно используемые
компоненты, являющиеся самостоятельными
приложениями и функционирующие в
браузере так же, как подключаемые модули
