Разработка Web-сайтов средствами DreamWeaver 4 Презентация разработана Холодовой Г.Б.

Комментарий Каталог презентации содержит папку drwapp с исходными файлами для выполнения практических заданий. Скопируйте эту папку в Мои документы для использования и сохранения в ней документов, созданных в Dreamweaver 4.

Рассматриваемые вопросы: Интерфейс программы Начало работы Работа с текстом Работа с рисунком Работа с таблицами Работа со слоями Работа с фреймами Окончание работы

Запуск программы DreamWeaver 4 В меню Пуск выберите: Программы\ Macromedia Dreamweaver 4\ Dreamweaver 4 Интерфейс программы (1 из 11)

Интерфейс DreamWeaver 4 Строка меню Панель Objects Панель Objects Панель Document Панель Document Инспектор кода Инспектор объектов Инспектор свойств Интерфейс программы (2 из 11)

Строка меню File (Файл) – создание, открытие, закрытие файлов, предварительный просмотр в браузере Edit (Правка) – команды работы с буфером обмена, отмена или возврат действий, команды выделения текста, поиск View (Вид) – установка режимов просмотра (кода, объектов и т.д.) Строка меню (1 из 3) Интерфейс программы (3 из 11)

Строка меню Insert (Вставить) – вставка различных объектов (картинок, фреймов, слоев и т.д.) Modify (Изменить) – изменение свойств страницы, таблиц, фреймов, добавление объектов в Инспектор эффектов Text (Текст) – изменение параметров текста Сommands (Команды) – запись команд, установка цветовой схемы, создание web- фото-альбома Строка меню (2 из 3) Интерфейс программы (4 из 11)

Строка меню Site (Сайт) – команды работы с сайтами (Web-узлами) Window (Окно) – установка или скрытие окон различных инспекторов (инспектора свойств, слоев и т.д.) Help (Помощь) – вызов справочной системы Строка меню (3 из 3) Интерфейс программы (5 из 11)

Панель Objects Вкладка Common: вставка основных элементов (гиперссылок, якорей, таблиц, слоев, картинок, анимации, панелей навигации и т.д.) Вкладка Character: вставка различных символов Вкладка 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)

Параметры страницы Заголовок документа Фоновый рисунок Цвет фона Цвет текста Цвет ссылки в тексте Цвет посещенной ссылки Цвет активной ссылки Поля страницы Кодировка документа Рисунок на задний план с заданием прозрачности Документ назначения (имя файла) Сайт назначения (имя сайта) Кнопки управления Помощь Начало работы (4 из 5) C:\drwapp\

Задание 3. Установка параметров страницы 1.В меню Modify (Изменить) для файла index.html выберите пункт Page Properties…(Свойства страницы) 2.Установите следующие параметры страницы: Title = Наша первая страница Background Image = love.jpg Document Encoding = Cyrillic(Windows- 1251) Начало работы (5 из 5)

Задание 4. Добавление текста на страницу 1.Щелкните левой кнопкой мыши в окне инспектора объектов 2.Наберите текст: Моя домашняя страница 3.С помощью мыши выделите текст Работа с текстом (1 из 5)

Параметры текста формат заголовка тип шрифта размер цвет начертание центрирование на странице задать ссылку и целевой объект преобразовать текст в список увеличить или уменьшить вложенность Инспектор свойств текста позволяет установить: Работа с текстом (2 из 5)

Задание 5. Изменение параметров текста Формат заголовка = Heading1 Шрифт = Times New Roman Цвет = синий Начертание = В (жирный) Расположение = по центру С помощью инспектора свойств для выделенного текста (задание 4) установите: Работа с текстом (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.Объедините ячейки в соответствие с рисунком Работа с таблицами (9 из 9) Задание 12 (2 из 2) 6.Сохраните документ и просмотрите в браузере

Слой Слой - это контейнер для того или иного содержимого, ограниченного тегами 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.В документ indexlr.html добавьте текст: Вернуться на главную… 2.Выделите этот текст и назначьте к нему ссылку на файл index.html из папки drwapp 3.В поле target установите top 4.Сохраните документ indexlr.html 5.В документ indexfrm.html добавьте текст: Вернуться на главную… 6.Выделите этот текст и назначьте к нему ссылку на файл index.html из папки drwapp, в поле target установите top 7.Сохраните все фреймы

Задание 21. Собираем сайт 6.В документ index.html добавьте текст: Перейти к странице со слоями… 7.Выделите этот текст и назначьте к нему ссылку на файл indexlr.html из папки drwapp 8.В поле target установите top 9.В документ index.html добавьте текст: Перейти к странице с фреймами… 10.Выделите этот текст и назначьте к нему ссылку на файл indexfrm.html из папки drwapp 11.В поле target установите top 12.Сохраните этот документ и нажмите «F12»

Результат работы 1.В меню Site выберите пункт Open site 2.В списке сайтов выберите 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 – многократно используемые компоненты, являющиеся самостоятельными приложениями и функционирующие в браузере так же, как подключаемые модули