Применение тем для оформления страниц сайта

Чтобы придать сайту более цельный эстетически привлекатель­ный и одновременно более профессиональный вид, следует при­держиваться единого подхода к оформлению страниц, т. е. соблю­дать определенную цветовую гамму и стиль (например, дизайн продуктов фирмы Microsoft). Для решения этой задачи в редакто­ре FrontPage используются так называемые темы. Тема — это оп­ределенный набор элементов оформления и цветовых схем, кото­рый можно применить к страницам. В редакторе имеется несколько заранее подготовленных тем, которые могут быть использованы без изменений или изменены по усмотрению разработчика сайта.

Набор цветовых схем выбранной темы применим к основным элементам страницы: тексту, заголовкам, ссылкам, надписям на кнопках, таблицам, фону и т.п. Тема также определяет единое графическое оформление фоновых рисунков, заголовков, кнопок, разделительных линий и маркеров. Тема задает шрифт и стиль ос­новного текста и заголовков страницы. Некоторые возможности FrontPage вообще доступны только при использовании темы. На­пример, заголовки страниц и кнопки навигации могут отобра­жаться в графическом виде только при использовании темы. В про­тивном случае они будут отображены в виде текста.

Для выбора темы необходимо открыть домашнюю страницу сай­та в режиме редактирования и с помощью команды меню Format * Theme (Формат * Тема) открыть диалоговое окно выбора тем Themes (Темы), показанное на рис. 19.25.

В левой части этого диалогового окна расположен список тем, а в правой находится область просмотра оформления элементов страницы в стиле выбранной темы.

Под списком тем расположены флажки, которые позволяют задать дополнительные параметры для выбранной темы. При уста­новке флажка Vivid colors (Яркие цвета) цвета некоторых элемен­тов данной схемы будут иметь более яркие оттенки. Флажок Active graphics (Активная графика) определяет использование более слож-

Рис. 19.25. Диалоговое окно для выбора тем

ных контуров и узоров при отображении заголовков, кнопок и других графических элементов (при его отключении графические элементы ряда тем будут иметь более строгий вид). Флажок Bach picture (Фоновый рисунок) разрешает использование фонового рисунка на страницах сайта. При установке флажка Apply using CSS (Применить, используя таблицу стилей) оформление выбран­ной темы происходит с использованием внешних таблиц стилей, в противном случае команды форматирования включаются в HTML-код страницы.

19.7. Разработка форм

Разработка форм детально рассматривалась при изучении сис­темы Access. При создании сайтов формы используются в основ­ном для сбора сведений от посетителей сайта.

Форма состоит из стандартных элементов пользовательского интерфейса: полей ввода, открывающихся списков, флажков и переключателей. Обычно, заполнив форму, посетитель сайта под­тверждает ввод данных нажатием на кнопку или каким-либо дру­гим способом. После этого полученная информация сохраняется в файле или базе данных на Web-сервере для последующей обра­ботки и анализа.

Перед созданием формы необходимо определить, какого типа информацию требуется получить от посетителя сайта (например, заказ на продукты или услуги, контактную информацию, отзы­вы, поисковые запросы и др.). Затем, установив текстовый курсор на странице в позицию, где требуется разместить форму, выбрать в меню команду Insert * Form * Form (Вставка * Форма * Форма).

В FrontPage форма представляет собой прямоугольную область на странице, отделенную пунктирной линией, на которой разме­щают различные элементы. В создаваемую форму автоматически включаются две кнопки: [Submit] (Отправить) — для отправки введенной информации и [Reset] (Сброс) — для очистки полей или установки новых исходных значений.

Для установки элементов управления в форму используют ко­манды меню Insert * Form (рис. 19.26), в которое входят те же элементы управления, что и при создании форм в системе Access:

• One-line Text Box — поле для ввода данных;

• Scrolling Text Box — полоса скроллинга;

• Check Box — флажок;

• Radio Button — переключатель;

• Drop Down Menu — поле со списком;

• Push Button — кнопка;

• Picture — вставка рисунка;

• label — метка.

На рис. 19.27 показана форма ввода личных данных для посети­телей сайта.

Технология создания форм достаточно подробно рассматрива­лась в гл. 5, поэтому обратим внимание лишь на некоторые осо­бенности создания форм в редакторе FrontPage.

Ширину поля для ввода данных можно изменить, передвигая его за край с помощью мыши. Рядом с этим полем можно указать заголовок или поясняющий текст.

Для установки свойств поля необходимо щелкнуть правой кноп­кой мыши на поле ввода и с помощью команды Form Field Properties (Свойства поля формы) из появившегося контекстного меню от­крыть окно Text Box Properties (рис. 19.28).

В этом окне в строке Name (Имя) указывают имя поля, в строке Initial value (Начальное значение) — значение поля, которое будет присутствовать по умолчанию, а в окне Width in characters (Ширина в символах) задают ширину видимой области поля ввода.

При этом если переключатель Password field (Поле для паро­ля) установлен в позицию Yes, вводимый текст будет отражаться в виде звездочек.

Затем нажатием кнопки [Validate] (Правила) открывают окно для установки правил ввода данных в поле (рис. 19.29), к которым относятся: ограничение на формат, предупреждение о вводе не­корректной информации, установка для текстового поля мини-

мального (Min length) и максимального (Max length) числа симво­лов в группе элементов Data length (Длина данных), выбор в от­крывающемся списке Data type (Тип данных) типа поля и опреде­ление допустимого набора символов в группе элементов управле­ния Textformat (Текстовый формат) или Numeric Format (Число­вой формат). При этом в поле ввода Display name (Отображаемое имя) указывается имя поля, которое будет выводиться в сообще­нии в случае нарушения установленных правил.

Рассмотрим также способы создания полей со списками, от­личающиеся от технологических приемов, изложенных в гл. 5.

Установив поле со списком на форму, следует разместить кур­сор в области этого поля и щелкнуть правой кнопкой мыши. Затем в появившемся контекстном меню с помощью команды Form Field Properties (Свойства формы) открыть диалоговое окно Drop-Down Menu Properties (Свойства открывающегося списка), показанное на рис. 19.30.

В поле Name (Имя) этого окна следует указать имя поля со списком, нажать кнопку [Add] (Добавить) и в открывшееся новое диалоговое окно ввести первые значения элементов списка. Затем аналогично ввести все значения элементов списка.

Установив флажок Specify Value (Указать значение), в поле ввода под ним можно указать значение, которое будет передаваться вме­сто выбранного названия. При сброшенном флажке это значение

будет эквивалентно названию элемента списка. Переключатель Initial State (Начальное состояние) определяет, будет ли данный элемент выбран по умолчанию.

По аналогичной схеме устанавливаются на форме и другие эле­менты управления.

После установки на форме элементов управления следует за­дать свойства кнопке [Submit] (Отправить) и заменить название кнопки [Reset] (см. рис. 19.27), например на [Очистить поля].

Для задания свойств кнопке [Submit] следует щелкнуть правой кнопкой мыши в любой области формы и в появившемся контек­стном меню выбрать команду Form Properties (Свойства формы). На экране появится соответствующее диалоговое окно (рис. 19.31). С помощью группы элементов управления Where to store results (Где сохранять результат) этого окна определяется способ сохранения результатов формы. По умолчанию включен первый переключа­тель Send to (Отправить в). Это значит, что полученные данные могут быть сохранены в текстовом файле, указанном в поле File пате (Имя файла), или отправлены по электронной почте по адресу, указанному в поле E-mail address (Адрес электронной почты).

Нажатием кнопки [Options] (Параметры) открывается диало­говое окно Options for Saving ults of Form (Параметры сохранения результатов формы), показанное на рис. 19.32. В этом диалоговом

окне можно настроить различные параметры сохранения резуль­татов: в файле или письме.

На вкладке File Results (Сохранение в файле) можно выбрать формат файла. Это может быть текстовый файл с различными видами разделителей или в формате HTML. Здесь же можно ука­зать второй файл для результатов, что удобно, если, например, требуется подготовить один результат для сохранения в базе дан­ных, а другой — для отображения на странице.

На вкладке E-mail Results (Сохранение в письме) можно выб­рать формат письма (E-mailformat), указать тему письма (Subject line) и указать отправителя (Reply-to line).

На вкладке Confirmation Page (Страница подтверждения) мож­но указать адрес страницы с информацией подтверждения ввода (Confirmation page), а также адрес страницы, отображаемой при нарушении правил ввода (Validation failure page).

На вкладке Saved Fields (Сохраняемые поля) можно выбороч­но перечислить поля формы, которые требуется сохранить (Form fields to save), и указать их порядок, а также включить в результат дополнительные поля: дату (Date Format), время (Time Format), имя удаленного компьютера (Remote comp пате), имя пользовате­ля (Username) и тип броузера (Browser type).

Для сохранения результатов ввода в базу данных следует задать свойства этой базы данных, вернувшись к диалоговому окну Form Properties (Свойства формы) на рис. 19.31.

Установка переключателя Send to database (Отправить в базу данных) в группе элементов управления Where to store results (Где сохранять результаты) означает, что данные будут сохраняться в базе данных. Причем это может быть база данных MS Access или какая-либо другая база данных, поддерживающая работу через стандартный системный интерфейс доступа к базам данных ODBC (Open Database Connectivity — Связь с открытыми базами дан­ных).

Для работы с базой данных необходимо создать и настроить соединение (Database Connection to Use), выбрать таблицу и уста­новить другие параметры в диалоговом окне Optionsfor Saving Results to Database (Параметры сохранения результатов в базу данных), показанном на рис. 19.33 и вызываемом нажатием на кнопку [Options] (Параметры), показанную на рис. 19.31.

При установленном переключателе Send to other (Отправить другому обработчику) данные обрабатываются с помощью скрип­та, т. е. небольшой программы, написанной разработчиком сайта. Такую программу называют также программой-обработчиком, или обработчиком. В редакторе FrontPage имеются два готовых обра­ботчика: для дискуссионных форм (Discussion Form Handler) и для

регистрационных форм (Registration Form Handler). Эти обработчи­ки выбираются в открывающемся списке рядом с переключате­лем Send to other (Отправить другому обработчику), а их парамет­ры задаются в отдельных диалоговых окнах, вызываемых нажати­ем кнопки [Options] (Параметры).

Несмотря на разнообразие возможностей по обработке резуль­татов формы, их можно проверить и на отдельном компьютере.

Для автоматического сохранения данных в файле, письме или базе данных в компьютере, где размещен сайт, должны быть уста­новлены дополнительные программные средства FrontPage Server Extensions (FPSE). Пакет программ FPSE, обычно устанавливае­мый на Web-сервер и предназначенный для поддержки сайтов, разработанных с помощью программы FrontPage, обеспечивает прием и передачу данных и файлов от посетителей сайтов к Web-серверу напрямую без использования дополнительных протоко­лов и поддержку работы специфичных для редактора FrontPage элементов пользовательского интерфейса.

Таким образом, чтобы проверить работоспособность описан­ных средств для работы с формами, необходимо разместить сайт на Web-сервере с установленным на нем пакетом программ FPSE.

Единственным вариантом обработки результатов формы без программных средств FPSE является использование скрипта, оп­ределенного разработчиком сайта, т.е. специальной программы, написанной в соответствии с требованиями следующих техноло­гий пересылки клиентских данных:

CGI (Common Gateway Interface) — шлюзовой интерфейс;

ISAPI (Internet Server Application Program Interface) — про­граммный интерфейс для приложений Internet-сервера;

NSAPI (Netscape Server Appli-Yogram Interface) — программ­ный интерфейс для приложений Web-сервера Netscape;

ASP (Active Server Pages) — активные серверные страницы.

Перечисленным технологиям отправки клиентских данных со­ответствуют два стандартных метода пересылки информации: POST и GET, в которых информация передается в виде пар имя_поля = значение, разделенных амперсандами &.

Программа-обработчик должна разобрать эти данные и выпол­нить определенные действия, например произвести поиск в базе данных и вывести результат в виде HTML-страницы, которая пе­ресылается обратно для просмотра в броузер.

Завершающим шагом при создании формы является включе­ние в состав сайта страницы подтверждения (Confirmation page), которая выводится в ответ на отправку данных при нажатии кнопки [Submit] (Отправить). Обычно она содержит некоторый текст, под­тверждающий отправку, и информацию, введенную посетителем сайта в формы.

Посетитель сайта может проверить правильность указанных данных и при необходимости вернуться к форме для повторного заполнения. При использовании формы редактор FrontPage авто­матически создает страницу подтверждения и обеспечивает ее работу, но только если для обработки данных не используется собственный скрипт.

По умолчанию на страницу подтверждения выводятся назва­ния полей и их значения. Создать страницу подтверждения можно и самостоятельно, связав ее с формой. Для этого на созданную новую страницу следует поместить поля подтверждения (Confirmation fields), которые будут отображать данные из формы, а также дру­гие элементы по усмотрению.

Добавить поле подтверждения на страницу можно с помощью команды Insert * Component * Confirmation Field (Вставка * Компо­нент * Поле подтверждения) из главного меню программы.

19.8. Вставка гиперссылок

Напомним, что ссыпка, или гиперссылка, устанавливает связь между элементом страницы (текстом или рисунком), который в этом случае выделяется цветом, и некоторым объектом или ад­ресом, на который она указывает (это может быть адрес другой страницы этого же сайта, другая область той же страницы, стра­ница другого сайта в сети Internet, адрес электронной почты или любой файл компьютера).

При активизации ссылки (обычно щелчком мыши) происхо­дит загрузка объекта, адрес которого содержится в гиперссыпке. Такой адрес часто обозначается аббревиатурой URL (Uniform Resource Locator — стандартный указатель ресурса) и может со­держать название протокола передач данных, имя Web-сервера или компьютера, имя домена, каталог и имя файла.

При проектировании сайта в программе FrontPage в большин­стве случаев не требуется вручную записывать адрес ссылки, дос­таточно лишь указать имя страницы, файла или объекта. Гиперс­сылка сформируется автоматически. В случае изменения имени файла FrontPage автоматически обновит все гиперссылки, свя­занные с этим файлом.

Рассмотрим технологию создания ссылок на страницы в пре­делах одного сайта:

=> открыть страницу для редактирования;

=> установить курсор в место вставки гиперссылки на конкрет­ную страницу;

=> вызвать команду Insert * Hyperlink. В результате откроется диалоговое окно выбора адреса для вставки гиперссылки (рис. 19.34).

Рис. 19.34. Окно выбора адреса страниц для вставки гиперссылки

Можно сделать ссылку, указывающую на документ, создан­ный в любом приложении для Windows: Word, Access, Excel или PowerPoint.

19.9. Вставка графических объектов на страницы сайта

Редактор FrontPage позволяет вставлять в документы различ­ные графические объекты из файлов следующих форматов: GIF, JPEG, BMP, TIFF, TGA, RAS, EPS, PCX, PNG, PCD, WMF.

Для вставки графических объектов, если при этом требуется ввести комментарий к рисунку или фотографии, можно восполь­зоваться приемом, применяемым в текстовом редакторе Word, т. е. предварительно создать таблицу, а затем в ячейки таблицы вставить рисунки и текст (рис. 19.35).

Технология создания таблицы в редакторе FrontPage анало­гична технологии создания таблиц в редакторе Word. Вставка объектов осуществляется с применением диалоговых окон ко­манды Table * Insert * Table обращением к файлу либо через бу­фер обмена.

Обратим внимание, что в окне списка файлов, показанном на рис. 19.35, два файла имеют расширение.qif. Таким способом со-

Рис. 19.35. Окно со вставкой графических файлов в ячейки формы

храняют вставленные на страницу объекты с целью упрощения процедуры их вставки на другие страницы сайта.

Дата добавления: 2015-07-20