Применение фреймов на Web-странице.

Для одновременного размещения на поле HTML-документа нескольких Web-страниц можно использовать конструкцию с несколькими окнами, которая определяется как " Фрейм-документ". Реализация этой конструкции требует определения числа и расположения на экране открывающихся окон с помощью парного тэга < FRAMESET>, в области действия которых с помощью непарного тэга < FRAME> определяют адрес устанавливаемой Web-страницы.

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

3.1.Разработать Фрейм-документ:

a) Открыть новый HTML-документ, в котором заменить тэги < BODY> на тэги < FRAMESET>.

< FRAMESET> тело документа < /FRAMESET> - контейнер содержательной части фрейм-документакоторый может иметь следующие параметры:

ROWS=pixels½ persent - определяет число строк и их размер в пикселях или в % от размера экрана, что позволяет разделить страницу на полосы,

COLS= pixels½ persent - определяет число стобцов и их размер в пикселях или в % от размера экрана, что разделяет строки окна на отдельные окна (фреймы). Если фрейм занимает всю полосу, другая строка разделена на два фрейма, то указывают соотношение - 100%, 0%.

< FRAME> -установка содержимого фрейма (окна); тэг может использовать следующие параметры:

MARGINHEOGHT=n - пустое пространство над и под фреймом,

MARGINWIDTH=m - пустое пространство слева и справа от фрейма,

NAME=" name" - имя фрейма для ссылки из других документов, имена фреймов должны начинанться с латинско буквы или цифры.

NORESIZE - запрет изменения размеров фрейма,

SCROLLING=YES½ NO½ AUTO - управление появлением линеек прокрутки, в соответствующих окнах,

SRC=" URL" - адрес файла, загружаемого в окно,

FRAMEBORDER - ширина разделительной линии между фреймами.

Выполнить следующие учебные задания:

b) Сформировать 4-х оконную Web-страницу, разместив на ней 4-е различные Web-страницы, используя следующую конструкцию:

< FRAMESET ROWS=" 50%, 50%" >

< FRAMESET COLS=" 50%, 50%" >

< FRAME SRC=" 3_1_ФИО.htm>

< FRAME SRC=" 4_1_ФИО.htm>

< /FRAMESET>

< FRAMESET COLS=" 50%, 50%" >

< FRAME SRC=" 5_1_ФИО.htm>

< FRAME SRC=" Label.gif.htm> - рисунок товарного знака фирмы

< /FRAMESET>

3.2.Подготовить окно для личной страницы:

a) Открыть новый документ и установить на его поле три фрейма: первый во всю ширину листа (1), второй (2) и третий (3) - рядом друг с другом под первым,

b) На поле первого фрейма установить логотип Вашей фирмы, [3] на поле второго ‑ список продуктов фирмы, а н

c) а поле третьего ‑ выбранный графический файл.

d) Перейти на окно браузера и проверить правильность подготовки нового документа.

Ссылка на ресурсы Интернета.

a) Установить на поле третьего окна (пример 3.2) ссылку на электронную почту, используя следующую конструкцию: < A HREF=" mailto: адрес почты" > Адрес для отзывов< /A>.

b) Перейти на окно браузера, нажать на кнопку " Обновить". Послать электронное сообщение.

Переход на новые Web-страницы из окон фреймов.

В процессе работы с документами, размещенными на полях фреймов возникает потребность перехода по гиперссылке на поле других Web-документов. В этом случае следует определить размеры нового рабочего окна. Для этого при следует в тэге гиперссылки < A> использовать параметр TARGET, который определяет имя фрейма или окна браузера, в которое будет загружаться текущий документ, на который указывает ссылка. По умолчанию документ загружается в текущий фрейм или окно. Имеются также четыре зарезервированных имени, при задании которых выполняются следующие действия:

TARGET=" _blank" - обеспечивает загрузку документа в новое окно (без имени),

TARGET=" _self" - загрузк документа в текущий фреймё(окно),

TARGET=" _top" - вызывает загрузку документа в распахнутое (полное) окно,

TARGET=" _parent" - загрузка документа в область, занимаемую фреймом-родителем текущего фрейма. При отсутствии фрейма-родителя данное значение аналогично действию " _top".

Выполнить следующее упражнение:

5.1. Подготовить переход на новые страницы из списка, установленного на одом из фреймов:

a) Подготовить четыре HTML-документа, на каждом из которых описать соответствующие основные параметры выпускаемой продукции,

b) Установить гиперссылки на подготовленные HTML-документы в списке продукции, установленном на поле второго фрейма в упражнении 3.2.б, выбирая для каждой ссылки новое значение параметра TERGET,

c) Проверить результат использования параметра TARGET/

6.Сохранить HTML-коды документов.

Закрыть все приложения на рабочем столе.

ТЕМА 6: ФОРМИРОВАНИЕ ИНТЕРАКТИВНЫХ ДОКУМЕНТОВ

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

Задание для самостоятельной работы

Подготовка рисунков (фотографий) для Web-страницы.

1.1.В зависимости от качества фотоснимка и требований к изображению определить разрешение и глубину цвета для сканирования фотографии (например: разрешение 100 dpi, глубина 8 бит). Выбрать имя для файла с изображением, например Ф_И_О.gif.

1.2.Получить файл с изображением:

Сканер подсоединен к компьютеру преподавателя. Оператор осуществляет вызов программы сканирования и устанавливает заданные студентов разрешение и глубину сканирования. Фотоизображение передается в файл, который получает заранее установленное имя и размещен на диске V,

a) Передать фотоснимки оператору,

b) Обратиться по компьютерной сети к диску V компьютера преподавателя,

c) Копировать в свою рабочую папку файл с фотоизображением.

1.3.Редактировать изображение:

a) На поле программ найти строку " Adoble" и запустить программу " Photoshop",

b) В меню " Файл" найти свой каталог и открыть необходимый графический файл,

c) Вырезать необходимую область на фотографии, используя панель инструментов и сохранить фрагмент под новым именем,

d) В меню " Режим" выбрать вариант цветового представления,

e) Сохранить файл в формате .jpg (например, Web-GR_Ф.И.О).

Подготовка текстового процессора для формирования Web-документа.

2.1.Создать новую Web-страницу:

a) Вызвать текстовый процессор,

b) В меню " Файл" выбрать опцию " Создать" и на соответствующей вкладке выбрать лист " Web-страницы",

c) Активизировать значок " Мастер Web-страницы".

3.Разработка Web-страницы " Список группы".

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

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

Над списком группы будет установлено поле для общего заголовка, например, индекса группы, а под списком - поле меню, позволяющее перейти на страницу " Год поступления", " Кафедра", " Факультет".

3.1.Выбрать тип страницы для формирования списка:

a) В окне мастера установить тип Web-страницы: " В 3-и колонки" и щелкнуть по кнопке " Далее",

b) Установить стиль форматирования, например " Изысканный" и щелкнуть по кнопке " Готово",

c) Установить невидимые линии сетки на поле страницы с помощью опции " Отображать сетку" в меню " Таблица",

d) Установить число ячеек таблицы, позволяющее заполнить весь список.

3.2.Сохранить новый документ в папке под именем Web_ФИО в личной рабочей папке.

3.3.Подобрать соответствующий стиль оформления Web-страницы (фон страницы, цвет полосы, маркеры):

a) Для изменения фона Web-страницы:

· в меню " Формат" выбрать опцию " Фон" и щелкнуть по строке " Способы заливки",

· на вкладке " Заливка" щелкнуть по кнопке " Другая текстура",

· на новой вкладке выбрать папку " Backgrounds", для этого: перейти в папку " Program Files" щелкнуть дважды на папке " Clipart" и щелкнут дважды по папке " Backgrounds",

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

· на вкладке " заливка" щелкнуть по кнопке " ОК".

b) Заменить цвет разделительной полосы Web-страницы:

· щелкнуть по полосе,

· перейти на панель инструментов " Настройка изображения". (Если необходимой панели нет на экране. То следует в меню " Вид" выбрать опцию " Панели", далее включить флажок на строке " Настройка изображения" ),

· выбрать кнопку " Добавить рисунок" и выбрать папку " Lines": перейти в папку " Program Files", щелкнуть по папке Microsoft Office, щелкнуть дважды по папке " Clippart" и дважды по папке " Lines",

· выбрать подходящее значение (например, " Черно-зеленые полосы",

· закрыть вкладку,

c) Изменить маркеры:

· щелкнуть на первом маркере,

· На панели инструментов " Настройка изображения" выбрать кнопку " Вставить рисунок",

· На вкладке " Добавить рисунок" перейти на лист " Bullets", для этого: перейти в папку " Program Files", щелкнуть дважды на папке " Microsoft Office", щелкнуть дважды по папке " Clipart" и затем - дважды на папке " Bullets",

· Выбрать подходящий вид маркера (например, " Черно-зеленый алмаз" ),

· Щелкнуть по замененному маркеру и нажать на клавиши " Ctrl+C" (Копирование маркера в буфер обмена),

· Выделить по очереди каждый маркер и, нажимая на клавиши " Ctrl+V", заменить маркеры на новые.

· Сохранить подготовленную Web-страницу.

3.4.Добавить необходимый текст (заголовок, элементы списка и т.п.) к Web-странице:

Мастер Web-страницы размещает на поле документа местозаполнители, которые можно заменить необходимым текстом.

a) Заменить заголовок:

· Выделить поле заголовка щелчком на местозаполнителе с нажатой клавишей " Ctrl",

· Записать текст заголовка (Группа...)

b) Ввести фамилии студентов в список:

· Выделить поле " Вставить элемент списка", не выделяя маркера,

· Ввести соответствующую фамилию,

· Заполнить весь список,

· Удалить маркер из поля лишней строки: выделить маркер и нажать на клавишу " Del".

c) Сохранить Web-страницу.

3.5.Установить гиперссылку на рисунок:

a) Перенести в рабочую папку файл логотипа или общей фотографии группы в формате JPEG,

b) Выделить поле первого столбца таблицы,

c) На поле инструментов " Стандартная" щелкнуть по кнопке " Гиперссылка",

d) На вкладке " Добавить гиперссылку" щелкнуть по кнопке " Обзор" рядом с полем " Связать с файлом/URL",

e) Открыть рабочую папку, куда ранее был скопирован файл с соответствующим изображением,

f) В диалоговом окне " Связать с файлом" щелкнуть по соответствующему имени файла,

g) В диалоговом окне " добавить гиперссылку" щелкнуть по кнопке " ОК".

h) Сохранить Web-страницу.

3.6.Установить гиперссылки на страницы " Студенты", " Кафедра" и " Факультет":

a) Переписать URL-адреса страниц: " Студенты", " Кафедра" и " Факультет",

b) Заменить текст в местозаменителях " Связанная страница" на новый: " Студенты", " Кафедра" и " Факультет" соответственно,

c) Вставить необходимые гиперссылки для каждого слова меню.

d) Сохранить Web-страницу.

3.7.Проверить правильность сформированной страницы:

a) В адресной строке браузера указать адрес рабочей папки и имя файла " Список группы",

b) С помощью строк меню перейти на Web-страницы факультета, кафедры, студенты.

4.Сформировать персональную Web-страницу (узел) студента.

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

Основная персональная Web-страница должна содержать: заголовок (Фамилия имя отчество) (1); гиперссылки на частные страницы Web-узла в форме списка (например, образование, работа, отдых т.п.) (2); основные данные о специальности, фотографию и т.п.), меню, позволяющее перейти к страницам списка группы, кафедры, факультета, а также передать сообщение по электронной почте (4).

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

4.1.Выбрать тип основной страницы, и подобрать необходимый дизайн,

4.2.Установить в форме списка переход на страницы: образование, работа, отдых (увлечения),

4.3.Установить меню в виде гиперсвязей с Web-страницами группы, кафедры, факультета:

4.4.Разработать частные Web-страницы: " Образование", " Работа", " Отдых" (" Интересы", " Увлечения" или т.п.):

a) Образование: дать основные сведения о своей квалификации в различных областях деятельности, науки, спорта и т.п.;

b) Работа: показать темы проектов, в которых принимаете участие, или которые разрабатываете самостоятельно, или желаете принять участие;

c) Отдых: дается информация об использовании свободного времени, интересах, увлечениях и т.п.;

d) Установить на каждой из частных страниц меню (кнопки) перехода на основную персональную Web-страницу и на страницу группы.

4.5.Установить гиперссылки из основной персональной Web-страницы на частные с помощью текстового процессора:

a) Активизировать основную персональную Web-страницу,

b) Выделить местозаместители в нижней части страницы, где предполагается установить гиперсвязи на частные страницы,

c) Щелкнуть по кнопке " Гиперсвязи" на панели инструметов " Стандартная",

d) На вкладке " Добавить гиперссылку" щелкнуть по кнопке " Обзор" и открыть свою рабочую папку,

e) на вкладке " Связать с файлом" щелкнуть дважды по имени соответствующего файла,

f) Нажать на кнопку " ОК".

4.6.Разместить личную фотографию на поле основной Web-страницы:

4.7.Установить переход на поле редактора почтовой программы, для получения корреспонденции (Установить ссылку на сервис Интернета " Электронная почта" ):

a) Используя одну из справочных систем, оформить свой адрес электронной почты,

b) Подготовить текст на поле основной страницы в форме приглашения к обмену информацией (например, " Направьте свои замечания и предложения по адресу [email protected]" ), незабудьте установить дополнительный пробел в строке,

c) Проверить корректность установки ресурса.

1 23	Поделиться: