ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.06.2025
Просмотров: 309
Скачиваний: 0
13
Например, анкета трудоустройства: Фамилия, имя, отчество:
адрес:
телефон:
пол:
мужчина
женщина комментарий:
послать очистить
Практическое задание 12
В область BODY добавьте тэги:
<FORM METHOD=”post” ACTION=”e-mail адрес”> <H4>Анкета трудоустройства</H4>
Фамилия, имя, отчество:<BR>
<INPUT TYPE=”text” NAME=”Фамилия” SIZE=”30”><BR>
Адрес:<BR>
<INPUT TYPE=”text” NAME=”Адрес” SIZE=”30”><BR>
Телефон:<BR>
<INPUT TYPE=”text” NAME=”Телефон” SIZE=”10”><BR> Пол:<BR>
<INPUT TYPE=”radio” NAME=”Выбор” VALUE=”Мужчина”>
Мужчина<BR>
<INPUT TYPE=”radio” NAME=”Выбор” VALUE=”Женщина”>
Женщина<BR> Комментарий:<BR>
<TEXTAREA NAME=”Комментар” ROWS=7 COLS=50></TEXTAREA> <INPUT TYPE=”submit” VALUE=”Послать”>
<INPUT TYPE=”reset” VALUE=”Очистить”> </FORM>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
Любая форма оформляется тэгом <FORM>. Внутри имеются параметры METHOD и ACTION. Значение post означает, что анкета будет послана
14
через электронную почту, а параметр ACTION будет запрашивать, в какой каталог и под каким именем разместить анкету.
Тэг <INPUT> определяет стиль вводимой клиентом информации. Параметр TYPE имеет значение text, это означает, что вводимая информация будет произвольным текстом. Параметр NAME определяет имя поля, SIZE – максимальную длину поля, в которое клиент будет вводить данные. Значение radio – задает вариант выбора из списка. Параметр VALUE – определяет название вариантов выбора. Далее идет значение, которое будет передаваться на страницу в случае выбора данного варианта. Вместо radio может быть тип checkbox – флажек, который позволяет выбрать несколько вариантов.
Тэг <TEXTAREA> используется для размещения комментариев и дополнительной информации. Параметры ROWS, COLS означают строки и позиции в строке.
Значения submit и reset задают кнопки, которые позволяют при нажатии послать сообщение по адресу или очистить адрес.
Тэги создания фреймов
Данная технология позволяет поместить на одной странице не один файл (в текущий момент), а несколько.
Сначала необходимо определить, какое окно будет главным и использовать в нем тэг <FRAMESET></FRAMESET>. Данный тэг позволяет задать несколько окон, их взаимное расположение и размеры. Например, необходимо создать страницу с тремя горизонтальными окнами. Для этого в тэг добавляется параметр ROWS (для вертикального COLS) и указываются размеры рамок. Размеры могут быть указаны одним из трех способов :
−абсолютные размеры в пикселях (не всегда удобно, т.к. можем не знать разрешения экранов пользователей);
−в процентах по отношению к высоте (или ширине);
−относительные размеры рамок.
Например,
<HTML>
<HEAD>
<TITLE>1</TITLE>
</HEAD>
<FRAMESET ROWS=”11%,17%,72%”> - второй способ <FRAME SRC=”2.htm”>
<FRAME SRC=”3.htm”>
<FRAME SRC=”4.htm”> </FRAMESET> </HTML>
<HTML>
<HEAD>
<TITLE>5</TITLE>
</HEAD>
15
<FRAMESET COLS=”*,2*,*”> - третий способ <FRAME SRC=”2.htm”>
<FRAME SRC=”3.htm”>
<FRAME SRC=”4.htm”> </FRAMESET> </HTML>
Обычно каждый фрейм имеет полосы прокрутки для быстрого перемещения по активному окну.
* - заменяет абсолютный размер рамки, а броузер самостоятельно высчитывает размеры каждого окна.
Отдельная рамка определяется тэгом <FRAME></FRAME> с параметром SRC, в котором указывается имя файла, на который организовывается ссылка. Имя файла должно задаваться полностью, включая все директории, особенно если он расположен не в текущем директории.
Возможна и смешанная конструкция окна.
<HTML>
<HEAD>
<TITLE>6</TITLE>
</HEAD>
<FRAMESET COLS=”50%,50%”> <FRAME SRC=”2.htm”> <FRAMESET ROWS=”60%,40%”> <FRAME SRC=”3.htm”> <FRAME SRC=”4.htm”> </FRAMESET>
</FRAMESET>
</HTML>
Внешний вид и сложность каждого отдельного файла не влияют на структуру фреймов. Они разрабатываются каждый в отдельности. Все, что заложено в каждом из файлов, будет исправно работать, как и на всю страницу.
Фреймы вводятся для удобства работы с web-страницей. Так, в левой части можно расположить оглавление, а в правой будет отражаться содержимое выбранной страницы. (При обычной структуре web-страницы
пользователю каждый раз после просмотра очередной страницы приходится возвращаться на страницу – оглавление, выбирать следующую страницу для просмотра, возвращаться обратно и т.д. – это неудобно и занимает время, и если страницы плохо связаны между собой по смыслу, это может запутать пользователя, так, что он никогда не разберется в структуре данного web- узла.)
16
Практическое задание 13
Создайте следующие файлы frm.htm, 1.htm, 2.htm, 3.htm:
<HTML>
<HEAD>
<TITLE>frm</TITLE>
</HEAD>
<FRAMESET COLS=”20%,*”> <FRAME SRC=”1.htm”>
<FRAME SRC=”2.htm” NAME=”main”> </FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>1</TITLE>
</HEAD>
<BODY>
<A HREF=”2.htm” TARGET=””main>Пункт1</A><P> <A HREF=”3.htm” TARGET=””main>Пункт2</A><P> <A HREF=”4.htm” TARGET=””main>Пункт3</A> </BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>2</TITLE>
</HEAD>
<BODY>
Пункт1
Текст
</BODY>
</HTML>
аналогично создайте файлы 3 и 4.
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
Тэг <A HREF=”2.htm” TARGET=””main>Пункт1</A><P> и другие позволяют сделать надпись ссылкой. Причем, при нажатии на эту надпись будет загружаться в правое окно нужный файл, т.е. в текущий момент он будет являться главным.
С помощью параметров NAME и TARGET задается место, где будут появляться файлы в окне, а именно, справа. Т.о., каждый из трех файлов по очереди будет размещаться в правой стороне экрана, рядом с оглавлением.
17
Microsoft FrontPage
Приложение MS FrontPage Editor чрезвычайно упрощает создание HTML-страниц, работа в нем напоминает текстовой редактор, поддерживает таблицы и формы. Удобен по причине возможности просмотреть создаваемый документ в формате HTML и в броузере, не покидая самого приложения.
Практическое задание 14
Создайте форму из практического задания 12 визуальными средствами проектирования FrontPage
Программы для создания web - документов
Фирма Macromedia предлагает два широкоиспользуемых продукта Flash
и Dreamweaver.
Редактор Flash по внешнему виду и возможностям очень близок к редакторам векторной графики и анимации. "На выходе" создается скомпилированный SWF-файл, редактировать который можно только посредством того же Flash-редактора (или его аналогов), и то при условии,
что в настройках файла при экспорте не назначена защита от несанкционированного копирования. Основное преимущество Flash перед обычной анимацией в том, что векторный формат графических элементов значительно уменьшает размер файла, а элементы, реагирующие на действия пользователя, корректно работают в любом броузере и в любой операционной системе, за счет очень маленького размера файла они грузятся
практически мгновенно и при этом содержат довольно сложную и красивую анимацию.
Dreamweaver позволяет автоматизировать работы с набором страниц или готовым web-сайтом. Имеется система поиска и замены участков кода, написанных с помощью приложений пакета MS Office, на более компактные, т.к. трехстраничная таблица с использованием трех-четырех стилей и двух языков, созданная в Word 2000 и сохраненная в HTML, займет 200-400Кбайт, в то время как размеченного текста там не более 40Кбайт. Программа сочетает два режима работы с HTML - визуальный и "ручной" - помогает разобраться в структуре языка разметки и быстро выучить необходимые тэги. Если редактор неверно интерпретирует действия, переключение в режим кода позволит быстро исправить ошибку.
Назначение языка программирования Java
Для организации взаимодействия со страницей и разнообразных визуальных эффектов используются языки программирования. Один из них
Java, а также его версия JavaScript. Язык Java и JavaScript понимаются любыми броузерами версий 3.0 и выше. Они отличаются от языка HTML и требуют опыта по программированию.
18
Для использования скрипта (сценария) в текст документа HTML необходимо ввести соответствующие теги <SCRIPT> и </SCRIPT>, они, как правило, размещаются в пределах тега заголовка.
Язык программирования позволяет создавать интерактивную трехмерную графику, заказные формы, строить диаграммы в реальном масштабе времени.
Язык JavaScript не требует компиляции, и сценарии записываются непосредственно в тэге <SCRIPT>.
Средства MS Office для создания web –страниц
Ранее говорилось о средствах создания web-страниц – это могут быть текстовые редакторы – Блокнот, Frontpage.
Существует также возможность создания документа в приложениях Word, Excel, PowerPoint, а затем сохранение созданных документов в формате html. Т.е., любой готовый документ можно сохранить в формате html. Если в формате имеются рисунки, они преобразовываются в формат gif
или jpeg.
В данных приложениях также существуют команды для создания ссылок, при этом не обязательно документ должен быть в формате html. Гиперссылки позволяют связывать документы на компьютере. Для создания ссылки выполняется команда Гиперссылка в меню Вставка (или кнопка Добавить гиперссылку) и в диалоговом окне указывается адрес для перехода по ссылке.
Спомощью приложения PowerPoint можно создать домашнюю страницу
спунктами для оглавления, где каждый пункт будет являться ссылкой на нужный документ.
Дизайн и тестирование web – узла
Понятие навигации подразумевает организацию удобного для пользователя перемещения между страницами.
Первое, что видит клиент сети, – это домашняя страница. Она может занимать весь экран (может быть организована структура с использованием фреймов) и должна содержать перечень услуг или обзор информации, содержание, реквизиты организации. Она должна привлекать.
По всему сайту стоит использовать нумерацию страниц, что облегчит ориентацию на сайте.
Дизайн web – страниц похож на полиграфические издания, и требования к оформлению во многом совпадают. Но существует и своя специфика –
графические иллюстрации занимают много места и клиент может не дождаться, пока получит всю страницу, следовательно, необходимо уменьшать или создавать графику так, чтобы она проявлялась постепенно и не задерживала загрузку всего сайта.
Следует указывать на домашней странице дату создания сайта или дату обновления, по возможности обратный электронный адрес (e-mail).