Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
<IMG SRС=”Images\Forlogo. gif” ALT=”Фирма Formaggi Fortini” WIDTH=”378” HEIGHT=”68”>
Таблицы
Таблицы являются привычным способом представления упорядоченной информации. Использование таблиц с невидимой сеткой (без рамок) позволяет эффективно управлять положением фрагментов текста или позиционировать изображения на странице.
Для создания таблицы используется тэг TABLE, создающий пустую таблицу. Организация структуры таблицы производится по строкам, каждая из которых в свою очередь содержит ячейки. Ячейки автоматически выравниваются внутри строк. Строки задаются тэгами TR, которые должны содержаться внутри тэга TABLE. Ячейки создаются тэгами TD, которые должны помещаться в тело тэга строки TR.
Следующая структура задает таблицу, состоящую из двух строк и трех столбцов (трех ячеек в каждой строке):
<TABLE>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>
<TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR>
</TABLE>
Форматирование задается для всей таблицы с помощью параметров тэга TABLE и для отдельных ячеек с помощью параметров тэга TD. Оба тэга имеют параметры BACKGROUND, BGCOLOR, ALIGN, HEIGHT и WIDTH. Параметр WIDTH допускает задание ширины таблицы/ячейки как в точках, так и в процентах.
Тэг TABLE имеет параметры:
BORDER - толщина границы таблицы в точках;
CELLPADDING – отступы от границ ячеек до их содержимого в точках;
CELLSPACING – расстояние между ячейками в точках.
Тэг TD имеет параметр VALIGN, задающий характер выравнивания содержимого ячейки по вертикали – TOP, MIDDLE, BOTTOM, BASELINE.
Специфическими параметрами тэга TD являются COLSPAN и ROWSPAN, позволяющие объединять ячейки таблицы. В качестве значений параметра выступают числа, указывающие, на сколько столбцов/строк распространяется ячейка.
Рис.8. Пример использования таблиц
Следующий HTML-документ задает таблицу, представленную на рис.8.
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY> <TABLE ALIGN=”right” BORDER=”1”
BGCOLOR=”lime” CELLPADDING=”10”>
<TR><TD ROWSPAN=”3”>Общее левое</TD>
<TD ALIGN=”center”>1</TD>
<TD ALIGN=”center”>2</TD></TR>
<TR><TD ALIGN=”center”>3</TD>
<TD ALIGN=”center”>4</TD></TR>
<TR><TD COLSPAN=”2”>Опять вместе</TD></TR>
</TABLE>
</BODY>
</HTML>
Для организации таблиц сложной структуры используют вложенные таблицы. В этом случае внутри ячейки одной таблицы задается другая таблица со своей собственной структурой, а соответствующий тэг TD содержит вложенный в него тэг TABLE.
Формы
HTML-формы предназначены для пересылки данных пользователя web-серверу. Форма заключается в тэг FORM, параметры которого указывают, каким именно образом будут передаваться и обрабатываться данные, извлеченные из формы. Формы не могут быть вложенными одна в другую, на одной web-странице можно разместить несколько форм.
Тэг формы является контейнером для тэгов элементов управления INPUT, TEXTAREA и SELECT. Элементы INPUT могут быть разных типов, которые определяются значениями параметра TYPE этого тэга.
Элементы управления предназначены для ввода информации. Для того чтобы данные, введенные с помощью элементов управления, могли быть отправлены серверу, они должны быть поименованы. Имена элементов в рамках одной формы должны быть уникальны (за исключением группы переключателей), они задаются параметром NAME и подчиняются обычным правилам для идентификаторов (могут содержать буквы и цифры, не должны содержать пробелов и начинаются с буквы).
Основные элементы управления, которые могут быть вставлены в форму: поле (строка) ввода текста, область ввода текста, флажки и переключатели, списки, кнопки.
Строка ввода текста. Представляет собой однострочную прямоугольную область на экране, в которую можно вводить текст с клавиатуры. Задается тэгом INPUT, параметр TYPE имеет значение TEXT.
Может быть определен размер строки на экране в символах – параметр SIZE, максимально допустимый размер вводимого текста в символах – MAXLENGTH. Если вводимый текст не укладывается в отведенное ему на экране место, будет осуществлена горизонтальная прокрутка. Пример:
<UNPUT TYPE=”text” NAME=”fio” SIZE=”15”>
Флажок. Представляет собой прямоугольную область на экране, которая может быть отмечена галочкой (флажок включен, элемент выбран) или оставаться пустой (флажок выключен, элемент не выбран). Задается тэгом INPUT, параметр TYPE имеет значение CHECKBOX. Имеет обязательный параметр VALUE, задающий значение, которое будет отослано на сервер, если элемент выбран. Если элемент не выбран, его имя и значение не пересылаются. Параметр CHECKED указывает, что элемент выбран по умолчанию. Пример:
<UNPUT TYPE=”checkbox” NAME=”zao” VALUE=”da”
CHECKED>
Переключатель действует аналогично флажку, но выглядит как кружок, который может быть отмечен точкой. Задается тегом INPUT со значением RADIO параметра TYPE.
Флажки и переключатели могут использоваться как самостоятельные элементы формы, в этом случае их выбор осуществляется независимо друг от друга. Эти элементы могут служить и для выбора одной из нескольких альтернатив. Для организации альтернативного выбора следует вставить несколько элементов типа Флажок или Переключатель, а затем объединить их в группу, задав у каждого элемента одно и то же имя (значение параметра NAME). В этом случае они действуют согласованно, то есть может быть выбран только один элемент из группы, а на сервер отправлено значение, определенное параметром VALUE выбранного варианта. Пример:
<DIV> Пол: М <INPUT TYPE=”radio” NAME=”pol”
VALUE=”муж” CHECKED> Ж <INPUT TYPE=”radio”
NAME=”pol” VALUE=”жен”></DIV>
В этом случае можно выбрать только один из вариантов значения пола. По умолчанию переключатель стоит в положении «М»; если выбор не будет изменен, на сервер будет отравлено значение «муж» элемента pol.
Область ввода текста. Представляет собой прямоугольную область с полосами прокрутки для ввода многострочного текста. Задается тэгом TEXTAREA. Параметры: ROWS – задает высоту области в строках, COLS – задает ширину области в символах.
Список. Осуществляет выбор из заданного списка. Список задается тэгом SELECT, который является контейнером для тэгов OPTION, задающих отдельные элементы списка.
Параметр SIZE тэга SELECT задает вертикальный размер списка в строках. Если его значение равно 1, то список имеет вид выпадающего; при размере в несколько строк он выглядит как список прокрутки. Параметр MULTIPLE задает возможность выбора сразу нескольких элементов списка.
Отдельные значения списка задаются непарным тэгом OPTION. В случае их отсутствия список будет пустым. Текст, который будет отображаться на экране в качестве элемента списка, указывается после тэга OPTION. Значения, передаваемые на сервер, определяются параметром VALUE. Значение по умолчанию указывается параметром CHECKED. Пример:
<SELECT NAME=”vozrast” SIZE=”1”>
<OPTION VALUE=”gr1” CHECKED>до 20
<OPTION VALUE=”gr2”>от 20 до 30
<OPTION VALUE=”gr3”>от 30 до 50
<OPTION VALUE=”gr4”>старше 50
</SELECT>
Список для определения возрастной группы, группа до 20 лет выбрана по умолчанию.
Кнопка сброса. Нажатие кнопки очищает все поля формы. Задается тэгом INPUT со значением RESET параметра TYPE. Надпись на кнопке задается значением параметра VALUE.
Кнопка отправки данных. Нажатие кнопки инициирует передачу данных формы серверу. Задается тэгом INPUT, параметр TYPE имеет значение SUBMIT.
Данные, извлеченные из формы, пересылаются на сервер в виде пар: имя_элемента=его_значение. Назначение данных (действие формы) определяется параметром ACTION тэга формы FORM. Существуют следующие возможности:
· Осуществляется переход на другую страницу. Значением параметра ACTION является URL этой страницы. Данные формы никуда не передаются, форма действует как гиперссылка.
· Данные формы отсылаются по электронной почте. Значением параметра ACTION является схема mailto с указанием адреса электронной почты. Происходит вызов почтового клиента и передача ему данных формы, отправка данных производится в фоновом режиме. Для функционирования этой схемы на клиентском компьютере (т. е. компьютере пользователя, заполняющего форму) должно быть установлено и настроено приложение для работы с электронной почтой (например, Outlook Express).
· Данные формы передаются серверной программе обработки. Это наиболее развитый способ, позволяющий серверу оперативно реагировать на запросы пользователя. Однако он требует выполнения действий на стороне сервера, а значит наличия на сервере специальных обрабатывающих программ. Значением параметра ACTION является URL такой программы.
Для формы может быть определен метод пересылки данных GET или POST – параметр METHOD и тип кодировки данных – параметр ENCTYPE.
Для отсылки данных на адрес электронной почты обязательно должны быть указаны: в качестве значения параметра ACTION – схема mailto, значение параметра METHOD – POST, значение параметра ENCTYPE – TEXT/PLAIN. В целом открывающий тэг формы может выглядеть следующим образом:
<FORM METHOD=”post” ENCTYPE=”text/plain”
ACTION=”mailto:*****@***ru? subject=вопрос по
дисциплине”>
Данные этой формы будут отсылаться на адрес электронной почты, а тема письма будет определена как «вопрос по дисциплине».
Приложение 2
ТЕХНОЛОГИЯ СОЗДАНИЯ WEB-УЗЛА В MS FRONTPAGE 2003
Технология создания трехстраничного web-узла с вертикальной структурой на основе фреймовых структур (рамок).
1. Запустить FrontPage 2003. Выполнить команду Файл/Создать, в области Создание, появившейся в правом части окна FrontPage щелкнуть на ссылке Другие шаблоны веб-узлов, выбрать шаблон Пустой веб-узел, в строке Укажите расположение нового веб-узла указать полный путь к локальной папке на диске, в которой будет создан web-узел (например, d:\ivanov – папка может быть создана заранее или нет). Нажать ОК. В дальнейшем при необходимости открыть web-узел для редактирования в FrontPage следует использовать команду Файл/Открыть узел.
2. Создать три новые страницы, щелкнув по значку создания нового стандартного документа 
– страница будет создана и открыта для редактирования в режиме Конструктор.
· Проверить языковые настройки новой страницы – Формат/Фон, вкладка Язык, при необходимости сделать следующие установки:
Пометить текущий документ, указав: <нет конкретного значения>
Сохранить документ, используя: кириллица
Повторить загрузку текущего документа, используя: <автоматический выбор> или кириллица.
Если настройки другие – поменять их для текущей страницы и сохранить изменения. Чтобы настройки были правильными для вновь создаваемых страниц следует настроить узел – Сервис/Параметры узла, вкладка Язык, строка:
Применяемый по умолчанию набор знаков для страниц: кириллица
Проверить настройки языка в режиме Код: в разделе HEAD должна присутствовать строка
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
· Сохранить созданные страницы в корневой папке созданного узла в файлах с разными именами (например, k1.htm, k2.htm и k3.htm для страниц «главная», «заявка» и «реферат»)).
· Для страниц задать фон в режиме Конструктор (Формат/Фон, вкладка Форматирование, группа Цвета), там же можно задать цвет текста по умолчанию.
· Ввести и отформатировать текст страниц.
3. В начале страницы реферата создать «оглавление», скопировав названия разделов (глав) реферата. Оформить пункты «оглавления» как ссылки, осуществляющие переход к соответствующим разделам страницы реферата:
· Пометить заголовки разделов в тексте реферата с помощью закладок. Для этого установить курсор в начало выбранного заголовка и выполнить команду Вставка/Закладка, в окне команды ввести имя закладки (без пробелов, желательно латиницей) и нажать ОК.
· Выделить пункт «оглавления», вставить гиперссылку на соответствующую закладку, для этого в окне команды Вставка/Гиперссылка щелкнуть на кнопке Закладка и выбрать нужную закладку (поле Адрес в окне команды должно быть пустым, так как закладки ищутся в текущей странице).
4. Создать и отформатировать новую страницу, на которой разместить текстовый или графический заголовок web-узла. Сохранить ее в корневой папке узла в файле с именем zag.htm.
5. Создать новую и отформатировать страницу, предназначенную для размещения меню. Сохранить ее в корневой папке узла в файле с именем menu.htm.
6. На страницу меню menu.htm :
· Вставить в столбик текст с названиями основных страниц узла (например, главная, заявка, реферат).
· Оформить вставленный текст как ссылки на страницы узла. Для этого выделить мышью нужный фрагмент текста и выполнить команду Вставка/Гиперссылка. В окне команды вставки гиперссылки выбрать соответствующий файл страницы из корневой папки web-узла.
· Сохранить страницу и проверить действие ссылок, открыв страницу меню в окне браузера – команда Файл/Просмотреть в обозревателе.
· Задать цвет ссылок – Формат/Фон, вкладка Форматирование, группа Цвета
· Задать динамические эффекты для ссылок – Формат/Фон, вкладка Дополнительно: включить флажок Включить эффекты выделения гиперссылок, нажать кнопку Стиль выделения и настроить вид шрифта выделенной гиперссылки;
7. Создать стартовую страницу узла, содержащую фреймовую структуру (рамки):
· Выполнить команду Файл/Создать, в области Создание в правом части окна FrontPage щелкнуть на ссылке Другие шаблоны страниц, перейти на вкладку Страница рамок, выбрать шаблон Вложенная иерархия или Объявление и оглавление, нажать ОК.
В результате выполнения команды будет создана страница, состоящая из трех частей – фреймов, в каждой части имеются кнопки Задать начальную страницу и Создать страницу. Так как мы уже создали все необходимые страницы для размещения их в фреймовой структуре, в дальнейшем будем использовать кнопку Задать начальную страницу (рис.9).
Рис.9. Пример фреймовой структуры
· Сохранить страницу рамок в файле index.htm. В окне команды сохранения задать заголовок web-узла (строка Название:, кнопка Изменить), например «мой сайт».
· В верхней части фреймовой структуры нажать кнопку Задать начальную страницу и выбрать в качестве исходной страницу заголовка (файл zag.htm). Переместить границу верхнего фрейма таким образом, чтобы полностью был виден текст заголовка. Настроить рамку заголовка: запретить изменение размеров, отключить прокрутку – щелкнуть правой кнопкой мыши в области рамки и выбрать из контекстного меню команду Свойства рамки. В окне команды в группе Параметры снять флажок Изменять размер в обозревателе, в списке Полосы прокрутки выбрать значение никогда.
· В левой рамке (фрейме) выбрать в качестве исходной страницу меню (файл menu.htm), а в нижней правой – одну из основных страниц узла (например, страницу «Главная» – k1.htm).
· Настроить размер рамки с меню. Настроить свойства рамки с меню – запретить изменение размеров фрейма пользователем. Сохранить страницу с фреймами.
· Проверить действие ссылок в окне браузера.
8. Отредактировать гиперссылки на странице меню таким образом, чтобы страницы, на которые указывают ссылки, всегда загружались в нижней рамке:
· Щелкнуть правой кнопкой мыши на первой из гиперссылок меню и выбрать из контекстного меню команду Свойства гиперссылки. В окне команды нажать кнопку Выбор рамки, в появившемся окне Конечная рамка выделить нижнюю рамку, щелкнув мышкой на схематическом изображении фреймовой структуры (рис.10).
· Повторить ту же процедуру для остальных ссылок страницы «Меню».
· Сохранить страницу с рамками, проверить действие ссылок.
Рис. 10. Выбор рамки назначения для гиперссылок
Технология создания web-формы, отправляющей данные на адрес электронной почты (рис.11)
Рис.11. Пример web-формы
1. На одной из созданных ранее страниц узла («заявка») разместить текст «Заявка на участие в выставке».
2. Ниже текста создать форму для ввода следующих данных: ФИО контактного лица, название организации и контактный телефон (с кодом города), требуемая выставочная площадь (тип выставочного модуля), Размещение выставочной площади (тип) и представленный на выставке тип деятельности фирмы (информация, товары, услуги):
· Ниже текста «Заявка на участие в выставке» вставить текстовое поле (команда Вставка/Форма/Поле). Появится текстовое поле и две кнопки. Внутри области формы, обозначенной линией из точечек (рис.11), перед текстовым полем ввести текст «Контактное лицо». Настроить размер текстового поля. Изменить свойства поля (дважды щелкнуть на нем мышью или щелкнуть правой кнопкой мыши и выбрать Свойства поля формы) – задать имя поля (строка Имя): fio.
· После первого поля внутри формы клавишей Enter добавить новую строку. Набрать текст «Организация», затем вставить текстовое поле и задать для него имя org.
· Ниже набрать текст «Контактный телефон (», вставить текстовое поле для ввода трехзначного кода города, задать для него имя kod и размер (строка Ширина в знаках): 3. В этой же строке вставить закрывающую скобку «)» и текстовое поле с именем phone и размером 7 знаков.
· Ниже набрать текст «Требуемая выставочная площадь» и вставить поле списка для выбора размера резервируемой площади и определения соответствующего выставочного модуля (таблица 2).
Заданные значения площади и выставочного модуля Таблица 2.
размер выставочной площади | тип выставочного модуля |
до 3 кв. м | малый модуль |
10 кв. м | модуль стандарт |
15 кв. м | большой модуль |
30 кв. м | сдвоенный модуль |
больше 30 кв. м | индивидуально |
Для вставки списка выполнить команду Вставка/Форма/Раскрывающийся список, настроить параметры списка:
свойство Имя – modul;
Высота – 1;
Разрешен выбор нескольких элементов – Нет.
Задать элементы списка (размеры площадей) и соответствующие им значения (тип модуля), для этого в окне свойств раскрывающегося списка нажать кнопку Добавить для ввода элемента списка, в появившемся окне в строку Вариант ввести текст «до 3 кв. м», установить флажок Значение, ввести в следующую строку значение «малый модуль» и нажать ОК. Аналогичным образом добавить остальные элементы списка (рис.12).
Рис.12. Окно свойств списка и ввод нового элемента
· Ниже списка ввести текст «Тип площади: павильон главный корпус», рядом с каждым вариантом (рис.11) вставить элемент переключатель командой Вставка/Форма/Переключатель. Настроить параметры переключателей:
свойство Имя группы для обоих переключателей – type,
Значение для первого переключателя – павильон, для второго – здание,
Начальное состояние для первого переключателя – Выбран, для второго – Не выбран.
Сохранить изменения и проверить действие переключателей в окне браузера – может быть выбран только один вариант ответа.
· Ниже переключателей набрать текст «Ваша фирма представляет: информацию услуги товары». Рядом с каждым и вариантов (рис.11) вставить элемент флажок (Вставка/Форма/Флажок), для каждого из флажков задать свойства:
Имя – reklama,
Значение – соответствующий вид деятельности (например, информация),
Начальное состояние – Установлен.
· Поменять расположение кнопок «Отправить» и «Сброс» (рис.11). Настроить параметры кнопок. Для свойства Значение или подпись кнопки «Сброс» установить значение «Очистить», для кнопки «Отправить» – «Подать заявку». Введенный текст отобразится на кнопках.
3. После того, как форма готова, сохранить страницу и настроить форму для отправки данных на e-mail:
· Перейти в режим непосредственного редактирования тэгов HTML – режим Код.
· Найти фрагмент HTML, относящийся к форме и отредактировать параметры открывающей части тэга формы FORM:
для параметра ACTION указать схему mailto (Приложение 1), например:
action=”mailto:expo@mail.ru?Subject=заявка”
для параметра METHOD установить значение post;
добавить параметр ENCTYPE со значением text/plain.
В целом открывающий тэг формы должен выглядеть следующим образом:
<form
action=”mailto:*****@***ru? Subject=заявка”
method=”post” enctype=”text/plain”>
Все лишние параметры тэга FORM (установленные FrontPage) следует удалить. Удалить идущий ниже отредактированного открывающего тэга <FORM> комментарий – выделенный серым цветом текст, заключенный в конструкцию <--! -->.
· Сохранить страницу «Формы» из режима Код, закрыть ее.
· Проверить действие формы в окне браузера, предварительно настроив почтовый клиент MS Outlook Express.
Приложение 3
ТЕХНОЛОГИЯ СОЗДАНИЯ WEB-УЗЛА В MS WORD 2003
Технология создания трехстраничного web-узла с вертикальной структурой на основе таблиц.
1. Создать на диске папку для размещения файлов web-узла. Создать в Word новую страницу Файл|Создать, вкладка Общие, Web-страница.
2. Сохранить страницу в свою под именем index.htm в формате Веб-страница с фильтром, при сохранении задать заголовок страницы («главная») – в окне сохранения файла кнопка Изменить в строке Заголовок.
3. Задать структуру страницы с помощью таблицы. Вставить таблицу, объединить ячейки (рис.13), настроить ее высоту (растянуть строки, начиная с верхней), настроить ширину области меню (левого столбца таблицы).
меню | заголовок |
содержимое | |
подвал |
Рис.13. Таблица, задающая вертикальную структуру web-узла
4. Настроить ширину таблицы 100% в окне команды Таблица/ Свойства таблицы. Убрать выделение границ ячеек.
5. При необходимости настроить выравнивание текста внутри ячеек – выполнить команду Таблица/Свойства таблицы, вкладка Ячейка.
6. Задать фон страницы – команда Формат/Фон, фон таблицы и/или отдельных ячеек таблицы – команда Формат/Границы и заливка, вкладка Заливка.
7. В ячейку заголовка вставить текстовый или графический заголовок web-узла.
8. В подвал вставить дату последнего изменения страницы Вставка/Дата и время, выбрать формат даты, флажок Обновлять автоматически. Сохранить страницу.
9. Создать две пустых страницы, сохранив их под разными именами (например, zayavka.htm и referat.htm для страниц «заявка» и «реферат») в папке web-узла. Закрыть новые страницы.
10. В ячейке меню в столбик набрать текст с названиями всех трех страниц («главная», «заявка», «реферат»). Оформить текст как ссылки на страницы, для этого выделить мышью фрагмент текста и выполнить команду Вставка/Гиперссылка. В окне команды выбрать файл страницы из текущей папки (папки web-узла). Следует следить, чтобы при ссылке на файл страницы был записан относительный адрес (только имя файла). Вставить ссылку «написать» на почтовый адрес – в окне команды Вставка/Гиперссылка выбрать группу Связать с: электронной почтой, задать адрес и тему сообщения.
11. Разместить в ячейке подвал ссылку на начало страницы. Для этого в верхний правый угол страницы вставить закладку - выполнить команду Вставка/Закладка, задать имя закладки (без пробелов, желательно латиницей), нажать кнопку Добавить. В подвал вставить текст «наверх» и оформить его как ссылку на созданную закладку – в окне команды Вставка/Гиперссылка нажать кнопку Закладка и выбрать имя закладки. Сохранить страницу.
12. С помощью команды Файл/Сохранить как Сохранить страницу «главная» (файл index.htm) под именами других страниц (zayavka.htm и referat.htm), переопределяя имена файлов и заголовки страниц.
13. Проверить действие гиперссылок в окне браузера.
14. На каждой странице по отдельности наполнить ячейку содержимое.
Технология создания трехстраничного web-узла с вертикальной структурой фреймов (рамок).
1. Создать папку для размещения файлов web-узла. В папке web-узла создать и оформить три основные страницы: «главная», «заявка», «реферат» и две вспомогательные: «заголовок» с графическим или текстовым заголовком web-узла и «меню». Имена файлов страниц рекомендуется задавать латиницей, все страницы сохранять в формате web - страница с фильтром.
2. Создать страницу с фреймовой структурой (страницу рамок):
· Создать новую web-страницу, а затем выполнить команду Формат|Рамки|Новая страница рамок. Используя панель инструментов Рамки добавить новую рамку слева (для меню), перейти в правую рамку и создать новую рамку сверху (для заголовка) – рис.14.
Рис.14. Страница рамок и панель инструментов Рамки
3. Настроить размер рамок, перетаскивая их границы.
4. Сохранить страницу рамок в папке web-узла под именем index.htm.
5. Определить свойства рамок, вызвав окно настройки свойств с помощью кнопки Свойства рамки 
или щелкнув правой кнопкой мыши в области выбранной рамки и выбрав команду Свойства рамки:
· задать страницы, которые будут отображаться в рамках: щелкнуть на кнопке Обзор рядом со строкой Начальная страница, следует следить, чтобы ссылки на страницы были относительными (указывались только имена файлов): в левой рамке располагается страница «меню», в правой верхней – страница «заголовок», в правой нижней – страница «главная».
· задать имена рамок (лучше англоязычные); настроить границы рамок (вкладка Границы) – запретить изменение пользователем размеров меню и заголовка (снять флажок разрешить изменение размеров), отменить для заголовка полосы прокрутки (выбрать Никогда).
6. На странице меню в столбик набрать текст с названиями основных страниц: «главная», «заявка», «реферат». Вставить на страницу меню, отображаемую внутри рамки, гиперссылки на основные страницы:
· Выделить мышью фрагмент текста и выполнить команду Вставка/Гиперссылка. В окне команды выбрать файл соответствующей страницы,
· указать рамку назначения, щелкнув на кнопке Выбор рамки, а затем выделить мышью нижнюю рамку на схеме фреймовой структуры (рис.15).
Рис.15. Выбор рамки назначения в окне вставки гиперссылки
7. Сохранить сделанные изменения. Открыть страницу index. htm в окне браузера и проверить действие ссылок.
Технология создания web-формы, отправляющей данные на адрес электронной почты (рис.11)
1. На одной из созданных ранее страниц узла («заявка») разместить текст «Заявка на участие в выставке».
2. Ниже текста создать форму для ввода следующих данных: ФИО контактного лица, название организации и контактный телефон (с кодом города), требуемая выставочная площадь (тип выставочного модуля), Размещение выставочной площади (тип) и представленный на выставке тип деятельности фирмы (информация, товары, услуги):
· Вызвать панель инструментов Веб-компоненты (команда Вид/Панели инструментов). Ниже текста «Заявка на участие в выставке» ввести текст «Контактное лицо», затем вставить текстовое поле: установить курсор после текста щелкнуть на кнопке поле 
панели инструментов Веб-компоненты. Появится текстовое поле и две линии, область web-формы. Все остальные элементы формы должны вставляться внутри области формы, обозначенной этими линиями (рис.16).
Рис.16. Вид области формы с панелью Веб-компоненты
в режиме редактирования
· Настроить размер текстового поля. Изменить свойства поля (дважды щелкнуть на нем мышью или щелкнуть правой кнопкой мыши и выбрать Свойства) – задать имя поля (строка HTMLName): fio.
· После первого поля внутри формы клавишей Enter добавить новую строку. Набрать текст «Организация», затем вставить текстовое поле и задать для него имя (HTMLName)org.
· Ниже набрать текст «Контактный телефон (», вставить текстовое поле для ввода трехзначного кода города, задать для него имя kod и размер (строка MaxLength): 3. В этой же строке вставить закрывающую скобку «)» и текстовое поле с именем phone и размером 7.
· Ниже набрать текст «Требуемая выставочная площадь» и вставить раскрывающийся список 
для выбора размера резервируемой площади и определения соответствующего выставочного модуля. Настроить параметры списка:
HTMLName – modul;
DisplayValue – список отображаемых на экране элементов через точку с запятой:
до 3 кв. м; 10 кв. м; 15 кв. м; 30 кв. м; больше 30 кв. м
Value – список отсылаемых формой значений, соответствующих экранным элементам, через точку с запятой:
малый модуль; модуль стандарт; большой модуль;
сдвоенный модуль; индивидуально
· Сохранить страницу и проверить действие списка в окне обозревателя.
· Ниже списка ввести текст «Тип площади: павильон главный корпус», рядом с каждым вариантом (рис.11) вставить переключатель 
. Настроить свойства переключателей:
HTMLName для обоих переключателей – type,
Value для первого переключателя – павильон, для второго – здание,
Checked для первого переключателя – True, для второго – False.
Сохранить изменения и проверить действие переключателей в окне браузера – может быть выбран только один вариант ответа.
· Ниже переключателей набрать текст «Ваша фирма представляет: информацию услуги товары». Рядом с каждым и вариантов (рис.11) вставить элемент флажок 
, для каждого из флажков задать свойства:
HTMLName – reklama,
Value – соответствующий вид деятельности (например, информация),
Checked – True.
· Внизу вставить кнопку «Сброс» 
и «Отправить» 
. На экране появятся кнопки со стандартными подписями Reset и Submit. Настроить параметры кнопок. Для свойства Caption кнопки «Сброс» установить значение «Очистить», для кнопки «Отправить» – «Подать заявку». Введенный текст отобразится на кнопках.
· Настроить параметры отправки формы в окне свойств кнопки «Отправить» («Подать заявку»):
Method – post;
Encoding – text/plain;
Action – указать схему mailto (Приложение 1), например:
mailto:expo@mail.ru?Subject=заявка
· Сохранить страницу и проверить действие формы в окне браузера, предварительно настроив почтовый клиент MS Outlook Express.
Приложение 4
СОДЕРЖАНИЕ ДИСЦИПЛИНЫ
(извлечение из рабочей программы дисциплины)
РАЗДЕЛ 1. ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ
Тема 1.1. Глобальная компьютерная сеть Интернет
Современные тенденции к объединению мирового информационного пространства. Развитие глобальных компьютерных сетей.
Понятия интрасети и интерсети. Концепции и инфраструктура Интернет. История и тенденции развития.
Тема 1.2. Система адресации в Интернет
Структура Универсального указателя ресурса URL. IP-адреса. Доменная система именования. Подключение к сети Интернет.
Тема 1.3. Сервисные службы Интернет
Служба электронной почты E-Mail. Сервис копирования файлов с сервера FTP. Сервис многоуровневых меню по доступу к компьютерным ресурсам Gopher. World Wide Web.
Тема 1.4. Обозреватель Internet Explorer
Назначение и основные функции.
Поиск ресурсов Интернет. Средства обозревателя для поиска информации в Интернет. Поисковые системы.
Сохранение страниц и данных из сети Интернет. Функции обозревателя для сохранения данных. Сохранение элементов страницы, страниц и узлов Интернет.
РАЗДЕЛ 2. ПРОЕКТИРОВАНИЕ WEB-СТРАНИЦ.
Тема 2.1. Гипертекстовые документы. Основы HTML
Концепция гипертекстового документа, узла, системы узлов. HTML-документ. Основные дескрипторы форматирования текста, списков и таблиц.
Реализация гиперссылок в HTML-документе.
Дескрипторы вставки рисунков, оформление фона.
Тема 2.2. Проектирование простейших Web-страниц средствами текстового процессора Word
Преобразование документа Word в Web-страницу. Создание и форматирование основных элементов Web-страниц. Создание гиперсвязей.
Использование специальных элементов оформления: графические элементы, бегущая строка, диаграмма, элементы форм.
Тема 2.3. Специализированные средства создания Web-страниц: редактор FrontPage
Основные сведения о FrontPage. Режимы просмотра страниц. Форматирование текста. Списки. Таблицы. Создание гиперсвязей.
Использование графики. Встроенный графический редактор.
Создание страниц с фреймами.
Создание форм и командных кнопок. Дополнительные средства оживления Web-страниц. Языки сценариев.
Тема 2.4. Проектирование Web-сайтов средствами FrontPage
Разработка проекта Web-узла. Иерархия и связь страниц узла.
Проект сайта «Дискуссионная проблема».
Проект сайта «Проект».
Проект корпоративного сайта.
Проект сайта с поддержкой электронной коммерции.
Тема 2.5. Публикация Web-страниц на удаленном Web-сервере
Схема взаимодействия с Web-сервером.
Основные функции Internet Information Services. Инсталляция и создание Intranet и Internet Web–узла средствами Internet Information Services в локальной сети.
Публикация и удаленная редакция Web-сайта. Использование FTP-клиента для редактирования сайта Интранет и Интернет.
Приложение 5
Пример оформления титульного листа контрольной работы
Федеральное агентство по образованию
Государственное образовательное учреждение
высшего профессионального образования
«Санкт-Петербургский государственный
инженерно-экономический университет»
Кафедра вычислительных систем и программирования
Контрольная работа по дисциплине
ПРОГРАММНЫЕ СРЕДСТВА РАЗРАБОТКИ WEB-СТРАНИЦ
Выполнил______________________________________________________
()
Студент____________курса_______спец____________________________
Группа ______________№ зачет книжки____________________________
Подпись________________________________________________________
Преподаватель____________________________________________
()
Должность________________________________________________
(уч. звание, уч. степень)
Оценка ______________Дата проверки_________________________________________
Подпись________________________________________________________
Санкт – Петербург
2008
Приложение 6
Выбор контрольных заданий
Выбор варианта индивидуального задания осуществляется по таблице. Ключом выбора являются две последние цифры номера зачетной книжки студента.
Таблица выбора варианта контрольной работы
Две последние цифры номера зачетной книжки | Вариант контрольной работы |
01 | 1 |
02 | 2 |
03 | 3 |
04 | 4 |
05 | 5 |
06 | 6 |
07 | 7 |
08 | 8 |
09 | 9 |
10 | 10 |
11 41 71 | 11 |
12 42 72 | 12 |
13 43 73 | 13 |
14 44 74 | 14 |
15 45 75 | 15 |
16 46 76 | 16 |
17 47 77 | 17 |
18 48 78 | 18 |
19 49 79 | 19 |
20 50 80 | 20 |
21 51 81 | 21 |
22 52 82 | 22 |
23 53 83 | 23 |
24 54 84 | 24 |
25 55 85 | 25 |
26 56 86 | 26 |
27 57 87 | 27 |
28 58 88 | 28 |
29 59 89 | 29 |
30 60 90 | 30 |
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 |
