Пример 4.3
Следующий HTML-код позволяет выбрать из списка название факультета более одного раза:
< SELECT NAME=”Fak” MULTIPLE >
<OPTION> Учетно-финансовый
<OPTION SELECTED > Менеджмента
<OPTION> Внешнеэкономической деятельности
<OPTION> Коммерции и маркетинга
</ SELECT >
При этом по умолчанию будут выбран факультет менеджмента.
Пример 4.4
Поставим задачу разработать вторую страницу сайта (рис. 1.4), на которую пользователь попадает с главной страницы по ссылке Отзывы и предложения (рис. 1.3).
Эта страница по своему назначению должна быть интерактивной, т.е. должна обеспечить как минимум ввод данных посетителем сайта и отправку данных на Web-сервер.
Первый шаг, который нужно сделать в этом направлении – это разработать макет страницы. Будем считать, что этот этап преодолен и теперь осталось создать HTML-документ в соответствии с внешним видом страницы показанной на рис. 4.1.
Рис. 4.1. Web-страница, хранящаяся в файле recall.html
Начнем с эмблемы фирмы (файл logotip.gif). Для того чтобы рисунок появился в левом верхнем углу страницы, не требуется особых ухищрений, достаточно поместить в HTML-документ в разделе заголовка одной из первых строк следующий код:
<IMG SRC="logotip.gif">
Для позиционирования заголовка: Фирма "Гепард" используем CSS, определив класс с именем hd
.hd {
position: absolute;
left: 250px;
top: 30px;
}
Данное стилевое правило применяется к заголовку с помощью тега <DIV>.
<DIV CLASS=hd>
<H2><I><B>Фирма "Гепард"</B></I></H2>
</DIV>
При форматировании фрагмента текста Ваши предложения по улучшению качества выполненных работ опишем его стилевые свойства также с помощью CSS, определив класс txt2.
.txt2 {
position: absolute;
left: 180px;
top: 65px;
font-family: Arial;
font-size: medium;
text-align: center;
}
Для данного фрагмента текста, как и к заголовку, применено абсолютное позиционирование, но, кроме того, определен шрифт, размер шрифта, способ выравнивания текста. Стилевое правило применяется к фрагменту текста также с использованием тега <DIV>.
<DIV CLASS=txt2>
Ваши предложения по улучшению <BR>
качества выполненных работ
</DIV>
Перейдем к главной проблеме создания этой страницы – размещению элементов управления формы и фрагментов текста, связанного с ними. В данном случае более эффективным может оказаться способ позиционирования элементов с помощью таблицы. На рис. 4.2 показан пример такого позиционирования с отображенными границами таблицы.
Рис. 4.2. Позиционирование элементов формы с помощью таблицы
Каждый фрагмент текста или группы элементов управления, расположенные в ячейках, могут быть определенном образом отформатированы и дополнительно позиционированы внутри соответствующей ячейки.
Как видно из рисунка, ячейки различаются по фону. Есть и другие различия, предопределенные следующими стилевыми правилами:
.td1 {
background-color: #EEEEEE;
padding-left: 10pt;
width=27%
}
.td2 {
text-align: right;
padding: 10pt;
}
Данные стилевые правила применяются к некоторым ячейкам таблицы. Правило, соответствующее классу td1, определяет светло-серый цвет фона ячейки, отступ на 10 точек от левой границы ячейки и ширину ячейки в 27% от ширины таблицы. Второе правило (класс td2) предписывает выравнивание текста внутри ячейки по правой границе и отступ от всех границ на 10 точек.
Вот как, например, применяется первое правило к ячейке, в которой два текстовых поля:
<TD CLASS=td1>
<INPUT TYPE="text" SIZE="14"><BR><BR>
<INPUT TYPE="text" SIZE="14">
</TD>
Итак, основные трудности преодолены. Можно привести полный текст HTML-документа, описывающий Web-страницу, представленную на рис. 4.1.
<HTML>
<HEAD>
<STYLE>
.hd {
position: absolute;
left: 250px;
top: 30px;
}
.txt2{
position: absolute;
left: 180px;
top: 65px;
font-family: Arial;
font-size: medium;
text-align: center;
}
.td1 {
background-color: #EEEEEE;
padding-left: 10pt;
width=27%
}
.td2 {
text-align: right;
padding: 10pt;
}
</STYLE>
<TITLE> ООО "Гепард" </TITLE >
<IMG SRC="logotip.bmp">
<DIV CLASS=hd>
<H2><I><B>Фирма "Гепард"</B></I></H2>
</DIV>
<DIV CLASS=txt2>
Ваши предложения по улучшению <BR>
качества выполненных работ
</DIV>
</HEAD>
<BODY>
<FORM ACTION=”http://www.mysite.ru/one.asp” METOD=”post”>
<BR><BR>
<TABLE BORDER=0>
<TR>
<TD CLASS=td2>
Ваше имя:<BR>
Телефон контакта:
</TD>
<TD CLASS=td1>
<INPUT TYPE="text" SIZE="14"><BR><BR>
<INPUT TYPE="text" SIZE="14">
</TD>
<TD CLASS=td2>
Ваши заказы:
</TD>
<TD CLASS=td1>
<INPUT TYPE="checkbox"> Двери <BR>
<INPUT TYPE="checkbox"> Решетки <BR>
<INPUT TYPE="checkbox"> Окна
</TD>
</TR>
<TR>
<TD CLASS=td2 COLSPAN="2">
Ваша общая оценка<BR>
выполненных работ:
</TD>
<TD ALIGN="left" CLASS=td1>
<INPUT NAME="Mark" TYPE="radio" VALUE="2"> - плохо<BR>
<INPUT NAME="Mark" TYPE="radio" VALUE="3"> - неплохо<BR>
<INPUT NAME="Mark" TYPE="radio" VALUE="4"> - хорошо<BR>
<INPUT NAME="Mark" TYPE="radio" VALUE="5"> - отлично
</TD>
<TD ALIGN="right"><BR><BR>
<INPUT NAME="Mark" TYPE="submit" VALUE="Отправить">
</TD>
</TR>
</TABLE><BR>
<TEXTAREA COLS="65" ROWS="3" >
Введите ваши предложения, удалив данный текст, и нажмите на кнопку "Отправить".
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Задание 4.1
Разработать интерактивную страницу сайта, используя возможности форм HTML.
Литература
Белунцов. В. Новейший самоучитель по разработке Web-страниц. – Москва: Издательство «ДЕСС КОМ», 2000. – 448 с.
Хоумер А., Улмен К. Dinamic HTML: справочник – СПб: Издательство «Питер», 2000. – 512 с.: ил.
Приложение 1
Список наиболее часто используемых тегов
Структурные теги
Тег |
Значение |
<!> |
Определяет комментарий, который игнорируется обозревателем |
<!DOCTYPE> |
Объявляет тип и формат содержимого документа |
<BASE> |
Устанавливает URL исходного документа |
<BODY> |
Определяет начало и конец основной части страницы |
<COMMENT> |
Описывает комментарий, который не изображается |
<DIV> |
Разделяет документ, создавая фрагмент внутри него |
<HEAD> |
Формирует заголовок документа |
<HTML> |
Идентифицирует документ как содержащий элементы HTML |
<LINK> |
Используется для обозначения связей между документами |
<SPAN> |
Используется для определения нестандартных атрибутов текста |