Презентація на тему Основи роботи

Подібні презентації

Презентація на тему: " Основи роботи. Можливості Dreamweaver Macromedia Dreamweaver MX - захоплююча програма для створення Web-сторінок. Її можливості ширші порівняно." - Транскрипт:

3 Запустіть Dreamweaver та створіть нову веб-сторінку Дайте команду File – New - Create На сторінці напишіть текст: «DreamWeaver – перше знайомство»

7 Тепер давайте вивчимо робоче середовище програми Для перемикання режиму відображення робочого середовища (режимів всього три: Code, Design та Code and Design) на панелі інструментів натисніть "View"

8 Команда F10 викликає режим Code Inspector Використовуючи його, можна вводити HTML-код вручну

9 Завдання: Завдання: створіть та відформатуйте сторінку за зразком Перейдіть у режим Design Використовуючи панель Properties, оформіть сторінку за зразком

10 За допомогою команди Page Properties ви можете налаштувати параметри сторінки На панелі Properties натисніть кнопку Page Properties Встановіть колір тексту темно-синій, шрифт Comic Sans, будь-який малюнок фону на ваш вибір

11 Теги на сторінку можна додавати так: Викликати майстер Tag Chooser (команда Edit-Tag)

12 Теги на сторінку можна додавати так: Або «начепити» тег на якийсь текст, попередньо виділивши його та вибравши в контекстному меню команду Wrap Tag:

13 Завдання: зробіть слово «DreamWeaver» гіперпосиланням на будь-яку зі створених вами сторінок. У полі target вкажіть blank Перегляньте сторінку в браузері та перевірте роботу гіперпосилання. Сторінка за посиланням має відкриватися у новому вікні

14 Щоб видалити тег зі сторінки, натисніть пословом або виразом, «загорнутим» у цей тег, правою кнопкою миші в контекстному меню виберіть пункт "Remove Tag"

16 Додамо графіку на сторінку Для того, щоб вставити малюнок на сторінку на вкладці "Common" робочого вікна програми, натисніть кнопку Images: І у вікні вкажіть шлях до графічного файлу, який ви хочете вставити.

17 Додамо графіку на сторінку Після того, як зображення вставлено, - клацніть по ньому лівою кнопкою миші і перейдіть вниз робочого вікна програми до панелі "Properties"

19 Меню Align допоможе налаштувати розташування малюнка щодо тексту : Пункт Default - за замовчуванням, якщо ви не змінювали значення встановлені за умовчанням, це буде повністю відповідати пункту BaseLine. Пункт BaseLine – низ малюнка збігається з базовою лінією тексту. Пункт Top – верх зображення збігається з верхом тексту. Пункт M >

20 Завдання: Вставте три будь-які невеликі за розміром малюнки на сторінку Додати для кожного малюнка альтернативний текст Поекспериментуйте з властивостями малюнків

22 Зображення можна зробити активним, що реагує на наведення на нього курсором мишки - Rollover Для цього вам потрібно буде запастися двома зображеннями, які будуть змінювати одне одного і на вкладці "Common" натиснути кнопку Image – Rollover Image

23 У вікні, що відкриється, вам потрібно буде заповнити необхідні поля У полі Image Name - вкажіть оригінальне ім'я активного зображення, причому в імені можуть бути тільки латинські літери (з літери має починатися будь-яке активне зображення) і цифри (неодмінно арабські!-:) У полі Original Image - введіть шлях до основного зображення, яке першим завантажуватиметься на сторінці. У полі Rollover Image - введіть шлях до "зображення - ефекту", - цезображення буде з'являтися тільки при наведенні курсору миші на активне зображення.

25 Завдання: Створіть Rollover –зображення, вибравши будь-які два приблизно збігаються за розміром малюнка Перевірте результат роботи в браузері

26 Родзинка DreamWeaver – мультимедійні компоненти у форматі Flash Створіть текстове зображення у форматі Flash Для цього натисніть кнопку Media – flash text на панелі Common

27 Відкриється діалогове вікно Inset Flash Text

28 Завдання: Оформіть заголовок сторінки DreamWeaver як flash-напис Перевірте результат роботи у браузері

30 Завдання: Створіть кнопку для переходу на будь-яку веб-сторінку на ваш вибір. Налаштуйте вигляд та параметри кнопки Перевірте результат роботи у браузері