Программа Microsoft Frontpage как способ создания сайта

Использование шаблонов и мастеров Microsoft FrontPage

Теоретическое введение

Назначение и достоинства Microsoft FrontPage

Microsoft FrontPage является программным продуктом из расширенного комплекта Microsoft Office и предназначен для разработки отдельных web-страниц и целых web-сайтов любой сложности. 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.

Чтобы отображать информацию баз данных, узел должен быть размещен на веб-сервере , поддерживающем активные серверные страницы (ASP) и объекты данных ActiveX ( ADO ).

Узлы, созданные на основе FrontPage , могут запускаться на любом веб-сервере , но полноценное функционирование узла может оказаться неосуществимым, пока он не будет размещен на веб-сервере , где инсталлирован комплект серверных расширений FrontPage Server Extensions.

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

Представления HTML-страниц в FrontPage

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

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

Для переключения между режимами просмотра используется панель в нижней левой части окна документа.

Создание web-сайтов на основе шаблонов и мастеров

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

Создание Web-страниц с помощью MS FrontPage. Основные понятия

Вы будете перенаправлены на Автор24

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

Для создания сайта с помощью приложения FrontPage не обязательно знать сам HTML. Во FrontPage можно просто набрать текст, затем поместить его на Web-страницу, расположив где нужно рисунки. С помощью FrontPage создаются эффекты, для которых обычно используются скрипты или программы DHTML.

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

Каждый сайт имеет одну Web-страницу, называемую главной или домашней. Это самая первая страница, встречающая посетителей сайта. С помощью навигации или гиперссылок, пользователь сможет перемещаться по сайту.

Как правило, сайт размещают на Web-сервере, представляющем собой компьютер, предоставляющий доступ к Web-страницам посетителям сайта. FrontPage дает возможность создания сайта в файловой системе компьютера пользователя, а затем публикации его готового на Web-сервере.

Окно приложения FrontPage

После запуска программы FrontPage (Пуск – программы – FrontPage) на экране появляется окно программы, в котором отображена новая страница (нов_стр_1.htm). В области задач отобразится панель Приступая к работе (рис.1).

Готовые работы на аналогичную тему

Окно программы FrontPage содержит: строку заголовка, строку меню, панели инструментов редактирования и форматирования, кнопки быстрого выбора тега (для редактирования и ввода тегов), ярлычки вкладок выбора страниц (для перехода между страницами), рабочее окно, в котором отображена новая страница, панель рисования, кнопки режимов просмотра, индикатор ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатор размера страниц, область задач.

В программе FrontPage можно просматривать документ в одном из четырех режимов: Конструктор, Код, С разделением и Просмотр. В режиме Конструктор можно визуально создать, отредактировать и отформатировать страницу, т.е. ввести текст, добавить рисунки, таблицы аналогично работе в текстовом редакторе. При этом теги языка HTML автоматически добавятся в фоновом режиме, однако кодировка HTML на экране не отобразится.

Читайте также  К чему снятся часы

В режиме Код на экране отобразится вся кодировка и появится возможность прямого редактирования кода HTML, а также ввода новых кодов. На рисунке 2 изображен HTML–код новой пустой страницы в редакторе FrontPage .

В режиме С разделением — на экране отобразится Web-страница одновременно в двух режимах: Коде и Конструкторе. В режиме просмотра Web–страница приобретет вид аналогичный ее отображению в Web–браузере.

Команды, используемые для работы с Web–страницами и Web–узлами, располагаются в меню Вид программы FrontPage (рис.3):

  1. Страница – позволяет выбрать режим просмотра и разработки страниц.
  2. Папки – отображает структуру папок текущего сайта
  3. Удаленный веб-узел – показывает узел, находящийся на сервере сети Интернет.
  4. Отчеты – предоставляют сводку об веб- узле.
  5. Переходы – отображают структуру переходов между страницами сайта.
  6. Гиперссылки – открывается список ссылок текущей страницы.
  7. Задачи – открывается список задач для текущего сайта

Создание новой пустой Web-страницы

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

В окне программы появляется новая пустая страница. Сохраним ее, но прежде в окне Сохранить создадим папку с нужным именем (например, EN), в которой создадим вложенную папку images для рисунков, а потом сохраним страницу в папке EN. Имя странице назначим index, так обозначается домашняя или главная страница. Редактор сохранит страницу с расширением .htm. В результате, в папке EN будут находиться вложенная папка images и файл index.htm.

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

Разработка веб-страницы

Теперь приступим к разработке страницы, которая начнется с ее разметки. Для разметки страницы будем использовать таблицы, можно воспользоваться командой Макеты страницы, расположенной на панели Макеты таблицы и ячейки в области задач. Устанавливаем в области задач Макетные таблицы и ячейки (рис.4).

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

  1. Установим ширину (в точках или процентах) страницы равную 800 точек (ширина первого столбца – 200 точек, ширина второго столбца – 650 точек). Для этого подведем указатель мыши к верхней границе и когда он примет вид наклоненной влево стрелки щелкнем левой кнопкой мыши, появятся раскрывающиеся списки, используя которые можно изменить ширину столбца.
  2. Выравниваем страницу по центру. Установим размер границы, цвет. Для этого щелкнем на раскрывающийся тег таблицы (на панели быстрый вызов тега) и выберем команду Свойства тега, в открывшемся диалоговом окне Свойства таблицы устанавим: Выравнивание по центру, Границы: размер – 1 и цвет – темно-синий (код: 000080).
  3. В ячейках таблицы установим цифры: 1, 2, 3, 4 (эти цифры заменятся содержанием ячеек), чтобы можно было легко ориентироваться. В первую ячейку установим рисунок командой Вставка — Рисунок — Из файла, выбирем рисунок из папки images. Вставим, к примеру, логотип компании, для которой будет разрабатываться сайт.
  4. Установим фон ячеек 1 и 2 в соответствии с фоном логотипа с помощью специальных таблиц и приложений для подбора цвета с его кодом. Чтобы выполнить заливку ячейки цветом нужно щелкнуть на раскрывающийся тег ячейки (на панели быстрый вызов тега) и выбрать команду Свойства тега, затем в открывшемся диалоговом окне Свойства ячейки установить: цвет фона – (например, код: dee7ef).
  5. Во вторую ячейку поместим заголовок сайта. В режиме конструктора введем текст. Выберем, к примеру, шрифт Verdana (самый распространенный для веб-страниц), размер 22пт, цвет темно-синий (код цвета: 000080), выравнивание по центру.
  6. В ячейке 3 разместим навигацию для перехода на другие страницы. Введем текст НАВИГАЦИЯ шрифтом Verdana, размером 14пт, выравнивание по центру. Далее введем текст (шрифт Verdana, размер 10пт): Главная, О компании En, Бизнес-обзор проекта, Способы оплаты, выделим эти строки и щелкнем на кнопке маркеры на панели инструментов форматирования. В результате, получили маркированный список для навигации.
  7. Установим гиперссылку для строки Главная. Выделим строку Главная, щелкнем по ней правой кнопкой мыши и из контекстного меню выберем команду Гиперссылка. В открывшемся диалоговом окне нужно в папке EN выделить файл index и нажать ОК.
  8. Создадим ссылку на партнерские сайты. Установим курсор ниже списка и выберем команду Таблица — Вставить — Таблица, в открывшемся диалоговом окне установим: Строк – 1, Столбцов – 1; Выравнивание – по центру; Зададим ширину: 95%; Зададим высоту: 35 в точках; Границы: размер – 1, цвет–темно-синий (код: 000080); Фон: цвет-темно-синий (код: 000080). Затем щелкнем Применить и ОК. В созданную таблицу введем текст «ПАРТНЕРСКИЕ САЙТЫ», шрифтом Verdana, размером 11пт, выравнивание по центру, цвет белый. Ниже таблицы введем адреса необходимых сайтов и создадим гиперссылки.
  9. Заполним оставшиеся ячейки таблицы аналогичным образом.

Можно воспользоваться написанием кодов для метатегов ( и ):

Создание сайта и веб-страниц в FrontPage

Курс дистанционного обучения:
«Экономическая информатика»
Модуль 3 (1 кредит): Компьютерные сети

Тема 3.1: Сетевые технологии. Локальные вычислительные сети

Тема 3.2: Сетевые технологии. Глобальные сети (WAN)

Тема 3.3: Прикладные программы для создания Веб-сайтов

Тема 3.4: Применение Интернет в экономике и защита информации

3.3. Прикладные программы для создания Веб — сайтов

3.3.4. Создание сайта и веб-страниц в FrontPage

Планирование сайта

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

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

Допустим, что мы решили разработать сайт, на котором будет представлена информация о компании EN101, эту имеющуюся у нас информацию мы можем изложить на четырех страницах:

  1. Главная
  2. О компании
  3. Бизнес-обзор проекта
  4. Способы оплаты

Выбираем имя сайта исходя из вида деятельности, например: lessons-en101.

Назначаем имена страницам:

  • index – Главная;
  • info — О компании;
  • business- Бизнес-обзор проекта;
  • pay — Способы оплаты.

В качестве главной страницы используем созданную ранее веб-страницу Главная (index). Создаем структуру сайта, которая представлена на рисунке.

Подготовим текст в редакторе Word для каждой страницы и рисунки в Adobe Photoshop в форматах GIF, JPEG или PNG с разрешением 72 пикс/дюйм, кроме того, можно использовать скрипты.

Далее можно зарегистрировать домен второго уровня в одной из зон (ua, ru, com, net, info и т.д.) и после разработки сайта выбрать платный хостинг, который устраивает по скорости доступа и предоставляет необходимые услуги для эффективной работы сайта. Если мы будем располагать сайт на бесплатном хостинге, то можно выбрать, например, хостинг на сервере narod.ru. Для этого необходимо будет зарегистрироваться на сервере и получить бесплатный хостинг. В этом случае у Вас будет домен третьего уровня, например: lessons-en101.narod.ru.

Создание сайта с помощью приложения FrontPage

1. Для создания сайта с помощью приложения FrontPage необходимо открыть окно приложения одним из способов. После чего на экране будет отображаться окно приложения или графический интерфейс FrontPage, в котором будет отображаться предыдущий сайт или страница. Для выхода из предыдущего сайта или страницы в FrontPage надо выполнить команду «Файл/Закрыть» или «Файл/Закрыть узел», либо то и другое, если были открыты узел и страница.

Затем выполняем команду Файл / Создать и в отрывшейся области задач «Создание» щелкаем мышью на «Другие шаблоны веб – узлов» в разделе «Создать Веб-узел». Откроется окно диалога «Шаблоны веб – узлов», в котором необходимо выделить «Пустой веб – узел», далее указать расположение нового веб-узла (например, D:Documents and SettingsТВАМои документыМои веб-узлыlessons-en101) и щелкнуть ОК. На рисунке представлен фрагмент окна диалога «Шаблоны веб – узлов», в котором указан адрес нового сайта.

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

2. Создание в FrontPage домашней страницы для нового сайта. Создание домашней страницы в FrontPage можно осуществлять по-разному. Например, можно щелкнуть на кнопке «Создать страницу» на панели «Содержимое», в результате в окне веб-узла добавится страница index.htm, которая показана на рисунке

3. Затем копируем содержимое ранее созданной папки EN101, в которой находятся папка images и страничка index (папка _vti_cnf формируется автоматически при создании веб-страницы). Содержимое папки EN101 представлено на рисунке.

Вставляем сохраненное содержание папки EN101 из буфера обмена во вновь созданную папку веб-узла lessons-en101, которая представлена на рисунке.

4. Далее дважды щелкаем на странице index.htm в открытом окне веб-узла, в результате главная страница откроется в режиме страница, которая показана на рисунке.

Таким образом, в качестве домашней страницы в новом сайте использована ранее созданная страница index.htm (Английский язык в Интернет). Можно создавать главную страницу и другими способами, изложенными в разделе 3.3.2. Знакомство с программой FrontPage.

5. Создаем в редакторе FrontPage структуру сайта , т.е. к главной странице добавим еще три страницы: info — О компании; business — Бизнес-обзор проекта; pay — Способы оплаты. Для этого надо перейти в режим Переходы, выполнив команду Вид/Переходы. Затем необходимо выделить домашнюю страницу и щелкнуть на кнопке Новая страница на панели Переходы или применить контекстное меню, добавится Новая страница 1. Аналогичным образом добавляем еще две новые страницы. Структура сайта представлена на рисунке.

6. Переименование Новых страниц в FrontPage. Переходим в режим папки и с помощью контекстного меню меняем имена Новая страница 1 на info, Новая страница 2 на business, Новая страница 3 на pay.

7. С целью единства дизайна страниц сайта копируем содержание главной страницы в созданные страницы info, business, pay. Для этого открываем главную страницу в режиме Страница и выполняем команду «Правка / Выделить все», и щелкаем на кнопке Копировать на панели инструментов. Переходим в режим Папки и щелкаем дважды на страничке info, она откроется в режиме Страница, затем щелкаем на кнопке Вставить. Содержимое главной страницы скопируется в страницу info, аналогично копируем содержимое главной страницы в остальные две страницы.

8. На каждой страничке сайта создаем ссылки для всех пунктов навигации:

  • Главная;
  • О компании;
  • Бизнес-обзор проекта;
  • Способы оплаты.

Например, выделяем пункт навигации «Бизнес-обзор проекта» и с помощью контекстного меню открываем окно диалога Добавления гиперссылки, в котором выделяем business.htm и щелкаем ОК. Аналогично создаем гиперссылки для всех пунктов навигации на всех страницах. На рисунке представлен фрагмент окна диалога Добавления гиперссылки.

9. Далее на страницах: «О компании»; «Бизнес-обзор проекта»;»Способы оплаты» изменим содержание в некоторых ячейках, т.е. введем новый текст и рисунки, которые были подготовлены заранее для этих страниц.

10. Добавляем и заполняем метатеги (между тегами и ) на страницах: «О компани»; «Бизнес-обзор проекта»; «Способы оплаты» в режиме Код.

Например, для страницы «О компании» теги заполнены следующим образом:

  • О компании En101

11. Переименование заголовков страниц в режиме Переходы. Выделить страницу и с помощью контекстного меню осуществить переименование:

  • новая страница 1 переименовать на «О компании».
  • новая страница 2 переименовать на «Бизнес-обзор проекта».
  • новая страница 3 переименовать на «Способы оплаты».

В результате разработки получим сайт, который состоит из четырех веб-страниц. Этот сайт, созданный с помощью FrontPage в файловой системе ПК, можно разместить на веб-сервер в сете Интернет или Интранет.

Для разработки собственного сайта в FrontPage скачайте:

  1. Образец созданного сайта — Скачать.
  2. Образец созданной веб-страницы — Скачать.
  3. Приложение для подбора цвета — «Color» — Скачать.
  4. Книга Book-html. Азы HTML — Скачать.
  5. Текст для создания страницы и сайта — Скачать.
  6. Рисунки для создания страницы и сайта — Скачать.

Copyright

© Обучение в интернет, .
Обратная связь

Microsoft FrontPage для Windows последняя версия: 2003 , обновление от 13.08.2020

  • Оставить отзыв
  • Сообщить об ошибке

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

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

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

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

Окна для работы в прикладном FrontPage

После первого пуска программного обеспечения FrontPage через адрес «Пуск-программы- FrontPage.exe) на экране пользовательского компьютера откроется приложение в окне, которое автоматически создаст «новую страницу» в формате htm, при этом программа отобразиться в панели задач.

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

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

В режиме «Код» на экран будут выводиться все основные кодировки, которые были включены в состав текста или HTML-страниц. Пример можно просмотреть на рисунке ниже:

Режим «С разделением» позволит отобразить на экране весь конечный вариант веб-страницы, при этом можно одновременно просматривать основную html-кодировку. При необходимости реально вносить правки и сохранять документ.

Все ключевые пользовательские команды для работы с вебсайтом или отдельными узлами расположены во вкладке «Вид» программы приложения FrontPage:

  • Страница – это режим для редактирования и конечного просмотра страниц.
  • Папки – открывает структуру папок сайта.
  • Удаленный узел – показывает узлы, находящиеся в сети Интернет.
  • Отчеты – отображение сводки о конкретном Веб-документе.
  • Переходы – демонстрация структуры переходов.
  • Гиперссылки – списки и ссылки текущей страницы.
  • Задачи – показывает конкретные задачи для персонального сайта.

Создание простых Веб-страниц через приложение FrontPage

Новая пустая web-страница

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

Шаблоны FrontPage для новой страницы

Создать креативную новую страницу возможно на базе уже готовых шаблонов FrontPage. Для создания потребуется воспользоваться командой «Другие шаблоны страниц», которая расположена в области задач. На экране пользователя отобразятся все основные команды и заготовки. Шаблоны располагаются по выделенным категориям.

Создание страницы на базе готовых веб-страниц

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

Создание комплексного сайта в FrontPage

Новый пустой узел или веб-страница

Чтобы создать новый вебсайт требуется выполнить «Файл-Создать» и выбрать соответствующий шаблон узла. В появившемся окне можно отобрать все ключевые параметры для страницы и выделить пустой web-узел. Примерное отображение узла показано на рисунке:

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

Требуется двойное нажатие на странице левой кнопкой мышки, после чего откроется режим конструктора для правки.

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

Сайт на базе шаблонов FrontPage

Чтобы создать отдельный вебсайт на базе шаблонов FrontPage потребуется выполнить направление «Файл-Создать» и выбрать определенный пакет с открытием диалога «Шаблоны веб-узла».

Следует выбрать нужный тип шаблона или рабочий мастер создания сайта.

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

Практическая работа «Создание Web-сайта в программе FrontPage 2003»

Практическая работа

  • Создайте папку Мой сайт в своей папке.
  • Запустить программу FrontPage (Пуск R Все программы R Microsoft Office — Microsoft Office FrontPage2003).
  • Создайте новый сайт Файл —Создать. В Области задач (окно справа) щелкните на ссылке — ОдностраничныйWeb-узел.
  • В открывшемся окне Шаблоны веб-узлов щелкните на кнопке Обзор, откройте в этом окне в строке Папка —Мой компьютер — Общие документы, найдите свою папку и в ней выделите одним щелчком папку Мой сайт и нажмите кнопку Открыть.
  • В этом же окне в списке шаблонов выберите Одностраничный Webузели щелкните ОК.
  • Откройте первую страницу сайта, дважды щелкнув имя index.htm в списке папок.
  • Щелкните правой кнопкой мыши в любом месте страницы и в контекстном меню выберите Свойства страницы — вкладку Общие и в строке Название введите имя страницы (например, Главная страница) — ОК.
1).
2). 3). 4).
5). 10)
6).
7).
8).
9)
  • Вставьте таблицу из 3 столбцов и 7 строк. Для этого в меню Таблица выберите команду ВставитьТаблицу, задайте количество строк — 7, столбцов — 3. В разделе Границы введите размер 0, щелкните ОК.
  • Объедините ячейки, как показано на рисунке.
  • Уменьшите размер левой колонки таблицы (потянуть за правую границу колонки влево).
  • Сохраните созданную страницу (меню Файл — Сохранить)
  • Вставка рисунка в качестве фонового изображения. В меню Формат щелкните Фон. В открывшемся окне перейдите на вкладку Форматирование и щелкните кнопку Обзор. Далее Мои документы — Мои рисунки — Рисунок 1. Выделите нужный файл — ОткрытьОК. (Чтобы просмотреть имеющиеся рисунки, на панели инструментов окна Рисунок нужно щелкнуть на кнопке Представления и выбрать Эскизы)

  • Введите в строку 1 таблицы заголовок страницы Мой город. Для заголовка можно использовать объект Word Art.
  • Вставьте рисунок в ячейку 2 . Для этого щелкните левой кнопкой мыши внутри данной ячейки. В меню Вставка выберите Рисунок, а затем Из файла. В открывшемся окне Рисунок в строке Папка выберитеМои документы — Мои рисунки — Наш грод. Выделите файл gerb и щелкните ОК. Аналогично вставьте рисунок в ячейку 4.
  • В строке 9 создайте бегущую строку. Для этого щелкните левой кнопкой мыши внутри данной строки. В меню Вставка выберите Веб-компонент — эффект бегущая строка — Готово. В строке Текст введите Комсомольк-на-Амуре — город, в котором я живуи щелкните ОК.
  • Просмотрите получившуюся страницу, щелкнув в нижней части окна на кнопке Просмотр.
  • Вернитесь в режим Конструктор, щелкнув на соответствующей кнопке.
  • Внесите изменения в созданные элементы (размер, расположение на странице, цвет), если это необходимо.
  • Введите в ячейку 3 текст стихотворения:

Я на небо взгляну — и утонет мой взор,
Я как будто лечу, рассекая простор.
Я на сопки взгляну — запоёт тут душа
До чего же тайга хороша, хороша!
Я увижу Амур — и на сердце теплей,
И спокойнее как-то, и веселей.
Среди этой природы, средь такой красоты/
Вырос город надежды и город мечты.
В Комсомольске живу я, и этим горжусь,
Сделать краше и лучше свой город стремлюсь.
Е. Смирнова

  • Выполните форматирование текста.
  • Сохраните созданную страницу (меню Файл — Сохранить)
  • Разбейте ячейку 10 на 4 столбца (установите курсорвнутри ячейки, щёлкните правой кнопкой мыши, выберите в контекстном меню команду Разбить ячейки, задайте нужное количество столбцов).
  • Вставьте рисунки в образовавшиеся ячейки. Смотрите образцы страниц в папке Temp на Server — Внешний вид страниц.
  • Создание активной кнопки:
  1. Установите курсор внутри ячейки 5.
  2. Вставка выберите Веб-компонент — эффект интерактивная кнопка — Готово
  3. В открывшемся окне Меняющаяся кнопка выберите вид кнопки, в поле Текст введите текст На главную
  4. Установите стиль шрифта надписи кнопки, щелкнув вкладку Шрифт. Здесь же можно выбрать Цвет кнопки Исходный, Цвет при наведении, Цвет при нажатии. На вкладке Рисунок щелкните переключатель Использовать для кнопки формат GIF и прозрачный фон.
  5. Скопируйте эту кнопку в ячейки 6,7 и 8.
  6. Измените параметры на второй кнопке. Для этого щелкните на ней правой кнопкой мыши — команда Свойства кнопки. Текст На главную замените на История. Щелкните ОК.
  7. Аналогично измените параметры на третьей и четвёртой кнопке. Текст На главную замените на Памятники и Предприятия соответственно.
  • Сохраните созданную страницу (меню Файл — Сохранить)
  • Создайте вторую страницу сайта.
  1. Перейдите на вкладку Веб-узел.
  2. Выделите строку index.htm одним щелчком левой кнопки мыши и скопируйте ее. В этом же окне появилась еще одна строка — index_копия(1).htm. Щелкните правой кнопкой мыши на имени, выберите команду Переименовать. Замените имя index_копия(1).htm на st2.htm Нажмите клавишу Tab.
  3. Замените текст названия Главная страница на История города.
  4. Двойным щелчком мыши откройте скопированную страницу st2.htm
  • Замените заголовок страницы Мой город на Это нашей истории строки.
  • Удалите стихотворение, которое вводили на Главной странице. Вместо него введите текст:

10 мая 1932 г. С пароходами «Колумб» и «Коминтерн» высадилась первая партия комсомольцев — строителей завода и будущего города.

16 июля 1932 г. Вступил в строй лесозавод — первое промышленное предприятие Комсомольска.

10 декабря 1932 г. Президиум ВЦИК постановил переименовать село Пермское Нижне-Тамбовского района в город Комсомольск-на-Амуре.

26 мая 1933 г. Начато строительство завода «Амурсталь».

25 марта 1936 г. Сдана в эксплуатацию телефонная станция, на 600 абонентов.

12 июня 1938 г. Судостроители Комсомольска заложили первое судно.

15 февраля 1942 г. Завод «Амурсталь» вступил в строй.

Октябрь 1949 г. Сдан в эксплуатацию первый жилой микрорайон — 15-й квартал.

1 сентября 1954 г. Открыт педагогический институт.

5 декабря 1961 г. Прошли трамваи по новой линии: площадь Металлургов — Дзёмги.

10 июня 1967 г. Президиум Верховного Совета СССР наградил Комсомольск-на-Амуре орденом Ленина.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: