Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
Выбор шаблона Мастер страницы формы запускает мастер страницы
формы для определения количества, типа, содержания элементов формы.
Технология работы
Работа в программе Блокнот
1. Запустите Блокнот.
2. Введите:
<html><head><title>Форма</title></head><body><form>
<H1 align="center"> <Font color="blue">Анкета студента</font></H1>
<p align="left">Фамилия: <input type="text"> </p><br>
Имя: <input type="text"><br>
Отчество: <input type="text"><br>
Пол мужской<input name="Пол" type="radio" value="Мужской"><br>
Пол женский <input name="Пол" type="radio" value="Женский"><br>
Ваш адрес:<textarea cols="20" rows="3" > </textarea><br>
Пароль:<input type="password" maxlength="5">
<br>
Изучение какой дисциплины вызывает
<Select name="Дисциплина">
<Option>Web-технологии
<Option>ИТ-технологии
<Option selected>Математика
</Select> <br>
Выберите дисциплину, вызывающую у Вас наибольший интерес<br>
Web-технологии <input name="дисциплина" type="checkbox" value=
"Web-технологии">
Математика<input name="дисциплина" type="checkbox" value="Мате-
матика"> <br>
<input type="reset" value="Очистить">
</form></body></html>
3. Сохраните документ под именем anketa.htm в своей рабочей папке.
4. Просмотрите сохраненный документ в браузере Internet Explorer.
у Вас наибольшие трудности?
Работа в Microsoft FrontPage 2003
1. Создайте
страницу Гостевой книги, используя готовый шаблон MS
FrontPage (шаблон Гостевая книга).
2. Создайте фон, соответствующий следующему значению цвета
#A7D3DA.
81
3. Для графического оформления страницы воспользуйтесь следую-
щими Интернет-ресурсами:
www.webman.ru/animation/main.htm
http://shpak.narod.ru/collection1.htm
http://www.animation-central.com
http://www.animationlibrary.com
4. Создайте фон, соответствующий следующему значению цвета –
#A7D3DA.
5. Добавьте в документ заголовок «Анкета» и сделайте с него ссылку
на файл anketa.htm.
Контрольные вопросы
1. Какие теги используются для создания в форме переключателей?
2. Какие значения может принимать атрибут TYPE?
3.
Каким образом в форме можно задать раскрывающийся список?
4. Каким образом в MS FrontPage 2003 создать элемент Флажок?
5. Как в MS FrontPage 2003 создать форму на основе готового шаб-
лона?
Лабораторная работа № 8
Фрейм как механизм структурирования документов
4 часа
Цель работы: получить представление о создании сайтов на основе
фреймовой структуры.
Задачи работы:
1) ознакомиться с понятием фреймовой структуры web-страницы,
особенностями использования фреймов;
2) овладеть практическими навыками создания фреймовой структу-
ры средствами MS FrontPage 2003.
Формируемые компетенции:
готовность к овладению основными методами, способами и средст-
вами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией
(ОК-12);
готовность к овладению перспективными методами библиотечно-ин-
формационной деятельности на основе информационно-коммуникационных технологий (ПК-4).
82
В результате выполнения лабораторной работы студент должен:
знать:
теги, определяющие фреймовую структуру документов (ОК-12,
ПК-4);
уметь:
задавать фреймовую структуру (ОК-12, ПК-4);
владеть:
навыками создания сайтов на основе фреймовой структуры (ОК-12,
ПК-4).
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: создать сайт, используя фреймовую структуру.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде html-документа и ответов на контрольные вопросы.
Теоретические сведения
Фреймы – средство для разделения окна браузера на несколько облас-
тей, в каждой из которых отображается содержимое отдельной web-стра
-
ницы.
В отличие от обычных документов документы с фреймовой структу-
рой не содержат никакой информации для предоставления пользователю,
а служат для разделения рабочей области браузера на несколько отдельных
окон, в которые и загружаются несущие информацию документы. Каждая
область может иметь свои полосы прокрутки и ее просмотр с помощью
них не влияет на остальные области.
Макетирование фреймов – тег <FRAMESET>
Тег <FRAMESET> </FRAMESET> определяет набор создаваемых
фреймов и их расположение в окне браузера. У тега <FRAMESET> только
два возможных атрибута: ROWS и СОLS.
COLS – задает расположение фреймов по горизонтали, может принимать значения в пикселях, процентах либо в относительных единицах,
значения перечисляются через запятую.
ROWS – задает расположение фреймов по вертикали, может принимать значения в пикселях, процентах либо в относительных единицах,
значения перечисляются через запятую.
83
Например, следующая запись формирует экран, состоящий из трех
строк: высота верхней – 20 пикселов, средней – 80 пикселов, нижней –
20 пикселов:
<FRAMESET ROWS="20, 80, 20">
Следующий тег – <FRAMESET> – создает экран, на котором верхняя
строка занимает 10 % высоты экрана, средняя – 60 %, а нижняя – оставшиеся 30 %:
<FRAMESET ROWS="10 %, 60 %, 30 %">
Можно задать относительные значения в комбинации с фиксирован-
ными, выраженными в процентах или пикселях. Например, следующий
тег
создает экран, на котором верхняя строка имеет высоту 20 пикселов, средняя – 80 пикселов, а нижняя занимает все оставшееся место:
<FRAMESET ROWS="20, 80, *">
Тег <FRAME> определяет содержимое каждого конкретного фрейма.
Он всегда должен быть вложенным в контейнер FRAMESET.
Количество тегов <FRАМЕ> должно соответствовать указанному
числу строк. Этот тег не имеет закрывающего тега, поскольку в нем ничего
не содержится. Вся суть тега <FRАМЕ> в его атрибутах. В таблице 1 представлены атрибуты тега <FRАМЕ>.
Таблица 1 – Атрибуты тега <FRАМЕ>
Атрибут Описание
NАМЕ задает имя фрейма
MARGINWIDTH задает горизонтальный отступ между содержимым
фрейма и его границами
MARGINHEIGHT задает поля в верхней и нижней частях фрейма
SCROLLING дает возможность пользоваться прокруткой во фрейме
NORESIZE указывает браузеру, что пользователь не может изме-
нять размеры фрейма. Если этот атрибут не указан,
то у пользователя есть возможность изменять размер
фрейма
SRC содержит URL загружаемого во фрейм документа,
является обязательным
WIDTH ширина фрейма в процентах от ширины родительского
окна или в пикселях
HEIGHT высота фрейма в процентах от высоты родительского
окна или в пикселях
84
Атрибут Описание
FRAMEBORDER указывает, выводить или нет рамку данного фрейма.
Если указано 1, то рамка рисуется (это значение при-
нято по умолчанию). Чтобы скрыть рамку, следует
указывать 0
Возможные варианты атрибута SCROLLING:
yes – во фрейме всегда будут полосы прокрутки, даже если в этом
нет необходимости;
nо – полос прокрутки не будет, даже когда это необходимо. Если до-
кумент слишком большой, а задан режим без прокрутки, документ
будет обрезан;
аutо – браузер сам определяет, требуются полосы прокрутки или
нет.
При отсутствии атрибута SCROLLING, результат будет таким же,
как при использовании SCROLLING="аutо".
В случае, если браузер не поддерживает фреймы, для этого после
определения набора фреймов тегом <FRAMESET></NOFRAMES> в документ вставляется тег <NOFRAMES></NOFRAMES>, внутри которого размещают либо альтернативное содержание, либо пояснительный текст.
Пример
<HTML><HEAD><TITLE>Пример фреймов</TITLE></HEAD>
<FRAMESET COLS="25 %, 75 %">
<FRAME SRC="menu.htm">
<FRAME SRC="main.htm" NAME="main">
<NOFRAMES>
Вы просматриваете эту страницу с помощью браузера, не поддерживающего фреймы. </NOFRAMES>
</FRAMESET>
</HTML>
HTML-страница, соответствующая этому коду, представлена на рис. 1.
Левое окно занимает 25 % экрана и содержит страницу с названием
menu.htm. Окно справа занимает 75 % экрана и содержит файл main.htm.
Атрибут TARGET определяет имя фрейма, в котором будет открыт
документ.
Ссылки
на фрейм имеют формат:
<A HREF="адрес_файла" TARGET="имя_фрейма">ссылка</A>
85
Кроме имён, определяемых непосредственно пользователем, используют следующие стандартные имена:
blank – открывает ссылку в новом окне (загружает содержимое стра-
ницы, заданной ссылкой, в новом пустом окне);
top – открывает ссылку на всё окно, если она находилась во фрейме;
parent – открывает ссылку в родительском окне (загружает содержи-
мое страницы, заданной ссылкой, в окно, которое содержит ссылку);
self – загружает содержимое страницы, заданной ссылкой, в окно,
игнорируя используемые фреймы.
Рисунок 1 – Пример задания фреймовой структуры
Использование атрибута TARGET для загрузки страницы
в определенный фрейм
Создание фреймов в Microsoft FrontPage 2003
С помощью программы MS FrontPage 2003 можно создавать различные фреймовые структуры, вставлять встроенные фреймы и в зависимости
от характера представляемой информации организовывать соответствующие гиперссылки.
Все команды, связанные с фреймовой
структурой, переведены
со словом «рамки». Для организации фреймовой структуры необходимо
выбрать команду Файл – Создать и выбрать команду Другие шаблоны
страниц из области задач Создание. В открывшемся диалоговом окне
Шаблоны страниц выбрать вкладку Страница рамок, на которой пока-
заны шаблоны web-страниц c фреймовой структурой, входящие в состав
86
MS FrontPage 2003 (рис. 2). Далее необходимо выделить наиболее подхо-
дящий шаблон и нажать кнопку "OK".
Рисунок 2 – Создание страницы с фреймовой структурой
Окно новой web-страницы фреймов (рис. 3) будет разбито на части
в соответствии с выбранной структурой.
Рисунок 3 – Страница с фреймовой структурой
87
Эту страницу необходимо сохранить (Файл – Сохранить) в одну
из папок web-узла с именем, заданным обязательно латинскими буквами.
Далее необходимо определиться с начальными страницами фреймовой структуры, т. е. с теми которые будут видны при открытии страницы
фреймов.
Это можно сделать двумя способами.
1) Кнопка Задать начальную страницу позволяет выбрать уже гото
вую web-страницу сайта в окне Добавление гиперссылки.
2) Кнопка Создать страницу загружает во фрейм новую пустую
web-страницу, редактирование которой может быть выполнено
обычным образом.
Если часть фреймов заполняется с помощью кнопки Создать страницу, то при сохранении страницы фреймов (Файл – Сохранить) отдель-
но сохраняется каждая новая web-страница.
При работе со
страницей фреймов на панели вкладок представления
появляется еще одна вкладка Без рамок. В этом режиме редактируется содержимое, которое будет отображаться в браузере, если он не поддерживает показ фреймов.
Работа над web-страницами, входящими во фреймовую структуру,
возможна как по отдельности, так и через страницу фреймов.
Для выбора одного из
фреймов нужно нажать на него левой кнопкой
-
мыши. Активный фрейм отличается от прочих цветной рамкой. Если
нажать левой кнопкой мыши на внешнюю рамку страницы фреймов,
то выделенной окажется вся фреймовая структура. Границы фреймов можно перемещать нажатой левой кнопкой мыши.
Для работы с выделенным фреймом можно воспользоваться коман-
дами меню Рамки
. Команда Разделить рамку позволяет разбить фрейм на
две части по вертикали или горизонтали. Команда Удалить рамку удаляет
фрейм из страницы фреймов. При этом если web-страница, загружаемая
в этот фрейм, была сохранена ранее, она остается в структуре web-сайта.
Команда Открыть страницу в новом окне открывает web-страницу
фрейма для редактирования отдельно от
фреймовой структуры.
Команды Сохранить страницу, Сохранить страницу как позволяют сохранить данную web-страницу отдельно от остальных страниц
фреймов.
88
Команда Свойство рамки открывает диалоговое окно Свойства
рамки, в котором можно задать различные параметры фрейма: имя, опи-
сание, размеры, ширина и отображение границ, свойства полос прокрутки,
отступы.
Еще один вариант использования фреймов – вставка в обычную webстраницу встроенного фрейма (рамки) (рис. 4) командой Вставка – Встро-
енная рамка. В результате в том месте, где
был установлен курсор, встав-
ляется рамка, которую можно заполнить двумя способами: Задать начальную страницу или Создать страницу.
Рисунок 4 – Встроенный фрейм
Щелчок левой кнопкой мыши на границу рамки, выделяет фрейм для
изменения его размеров. Двойной щелчок левой кнопкой мыши
на границу рамки открывает диалоговое окно Свойства встроенной рамки, в котором можно
задавать различные параметры фрейма: имя фрейма,
название, размеры, отступы, выравнивание, замещающий текст.
При организации гиперссылок между web-страницами фреймовой
структуры необходимо с помощью кнопки Выбор рамки в окне Добавление гиперссылки открыть диалоговое окно Конечная рамка (рис. 5)
и указать, куда будет загружаться новый объект.
Поле Текущая страница рамок позволяет выбрать фрейм
для загрузки нового объекта. В списке Общие объекты возможен выбор следующих вариантов: Страница по умолчанию (загрузка в тот фрейм, который определен по умолчанию), Та же рамка (загрузка в тот же фрейм,
откуда организовывалась гиперссылка), Страница целиком (загрузка в то
же окно с удалением фреймовой структуры), Новое
окно (загрузка в новое
окно браузера), Родительская рамка (загрузка в старший родительский
фрейм).
89
Рисунок 5 – Диалоговое окно Конечная рамка
Созданную страницу с фреймовой структурой можно сохранить
как шаблон для последующего использования. При этом шаблон будет
добавлен к набору шаблонов программы FrontPage.
Чтобы сохранить собственный шаблон страницы с фреймами, необходимо выбрать команду меню Файл – Сохранить как. На экране появится стандартный диалог сохранения файлов Сохранить как. В открывающемся списке Тип
файла выберите Шаблоны FrontPage. В поле ввода
Имя файла укажите имя файла шаблона и нажмите кнопку Сохранить.
На экране появится диалог Сохранить как шаблон. В поле ввода Назва-
ние укажите название шаблона, которое будет отображаться в списке
шаблонов при создании новой страницы. В поле ввода Описание можно
кратко описать назначение и
вид шаблона.
Флажок Сохранить шаблон на текущем Web-узле определяет,
будет ли шаблон доступен в любом сайте или только в текущем. Нажмите
кнопку ОК. Шаблон будет сохранен. Теперь можно использовать собственный шаблон при создании новой страницы с фреймами, выбирая его
в списке шаблонов диалога Шаблоны страниц.
90
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]