Лабораторная работа №28 Создание сайта на основе «Пустого веб–узла»

RSS, Twitter, Vkontakte, Facebook

Microsoft FrontPage 2003

Создание сайта на основе «Пустого веб–узла» в Microsoft FrontPage 2003

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

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

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

Допустим, что Вы решили разработать сайт, на котором будет представлена информация о компании EN101, эту имеющуюся у Вас информацию (скачали с сайта http://lessons-tva.info/zip/site_student.zip и http://lessons-tva.info/zip/logo.zip), можем изложить на трех страницах:

  1. Главная.
  2. О компании En101.
  3. Способы оплаты.

Выберите имя сайта исходя из вида деятельности, например: edu-en101.
Назначьте имена страницам, например:
index – Главная
inform – О компании En101
payment – Способы оплаты
В качестве главной страницы используйте созданную ранее веб-страницу Главная (index)
Создайте структуру сайта, которая представлена на рисунке 1.

Структура сайта
Рис.1

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

28.2. Цель работы

Знакомство с интерфейсом и возможностями Microsoft FrontPage 2003 по созданию  веб-сайта.

28.3. Постановка задачи

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

28.4. Пошаговое  выполнение работы

Выполните следующие действия:

  1. Для создания веб-сайта с помощью приложения FrontPage необходимо открыть окно приложения одним из способов. После чего на экране будет отображаться окно приложения или графический интерфейс FrontPage.
  2. Затем выполните команду Файл / Создать и в отрывшейся области задач «Создание» щелкните мышью на «Другие шаблоны веб – узлов» в разделе «Создать Веб-узел». Откроется окно диалога «Шаблоны веб – узлов», в котором необходимо выделить «Пустой веб – узел». В этом окне диалога укажите расположение нового веб-узла, например, C:\Documents and Settings\Мои документы……\Мои веб-узлы\edu-en101 и щелкнуть ОК. После сохранения сайта на экране в окне приложения будет отображаться новый веб-узел в режиме папки.
  3. Создайте домашнюю страницу для нового сайта. Щелкните мышью на кнопке «Создать страницу» на панели «Содержимое», в результате в окне веб-узла добавится страница index.htm.
  4. Сверните окно FrontPage и скопируйте все содержимое ранее созданной папки EN101 (папку EN101 Вы создали в лаб. работе №27), в которой находятся папка images, страничка index и папку _vti_cnf, которая  формируется автоматически при создании веб-страницы. Вставьте сохраненное содержание папки EN101 из буфера обмена во вновь созданную папку веб-узла edu-en101.
  5. Активизируйте окно FrontPage и дважды щелкните мышью на странице index.htm в открытом окне веб-узла, в результате главная страница откроется в режиме страница, в которой будет отображаться ее содержание.
  6. Создайте структуру сайта, т.е. к главной странице добавьте еще две страницы: inform – О компании En101; payment – Способы оплаты. Для этого перейдите в режим Переходы, выполнив команду Вид/Переходы. Затем  выделите домашнюю страницу и щелкните на кнопке Новая страница на панели Переходы или примените контекстное меню, добавится Новая страница 1. Аналогичным образом добавьте еще одну страницу – Новая страница 2.
  7. Переименуйте новые страницы: Новая страница 1 Новая страница 2. Для этого перейдите в режим папки и с помощью контекстного меню переименуйте имена Новая страница 1 на inform, Новая страница 2 на payment.
  8. С целью единства дизайна страниц сайта скопируйте содержание главной страницы в созданные страницы inform, payment. Для этого откройте главную страницу в режиме Страница и выполните команду «Правка / Выделить все», и щелкните на кнопке Копировать на панели инструментов. Затем перейдите в режим Папки и дважды щелкните на страничке inform, она откроется в режиме Страница, затем щелкните на кнопке Вставить. Содержимое главной страницы скопируется в страницу inform, аналогично скопируйте содержимое главной страницы в страницу payment.
  9. На каждой страничке создайте ссылки для всех пунктов навигации:
    • Главная;
    • О компании En101;
    • Способы оплаты.
      Например, выделите пункт навигации « О компании En101» и с помощью контекстного меню откройте окно диалога «Добавления гиперссылки», в котором выделите inform.htm и щелкните ОК. Аналогично создайте гиперссылки для всех пунктов навигации на других страницах.
  10. На страницах: «О компании En101»; «Способы оплаты» измените содержание в основных ячейках, т.е. введите новый текст и рисунки, которые были подготовлены заранее для этих страниц.
  11. В режиме Код добавьте и заполните метатеги (между тегами <head> и </head>) на страницах: «О компании En101»; «Способы оплаты».
    Например, для страницы «О компании En101» теги заполнены следующим образом:
    <title>О компании En101 </title>
    <meta name="keywords" content=”EN101 компания Ричард Маккалоу”>
    <meta name="description" content="Ричард Маккалоу – основатель и главный Администратор En101 INC">
    <meta NAME="Author" CONTENT=”Владимир Ткаченко”>
    <META content="INDEX, FOLLOW" name=ROBOTS>
  12. Переименуйте заголовки страниц в режиме Переходы. Выделите страницу и с помощью контекстного меню осуществите переименование:
    Новая страница 1 переименовать на «О компании En101».
    Новая страница 3 переименовать на «Способы оплаты».
  13. Сохраните созданный сайт.

28.5. Завершение работы

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