Основы работы. Возможности Dreamweaver Macromedia Dreamweaver MX - увлекательнейшая программа для создания Web-страниц. Ее возможности шире по сравнению. - презентация

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

2 Возможности Dreamweaver Macromedia Dreamweaver MX - увлекательнейшая программа для создания Web-страниц. Ее возможности шире по сравнению с обычными функциями подобных редакторов. Dreamweaver позволяет создавать объекты и страницы с использованием языка DHTML, поддерживает каскадные таблицы стилей, а также слои и действия JavaScript Разработчику Web-проекта предлагаются гибкий и мощный инструментарий управления сайтом, включая встроенный полноценный FTP-клиент, визуальные карты сайтов и контроль над ссылками. Новые возможности Dreamweaver MX значительно облегчают процесс создания страниц и управления сайтом.

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

4 Сохраните страницу и просмотрите ее в браузере Дайте команду File – Save As, дайте имя странице, но саму страницу не закрывайте в редакторе, и дайте команду File – Preview in browser - iexplore

5 Обучим Dreamweaver русскому языку Дайте команду Edit - Preferences В категории New Document в списке "Default Encoding", выберите «Кириллица Windows".

6 Обучим Dreamweaver русскому языку В категории Font в списке Font Settings", выберите «Кириллица Windows".

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"

15 Страницу нужно озаглавить В окне Title укажите название вашей страницы (по умолчанию там стоит «Untitled document» Дайте странице заголовок и просмотрите результат в браузере:

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

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

18 Остановимся подробней на этой вкладке Поля V и H - задают размер изображения по горизонтали и вертикали, если вы оставите их пустыми, тогда изображение загрузится в броузере с реальными размерами (также реальные размеры выставляются автоматически при добавлении изображения на страницу в среде DreamWeaver ) Поле Src - в этом поле указывается путь к файлу, а при клике по значку "папки" откроется диалоговое окно (проводника) для выбора изображения. Поля ввода V Space и H Space - задание вертикального и горизонтального отступа от изображения. Поле Alt - текстовый комментарий всплывающий при наведении курсором мышки на изображение. Наведите курсор на рисунок Поле Low Src - загружает вспомогательный рисунок пока не загрузится основной. Пользоваться этим полем следует если вы размещаете на своих страницах слишком весомые изображения, которые долго грузятся. Поле Bolder - задает толщину рамки вокруг изображения.

19 Меню Align поможет настроить расположение рисунка относительно текста : Пункт Default - по умолчанию, если вы не изменяли значения установленные по умолчанию, значит этот пункт будет полностью соответствовать пункту BaseLine. Пункт BaseLine - низ рисунка совпадет с базовой линией текста. Пункт Top - верх изображения совпадет с верхом текста. Пункт Middle - середина рисунка совпадает с базовой линией текста. Пункт Bottom - низ изображения совпадает с низом текста. Пункт TextTop - верх изображения совпадает с верхом самого высокого символа текста. Пункт Absolute Middle - середина рисунка совпадает со средней линией текста. Пункт Absolute Bottom - низ рисунка совпадает с низом самого низкого символа. Пункт Left и Right - прижимают изображение к левому и правому краю страницы соответственно.

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

21 Любое изображение может использоваться в качестве гиперссылки для этого лишь достаточно ввести интернет- адрес в поле "Link" панели "Properties".

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

23 В открывшемся окне вам нужно будет заполнить требуемые поля В поле Image Name - укажите оригинальное имя активного изображения, причем в имени могут быть только латинские буквы (с буквы должно начинаться любое активное изображение) и цифры (пренепременно арабские!-:) В поле Original Image - введите путь до основного изображения, того, которое будет первым загружаться на странице. В поле Rollover Image - введите путь до "изображения - эффекта", - это изображение будет появляться только при наводе курсора мыши на ваше активное изображение.

24 В открывшемся окне вам нужно будет заполнить требуемые поля Поставьте флажок в поле Preload Rollover - в этом случае оба рисунка сразу будут загружены броузером и выполнение эффекта начнется сразу же при наведении мышки. В противном случае (при отключенной галочке), при наведении на такое изображение мышки - броузер начнет загрузку второго изображения... и медленный какой-то эффект получится. В поле Altemate Text - введите текстовый комментарий всплывающий при наведении курсором мышки на изображение. А в поле Go To URL - интернет адрес..

25 Задание: Создайте Rollover –изображение, выбрав любые два приблизительно совпадающих по размеру рисунка Проверьте результат работы в браузере

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

27 Откроется диалоговое окно Inset Flash Text

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

29 Можно использовать для оформления веб- страницы кнопки в формате Flash Нажмите кнопку Media – Flash Button на панели Common Выберите стиль кнопки (параметр Style) и адрес файла, открывающегося по нажатию кнопки(параметр Link)

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

31 Спасибо за работу!