Лабораторная работа: Проектирование вэб-сайтов

1 Цель работы

Освоить правила и приемы создания wеb-узлов, средствами специализированного редактора MS FrontPage 2000.

2 Задачи работы

Научиться создавать, оформлять web-сайты, применяя различные эффекты, организовывать перемещение по страницам, используя гиперссылки.

3 Содержание работы

3.1 Создаю и оформляю web-узел, содержащий web-страницы. Для этого выполняю команду Файл4Создаю4Web-узел. Затем перехожу в режим Navigation, далее дважды щелкаю по значку HomePage в центре экрана или по названию файла index.htm в поле FolderList. Затем располагаю на листе данные: ввожу текст по образцу, располагаю картинки.

Для оформления внешнего вида домашней страницы использую команду Формат4Шрифт, в которой выбрать цвет шрифта и гарнитуру написания. Далее сохраняю страницу.

3.2 Для создания страницы с фреймами, указанной на рисунке 2 выполняю команду File4New4Page, в появившемся диалоговом окно New(Новая страница) выбираю вкладку FramesPages (Страницы с фреймами), затем выбираю шаблон Ваnnег andСоntents(Банер и содержание), и щелкаю на кнопке ОК. После этого перехожу в режим редактирования страницы, затем щелкаю на кнопке NewPage(Новая страница) в каждом фрейме.

Для оформления страницы верхнего фрейма вставляю таблицу из одной строки и трех столбцов. Затем в столбцы таблицы помещаю рисунки, далее перемещаю границы столбцов по размеру каждого из рисунков и выравниваю их по центру. Затем щелкаю правой кнопкой мыши на таблице и в появившемся контекстном меню выбираю команду Таble4Рrореrties (Свойства таблицы). В группе элементов Воrders(Границы) задаю нулевой размер границы таблицы для того, чтобы граница стала невидимой.

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

В правой части страницы с фреймами ввожу текст, оформив его соответствующим образом.

После этого выполняю команду File4Save (Файл4Сохраняю), для сохранения новых страниц. Каждая страница будет сохранена под своим именем. Сохраняемая страница будет выделена рамкой синего цвета. Для страницы верхнего фрейма задаю имя baner.htm, для левого - mnu.htm, для правого - text.htm, а для самой страницы с фреймами — имя start.htm. В результате должна получится страница с фреймами.

3.3 После создания страницы с фреймами start.htmприступить к созданию других страниц, которые будут содержать информацию по каждому из пунктов меню, находящегося в левом фрейме.

Создаю новую страницу, на которой в режиме Normal располагаю информацию.

Затем сохраняю страницу, задав ей имя o_nas.htm.

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

Сохраняю страницу, задав ей имя tovar.htm.

3.5 Далее создаю страницу, содержащую новости, поместив на ней текст.

Сохраняю страницу, задав ей имя new.htm.

3.6 Создаю форму обратной связи. Для этого в режиме редактирования ввожу текст по образцу, далее вставляю соответствующие поля форм.

Для создания элементов ниспадающего меню выделяю поле Drop-Downmenu, вызываю его контекстное меню и выбираю там пункт FormFieldProperties (Свойства поля формы), в диалоговом окне Drop-DownMenuProperties нажимаю кнопку Add (Добавить) и в поле Choice ввожу название города, например Уфа, OK. Затем снова нажимаю кнопку Add и ввожу названия городов Стерлитамак, Салават, Ишимбай, Туймазы, Бирск. Сохраняю страницу, задав ей имя otclik.htm.

3.7 Затем перехожу в режим Navigation и перетаскиваю мышью из поля FolderList файлы start, otclik, o_nas, new, tovar к блоку HomePage, расположенному в центре экрана, чтобы получилась следующая структура web-узла (рисунок 4). Находясь в режиме Navigation удобно перемещаться по созданной структуре и использовать ее при редактировании web-страниц.

Рисунок 4 Структура web-узла

3.8 Для организации навигации по учебному web-сайту загружаю главную страницу Index.htm, выделяю на ней текст Далее, затем выполняю команду Insert4Hipperlink (Вставка4Гиперссылка) и в диалоговом окне в поле URLуказываю имя файла Start.htm.

После этого аналогичным образом связываю гиперссылками элементы левого фрейма с соответствующими страницами: О нас со страницей o_nas.htm. Затем связываю пункт меню левого фрейма Товары с файлом tovar.htm, Новости со страницей new.htm, Гостевая книга со страницей otclik.htm. Проверяю работоспособность созданных гиперссылок. Сохраняю отредактированную страницу.

3.9 После того, как web-сайт спроектирован, для его оформления применяю стандартную тему. Для этого выполняю команду Format4Theme (Формат4Тема).

4 Контрольные вопросы

4.1 Понятие web -узла и web - страницы.

--> ЧИТАТЬ ПОЛНОСТЬЮ <--