Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
6. Создание ID-селекторов
Кроме задания классов элементов можно ссылаться на конкретный
элемент, заданный уникальным идентификатором – ID-селектором. Это
делается при помощи определения стиля, явно не привязанного ни к одному из элементов:
# somename1 {color: blue}
<Р ID="somename1"> этот текст должен быть зеленым! </Р>
Стиль, определенный как "somename1", будет применен к одноимен-
ному элементу, вне зависимости от того, чем этот элемент является. Важно
только знать, что идентификатор (ID) элемента должен быть уникальным,
т. е. на странице не должно быть более одного элемента с ID, равного,
например, "somename1".
Следует учитывать, что классы и идентификаторы могут быть
как общими (как в примере с ID), так и привязанными к типу элемента
(как в примере с классами для <Р> </P>). Например, если задать класс,
определенный для <Р> </P>, другому тегу, то такая запись не сработает.
Поэтому если необходимо создать класс, который может использоваться с любыми элементами, следует применить следующий синтаксис:
.Center {text-align: center;}
Работа в Microsoft FrontPage 2003
1. Создайте web-сайт «Наша группа», используя шаблон Пустой веб-
узел.
2. Используйте файл внешней таблицы стилей CSS style.css и свяжите
его со всеми страницами web-узла.
3. Внесите изменения в style.css.
Задайте следующие свойства ссылок для всех страниц:
цвет и оформление ссылки;
цвет и оформление посещенной ссылки;
цвет
и оформление активной ссылки;
цвет и оформление ссылки, в момент нахождения курсора
мыши над ней.
Контрольные вопросы
1. Какие существуют методы добавления таблиц стилей на web-страницу?
2. Почему CSS называют «каскадными»? В чем это проявляется?
71
3. Что такое ID-селектор?
4. Охарактеризуйте возможности CSS.
5. Каким образом в FrontPage 2003 осуществляется связь созданной табли-
цы стилей со страницами web-сайта?
Лабораторная работа № 7
Формы в HTML
4 часа
Цель работы: получить представление о создании форм в HTML-
документах.
Задачи работы:
1) ознакомиться с тегами создания форм и их основными атрибутами;
2) овладеть практическими навыками создания форм в MS FrontPage
2003.
Формируемые компетенции:
готовность к овладению основными методами, способами и средст-
вами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией
(ОК-12);
готовность к овладению перспективными методами библиотечно-
информационной деятельности на основе информационно-коммуникационных технологий (ПК-4).
В результате выполнения лабораторной работы студент должен:
знать:
теги создания форм и их основные атрибуты (ОК-12, ПК-4);
уметь:
создавать формы в HTML-документах (ОК-12, ПК-4);
владеть:
навыками создания форм в MS FrontPage 2003 (ОК-12, ПК-4).
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: создать сайт, содержащий формы.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде html-документа и ответов на контрольные вопросы.
72
Теоретические сведения
Формы предназначены для сбора информации от посетителей webстраницы. После заполнения пользователем формы и запуска процесса ее
обработки информация из нее попадает к программе, работающей на сервере.
Также они применяются для разработки интерфейса следующих
приложений: поисковые службы, информационные базы данных, онлайновые справочники, заказные центры на товары и услуги
, гостевые и
регистрационные книги пользователей в различных электронных службах.
Для размещения форм в HTML применяется тег <FORM>...
</FORM>.
Основными элементами, используемыми в формах, являются:
текстовое поле (однострочное или прокручиваемое);
флажок для указания выбираемых элементов;
переключатель для выбора одного из нескольких предлагаемых
вариантов ответа;
открывающееся меню для выбора элемента из
списка;
кнопки.
Тег <FORM> имеет следующие атрибуты:
NAME – имя формы;
METHOD (GET или POST) – определяет, как должны обрабаты-
ваться входные данные из формы (метод отправки данных на сервер). GET – передача данных посредством переменных окружения
сервера (по умолчанию), POST – передача данных в стандартном
потоке ввода/вывода сервера;
ACTION – адрес, по которому будет отправлено
содержимое
формы (URL получателя данных). В качестве получателя данных
может выступать CGI сценарий (Common Gateway Interface, общий шлюзовой интерфейс) обработки данных (путь к сценарию
на сервере) или ссылка на адрес электронной почты – mailto:
e-mail;
TARGET – окно назначение для отображения результатов обра-
ботки данных на web-сервере (по умолчанию текущее окно).
ACCEPT-CHARSET – список кодировок для вводимых данных
(с разделителями – пробелами или запятыми);
73
ACCEPT – список типов содержания формы для отправки серверу
(с разделителями – запятыми).
ENCTYPE – определяет способ кодирования содержимого формы
при отправке, если указан метод POST. По умолчанию используется значение "application/x-www-form-urlencoded".
Например:
<FORM NAME="Comment" METHOD= "post" ACTION =" mailto:mybox@
mymail.ru"> </FORM>
Кроме вышеперечисленных элементов форм в контейнере
<FORM>...</FORM> могут находиться теги HTML, задающие формати-
рование элементов формы и ее структуру. Рассмотрим элементы
форм.
Определение элементов управления формы — тег <INPUT>
Данный тег, используемый для определения области внутри формы,
куда вводятся данные, не имеет конечного тега и должен располагаться
между тегами <FORM>. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, флажки, переключатели
или кнопки. Атрибуты тега <INPUT> представлены в таблице 1.
Атрибут ALIGN может
принимать следующие значения:
Left – выровнять по левому краю;
Right – выровнять по правому краю;
Top – выровнять верхнюю кромку изображения по верхней ли-
нии текущей текстовой строки;
Middle – выровнять базовую линию текущей текстовой строки
по центру изображения;
Bottom – выровнять нижнюю кромку изображения по базовой
линии текущей текстовой строки.
Таблица 1 – Атрибуты тега <INPUT>
Атрибут Описание
NAME имя, необходимое для доступа к данному элементу управ-
ления
VALUE значение элемента управления или надпись на кнопке
74
Атрибут Описание
TYPE тип элемента управления (вид поля ввода определяется
значением атрибута TYPE)
SIZE определяет размер текстового поля в символах
CHECKED логический атрибут-флаг; для флажка и переключателя
указывает, установлены ли они
MAX-
LENGHT
определяет максимальное количество символов, которые
можно ввести в текстовое поле
SRC задает адрес рисунка, используемого при создании кнопки
ALIGN указывает способ выравнивания изображения в документе
READONLY определяет элемент как пригодный только для чтения
DISABLED определяет элемент как недоступный
Атрибут TYPE может принимать следующие приведенные ниже значения:
TEXT – текстовое поле ввода (используется тогда, когда пользо-
вателю необходимо ввести небольшое количество текста).
TEXTAREA – текстовое поле.
PASSWORD – поле ввода пароля (вводимые символы заменяются
звездочками).
CHECKBOX – элемент «флажок».
RADIO – элемент «переключатель».
RESET – кнопка сброса введенных значений (кнопка, при нажа-
тии на которую браузер очищает форму от введенных пользователем значений).
Если в форме используется атрибут RESET, тег <INPUT> может
дополнительно содержать атрибут VALUE. Данный атрибут определяет
надпись на изображении кнопки.
SUBMIT – кнопка отправки формы (кнопка, при нажатии на кото-
рую браузер отправляет данные, введенные пользователем в форму, на обработку серверу (атрибут action),
заданным методом
(атрибут method));
HIDDEN – скрытые поля.
Добавление в тег <INPUT> атрибута TYPE="HIDDEN" позволит
включить в отправляемую форму значения атрибутов NAME и VALUE,
75
которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.
BUTTON – кнопка.
FILE – дает возможность пользователю прикрепить файл к теку-
щей форме.
Создание многострочных областей ввода текста – тег <TEXTAREA>
В зависимости от типа формы может потребоваться организовать
ввод большого количества текста. В таких случаях
используется тег
<TEXTAREA> для создания текстового поля из нескольких строк.
В таблице 2 представлены атрибуты тега <TEXTAREA>.
Таблица 2 – Атрибуты тега <TEXTAREA>
Атрибут Описание
NAME определяет наименование поля
COLS указывает (в символах) число колонок, содержащихся
в текстовой области
ROWS задает количество видимых строк текстовой области
READONLY определяет элемент как доступный только для чтения
DISABLED определяет элемент как недоступный
Использование списков в форме – тег <SELECT>
Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег
<SELECT> с атрибутом TYPE="select". Для определения списка пунктов
используют тег <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: NAME, MULTIPLE и SIZE.
Атрибут NAME – определяет наименование объекта.
Атрибут MULTIPLE – позволяет выбрать
более чем одно наимено-
вание.
Атрибут SIZE – определяет число видимых пользователю пунктов
списка. Если в форме установлено значение атрибута SIZE=1, то браузер
76
выводит на экран список в виде выпадающего меню. В случае SIZE > 1
браузер представляет на экране обычный список.
В форме может использоваться тег <OPTION> только внутри тега
<SELECT>. Эти теги поддерживают два дополнительных атрибута:
SELECTED и VALUE.
Атрибут SELECTED – используется для первоначального выбора
значения элемента по умолчанию.
Атрибут VALUE – указывает на значение, возвращаемое формой по
-
сле выбора пользователем данного пункта. По умолчанию значение поля
равно значению тега <OPTION>.
Работа с формами в Microsoft FrontPage 2003
Чтобы добавить в форму поле формы, нужно выполнить команду
Вставка – Форма и выбрать нужное поле формы из списка. Для измене-
ния размера поля необходимо выделить его и потянуть нажатой левой
кнопкой мыши за одну
из сторон. Свойства любого поля формы устанавливаются в диалоговом окне, которое можно открыть двойным щелчком
левой кнопки мыши на поле.
На рис. 1 представлено окно Свойства переключателя.
Поле Последователь-
ность перехода определяет
последовательность заполнения полей формы в браузере. Кнопку Проверить
в этом окне можно использовать только в
том случае,
если используется стан-
Рисунок 1 – Окно Свойства переключателя
дартный обработчик форм
FrontPage 2003. Кнопка Стиль этого окна позволяет изменить шрифт и
цветовое оформление поля. Можно вставить следующие поля формы:
Поле – однострочное текстовое поле, которое применяется для ввода
короткого сообщения, например имен и фамилий или адресов
электронной почты. Параметры поля (имя, начальное значение,
77
ширина в знаках) устанавливаются в диалоговом окне Свойства
текстового поля.
Текстовое поле – используются для ввода одной или нескольких
строк текста, например комментария. Это поле прокручивается, что
позволяет вводить в него тексты разного объема. Параметры поля
(имя, начальное значение, ширина в знаках, число строк) устанавливаются в диалоговом окне Свойства
текстового поля.
Поле отправки файла – служит для отправки файла на web-сервер
в указанную папку web-сайта, состоит из поля для ввода имени
файла и кнопки обзор, которая позволяет открыть диалоговое окно
Выбор файла. Параметры поля (имя, ширина в знаках) устанавливаются в диалоговом окне Свойства поля отправки файла.
Флажок
– служит для организации выбора элемента, пользователь
может установить или снять флажок по своему усмотрению. Параметры поля (имя, значение, начальное состояние) устанавливаются
в диалоговом окне Свойства флажка.
Переключатель – служит для организации выбора из списка, в ко-
тором можно выбрать только одно значение. Параметры поля (имя,
значение, начальное состояние)
устанавливаются в диалоговом окне
Свойства переключателя.
Раскрывающийся список – служит для организации выбора из рас-
крывающегося списка одного или нескольких вариантов. Заполнение
поля (кнопки Добавить, Изменить, Удалить, Вверх, Вниз) и его
параметры (имя, высота в строках, разрешение выбора нескольких
элементов) устанавливаются в диалоговом окне Свойства раскрывающегося списка. При заполнении
поля (кнопки Добавить, Изме-
нить) открывается дополнительное диалоговое окно Добавление
или Изменение варианта.
Кнопка – позволяет вставить кнопку для отправки данных формы
(тип Submit) или для удаления данных из полей формы (тип Reset).
Параметры кнопки (имя, подпись, тип) устанавливаются в диалоговом окне Свойства кнопки.
Расширенная кнопка – позволяет вставить кнопку
аналогичную
обычной (Кнопка). Отличие состоит в том, что размер кнопки и
надпись на ней можно изменять, не пользуясь диалоговым окном
Свойства расширенной кнопки.
78
Рисунок – служит для выбора рисунка, который будет иметь те же
свойства, что и кнопка Отправить.
Надпись – служит для создания надписи, связанной с каким-либо
полем формы. Для организации такой надписи необходимо выделить
поле формы и текст, далее выполнить команду для вставки надписи.
В результате будет установлена связь между
полем формы и тексто-
вой надписью, которая будет обведена серой штриховой линией.
Группа – служит для создания видимой рамки с подписью, которую
можно использовать для группировки полей формы по разделам.
Параметры группы (надпись, выравнивание) устанавливаются в диалоговом окне Свойства группы.
Внутри формы кроме полей формы можно вставлять любые объекты
(текст, таблицы, рисунки) для улучшения внешнего вида web-страницы.
Область формы отображается в пунктирной рамке, которая видна
только в режиме Конструктор.
Для задания свойств формы нужно установить курсор внутри формы
и выполнить команду Вставка – Форма – Свойства формы или выбрать
команду контекстного меню Свойства формы. В результате открывается
диалоговое окно Свойства формы
(рис. 2), в котором устанавливаются
различные параметры формы.
Раздел Сохранение результатов (2) определяет конечный сценарий
обработки данных формы. В случае использования собственных сценариев
необходимо установить переключатель В другом месте (3) и из списка
выбрать Настраиваемый сценарий.
Поле Имя формы (4) служит для указания имени формы. Кнопка
Конечная рамка открывает диалоговое окно Конечная рамка
(5), в кото-
ром можно выбрать окно, из которого будет делаться запрос.
Кнопка Параметры (6) открывает диалоговое окно Параметры
обработчика форм (7).
В поле Действие (8) указывается имя скрипта для обработки формы
или mailto:e-mail для отправки данных формы на адрес электронной почты
e-mail.
В поле Метод (9) выбирается способ передачи данных (GET – способ
передачи
данных через адресную строку, POST – способ передачи данных
79
Рисунок 2 – Настройка параметров формы
в теле HTTP запроса). В поле Тип кодировки (10) указывается тип кодировки данных формы при отправке на web-сервер.
Возможные типы кодировок:
application/x-www-form-urlencoded – данные формы кодируются как
пары имени и значения, используется по умолчанию;
multipart/form-data – данные формы кодируются как сообщение
с отдельными частями для каждого элемента управления на странице, используется
для отправки форм, содержащих файлы;
text/plain – данные формы кодируются как открытый текст, без
управляющих и форматирующих символов, используется для отправки данных на адрес электронной почты.
Чтобы создать форму, можно также воспользоваться готовыми шаб-
лонами или мастером создания форм. Для этого в области задач Создание
страницы (команда Файл – Создать
) нужно выбрать команду Другие
шаблоны страниц, перейти на вкладку Общие. Выбор одного из шаблонов: Гостевая книга, Регистрационная форма, Страница поиска, Фор-
ма обратной связи – позволяет создать новую web-страницу с типовой
формой.
80
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]