Лабораторная работа №28
28.1. Планирование веб-сайта
Планирование сайта является одной из самых сложных задач. Как правильно расположить на страницах будущего сайта имеющуюся у Вас информацию? Какова должна быть структура сайта? Какие страницы должен иметь сайт? Какой дизайн должны иметь страницы сайта? Какая должна быть навигация по сайту?
Эти и многие другие проблемы, связанные с разработкой сайта, должны быть решены до применения прикладных программ для разработки сайтов.
Допустим, что Вы решили разработать сайт, на котором будет представлена информация о компании EN101, эту имеющуюся у Вас информацию (скачали с сайта http://lessons-tva.info/zip/site_student.zip и http://lessons-tva.info/zip/logo.zip), можем изложить на трех страницах:
Главная
О компании En101
Способы оплаты
Выберите имя сайта исходя из вида деятельности, например: edu-en101.
Назначьте имена страницам, например:
index – Главная
inform – О компании En101
payment – Способы оплаты
В качестве главной страницы используйте созданную ранее веб-страницу Главная (index)
Создайте структуру сайта, которая представлена на рисунке 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. Сохраните созданный сайт.