Пользовательский интерфейс редактора

FrontPage входит в состав пакета MS Office 2000 Premium, по­этому его можно загрузить как отдельно, так и вместе с другими приложениями MS Office.

После загрузки редактора на экране появится рабочее окно программы (рис. 19.1).

Как и в любом приложении для Windows, в верхней области окна расположены заголовок с названием программы, значок системного меню и стандартные кнопки для сворачивания и зак-

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

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

Редактор FrontPage имеет шесть режимов работы для просмот­ра и редактирования материалов сайта: Page, Folders, Reports, Navigation, Hyperlinks, Tasks.

Page (Page View) — режим, предназначенный для редактирова­ния и просмотра текущей страницы сайта. Это основной рабочий режим, в котором доступны команды вставки элементов, форма­тирования текста, работы с таблицами и др. В нижней части рабо­чей области окна расположены ярлыки для выбора вкладок с раз­личными способами отображения страницы.

На первой вкладке Normal (Обычный вид) отображается со­держимое страницы, а также дополнительные линии разметки, т. ^е- на этой вкладке осуществляется редактирование содержания и оформление внешнего вида страницы. Режим просмотра страни-

цы на вкладке Normal далее будем называть режимом редактиро­вания страницы.

На вкладке HTML страница представлена в том виде, в кото­ром она сохраняется на диске, т. е. в формате HTML. При необхо­димости вносить изменения или дополнения можно прямо в текст.

На вкладке Preview (Предварительный просмотр) можно уви­деть, как текущая страница будет выглядеть в броузере.

В режиме просмотра папок и файлов Folders (Folders View) все страницы, рисунки и другие файлы, составляющие сайт, пред­ставлены в виде упорядоченного списка, аналогичного тому, в ко­тором отображаются файлы в программе Проводник (Explorer): слева выводится список папок, справа — содержимое выбранной папки.

В этом режиме можно перемещать, удалять или переименовы­вать файлы непосредственно в процессе работы над сайтом. Двой­ной щелчок кнопкой мыши на имени файла страницы открывает ее для редактирования. Обычно файлу главной страницы сайта присваивают имя index.htm или default.htm.

Режим просмотра Reports (Reports View) позволяет получать и просматривать статическую информацию о Web-сайте и прово­дить анализ с целью выявления потенциальных проблем и оши­бок, допущенных при его разработке. Редактор FrontPage предла­гает тринадцать различных отчетов, собирающих информацию о размере сайта, числе страниц и рисунков, недоступных страни­цах, разорванных ссылках, «медленных» страницах и другие све­дения.

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

Режим просмотра задач Tasks (Tasks View) предназначен в ос­новном для планирования коллективной работы над проектом создания сайта. В этом режиме можно запланировать задачи, зак­репить их за отдельными разработчиками и следить за ходом их выполнения.

19.3. Технология разработки макета сайта

Сайт в программе FrontPage представляет собой совокупность HTML-страниц, рисунков, документов и других файлов, храня­щихся на локальном диске или на Web-сервере. Обычно все фай­лы сайта находятся в единой папке. Название папки соответствует названию сайта. Редактор FrontPage позволяет работать с сайтом как с единым целым, т.е. открывать, копировать, настраивать

параметры, а также редактировать отдельные страницы и другие документы, входящие в его структуру.

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

Для создания нового сайта можно также воспользоваться шаб­лонами с готовыми примерами или мастером, для чего необходи­мо выбрать команду меню File * New * Web (Файл * Создать * Сайт). При этом на экране появится диалоговое окно New (Новый сайт) (рис. 19.2).

На вкладке Web Sites (Веб-сайты) перечислены готовые шаб­лоны и мастера для создания сайтов.

С помощью шаблона One Page Web (Одностраничный сайт) можно создать новый сайт с единственной пустой страницей.

Шаблон Customer Support Web (Сайт поддержки клиентов) по­зволяет создать базовую структуру сайта для компании, занимаю­щейся разработкой и распространением программного обеспече­ния или похожей деятельностью (разработкой продукции, оказа­нием услуг и т.п.). Сайт состоит из нескольких разделов. На его страницах имеются готовые элементы для навигации, поиска, за­полнения форм и загрузки файлов.

Шаблон Empty Web (Пустой сайт) не содержит страниц и пред­назначен для проектирования нового сайта с нуля.

|MHfjf6:e.iEB' a; Ifl^ a^- | *Щ «H p^ I JKj w»»-..l s^ M; ЩКШйЩЬ ^ Рис, 19.2. Диалоговое окно выбора шаблонов для создания нового сайта 310

Шаблон Personal Web (Персональный сайт) позволяет создать сайт для размещения личной информации. Обычно это информа­ция о собственных интересах и увлечениях владельца, подборки фотографий, список избранных ссылок на различные ресурсы в Интернете и т. п.

Шаблон Project Web (Сайт проекта) предназначен для созда­ния макета сайта, отражающего информацию о разработке како­го-либо проекта. В этот шаблон включены различные примеры фор­матирования текста, размещения рисунков, создания внутренних ссылок, размещения документов, создания элементов поиска дан­ных и заполнения форм.

Мастер Corporate Presence Wizard (Мастер создания Web-пред­ставительства) позволяет создать макет типового сайта для некото­рого предприятия или организации. В структуру такого сайта входят разделы, отражающие основную информацию о деятельности ком­пании, описание продуктов и услуг, страница новостей, форма заполнения заявок, оглавление и форма поиска информации.

Мастер Discussion Web Wizard (Мастер создания Web-конфе­ренции) предназначен для создания Web-форума — сайта, по­священного обсуждению определенной темы. В структуру такого сайта можно включить форму регистрации пользователей, форму ввода статей, оглавление и форму поиска, используя при этом фреймы для размещения информации на его страницах.

С помощью мастера Import Web Wizard (Мастер импорта сайта) можно импортировать готовый сайт с локального диска или на­прямую из Internet.

Технологию разработки нового сайта и возможности редактора FrontPage рассмотрим на примере создания Web-сайта для разме­щения информации о кафедре института (аналогично примеру создания презентации, показанному в гл. 3). Создание сайта про­изводится следующим образом.

Выбрав в списке шаблонов диалогового окна New (Новый сайт) значок мастера Corporate Presence Wizard (Мастер создания Web-представительства), нажать кнопку [ОК]. На экране появится пер­вое диалоговое окно мастера, содержащее текст о его назначении (рис. 19.3).

Далее следует выполнять все указания мастера (аналогично тех­нологии использования мастеров при создании элементов баз дан­ных в системе Access), т.е. нажать кнопку [Next] (Далее). На экра­не появится второе диалоговое окно мастера для выбора основ­ных страниц сайта (рис. 19.4), в котором предоставляется возмож­ность разместить следующие элементы:

• домашнюю страницу Borne (required);

• страницу новостей (What's New);

• описание товаров или услуг (Product/Services);

• страницу с оглавлением (Table of Contents);

• форму отзывов или заявок (FeedbackForm);

• поисковую форму (Search Form).

Сбросим все флажки, кроме Ноте (required) и нажмем кнопку [Next], на экране появится следующее диалоговое окно мастера (рис. 19.5), в котором с помощью флажков можно выбрать услов­ные разделы для первой (домашней) страницы сайта. На домаш­нюю страницу можно поместить следующие виды информации:

• введение (Introduction);

• сведения о целях (Mission Statement) и основных направлени­ях деятельности компании (Company Profile) в нашем примере — кафедры института;

• контактную информацию (Contact Information), например фа­милию, имя и отчество заведующего кафедрой, номер его теле­фона, E-mail и др.

Сбросим все флажки и нажмем кнопку [Next], на экране по­явится четвертое диалоговое окно мастера (рис. 19.6), в котором можно определить, какие элементы будут присутствовать в верх­ней и нижней областях каждой страницы сайта. Это может быть логотип компании (Your company's logo), заголовок страницы (Page title), ссылки на главные страницы (Links to your main web pages), электронный адрес Web-мастера (E-Mail address of your webmaster), авторские права (Copyright notice), дата модификации страницы (Date page was last modified).

Оставим предложенный мастером вариант и откроем следую­щее его окно, нажав кнопку [Next] (рис. 19.7).

Переключателем No откроем следующее окно (рис. 19.8), в ко­тором укажем полное название организации (в данном случае ка­федры), ее краткое название и адрес. Эти сведения будут сохране­ны в переменных сайта и могут быть использованы в дальнейшем на многих его страницах.

Продолжив диалог с мастером, в следующем окне (рис. 19.9) введем номера телефонов организации и адрес электронной почты.

Снова нажмем кнопку [Next]. На экране появится заключи­тельный диалог мастера (Corporate Presence Wizard).

При нажатии кнопки [Finish] (Готово) мастер создаст макет сайта по указанным данным и откроет его. При этом в заголовке окна программы рядом с названием появится путь к папке сайта.

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

Желательно созданному сайту сразу дать определенное назва­ние вместо присвоенного по умолчанию. Для этого следует выб-

рать в меню программы команду Tools * Web Settings (Сервис * Настройки сайта). На экране появится диалоговое окно Web Settings (Настройки сайта) с открытой вкладкой General (Общие), пока­занное на рис. 19.10.

В поле ввода Web name (Имя сайта) укажите новое имя сайта (в нашем примере ТПП и СУЛА) и нажмите кнопку [ОК]. Сайт будет переименован, название папки сайта также изменится.

Выберите в меню команду View * Folders (Вид * Папки) для перехода в режим просмотра папок и файлов сайта (рис. 19.11).

В папке сайта мастер помещает файл домашней страницы, обыч­но имеющий название index.htm. Кроме того, FrontPage создает в папке нового сайта две вложенные папки: images для хранения рисунков и _private для хранения скрытых документов. Файлы и папки, помещенные в папку _private, не могут быть просмотрены посетителем сайта с помощью броузера. В ходе дальнейшей рабо­ты в зависимости от элементов и средств, используемых при про­ектировании сайта, FrontPage может создавать в папке сайта до­полнительные файлы и вложенные папки. Большинство из них будут скрыты, но их можно увидеть, открыв папку сайта в про­грамме Проводник (Explorer). Можно создавать собственные вло­женные папки в папке сайта, например, для хранения звуковых файлов, воспользовавшись для этого командой меню File * New * Folder (Файл * Создать * Папка).

Дважды щелкнув мышью на файле index.htm в папке сайта, установить режим редактирования страницы и открыть домаш­нюю страницу сайта (рис. 19.12).

Итак, перед вами первая страница сайта, а точнее макета сай­та, созданного мастером. Страница разделена пунктирной линией на несколько областей. В верхней области находится навигацион­ное меню (Navigation Bar) — группа ссылок или кнопок для пере­хода к основным разделам сайта и на соседние страницы. В данном случае навигационное меню содержит единственную ссылку [Ноте], поскольку в нашем сайте пока только одна страница. Ниже нахо­дится заголовок (Page Banner) с названием страницы Номе (для просмотра которого нужно воспользоваться полосой прокрутки).

Чтобы изменить заголовок, следует дважды щелкнуть на нем мышью. Откроется диалоговое окно Page Banner Properties (Свой­ства заголовка страницы), показанное на рис. 19.13, в поле ввода которого Page banner text (Текст заголовков страницы) введем но­вый заголовок (Кафедра ТПП и СУЛА МАТИ—РГТУ им. К. Э. Циол­ковского).

Обычно в качестве заголовка страницы используют название раздела сайта, а для первой страницы — название сайта или ком­пании. Нажав кнопку [ОК], закроем диалоговое окно Page Banner Properties (Свойства заголовка страницы), при этом новый заголо­вок отобразится в верхней области страницы.

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

Области по краям страницы, включая заголовок страницы, навигационные меню и контактный адрес, представляют собой так называемые разделяемые границы (Shared borders) и содержат общую информацию для нескольких страниц сайта. В режиме ре­дактирования разделяемые границы отделены от основного со­держимого страницы пунктирной линией.

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

Мастер также вставляет на страницу комментарии, которые выделяются сиреневым цветом и начинаются со слова Comment. Можно добавлять комментарии, касающиеся особенностей про­ектирования страницы, с помощью команды Insert * Comment

(Вставка * Комментарий) в меню программы. При этом коммен­тарии не будут видны в броузере.

Выполним некоторые настройки, относящиеся к странице в це­лом:

=> щелкнуть правой кнопкой мыши в любой области страницы и в появившемся контекстном меню выбрать команду Page Properties (Свойства страницы). При этом на экране появится диалоговое окно Page Properties (Свойства страницы) с открытой вкладкой General (Общие), показанное на рис. 19.14;

=> в поле ввода Title (Заголовок) указать текст, который будет появляться в заголовке окна броузера при просмотре страницы и который обычно соответствует заголовку страницы или названию раздела сайта;

=> с помощью вкладки Language (Язык) выбрать из списка язык, на котором будет размещаться информация на страницах сайта, т. е. в открывшемся списке Mark current document as (Пометить те­кущий документ как) выбрать Russian (Русский). При этом указа­ние языка для страницы позволяет выполнять автоматическую проверку орфографии при вводе текста;

=> нажать кнопку [ОК], чтобы сохранить настройки и закрыть диалоговое окно Page Properties (Свойства страницы).

В редакторе FrontPage имеются настройки, позволяющие уп­равлять совместимостью сайта с определенными броузерами и Web-

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

=> выбрать в меню команду Tools * Options (Сервис * Настрой­ки страницы), на экране появится диалоговое окно Page Options (Настройки страницы), показанное на рис. 19.15;

=> выбрать вкладку Compatibility (Совместимость);

=> в открывающихся списках Browsers (Броузеры), Browser versions (Версии броузеров), Servers (Серверы) выбрать пункт Custom (Произвольный), если там установлены другие значения;

=> установить флажок Enabled with Microsoft FrontPage Server Extensions (Включить пользование FrontPage Server Extensions) и все флажки в группе элементов Technologies (Технологии);

=> нажать кнопку [ОК], чтобы сохранить настройки и закрыть диалоговое окно Page Options (Настройки страницы).

Затем можно начинать оформление первой страницы с самого простого — ввода и форматирования текста.

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