Создание и оформление web-узла
Чтобы ускорить выполнение лабораторной работы возможно копирование через буфер обмена данных для создания страницы с фреймами п.2.3.1, 2.1.4 и 2.1.5 из файла с методическими указаниями.
2.1.1 Создать и оформить web-узла, содержащий web-страницы. Для этого необходимо выполнить команду Файл 4 Создать 4 Одностраничный Web-узел,в окне диалога выбрать вариантОдностраничный Web-узел. Затем переключиться в режим Переходы(вкладка внизу окна Front Page), далее дважды щелкнуть по названию файла index.htm в центре экрана. Затем следует расположить на листе данные, указанные на рисунке 1: ввести текст по образцу, расположить картинки.Для создания логотипа названия магазина можно воспользоваться средством WordArt.
Для оформления внешнего вида домашней страницы необходимо воспользоваться командой Формат4Шрифт, в которой нужно выбрать цвет шрифта и гарнитуру написания. Далее необходимо сохранить страницу.
Для создания страницы с фреймами, указанной на рисунке 2 в области переходов выделить файл index.htm и выполнить командуФайл 4 Создать 4 Другие шаблоны страниц, в появившемся диалоговом окне Шаблоны страниц выбрать вкладку Страница рамок, затем выбрать шаблон Объявление и оглавление, и щелкнуть на кнопке ОК. После этого перейти в режим редактирования страницы, затем нужно щелкнуть на кнопке Создать страницув каждом фрейме.
Рисунок 1 Пример домашней страницы
Для оформления страницы верхнего фрейма (рисунок 2) вставить таблицу из одной строки и трех столбцов. Затем в столбцы таблицы поместить рисунки, далее переместить границы столбцов по размеру каждого из рисунков и выровнять их по центру. Затем щелкнуть правой кнопкой мыши на таблице и в появившемся контекстном меню выбрать команду Свойства таблицы…. В группе элементов Границы задать нулевой размер границы таблицы для того, чтобы граница стала невидимой.
Для написания пунктов меню в левой части страницы с фреймами также следует использовать таблицу, состоящую из одного столбца и четырех строк. Каждый пункт меню записывается в строку таблицы.
В правой части страницы с фреймами следует ввести текст, оформив его соответствующим образом.
После этого необходимо выполнить команду Файл4Сохранить,для сохранения всех новых страниц. Каждая страница будет сохранена под своим именем. Сохраняемая страница будет выделена рамкой синего цвета. Например, для страницы верхнего фрейма следует задать имя baner.htm, для левого - mnu.htm, для правого - text.htm, а для самой страницы с фреймами — имя start.htm. В результате должна получится страница с фреймами, представленная на рисунке 2.
Рисунок 2 Пример создания страницы с фреймами
После создания страницы с фреймами start.htm следует приступить к созданию других страниц, которые будут содержать информацию по каждому из пунктов меню, находящегося в левом фрейме.
Примечание. Данные, содержащиеся на создаваемых web-страницах можно перенести воспользовавшись командами по работе с буфером обмена из электронного варианта методических указаний по FrontPage, установленного на компьютерах.
Создать новую страницу, на которой в режиме Конструктор расположить следующую информацию:
Наши адреса
| 450075 Уфа, ул. Айская 115 | Офис. Режим работы: понедельник- пятница с 10.00 до 20.00 |
| 450001 Уфа, ул. Ленина 25 | Магазин Compland. Режим работы: понедельник- воскресенье с 10.00 до 20.00 |
Телефон/факс: Compland: (3457) 28-31-45, 58-64-23, 52-08-32 (многоканальный), 8-9174098888 (звонки из городов Белебей, Бирск, Благовещенск, Дюртюли, Ишимбай, Нефтекамск, Октябрьский, Салават, Стерлитамак, Туймазы бесплатные).
Наш адрес в Интернет: http://www.compland.ru/
Наш e-mail: compland@compland. ru
Сотрудники компании: Директор - Ахметов Айрат Гафурович, главный бухгалтер - Зарипова Эльза Фанилевна, начальник отдела продаж - Некрасова Софья Ефимовна, начальник гарантийного отдела - Калганов Денис Петрович.
Затем нужно сохранить страницу, задав ей имя o_nas.htm.
2.1.4 После этого аналогичным образом следует создать страницу, на которой будут располагаться сведения о товарах, предлагаемых к продаже в магазине, например:
| Наименование товара | Цена, у.е. | Цена, руб. |
| 22” MONITOR Samsung SyncMasner 1200NF0.24 TCO”99 | 731.46 | |
| 19” MONITOR Samsung SamTron 96B TCO”95 | 232.21 | |
| 17” MONITOR 0.20 Samsung SyncMasner 757MB TCO”99 | 2383.71 | |
| 17” MONITOR 0.20 Samsung SyncMasner 757NF TCO”99 | 254.04 | |
| 17” MONITOR 0.23 Samsung 753S | 163.59 | |
| 17” MONITOR Samsung SamTron 76B TCO”99 | 154.4 | |
| Cannon A4 Copy бумага (500листов, 80г/м2) | 3,66 | |
| EPSON S04114 4”x6” бумага Photo (20 листов, 194 г/м2) 720 dpi | 6,87 | |
| Hp 92296U A4 пленка LaserJet Monochrome Transparency Film (50 листов) для лазерного принтера | 25,76 | |
| Acorp 56EMSF-2 EXT 56K VI (RTL) V.92 | 47.25 | |
| Acorp 56PIM-2 PCI 56K VI (RTL) V.92 Winmodem | 22.61 |
Сохранить страницу, задав ей имя tovar.htm.
2.1.5 Далее создать страницу, содержащую новости, поместив на ней следующий текст:
Акция РОЛ, проводится 23 октября 2012 года, 20:53. Каждый купивший с 22 октября по 9 ноября карточку "РОЛ" принимает участие в розыгрыше разнообразных призов. Призы включают в себя: 42 VIP билета на концерт Робби Вильямса в Москве (с оплаченной дорогой до Москвы и обратно и оплаченным проживанием в престижной гостинице); 10 билетов на концерт, предполагающие самостоятельное несение дополнительных расходов (дорога, проживание); диски с автографом артиста - более 100 штук; коллекционные футболки - более 100 штук.
Сроки проведения конкурсов, правила участия и другая информация на сайтах http://www.rol.ru и http://robbie.rol.ru
Сохранить страницу, задав ей имя new.htm.
2.1.6 Создать форму обратной связи. Для этого в режиме редактирования следует ввести текст по образцу (рисунок 3), далее вставить соответствующие поля форм. В данной лабораторной работе не предусматривается обработка данных на сервере, поэтому кнопку Отправить (Submit) следует удалить. Для очистки формы будет использоваться кнопка Сброс (Reset). Для удобства ее следует переименовать.
Для этого необходимо ее выделить, затем вызвать контекстное меню кнопки и выбрать команду Свойства поля формы, в поле Значение или подпись ввести новое название Очистить, закончить диалог.
Для создания элементов раскрывающегося списка следует его выделить, вызвать контекстное меню и выбрать там пункт Свойства поля формы, в диалоговом окне Свойства раскрывающегося списка нажать кнопку Добавить и в поле Вариант ввести название города, например Уфа, OK. Затем снова нажать кнопку Add и ввести названия городов Стерлитамак, Салават, Ишимбай, Туймазы, Бирск. Сохранить страницу, задав ей имя otclik.htm.
Рисунок 3 Пример формы обратной связи
2.1.7 Затем следует перейти в режим Переходыи перетащить мышью из поля Folder List файлы start, otclik, o_nas, new, tovar к блоку Home Page, расположенному в центре экрана, чтобы получилась следующая структура web-узла (рисунок 4). Находясь в режиме Переходыудобно перемещаться по созданной структуре и использовать ее при редактировании web-страниц.
Рисунок 4 Структура web-узла
2.1.8 Для организации навигации по web-сайту необходимо загрузить главную страницу index.htm, выделить на ней текст Далее, выполнить команду Вставка4Гиперссылка и в диалоговом окне в поле URL указать имя файла Start.htm.
После этого аналогичным образом необходимо связать гиперссылками элементы левого фрейма с соответствующими страницами: О нас со страницей o_nas.htm. Затем связать пункт меню левого фрейма Товары с файлом tovar.htm, Новости со страницей new.htm, Гостевая книга со страницей otclik.htm. Проверить работоспособность созданных гиперссылок. Сохранить отредактированную страницу.
2.1.9 После того, как web-сайт спроектирован, для его оформления рекомендуется применить стандартную тему. Для этого нужно выполнить команду Формат4Тема.
2.2 Выполнить индивидуальные задания для самостоятельной работы по указанию преподавателя.Перед началом работы следует создать новую папку, в которой будут сохраняться все созданные файлы.
Создание личной web-страницы можно начинать с создания пустой web-страницы или воспользоваться шаблоном (п. 3.2.1). На личную страницу поместить информацию о себе, своих текущих делах и планах, учебе, увлечениях, друзьях и т.п. Личную страницу можно украсить графическими элементами (см. п.п. 1.2.3 – 1.2.6). Присвоить название web-странице (выбрать команду Файл ► Свойства, на вкладке Общие в поле Название ввести нужный заголовок).
Оформить отчет.
Отчет о проделанной работе должен содержать:
· название и цель работы;
· описание последовательности выполнения работы;
· дискету с файлами web-узлов;
· письменные ответы на контрольные вопросы п.3 по указанию преподавателя.
Вопросы для самоконтроля знаний
1) Назовите режимы представления страницы.
2) Объясните смысл создания домашней страницы.
3) Как вставить рисунок на web-страницу?
4) Что такое страница с фреймами? Как ее создать?
5) Какой командой создается страница с фреймами?
6) Как происходит сохранение страницы с фреймами?
7) Для чего используются таблицы при создании web-страниц?
8) Что такое темы и для чего их используют?
9) Что такое формы?
10) Какие виды форм используются при создании web-страниц?
11) Как добавить форму на web-страницу?
12) Для чего используются кнопки Reset и Submit при создании форм?
13) Что такое гиперссылка?
14) Какой командой можно добавить гиперссылку ?
15) Как проверить работоспособность гиперссылок?
16) Назовите способы оформления web-страниц.