Frontpage шаблоны. Шаблоны страниц

Создание нового Веб-Узла во FrontPage.

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

Открывая FrontPage первый раз Мы видим примерно такое окно.

Итак. Переходим в "Файл"\"Создать"

После этого появляется панель с правой стороны на которой выбираем "Одностраничный Веб-Узел..."

В открывшемся окне необходимо выбрать тип создаваемого узла. Это делается во вкладке "Общие" . Так же необходимо ввести расположение и название узла. (название узла можно будет всегда изменить!)

Можно выбрать уже имеющиеся шаблоны сайтов. Но задача наших уроков - это создание сайта "с нуля", поэтому мы выбираем "Одностраничный Веб-Узел"

После создания нового "Одностраничного Веб-Узла" у нас на экране появляется список файлов и папок, которые принадлежат этому веб-узлу.

Создание и сохранение страниц на Веб-Узле

Итак, Мы создали наш Веб-Узел и теперь будем его наполнять страницами.

Список страниц, которые мы создадим:

  • Главная страница (Создаётся автоматически и имеет название index.htm)
  • Об авторе
  • Контакты (на этой странице будет форма отправки писем создателю сайта на его e-mail)
  • Галерея (Создание галереи из изображений)
  • Видео (страница с видео On-Line)
  • Аудио (Страница с аудио On-Line)
  • Поиск по сайту
  • Дальнейшие пункты списка Вы можете добавлять сами при необходимости....

Создание новой страницы:

Нажмите кнопку "Создание новой обычной страницы"

Не наполняя её содержимым сохраняем её. Нажимаем "Файл"\"Сохранить как..."

В появившемся окне необходимо убедиться в том, что страница сохраняется в наш веб-узел. Для этого необходимо посмотреть параметр "Папка"



После этого нажимаем на кнопку "Изменить" рядом с параметром "Название". В появившемся окне прописываем название страницы. (название можно писать кириллицей, т.е. русскими буквами)

В поле "Имя Файла" необходимо ввести название страницы, но на латинице, т.е. например "ob-avtore"

После этого можно убедиться, что страница создана. Для этого перейдем во вкладку "Веб-узел" и увидим, что наша новая страница создалась и размещена на узле.

Таким же образом создаём все остальные страницы, которые мы запланировали.

Для изменения названия главной страницы, необходимо нажать на ней правой кнопкой мыши и выбрать "Свойства"

В открывшемся окне необходимо изменить параметр "Название" на то, что Вы хотите. Например - "Домашняя страница" или "Главная"

Теперь нам осталось создать динамический Веб-Шаблон, оформить визуально страницы, и наполнить их информацией.

Общая структура. Прикрепление шаблона к страницам.

Часть 1.

Для чего нужен динамический веб-шаблон. Если говорить коротко, то он предназначен для того, чтобы Вы, как администратор изменяли и дополняли одну страницу своего сайта, а при ваших действиях с этой страницей, изменялись и все остальные страницы, к которым прикреплена данная страница. Это коротко. Более подробно можно найти здесь . (сайт office.microsoft.com)

Переходим к созданию шаблона.

Для начала необходимо создать обычную страницу. Нажимаем на "Создание новой обычной страницы".

Теперь обратимся к общей структуре создания нашего сайта - как, и где будут располагаться элементы, и т.д.

Выбрав структуру, её необходимо где-то описать. Это можно сделать на обычном листе бумаги. Я же Вам передаю структуру в видео изображения ниже.

Итак, имея структуру нам необходимо перевести её в таблицы, чем и займемся.

Создаём таблицу - 1x1

На новой таблице нажимаем правой кнопкой мыши и выбираем "свойства таблицы."

В появившемся окне вводим параметры, как на рисунке:

· Выравнивание - по центру

· Задать ширину -100 процентов

· Поля ячеек - 0

· Интервал ячеек - 0

· Размер границы - 0

Нажимаем кнопку "ОК"

Эта таблица будет основой для нашей странице.

В этой таблице нам предстоит создание ещё нескольких таблиц.

Первая таблица, которую мы создадим будет относиться к шапке сайте. Создаём в новой таблице ещё одну таблицу, но теперь на 3 ячейки, т.к. шапка сайта состоит из 3 элементов - Логотип, баннер, поиск.

Этой таблице задаем такие же параметры, как и предыдущей. Можно задать и другие, например ширина - 1024 точек, это надо делать, когда сайт пишется под определенное разрешение экрана.

В данном уроке мы будем делать сайт, который будет иметь строгие размеры для поиска и логотипа, я часть с баннером будет уменьшаться или увеличиваться в зависимости от разрешения экрана пользователя.

Теперь необходимо задать точные размеры для ячейки с логотипом и для ячейки с поиском.

У меня заранее сделан логотип, и он имеет размеры - ширина - 300, высота - 186 точек. Его необходимо поместить в папку "Images" на Вашем "Веб-Узле"

Нажимаем правой кнопкой на первой ячейке, где должен располагаться логотип и выбираем "Свойства Ячейки"

Задаём параметры ячейки:

· Выравнивание по горизонтали - "По центру"

· Ширина - 300 точек

· Высота - 186 точек.

Нажимаем кнопку "Вставка"\ "Рисунок" \ "Из Файла..." и выбираем логотип:

Выберете оставшиеся две ячейки таблицы и назначьте им высоту равную первой ячейке.

"Свойства ячейки"

"Задать высоту" - 186 в точках.

Задавать размеры ширины для ячейки с поиском пока не будем, это мы сделаем, когда установим форму для поиска.

Добавьте ещё одну таблицу ниже той, что мы сделали для шапки. Размер таблицы 1x3

Вот, что должно получиться:

Этой таблице задайте такие же параметры, как и предыдущей:

Выберете первую ячейку и задайте ей ширину, равную ширине логотипа (Это делается по желанию. Можно задать и любые другие размеры.)

Ниже создайте ещё одну таблицу с такими же параметрами. Эта таблица для "Низа сайта", там будут располагаться счетчики.

Примечание! Нижнюю таблицу не обязательно делать с тремя ячейками. Достаточно и одной. Для счетчиков все равно надо будет делать свою таблицу.

Выделите все ячейки всех таблиц, перейдите в "Свойства Ячейки" и задайте параметр "Выровнять по вертикали:" - "По верхнему краю"

Если текст в ячейках не выровняться по верхнему краю , то задайте для каждой ячейки в ручную этот параметр.

Для ячеек с поиском и дополнительным меню произвольно можно поставить ширину - 200 точек. Это позволит таблице держать точные размеры при написании текста в ячейках.

Теперь у нас должно получиться следующее:

Создание динамического веб-шаблона.

Мастера и шаблоны - эффективное средство создания Web-узлов в Frontpage. В главе 3 мы изучили работу мастеров, которые генерируют Web-узлы и страницы в диалоговом режиме. Данная глава посвящена шаблонам. Вы научитесь не только создавать Web-узлы и Web-страницы на основе встроенных шаблонов, но и разрабатывать собственные шаблоны.
Шаблоны Web-узла
Frontpage предоставляет шаблоны для создания как Web-узла, так и Web-страницы. Сначала мы рассмотрим шаблоны Web-узла. Загрузите Frontpage. Когда процесс загрузки завершится, активизируйте команду Web подменю New меню File. В открывшемся диалоговом окне New отображается список мастеров и шаблонов Web-узла. Всего шаблонов пять:
One Page Web (Одностраничный Web-узел);
Customer Support Web (Web-узел поддержки клиента);
Empty Web (Пустой Web-узел);
Persona] Web (Персональный Web-узел);
Project Web (Web-узел проекта).
Шаблон One Page Web
Шаблон One Page Web выбирается в диалоговом окне New по умолчанию. При использовании этого шаблона создается структура папок Web-уэла и генерируется одна страница (домашняя страница). Далее выполните следую-
щие действия:
1. В диалоговом окне New введите имя Web-сервера и имя Web-узла (например. One Page) в поле Specify The Location Of The New Web. Щелкните на кнопке ОК.
2. Перейдите в режим просмотра Folders, щелкнув на одноименном управ ляющем элементе на панели Views, чтобы посмотрев сгруктуру узла (рис. 4.1.)
3 Дважды щелкните на файле домашней странице (default htm), чтобы открыть ее в режиме просмотра Page В данный момент страница пуста. Введите на странице заголовок "Домашняя страница"

Рис 4.1. Web-узел, созданный на основе шаблона One Page, в режиме просмотра Folders

В дальнейшем вы можете добавлять новые страницы на Web-узел в любом режиме просмотра, а в режиме просмотра Navigation создавать связи между страницами Выполните следующие действия 1 Перейдите в режим просмотра Navigation Щелкните на пиктограмме домашней страницы на правой панели (цвет пиктограммы изменится). Чтобы создать новую страницу, щелкните на кнопке New Page на панели инструментов Standard По умолчанию новой странице присваивается имя New Page 1. Эта страница будет создана как дочерняя страница по отношению к домашней Таким способом вы можете создать любое число страниц, а затем, при необходимости, изменить связи между ними 2 Создайте еще шесть страниц на том же уровне, на котором находится страница New Page 1 (при этом должна быть выбрана пиктограмма домашней страницы)
3. Теперь измените связи между страницами Дття этого выберите, например, страницу New Page 4 и, удерживая нажатой кнопку мыши, перетяните ее под страницу New Page 2 Огпустите кнопку мыши. Таким образом страница New Page 4 стала дочерней по отношению к странице New Page 2 Теперь сделайте страницу New Page 5 дочерней по отношению к странице New Page 2, а страницу New Page 6 дочерней по отношению к странице New Page 4 (рис 4.2.)

Примечание
В режиме просмотра Navigation вы можете пользоваться инструментами одноименной панели, которая появляется на экране при переходе в этот режим Один из этих инструментов - поле списка Zoom (масштаб), в котором вы можете выбрать масштаб отображения структуры Web-узла Выберите в этом списке пункт Size to Fit (подобрать размер) При его выборе будут отображены пиктограммы всех страниц Web-узла Размер пиктограмм зависит от того, какую площадь окна Frontpage в данный момент занимает правая панель (площадь данной панели регулируется вертикальным ползунком, разделяющим ее и панель Folder List) 2 Создайте еще шесть страниц на том же уровне, на котором находится страница New Page 1 (при этом должна быть выбрана пиктограмма домашней страницы)
3. Теперь измените связи между страницами Дття этого выберите, например, страницу New Page 4 и, удерживая нажатой кнопку мыши, перетяните ее под страницу New Page 2 Отпустите кнопку мыши. Таким образом страница New Page 4 стала дочерней по отношению к странице New Page 2 Теперь сделайте страницу New Page 5 дочерней по отноше нию к странице New Page 2, а страницу New Page 6 дочерней по отношению к странице New Page 4 (рис 4.2).

Рис 4.2. Изменение связей между страницами в режиме просмотра Navigation

Примечание
В режиме просмотра Navigation вы можете пользоваться инструментами одноименной панели, которая появляется на экране при переходе в этот режим Один из этих инструментов - поле списка Zoom (масштаб), в котором вы можете выбрать масштаб отображения структуры Web-узла. Выберите в этом списке пункт Size to Fit (подобрать размер) При его выборе будут отображены пиктограммы всех страниц Web-узла Размер пиктограмм зависит от того, какую площадь окна Frontpage в данный момент занимает правая панель (площадь данной панели регулируется вертикальным ползунком, разделяющим ее и панель Folder List)
3. Удалите Web-узел Empty, выбрав команду Delete Web меню File и активизировав в диалоговом окне Confirm Delete переключатель Delete This Web Entirely Шаблон Personal Web
При использовании шаблона Personal Web создается Web-узел, состоящий из пяти страниц, которые предназначены для представления небольшой организации или лица Чтобы получить такой узел, выполните следующие действия:
1. В диалоговом окне New выберите шаблон Personal Web Введите URL-адрес Web-узла (назовите узел, например, Personalweb). Как только вы щелкните на кнопке ОК, будет создан новый Web-узел Перейдите в режим просмотра Folders, чтобы посмотреть его структуру
2. Откройте домашнюю страницу узла в режиме просмотра Page (рис 4.3.)

Рис 4 3 Домашняя страница персонального Web-узла

На данной странице предлагается набор элементов, которые вы можете использовать целиком или частично или не применять вообще К разряду наиболее важных элементов относятся следующие
Общие области - области, которые размещают на верхнем, нижнем, левом и (реже) правом краях страницы В этих областях размещают в оснорном навигационные панели (в левой и верхней) и информацию для контактов (в нижнеи) На домашней странице Web-узла Personulweb располагаются верхняя и левая общие области
Заголовок страницы - это FrontPage-компонент Page Banner Данный компонент вставляет на страницу заголовок в виде графического изображения и ни в виде текста Определить вид заголовка можно в окне Page Banner Properties, которое открывается при активизации одноименной команды контекстного меню
Чтобы изменить заголовок страницы (в данном случае - Home Page), необходимо щелкнуть правой кнопкой мыши на странице в режиме просмотра Navigation, выбрать в контекстном меню команду Rename и ввести новый заголовок
Навигационные панели, расположенные непосредственно под заголовком и в левой части страницы, являются FrontPage-компонентами Параметры панечи устанавливаются в диалоювом окне Navigation Bai Pioperties

Обычный текст - текст, который можно заменить собственным.
Гиперссылки выделяются подчеркиванием и связывают страницы Webузла.
Фоновое изображение - это маленькое графическое изображение, многочисленные дубликаты которого образуют на странице фон в виде мозаики, или сплошной фон.
Шрифты и цвет текста, как и фоновое изображение, определены в теме, назначенной данному Web-узлу.
Дата и время -- FrontPage-компонент Date and Time, который вставляет дату последнего обновления страницы. Изменить свойства этого компонента можно в диалоговом окне Date And Time Properties, которое открывается при выполнении двойного щелчка на дате.
Логотип Frontpage 2000 расположен в нижней правой части домашней страницы. Его можно удалить или отредактировать в любом графическом редакторе. По умолчанию для редактирования графических изображении используется графический редактор Microsoft Image Composer. Логотип доступен для обработки в окне редактора после выполнения на нем двойного щелчка. Графический редактор, применяемый по умолчанию, можно заменить следующим образом. Активизируйте команду Options меню Tools. В диалоговом окне Options перейдите на вкладку Configure Editor. Вы увидите список редакторов, которые можно использовать для обработки файлов с соответствующими расширениями. Укажите путь доступа к тому графическому редактору, с которым вы хотите работать. Кроме того, вы можете изменить изображение с помощью инструментов панели Pictures, которая появляется на экране при щелчке на изображении

Параметры изображения устанавливаются в диалоговом окне Pictuie Properties, которое открывается активизацией одноименной командой контекстного меню. Откройте и просмотрите другие страницы Web-узла в режиме просмотра
Page Удалите узел Personalweb Web-узел, разработанный с помощью шаблона Personal Web, является хорошей основой для более сложною Web-узла (советуем учесть это при создании собственного Web-узла) Шаблон Project Web
Шаблон Project Web (Web-узел проекта) предназначен для создания многостраничного Web-узла (рис 4.4.), который используется для постоянного отображения разнообразной информации о проекте с самого начала работы над ним На Web-узле проекта находится такая информация, как списки участников проекта, план и состояние дел, верхние и нижние колонтитулы страницы, архив, а также дискуссионная доска объявлений и механизм поиска Создание Web-узла на базе шаблона Project Web происходит следующим образом:
1. В диалоговом окне New выберите шаблон Proiect Web Введите URT - адрес Web-узла (назовите узел, например, Project)

Рис 4.4. Web-yзел, созданный на основе шаблона Project Web

2. Дважды щелкните на пиктограмме Home Page на панели Navigation, чтобы открыть домашнюю страницу в режиме просмотра Page (рис. 4.5).

Рис. 4.5. Домашняя страница Web-узла проекта с заголовком и навигационными и панелями в режиме просмотра Page

Общие области
Страницы Web-узла проекта имеют три общие области, которые можно изменять.
1. Отредактируйте навигационную панель, находящуюся в верхней общейобласти. Для этого на панели сначала выполните один щелчок, чтобы выделить ее, а затем - двойной щелчок, чтобы открыть диалоговое окно Navigation Bar Properties.
2. В области Hyperlinks To Add To Page диалогового окна Navigation Bar Properties активизируйте переключатель Child Level и установите опции Home Page и Parent Page. В области Orientation And Appearance активизируйте переключатели Horizontal и Text (рис. 4.6). В завершение щелкните на кнопке ОК.

Рис 4.6. Изменение установок в диалоговом окне Navigation Bar Properties

Определить, на какие страницы организованы ссылки в навигационной панели, можно следующим образом установите указатель мыши на кнопке навигационной панели, вследствие чего в строке состояния окна Frontpage будет указан полный путь доступа к этой странице. Мы уже отмечали, что имена кнопок навигационной панели совпадают с заголовками тех страниц, на которые созданы гиперссылки с помощью соответствующих опции диалогового окна Navigation Bar Properties. Имена, которые указываются на навигационной панели, изменяются при изменении имен страниц в режиме просмотра Navigation
3. Прокрутите страницу до конца Отметьте нижнюю общую область, как показано ниже Она содержит FrontPage-компонент Date and Time Copyright or other proprietary statement goes here.
4. В режиме просмотра Page откроите и просмотрите страницы Members, Schedule, Status и Archive Каждая из них содержит общие области
Поиск и дискуссионные группы
Полученный Web-узел проекта имеет такие функциональные возможности, как поиск текста и дискуссионные группы (мы рассматривали их в главе 3. Теперь мы рассмотрим их применительно к Web-узлу, созданному на основе шаблона Project Web:
1. Откройте страницу Search (search.htm) в режиме просмотра Page (рис 4.7.) На этой странице находится форма, содержащая единственное поле. Данная форма позволяет исследовать документы Web-узла на предмет наличия информации, соответствующей критерию поиска, указанному в форме.

Рис 4.7. Страница поиска Web-узла проекта

Форма поиска является FrontPage-компонентом. Изменить свойства этого компонента позволяет команда Search Form Properties контекстного меню. На странице Search приведены инструкции по установке критериев поиска. Закроите страницу Search и откройте страницу Discussions (discuss htm), которая содержит ссылки на дискуссионные группы Requirements и Knowledge Base (требования и база знаний) Дискуссионная группа - это группа связанных (главным образом, тематически) Web-страниц, в которые включены формы и FiontPage-компоненты. Одним пользователям это дает возможность высказывать свои замечания и предложения, а другим - комментировать их. Таким образом проводится диалоговый
3. Чтобы оценить внешний вид страниц Web-узла, созданного с помощью шаблона Project Web, воспользуйтесь командой Preview In Browser меню File или одноименной кнопкой панели инструментов. В появившемся диалоговом окне выберите броузер и укажите размер его окна, после чего нажмите кнопку ОК. Завершив просмотр страниц, закройте броузер и Frontpage Затем удалите Web-узел проекта в Frontpage Web-узел, созданный при помощи шаблона Project Web, можно использовать для представления информации не только о проекте, но и о повседневной работе группы или отдела.
Шаблон Customer Support Web
Шаблон Customer Support Web (Web-узел поддержки клиента) обеспечивает создание Web-узла, который служи г для предоставления пользователям разнообразной информации (что осуществляется несколькими способами), а также позволяет им публиковать свою информацию Далее выполните следующие действия:
1. В диалоговом окне New выберите шаблон Customer Support Web Введите URL-адрес Web-узла (назовите узел, например, Customer) (Созданный Web-узел показан на рис 48)

Рис 4.8. Web-узел, созданный на основе шаблона Customer Support Web

2. Откройте страницу Welcome (домашняя страница) в режиме просмотра Page. Эта страница содержит верхнюю, нижнюю и левую общие области, а также навигационные панели вверху и слева.
3. Просмотрите в режиме просмотра Page страницы What"s New (что нового) и FAO (часто задаваемые вопросы). Эти страницы удачно составлены и полностью соответствуют своему предназначению. На них скомбинированы текст, гиперссылки, верхние и нижние колонтитулы.
4. Откройте страницу Bugs (Bugrep.htm). Она содержит форму, в которой пользователь может описать ошибку в программном обеспечении, с которой он столкнулся, и задать соответствующие вопросы. Данную форму можно модифицировать: изменить надписи, размер и содержимое полей.
5. Загрузите окно свойств поля списка: выполните щелчок правой кнопкой мыши на этом элементе и активизируйте команду Form Field Properties в контекстном меню. Появится диалоговое окно Drop-Down Menu Properties (рис. 4.9), которое содержит кнопки, позволяющие добавлять, удалять, изменять поля списка, перемещать их вверх и вниз.

Рис 4.9. Диалоговое окно Drop-Down Menu Properties

6. Закройте диалоговое окно Drop-Down Menu Properties и страницу Bugs Откройте, просмотрите и закройте страницу Suggestions From Customers (Suggest, htm), содержащую предложения клиентов. Откройте страницу Customer Support DownLoad (Download, htm). Страница DownLoad разработана для того, чтобы пользователи могли загрузить на свои компьютеры программное обеспечение или документы с вашего узла. В данном примере передача файлов с сервера на компьютер клиента осуществляется с помощью протокола FTP (F-e Transfer Protocol). Если вы разместите указатель мыши на ссылке, то в строке состояния увидите URL-адрес Web-узла, с которого будет загружаться файл при активизации данной ссылки.
7. Закройте страницу Download. Откройте, просмотрите и закройте страницы Discussion и Search. На них вы обнаружите дискуссионную группу и форму поиска, которые аналогичны рассмотренным выше.
8. Откройте в броузере Web-узел, созданный на основе шаблона Customer Support, и поработайте со страницами Suggestions (внесите на рассмотрение какое-нибудь предложение) и Bugs (опишите ошибку, с которой вы столкнулись при работе с программным обеспечением).
9. Вернитесь в Frontpage и активизируйте команду Refresh (обновить) меню View. Перейдите в Frontpage, чтобы открыть и просмотреть страницы Buglist.htm и Feedback.htm.
10. В завершение удалите Web-узел Customer,
Шаблоны Web-страницы
На основе шаблонов Web-узла создают узлы с большим количеством различных страниц и множеством функциональных возможностей на каждой из них. Но иногда требуется создать одну-единственную страницу. Frontpage предоставляет 26 шаблонов и один мастер для создания страницы. Мы рассмотрим несколько наиболее полезных шаблонов. Процесс создания Web-страницы на базе шаблона включает следующие этапы:
1. В Frontpage сгенерируйте новый Web-узел на основе шаблона Empty Web. Присвойте ему имя TestPages. Создайте домашнюю страницу, щелкнув на кнопке New Page панели инструментов Standard.
2. Откройте домашнюю страницу в режиме просмотра Page.
3. Активизируйте команду Page подменю New меню File, вследствие чего появится диалоговое окно New со списком шаблонов Web-страниц, представленных на вкладке General (рис. 4.10). Мы остановимся на пяти шаблонах. После создания страницы с помощью очередного шаблона просмотрите ее сначала в Frontpage, затем - в броузере.
Примечание
По умолчанию в диалоговом окне выбран шаблон Normal Page. На его основе создается пустая страница. Это диалоговое окно открывается только в режиме просмотра Page. В других режимах просмотра с помощью команды Page подменю New меню File создается страница на основе шаблона Normal Page. При щелчке на кнопке New панели инструментов Standard в любом режиме просмотра также создается страница на основе этого шаблона, и при этом диалоговое окно New не загружается.

Рис. 4.10. Диалоговое окно New (вкладка General) со списком шаблонов

Шаблон Feedback Form
Шаблон Feedback Form служит для создания страницы с формой, предназначенной для сбора информации, которая вам необходима (рис. 4.11). Такую форму называют формой отзывов, В соответствии с шаблоном формируются поля нескольких типов, которым присваиваются имена, используемые также в шаблоне Confirmation Form, а также устанавливается, что данные из формы будут сохранены в файле Feedback.txt папки _Private Web-узла (имя файла, формат, в котором данные будут записаны в файл, и другие установки всегда можно переопределить в диалоговом окне свойств формы). Если ваш узел называется TestPages и используется система папок, определенная по умолчаниию, то путь к файлу Feedback.txt будет следующим:
C:\InetPub\Wwwroot\TestPages\_Private\Feedback.txt.

Рис. 4.11. Страница, созданная с помощью шаблона Feedback Form

Шаблон Confirmation Form
С помощью данного шаблона создается страница подтверждения, которая используется для демонстрации того, что данные, введенные пользователем в форме на некоторой странице, получены (страница подтверждения автоматически загружается в клиентский броузер после того, как пользователь переслал данные на Web-узел). Когда вы создаете форму, Frontpage автоматически генерирует страницу подтверждения. Вы можете создать собственную страницу подтверждения, используя шаблон Confirmation Form.
Для этого необходимо выполнить следующие действия. Щелкните правой кнопкой мыши на форме, расположенной на странице, с которой вы хотите передать данные, и в появившемся контекстном меню активизируйте команду Form Properties. В открывшемся диалоговом окне активизируйте кнопку Options. В окне Options Of Saving Results Of Form выберите закладку Confirmation Page и в поле URL Of Confirmation Page (optional) укажите URL-адрес своей страницы подтверждения. В Frontpage, в режиме просмотра Hyperlinks, можно увидеть ссылку между формой, из которой передаются данные (формой представления), и страницей подтверждения. Если страница создана на основе шаблона Confirmation Form, в ней будут присутствовать FrontPage-компоненты Confirmation Field (рис. 4.12). На страницу подтверждения с помощью этого компонента выводят данные, переданные из соответствующего поля формы.
Чтобы добавить на страницу подтверждения FrontPage-компонент Confirmation Field, выполните такую последовательность действий. Активизируйте команду Confirmation Field подменю Components меню Insert. В загрузившемся диалоговом окне Confirmation Field Properties введите имя поля подтверждения. Чтобы информация, переданная из поля формы, корректно отобразилась на странице подтверждения, имена поля формы и поля подтверждения должны совпадать.

Рис. 4.12. Страница, созданная с помощью шаблона Confirmation Form

Шаблон Search Page
Шаблон Search Page (страница поиска) создает страницу, на которой помещается FrontPage-компонент Search Form (форма поиска), обеспечивающий поиск информации на всех страницах Web-узла. На этой странице также даются инструкции по применению операторов языка запросов (рис. 4.13).
Результаты поиска по ключевому слову TestPages на Web-узле, созданном по шаблону Project Web, показаны на рис. 4.14 (выведен список страниц, на которых присутствует данное ключевое слово). Для просмотра страницы достаточно выполнить щелчок на соответствующем элементе списка.

Рис 4.13. Страница поиска, созданная с помощью шаблона Search Page

Рис 4.14. Результаты поиска по ключевому слову TestPages

Шаблон Table of Contents
Данный шаблон позволяет создать страницу с таблицей оглавления. Эта таблица содержит ссылки на все страницы Web-узла и обеспечивает быстрый переход к любой Web-странице. Таблицу оглавления можно просмотреть только в броузере.
На рис. 4.15. приведена таблица оглавления Web-узла, содержащая ссылки на страницы, которые созданы с помощью рассмотренных нами шаблонов. Свойства таблицы оглавления можно изменить в диалоговом окне Table Of Contents Properties, которое загружается посредством команды Table of Contents подменю Components меню Insert.

Рис. 4.15. Страница с таблицей оглавления в броузере

Шаблон Narrow, Right-aligned Body
До сих пор мы рассматривали шаблоны, в которых предусмотрено использование таких FrontPdge-компонентов, как форма поиска, таблица оглавления и поле подтверждения Существуют шаблоны, на базе которых создаются сверстанные страницы (например, содержащие таблицы) для заполнения текстом и графикой На таких страницах не используются FrontPage-компоненты Narrow, Right-aligned Body (узкая, выровненная по правому краю основная часть) - один из таких шаблонов При использовании этого шаблона предусмотрена возможность предварительного просмотра композиции страницы в области Preview диалогового окна New. Страница, сгенерированная на основе шаблона Narrow, Right-aligned Body, содержит таблицу из двух столбцов и одной строки В левой ячейке таблицы находится крупное графическое изображение Правая ячейка заполнена бессмысленным текстом, который следует заменить. Посетители, просматривающие страницу Web-узла, не увидят пунктирных линии, разделяющих ячейки в Frontpage На рис. 4.16. показано, как данная страница выглядит в режиме просмотра Preview в Frontpage (щелкните на закладке Preview в нижней части окна страницы в режиме просмотра Page) В данном режиме границы ячеек не отображаются. Прежде чем приступить к разработке собственных шаблонов, закроите и удалите использовавшийся Web-узел TestPages

Рис 4.16. Страница, созданная на основе шабчона Narrow, Right-aligned Body, в режиме просмотра Preview в Frontpage

Создание шаблонов в Frontpage
Поскольку вы уже некоторое время работаете с шаблонами, вероятно, у вас возникли идеи относительно того, какими шаблонами Frontpage вы бы хотели располагать.
Далее мы рассмотрим процессы создания шаблонов двух разных типов.
Типы шаблонов
Шаблоны - это, фактически, узлы или страницы, которые располагаются отдельно (в особой папке) и служат моделями для разработки различных Web-узлов и страниц. Шаблоны Web-узла и шаблоны Web-страницы хранятся в разных папках, однако между ними есть много общего. На основе шаблонов страницы обычно генерируется одна страница, которая становится частью созданного отдельно Web-узла. Шаблон Web-узла позволяет получить полноценный Web-узел Frontpage с одной или несколькими связанными страницами. Все файлы шаблона располагаются в одной папке, которая входит в структуру папок Frontpage. Создание шаблонов двух указанных типов сводится к созданию узла или страницы обычным способом. Когда узел или страница будут полностью оформлены в соответствии с вашими требованиями, поместите их в папку, предназначенную для шаблонов (папки, в которых находятся файлы шаблонов, должны иметь расширение ТЕМ). Папка шаблонов включает HTML-файлы Web-узла, а также INF-файл (с информацией о шаблоне) и DIB-файл (миниатюра шаблона, которая отображается в поле предварительного просмотра окна New). Папки некоторых шаблонов содержат файлы графических изображений.
Структура папок Frontpage
В процессе инсталляции Frontpage 2000 создаются папки, которые содержат шаблоны страниц, узлов, кадров и таблицы стилей (названия папок, соответственно, Pages, Webs, Frames, Css). Путь доступа к этим папкам по умолчанию: C:\Program Files\Microsoft Onice\Templates\1033\. На рис. 4.17 в Windows Explorer показано содержимое папки Pages (файлы каждого шаблона находятся в отдельной подпапке, имеющей расширение ТЕМ). Если вы установили на свой компьютер Microsoft Personal Web Server 4.0, использовав в процессе инсталляции установки по умолчанию, то путь к его файлам и папкам будет следующий: C:\InetPub\Wwwroot\. Эта папка является корневой папкой Web-сервера. В ней размешается корневой Web-узел. Все узлы, созданные в Frontpage, помещаются в подпапки корневой папки Web-сервера. Корневой Web-узел - это узел, доступ к которому осуществляется по URL-aдpecy, в котором указано только имя сервера (имя папки или страницы не указывается).
Доступ к исполняемому файлу Frontpage (frontpa ge.exe ) по умолчанию осуществляется по следующему пути: С:\Program Fi les\Microsoft Office\0ffice

Рис 4.17. Папка Microsoft Front Page и подпапки Pages,содержащая файлы шаблонов страниц

В Windows Explorer откройте папку Pages (полный путь - С: \ProgramFiles\Microsoft Office\Templates\1033\Pages) Затем откройте одну из ее подпапок, например 1 center tern. В папке шаблона должны находиться минимум три файла Один из них - HTML-файл Если выполнить двойной щелчок на имени этого файла, загрузится броузер, применяемый по умолчанию, в котором отобразится страница Web-узла, базирующаяся на данном шаблоне Другие файлы в папке шаблона - INF-файл и DIB-файл Об их назначении мы уже рассказывали Рассмотрим подробнее INF-файл
INF-файл
INF-файл содержит описательную информацию о шаблоне. Он похож на INI-файл системы Windows. INF-файл должен иметь то же имя, что и папка, в которой он находится.
В папке Pages откройте папку Icentertem, после чего выполните двойной щелчок на имени файла center.inf. Если INF-файл не связан с приложением, в котором его можно просмотреть, используйте для этой цели редактор Notepad. В окне Notepad отобразится краткое содержание файла, как показано на следующем рисунке.
Секция INF-файла
INF-файл всегда имеет секцию минимум с двумя подсекциями ~заголовком шаблона и его описанием. Если это файл шаблона Web-узла, то информация из подсекций отображается в диалоговом окне New (вкладка Web Sites), а если это файл шаблона Web-страницы, - в диалоговом окне New (на вкладке General). На рис. 4.18. в диалоговом окне New на вкладке General выбран шаблон One Column Page, описание которого отображается в области Description.
Если INF-файл не создан, название шаблона не будет включено в список доступных шаблонов.
Следует учитывать, что правильная организация содержимого INF-файла имеет большое значение. Обязательно наличие секции , а также подсекций title и description с содержащимися в них заголовком и строкой описания. В секции общая длина имени и записи подсекции может достигать 255 символов. Оптимальная длина заголовка и описания, при которой они полностью отображаются в диалоговом окне New, составляет 30 и 100 символов соответственно.
Примечание
Наиболее удобный способ создания . INF-файл шаблонов Web-узла, которые отображаются в Frontpage, может включать дополнительные секции и , используемые при загрузке шаблона.

Рис 4.18. В диалоговом окне New (вкладка General) выбран шаблон страницы One Column Page Секция

С помощью секции (рис 419) вы определяете структуру хранения файлов Web-узла, созданного на основе данного шаблона Если секция отсутствует. Frontpage загружает все файлы из папки, но ничего -из подпапок Все JPG- и GIF-фаилы в ТЕМ-папке, даже при отсутствии секции , помещаются в подпапку Image Web-узла Секция необходима, если вы хотите:
чтобы файлы из подпапок ТЕМ-папки использовались на Web-узле,
обозначить нужные вам файлы в ТЕМ-папке, которые следует разместить на Web-узле (файлы ТЕМ-папки, не включенные в секцию , игнорируются),
чтобы файлы попадали в определенные папки на Web-узле, а не только в корневую
При использовании секции следует составить список всех файлов, которые будут применяться на Web-узле, созданном на основе данного шаблона Если вы хотите разместить какую-либо страницу или изображение в другой папке узла, но не в корневой, вы должны сформировать имя подсекции и ее содержимое по определенным правилам В качестве имени секции должны использоваться путь к файлу относительно папки шаблона и имя этого файла. Например, папка images находится в папке шаблона, а файл scrnshot.gif - в папке images. Тогда имя подсекции будет следующим. images\scrnshot.gif. Содержимым подсекции должен быть URL- адрес этого файла на вашем Web-узле.

Рис 4.19. Секция INF-файла

Секция
Секция предназначена для сохранения переменных, используемых FrontPage-компопентом Substitution (замещение). Чтобы расположить этот компонент на странице, необходимо активизировать одноименную команду подменю Components меню Insert. Данный компонент используется для размещения на Web-страницах информации определенного типа, например:

Company Name = Exciting Travel, Inc
Company Address = 1 Main St , Some Town, WA 98100
Секция
Секция используется для предоставления списка задач, который отображается в режиме просмотра Tasks, если Web-узел создан по данному шаблону Записи (имя подсекции и ее содержимое) в секции представляются в следующем формате TaskNumber=TaskNameI Priority I Created By]URLI Comment Элементы записи подсекции отделены друг от друга вертикальной чертой (имя подсекции, уникальный номер или ключ, идентифицирующий задачу)
Их описания приведены в табл 4 1, а способ использования продемонстрирован на рис 4.20.

Рис 4.20. Диалоговое окно favk Detail"s

Таблица 4.1. Описание элементов записи секции [ ra^kLi"sl]

Элемент

Описание

Замечания

TaskNumber (помер задачи)

Уникальный номер или ключ

Например, "t01", "t02", "t03" и т.д.

Task Name (имя задачи)

Короткое описание задачи

Фраза из трех или четырех слов

Priority (приоритет)

Целое число, описывающее степень значимости задачи (ее приоритет)

1 - высокая, 2 - средняя, 3 - низкая

Created By (кем создана страница)

Имя шаблона

Указывается в полях Created By и Assign То диалоювого окна Task Details

URL-адрес страницы, для которой создана задача

Указывается в поле Linked To диалогового окна Task Details

Comment (примечания)

Описание задачи

Более подробное описание того, что требуется сделать

Специальные возможности
Для различных Web-серверов характерны разные установки для задания имени файла домашней страницы по умолчанию. Если вы используете MSPWS, то по умолчанию Frontpage присваивает домашним страницам Web-узлов имя Default.htm. На NCSA-сервере (UNIX-сервер) для домашней страницы предлагается имя Index, htm, которое можно не указывать в URL- адресе при обращении к Web-узлу. Например, по URL-адресу http://www*fairmountain*com/wine осуществляется переход на страницу Index.htm Web-узла Wine, расположенного на сервере Fairmountain NCSA. На сервере CERN (UNIX-сервер) им обычно является имя Welcome.htm, а на сервере Internet Information Server - имя Default.htm. Все файлы домашних страниц шаблонов Web-узла имеют имя index.htm. При создании узла на основе шаблона Frontpage присваивает файлу домашней страницы имя, которое задано на Web-сервере по умолчанию. При этом соответствующим образом меняются ссылки на домашнюю страницу. Если вы не хотите использовать данную возможность, то в INF-файле в секции необходимо ввести следующую строку (при этом имя домашней страницы не будет изменено): NoIndexRenaming"
Примечание
Интересным моментом является то, что при организации ссылки на домашнюю страницу не обязательно явно указывать имя ее файла (например, Default.htm). Вместо имени файла можно использовать символы "./".
Эти символы соответствуют имени файла домашней страницы, заданному на Web-сервере по умолчанию.
Создание одностраничных шаблонов
Это делается очень просто. Достаточно создать обычную страницу Web-узла с информацией и затем сохранить ее как шаблон. Это все:
1. Создайте одностраничный Web-узел в Frontpage и присвойте ему имя Templates. Выполните двойной щелчок на домашней странице, чтобы открыть ее в режиме просмотра Page.
2. В верхней части страницы введите текст "Домашняя страница", присвойте ему стиль абзаца Heading 1. Выделите текст и нажмите кнопку Center на панели инструментов Formatting: текст будет выровнен по центру страницы.
3. Вызовите команду Save As меню File. Появится одноименное диалоговое окно. В поле списка Save As выберите пункт Frontpage Template (*.tem). Нажмите кнопку Save. Откроется диалоговое окно Save As Template.
4. Укажите новый заголовок шаблона "Домашняя страница" и имя страницы (hometem), в поле Description введите запись, например, "Создает домашнюю страницу" и щелкните на кнопке ОК.
5. Если используется структура папок, определенная по умолчанию, путь доступа к папке с файлами нового шаблона будет следующим: C:\Windows\Application\Microsoft\FrontPage\Pages\Pages\Hometem.tem.
Примечание
Если после создания шаблона страницы вы не обнаружите его папку в папке Pages в Windows Explorer, нажмите клавишу для обновления содержимого окна Windows Explorer.
6. Откройте папку Hometem.tem. В ней должны находиться три известных вам файла, которые автоматически создаются при сохранении страницы в качестве шаблона: HTML-файл, INF-файл и DIB-файл. Выполните двойной щелчок на имени INF-файла. Файл будет открыт в редакторе Notepad. Его содержимое показано на следующем рисунке.
7. Закройте Notepad и вернитесь в Frontpage. Активизируйте команду Page подменю New меню File и в загрузившемся диалоговом окне New выберите шаблон "Домашняя страница" (рис. 4.21). Щелкните на кнопке

OK окна New, вследствие чего откроется новая страница, основанная на вашем шаблоне (рис. 4.22).

Рис. 4.21. В окне диалоговом окне New выбран шаблон "Домашняя страница"

Рис. 4.22. Страница, созданная на основе шаблона "Домашняя страница".

Приведенный пример очень прост. Его цель - продемонстрировать принцип создания шаблона страницы. Вероятно, в дальнейшем вы захотите сохранить в качестве шаблона разработанные вами интересные страницы. В приложении Б рассказывается о том, как самостоятельно создать шаблон Web-узла. Эта процедура несколько сложнее, чем создание шаблона страницы, но мы надеемся, что вы без труда освоите ее.

В зависимости от необходимого способа просмотра страниц и работы с ними можно использовать один из четырех режимов представления HTML-страниц:

Конструктор. Веб-страницы можно разрабатывать и редактировать по умолчанию в режиме Конструктор(рис. 8.1). Этот режим предоставляет практически все возможности WYSIWIG (WYSIWYG (What You See Is What You Get - режим точного отображения). Этот режим позволяет пользователю просматривать вид документа в окончательной версии и изменять текст, рисунки и другие элементы непосредственно в этом представлении при создании веб-страниц, такие же, как при работе со средствами разработки.

8.1. Режим представления HTML-страницы Конструктор

Код. Позволяет самостоятельно просматривать, записывать и редактировать теги HTML(рис. 8.2). Используя средства оптимизации кода в Microsoft FrontPage, можно создать чистый код HTML, также упрощается процедура удаления ненужного кода.


8.2. Режим представления НТМЬ-страницы Код


8.5. Окно программы Microsoft FrontPage

В главном меню выбрать пункт Файл Создать. В правой части окна программы откроется панель Создание (рис. 8.6). В секции Создать веб-узел выбрать пункт Другие шаблоны веб-узлов. Появится диалоговое окно Шаблоны веб-узлов, в котором необходимо выбрать значок Одностраничный веб-узел (рис. 8.7).

8.6. Панель Создание


8.7. Диалоговое окно Шаблоны веб-узлов Далее необходимо определить место расположения нового узла и его имя. FrontPage создает в профиле пользователя (c:\Documents and Setiings\UserName), в его папке Мои документы специальную папку для сохранения веб-узлов - Мои веб-узлы.

В секции Параметры необходимо нажать на кнопку Обзор, и перейти в папку Мои документы в локальном профиле. Далее на панели инструментов диалогового окна Место для нового веб-узла нажать на кнопку Создать новую папку(рис. 8.8) и ввести имя для создаваемого веб-узла - Одностраничный узел(рис. 8.9) и нажать последовательно кнопки ОК и Открыть.

8.8. Панель инструментов диалогового окна Место для нового веб-узла


8.9. Выбор расположения нового узла и его имени В диалоговом окне Шаблоны веб-узлов нажмите кнопку ОК.

Через несколько секунд FrontPage отобразит структуру только что созданного одностраничного узла(рис. 8.10). FrontPage открывает новый узел в режиме отображения, который использовался в последний раз. Если полученный вид окон FrontPage отличается от представленного нарис. 8.10 , то необходимо в главном меню выбрать пункт Вид Папки.


8.10. Структура созданного одностраничного узла Далее в окне Список папок(рис. 8.11), расположенном в левой части главного окна FrontPage, необходимо дважды щелкнуть на файле index.htm, чтобы открыть этот файл в режиме просмотра Страница(рис. 8.12). Файл index.htm является стартовой страницей узла - именно с нее будет начинаться просмотр.

8.11. Окно Список Папок


8.12. Файл index.htm в режиме просмотра Страница Как видно изрис. 8.12 , страница index.htm в режиме просмотра страницы является совершенно пустой. В окне необходимо набрать следующий текст: Иванов Иван Иванович Группа АСО-01-01

Мой первый одностраничный веб-узел Результат должен совпадать с представленным нарис. 8.13 .


8.13. Набранный на странице index.htm текст Далее необходимо нажать на кнопку Код на панели выбора способа представления страницы слева от горизонтальной полосы прокрутки(рис. 8.14).

8.14. Панель выбора способа представления страницы Как видно из появившегося окна(рис. 8.15), ЕгоП;Ра§е параллельно с пользовательским вводом в режиме конструктора формирует соответствующий ИТМЬ-код.


8.15. НТМЬ-код, соответствующий набранному тексту Далее необходимо сохранить созданную веб-страницу. Для этого следует либо выбрать пункт главного меню Файл Сохранить или нажать кнопку на панели инструментов.

Далее следует просмотреть разработанный сайт в браузере. Для этого можно либо выбрать пункт главного меню Файл Просмотреть в обозревателе и далее - желаемое разрешение экрана(рис. 8.16), либо нажать кнопку Б12.


8.16. Выбор браузера и разрешения экрана для просмотра сайта Вид разработанной страницы в браузере представлен нарис. 8.17 .


8.17. Вид одностраничного узла в браузере При помощи шаблона Личный веб-узел в папке Мои веб-узлы создайте узел с названием Личный узел А80-01-01(рис. 8.18).


8.18. Сайт, созданный на основе шаблона Личный веб-узел В панели Список папок дважды щелкните на файле index.htm, чтобы открыть стартовую страницу веб-узла в режиме просмотра страниц (рис. 8.19).


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

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

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

В абзаце "Избранные ссылки" измените шаблоны ссылок. Для этого щелкните правой кнопкой мыши по ссылке Посетите Example.com и в контекстном меню(рис. 8.20) выберите пункт Свойства гиперссылки.

Откроется диалоговое окно Изменение гиперссылки(рис. 8.21).

В поле Тест наберите текст гиперссылки "Поисковая система Yandex", а в строке Адрес -URL, по которому будет осуществлен переход при выборе этой гиперссылки -http://www.yandex.ru .


8.21. Диалоговое окно Изменение гиперссылки Аналогично вместо ссылок "См. Example.org" и "Загляните на Example.net" создайте ссылки на веб-сайта Волгоградского государственного университета(http://www.volsu.ru) и информационного агентства РосБизнесКонсалтинг(http://www.rbc.ru).

Абзац "Примечание: Это место для размещения..." замените информацией о сегодняшней погоде в Волгограде. Полученный измененный шаблон стартовой страницы представлен нарис. 8.22 .


8.22. Измененный шаблон стартовой страницы Аналогично заполните страницы шаблона "О себе" и "Увлечения". Для перехода к этим страницам в режиме конструктора используйте одноименные ссылки на панели навигации сайта, удерживая нажатой кнопку Ctrl.

Сохраните все измененные страницы. Просмотрите разработанный на основе шаблона сайт в браузере.

Далее создадим чуть более сложный узел с помощью одного из мастеров FrontPage. Мастера используются аналогично шаблонам, но не только создают макет страницы или узла, но также сопровождают пользователя в процессе настройки содержимого и внешнего вида конечного продукта.

Предположим, что компания "Все для сада" имеет небольшой магазин в Сиэтле, шт. Вашингтон. Владельцем компании является Karen Berg (Карен Берг), которая хотела бы обмениваться информацией с покупателями и расширять покупательскую базу через Интернет. Если поддержка узла отвечает таким скромным целям, она, возможно, расширит в будущем средства этого узла, чтобы вести розничную продажу в режиме "онлайн".

В этом упражнении будет использоваться мастер создания корпоративного веб-узла. Откройте панель Создание и выберите ссылку Другие шаблоны веб-узлов.

В диалоговом окне Шаблоны веб-узлов (рис. 8.23) выберите значок Мастер корпоративного веб-узла, имя сайта - "Всё для сада" и расположение сайта - в папке Мои веб-узлы.


8.23. Диалоговое окно Шаблоны веб-узлов Появится первое из серии диалоговых окон мастера корпоративного веб-узла(рис. 8.24). Мастер использует эти диалоговые окна, чтобы пользователи могли сделать выбор в ответ на его запросы и ввести базовую информацию о компании.


8.24. Первое окно Мастера создания корпоративного узла Прочитайте информацию в первом диалоговом окне и затем щелкните на кнопке Далее, чтобы перейти ко второй странице.

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


8.25. Второй этап работы Мастера - выбор страниц сайта На третьем этапе работы Мастера(рис. 8.26) следует выбрать, какие типовые разделы будут включены в стартовую (домашнюю) страницу. Следует установить флажки Предназначение и Контактные сведения.


8.26. Третий этап работы Мастера - выбор разделов стартовой страницы На четвертом(рис. 8.27) и пятом(рис. 8.28) этапах следует соответственно выбрать, какие элементы будет включать в себя страница "Новости" и какое количество продуктов и услуг будет описано на странице "Продукты и услуги". Оставьте значения, предложенные по умолчанию.


8.27. Четвертый этап работы Мастера - выбор элементов страницы "Новости"


8.28. Пятый этап работы Мастера - выбор количества продуктов и услуг Далее предлагается выбрать, какие сведения о продуктах и услугах, предлагаемых на сайте, следует поместить на страницы (рис. 8.29) . Оставьте значения, предлагаемые по умолчанию. Затем необходимо выбрать, какие сведения смогут указать пользователи на форме обратной связи, предназначенной для сбора отзывов (рис. 8.30). Предлагаемые по умолчанию настройки изменять не надо.


8.29. Шестой этап работы Мастера - Сведения о продуктах и услугах


8.30. Седьмой этап работы Мастера - указание параметров формы обратной связи Далее предлагается выбрать, в каком виде на сервере будут храниться отзывы пользователей о продукции и услугах, собранные при помощи формы обратной связи. Форма обратной связи помещает отзывы пользователей в специальный файл. Предлагается выбрать, в какой форме - в виде текстового файла, предназначенного для обработки посредством СУБД и редакторов электронных таблиц либо в виде ИТМЬ-файла - будут сохраняться эти сведения(рис. 8.31). Необходимо выбрать пункт "Да -формат с разделителями табуляцией".


8.31. Выбор формата хранения пользовательских отзывов Следующий этап работы Мастера(рис. 8.32) предлагает пользователю выбрать формат страницы "Оглавление", которая будет содержать ссылки на все страницы веб-узла и использоваться для организации системы навигации. Следует установить флажки "Автоматически обновлять список страниц" и "Маркеры для страниц верхнего уровня".


8.32. Формат представления оглавления сайта На следующем этапе необходимо указать, какие элементы Мастер должен поместить на страницы сайта - в верхний и нижний колонтитулы страницы (рис. 8.33). Следует выбрать все возможные флажки для верхней части страницы и флажки "Адрес электронной почты веб-мастера" и "Дата последнего изменения страницы". Далее предлагается выбрать, помечать ли незавершенные страницы значком "В стадии разработки"(рис. 8.34). Выберите вариант по своему усмотрению.


8.33. Выбор элементов для страниц сайта


8.34. Значок "В стадии разработки" Следующий этап работы Мастера предназначен для указания наименования организации (полного и кратного), а также ее почтового адреса(рис. 8.35). Укажите следующие сведения:

Полное название организации - Всё для сада;

Краткий вариант названия - ВДС;

Почтовый адрес организации 1234 Оак стр., Сиэтл, WA 10101


8.35. Наименование организации и ее адрес Далее Мастер предлагает указать номера телефона и факса организации, для которой разрабатывается сайт, адрес электронной почты веб-мастера и адрес общей электронной почты (рис. 8.36). Первые два поля оставьте без изменений, а в качестве адресов вебмастера и общей почты укажите соответственно[email protected] и[email protected] .


8.36. Телефон и факс организации, адрес веб-мастера и ящика для общей почты После того, как все необходимые данные введены, Мастер информирует о завершении своей работы(рис. 8.37).


8.37. Последний этап работы Мастера После нажатия кнопки Finish FrontPage создаст веб-узел, используя заданную информацию, и затем выведет на экран список задач, которые нужно выполнить для завершения создания узла(рис. 8.38).


ЙПапґіі F* У длинный нб-узвл Б Отчаты ^ГКчвжды ІІГ тчныжи ©3лдлыи

8.38. Список задач Откройте страницу index.htm в режиме конструктора. Установите курсор после примечания "Примечание. Разместите здесь вводный абзац Вашей страницы.." и наберите следующий текст(рис. 8.39): Добро пожаловать в компанию "Все для сада"! Мы занимаемся садовыми работами на северо-западе Тихоокеанского побережья. На этом веб-узле представлены наша продукция и услуги. Если вы заглянули к нам на веб-узел или в магазин, ощутите всю свободу выбора и дайте нам знать, если вам нужна наша помощь!

Можно удалять примечания, прежде чем вводить новый текст, но делать это не обязательно. Примечания не будут видны посетителям узла.

[Измените свойства этой яяияли для тпс&ряжения на ней тперсс ь\лок]


8.39. Текст вводного абзаца Поместите курсор в конец комментария, под заголовком "Наша цель" и затем введите следующий текст(рис. 8.40): В компании "Все для сада" мы предлагаем только высококачественные растения и садовый инвентарь для своих покупателей.


8.40. Текст абзаца "Наша цель" После комментария под заголовком "Контактные сведения" введите следующий текст(рис. 8.41): Пожалуйста, связывайтесь с нами по факсу или e-mail 24 часа в сутки или звоните, а также приходите в наш магазин в следующее время: Понедельник - Пятница 9:00 - 21:00, Суббота и Воскресенье 10:00 - 17:00.

Примечание: Объясните читателям, как сажаться с вашей организацией Имвйте в виду, что ваш веб-узел будет доступен из любого места земного шара; поэтому используйте международный формат при указании номеров телефонов к факеле. Кроме того, здесь обычно указываются некоторые ключевые зл*б«ронные адреса, например отдела сбыта н службы технической поддержки. Пожалуйста, связывайтесь с нами по факсу или e-maj 24 часа в сутки или звоните, а также приходите в наш магазин в следующее время: Понедельник - Пятница 9 00 - 21:00. Суббота и Воскресенье 10:00 - 17:00.


8.41. Текст абзаца "Контактные сведения" Для того, чтобы оперативно просмотреть измененную страницу в том виде, в котром ее увидят посетители, нажмите на кнопке режима Просмотр внизу окна редактирования и просмотра страницы (рис. 8.42).

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

Можно копировать или вырезать различные фрагменты содержимого из файлов программ Microsoft Office и затем вставлять их в веб-страницы. Область задач Буфер обмена может содержать тексты, графику и другие элементы файлов в удобном и доступном виде и включать в себя до 24 различных элементов из всех приложений Office.

При каждой вставке содержимого буфера обмена в файл программы FrontPage появляется


8.43. Страница news.htm в режиме конструктора Трижды щелкните на заголовке "Изменения на веб-узле", что бы выделить его, и введите текст "Публикации в прессе". Текст заголовка изменится, но формат останется прежним.

[ Новости 3 [ Продукты 3 [ Услуги ]


8.44. Измененный текст страницы с сохранением формата Замените заданный по умолчанию текст вводного абзаца следующим текстом: Ознакомьтесь с новостями! Прочтите здесь то, что пишут о нас в газетах.

Перейдите в папку с методическими указаниями. В раскрывающемся списке Тип файлов выберите вариант Word 97-2002 (*.doc).

Выберите из списка имеющихся файлов PR2.doc и затем щелкните на кнопке Открыть, чтобы вставить весь текст этого документа на веб-страницу.


8.45. Диалоговое окно Выбор файла Текст документа будет преобразован в формат ЯТБ и затем в ИТМЬ, после чего произойдет его вставка на странице "Новости", как если бы вы ввели его вручную. Исходное форматирование текста сохраняется(рис. 8.46).


8.46. Добавленный из файла на страницу текст Контактная информация вверху импортированного текста содержится в таблице. Таблица и ее ячейки указываются пунктирными линиями. Щелкните на таблице. Выберите пункт главного меню Таблица Выделить Таблица. Будет выделена таблица и ее содержимое.

Щелкните правой кнопкой на этой выделенной части и выберите в контекстном меню пункт Удалить ячейки, чтобы удалить эту таблицу.

Трижды щелкните на заголовке "Публикации в прессе", чтобы выделить весь абзац, и затем нажмите на клавишу Беї, чтобы удалить его из веб-страницы.

Откройте страницу Услуги (services.htm). Щелкните правой кнопкой на баннере страницы Услуги и выберите из контекстного меню пункт Свойства объявление на странице.

8.47. Контекстное меню баннера страницы "Услуги" Появится диалоговое окно Свойства объявления на странице.

В поле Текст объявления выделите и удалите текущий текст и затем введите текст "Учебные курсы", как это показано нарис. 8.48 .


8.48. Диалоговое окно Свойства объявления на странице Щелкните на кнопке ОК, чтобы закрыть это диалоговое окно и изменить заголовок страницы. Это изменение повлияет на заголовок страницы как в объявлении страницы, так и в режиме просмотра(рис. 8.49).


8.49. Страница Услуги с измененным баннером Откройте в программе Word файл classes.doc из папки с методическими указаниями.

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

Вернитесь в программу FrontPage. На странице services.htm щелкните на тексте примечания, чтобы выделить его, и затем чтобы скопируйте текст из буфера обмена. Скопированный текст заменит текст комментария.

Выделите и удалите лишний (пустой) абзац, вставленный вместе с этим текстом.

В панели списка папок откройте serv01.htm, serv02.htm и serv03.htm (три файла отдельных услуг) для редактирования.

В каждом файле повторите описанные выше шаги, чтобы заменить заголовки страниц (баннеры) на следующие краткие варианты, описанные в документе Учебные курсы:

Измените Услуга 1 на Весенняя радость.

Измените Услуга 2 на Насекомоядные растения.

Измените Услуга 3 на Органика По мере обновления баннеров страниц одновременно изменяются навигационные гиперссылки под баннерами страниц (рис. 8.50) и заголовки страниц в режиме просмотра.


8.51. Вертикальные гиперссылки навигации Для каждой из трех гиперссылок Название услуги(рис. 8.52) дважды щелкните на гиперссылке, чтобы выделить ее, и введите полное имя соответствующего курса из документа Classes.doc.

Компания "Все для сада" предлагает различные обучающие курсы по географических районах, общему и сезонному уходу, а также по прове

Замените Название услуги 2 на Насекомоядные растения: вредные или прекрасные?


Замените Название услуги 3 на Органические отходы: используйте их, чтобы от них избавиться!(рис. 8.53).


8.53. Измененные гиперссылки Скопируйте и вставьте первый описательный абзац для каждого курса из документа Classes.doc на страницу services.htm, заменяя описание соответствующей услуги. По окончании страницы сайта должны выглядеть, как показано нарис. 8.54 .


8.54. Измененная страница services.htm

На каждой из трех страниц описания отдельных курсов (serv01.htm, serv02.htm и serv03.htm) щелкните в любом месте тела страницы, нажмите клавиши Ctrl + А, чтобы выделить все содержимое, и затем нажмите на клавишу Del.

1. Назначение программного продукта Microsoft FrontPage.

2. Сформулируйте понятия веб-узла и веб-обозревателя (браузера).

3. Какие типы узлов могут создаваться при помощи Microsoft FrontPage.

4. Какие существуют способы представления HTML-страницы в Microsoft Frontpage?

Online service by OceanTheme are is a platform where people can unite with each other with mutual interest to purchase premium templates and extensions Joomla! at a bargain price. The target audience of the service are individuals and small and medium businesses, professional web developers to create online stores, community sites or people wishing to have your blog. In our great collection of premium solutions everyone will find what he needs.

Our resource acts as an organizer pooling, specifies the number of people that you want to buy templates and extensions, the cost of goods, as well as the amount and access to these materials. Our website has a lot of opportunities for easy searching of templates and extensions. Intuitive navigation, tagging system, sorting by the filter and the tool "add to bookmarks" will allow you to find the right material you want incredibly fast. In addition You will always find the latest information, so as to update the collection every day.

Access to the entire database of materials is provided for the duration of the club specified in the subscription purse. Subscribers receive unrestricted access to all available archives, news and updates, as well as technical support throughout the subscription period.

All the products you can find on this site are 100% GPL-compatible, which means you can change them as you want and install on unlimited number of sites.

Thanks to our collection you will save a lot of time and money, as the templates and extensions easy to use, easy to install and configure, multi-functional and diverse. That will allow you to create a website of any complexity and orientation, without learning advanced web development technologies.

Main features of our website

A rich set of functions, working out of the box:

Use all opportunities of our resource to get ready-made professional solution for rapid implementation of your business projects or creative ideas.

Use the search tools

Use advanced search and filtering, and easy navigation for quickly finding the desired web solutions in design, functionality and other criteria.

To favorite materials were always at hand, use the unique function "Add to favorites", and they are available in a separate section for the whole year.

Logged into our site, you will be able to leave comments and to participate in promotions, as well as use of a free subscription with permium access.

Join our club membership

Club subscription gives you full access to our entire catalogue of original material. And includes premium templates and extensions for several years.

Download appropriate to your Joomla templates and extensions, both free and subscription for the club without any limits and ogoranicheny speed.

If you liked any material on the site, you can leave your voice, as well as share it with friends via social networks.

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

Коротко о программе Microsoft FrontPage

Это простой в освоении и удобный Web-редактор для проектирования, подготовки и публикации Web-сайтов. Благодаря интеграции с семейством продуктов MS Office, привычному интерфейсу и обилию шаблонов программа позволяет быстро освоить работу даже начинающим пользователям, знакомым с основами работы в MS Word. При этом FrontPage нельзя назвать решением для «чайников»: программа предоставляет широкие функциональные возможности и разнообразные средства оптимизации интернет страниц.

Следует отметить, что название Microsoft FrontPage существовало до 2003 года, а далее дополнялась новыми функциями и менялось само название программного обеспечения. В 2007 программа FrontPage была переименована на Microsoft Expression Web, а в 2010 в Microsoft Office SharePoint Designer. Фактический в новые версии были добавлены некоторые дополнения, но основной вид программы сохранялся.

Основные инструменты программы

Общий вид программы Microsoft FrontPage

Программа Microsoft FrontPage имеет много общего с инструментами MS Word, поэтому многие кнопки и вкладки меню также интуитивно понятны и это облегчает процесс создания страницы. Многие уже знают, как набирать и форматировать простой текст, создавать таблицы в Microsoft Word, по такому же принципу редактируется страница и в FrontPage.

Справа на рисунке показан общий вид программы со стандартным набором инструментов, при помощи которых можно сделать шаблон страницы с текстом, ссылками и картинками. Зайдите во вкладку "Вид" далее "Панель инструментов" и убедитесь, что включены "Cтандартная ", "Форматирование " и "Таблицы ", этих инструментов будет достаточно для создания просто страницы. Снизу обратите внимание на вкладки "Конструктор", "Код" и "Просмотр" - это три разных режима в которых можно всё время просматривать, как выгляди создаваемая страница.

  • В Конструкторе вводятся все правки, набирается и форматируется текст, вставляются картинки, создаются ссылки, меняются цвета фона и шрифта таким же образом, как и в Microsoft Word.
  • Во вкладке "Код" можно просмотреть, так называемый, HTML -код. HTML - это стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. В этой вкладке тоже можно осуществлять редактирование страницы, но нужно знать этот язык разметки. Однако все изменения начинающим следует делать в конструкторе и все изменения в HTML будут происходить автоматический.
  • Во вкладке "Просмотр" можно увидеть, как выглядит страничка непосредственно в браузере (в таком, как Internet Explorer)

Подробное описание других меню, кнопок и функций Microsoft FrontPage представлены в справке программы. Для этого нужно нажать клавишу "F1".

Создаём шаблон для страниц в FrontPage

Вставляем основную таблицу в редакторе

И так для того, чтобы создать несложный шаблон необходимо вставить таблицу с тремя блоками. Три блока - это простой стандарт: верхний блок предназначен для названия сайта, второй блок для ссылок навигации по сайту, третий блок для текста, картинок и другой информации на странице. Можно вставить больше блоков таблиц для удобства, но это уже дело вкуса, как, сколько и какими размерами делать эти блоки. Существуют и другой способ создания блоков не через создание таблиц, а вставкой в страниц, так называемых, "div" элементов и назначения им определённых стилей, но этот способ не для новеньких веб-мастеров, и об этом можно написать отдельную статью.

  1. Чтобы вставить таблицу заходим во вкладку "Таблица" > "Вставить" > "Таблица" и заполняем поля, как это показано на рисунке справа. Фактический можно ввести свои параметры, но данная таблица имеет фиксированную ширину и вытянута на 100% площади экрана. Таким образом таблица компактно будет отображаться в браузере.
  2. Затем необходимо настроить все три ячейки, так как они после вставки имеют одинаковую высоту. Нажимаем правой кнопкой мышки на самой верхней ячейки и заходим в "Свойства ячейки" в поле высота вписываем условно "150" и ставим галочку "в точках", т.е. размер ячейки составит 150 пикселей. В этом же меню мы можем выбрать цвет фона ячейки, а нажав в меню "стиль..." можно внести другие настройки ячейки, например выбрать цвет и размер границы ячейки, с этим можете поэкспериментировать и посмотреть результат. В самой ячейке можно вписать название сайта.
  3. Далее редактируем вторую ячейку, которая предназначена для ссылок навигации по сайту. Ширину делаем около 40 пикселей, этого будет достаточно, ну и другие настройки, как цвет фона и полей настраиваем на свой вкус. Далее пишем названия самих ссылок разделяя знаками вертикальной линии или другим знаком (просмотреть можете ниже скачав полностью шаблон). Выделяем тест и жмём кнопку выравнивания по центру, также как и в MSWord. Таким же образом можно менять шрифт, размер шрифта и другие настройки текста.
  4. Также настраиваем последнюю ячейку. Она предназначена для основного текста, где можно внести текст приветствия.
  5. Напоследок можно зайти во вкладку "Файл" > "Свойства", где можно внести название сайта и изменить общий фон страницы и другие общие настройки

Теперь шаблон готов. Он является каркасом для всех последующих страниц сайта. Вот как сайт выглядит в HTML коде:

Такой получаем шаблон для сайта

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" > < title > Название сайта < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" > Название сайта < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b > Главная | < b > Страница 2 | < b > Страница 3 | < b > Страница 4 | < b > Страница 5 | < b > Контакты < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" > Текст главной страницы. Здесь можно вставить текст приветствия и коротко написать чему посвящён сайт.

Этот HTML код можно сразу вставить в редактор во вкладке "Код" и сразу увидите готовый шаблон. Его можно менять и редактировать под собственные нужды. Здесь стоит пояснить, что там, где вставляется основной текст и чтобы он не располагался вплотную к полям он был обрамлен в тэг "div", c настройкой отступа, как это показано в примере.

Дополнительные шаблоны

  1. Нужно также знать, что в программе FrontPage, да и других подобных программах существуют стандартные шаблоны, по которые можно использовать для создания страниц, они легко редактируются и можно подогнать любой шаблон под свои нужды. Для того, чтобы выбрать стандартный шаблон перейдите во вкладку "Файл" > "Создать..." в открывшимся окне выбрать "Другие шаблоны страниц", где можно выбрать любой понравившейся шаблон.
  2. Есть второй вариант - скачать полностью шаблон из интернета. Сайтов предоставляющих такой сервис очень много. шаблоны могут быть как платными, так и бесплатными. Скачав тот или иной шаблон, его можно редактировать в программе, заполнять нужным содержанием и менять стиль того или иного элемента.

Использование стандартных макетов таблиц и тем

Microsoft FrontPage даёт хорошие инстурменты готовых макетов таблиц и тем оформления для сайтостроительства

Нужно знать, что в Microsoft FrontPage есть стандартный набор макетов таблиц и тем, при помощи которых можно неплохо научится искусством создания обычных страниц или сайтов визиток. И так справа вверху есть выпадающее меню (смотрите картинку справа, где также отображён результат использования матектов таблиц и темы оформления), нажав появится меню, в котором нужно выбрать "Макетные таблицы и ячейки" и далее ниже появится много различных макетов таблиц, можно выбрать любой по своему усмотрению и вкусу. Таким образом это освобождает создавать самому таблицу вручную.

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

Вставляем картинку и создаём ссылки на страницы

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

Для перехода на другие страницы сайта необходимо создать ссылки, по которым пользователи смогут посетить все страницы сайта. Для это нужно выделить нужный текст для ссылки и перейти во вкладку "Вставка" > "Гиперссылка", в открывшемся меню нужно указать страницу, на которую создаётся ссылка, и нажать "ок". В этом же окне есть другие настройки для ссылок такие, как открывать ссылку в новом окне или нет. В принципе это можно изучить самостоятельно.

Заключение

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

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

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

Статьи по схожей тематике