Некоторые возможности редактора Dreamweaver MX 2004: Методические указания

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ВОСТОЧНО-СИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ Бурятский Региональный Центр Интернет Образования

Некоторые возможности редактора Dreamweaver MX 2004 Методические указания

Улан-Удэ, 2005

УДК 004.8 (075.8) ББК 32.813 я73 Е155 Рецензент: Степанов Б.М., к.т.н., доцент кафедры систем информатики ВСГТУ Л.В. Найханова, Вл.В. Найханов, С.Д. Данилова. Некоторые возможности редактора Dreamweaver MX 2004: методические указания. – Улан-Удэ: Изд-во ВСГТУ, 2005.- 45 с.: илл.

Методические указания разработаны для слушателей курсов повышения квалификации Бурятского регионального центра ФИО, также он предназначен для начинающих Webдизайнеров, не имеющих глубоких знаний HTML и JavaScript. Методические указания содержат подробные инструкции по выполнению тех или иных задач разработки Webстраниц. Печатается по решению редакционно-издательского совета ВСГТУ

ISBN 5-89230-182-6

ББК 32.813 я73 © Найханова Л.В., Найханов Вл.В, Данилова С.Д., 2005 г. © ВСГТУ, 2005 г.

Содержание СОДЕРЖАНИЕ....................................................................................................................................................... 3 ВВЕДЕНИЕ .............................................................................................................................................................. 5 1. НАЧАЛО РАБОТЫ С РЕДАКТОРОМ DREAMWEAVER MX 2004 ........................................................ 6 ЗАПУСК РЕДАКТОРА ................................................................................................................................................. 6 ВЫБОР ИНТЕРФЕЙСА................................................................................................................................................ 6 СТАРТОВАЯ СТРАНИЦА............................................................................................................................................ 7 ГЛАВНОЕ ОКНО ПРОГРАММЫ .................................................................................................................................. 8 2. РАБОТА С САЙТОМ....................................................................................................................................... 11 СОЗДАНИЕ САЙТА .................................................................................................................................................. 11 ОТКРЫТИЕ САЙТА .................................................................................................................................................. 13 3. РАБОТА С WEB-СТРАНИЦЕЙ .................................................................................................................... 13 СОЗДАНИЕ СТРАНИЦЫ ........................................................................................................................................... 13 СОХРАНЕНИЕ СТРАНИЦЫ ...................................................................................................................................... 14 ОТКРЫТИЕ СТРАНИЦЫ ........................................................................................................................................... 14 ФОН СТРАНИЦЫ ..................................................................................................................................................... 14 НАСТРОЙКА КИРИЛЛИЦЫ ...................................................................................................................................... 15 РАЗРЫВ СТРОКИ ..................................................................................................................................................... 15 СОЗДАНИЕ ТЕКСТОВОЙ ССЫЛКИ ........................................................................................................................... 15 СОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ЗАКЛАДКИ ............................................................................................................ 16 СОЗДАНИЕ МЕНЮ ПЕРЕХОДА ................................................................................................................................. 16 РЕДАКТИРОВАНИЕ МЕНЮ ПЕРЕХОДА .................................................................................................................... 17 4. РАБОТА С РИСУНКАМИ .............................................................................................................................. 18 ВСТАВКА РИСУНКА................................................................................................................................................ 18 ССЫЛКИ С РИСУНКА .............................................................................................................................................. 18 НАСТРОЙКА ГРАФИКИ ........................................................................................................................................... 18 РАЗДЕЛЯЕМЫЕ РИСУНКИ ....................................................................................................................................... 20 ИНТЕРАКТИВНЫЕ ИЗОБРАЖЕНИЯ .......................................................................................................................... 20 ГОРИЗОНТАЛЬНАЯ ЛИНИЯ ..................................................................................................................................... 21 ВСТАВКА МЕДИА .................................................................................................................................................. 21 5. РАБОТА С ТАБЛИЦАМИ .............................................................................................................................. 22 ВСТАВКА ТАБЛИЦЫ ............................................................................................................................................... 22 ВЫДЕЛЕНИЕ ТАБЛИЦЫ, СТРОКИ, СТОЛБЦА, ЯЧЕЙКИ ............................................................................................. 23 ПЕРЕМЕЩЕНИЕ ТАБЛИЦЫ ...................................................................................................................................... 23 СВОЙСТВА ТАБЛИЦЫ ............................................................................................................................................. 23 СВОЙСТВА ЯЧЕЙКИ ................................................................................................................................................ 24 ОБЪЕДИНЕНИЕ, РАЗБИЕНИЕ, ДОБАВЛЕНИЕ, УДАЛЕНИЕ ЯЧЕЕК .............................................................................. 24 КОМАНДЫ МЕНЮ ДЛЯ РАБОТЫ С ТАБЛИЦАМИ ...................................................................................................... 25

РЕЖИМ МАКЕТИРОВАНИЯ...................................................................................................................................... 25 6. РАБОТА С ФРЕЙМАМИ................................................................................................................................ 26 СОЗДАНИЕ ФРЕЙМА ............................................................................................................................................... 26 ВСТАВКА И УДАЛЕНИЕ ФРЕЙМА ............................................................................................................................ 27 ВЫДЕЛЕНИЕ ФРЕЙМА И ФРЕЙМСЕТА ..................................................................................................................... 27 НАЗНАЧЕНИЕ НАЧАЛЬНОЙ СТРАНИЦЫ .................................................................................................................. 27 СОХРАНЕНИЕ ФРЕЙМСЕТА..................................................................................................................................... 27 СВОЙСТВА

ФРЕЙМСЕТА ........................................................................................................................................ 28

СВОЙСТВА

ФРЕЙМА .............................................................................................................................................. 28

ЦЕЛЕВЫЕ ФРЕЙМЫ ................................................................................................................................................ 28 7. РАБОТА СО СЛОЯМИ ................................................................................................................................... 29 НАСТРОЙКА СВОЙСТВ СЛОЯ ПО УМОЛЧАНИЮ ...................................................................................................... 29 СОЗДАНИЕ СЛОЯ .................................................................................................................................................... 29 ВЫДЕЛЕНИЕ СЛОЯ ................................................................................................................................................. 30 СВОЙСТВА СЛОЯ .................................................................................................................................................... 30 ПОРЯДОК РАСПОЛОЖЕНИЯ СЛОЕВ (ПЕРЕКРЫТИЕ СЛОЕВ) ..................................................................................... 31 УДАЛЕНИЕ СЛОЯ .................................................................................................................................................... 31 8. РАБОТА СО СТИЛЯМИ................................................................................................................................. 31 СОЗДАНИЕ НОВОГО СТИЛЯ .................................................................................................................................... 31 ИСПОЛЬЗОВАНИЕ СТИЛЕЙ ..................................................................................................................................... 34 ПЕРЕНОС СТИЛЕЙ .................................................................................................................................................. 34 РЕДАКТИРОВАНИЕ СТИЛЯ ...................................................................................................................................... 34 9. ПУБЛИКАЦИЯ САЙТА ................................................................................................................................. 34 ПРИЛОЖЕНИЕ A ................................................................................................................................................ 36 КАК ПОЛУЧИТЬ E-MAIL .......................................................................................................................................... 36 КАК ПОЛУЧИТЬ МЕСТО ПОД САЙТ ......................................................................................................................... 36 КАК ОПУБЛИКОВАТЬ СВОЙ САЙТ .......................................................................................................................... 36 ПРИЛОЖЕНИЕ B................................................................................................................................................. 39 НЕМНОГО О JAVASCRIPT ....................................................................................................................................... 39 НЕСКОЛЬКО ПРОСТЫХ ПРИМЕРОВ ИСПОЛЬЗОВАНИЯ JAVASCRIPT ........................................................................ 41 БИБЛИОГРАФИЯ................................................................................................................................................ 45

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

1. Начало работы с редактором Dreamweaver MX 2004 Запуск редактора Для запуска редактора Dreamweaver MX 2004 необходимо выполнить следующую последовательность действий: Пуск – Программы – Macromedia – Macromedia Dreamweaver MX 2004. Выбор интерфейса При первом запуске Dreamweaver MX 2004 предлагается выбрать интерфейс программы: Designer или Coder (рис. 1). При выборе режима Designer Панель групп (Группа служебных панелей) (рис.5-5) располагается справа и при создании новой страницы активизируется режим Design (рис.5). При выборе режима Coder Панель групп располагается слева, и при создании новой страницы активизируется режим Code (рис. 7).

Рис. 1. Окно выбора интерфейса Впоследствии можно изменить интерфейс, выбрав в меню Edit команду Preferences, в открывшемся диалоговом окне, в области Category, выбрать пункт General, и щелчком по кнопке Change Workspace (рис. 2) вызвать окно выбора интерфейса (рис. 1).

Рис. 2. Окно Preferences: 1 – категория General; 2 – флажок показа стартовой страницы Show Start page; 3 – кнопка выбора интерфейса Change Workspace

Стартовая страница Стартовая страница (рис. 3) отображается при запуске Dreamweaver или при отсутствии открытых документов. С помощью стартовой страницы можно открывать последние используемые файлы, создавать новые файлы, а также получить доступ к различным ресурсам программы.

Рис. 3. Стартовая страница Dreamweaver: 1 – флажок отказа от вывода стартовой страницы Don’t show again. Для того чтобы отказаться от вывода стартовой страницы, необходимо установить флажок в поле Don’t show again (рис.3-1), в открывшемся окне (рис.4) с напоминанием, как снова отобразить стартовую страницу, можно установить флажок в поле Don’t show me this message again (тогда это диалоговое не будет снова выводиться) и щелкнуть по кнопке OK.

Рис. 4. Окно подтверждения отказа от вывода стартовой страницы. Чтобы Dreamweaver вновь начал отображать стартовую страницу, необходимо выбрать в меню Edit команду Preferences, в появившемся диалоговом окне в области Category выделить пункт General и установить флажок Show Start page (рис. 2-2).

Главное окно программы Главное (или основное) окно программы Macromedia Dreamweaver MX приведено на рисунке 5. Главное окно служит "вместилищем" для множества других окон, содержащих как открытые Web-страницы, так и различные инструменты, предназначенные для работы с ними.

Рис. 5. Общий вид главного окна программы в режиме Design Строка главного меню (рис.5-1) предназначена для получения доступа ко всем возможностям Dreamweaver. Панель Insert (рис.5-2) предназначена для быстрой вставки рисунков, таблиц, ссылок и прочих элементов страницы. Если щелкнуть по небольшому черному треугольнику рядом с названием категории, то отобразится список всех доступных категорий этой панели (рис. 61), из которых щелчком можно выбрать необходимую категорию.

Рис. 6. Панель Insert: 1 - категория Common Панель открытого (текущего) документа (рис.5-3) позволяет выполнять некоторые манипуляции с открытой Web-страницей и самой программой. Первые три инструмента этой панели являются кнопками переключения режимов отображения Web-страницы:

• • •

Code View (Режим разметки) показывает исходный код текущей Web-страницы (рис. 7). Code and Design View (Режим разметки и планировки) является комбинированным режимом (рис. 8). Design View (Режим планировки) или режим визуального редактора (рис. 5) предназначен для размещения необходимых элементов на странице.

Рис. 7. Общий вид окна программы Dreamweaver MX 2004 в режиме Code

Рис. 8. Общий вид окна программы Dreamweaver MX 2004 в режиме Split

Поле заголовка Title панели открытого документа предназначено для ввода и отображения названия текущей Web-страницы. Рассмотрим назначение остальных пяти инструментов панели открытого документа: • No Browser/Check Errors – предоставляет возможность проверки совместимости содержания текущей страницы с различными браузерами. • File Management (Управление файлами) содержит команды пересылки данных и контроля обращения. • Preview/Debug in Browser (Просмотр/Отладка в браузере) предназначен для просмотра страницы в браузере. • Refresh Design View (Обновить страницу) позволяет все изменения сделанные в исходном тексте документа перенести в режим планировки. При этом выполняются проверка синтаксиса и интерпретация кодов. Ошибочные фрагменты помечаются желтым цветом. Эта кнопка активизируется, когда вы вносите изменения на странице в режиме разметки. • View Option (Параметры отображения) предназначен для визуализации вспомогательных возможностей окна документа. Окно документа (рис.5-4) – это рабочее пространство, где создаются Web–страницы. Группы служебных панелей (Панель групп) (рис.5-5) – это панели, сгруппированные по принципу схожести решаемых задач. По умолчанию выводятся следующие группы панелей: • Design – для создания стилей и ответных действий при различных событиях. • Code – для работы с кодом страницы (тегами), справка по тегам. • Application – для работы с сервером. • Tag Inspector – для быстрого доступа к различным тегам и редактирования их атрибутов. • Files (рис.5-6) – для работы с файлами сайта: просмотр, создание, открытие, удаление, перемещение. Служебная панель Files состоит из поля выбора сайта (рис.5-7) и поля выбора режима работы панели Files (рис.5-8). Селектор тегов (рис.5-9) предназначен для быстрого выбора элементов страницы. Панель Инспектора свойств (Properties) (рис.5-10) – это контекстно-чувствительное окно, в котором можно настроить различные параметры выделенного (или текущего) элемента страницы. По умолчанию выводятся основные параметры (на взгляд создателей Dreamweaver). Для отображения или закрытия дополнительных параметров необходимо щелкнуть по белому треугольнику в правом нижнем углу этой панели (рис.5-11).

2. Работа с сайтом Создание сайта Для создания сайта необходимо в меню Site выбрать команду Manage Site (Site – Manage Site) и щелкнуть в открывшемся диалоговом окне (рис. 9) по кнопке New (рис.9-1), а затем по команде Site (рис.9-2).

Рис. 9. Создание сайта После этого откроется окно описания сайта Set Definition for Unnamed Site 1 (рис.10), в которой необходимо активизировать вкладку Advanced (рис.10-1) и в категории Local Info (рис.10-2) задать параметры локальной версии сайта: • В поле Site Name (рис.10-3) вводится имя нового сайта. • В поле Local root folder (рис.10-4) указывается директория для локальной версии сайта. • В поле HTTP address (рис.10-5) указывается интернет-адрес вашего сайта (если он уже известен). • Устанавливается флажок организации кэша Cache (рис.10-6) (некоторые возможности Dreamweaver будут недоступны без кэша).

Рис. 10. Вкладка Advanced, категория Local Info

Если нет необходимости описывать удаленный доступ, то можно нажать кнопку ОК (рис.10-7), в противном случае необходимо выбрать категорию Remote Info (рис. 11-1).

Рис. 11. Вкладка Advanced, выбор способа доступа Для того чтобы получить доступ к удаленному компьютеру по протоколу ftp, в поле выбора способа доступа Access необходимо выбрать пункт FTP (рис. 11-2). После этого раскроются поля необходимые для организации доступа по этому протоколу (рис. 12).

Рис. 12. Вкладка Advanced

•

В поле FTP host (рис. 12-1) вводится название сервера (это название сообщается при регистрации, его можно запросить у системного администратора или другого ответственного лица). • В поле Host directory (рис. 12-2) вводится имя папки удаленного компьютера, в которой будет располагаться ваш сайт. Примечание: Имя папки следует вводить, если оно точно известно, в противном случае лучше оставить это поле пустым. • В поле Login (рис. 12-3) вводится значение, под которым вы зарегистрированы на сервере. • В поле Password (рис. 12-6) вводится ваш пароль. • Установив флажок Save (Сохранить) (рис. 12-5), можно сохранить пароль, чтобы не вводить его снова и снова. • Для проверки возможности соединения с сервером необходимо щелкнуть по кнопке Test (Проверить) (рис. 12-4) (в этот момента вы должны иметь выход в сеть). • Если связь не устанавливается или постоянно обрывается, нужно попробовать установить флажок Use passive FTP (рис. 12-7). Примечание: Краткое описание всех пунктов списка Access категории Remote Info: 1. None – избавит от излишних хлопот на какое-то время. 2. FTP – вынудит указать адрес сервера, имя и пароль (см. выше). 3. Locals/Network – размещение сайта в локальной сети. 4. RDS – примерно то же самое, что и FTP, только работает на серверах, где установлен ColdFusion MX. 5. SourceSafe – для доступа к базам данных. 6. WebDAV (Web Distributed Authoring and Versioning – распределенное создание документов и управление версиями). Это расширение протокола HTTP/1.1, предоставляющее расширенные возможности по управлению версиями документов и организацией распределенной работы. Будет работать только в том случае, если сервер поддерживает это расширение. В трех последних случаях появляется кнопка Settings, с помощью которой вы можете уточнить параметры соединения. Чтобы настройки вступили в силу, щелкните по кнопке ОК. Открытие сайта Выберите из левого выпадающего списка на панели Files (рис. 5). Примечание: Панель Files активизируется с помощью команды Window - Files ().

3. Работа с web-страницей Создание страницы Для создания страницы в меню File необходимо выполнить команду New (File–New) или нажать комбинацию клавиш +. Откроется диалоговое окно (рис. 13), в котором необходимо указать тип создаваемой страницы и щелкнуть по кнопке Create. Примечание: Чтобы отказаться от показа диалогового окна, появляющегося при

создании документа, необходимо снять флажок Show New Document dialog box on Control+N (рис. 15-3), тогда новая страница будет создаваться сразу, без появления промежуточных окон. Если же этот флажок все-таки не будет снят, то, для того, чтобы создать новую пустую интернет-страницу, минуя промежуточное диалоговое окно, надо нажать сочетание клавиш +<Shift>+.

Рис. 13. Окно создания нового документа. Сохранение страницы Для сохранения страницы необходимо выполнить команду File–Save (+<S>). Если страница сохраняется в первый раз, то появится окно Save As, в котором необходимо задать имя страницы и указать папку размещения. Открытие страницы Для открытия страницы необходимо выполнить команду File–Open (+), в открывшемся окне выбрать страницу и щелкнуть по кнопке Open. (Или дважды щелкните по имени открываемой страницы на панели Files.) Примечание: Панель Files активизируется с помощью команды Window-Files (). Фон страницы Для сплошной заливки страницы каким-либо цветом необходимо выполнить команду Modify–Page Properties, щелкнуть по квадратику рядом с названием поля Background Color и выбрать цвет. Чтобы применить рисунок в качестве фона страницы необходимо выполнить команду Modify–Page Properties и в поле Background Image щелкнуть по кнопке Browse и затем указать фоновый рисунок.

Настройка кириллицы Для задания кодировки кириллицы в меню Modify (или контекстном меню) необходимо выбрать команду Page Properties (+<J>) и в поле Document Encoding установить значение Cyrillic (Windows) (рис.14).

Рис. 14. Настройка кириллицы для текущей страницы: 1 - категория Title/Encoding; 2 - поле выбора кодировки страницы Чтобы задать кодировку кириллицы для вновь создаваемых страниц необходимо щелкнуть по команде Preferences в меню Edit и в поле Category выбрать пункт New Document, затем в выпадающем списке Default Encoding выбрать значение Cyrillic (Windows) (рис.15).

. Рис. 15. Настройка кириллицы для вновь создаваемых страниц: 1 - категория New Document; 2 - поле для выбора кодировки; 3 - флажок показа диалогового окна при создании нового документа Разрыв строки Чтобы перейти на новую строку без образования нового абзаца необходимо выполнить команду Insert – HTML – Special Characters – Line Break. Можно также нажать комбинацию клавиш <Shift>+<Enter>. Создание текстовой ссылки Для создания текстовой ссылки необходимо выделить участок текста и в панели

Инспектора свойств заполнить поле Link (рис.16-1). Или можно щелкнуть по кнопке Browse for File и указать нужную страницу. Также можно щелкнуть на маркере создания ссылки (рис.16-2) и, не отпуская кнопку, перетащить его на ссылаемую страницу на панели Files или в рабочей области. Примечание: Чтобы создать новую ссылку можно щелкнуть по кнопке Hyperlink на панели Insert, категория Common, и в появившемся окне заполнить требуемые поля. Примечание: Если вы хотите, чтобы после щелчка по ссылке страница загружалась в новом окне, то выберите в поле Target значение _blank (рис.16-3).

Рис. 16. Панель Инспектора свойств при создании гиперссылки: 1 - поле гиперссылки; 2 маркер создания гиперссылок; 3 - поле выбора целевого фрейма Создание и использование закладки Для создания закладки необходимо установить курсор в том месте страницы, где будет находиться закладка, и щелкнуть по команде Insert–Named Anchor (или на панели Insert выбрать категорию Common и щелкнуть по одноименной кнопке “Named Anchor”); затем в открывшемся окне в поле Anchor Name (рис.17-1) ввести имя закладки и нажать OK (рис.17-2).

Рис.17. Создание закладки: 1 – имя закладки; 2 – кнопка ОК Чтобы использовать закладку в поле Link после имени страницы нужно поставить знак # и напечатать имя закладки (вручную), например: first.htm#bookmark. Если закладка находится на той же странице, что и ссылка на эту закладку, то печатается просто: #имя_закладки (т. е. имя страницы указывать не надо). Создание меню перехода Для создания меню перехода выполняется команда Insert–Form–Jump Menu. В окне Insert Jump Menu (рис.18) кнопки Add item (рис.18-1) и Remove item (рис.18-2) служат для добавления и удаления пунктов меню, с помощью кнопок Move item up in list (рис.18-3) и Move item down in list (рис.18-4) можно перемещать пункты меню относительно друг друга. В поле Menu item (рис.18-5) содержится перечень всех пунктов меню. В поле Text (рис.18-6) задается текст для выделенного пункта меню. В поле When selected, go to URL (рис.18-7) указывается ссылка на страницу, имя страницы можно напечатать вручную, а можно

воспользоваться кнопкой Browse и в открывшемся диалоговом окне выбрать необходимую страницу. Поле Open URLs in (рис.18-8) служит для задания целевого фрейма. Если установить флажок Insert go button after menu (рис.18-9), то рядом с меню появится кнопка перехода. Связано это с тем, что при щелчке по уже выбранноу пункту никакого перехода не произойдет. Установка флажка Select first item after URL change (рис.18-10) приведет к тому, что после перехода к какой-либо странице в меню опять отобразится первый пункт. После ввода всех значений необходимо щелкнуть по кнопке ОК (рис.18-11).

Рис. 18. Окно создания меню перехода Jump Menu Редактирование меню перехода Для редактирования уже существующего меню, необходимо выделить его и на панели Инспектора Свойств (Properties) задать следующие опции (рис.19). В области Type выбрать тип меню: раскрывающееся меню (рис.19-1) или список (рис.19-2). В области Initially selected (рис.19-3) указать начальный пункт списка. Кнопка List Values (рис.19-4) открывает окно (рис.20), в котором вы можете изменить состав меню и ссылки (к сожалению, только вручную). Кнопка (рис.19-5) служит для раскрытия/закрытия дополнительных параметров панели Инспектора свойств (Properties).

Рис. 19. Редактирование меню перехода (Jump Menu)

Рис. 20. Редактирование состава меню перехода (Jump Menu).

Чтобы задать текст, видимый на вставленной кнопке, необходимо выделить ее и на панели Инспектора свойств (Properties) указать необходимое значение в поле Label (рис.21).

Рис. 21. Текст для кнопки меню перехода (Jump Menu)

4. Работа с рисунками Вставка рисунка Чтобы вставить рисунок необходимо выполнить команду Insert–Image, в открывшемся окне выбрать рисунок и нажать кнопку OK. Если рисунок находится вне корневого каталога, то Dreamweaver предупредит вас об этом и предложит сохранить его внутри корневого каталога, надо ответить Yes и указать папку, в которой будет сохранен вставляемый рисунок. Рисунок также можно вставить, щелкнув по кнопке Image на панели Insert (рис. 22).

Рис. 22. Панель Insert, категория Common: 1 – кнопка Hyperlink; 2 – кнопка Email Link; 3 – кнопка Table; 4 – кнопка Images; 5 – маркеры выделения рисунка. Ссылки с рисунка Ссылки с рисунка создаются так же, как и текстовые, только выделяется не участок текста, а рисунок (см. следующий параграф, поле Link). Настройка графики Различные характеристики выделенного рисунка можно быстро настроить с помощью панели Инспектор свойств (Properties) (рис. 23). Для того, чтобы увидеть все опции настройки, надо щелкнуть по треугольнику в правом нижнем углу панели (рис. 23-1).

Рис. 23. Панель Инспектора свойств, свойства рисунка •

•

• • • •

• • •

Для изменения размеров рисунка введите новые значения в поля W (ширина) и H (высота). Также изменить размеры рисунка можно с помощью маркеров выделения. Если размеры рисунка отличны от исходного, то цифры отображаются утолщенным шрифтом и восстановить начальные размеры можно щелкнув по символам W и H или по значку справа от этих полей (значок появляется только у рисунков, размеры которых были изменены). В поле Alt можно ввести текстовое значение, которое будет отображаться в браузере посетителя вместо рисунка, если в браузере отключен режим показа рисунков, или при наведении указателя мышки на рисунок. Поле Link предназначено для создания ссылки с выделенного рисунка. Действия при создании ссылки с рисунка те же самые, что и при создании текстовой ссылки. В полях V Space и H Space можно задать размер свободного поля вокруг рисунка. Если имеются фреймы, то в поле Target можно указать целевой фрейм, в котором будет открываться загружаемая страница. Если рисунок имеет очень большой размер в байтах, и соответственно, будет долго загружаться, то в поле Low Src можно указать путь к альтернативному рисунку, который, вероятно, будет иметь меньший размер и поэтому быстрее загрузится и отобразится в браузере. Когда загрузится исходный рисунок, то альтернативный будет автоматически заменен на первоначальный. Значение в поле Border задает толщину рамки вокруг рисунка. 3 кнопки за полем Border действуют аналогично таким же кнопкам при работе с текстом. В поле Align можно указать положение рисунка относительно текста: − Baseline - выравнивает рисунок с базовой линией текущей строки. Базовая линия - воображаемая линия, которая проходит по низу букв; − Top - текст будет располагаться наравне с верхней границей рисунка и под ним; − Middle - выравнивает текст по центру рисунка; − Bottom - выравнивает низ рисунка с окружающим текстом; − Texttop - самая верхняя часть букв текста будет выровнена с верхним краем рисунка; − Absolute Middle - выравнивает рисунок с серединой текущей строки. − Absolute Bottom - выравнивает рисунок с низом текущей строки; − Left - слева от текста. Текст будет обтекать рисунок по правому краю рисунка; − Right - справа от текста. Текст будет обтекать рисунок по левому краю;

Разделяемые рисунки Разделяемые рисунки создаются с помощью 3-х кнопок Rectangular Hotspot Tool (рис. 24-2), Oval Hotspot Tool (рис. 24-3), Polygon Hotspot Tool (рис. 24-4), расположенных в левом нижнем углу панели Инспектора свойств при выделенном рисунке (если эти кнопки не видны, то щелкните по изображению треугольника в правом нижнем углу панели Properties). Нужно отследить, чтобы имя карты Map (рис. 24-1) было уникальным для каждого рисунка.

Рис. 24. Кнопки создания разделяемых рисунков Очертите требуемую область рисунка и заполните поле Link. Интерактивные изображения Эффект переката. Этот эффект предназначен для замены одного рисунка другим в момент наведения на первоначальный рисунок указателя мыши; действует только в том случае, если рисунок выступает в качестве ссылки. Для организации такого эффекта надо щелкнуть по команде Insert – Image Objects – Rollover Image. В открывшемся окне (рис. 25) заполняются следующие поля. • Image Name – имя создаваемого эффекта. • Original Image – первоначальный рисунок. Можно выбрать с помощью кнопки Browse. • Rollover Image – рисунок, который будет появляться в момент наведения мыши. Рисунок можно выбрать с помощью кнопки Browse. • Preload Rollover Image – флажок должен быть обязательно установлен. Иначе, второй рисунок будет загружаться только при наведении мыши на первичный рисунок. • Alternate Text – текст (необязательно). • When Clicked Go to URL – ссылка на загружаемую страницу (необязательно). После установки всех необходимых значений щелкните по кнопке ОК.

Рис. 25. Окно установки свойств для Rollover Image Горизонтальная линия Чтобы вставить горизонтальную строку необходимо выполнить команду меню Insert – HTML – Horizontal Rule. Вставка Медиа Чтобы вставить звук или видео-файл на страницу, можно выполнить команду Insert – Media – Plugin (рис. 26-1) или на панели Insert (рис. 27-1) воспользоваться кнопкой Plugin (рис. 27-2). Примечание: Вид кнопки на вашем экране может отличаться от вида на рисунке, дело в том, что Dreamweaver отображает последнюю выбранную кнопку, в этом случае надо нажать на небольшой черный треугольник и в раскрывшемся списке выбрать кнопку Plugin.

Рис. 26. Вставка рисунка или видео с помощью меню

Рис. 27. Вставка рисунка или видео с помощью кнопки Plugin панели инструментов Insert В открывшемся диалоговом окне необходимо указать медиа-файл и щелкнуть по кнопке ОК. На странице появится значок, обозначающий вставленный файл. Выделив его, можно будет настроить на панели Инспектора Свойств (рис. 28) следующие опции объекта: 1 – имя объекта; 2 – ширина; 3 – высота; 4 – имя медиа-файла; 5 – адрес для загрузки плагина для Netscape Navigator; 6 – способ выравнивания; 7 – отступ по вертикали; 8 – отступ по горизонтали; 9 – размеры рамки; 10 – кнопка для ввода дополнительных параметров (например, hidden).

Рис. 28. Настройка свойств медиа-файла Примечание: Вы можете просто ввести в код страницы строки наподобие следующих: • для вставки аудио-файла, где audio_file.mp3 – название звукового файла. Правда, тег поддерживается не всеми браузерами. • для вставки видео-файла, где world.avi – название клипа.

5. Работа с таблицами Вставка таблицы Для вставки таблицы необходимо выполнить команду Insert – Table или щелкнуть по кнопке Insert Table на вкладках Common, или Layout, панели Insert (Ctrl+Alt+T). При этом откроется окно Insert Table где:

• • • • • • • • • •

Rows – количество строк таблицы. Columns – количество столбцов таблицы. Table width – ширина таблицы (можно указать в процентах или пикселях). Border thickness – толщина рамки вокруг таблицы. Cell Padding – пустое пространство между содержимым и границами ячейки (в пикселях). Cell Spacing – расстояние между отдельными ячейками (в пикселях). Header – расположение заголовочных столбцов и/или строк (или их отсутствие). Caption – название таблицы. Align caption – расположение названия таблицы. Summary – описание таблицы (в браузере не отображается).

Выделение таблицы, строки, столбца, ячейки Для выделения таблицы необходимо подвести указатель мыши к правой или нижней границе таблицы, нажать левую кнопку и, не отпуская ее, провести поперек границы; или навести указатель мыши на одну из этих границ и нажать левую кнопку. Для выделения строки необходимо подвести указатель мыши к левой границе строки и, когда он примет вид утолщенной стрелки, нажать левую кнопку. Если после выделения первой строки, удерживая кнопку нажатой, провести указатель вдоль соседних строк, то выделятся и они. Выделив одну строку, можно в дополнение к ней выделить и другую строку точно таким же образом, если нажать клавишу Ctrl. Столбец (группа столбцов) выделяется, как и строка (группа строк), только указатель мыши подводится сверху к верхней границе столбца (группы столбцов). Для выделения ячейки необходимо нажать клавишу Ctrl и щелкнуть левой кнопкой мыши внутри ячейки; несколько ячеек – щелкнуть мышью внутри этих ячеек, не отпуская клавишу Ctrl. Чтобы выделить последовательно расположенные ячейки, необходимо установить курсор в первой ячейке, нажать клавишу Shift и щелкнуть мышью в последней. Также можно выделить группу ячеек, наведя указатель мыши на первую ячейки, нажать кнопку мыши и, не отпуская ее, провести указателем над всеми выделяемыми ячейками. Перемещение таблицы Для перемещения таблицы необходимо подвести указатель мыши к нижней границе таблицы, подождать, пока рядом с указателем не появится решетка, прижать левую кнопку и, не отпуская ее, переместить таблицу в другой абзац. Свойства таблицы Когда таблица выделена, в окне Инспектора свойств отображаются следующие опции: • • •

Table Id – идентификатор таблицы, который может использоваться при обращении к таблице. Rows – количество строк. Cols – количество столбцов.

• • • • • • • • • •

W – ширина таблицы (указывается в пикселях или процентах). H – высота таблицы (указывается в пикселях или процентах). CellPad – пустое пространство между содержимым и границами ячейки (в пикселях). CellSpace – расстояние между отдельными ячейками (в пикселях). Align – выравнивание. Border – ширина рамки. Bg Color – цвет фона таблицы. BrdrColor – цвет рамки таблицы. Bg Image – фоновый рисунок таблицы. Также в окне Инспектора свойств имеется 6 кнопок (рис. 29): 1 – удаляет значение для ширины столбцов таблицы; 2 – конвертирует ширину таблицы в пиксели; 3 - конвертирует ширину таблицы в проценты; 4 - удаляет значение для высоты строк таблицы; 5 - конвертирует высоту таблицы в пиксели; 6 конвертирует высоту таблицы в проценты.

Рис. 29. Кнопки очистки и преобразования размеров таблицы Свойства ячейки При установке указателя внутри ячейки в окне Инспектора свойств появляются следующие опции: 2-е кнопки для объединения и разделения ячеек (при разделении ячейки появляется диалоговое окно, в котором надо указать, что вы хотите получить): • строки (Row) или столбцы (Cols), а также количество того и другого). • Horz – выравнивание по горизонтали. • Vert – выравнивание по вертикали. • W – ширина ячейки. • H – высота ячейки. • No Wrap – установленный флажок запрещает перенос текста. • Header – ячейка считается заголовочной. • Bg (верхний) – фоновый рисунок. • Bg (нижний) – цвет фона. • Brdr – цвет рамки. Объединение, разбиение, добавление, удаление ячеек Для объединения ячеек необходимо выделить несколько ячеек (несколько строк или столбцов) и щелкнуть по кнопке Merges selected cells using spans в окне Инспектора

свойств. Для разбиения ячеек используется кнопка Splits cell into rows or columns в окне Инспектора свойств. Текущую ячейку можно разбить на несколько строк или столбцов. Чтобы добавить строку необходимо установить курсор в последнюю ячейку и нажать клавишу Tab. Для удаления таблицы, строки, столбца необходимо их выделить и нажать клавишу Delete. Команды меню для работы с таблицами Основные команды для работы с таблицами распределены по нескольким меню – Insert, Modify, Commands. В меню Insert имеется команда Table для вставки таблицы, также в пункте Table Objects имеются команды для вставки строк или столбцов и команда Import Tabular Data для импортирования таблиц. В меню Modify имеется пункт Table, в котором находятся следующие команды: • Select Table – вставки таблицы. • Merge Cells – объединение ячеек. • Split Cell – разбиение ячеек. • Insert Row – вставка строки над ячейкой. • Insert Column – вставка столбца слева от текущей ячейки. • Insert Rows or Columns – вставка нескольких строк или столбцов. • Delete Row – удаление текущей строки. • Delete Column – удаление текущего столбца. • Increase Row Span – объединение текущей ячейки с нижележащей. • Increase Column Span – объединение текущей ячейки и следующей за ней в той же строке. • Decrease Column Span, Decrease Row Span – обратные действия 2-м вышеперечисленным. • Clear Cell Heights – очищение заданной высоты. • Clear Cell Widths – очищение заданной ширины. • Convert Widths to Pixels – преобразование размеров ширины в пиксели. • Convert Widths to Percent – преобразование размеров ширины в проценты. • Convert Heights to Pixels – преобразование размеров высоты в пиксели. • Convert Heights to Percent – преобразование размеров высоты в проценты. Кроме того, в меню Commands имеются две команды: Format Table – для выбора шаблона оформления таблицы и Sort Table – для сортировки табличных данных. Режим макетирования Режим макетирования предназначен для оформления структуры создаваемой страницы с помощью таблиц(ы). Перейти в него можно следующими способами: щелкнуть по команде View – Table Mode – Layout Mode, активизировать вкладку Layout и щелкнуть по кнопке Layout Mode ( + ). В режиме макетирования можно рисовать таблицы

– кнопка Draw Layout Table и/или ячейки – кнопка Draw Layout Cell. Выйти из этого режима можно одним из 3-х способов: щелкнув по команде View – Table Mode – Standard Mode, активизировав вкладку Layout и щелкнув по кнопке Standard Mode.

6. Работа с фреймами Создание фрейма Для создания фрейма необходимо сначала создать новую страницу, но можно разделить на фреймы и существующую. Затем выполнить команду Insert – HTML - Frames и выбрать соответствующий фреймсет (рис. 30). Или на панели Insert перейти на категорию Layout (рис.31-1) и щелкнуть по кнопке Frames (рис. 31-2). Вид полученной кнопки на экране может отличаться от вида на рисунке, потому что Dreamweaver отображает последнюю выбранную кнопку, в этом случае надо нажать на небольшой черный треугольник и в раскрывшемся списке выбрать нужный фреймсет. Если границы фреймов не видны, то нужно выполнить команду View – Visual Aids – Frame Borders. Примечание: В дополнительном фрейме по умолчанию создается новая страница.

Рис. 30. Создание фреймсета с помощью меню

Рис. 31. Создание фреймсета с помощью кнопки Frames, в категории Layout панели Insert Вставка и удаление фрейма Чтобы вставить новый, дополнительный фрейм необходимо навести указатель мыши на границу, прижать левую кнопку и, удерживая нажатой клавишу Alt, переместить мышь. Или воспользуйтесь теми же командами, что и при создании фреймсета. Чтобы удалить фрейм необходимо навести указатель мыши на границу и перетащить ее (границу) за пределы окна. Выделение фрейма и фреймсета Чтобы выделить определенный фрейм необходимо нажать клавишу Alt и щелкнуть по фрейму. Или выбрать панель Frames (Window – Other - Frames или Shift-F2) и щелкнуть по фрейму в окне палитры. Чтобы выделить весь фреймсет следует щелкнуть по границе, разделяющей отдельные фреймы. Примечание: Содержание Инспектора свойств будет меняться в зависимости от того, какой именно объект выделен. Назначение начальной страницы Выберите фрейм и в Инспекторе свойств, в поле Src, укажите нужную страницу. Сохранение фреймсета Выделите весь фреймсет и в меню File щелкните по команде Save Frameset. Будет сохранен только фреймсет. Если в отдельных фреймах были созданы новые страницы, то надо выделить такой фрейм и в меню File щелкнуть по команде Save Frame, несмотря на название команды, сохранена будет именно страница. Чтобы одним махом сохранить и сам фреймсет и новые страницы созданные в отдельных фреймах, щелкните по команде Save All в меню File и тогда, поочередно, будут сохранены и сам фреймсет и новые страницы во фреймах, причем Dreamweaver выделит текущий сохраняемый объект.

Свойства фреймсета При выделении фреймсета на панели Инспектора свойств становятся доступны следующие опции (рис. 32): 1 – поле для выбора отображения границ фреймсета; 2 – ширина границы фреймсета; 3 – цвет границы фреймсета; 4 – приблизительная схема деления фреймсета; 5 – размеры фрейма; 6 – поле для выбора единиц измерения размеров фрейма.

Рис. 32. Свойства фреймсета. Свойства фрейма При выделении фрейма на панели Инспектора свойств становятся доступны следующие опции (рис. 33): 1 – название текущего фрейма; 2 - поле для указания начальной страницы фрейма; 3 – отображение полос прокрутки; 4 – возможность изменения размеров фрейма в браузере пользователя; 5 - поле для выбора отображения границ фрейма; 6 – цвет границы фрейма; 7 – размеры отступа по ширине; 8 - размеры отступа по высоте.

Рис. 33. Свойства фрейма Целевые фреймы При создании ссылок на страницах открытых во фреймсете в поле Target (рис. 34) появляются названия отдельных фреймов и, таким образом, можно указать, в какой именно фрейм загрузить страницу. Кроме названий имеющихся фреймов в этом поле имеются еще 4 значения: • _blank – страница будет загружаться в новое окно браузера. • _parent – страница будет загружаться вместо родительского фреймсета. • _self – страница будет загружаться в тот же самый фрейм, где находилась ссылка. • _top – раскладка окна браузера на фреймы будет уничтожена, и загружаемая страница займет все окно браузера.

Рис. 34. Установка целевых фреймов.

7. Работа со слоями Настройка свойств слоя по умолчанию Для настройки первоначальных свойств слоя выберите категорию Layers (рис. 35-1) диалогового окна Preferences (Edit - Preferences).

Рис. 35. Настройка свойств слоя по умолчанию Здесь настраиваются: • видимость слоя – Visibility (рис. 35-2). • ширина слоя – Width (рис. 35-3). • высота – Height (рис. 35-4). • цвет фона – Background Color (рис. 35-5). • фоновый рисунок слоя – Background Image (рис. 35-6). • вложение слоев – Nesting (рис. 35-7) (если этот флажок установить, то следующий слой будет создаваться внутри предыдущего). • совместимость с Netscape Navigator 4 (рис. 35-8) – Netscape 4 Compatibility (браузер Netscape Navigator 4 неверно отображает страницу при изменении ее размера, установка этого флажка вставляет специальный скрипт, который перегружает страницу при изменении размеров). Создание слоя Для создания слоя со свойствами по умолчанию, щелкните по команде Layer в меню Insert (рис. 36), и в этом случае слой будет создан там, где стоит курсор, или, нажмите кнопку Draw Layer (вкладка Layout на панели Insert) и нарисуйте слой в любом месте страницы (рис. 37).

Рис. 36. Создание нового слоя с помощью меню

Рис. 37. Кнопка для рисования нового слоя (панель Insert, категория Layout). Выделение слоя Для выделения слоя необходимо указатель мыши навести на границу слоя, и щелкнуть левой кнопкой или установить курсор внутри слоя и щелкнуть по маркеру выделения, который появится над левым верхним углом. Для выделения нескольких слоев следует выделить первый и, удерживая нажатой клавишу <Shift>, щелкнуть по остальным. Свойства слоя При выделении слоя на панели Инспектора свойств становятся доступными следующие опции (рис. 38): • Layer ID – идентификатор слоя. • L – левая граница слоя. • T – верхняя граница слоя. • W – ширина слоя. • H – высота слоя. • Z-index – положение слоя относительно других (перекрытие). • Vis – видимость слоя (default – настройка по умолчанию, inherit – если слой вложен в другой слой, то видимость будет определяться родительским слоем, visible – видимый, hidden – невидимый). • Bg Image – фоновый рисунок для слоя. • Bg Color – фон слоя. • Overflow – 4 возможности: visible – слой растягивается, чтобы вместить все объекты, hidden – все, что выходит за рамки слоя отсекается, scroll – постоянно

•

показываются полосы прокрутки, auto – если размеры объекта превышают размеры слоя, то появляются полосы прокрутки. в области Clip содержатся 4 поля: L – левая граница, T – верхняя граница, R – правая граница, B – нижняя граница, значения задают область отображения в слое (при задании каких-либо значений в этих полях все, что находится за пределами, будет скрыто).

Рис. 38. Свойства слоя Порядок расположения слоев (перекрытие слоев) За порядок расположения слоев отвечает значение в поле Z-index окна Инспектора свойств: чем выше это значение, тем выше располагается слой (относительно других). Удаление слоя Для удаления слоя необходимо выделить слой и нажать клавишу .

8. Работа со стилями Создание нового стиля Для создания нового стиля необходимо выполнить команду Text - CSS Style - New или в нижней части панели Design (рис. 39-1) на вкладке CSS Style (рис. 39-2) щелкнуть по кнопке New CSS Style (рис. 39-3) (с изображением знака «+») Примечание: Панель активизируется командой Window - CSS Style).

Рис. 39. Создание нового стиля с помощью кнопки на панели Design В результате любого из этих действий откроется диалоговое окно (рис. 40), где можно переключиться в один из режимов: Class (can apply to any tag), Tag (redefines the look of a specific tag), Advanced (IDs, contextual selector, etc).

Рис. 40. Окно выбора создания нового стиля Краткое описание режимов: •

Class (can apply to any tag). При выборе этого переключателя надо ввести в поле Name имя создаваемого стиля, • Tag (redefines the look of a specific tag). Переопределение существующих тегов. Применяется автоматически ко всем элементам, использующим данный тег, для этого в поле Tag (бывшее до этого Name) надо выбрать переопределяемый тег. • Advanced (IDs, contextual selector, etc). Определяет стиль для ссылок, для этого необходимо выбрать в поле Selector (бывшее Name или Tag): − a:link - не посещенные ссылки. − a:visited - посещенные ссылки. − a:hover - в момент наведения указателя мыши на ссылку. − a:active - последняя нажатая. Также надо определиться (поле Define In), нужно ли создать отдельный самостоятельный файл стиля (New Style Sheet File) или стиль будет разрабатываться только для текущей страницы (This Document Only) и храниться в коде самой страницы. В том случае, если будет выбрана первая возможность, Dreamweaver (после щелчка по кнопке ОК) выведет окно, в котором предложит указать имя нового стиля и папку для сохранения, при выборе второй возможности такое окно, естественно, не появится. В конце концов, появится окно, в котором можно определить новый стиль. В левой части окна в списке Category выбирается необходимая категория, а в правой части определяются характеристики создаваемого стиля. • Type. Настройка текста: − Font – шрифт. − Size – размер шрифта. − Weight – толщина букв. − Style – начертание букв. − Variant – позволяет выводить текст уменьшенными заглавными буквами. − Line Height – межстрочное расстояние. − Case – регистр символов. − Decoration: underline – подчеркнутый, overline – надчеркнутый, line-through – перечеркнутый, blink – мигающий, none – никакой. − Color – цвет букв.

•

•

•

•

•

• •

Background. Фон: − Background Color – цвет фона. − Background Image – фоновый рисунок. − Repeat – повторение рисунка. − Attachment – определяется, перемещается ли фоновое изображение вместе со страницей при прокрутке или будет стоять на месте. − Horizontal Position, Vertical Position – определяет начальную позицию фонового рисунка относительно элемента, если Attachment – Fixed, то позиция высчитывается относительно окна браузера. Block: − Word Spacing – расстояние между словами. − Letter Spacing – расстояние между буквами. − Vertical Alignment – вертикальное выравнивание. − Text Align – горизонтальное выравнивание. − Text Indent – отступ для первой строки. − Whitespace – настройка обработки пробелов и переноса. − Display – определяет, будет ли элемент показываться, и как он будет показываться. Box. Определение прямоугольного блока, в который заключается текст или любой другой элемент страницы: − Width и Height – ширина и высота блока. − Float – выравнивание блока. − Clear – запрещает выравнивание относительно предыдущего блока. − Padding – отступ между границами блока и его содержимым. − Margin – отступ между границами блока и другими элементами. − Top, Right, Bottom и Left – сверху, справа, снизу, слева, Same For All – одинаковые значения для отступов (задается только одно значение). Border. Оформление рамки вокруг объекта: − Style – стиль рамки. − Width – ширина. − Color – цвет, остальные значения примерно те же, что и для предыдущей группы. List. Настройка списка: − Type – тип списка. − Bullet Image – графическое изображение для маркера. − Position – внешнее или внутреннее расположение маркера. Positioning. Размещение в слое (см. Слои): Extensions: − Page Break – разрыв страницы при печати (Before - до, After - после). − Visual effect – визуальные эффекты (Cursor – набор курсоров появляющихся при наведении указателя мышки на объект; Filter – набор специальных эффектов: поворот по горизонтали, поворот по вертикали, перевод в оттенки

серого, инвертирование цветов, перевод в черно-белую гамму, как на рентгеновском снимке). Использование стилей Для применения стиля на панели Инспектора свойств можно выбрать поле Style или выполнить команду Text - CSS Styles, или воспользоваться панелью CSS Styles (Window CSS Styles) и раскрыв список доступных стилей, щелкнуть по имени стиля. Перенос стилей Для того чтобы использовать уже имеющийся стиль, необходимо выполнить команду Text - CSS Styles – Manage Styles, или выбрать эту же команду в поле Style Инспектора свойств. Откроется диалоговое окно Edit Style Sheet, в котором надо нажать на кнопку Attach, после чего щелкнуть по кнопке Browse и выбрать файл присоединяемого стиля. Теперь этот присоединенный стиль будет готов к использованию. Нужно проследить, чтобы в поле Add As стоял переключатель Link (опция Import работает не во всех браузерах). Примечание: Можно щелкнуть по кнопке Attach Style Sheet на панели стилей (Window CSS Styles). В этом случае сразу возникнет окно присоединения стилей. Редактирование стиля Для редактирования стиля используется команда (кнопку) Edit, которая находится в том же окне Edit Style Sheet. После выбора редактируемого стиля и щелчка по этой команде открывается окно, названное по имени стиля, и надо щелкнуть по кнопке и сразу возникает окно определения стиля.

9. Публикация сайта Для публикации сайта необходимо активизировать панель Files (Window - Files) (рис. 41-1) и щелкнуть по кнопке Expand/Collapse (рис. 41-4). Панель полностью раскроется. Если не имеется выход в интернет, то следует щелкнуть по кнопке Connects to remote host (рис. 41-2) (подразумевается, что все настройки для соединения были указаны правильно). При этом в левой части появится содержание удаленного сайта (рис. 42-1), а в правой части окна – содержание локального сайта (рис. 41-2). Затем необходимо выделить папку (группу папок), файлы (группу файлов) и щелкнуть по кнопке Put File(s) (рис. 41-3), выделенные папки и файлы будут скопированы на удаленный сервер. Чтобы свернуть окно, снова надо щелкнуть по кнопке Expand/Collapse. Для удаления файла с удаленного узла нужно выделить этот файл в левой части и нажать клавишу Delete.

Рис 41 . Панель Files

Рис. 42. Публикация сайта

Приложение A Как получить e-mail Для того чтобы открыть свой сайт, понадобится адрес электронной почты. Его можно получить бесплатно на многих серверах: mail.ru, chat.ru, inbox.ru, zmail.ru, null.ru, usa.net, mail.yahoo.com и т.д. Процедура получения адреса, как правило, проста или очень проста. Мы опишем эту процедуру на примере mail.ru. Необходимо войти на www.mail.ru и выбрать пункт «Регистрация». Появится «Соглашение об использовании», с которым надо согласиться, нажав внизу кнопку «Я принимаю условия». После этого, собственно, и начнется регистрация: Вам предложат ввести имя и пароль, подтвердить пароль, выбрать контрольный вопрос на тот случай, если будет забыт пароль, и ответить на несколько дополнительных вопросов. Затем нужно нажать кнопку «Дальше» и ответить на вопросы анкеты. Как получить место под сайт Если нужно разместить сайт в локальной сети, то Вам необходимо обратиться к системному администратору за разъяснениями. Кроме этого, сайт можно разместить в Интернете. Место под сайт также предоставляют многие сервера: www.boom.ru, www.bos.ru, www.chat.ru, www.narod.ru, www.rambler.ru, www.fortunecity.com, www.spree.com, www.tripod.com, www.hotmail.ru, www.zden.com и т.д. В качестве примера опишем открытие сайта на newmail.ru: • Для того чтобы открыть сайт, нажмите ссылку "зарегистрироваться" внизу страницы. • Откроется новое окно, в котором нажмите кнопку "Регистрация". • Появится текст соглашения, нажмите кнопку «Я принимаю условия». • Откроется окно с первой анкетой. Выберите логин (регистрационное имя) и пароль. Нужно иметь в виду, что логин не имеет отношения к имени Вашего сайта или почтового ящика. Этот логин только для входа. • Итак: вводятся имя и пароль, подтверждается пароль, выбирается контрольный вопрос на тот случай, если будет забыт пароль. При нажатии ссылки "Зарегистрироваться" появится страница с анкетой, в которой нужно ввести ответы. Примечание: К сожалению, все вышеизложенные данные могут устареть. Как опубликовать свой сайт Файлы на сервер можно переписать с помощью протокола FTP. Поддержка FTP включена в большинство программ для разработки сайтов, но можно воспользоваться и специальными программами, например, CuteFTP. Для размещения файлов нужно указать адрес FTP-сервера, логин и пароль. Рассмотрим, некоторые возможности наиболее популярных программ.

Программа FAR Нажмите Alt+F1 и выберите в меню пункт "FTP", перейдите на появившуюся панель (клавиша TAB). Затем нажмите комбинацию клавиш Shift+F4, после чего появится окно с полями: • "ftp://пользователь:пароль@сервер:порт/папка"; • "пароль"; • "Описание FTP"; В поле "ftp://поль ..." напишите имя Вашего ftp-сервера. Остальные поля оставьте пустыми. НЕ ЗАБУДЬТЕ поставить крестик в поле "Спрашивать пароль непосредственно перед подключением". После этого нажмите "Сохранить". Теперь в панели FTP появилась строка с именем Вашего ftp-сервера. Нажмите на нее, и у вас спросят логин и пароль. Введите логин и пароль; ВНИМАНИЕ! Вы должны быть уже подключены к Интернету, чтобы закачивать файлы. Если все прошло успешно, пароль и логин введены правильно, то вы окажетесь в вашем личном каталоге на сервере. Дальше работаете как обычно - копируете и удаляете файлы из одной панели в другую. Программа CuteFTP В программе CuteFTP нажмите кнопку F4 (ту, что находится на клавиатуре) и тогда откроется окно, в котором надо установить: • FTP Host Address: адрес сервера. • FTP site User Name: ваш логин. • FTP site Password: ваш пароль. • В строке Label for site: любой текст. Заполнив форму, нажмите кнопку Edit. Поставьте отметку на Use PASV mode. Нажмите кнопку OK, это окно закроется, а в оставшемся окне нажмите кнопку Connect. Связь будет установлена. Перемещаете файлы из левого окна (Ваш компьютер) в правое (каталог на сервере). Программа Internet Explorer 5 В поле адреса введите Ваше имя, Ваш пароль и адрес сервера, примерно в таком виде: ftp://Ваше_имя:Ваш_пароль@адрес_сервера (ftp://login:[email protected]/mysite). После этого можно перетаскивать файлы и папки прямо в окно браузера. Программа Windows Запустите «Сеанс MS-DOS» (Пуск (Start) - Выполнить (Run)), в появившемся окне введите «command», и затем нажмите OK. Примечание: Можно вместо command сразу ввести ftp и затем воспользоваться командой open адрес сервера для подсоединения к серверу. Или через кнопку Пуск (Start) выполните команду Программы (Program) - Сеанс MS-DOS(Command Prompt). В появившемся окне введите ftp – адрес сервера, например – ftp ftp.esstu.ru и нажмите клавишу <Enter>. (Вы должны быть подсоединены к интернету).

Примечание: Можно просто ввести ftp и затем воспользоваться командой open адрес сервера для подсоединения к серверу. В ответ на запрос введите имя и пароль. Для работы используйте следующие команды: • binary – переход в двоичный режим. Очень помогает. • dir – показывает содержание текущего каталога (папки) с описанием. • ls – показывает содержание текущего каталога (папки). • mkdir имя каталога – создает новый каталог (папку). • cd имя каталога – переход в другой каталог (папку). • pwd – напоминает в каком каталоге вы находитесь. • rename старое имя новое имя – переименовывает файл. • rmdir имя каталога – удаляет пустой каталог. • send файл – посылает указанный файл на сервер в текущий каталог. • put файл – посылает указанный файл на сервер в текущий каталог (то же, что и предыдущая). • mput список файлов – посылает указанные файлы на сервер в текущий каталог (позволяет использовать маску). • get файл – получает указанный файл с сервера. • mget список файлов – получает указанные файлы с сервера (позволяет использовать маску). • del, dele, delete – удаляет указанный файл на сервере. • ? – список возможных команд. • help – список возможных команд (то же, что и предыдущая). • ? команда – краткое описание команды. • help команда – краткое описание команды (то же, что и предыдущая). • bye – отсоединиться от сервера, выйти из режима ftp, выход из окна MS-DOS. • quit – отсоединиться от сервера, выйти из режима ftp, выход из окна MS-DOS. Кроме того, в интернете полно руководств по ftp с подробным описанием. Примечание: Как правило, на любой ftp-сервер можно войти с минимальными правами под именем anonymous, а в качестве пароля ввести свой e-mail адрес. Если Вы еще не завели почту, то попробуйте вместо почтового адреса вписать в строку пароля любой другой текст, или не вводите ничего. Есть большая вероятность что сработает.

Приложение B Немного о JavaScript JavaScript – язык, разработанный фирмой Netscape Communication (не стоит путать с языком Java фирмы Sun Microsystems). Работает в паре с HTML. Основные понятия <script>, – теги, обозначающие начало и конец скрипта. Например: <script language ="JavaScript"> – начало скрипта. ……….. – конец скрипта Здесь language – это атрибут скрипта, в данном случае, сообщающий браузеру об использовании языка JavaScript, а не VBScript. object – объект, над которым производится какое-либо действие (method) и имеющий свойства (property). Например: есть такой объект document – в общем случае это htmlстраница, или window – этим объектом чаще всего является окно браузера. Разные объекты обладают своими собственными методами и свойствами. method – действие которое производится над объектом (object), является функциейчленом объекта. Например: write – писать. Пример использования: Я изучаю JavaScript! <script language ="JavaScript"> document. write (“Любой текст”); - данный код напишет на Вашей странице фразу “Любой текст”. events – события. Нечто напоминающее приход Нового года в детстве. Например: load – происходит, когда браузер закончил загрузку Вашей страницы. event handler – обработчик события. Каждое событие имеет свой обработчик, который отличается добавлением префикса on к имени этого события. Допустим, браузер загрузил Вашу страницу, и произошло событие load, значит, у этого события есть свой обработчик onLoad, который можно вызвать, чтобы описать какие-то действия. (Т.е. обработчик события – это, своего рода, способ распознать, что определенное событие произошло и немедленно отреагировать, нагрузив браузер дополнительным заданием.) property – свойство которым обладает объект (object), является переменной-членом объекта. Свойству можно уверенно присваивать различные значения. Например: status – строка состояния браузера (находится, как правило, внизу окна).

Пример использования event handler и property: Я изучаю JavaScript! Любой текст - в строке состояния будет напечатано «Спасибо!!!». (Если Вы спросите: «А где теги < script > и ?», то будете совершенно правы: их нет. Все обработчики событий пишутся внутри тегов HTML, и браузер воспринимает их как атрибуты тега.) Обратите внимание на использование двойных и одинарных кавычек, их можно поменять местами, но не стоит путать (т.е. в пару к одинарной кавычке нельзя ставить двойную кавычку). В данном случае кавычки твердо указывают, что когда произошло событие onLoad, надо в строке состояния: "status ", вывести сообщение: 'Спасибо!!!’. function – несколько операторов, объединенных для выполнения одной общей цели (или нескольких целей, но это горячо не рекомендуется авторами толстых книжек). Например: function pass(){alert("Вы уходите от нас на сайт ВСГТУ.");} – создается функция с именем pass(),между фигурными скобками – тело функции. В круглых скобках после имени функции могут находиться передаваемые функции параметры (здесь их нет). var – объявляет новую переменную, которой можно присваивать различные, необходимые в данном контексте значения (или ничего не присваивать, если удача всегда сопутствует Вам). new – создает новый экземпляр объекта (полную его копию). Например: new window создаст еще одно окно браузера. . – точка, селектор члена класса. Что имеется ввиду? Разные объекты, как это ни прискорбно, могут иметь методы и свойства с одинаковыми именами. И вот, чтобы указать к какому именно объекту относится данный метод или свойство, приходится сначала писать имя этого объекта, затем ставить этот самый селектор члена класса (в виде точки), и только после этого указывать метод или свойство. Или, если вы создадите несколько экземпляров (копий) какого-то объекта, то для того, чтобы указать к какому именно экземпляру относится метод или свойство, вам тоже придется писать имя этого экземпляра, селектор (т.е. ставить точку) и сам метод или свойство. Иначе отладчик (если он есть) сразу начнет действовать на нервы и достанет своими сообщениями. оператор – символы, с помощью которых выполняются определенные действия. Например: символ равенства = (оператор присваивания) присваивает переменной какое-либо значение. тип – определяет характер данных, которые используются в переменных. В

JavaScript используются 4 типа данных: числовой, булев, строковый, нулевой (null). массив – набор данных (переменных, элементов) одного типа под одним именем. Доступ к переменной осуществляется по ее индексу, добавленному к имени массива, индекс заключается в квадратные скобки [], перечень индексов начинается с нуля. Например: massive = new Array(3); – будет создан массив с именем massive, состоящий из 3 переменных. Затем можно присвоить значения переменным массива: massive[0] = “Первая переменная”; massive[1] = “Вторая переменная”; massive[2] = “Третья переменная”; Примечание: В JavaScript не существует принципиальной разницы между строковыми и числовыми массивами. Несколько простых примеров использования JavaScript Пример 1 (alert.htm) alert Переход на сайт ВСГТУ. onClick – обработчик события, вызывается когда посетитель щелкнет (кликнет) по ссылке. alert – встроенная функция которая выводит окно сообщения с произвольным текстом. В данном случае - “Прощайте!!!”. Упоминание функции в теле программы называется вызовом функции или обращением к функции. Такое обращение заставляет функцию активизироваться (сработать). Пример 2 (functionAlert.htm) function (alert) <script language="JavaScript"> function pass(){alert("Вы уходите от нас на сайт ВСГТУ.");} Переход на сайт ВСГТУ.

Определяется функция pass(), затем она вызывается в обработчике события onClick. Функция pass() содержит в себе встроенную функцию alert(). Пример 3 (button.htm) button Событие MouseOver происходит когда посетитель навел указатель мышки на ссылку, событие MouseOut происходит когда посетитель уберет указатель мышки с ссылки. Рисунки сохраняются в массиве images дочернем к объекту document (т.е. document. images[]). Атрибут name тега img задает имя для рисунка, которое позволяет браузеру распознать к какому рисунку (объекту) отнести какое-либо действие. В данном случае равнозначными обращениями являются document.mypicture.src, document. images[”mypicture”].src, document.images[0].src. Пример 4 (twoButtons.htm) 2 кнопки <script language = "JavaScript"> img1over = new Image(); img1over.src = "button1over.gif"; img1norm = new Image(); img1norm.src = "button1norm.gif"; img2over = new Image(); img2over.src = "button2over.gif"; img2norm = new Image(); img2norm.src = "button2norm.gif"; function fOver(name) {document.images[name].src = eval(name + "over.src");} function fOut(name) {document.images[name].src = eval(name + "norm.src");}


Для 4-х рисунков button1over.gif, button1norm.gif, button2over.gif, button2norm.gif создаются 4 объекта Image, в которые загружаются эти рисунки. Таким образом, рисунки содержатся в кэше локального компьютера, что позволяет производить замену рисунков практически мгновенно. Далее создаются 2-е функции fOver(name) и fOut(name), первая из которых производит замену исходного рисунка на другой при наведении указателя мыши на этот рисунок, а вторая возвращает исходный рисунок, когда указатель мыши убран с изображения. Какой именно рисунок менять, определяется с помощью параметра name. Встроенная функция eval() вычисляет значение строки, т.е. если пользователь наведет указатель мыши на кнопку 1, то значение name станет img1, после добавления over.src параметром функции eval() станет img1over.src, вычислив этот параметр, функция вернет значение button1over.gif. Обработчики события onMouseOver и onMouseOut происходят, когда посетитель наведет и уберет указатель мышки с кнопки, соответственно. Пример 5 (runstr.htm) Бегущий текст в строке состояния <script language = "JavaScript"> window.status = " Да здравствует ЮКОС! Самая нефтяная из всех нефтяных компаний в мире!” + “ Ура, товарищи!!!"; function RunStr() { window.status = window.status.substring(1,window.status.length) + window.status.substring(0,1); window.setTimeout("RunStr()", 250); } Вначале свойству window.status присваивается произвольное значение. Затем создается рекурсивная функция RunStr(), в которой организуется перемещение строки. Метод substring(i, n) возвращает подстроку с i-той позиции по n-ую, свойство length содержит длину строки. Метод setTimeout("RunStr()", 250) вызывает функцию RunStr() через заданное число миллисекунд. Обработчик события onLoad также вызывает функцию RunStr() после окончания загрузки страницы. Браузеры, не поддерживающие JavaScript, часто просто выводят текст скрипта на

страницу. Чтобы этого не было, рекомендуется записывать скрипты внутри тегов комментариев HTML: <script language ="JavaScript"> .

БИБЛИОГРАФИЯ 1. Дж. Тарин Тауэрс. Macromedia Dreamweaver MX для Windows и Macintosh. ДМК Пресс, 2003 г. - 768 с. 2. On-Line учебник по Macromedia Dreamweaver MX. http://wflash.narod.ru/books/dreamweavermx/