Инфоурок / Информатика / Конспекты / Разработка Web- сайтов на уроках информатики (10 класс)
Обращаем Ваше внимание: Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии (2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации).

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Законы экологии», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

ПРИЁМ ЗАЯВОК ТОЛЬКО ДО 21 ОКТЯБРЯ!

Конкурс "Законы экологии"

Разработка Web- сайтов на уроках информатики (10 класс)

библиотека
материалов


ГОУ СПО Саранский колледж электроники, экономики и права им. А. И. Полежаева








Т. Ю. Мордашева












Учебное пособие по дисциплине

«Основы проектирования Web-сайтов»

часть 3 «Основы работы в Dreamweaver 8.0»


















Саранск 2009






Учебное пособие по дисциплине «Основы проектирования Web-сайтов», часть 3 «Основы работы в Dreamweaver 8.0»/ Т. Ю. Мордашева - Саранский колледж электроники, экономики и права им. А. И. Полежаева; - Саранск, 2009. -29с.





Учебное пособие «Основы работы в Dreamweaver 8.0» по дисциплине «Основы проектирования Web-сайтов» предназначено для преподавателей и студентов специальности 230106 «Техническое обслуживание средств вычислительной техники и компьютерных сетей». В пособии проводится описание основных понятий и приемов работы в программе по разработке WEB – сайтов DreamWeaver 8.0.



Учебное пособие



Мордашева Т. Ю.






Бумага офсетная. Формат 60х84 1/16. Гарнитура Таймс.

Печать способом ризографии.





Отпечатано с оригинала – макета заказчика

430000, г. Саранск, пр. Ленина, 10.





©Мордашева Т. Ю.

Содержание

Введение…………………………………………………………………………...4

Введение 5

1. Интерфейс Dreamweaver 6

1.1. Рабочий экран 6

1.3. Режимы работы 7

1.4. Строка меню 9

1.5. Панель инструментов 10

1.6. Селектор разметки 11

1.7. Размер страницы 11

1.8. Инспектор свойств 11

1.9. Панель Insert (Палитра объектов) 13

1.10. Инспектор кода 14

2. Создание проекта 16

2.1. Создание проекта учебного Web-узла 16

2.2. Планирование Web-узла 17

2.3. Планирование структуры 17

2.4. Планирование навигации 18

2.5. Планирование шаблонов и библиотек 18

2.6. Создание локального Web-узла 19

2.7. Окно просмотра Web-узла 21

3. Гиперссылки и навигация 22

3.1. Создание ссылок 22

3.2. Создание меню переходов 25

3.3.Создание панели навигации 27

Введение

Macromedia Dreamweaver 8.0 - профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети. Практикуете ли вы написание кода HTML вручную или предпочитаете работать в визуальной среде редактирования, Dreamweaver обеспечивает вас полезными инструментальными средствами, чтобы увеличить ваш опыт создания web-страниц и сайтов.

Визуальные возможности редактирования в Dreamweaver позволяют быстро создавать страницы без того, чтобы писать код вручную.

Dreamweaver также обеспечивает полно-функциональную среду написания кода, которая включает инструментальные средства редактирования кода (например, раскраска кода или проверка закрытия тегов) и справочная информация по HTML, CSS, JavaScript.

Поддерживая CSS-верстку и возможность ручного кодинга, Dreamweaver дает профессионалам интегрированные инструменты единой среды разработки. Разработчики могут использовать Dreamweaver с серверными технологиями на их выбор, чтобы создавать мощные веб-приложения с подключением СУБД и веб-сервисов.


1. Интерфейс Dreamweaver

1.1. Рабочий экран

Как и любая программа Dreamweaver имеет главное окно (рис.1.1), снабженное заголовком, главным и системным меню, а также кнопками закрытия, минимизации и сворачивания. Главному окну можно придавать произвольный размер и положение на экране монитора.

Оhello_html_m4dac35b3.gifсновной пульт управления программой – это главное меню, находящееся непосредственно под строкой заголовка.

hello_html_m21ac9f7f.png

6

7


Рис. 1.1. Интерфейс Dreamweaver
1 – главное меню программы; 2 – панель Insert; 3 – панель Doсument;
4 – окно документа в режиме Split; 5 – панель свойств; 6 – разделительная полоса; 7 – сгруппированные инструментальные панели




1.3. Режимы работы

Создание гипертекстового документа практически не отличается от работы с обычным текстовым редактором.

Базовые операции ввода и форматирования текста, вставки объектов, техника навигации и выбора реализованы в стиле визуальных сред программирования. Dreamweaver автоматически создает исходный текст, в котором информационное наполнение документа и его оформление записываются в кодах языка разметки HTML. При этом остается возможность ручного кодирования, для чего в пакете предусмотрен инспектор кодов (Code Inspector).

Предусмотрена возможность задания режимов работы окна документов. Окно может находиться в одном из трех режимов:

  • Design (Режим планирования) это обычный режим визуального редактирования текстовой страницы;

  • Code (Режим разметки). В этом режиме отображается полный исходный код гипертекстовой страницы со всеми дескрипторами, метатегами, сценариями и комментариями. Это кодовый режим. На рис.1.2 показана пустая страница в режиме отображения кодов. Каждая новая страница получает автоматически базовую гипертекстовую разметку;

  • Split (Режим разметки и планирования). Это комбинированный режим, в котором страница расщепляется на две секции: в одной отображаются коды, а в другой планировка со всеми объектами и атрибутами форматирования (рис.1.3).







hello_html_mb460520.gif

hello_html_1a5b1967.png

Рис.1.2. окно в режиме Code

hello_html_m49cf11c9.gif











Рис.1.3. Режим Split (Расщепленное окно)

1.4. Строка меню

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

Строка включает команды:

  • меню File (Файл) объединяет файловые команды, средства работы с шаблонами, команды экспорта, импорта и просмотра документа во внешних браузерах;

  • меню Edit (Правка) включает команды управляющие буфером обмена, средства поиска, выбора объектов, настройки программы, управления кодами гипертекстовой разметки;

  • меню View (Вид) объединяет средства визуализации вспомогательных элементов интерфейса и объектов гипертекстового документа;

  • меню Insert (Вставка) содержит команды импорта различных объектов: изображений, таблиц, сценариев, слоев, специальных символов, метадескрипторов и т.п.;

  • меню Modify (Изменить) объединяет средства и команды для изменения атрибутов объектов документа;

  • меню Text (Текст) включает ресурсы, связанные с созданием текстовых фрагментов и их форматированием;

  • меню Commands (Команды) объединяет командные средства автоматической обработки гипертекстовых документов: сценариев, утилит, верификаторов кодов и пр.;

  • меню Site (Сайт) включает средства работы с сайтами и связанными системами гипертекстовых документов;

  • меню Window (Окно) содержит команды визуализации палитр, панелей и диалоговых окон программы.


1.5. Панель инструментов

Панель инструментов объединяет кнопки вызова наиболее часто используемых команд и ресурсов редактора. На это панели расположены следующие элементы управления (рис. 1.4):

hello_html_m3ea5e199.gif

Параметры отображения


hello_html_m4e82f279.png


Управление файлами



Рис. 1.4. Панель инструментов


  • Title (Заголовок) – поле для ввода заголовка документа;

  • File Management (Управление файлами) – кнопка открывает меню, содержащее файловые команды сетевого обмена и контроля обращения;

  • Preview/Debug in Browser (Просмотр/Отладка в браузере) – кнопка открывает меню с командами просмотра документа в браузере;

  • Refresh Design View ( Обновить страницу) – команда переноса всех изменений в исходном документе в режим Design;

  • Reference (Справка) – кнопка вызова справки;

  • Code Navigation (Навигация по кодам) – кнопка открывает доступ к меню с командами, управляющими отладкой встроенных программ, написанных на языке Java Script;

  • View Options (Параметры отображения) – кнопка открывает меню с командами управления визуализацией вспомогательных элементов окна документа.


1.6. Селектор разметки

В левой части строки состояния (рис.1.1) расположен селектор разметки, представляющий собой индикатор, показывающий дескрипторы разметки HTML, окружающие текущую позицию курсора.

Программа постоянно отслеживает положение курсора и обновляет состояние селектора разметки.

Щелчок на имени дескриптора в строке состояния выбирает всю его область действия в окне документа. Выбранный дескриптор в селекторе разметки выделяется полужирным шрифтом.

1.7. Размер страницы

В средней части строки состояния (рис.1.1) расположено поле в котором выводятся текущие размеры окна документа в пикселах (рис. 1.5). Первое число дает значение ширины, а второе – высоты. Если щелкнуть мышкой на любой точке этого поля, то выводится диалоговое окно выбора размера окна.


hello_html_m4a0374a6.pnghello_html_55c82043.gif


Рис. 1.5. Панель задания размеров окна

1.8. Инспектор свойств

Палитра Property inspector (Инспектор свойств) – это основной инструмент программы по созданию гипертекстовых документов. Ее содержание изменяется в зависимости от выполняемой операции, положения курсора и типа выбранных объектов.

Для вывода палитры на экран выполнить команду Window/ Properties Окно/Свойства или воспользоваться комбинацией Ctrl+F3.

hello_html_m4fa6d091.gif

hello_html_5b87429b.png

Рис.1.6. Инспектор свойств (панель свойств)


Инспектор свойств содержит следующие поля и кнопки (рис.1.6):

  • Format (Формат) выбор структуры и типа текста (1);

  • список Font (Шрифт) – выбор типа шрифта (2);

  • Size (Размер) – выбор размера шрифта (3);

  • Style (Стиль) – выбор стиля шрифта (4);

  • Align (Выравнивание) – выбор стиля выравнивания текста (5);

  • список Link (Ссылка) – хранит перечень всех ссылок текущего документа (6);

  • маркер-указатель. Создает гипертекстовые ссылки при его перетаскивании на требуемый источник: файл или символ привязки (7);

  • кнопка открытия диалогового окна Select File (Выбрать файл), (8);

  • кнопка вызова цветовой палитры для оформления текста (9);

  • кнопка вызова окна задания свойств страницы (10);

  • список Target (Назначение) предназначен для выбора способа визуализации документа, на который указывает гипертекстовая ссылка (11);

  • кнопка List Item (Раздел списка) служит для открытия диалогового окна List Properties (Свойства списка) для редактирования списков всех типов (12);

  • кнопки создания нумерованных и маркированных списков (13);

  • поле для отображения кода выбранного цвета текста (14);

  • кнопки выбора типа начертания шрифта (15);

  • кнопка вызова экспресс редактора кодов (16);

  • кнопки вызова интерактивной подсказки (17);

1.9. Панель Insert (Палитра объектов)

Панель Insert служит для вставки и создания внешних объектов. Все, что можно включить в состав страницы HTML, от растровых изображений до скриптов, можно вставить при помощи этой палитры.

Вhello_html_b1a53eb.gifывод палитры на экран осуществляется командой Window/Object (Окно/Объекты) или комбинацией клавиш Ctrl+F2. Повторное выполнение команды убирает палитру с экрана.


hello_html_m3ce8523f.png

Рис.1.7.Палитра объектов


Палитра содержит следующие разделы (рис.1.7):

  • Common (Общие) – раздел объединяет самые ходовые объекты: таблицы, изображения, горизонтальные линейки, календарные даты и т.д.;

  • Forms (Формы) содержит формы и элементы их образующие: переключатели, списки, текстовые поля и пр.;

  • Data (Данные);

  • Spry (команды задания специальных свойств);

  • Text (текст). Команды задания параметров текста;

  • Layout (выбор разметки рабочей области).

1.10. Инспектор кода

Инспектор кода (Code Inspector) предназначен для просмотра и редактирования кодов разметки гипертекстовых документов.

hello_html_108dc3d7.png

Рис.1.8. Инспектор кода

Вызов инспектора кодов: Window/Code Inspector (Окно/ Инспектор кода) или клавишей F10. Кроме того, панель и палитра быстрого запуска имеют кнопки активизации этого средства.

На рис.1.8 показано окно Инспектора кодов с нажатой кнопкой View Options. Первые пять кнопок Инспектора кодов дублируют соответствующие кнопки панели инструментов. Шестая кнопка View Options открывает доступ к кнопкам управления кодами разметки:

  • Word Wrap (Перенос по словам) – режим переноса строк кода;

  • Line Numbers (Номера строк) – команда отображения порядковых номеров строк;

  • Highlight Invalid HTML (Пометка некорректных кодов) – команда активизирует режим пометки желтым цветом синтаксически некорректных конструкций кодов;

  • Syntax Coloring (Раскраска синтаксических конструкций). В этом режиме различные по смыслу части кодовой разметки выделяются разным цветом. Назначение цветов выполняется в основных настройках программы в разделе Code Colors (Цвета кода);

  • Auto Indent (Автоматический отступ). Команда активизирует режим автоматической установки отступов для дескрипторов разметки, вводимых в окне Инспектора кодов. Виды дескрипторов и правила расстановки отступов задаются в специальном файле инициализации SourceFormat.txt.

В правой части окна Инспектора кодов расположена треугольная кнопка вызова меню с командами обслуживания исходного текста документа:

  • Find and Replace (Найти и заменить) вызывает команду поиска и замены;

  • Find Next (Найти далее) запускает процедуру поиска с ранее введенным образцом для поиска и текущими параметрами поиска;

  • Reference (Справочное руководство);

  • Set Breakpoint (Вставить контрольную точку) устанавливает контрольную точку в позиции текстового курсора;

  • Remove All Breakpoint (Удалить все контрольные точки) удаляет все контрольные точки из исходного текста документа;

  • Cut (вырезать) вырезает выбранный кодовый фрагмент в буфер обмена;

  • Copy (Копировать) копирует выбранный кодовый фрагмент в буфер обмена;

  • Paste (Вставить) вставляет содержимое буфера обмена в место расположения курсора.

2. Создание проекта

2.1. Создание проекта учебного Web-узла

Прежде чем начать говорить о том, как создавать отдельные сложные структуры, такие, как учебные Web-узлы необходимо уяснить себе вопрос: «Что такое Web-страница и Web-узел?»

Web-страница может быть просто текстом без иллюстраций, мультимедийных эффектов и даже гиперссылок на другие документы. Главное ее отличие, от документа хранящегося на жестком диске – доступность через локальную сеть или через Internet.

Web-узел – набор связанных между собой Web-страниц, учебников и учебных пособий.

Dreamweaver позволяет создавать не только Web-узлы, но и отдельные страницы. В учебном заведении Web-узел это всегда комплекс связанных структур – учебников, учебных пособий и учебно-методических материалов, а не коллекция никак не относящихся друг к другу документов. Программа Dreamweaver – мощная система для разработки и поддержки Web-узлов, к тому же ее можно использовать и как простой HTML-редактор.

Допустим, у вас уже скопилось множество материалов, которые вы хотели бы выставить на показ всему миру. Можно их просто связать друг с другом, расставив тут и там ссылки на главную страницу, и в таком виде «выложить» на какой-нибудь сервер. Это тоже будет Web-узел, но вряд ли он кому-нибудь понравится. Лучше пройти все ступени от разработки структуры локальной сети до ее заполнения учебно-методическим материалом. Web-узел в учебном заведении – это всегда стройная, логически связанная сеть, содержащая весь учебно-методический комплекс со сложными взаимосвязями. Поэтому лучше пройти все ступени от разработки структуры локальной сети до ее заполнения учебно-методическим материалом.

Первая ступень в создании Web-узла – планирование.

Следующая ступень – разработка структуры Web-узла.

После разработки локальной структуры можно заполнять ее содержимым, создавая учебные пособия и отдельные страницы с "нуля", полагаясь только на свой вкус или пользуясь заранее разработанными шаблонами. Можно использовать HTML-код, созданный в других приложениях.

Используя Dreamweaver, можно работать с уже готовым Web-узлом либо создать свой Web-узел.

После того как вы создадите локальный узел и заполните его необходимым содержимым, можно перенести готовый Web-узел в Интернет на удаленный Web-узел.

2.2. Планирование Web-узла

В Dreamweaver термин site означает не только Web-узел как таковой, но и местонахождение всех файлов, принадлежащих к данной структуре. Стандартный путь разработки проекта – создание на жестком диске папки, которая будет содержать все файлы, относящиеся к Web-узлу. После этого можно периодически копировать свои файлы на cepвep, на котором они будут доступны всем пользователям сети. Такой способ наиболее рационален, так как позволяет тестировать проект на локальном компьютере и копировать на сервер уже отредактированные материалы. Кроме того, это заметно ускоряет работу, поскольку каждая новая версия учебника появляется в сети целиком, а не по частям.

2.3. Планирование структуры

Тщательно продуманная организация Web-узла в будущем сэкономит вам много времени. В противном случае можно столкнуться с огромным количеством непонятно названных файлов. Так что лучше с самого начала придерживаться некоторых простых правил:

  • разбивать учебник на разделы и подразделы и располагать все свои файлы в соответствии с их категориями;

  • создать специальную папку для графики и мультимедийных элементов – это сильно разгрузит ваши корневые папки и позволит создать специальную структуру папок именно для этих элементов;

  • использовать одинаковую структуру для локальной и удаленной версии – иначе вы столкнетесь с большими проблемами при переносе и поддержке вашего учебника.

2.4. Планирование навигации

Навигация – важнейший элемент любого учебного материала. Поэтому тщательное ее планирование позволяет существенно облегчить последующее использование учебника в учебном процессе. Иными словами, в первую очередь надо тщательно продумать связь между отдельными разделами учебника, между разными учебниками в пределах Web-узла специальности, чтобы не возникло ситуации, когда какой-нибудь учебник или документ просто выпадает из структуры Web-узла. Также полезно позаботиться о том, чтобы пользователь четко представлял себе, где он находится в каждый момент времени работы. Нельзя также забывать о том, что человек несовершенен и склонен делать ошибки. Сколько бы вы ни бились над проектом, всегда найдется несколько ситуаций, которые вы не заметили, не продумали или просто не придали им значения. В этом случае полезно оставлять для пользователей контактную информацию, чтобы они могли сообщать обо всех неполадках и высказывать свое, не всегда бесполезное (а для разработчика и не очень приятное), мнение.

2.5. Планирование шаблонов и библиотек

Если вы создаете Web-узел для какой-то определенной специальности, то поневоле столкнетесь с использованием на страницах некоторых повторяющихся элементов. Чтобы избавиться от ненужной работы по их дублированию, можно постепенно создавать набор соответствующих шаблонов и библиотек.

Шаблоны помогают создавать страницы со сходной структурой или оформлением. Если вы вдруг решите изменить вид этих страниц, просто отредактируйте используемый шаблон, и тогда автоматически изменятся все связанные с ним учебные материалы.

Если вы знаете, что какие-нибудь элементы будут использоваться в нескольких учебниках, то проще сразу создавать их как часть библиотеки, и тогда, изменив библиотеку, вы сразу увидите изменения в соответствующих учебниках.

2.6. Создание локального Web-узла

Перед тем как перейти к созданию локального Web-узла, необходимо ясно представлять себе, что это такое.

Локальный Web-узел – это в первую очередь, пространство на жестком диске, где сосредоточены все файлы, составляющие его структуру. Он ничем не отличается от "настоящего" Web-узла в локальной сети или сети Internet, разве что его никто не может посетить, кроме разработчика и тех, кто приходит к нему с проверкой или за консультацией. Каждый проект должен иметь собственное название и свою корневую папку. Не стоит использовать для проектов корневые палки жесткого диска, лучше создавать их в специально отведенном для этого месте. Для создания проекта выполните описанную ниже процедуру.

1. Выберите команду Site/New Site (узел/создать узел). Откроется окно диалога Site Definition (определение узла), в котором надо выделить категорию Local Info (локальная информация).

2. введите относящуюся к проекту информацию (рис.2.1).

В поле Site Name (имя узла) введите имя, которое вы выбрали для своего Web-узла (то есть Вашего проекта). введенное имя появится в окне Site (узел) и в подменю Open Site (открыть узел) меню Site (узел). Имя проекта может быть в последующем изменено.

hello_html_394218a2.png

Выбор локальной корневой папки

hello_html_1d090fd3.gif


Рис.2.1. Окно диалога Site Definition (Определение узла)


В поле Local Root Folder (локальная корневая папка) необходимо определить корневую папку на жестком диске для хранения всех файлов, шаблонов и библиотек проекта. Если данная папка еще не существует, появится диалоговое окно с запросом на создание необходимой папки. После создания корневой папки создание и наполнение Web-узла содержимым в Dreamweaver будет происходить уже в этой папке.

В поле http Address (http - адрес) необходимо ввести сетевой адрес, где будет использован уже готовый Web-узел, когда он будет перенесен на сервер сети. С его помощью Dreamweaver сможет проверять правильность гиперссылок Web-узла. На стадии разработки узла поле лучше не заполнять.

Остается еще один параметр – флажок Cache (кэш) Он позволяет определить необходимость использования локального кэша для увеличения скорости работы Dreainweaver.

3. Щелкните на кнопке ОК.


2.7. Окно просмотра Web-узла

Окно Site (узел) предназначено для просмотра локальных и удаленных Web-узлов, добавления и удаления документов из проекта и работы над структурой гиперссылок. можно конфигурировать каждую из двух частей окна Site, чтобы они отображали файлы локального Web-узла,

Просмотр файлов. Окно Site (узел) может быть использовано для работы как с удаленной так и с локальной версией проекта. ЛокальныЙ Web-узел можно просматривать в виде списка файлов и папок.

Чтобы просмотреть файлы локального проекта, необходимо в окне Window выбрать команду Window/Files (окно/файлы узла).

Работа с файлами. После того как вы просмотрели список файлов и папок, из которых состоит Web-узел, можно приступать к работе с документами. Можно их открывать, добавлять новые папки или файлы, обновлять папки или файлы.

Чтобы открыть файл, дважды щелкните на его имени (как и при обычной работе с любым редактором).

Для создания новой папки, выполнить действия:

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

2. В окне Files (узел) выбрать команду file/New Folder (файл/создать папку).

3. Ввести название новой папки.

Чтобы добавить новый файл, выполните описанные ниже действия.

1. Выделить в списке файлов и папок необходимую папку (или файл), тогда новый файл будет создан внутри выделенной папки (или в той же папке, в которой находится выделенный файл).

2. В окне Files сделать правый щелчок. Выберите команду New File (файл/создать файл) или New Folder (Новая папка).

3. После этого можете ввести название нового файла.

Удаление проекта из списка Web-узлов. После окончания работы над проектом и если нет больше нужды его поддерживать, не нужно хранить его в списке ваших разработок. Если же вам когда-нибудь потребуется этот проект, то к нему можно будет вернуться.

Для удаления проекта из списка Web-узлов необходимо проделать следующее.

1. В окне редактирования выберите команду Site/Manage site (узел/Редактировать узел).

2. В открывшемся окне выделите название проекта.

3. Щелкните на кнопке Remove (удалить).

4. После того как появится окно диалога с запросом на подтверждение удаления, щелкните на кнопке Ok (да).

3. Гиперссылки и навигация

3.1. Создание ссылок

Dreamweaver предоставляет несколько способов создания гиперссылок:

  • с помощью Диспетчера узла;

  • с использованием команды меню Modify/Make Link (Изменить/Создать ссылку);

  • с использованием палитры Property Inspector (Инспектор свойств);

  • с помощью контекстного меню по щелчку правой кнопкой мыши.

Процедура создания ссылок практически одинакова для всех способов. Наиболее удобный способ предоставляет инспектор свойств. В этом случае действуют следующим образом.

1. Выделить текст, изображение или объект, используемый в качестве ссылки.

2. Открыть палитру Property Inspector (Инспектор свойств), если она отсутствует на экране.

3. Создать ссылку одним из следующих способов (рис.3.1.):

  • щелкнуть на значке Browse for file (Выбор файла) и в открывшемся окне диалога укажите местоположение файла, на который делается ссылка, после чего щелкнуть на кнопке Select (Выбрать);

  • вhello_html_m57a70662.gif поле Link (Связь) Инспектора свойств вручную введите путь к связываемому файлу.



hello_html_363fa4bc.png



Рис.3.1. Создание ссылки с использованием Инспектора свойств


3. Если нужно, чтобы связанный файл открывался не там, где находится ссылка, выберите требуемое значение в раскрывающемся списке Target (Целевой объект) Инспектора свойств.

При создании гиперссылки можно также использовать значок Point to File (Указать на файл) Инспектора свойств. В этом случае необходимо перетащить значок к другому открытому документу, метке или имени файла в окне Files. Программа автоматически занесет путь в поле Link.

При создании учебников и учебных пособий очень часто возникает ситуация, когда необходимо сделать ссылку на какой-то фрагмент файла. В этом случае на данном фрагменте необходимо поставить метку.

  1. в окне редактирования поместить курсор в нужное место фрагмента.

  2. выполнить одно из действий:

  • нажать комбинацию клавиш Ctrl+Alt+A;

  • в палитре объектов открыть и щелкнуть на кнопке Insert Named Anchor (Вставить метку);

  • выбрать команду меню Insert/ Named Anchor (Вставка/Метка).

  1. В отрывшемся окне диалога задать имя метки (рис.3.2).

hello_html_207fe919.png

hello_html_7bf6cb96.png

Кнопка задания метки в палитре объектов

(кнопка Insert Named Anchor)

hello_html_3028b68f.gif






Рис.3.3. Установка метки с помощью панели Invisibles (Невидимые) палитры

Рис. 3.2. Окно диалога задания имени метке


Гиперссылку на метку выполняют так:

создать вышеописанным способом ссылку на файл, в котором содержится требуемый фрагмент, а затем в окне Link (Связь) Инспектора свойств к адресу гиперссылки добавить вручную имя метки, разделив их знаком #, например, (рис.3.3): vved.html#m12,

где vved.html – адрес файла, в котором содержится требуемый фрагмент;

m12 - номер метки.


hello_html_m41838d8f.pnghello_html_101e6262.gif

Рис.3.3. Гиперссылка на метку


  • Связь с документами, расположенными в другом сайте, или в другой организации (другом городе) и т.п. осуществляется созданием ссылки на электронный (почтовый) адрес.

3.2. Создание меню переходов

Меню переходов (jump menu) имеет вид раскрывающегося списка и позволяет организовать связь с другими документами или файлами. В качестве команд (пунктов списка) в нем могут фигурировать гиперссылки на документы, другие Web-узлы, почтовые адреса, рисунки и вообще гиперссылки на любые файлы, которые можно открыть в броузере.

Чтобы вставить меню переходов в свой документ, выполните следующие действия.

1.Выберите команду Insert/Form Object/Jump Menu (вставка/форма/ меню переходов)/ Откроется окно диалога Insert Jump Menu (вставка меню переходов), показанное на рис 3.7

2. В поле Menu Name (имя меню) введите название данного меню.

3. В поле Text (текст) введите название гиперссылки, которое будет присутствовать в меню в качестве одной из команд. При переходе к следующему шагу введенное название появится в списке Menu Items (пункты меню).

hello_html_12b4a73b.pnghello_html_m4ff83a7.gif hello_html_6ea0f9f4.png


Рис.3.4. Создание меню переходов


4. В поле When Selected Go To URL (перейти по URL при выборе) введите URL на документ или файл.

5. В раскрывающемся списке Open URLs In (открывать URL в) выберите место, в котором требуется открыть файл. Это может быть главное окно или определенный фрейм.

6. В группе Options (параметры) доступны следующие флажки:

  • Insert Go Button After Menu (вставить кнопку перехода рядом с меню), чтобы вставить кнопку Go (перейти) рядом с меню.

  • Select First After URL Change (выделять первый пункт после перехода по URL), чтобы в поле раскрывающегося списка (образующего меню переходов) постоянно отображался первый пункт.

7. Щелкните на кнопке +, чтобы создать следующую гиперссылку в меню переходов.

8. Повторите шаги 3-7 столько раз, сколько необходимо для создания требуемого количества элементов меню.

9. Щелкните на кнопке ОК.

Гиперссылки в созданном меню можно изменять. Для этого выделите меню в окне редактирования документа и в окне инспектора свойств щелкните на кнопке List Values (значения списка).

3.3.Создание панели навигации

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

Для каждого элемента панели навигации можно создать четыре изображения:

  • изображение, которое появляется при первой загрузке документа (состояние Up Image);

  • изображение, которое появляется, когда указатель мыши находится над элементом (состояние Over Image);

  • изображение, которое появляется при щелчке мышью на элементе (состояние Down Image);

  • изображение, которое появляется, когда указатель мыши оказывается над элементом уже после щелчка мышью (состояние Over While Down Image).

Чтобы вставить панель навигации в документ, выполните следующие действия.

1 Выберите команду Insert/Interactive Images/Navigation Bar (вставка/Интерактивные элементы/панель навигации) или откройте панель Common (общие) палитры объектов и щелкните на кнопке Insert Navigation Bar (вставка панели навигации). Откроется окно диалога Insert/Navigation Bar (вставка /панель навигации), (рис. 3.5).

2. В поле Element Name (имя элемента) задайте имя для элемента панели.


hello_html_m32635eac.pnghello_html_mcaee17d.gif-hello_html_m851c4da.png

Рис. 3.5. Вставка панели навигации

3. Выберите изображения для четырех состояний элемента. В принципе, обязательно требуется изображение только для состояния Up Image, остальные можно пропустить. В соответствующих состояниям полях введите путь к изображениям (можно воспользоваться соответствующей кнопкой Browse (обзор)).

4. В поле When Clicked, Go To URL (после щелчка перейти по URL) введите URL на документ или файл.

5. С помощью раскрывающегося списка in (в) выберите место, в котором требуется открыть файл. Это может быть главное окно или определенный фрейм.

6. Выберите параметры загрузки изображения:

флажок Preload Images (предварительная загрузка изображений) позволяет загрузить все изображения одновременно с загрузкой страницы (если этот флажок снят, при работе панели навигации могуг возникать паузы);

флажок Show "Down Image" Initially (сначала отображать состояние "Down Image"), заставляет броузер при первой загрузке страницы воспроизводить элемент панели навигации в состоянии Down Image, a не в состоянии Up Image.

7. В раскрывающемся списке Insert (вставить) выберите вариант размещения панели навигации (горизонтально или вертикально).

8. Чтобы расположить элементы панели навигации в таблице, установите флажок Use Tables (использовать таблицы).

9. Щелкните на кнопке +, чтобы создать следующий элемент в панели навигации.

10. Повторите шаги 2-9 столько раз, сколько необходимо.

11. Щелкните на кнопке ОК

Для изменения элементов в созданной панели навигации выберите команду Modify/Navigation Bar (изменить/панель навигации)/ Огкрывшееся окно диалога Modify Navigation Bar (изменение панели навигации) почти идентично окну Insert Navigation Bar (вставка панели навигации).


Литература


  1. Соломенчук В. Интернет: Краткий курс, 2-изд.- СПб.: Питер, 2004

  2. Матросов А. В., Сергеев А. О., Чаунин М. Г. HTML 4.0.-СПб.:БХВ-Петербург,2004

  3. Шапошников И. В. Web-сайт своими руками- СПб.: Питер, 2005

  4. Биржаков Н., Как создаются Web-сайты,- СПб: Питер, 2001.

  5. Гаевский А., Романовский В., Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML, 2002.

  6. Кэмпбелл М., Разработка, дизайн, программирование, тестирование и раскрутка Web-сайта, 2004.

  7. Полонская Е.М., Самоучитель: Язык HTML, 2004.

  8. Трубочкина Л.М., Ломов А.Ю., HTML, CSS, скрипты: практика создания сайтов, 2003.

  9. Дж.Уорнелл, MakromediaDreamweaver МХ, 2003.

  10. Д. Лоуреи, А.Бураглиа, Dreamweaver МХ, Библия пользователя, , 2004.

  11. Р. Пеннер, Macromedia Pro, Developer exam, 2003.

  12. Дронов В. Самоучитель по Macromedia DreamWeaver - СПб.: Питер, 2006






Самые низкие цены на курсы переподготовки

Специально для учителей, воспитателей и других работников системы образования действуют 50% скидки при обучении на курсах профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 18 октября. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru

Общая информация

Номер материала: ДВ-274082

Похожие материалы