Программа frontpage: Способы создания WEB-страниц в FrontPag

Умение размещать информацию в глобальной сети Интернет, понимать идеологию сайтостроительства, способность ориентироваться в средствах создания сайтов являются требованием времени. Современный учитель, при разработке электронного учебного пособия должен четко понимать, что такое веб-узел (веб-сайт), веб-страница и  иметь представление о средствах создания сайтов. Примем за основу следующие определения:

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

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

Домашняя (главная) страница сайта — первая страница, появляющаяся при  загрузке сайта в окно обозревателя.

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

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

Используя самую простую классификацию, можно выделить следующие два типа веб-редакторов:

•WYSIWYG-редакторы — («What You See Is What You Get» — «Что видишь, то и получишь») — визуальные редакторы. Наиболее популярными визуаль­ными редакторами сегодня являются Micromedia Dream Weaver и Microsoft

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

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

1. Определите тему сайта (например, «Профильное обучение в школе»). Рабо­тая над темой сайта, хорошо продумайте его информационное содержание.

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

3.  Создайте папку для хранения файлов сайта (например, Site), в которой соберите необходимый текстовый и графический материал (необходимо оптимизировать объем и количество графических файлов, предназначенных для размещения на страницах вашего сайта). Не используйте символы русского алфавита в именах тех файлов, которые вы включаете в состав веб-узла, так как многие операционные системы серверов сети Интернет работают только с англоязычными именами.

4.  Определите программное средство для создания сайта (например: Блокнот, Adobe Dreamweaver, Microsoft FrontPage  и др.).

 6.  Выполните содержательное наполнение созданных макетов веб-страниц.

7. Протестируйте созданный сайт в наиболее распространенных браузерах (на­пример: Internet Explorer,  GoogleChrom,  Mozilla Firefox, Opera и др.).

8.     Устраните выявленные при тестировании неточности и ошибки.

9.  Опубликуйте сайт в Интернете (например, можно разместить сайт на бес­платных хостингах: http://www.narod.ru, http://holm.ru, http://h2.ru).

10. Зарегистрируйте сайт в популярных поисковых системах (например: www.yandex.ru, www.rambler.ru, www.aport.ru).

Отметим, что в указанной технологической цепочке п. 5 и 6 часто переставляют местами, так как многие сайтостроители предпочитают начинать работу сразу с создания отдельных веб-страниц и только потом разрабатывают систему навигации по страницам сайта.

Любой сайт имеет свою главную страницу (index.html).

Мы предлагаем начать разработку сайта с создания его макета средствами HTML- редактора Microsoft FrontPage 2003.

Программа FrontPage 2003 включена в комплекс приложений Microsoft Office XP.
Запуск редактора FrontPage осуществляется с помощью команды Пуск, Программы, Microsoft Office XP, Microsoft FrontPage 2003.

Интерфейс FP аналогичен интерфейсу других программ Microsoft Office, и если  вы использовали текстовый процессор Microsoft Word, то без труда освоитесь с  работой по созданию и наполнению содержанием веб-страницы средствами FP.

Возможности программы Microsoft FrontPage 2003

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

·   Для включения в веб-узел объектов Macromedia Flash достаточно просто перетянуть его в рабочую область. FrontPage 2003 предоставляет диалоговое окно, так что можно определить свойства Flash-фильма, дважды щелкнув его. FrontPage 2003 поддерживает написание сценариев для Flash-объектов с помощью средств разработки сценариев.

·         Имеется возможность выбора редактора для работы с конкретным элементом данных при его редактировании. Например, если имеется несколько GIF-изображений, некоторые из которых являются фотографиями, а некоторые – диаграммами, можно редактировать фото с помощью Adobe PhotoShop, а для диаграмм использовать Microsoft Office Visio®, автоматически выбирая редактор при редактировании файла.

· Динамические веб-шаблоны позволяют определять разделы веб-узла, доступные для редактирования. Имеется возможность создавать многочисленные шаблоны, каждый из которых содержит множество областей данных, и применять эти шаблоны к страницам собственного веб-узла. Пользователь не может изменять те части страницы, которые определяются шаблоном. При обновлении файла шаблона внесенные изменения автоматически распространяются на страницы, связанные с этим шаблоном. Если области отредактированы в шаблоне, достаточно просто воспользоваться FrontPage 2003 для применения изменений.

          Более того, веб-шаблоны совместимы по синтаксису с шаблонами Macromedia Dreamweaver 4, поэтому можно легко        перенести веб-узел, созданный с помощью Dreamweaver 4, во FrontPage 2003 или работать над узлами совместно с пользователями Macromedia Dreamweaver.

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

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

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

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

·        Улучшенные темы во FrontPage 2003 используют каскадные таблицы стилей (CSS – Cascading Style Sheets) вместо HTML, поэтому файлы имеют меньший размер, более прозрачны и проще в управлении и изменении. Страницы с HTML-темами, применявшиеся
в предыдущих версиях, по-прежнему работают во FrontPage 2003.

· Средства работы со слоями

Инструменты кодирования

· Разделенное окно состоит из областей «Конструктор» и «Код». При редактировании в представлении «Конструктор» код обновляется автоматически, то есть можно контролировать изменение кода и использовать эту функцию в качестве инструмента самообучения. При непосредственном редактировании кода можно вручную обновлять представление «Конструктор», нажимая клавишу F5, для внесения пакета изменений за один раз.

· Быстрый выбор и изменение тегов обеспечивают простой выбор, редактирование и перемещение тегов. В представлении «Конструктор» вы можете просматривать структуру тегов HTML фрагмента страницы, в котором расположен курсор и управлять тегами. При работе на странице с несколькими вложенными таблицами выбор конкретной таблицы или определенных ячеек может представлять некоторые трудности, а возможность быстрого выбора тегов позволит быстро находить нужный элемент.

·         Быстрый редактор тегов облегчает создание и изменение тегов. Выделите текст и отредактируйте теги, которые окружают текст, заключите текст в новый тег, вставьте новый HTML-текст или удалите тег.

· Интеллектуальный поиск и замена представляет собой быстрый поиск и замену атрибутов или тегов по всему узлу или на конкретных страницах. Запросы могут сохраняться для дальнейшего использования или для передачи другим авторам. Это позволяет выполнять обновления веб-узла быстро и с большой точностью. Например, можно указать правило «найти все страницы на узле, у которых отсутствует мета-тег ключевого слова, и добавить тег ключевого слова перед тегом </head>».

·         Оптимизация HTML-кода во FrontPage 2003 может выполняться двумя различными способами.

·         Можно почистить HTML-код во время разработки, выбрав команду Оптимизировать HTML-код в меню Сервис. В этом случае FrontPage автоматически чистит код, включая оптимизацию HTML-кода, созданного в других программах; удаление «пустых мест», избыточных тегов, комментариев, пробелов и векторной графики.

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

·        Технология Microsoft IntelliSense® служит для уменьшения ошибок при написании программного кода. Средство IntelliSense включает функцию завершения оператора и показывает параметры, доступные для набираемого кода (точно также как в системе разработки Microsoft Visual Studio). Код IntelliSense используется для HTML, CSS (каскадные таблицы стилей), XSL (расширяемый язык таблиц стилей), JScript, VBScript, JavaScript и ASP.NET.

·  Чистый HTML-код не содержит избыточного кода, генерируемого Microsoft Word или другими програм­мами подготовки кода веб-узла.

·    Фрагменты кода можно сохранять и вставлять их с помощью страницы из специальной библиотеки фрагментов кода. Эти Фрагменты кода могут быть любыми элементами, вставляемыми в представлении «Код» (HTML, CSS и т. д.).

· Элементы управления ASP.NET. Во FrontPage 2003 поддерживается предварительный просмотр элементов управления ASP.NET, предоставляя возможность работы с системой разработки Microsoft Visual Studio. Это позволяет предварительно просматривать, перестанавливать и изменять размеры элементов управления ASP. NET и использовать технологию IntelliSense для написания сценариев во встроенных элементах управления ASP.NET. Таким образом, можно легко подключать, настраивать или даже назначать новые элементы управления.

· Разработчик JScript позволяет добавлять функцию интерактивности, не требуя написания ни единой строки кода. Достаточно выбрать из списка предлагаемых так называемых функций Поведения любую вам понравившуюся и FrontPage сделает всё остальное сам.

Расширенные возможности:

· Поддерживаемые службой Windows SharePoint веб-узлы, управляемые данными

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

·                     Каталог источников данных позволяют легко размещать представления данных на страницах данного веб — узла. Такой каталог содержит источники данных, которые уже являются частью веб-узла (например, списки на веб-узлах, основанные на службах Windows SharePoint Services, библиотеках документов и любых XML-файлах веб-узла) и позволяет настраивать любые другие источники данных, с которыми необходимо работать в режиме WYSWYG. Данный каталог поддерживает работу с:

                   · данные служб Windows SharePoint Services;

                   · XML-файлы;

                   · веб-службы или URL-адреса, которые возвращают XML;

                   · источники данных OLEDB.

·    Средствами XML во FrontPage 2003 теперь можно создавать и редактировать файлы XSLT для просмотра XML-данных. Возможна работа с файлами Microsoft Word и XML-файлов, а также URL-адресов, которые возвращают данные. FrontPage 2003 включает в себя все средства, необходимые для обработки и форматирования источников XML-данных. И, к тому же, можно сохранять результаты из HTML-форм в XML-файлах на своем веб-узле и создавать просмотры этого файла XML-данных.

·  Динамическое контекстное форматирование отображает и скрывает элементы или выполняет переформатирование в зависимости от значений данных или положения указателя в окне.

·        Страницы веб-разделов с помощью галереи веб-частей Microsoft Office можно соединять для изменения данных или форматирования в одном веб-компоненте при изменении материалов или некоторой части другого веб-компонента. Это позволяет создавать сложные окна просмотра данных, где посетитель выбирает категории из одного веб-раздела и сведения для этой категории отображаются в другом веб-разделе. Вы можете также поместить данные в зоны веб-компонента, которые определяются на страницах. Затем пользователи вашего узла смогут поместить веб-компоненты в эти зоны в обозревателе даже без запуска FrontPage 2003.

К концу этого урока вы должны в состоянии: 

2. Создайте веб-страницу с помощью FrontPage.

3. Загрузите веб-страницу с FrontPage в BSU Веб-пространство.

4. Перейдите на страницу, опубликованную в BSU. Сервер расширений FrontPage.

5. Повторно откройте недавнюю сеть.

6. Найдите дополнительную справку и руководства.

Введение

Microsoft FrontPage поставлялся в комплекте с некоторыми выпусками Microsoft Office. Однако Microsoft прекратила выпуск этого продукта, заменив его с очень похожим программным пакетом под названием Expression Web. С целью в этом уроке термин «FrontPage» здесь и далее будет относиться к обоим пакетам.

FrontPage — это широко используемый программный пакет для создания и публикация веб-страниц и веб-сайтов. Это одна из многочисленных программ, которые могут быть используется для этой цели. В этом уроке предполагается, что вы решили использовать FrontPage для публикации веб-страниц в Государственном университете Болла, купил, установил на твоем компьютере.

Вместо использования этого урока вы можете предпочесть более полный и лучше иллюстрированный но сейчас немного устарело введение в использование FrontPage в Государственном университете Болла; пожалуйста, посетите учебник доступен в Университетских вычислительных службах БГУ здесь (необязательно):

www.bsu.edu/web/fp_tutorial/old-mainpage.htm

Это руководство было написано до принятия компанией Ball State iWeb. сервер. Поэтому игнорируйте информацию о настройке учетной записи (если она не была обновлена для iWeb) и просто посмотрите разделы создания страниц.

Вычислительные службы Университета штата Болл

также опубликовали «Технические клипы». для поддержки FrontPage (вам может быть предложено установить Flash Player, требуется для просмотра этих клипов):

www.bsu.edu/techclips/microsoft_frontpage_2003.htm

Microsoft Expression Web поддерживается краткими руководствами и обучающие видео от Microsoft по адресу:

www. microsoft.com/expression/kc/product.aspx?key=web

Если вы используете Microsoft FrontPage 2003, ознакомьтесь с интерактивным руководством Microsoft. (со звуковой дорожкой) здесь.

Если вы используете Microsoft FrontPage 2002 (XP) и хотите учебник, вы можете скачать один из Microsoft здесь:
office.microsoft.com/downloads/2002/FPT2002.aspx

---

Создание веб-пространства

Убедитесь, что вы создали учетную запись в расширениях BSU FrontPage. Веб сервер. Инструкции для этого можно увидеть здесь:
techweb.bsu.edu/jcflowers1/rlo/webspace.htm

---

Открытие вашего веб-пространства внутри Первая страница

Хотя есть несколько способов начать работу, я рекомендую вам начать открыв FrontPage, но не открывать новую страницу . Вместо этого выберите Файл, Открытый Интернет . (В программе FrontPage 2003 нажмите «Файл», «Открыть сайт ».) Когда вас попросят указать имя (или местоположение) Интернета, введите следующее, где «имя пользователя» заменено вашим именем пользователя BSU:

Если у вас есть учетная запись iWeb в БГУ:
http:// имя пользователя .iweb.bsu.edu

Если у вас есть учетная запись на старом сервере FrontPage Extensions в BSU:
. http://publish.bsu.edu/ имя пользователя /

---

Создать страницу

Теперь вы можете щелкнуть значок «Новая страница» или «Файл», «Новый», «Страница», и если вы находитесь в Представление «Страница», вскоре вы должны увидеть пустую страницу, которая называется примерно так «new_page_1. htm» в правой части окна.

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

Попробуйте добавить изображение. Нажмите «Вставить», «Изображение», «Из файла», чтобы вставить изображение из ваш жесткий диск на страницу.

Создайте гиперссылку, выделив слово или изображение и нажав «Вставить». Гиперссылка. Вставьте URL целевой страницы в окно. Если ты создавая внутреннюю гиперссылку на закладку, сначала выделите слово в место назначения и выберите «Вставить», «Закладка», затем выделите текст, который нужно с гиперссылкой и Вставить, Гиперссылка, Поместить в этот документ.

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

---

Сохраните или загрузите свою страницу

Нажмите «Файл», «Сохранить как» и дайте файлу подходящее имя на вашем Веб-пространство. Не используйте пробелы или не буквенно-цифровые символы, кроме подчеркивание или дефис (если необходимо) и точка перед расширением. Это рекомендуется, чтобы ваша страница заканчивалась на «.htm». Можно сохранить свою страницу либо на локальный диск, либо сохранить его в своем веб-пространстве, на которое ссылается как «публикация».

---

Перейти на свою страницу

Откройте веб-браузер (Internet Explorer или Netscape Navigator) и перейдите к твоя страница. Введите следующий адрес:

Если у вас есть учетная запись iWeb в BSU:
http:// имя пользователя . iweb.bsu.edu/ имя файла.ext

Если у вас есть учетная запись на старом сервере FrontPage Extensions в BSU:
http://www.bsu.edu/web/ имя пользователя / имя файла.ext

Обязательно замените «имя пользователя» своим именем пользователя BSU. Также замените «filename.ext» с именем и расширением вашего файла. Например, мой имя пользователя jcflowers1, и у меня есть биографическая информация в моем веб-пространстве, где она называется вита.хтм. Чтобы просмотреть его в моей старой учетной записи сервера, я бы перешел по адресу:

.

http://techweb.bsu.edu/jcflowers1 /vita.htm

(Обратите внимание, что для более короткого URL-адреса (т. е. веб-адреса) вы можете указать «Интернет» вверх перед:

http://techweb.bsu.edu/jcflowers1 /vita.htm

---

Повторное открытие Интернета в FrontPage

В следующий раз, когда вы откроете FrontPage, вы можете выбрать «Файл», «Последние веб-сайты». и выберите свое веб-пространство. Теперь, когда вы дважды щелкните имя файла в Список папок, вы можете отредактировать файл, а нажатие кнопки «Сохранить» автоматически загрузит его. в ваше веб-пространство, перезаписав предыдущую версию.

---

Учебники и помощь

FrontPage содержит собственные справочные функции, а также учебник там.

Microsoft предлагает интерактивное онлайн-руководство со звуком по использованию Первая страница 2003 г. здесь, и вы можете продолжить серию уроков о веб-сайте дизайн, планирование и другие темы в рекомендованном порядке. Или вы можете нажать по ссылке в левой части страницы, чтобы перейти к разделу «Как создать FrontPage Сайт.»

Список надстроек, обновлений и других загрузок Microsoft для FrontPage можно найти по адресу:
office.microsoft.com/en-us/assistance/CH7

031033.aspx

Как уже отмечалось, здесь есть старое руководство по UCS:
www. bsu.edu/web/fp_tutorial/old-mainpage.htm

Вычислительные службы Университета штата Болл

также опубликовали «Технические клипы». для поддержки FrontPage (вам может быть предложено установить Flash Player, требуется для просмотра этих клипов):
www.bsu.edu/techclips/microsoft_frontpage_2003.htm

Существует ряд других учебных пособий и руководств, которые помогут вам с основными и особенности FrontPage. Вы можете найти некоторые из них в Интернете с помощью простого поиски. Но ничто не заменит просто пробовать разные вещи. Быть творческий. Посмотрите на варианты в меню «Вставка».

---

Просмотр кода

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

---

Сноска

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

«Использование FrontPage для создания и публикации веб-страниц в Ball State»
Вся информация может быть изменен без уведомления.
© Джим Цветы
Технологический факультет , Мяч Государственный университет
«) // завершение скрытия скрипта —>

Преимущества

Недостатки

Первая страница

• Функции управления сайтом, такие как проверка неработающих ссылок
• Гибкие функции публикации
• Предварительный просмотр в браузере до сохранения
• Создать кадры
• Жертвенные столы
• Интеграция с Microsoft Office
• Можно вставить множество расширенных функций, поэтому вам не нужно писать сценарии их себе

• За это нужно заплатить
• Комплекс
• Вставляет нестандартный код для использования своих специальных компонентов
• Размер сайта будет больше из-за дополнительных папок и файлов для траки и т. д.
• Для расширенных функций требуется специальное программное обеспечение, называемое Расширения сервера FrontPage в Интернете сервер

FrontPage Express

• Бесплатно
• Простой интерфейс
• Может нормально обрабатывать базовый HTML

• Недоступно для некоторых версий Windows
• Не является частью более новых версий Internet Explorer
• Обычно уничтожает непонятный код из скриптов. или другие редакторы HTML
• Невозможно работать с фреймами
• Неудобно работать с
• Очень ограниченная справка