Создание динамического веб-шаблона. Создание Web-страниц при помощи программы FrontPage Перемещение по странице
С развитием Интернета появился протокол обмена информацией,протокол называется HTTP (HyperText Transfer Protocol – протокол передачи гипертекста).Вместе с этим протоколом появилась и служба World Wide Web (часто называемая WWW или просто Web ), которая подставляет собой обширную сеть серверов HTTP , передающих файлы через Интернет .
Основную часть этих файлов представляют собой Web-страницы
– специальные файлы, написанные на языке HTML (HyperText Markup Language
– язык разметки гипертекста). Web-страницы
публикуются в Интернете
путем размещения таких файлов на серверах HTTP (Web-узлах)
. Содержание Web-страниц
может быть разным и посвященным совершенно произвольным темам, но все они используют одну и тужу основу – язык HTML
.
Большинство людей желающих создать свой собственный сайт или страничку, знакомы с языком HTML
только понаслышке. Поэтому им на помощь может придти программа Microsoft FrontPage
,один из самых известных конструкторов сайтов.
FrontPage, входит в пакет приложений Microsoft Office , стал первым продуктом широкого использования для Internet , сочетающим в себе клиентскую и серверную части и обеспечивающим возможность разработки сайта в целом и установки его на большинство популярных серверов. FrontPage способен взять на себя всю необходимую работу по программированию. Однако FrontPage станет достаточно серьезным помощником и для профессиональных разработчиков, предпочитающих держать в руках полный контроль над творческим процессом.
Окно программы FrontPage 2003.
Программа FrontPage выпущена компанией Microsoft и выполнена в едином стиле продуктов, входящих в пакет Microsoft Office , поэтому внешний вид программы практически не отличается от текстового процессора Word .
В верхней части окна располагается строка меню и две панели инструментов: Стандартная и Форматирование
. Включать или отключать отображение панелей инструментов позволяет меню Вид
.
В левой части находится Панель представлений
, при помощи которой можно переключать режимы документа.
Основную часть окна занимает рабочая область, в которой могут быть открыты одно или несколько окон, содержащих отдельные документы.
В нижней части окна располагается строка состояния
, содержащая справочную информацию
. Так же в нижней части окна находятся три кнопки просмотра документа.
Отображение панелей инструментов.
Для управления панелями инструментов во FrontPage
можно воспользоваться теми же способами, как в Microsoft Word
. А именно:
в меню Вид
надо выбрать пункт Панели инструментов
, а в открывшемся новом подменю - установить флажки
напротив тех панелей инструментов, которые вам нужны; или щелкнуть правой кнопкой мыши
по какой-либо панели управления
(или по области рядом с ней) и точно так же воспользоваться контекстным меню.
FrontPage
, как и другие приложения Microsoft Office
, позволяет добавлять, удалять, менять местами пункты меню и кнопки на панелях инструментов. Также существует возможность создавать полностью свои панели.
Для этого надо:
В меню Сервис
выбрать пункт Настройка
…
или
в меню Вид
выбрать пункт Панели инструментов
, а в появившемся каскадном меню - пункт Настройка
…
В результате ваших действий откроется диалоговое окно Настройка
, где можно установить необходимые панели.
Создание новой Web-страницы .
Если вы запустили FrontPage
, значит, новая Web-страница
у вас уже создана (при запуске FrontPage
сразу открывается новая пустая Web-страница
, готовая для размещения текста и любых других элементов).
Создать новую Web-страницу
можно и другими способами:
С помощью кнопки Новая страница
на Стандартной панели
инструментов.
меню Файл
выбрать подменю Создать
, а затем – Страница
или Web-узел
;
с помощью комбинаций Ctrl+N
;
с помощью контекстного меню
(работает во всех режимах, кроме режимов Задачи и Отчеты
) - для этого внутри Списка папок
данного Web
) надо щелкнуть правой кнопкой мыши и в появившемся контекстном меню выбрать пункт Создать Страница
.
Создание станиц при помощи мастера и шаблонов.
Как уже говорилось выше, если для создания новой страницы вы воспользовались меню Файл Создать Страница или Web-узел
, то FrontPage
предложит вам воспользоваться шаблоном для создания новой страницы.
Для этого он откроет диалоговое окно, внешний вид которого приведен ниже:
На вкладке Общие
данного диалогового окна выводится перечень шаблонов FrontPage
, доступных в настоящий момент. Выбрав любой из шаблонов, можно посмотреть его описание в поле Образец
.
Создание FrontPage Web
.
Microsoft FrontPage Web
- это набор Web-страниц
, файлов с изображениями и других компонентов, которые можно рассматривать как единое целое.
Если делать сайт во FrontPage
, то для его хранения удобней всего использовать FrontPage Web
.
самый главный плюс - это возможность переименовывать файлы, входящие в состав FrontPage Web
.
Представьте себе, что перед публикацией вашего сайта в Интернет
вы вдруг заметили, что пара файлов у вас названа русскими именами. - «Теперь по всем файлам придется лазить и ссылки ручками менять!» дуамете Вы.Вот тут-то и поможет FrontPage Web
- вы можете покойно переименовать файлы, а FrontPage
самостоятельно пройдется по всем другим файлам, входящим в FrontPage Web
и переименует все ссылки на исправленный вами файл.
все остальные преимущества описывать не буду, но хочется сказать, что для использования всех возможностей FrontPage
, то лучше использовать FrontPage Web
.
Итак, чтобы создать новый FrontPage Web
нажмите на стрелочку, расположенную слева от кнопки Новая страница на панели инструментов и в появившемся выпадающем меню выберите пункт Веб-узел…
Открытие Web-страниц.
Очень часто при создании сайта приходится редактировать уже созданные Web-страницы . К одной и той же странице можно возвращаться сколько угодно раз, чтобы ее отредактировать или использовать ее части для создания новых Web-страниц .
Открыть уже существующую Web-страницу можно в любом из существующих режимов.
Из режима Page Views есть четыре способа открыть существующую страницу:
1 способ
Если вы работаете с FrontPage Web , то просто выберите нужный файл в Списке папок и дважды щелкните по нему мышью.
2 способ
В меню Файл выберите пункт Последние файлы . Из появившегося каскадного меню выберите нужный файл.
3 способ
С помощью диалогового окна Открытие файла: Файл Открыть .
Предварительный просмотр.
Для того чтобы посмотреть, как ваша страница выглядит непосредственно в браузере можно воспользоваться вкладкой Просмотр в режиме редактирования Web-страницы
. Но в данном случае может оказаться, что браузер FrontPage
не вполне корректно отобразит некоторые элементы вашей страницы
, поэтому лучше всего:
воспользоваться кнопочкой на панели инструментов
или в меню Файл
выбрать пункт Предварительный просмот
р в обозревателе.
Если вы воспользовались первым способом, то содержимое вашей страницы отобразиться во встроенном браузере FrontPage
.
Если же вы воспользовались вторым способами, то FrontPage
выведет диалоговое окно Просмотр в обозревателе…
Здесь можно:
Выбрать обозреватель, в котором вы хотите просмотреть свою Web-страницу
. Как правило, первоначально здесь отображается браузер
, который по умолчанию установлен на вашей машине.
Добавить любой другой обозреватель, для чего необходимо воспользоваться кнопкой Добавить
.
Редактировать или удалить установленные обозреватели.
Установить размер экрана, на котором будет просматриваться ваша Web-страничка
Сохранение Web-страниц .
По умолчанию FrontPage вместо названия страницы берет первую строку текста с вашей страницы . Это не всегда то, что надо. Изменить название страницы можно с помощью кнопки Изменить - нажатие на эту кнопку открывает диалоговое окно Название страницы , в котором вы можете изменить название страницы .
Удаление Web-страниц.
При работе с Web-сайтом рано или поздно случиться так, что какие-то страницы вам будут больше не нужны и вам захочется их удалить.
Существует три способа удаления Web-страницы .
1 способ
В панели Список папок выделите файл, который необходимо удалить и нажмите кнопку Delete на клавиатуре.
2 способ
В панели Список папок щелкните правой кнопкой мыши по файлу (или значку файла ), который необходимо удалить и в появившемся контекстном меню выберите пункт Удалить .
3 способ
В панели Список папок выделите файл , который необходимо удалить и затем выберите пункт Удалить в меню Правка .
Работа с текстом.
На первый взгляд, ввод текста во FrontPage
ничем не отличается от ввода текста в любом текстовом редакторе (например, в Microsoft Word
).
Для того чтобы набрать текст, достаточно щелкнуть мышью в любом месте страницы, и курсор будет помещен в ближайшую точку, в которую можно ввести текст.
Набор прописных букв, редактирование текста (удаление символов, вставка текста и т.д.) производится точно также, как в Microsoft Word.
Есть только одно небольшое НО: при нажатии клавиши Enter
во FrontPage
осуществляется принудительный переход курсора на новую строку, при этом до и после абзаца ставятся фиксированные абзацные отступы.
Если вам не надо создавать абзацы, то для перехода на новую строку лучше всего использовать комбинацию клавиш Shift +Enter.
Работа с изображениями.
Графически форматы в Web .
Все компьютерные изображения, все форматы для их хранения (а, следовательно, и все программы для их обработки) делятся на два больших класса - векторные и растровые
. Векторное изображение
состоит из объектов - геометрических форм, составленных из прямых, дуг, окружностей и кривых Безье. Достоинств у векторной графики
немало. С точки зрения дизайнера, самое главное ее достоинство состоит в том, что векторную графику можно «вертеть» как угодно, не боясь «протереть дырку» в изображении или потерять часть информации. Другое достоинство - небольшой объем файлов (в сравнении с растровыми изображениями) и независимость от разрешения устройств вывода (будь то принтер или экран монитора). Эти факторы сделали векторную графику
вероятным кандидатом для использования в Internet
. Правда стоит оговориться, что на сегодняшний момент векторная графика встречается не так уж часто, как хотелось бы.
Тем не менее, среди реально применяемых векторных форматов хотелось бы отметить формат Shockwave Flash фирмы Macromedia
. Для просмотра этого формата в браузере
нужен подключаемый модуль (plug-in
), бесплатно распространяемый фирмой Macromedia
. На сегодняшний день существуют как сайты целиком и полностью созданные по этой технологии, так и сайты, используемые Flash-формат
лишь частично.
Растровое представление графики базируется на понятии растра. Растр
– это совокупность объектов (в данном случае пикселей), размещенных в одинаковые строки и столбцы. Т.е. растровый компьютерный файл
можно рассматривать как набор маленьких цветных или серых квадратиков, образующих мозаику изображения. Т.к. размер этих квадратиков заведомо мал, то при просмотре растровой графики эти квадратики сливаются друг с другом, образуя непрерывную смену цветов.
Растровый формат хранения изображения имеет как свои преимущества, так и недостатки. Одним из больших плюсов растровой графики является возможность работы с полутонами, т.е. возможность передавать изображение точно также, как оно выглядит в жизни. А вот среди недостатков основной проблемой является размер файла. Естественно, чем больше пикселей отведено для формирования изображения
, тем выше качество передаваемого изображения
, но, тем самым больше будет и размер файла.
Если мы теперь вернемся к браузерам, то можно сказать следующее, что большинство браузеров без проблем могут отображать графические файлы четырех форматов (*.gif, *.jpg, *.png, *.bmp
), использовать из которых на сегодняшний момент лучше всего два - *.gif и *.jpg
. Да и то после предварительной оптимизации.
Вставка изображений на Web-страницу
.
Вставлять изображение на вашу Web-страницу
можно несколькими способами:
1. Перетащить изображение из Windows Explorer
(то есть прямо из проводника).
2. Перетащить изображение из Internet Explorer
.
3. Перетащить файл с изображением с панели Список папок
, прямо на страницу.
4. С помощью буфера обмена
- скопировать изображение в буфер обмена из любой другой программы, а затем на странице вставить его из буфера обмена.
5. С помощью кнопки Добавить
рисунок из файла на панели инструментов Стандартная
.
6. С помощью меню Вставка Рисунок.
Рассмотрим эти способы более подробно:
Способ 1
Windows Explorer
(то есть прямо из проводника) надо:
во FrontPage
открыть окно проводника;
в окне проводника выделить файл с картинкой, которую вы хотите вставить на свою страницу;
левой клавишей мыши перетащить файл-картинку на свою Web-страницу
картинка вставиться в то место, где на странице находился курсор вставки.
Способ 2
Для того чтобы перетащить изображение из Internet Explorer
надо:
во FrontPage
открыть страницу, на которую вы хотите добавить изображение;
в браузере
откройте то изображение, которое вы хотите поместить на своей Web-странице
браузера
название файла должно оканчиваться на jpg, jpeg, gif
);
левой клавишей мыши перетащите выделенную картинку на свою Web-страницу
;
Способ 3
Для того чтобы перетащить файл
с изображением с панели Список
папок, прямо на страницу надо:
во FrontPage
открыть страницу, на которую вы хотите добавить изображение
;
выбрать необходимый файл с картинкой на панели Список папок
;
левой клавишей мыши
перетащите выделенную картинку на свою Web-страничку
;
выбранная картинка вставиться в то место, где на странице находился курсор вставки.
Способ 4
Для того чтобы вставить изображение на свою Web-страницу
с помощью буфера обмена, надо:
в том приложении, из которого вы хотите скопировать картинку, выделить изображение и при помощи клавиш Ctrl + C
скопировать рисунок в буфер обмена;
на своей Web-странице
вставить это изображение из буфера обмена при помощи клавиш Ctrl + V
Способ 5
Web-страницу
вы решили воспользоваться кнопкой Добавить изображение
из файла на панели инструментов Стандартная
, то FrontPage
откроет диалоговое окно Рисунок
.
В данном диалоговом окне укажите тот файл с картинкой, который вы хотели бы добавить на свою Web-страницу
и нажмите кнопку Вставить.
Способ 6
Если для вставки изображения на свою Web-страницу
вы решили воспользоваться меню Вставка Рисунок
, то FrontPage
предложит сделать вам дальнейший выбор:
Картинки
… – выбор того пункта меню предоставляет вам возможность воспользоваться готовой библиотекой картинок.
Из файла
… – выбор данного пункта меню предоставляет вам возможность самостоятельно указать местонахождение файла с картинкой, который вы хотите добавить на свою Web-страницу
(использование этого пункта приведет к открытию диалогового окна Рисунок
, работа с которым была описана выше).
Создать фото коллекцию
… - при помощи этого пункта меню можно создать коллекцию изображений в определенном стиле. Для это в открывшемся окне Свойства
коллекции фотографий при помощи кнопки Добавить
на вкладке Рисунки
выбрать изображения, а на вкладке Макет
выбрать формат оформления.
Добавление файлов мультимедиа.
Помимо простой графики, как – изображения в форматах *.gif, *.jpg, *.png и т.д. FrontPage позволяет размещать на ваших Web-страницах файлы мультимедиа. К ним относятся: видеоклипы, звуки…
Для вставки видеоклипа надо в меню Вставка выбрать пункт Рисунок , а затем Видеозапись.. .
Откроется диалоговое окно Видео , в нем будут отображаться видеоклипы в формате *.avi, *.asf, *.ram, *.ra .
Добавить звук на Web-страницу можно на вкладке Общие диалогового окна Свойства страницы .
Работа с таблицами.
Таблица
- одно из наиболее мощных инструментов используемых при создании сайтов.
Изначально таблицы
применялись только для представления структурированных данных. Однако постепенно они превратились в мощное универсальное средство для компоновки Web-страниц.
Создание таблиц
Самый простой способ создания таблицы
– использовать кнопку Добавить таблицу
, расположенную на панели инструментов Стандартная.
Еще один способ – при помощи пункта меню Таблица Вставить Таблица
.
А так же таблицу
можно нарисовать и вставить при помощи буфера обмена.
Ввод данных и навигация по таблице.
Одной из замечательных особенностей таблиц является то, что введенный текст форматируется внутри ячейки точно так же, как мы привыкли форматировать его в пределах всего документа. Помещенный в ячейку текст автоматически переносится на новую строку, если его длина превышает ширину столбца. При нажатии клавиши Enter , как обычно, вставляется новый абзац. Текст или числа вводятся в таблицу с клавиатуры.
Перед тем, как заносить данные в таблицу , необходимо поместить текстовый курсор в нужную ячейку таблицы . Это можно сделать, щелкнув на ней мышью.
Однако более удобно для перемещения между ячейками использовать комбинации клавиш:
Сочетания клавиш: Действие:
Tab
в любом месте таблицы,кроме конца последней строки перейти в соседнюю ячейку и выделить ее содержимое
Tab
в конце последней строки добавить новую строку в низ таблицы
Shift +Tab
перейти в предыдущую ячейку и выделить ее содержимое
Enter
начать новый абзац
Enter
в начале первой ячейки добавить текст перед таблицей в начале документа
Создание и применение форм.
Формы представляют собой текстовые поля, переключатели, флажки, кнопки и многие другие элементы управления. Посетителю сайта достаточно ввести какую-нибудь информацию в то или иное текстовое поле, выбрать какие-нибудь данные из предложенного списка, нажать на кнопочку Отправить, чтобы данные отправились на Web-сервер для обработки (или обработались тут же на странице).
Давай познакомимся с тобой - пожалуйста, заполни следующие поля:
Твое имя:
Твоя фамилия:
Дата твоего рождения: год месяц число
Спасибо! А теперь - в путь!
1. Мала, а проворна.
Где бывает, там повелевает.
В шатер зайдет -
Богатыря перевернет.
Кто это?
Муха Блоха Капризный ребенок
2. Выпуча глаза сидит,
По-французски говорит,
По-блошьи прыгает,
По-человечьи плавает.
О ком идет речь?
Кот Лягушка Попугай
3. Чем дышит тюлень, нырнув под лед?
4. Почему плачут большие черепахи?
5. Какую одежду может и селедка носить?
Шубу Пальто Тельняшку
6. Кого называют «речной лошадью»?
Выдру Бегемота Крокодила
7. Какие птицы не высиживают птенцов?
8. Какие птицы не умеют летать?
Если вам необходимо выберать несколько ответов - нажмите и не отпускайте клавишу Ctrl и щелкайте левой клавишей мыши по нужному ответу
Но создание форм
на самой страничке
это только половина работы. Так как обязательно должна существовать программа, которая сможет обработать данные, введенные пользователем с помощью форм.
Такая программа может быть расположена на сервере; она может находиться в вашем Web-сайте
в виде отдельного файла, а может быть просто прописана в коде html
на вашей Web-страничке
.
Именно она определяет - что же произойдет с той информацией, которую ввел пользователь:
информация
может быть добавлена в базу данных и на ее основе могут быть построены различные графики, рейтинги…;
информация
может быть переправлена по электронной почте (это часто используют для получения информации о пользователе в анкетах различного рода);
информация
может быть обработана прямо на месте и посетитель вашего сайта тут же получит ответную информацию (например - получит баллы за тест, увидит введенную им информацию в гостевую книгу…).
В отношении форм существует несколько основных правил:
1. Каждая форма
занимает определенный участок Web-страницы
. На одной Web-страничке
может быть расположена одна или несколько форм.
2. Внутри каждой формы должен размещаться, по крайней мере, один из элементов форм (хотя, как правило, их несколько).
3.Каждый элемент формы
имеет имя и значение. Имя идентифицирует поле для ввода информации, а значение приравнивается к значению, выбранному пользователем.
4. Один из элементов формы (им может быть обычная кнопка или любой рисунок) должен выполнять функцию кнопки Отправить.
Создание форм во FrontPage
.
Чтобы добавить форму на Web-страницу
, надо:
Установить курсор в то место, где вы хотите вставить форму.
В меню Вставка
выбрать пункт Форма
, в открывшемся меню снова выбрать пункт Форма
. Форма
будет помещена на вашу Web-страницу
- появиться область, помеченная пунктирной рамочкой, с двумя кнопками: Отправить и Сброс
.
Пользуясь все тем же пунктом меню Вставка Форма
последовательно вставить необходимые вам элементы форм
, выбирая их из раскрывающегося каскадного меню (при этом необходимо помнить, что все элементы формы вставляются внутри области формы, помеченной пунктирной рамочкой).
После того, как форма
создана, остается только наполнить ее содержанием - элементами форм
, текстом, изображениями, таблицами… (при этом размеры формы
будут меняться автоматически).
Добавлять содержание форм
можно обычным образом. Например, текст можно набирать, а можно вставлять из буфера обмена… Все действия с добавленными объектами аналогичны.
Однако создание формы
- это только начало работы. После ее создания необходимо настроить свойства, как самой формы
, так и ее элементов.
Настройка свойств формы.
Для обработки или сохранения данных, вводимых посетителями Web-странички
, необходимо либо воспользоваться возможностями, предоставляемыми FrontPage Server Extensions
, либо какой-нибудь другой программой, работающей на Web-сервере
.
Но какую бы программу вы не выбрали, вам все равно придется настроить свойства формы и элементов в ней.
Чтобы открыть окно свойств формы, надо:
в меню Вставка
выбрать пункт Форма
, а затем -
или
вызвать контекстное меню к форме и в открывшемся контекстном меню выбрать пункт Свойства формы
.
В результате откроется диалоговое окно Свойства формы
.
1. В поле Сохранение
результатов необходимо указать, что надо будет сделать с данными, введенными в форму
. Вы можете выбрать следующие варианты:
o Отправка Имя файла
- данные будут помещены в указанный файл на Web-сервере
. Этот файл может быть Web-страницей
, которая со временем будет становиться все длиннее и длиннее, или файлом данных, который потом можно будет обработать в Excel, Access
или любой другой программой;
o Отправка Адрес почты
- в этом случае каждый раз при нажатии посетителем Web-странички
кнопки Отправить на форме
будет генерироваться электронное сообщение, которое будет отправляться по указанному вами адресу. В этом сообщении будут содержаться все данные, которые были введены пользователем на Web-страничке.
o В базе данных
- в этом случае данные формы
будут отправлены в базу данных. База должна находиться на Web-сервере
(или быть доступной для него).
2. В поле Свойства
формы необходимо указать имя формы
Режимы просмотра во FrontPage
.
FrontPage
предлагает шесть различных режимов для просмотра содержимого Web-сайта:
Страница,
Папки,
Отчеты,
Переходы,
Гиперссылки,
Задачи.
Для выбора нужного режима можно воспользоваться панелью Представления
, расположенной в левой части экрана, или в меню Вид
на панели инструментов Стандартная
выбрать соответствующий пункт меню.
Страница
В этом режиме осуществляется создание и редактирование Web-страниц.
Здесь можно создавать пустые Web-страницы
и страницы, базирующиеся на шаблонах, назначать страницам темы (набор стилей представления страницы на экране). В этом режимы можно добавлять и форматировать текст, оформлять страницы
с использованием графических и видеоизображений (поддерживается преобразование ряда графических форматов в форматы *.gif, *.jpg и *.png
), добавлять к странице звуковое сопровождение, представлять информацию в таблицах, кадрах и формах и, наконец, создавать гиперссылки. Таков далеко не полный перечень возможностей FrontPage
по редактированию содержимого Web-страниц
.
Папки
В этом режиме можно просматривать структуру Web-узла
(файлы и папки) и управлять ею аналогично тому, как вы это делаете в Windows
, данный режим дает возможность получить более подробные сведения о файлах и папках, чем это предусмотрено в режиме просмотра Страница.
Отчеты
Предоставляет вашему вниманию более десятка отчетов, содержащих разнообразную информацию о Web-узле
, открытом во FrontPage.
Переходы
Предназначен для просмотра иерархии сайта. В этом режиме можно управлять иерархией, перетаскивая прямоугольники (каждый из которых представляет определенную Web-страницу
).
Гиперссылки
Демонстрирует систему гиперссылок, которыми связаны между собой страницы Web-узла
(а также систему гиперссылок на другие узлы), обеспечивает проверку их целостности и возможность изменения.
Задачи
Этот режим предназначен для управления задачами Web-узла
(добавления, удаления, выполнения, установления приоритета выполнения, а также отслеживания состояния задач).
Скачать БЕСПЛАТНО FrontPage можно по следующей ссылке:
http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html
FrontPage является одним из самых популярных визуальных инструментов web-дизайна.Microsoft FrontPage 2003 включает средства для профессионального проектирования, разработки, работы с данными и публикации, необходимые для создания динамических веб-узлов.
FrontPage позволяет как разрабатывать web-сайты в режиме визуального конструктора, без редактирования HTML-кода, так и получать доступ к соответствующему коду, создаваемому во время работы.
Для FrontPage существует большое количество платных и бесплатных дополнительных модулей ( plug - ins ), расширяющих его возможности. Например, оптимизаторы графики Ulead SmartSaver и Ulead SmartSaver Pro встраиваются не только в Photoshop, но и в FrontPage .
Кроме того, существует целая индустрия фирм, разрабатывающих и выпускающих темы для FrontPage . Темы - это стиль оформления , набор фонов, навигационных кнопок и т.д., которые можно применить к страничке или сайту, тем самым значительно ускорив процесс разработки.
FrontPage включает в себя шаблоны сайтов и шаблоны страниц. Инструмент Мастер сайтов на основе выбранного пользователем шаблона сайта формирует набор страниц с ссылками между ними. Пользователю остается заполнить страницы созданного шаблона сайта информацией. Шаблон страницы позволяет выбрать из базы шаблонов требуемый вид страницы и заполнить его информацией.
Главной особенностью FrontPage является то, что этот редактор работает в режиме WYSIWYG (What You See Is What You Get - что видишь – то и получишь), то есть позволяет создавать HTML-страницы в визуальном режиме. Для создания страниц пользователь использует те же приемы и навыки, что и при работе в Microsoft Word.. При этом необходимый код на языке HTML генерируется автоматически.
Веб-узел
Веб-узел – набор связанных между собой информационных онлайновых ресурсов, предназначенных для просмотра через компьютерную сеть с помощью специальных программ – веб-обозревателей. Веб-узел может представлять собой набор документов в электронном виде, онлайновую службу.
Веб-обозреватель (browser, браузер) – программа, используемая для навигации и просмотра различных интернет-ресурсов. Веб-обозреватель считывает HTML-документ и форматирует его для представления пользователю. Наибольшее распространение получили браузеры Microsoft Internet Explorer, Netscape Navigator, Mozilla, Opera.
Веб-узел состоит из отдельных веб-страниц. Структура каждой веб-страницы определяется ее внутренним HTML-кодом. Пользователь может просматривать этот код и работать с ним в панели Код или панели С разделением режима просмотра страниц, однако большая часть работы выполняется в панели Конструктор. Для работы в программе FrontPage не обязательно знать, как создается HTML-код.
Веб-узел вначале разрабатывается на локальном компьютере, а затем публикуется в Интернет. Пользователь не сможет получить доступ ко многим функциям, пока узел не будет опубликован на сервере, где запущен пакет FrontPage Server Extensions.
Типы узлов
Рассмотрим типы узлов, которые можно подготавливать с помощью FrontPage 2003.
Имеется два вида узлов: дисковые узлы и серверные узлы. Дисковые узлы можно запускать на любом компьютере или даже с гибкого диска или компакт-диска. Дисковые узлы поддерживают только базовые функции HTML. Многие веб-компоненты, поддерживаемые программой FrontPage , не действуют на дисковом узле.
Серверные узлы запускаются на веб-сервере , то есть на компьютере, который специально сконфигурирован для размещения ( хостинга ) узлов. При небольших масштабах веб-сервером может быть локальный компьютер или сервер внутренней сети компании. При более крупных масштабах веб-серверы, на которых размещаются корпоративные узлы интернета, обычно включаются в профессиональные пулы серверов , которыми управляет провайдер (поставщик) услуг интернета ( ISP ) или компания по предоставлению веб- хостинга .
Большинство узлов обычно разрабатываются как дисковые узлы. Это означает, что они разрабатываются на локальном компьютере. Затем они публикуются на веб-сервере , либо внутри организации, либо на внешнем хостинге.
Некоторые веб-компоненты FrontPage - это готовые элементы, такие как панели гиперссылок и таблицы содержания. Они действуют только при размещении на странице, которая является частью узла, созданного на основе FrontPage .
Для некоторых компонентов требуется, чтобы узел или веб-страница находились на веб-сервере , где запущен пакет Windows SharePoint Services компании Microsoft.
Другие общие веб-компоненты действуют только на серверном узле, размещенном на веб-сервере с комплектом серверных расширений FrontPage Server Extensions.
Некоторые компоненты получают свое содержимое непосредственно из других узлов, поэтому для них требуется визуализация интернет-соединения.
Возможности серверного администрирования доступны только для серверных узлов, размещенных на веб-серверах, где запущен пакет Windows SharePoint Services или FrontPage Server Extensions.
Чтобы отображать информацию баз данных, узел должен быть размещен на
Выполнила: ст-ка физ-мат. фак-та,
3 курс, отд «информатика»
Меграбян Э.
Научный руководитель: кандидат технических наук,
Дацент кафедры информатики и МПМ,
Богданова М. В.
Ворнонеж
FrontPage и его интерфейс
Запуск редактора……………………………………………………………………………...4
Работа с панелями инструментов……………………………………………………………4
Строка состояния и символы форматирования……………………………………………..5
Перемещение по странице…………………………………………………………………...5
Свойства строницы…………………………………………………………………………...5
Предварительный просмотр………………………………………………………………….7
Основы работы во
Текс…………………………………………………………………………………………….8
Изменение размера шрифта………………………………………………………………….9
Смена шрифта………………………………………………………………………………...9
Изменение цвета текста………………………………………………………………………9
Символы……………………………………………………………………………………...10
Списки………………………………………………………………………………………..10
Создание списка……………………………………………………………………………..11
Превращение сплошного текста в список…………………………………………………11
Изменение стиля всего списка……………………………………………………………...12
Вставка горизонтальной линии…………………………………………………………….12
Форматирование горизонтальных линий………………………………………………….13
Использование декораций…………………………………………………………………..13
Миниатюры для предварительного просмотра……………………………………………14
Создание ссылок на страницы сайтов в Internet…………………………………………..16
Построение таблиц…………………………………………………………………………..16
Инструменты панели таблиц…………………………………………………………...…..17
Остальные кнопки панели таблиц………………………………………………………….19
Вставка таблицы……………………………………………………………………………..20
Изменение свойств таблицы………………………………………………………………..22
Размещение изображений……………………………………………...…………………...23
Коллекция иллюстраций……………………………………………………………………24
Изменение свойств изображения…………………………………………………………..25
Звуки………………………………………………………………………………………….30
Подвижные кнопки………………………………………………………………………….31
Менеджер баннеров…………………………………………………………………………33
Бегущие строки……………………………………………………………………………...35
Изменение параметров бегущей строки…………………………………………………...36
Счетчик визитов……………………………………………………………………………..36
Вставка видеокадров………………………………………………………………………...37
Общие поля страниц………………………………………………………………………...38
Проверка орфографии……………………………………………………………………….40
Шаблоны и мастера
Шаблоны сайтов……………………………………………………………………………..41
Шаблоны страниц…………………………………………………………………………...42
Создание фреймов…………………………………………………………………………...43
Использование шаблонов фреймов………………………………………………………...43
Заказные шаблоны…………………………………………………………………………..44
Заказные шаблоны сайтов…………………………………………………………………..44
Мастера………………………………………………………………………………………45
Мастера сайтов………………………………………………………………………………45
Компоненты о формы
Добавление поискового компонента……………………………………………………….45
Штемпель…………………………………………………………………………………….48
Добавление временного изображения……………………………………………………..50
Добавление временных страниц……………………………………………………………51
Создание формы обратной связи…………………………………………………………...52
FrontPage и его интерфейс.
Запуск Редактора.
Запустив Редактор непосредственно (либо прямо из Microsoft Windows, либо из Проводника Frontpage при нажатии на панели инструментов кнопки Show Frontpage Editor или командой Show Frontpage Editor из меню Tools). В этом случае Редактор откроется с пустым экраном; чтобы открыть нужную страницу, используйте команду Open меню File и приступайте к редактированию.
При запуске Редактор откроет свое собственное окно, в верхней части которого, как в большинстве программ подобного класса, расположены меню и панели инструментов. Когда все панели инструментов видимы, Редактор выглядит так, как показано на рис. 1.
Рис. 1 Общий вид окна Редактора Frontpage.
Поначалу он может показаться сложноватым, но не пугайтесь: в этой главе вы узнаете, для чего предназначены большинство этих кнопок и меню. Если вы умеете пользоваться Excel, вы заметите, что вкладки внизу окна редактирования - Normal (Обычный вид), HTML (Код HTML) и Preview (Предварительный просмотр) - похожи на вкладки рабочих листов. Эти вкладки позволяют увидеть редактируемую страницу с различных точек зрения. Для начала мы будем работать в обычном режиме (вкладка Normal).
Работа с панелями инструментов.
Редактор располагает рядом панелей инструментов, которыми можно управлять через меню View (Вид): Standard (Стандартная), Format (Форматирование), Image (Рисование), Forms (Формы), Advanced (Дополнительно) и Table (Таблица). Когда они все видны, они занимают существенную часть окна Редактора. Поэтому те, что вам не нужны, лучше спрятать. Чтобы скрыть панель инструментов, откройте меню View и уберите галочку напротив имени этой панели. Чтобы показать спрятанную панель, найдите ее имя в меню View и поставьте напротив него галочку, тогда панель появится на том же самом месте, которое она раньше занимала. Приглядевшись, вы увидите в меню View пункты Status Bar (Строка состояния) и Format Marks (Символы форматирования). Этим опциям посвящен следующий раздел данной главы.
Панели инструментов Редактора можно располагать в любом месте экрана. Чтобы передвинуть панель инструментов, щелкните на любом месте панели, не занятом кнопками, и перетащите ее на новое место. Если вы оставите ее где угодно в окне редактирования, то панель будет плавающей. Если такой вариант вас не устраивает, подтащите панель к любому краю окна и оставьте ее там.
Строка состояния и символы форматирования.
Строку состояния, расположенную в самом низу окна Редактора, можно прятать и показывать; для этого служит команда Status Bar меню View.
Редактор в некоторых случаях неявно использует символы форматирования, такие, как знаки абзаца. Чтобы показать или спрятать эти метки на странице, выберите в меню View опцию Format Marks.
Подсказка: Чтобы скрыть или показать символы форматирования, можно воспользоваться кнопкой Show/Hide Paragraph стандартной панели инструментов. На ней изображен символ абзаца.
Перемещение по странице.
Перемещение по содержимому страницы (если оно, конечно, есть) производится традиционным способом с помощью клавиатуры. Например, для прокрутки страницы на один экран вверх или вниз используются клавиши
В Редакторе Frontpage реализованы 25 наиболее популярных клавиатурных комбинаций Microsoft Word, так что пользователи Office будут чувствовать себя в Редакторе, как дома.
Свойства страницы.
Чтобы установить в Редакторе свойства страницы, выберите команду Page Properties (Свойства страницы) в меню File или в контекстном меню, появляющиеся после щелчка правой кнопкой мыши. В диалоговом окне Page Properties, помимо общей информации, типа названия страницы, устанавливаются такие параметры, как фоновый рисунок и фоновый звук, цвет фона, стандартные цвета текста и гиперссылок, поля страницы, а также некоторые переменные. Для редактирования свойств, страница должна быть открыта в Редакторе. В этом разделе мы подробно разберем каждый из этих параметров и начнем со вкладки General (Общие), показанной на рис. 2.
Рис. 2. Диалоговое окно Page Properties, вкладка General.
В текстовом поле Title можно ввести или отредактировать название страницы; поле Base Location предназначено для задания необязательного базового URL страницы. Чтобы установить для ссылок этой страницы целевой фрейм по умолчанию, введите его имя в текстовом поле Default Target Frame или нажмите кнопку Target Frame. Откроется диалоговое окно Target Frame.
В секции Background Sound (Фоновый звук) можно изменить свойства фонового звука; детали этой процедуры будут описаны ниже в разделе "Звуки".
На вкладке Background (Фон), вид которой приведен на рис. 3, задаются параметры фона и цвета различных ссылок.
Рис. 3. Диалоговое окно Page Properties, вкладка Background.
Мастера и шаблоны - эффективное средство создания 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-узла. Эта процедура несколько сложнее, чем создание шаблона страницы, но мы надеемся, что вы без труда освоите ее.
Вордпресс из коробки выводит на главную страницу ленту последних записей. Как поставить на главную статическую страницу, поменять шаблон главной и некоторые другие вопросы мы рассмотрим далее.
Установка статической главной страницы
Это самое простое что можно сделать, покопавшись в настройках. Перейдите на страницу — настройки->чтение /wp-admin/options-reading.php.
Установите статическую страницу или одну из набора страниц вашего сайта, или выберите одну из рубрик, которая будет показываться вместо последних постов. Т.е. тут можно сделать вывод нужной вам рубрики на главную страницу, вместо вывода всего подряд. Раньше это приходилось решать более сложными путями .
Сменить шаблон для главной страницы сайта
Чтобы изменить шаблон для главной страницы, нужно представлять себе немного структуру файлов вашей темы оформления. Начальное представление . В приведенной схеме мы видим разные названия файлов и их очередность, то как их пытается найти и использовать wordpress для разных разделов на вашем сайте.
Редактировать файлы вашей темы можно прямо из админки сайта. В разделе «Внешний вид» (Appearance) есть подраздел «Редактор» (Editor). Там вы увидите список шаблонов выбранной темы оформления (список файлов справа). А также wordpress покажет вам роли этих файлов, которые движок назначает им, исходя из названия каждого файла.
Шаблон frontpage
Если в вашей теме уже есть файл front-page.php , он будет использован как шаблон для главной страницы сайта. Если его нет, то начать можно с копии шаблона page.php , который отвечает за шаблоны страниц сайта (вордпресс оперирует двумя типами публикаций — страницами и записями, не путайте их). Скопируйте page.php с новым именем — front-page.php (в админке сайта этого не сделать).
Как только новый файл попадет в папку с вашей темой, на странице /wp-admin/theme-editor.php он появится в списке и будет подключаться каждый раз, когда вордпресс показывает главную страницу.