Проектирование вэб-сайтов (стр. 1 из 2)

Лабораторная работа

Задание 1. «Проектирование wеb-сайтов средствами МSFrоntPаgе»

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- страницы.

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

4.2 Для чего предназначена панель представлений?

Она предназначена для переключения между различными режимами работы.

4.3 Назовите режимы представления страницы.

Page (Страница) - редактирование открытой web-страницы.

Folders (Папки) - работа с папками и файлами сайта.

Reports (Отчеты) - режим просмотра информации о сайте.

Navigation (Переходы) - просмотр и изменение структуры узла.

Hyperlinks (Гиперссылки) - просмотр и изменение гиперссылок страницы.

Tasks (Задачи) - помогает планировать работу над узлом и отмечать сделанное.

4.4 Объясните смысл создания домашней страницы.

Она содержит сведения о содержании и теме web-узла и предназначена для привлечения внимания его посетителей. Домашняя страница содержит ссылки на другие страницы web-узла.

4.5 Как вставляю рисунок на web-страницу?

Для того, чтобы вставить рисунок из библиотеки FrontPage необходимо выполнить команду Вставка4Рисунок4Картинка. Для вставки картинки из внешнего файла следует воспользоваться командой Вставка4Рисунок4Из файла.

4.6 Что такое страница с фреймами? Как ее создают?

Страница с фреймами - это НТМL-страница особого вида, которая делит окно браузера на несколько прямоугольных областей, называемых фреймами. Создать страницу с фреймами можно на основе одного из готовых шаблонов, имеющихся в программе FrontPage. Для этого

4.7 Какой командой создается страница с фреймами?

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

4.8 Как происходит сохранение страницы с фреймами?

Для сохранения страницы с фреймами следует выполнить команду Файл4Сохранить, для сохранения новых страниц. На экране последовательно появятся стандартные окна сохранения файлов Сохранить как для каждой страницы. В этих окнах нужно указать имена файлов (верхнего, левого, правого и страницы целиком).

4.9 Для чего используются таблицы при создании web-страниц?

Для выравнивания элементов на экране, многоколоночной верстки, наложения картинок.

4.10 Что такое темы и для чего их используют?

Тема - это определенный набор элементов оформления и цветовых схем, которые можно применить к страницам.

4.11 Что такое формы?

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

4.12 Какие виды форм используются при создании web-страниц?

строка для ввода данных произвольного типа, т.е. форма с текстовым полем – OneLineTextBox;

текстовое поле с полосой прокрутки - ScrollingTextBox;

ниспадающее меню – Drop-Downmenu;

флажок - Check Box.

4.13 Как добавить форму на web-страницу?

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

4.14 Для чего используются кнопки Reset и Submit при создании форм?

Submit - отправляет содержимое формы на сервер, Reset – очищает поле формы, чтобы посетитель мог начать заново ввод данных в нее.

4.15 Что такое гиперссылка?

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

4.16 Какой командой можно добавить гиперссылку?

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

4.17 Как проверить работоспособность гиперссылок?

Для проверки работоспособности ссылок можно перейти в режим просмотра (Preview) или, не выходя из режима редактирования и удерживая клавишу Сtrl, щелкать на ссылках левой кнопкой мыши.

4.18 Назовите способы оформления web-страниц.

Основными способами оформления web-страниц являются использование тем, вставка горизонтальной линии и бегущей строки.

Задание 2. «Проектирование wеb-сайтов средствами MSWord»

1 Цель работы

Научиться разрабатывать документы, предназначенные для публикации в Internet.

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

Знакомство с возможностями текстового редактора Word по созданию документов HTML.

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

3.1 Выполнение примера на создание web-страницы

В начале выполнения работы создаю новую папку, в которой будут сохраняться все созданные файлы.