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


Полнотекстовый поиск по базе:

Главная >> Лабораторная работа >> Информатика, программирование


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




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

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

1 Цель работы

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

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

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

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

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

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

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

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

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

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

После этого выполняю команду FileSave (ФайлСохраняю), для сохранения новых страниц. Каждая страница будет сохранена под своим именем. Сохраняемая страница будет выделена рамкой синего цвета. Для страницы верхнего фрейма задаю имя 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-Down menu, вызываю его контекстное меню и выбираю там пункт Form Field Properties (Свойства поля формы), в диалоговом окне Drop-Down Menu Properties нажимаю кнопку Add (Добавить) и в поле Choice ввожу название города, например Уфа, OK. Затем снова нажимаю кнопку Add и ввожу названия городов Стерлитамак, Салават, Ишимбай, Туймазы, Бирск. Сохраняю страницу, задав ей имя otclik.htm.

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

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

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

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

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

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.6 Что такое страница с фреймами? Как ее создают?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

флажок - Check Box.

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

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

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

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

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

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

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

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

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

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

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

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

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

1 Цель работы

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

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

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

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

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

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

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

3.2 Создание web-узла

Создание каждого из документов web-узла начинаю с создания пустой web-страницы. На каждой из этих страниц набираю и форматирую текст обычными средствами Word.

В первом документе вставляю картинку из библиотеки ClipArt;

вставляю бегущую строку;

Во втором документе вставляю картинку из библиотеки ClipArt;

разделяю страницу графической линией;

В третьем документе создаю список с графическими маркерами;

Оформляю страницы, применив к ним тему.

Во втором документе ключевое слово преобразовываю в гиперссылку на документ 3.

Проверяю работу гиперссылок.

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

4.1 Для каких целей создаются документы HTML, почему их часто называют web-страницами?

Документ HTML – текстовый файл, предназначенный для просмотра в программе-обозревателе (браузере). Документы HTML по-другому называют web-страницами, так как в большинстве случаев они предназначены для публикации в сети Internet.

4.2 Какими способами в приложении Word 2000 можно создать web-страницу?

Существуют два простых способа создания web-страниц с помощью Word. Можно создать новую страницу с помощью мастера или шаблона либо преобразовать существующий документ Word в формат HTML.

4.3 Какие файлы находятся в папке, автоматически создающейся при сохранении web-страницы?

При сохранении файла как web-страницы, все графические объекты (маркеры списков, линии, текстуры фона, рисунки) по умолчанию сохраняются во вспомогательной папке как графические файлы формата GIF или JPG (JPEG), с именами image001, image002 и т. д..

4.4 Как присвоить название web-странице?

Для присвоения названия web-странице нужно выбрать команду Файл ► Свойства, на вкладке Документ в поле Название ввести нужный заголовок.

4.5 Как добавить на web-страницу графическую линию?

Для вставки горизонтальной линии следует поместить текстовый курсор в место вставки линии и воспользоваться командой Формат ►Границы и заливка, в окне диалога нажать кнопку Горизонтальная линия. После выбора линии нажать кнопку Вставить клип.

4.6 Как на web-странице создать список с графическими маркерами?

Набор таких изображений находится в диалоговом окне Список (меню Формат).

4.7 Как задать цвет фона?

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

4.8 Как задать текстуру фона?

Выбрать команду Способы заливки.

4.9 Что такое тема? Как применить тему к web-странице?

В Microsoft Word 2000 имеется возможность автоматического оформления электронных документов. Доступ к выбору образца оформления выполняется командой Формат ► Тема. Когда к документу применяется какая-либо тема, автоматически настраиваются следующие элементы документа:

цвет фона или фоновый рисунок;

стили оформления основного текста и заголовков;

стиль оформления маркированных списков;

стиль графических элементов оформления (линий);

цвета гиперссылок;

цвет границы таблицы.

4.10 Какие форматы графических изображений поддерживаются в web-документах?

GIF и JPEG

4.11 Как создать бегущую строку?

Для вставки бегущей строки на панели инструментов web-компоненты следует нажать кнопку Бегущая строка . В диалоговом окне в поле Введите текст бегущей строки вводится текст, который будет использоваться в качестве бегущей сроки на web-странице.

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

Для вставки гиперссылки на существующий файл нужно выполнить следующие действия:

выделить текст или графический объект, который предполагается использовать как гиперссылку, и выбрать команду Вставка ► Гиперссылка;

в окне Добавление гиперссылки выбрать вариант Связать c ► Имеющимся файлом, web-страницей;

ввести путь к конечному файлу в поле Введите имя файла или web-страницы или нажать кнопку Файл и выбрать нужный файл из списка.

4.13 Как создать подсказку для гиперссылки?

Чтобы назначить подсказку для гиперссылки, в окне Добавление гиперссылки следует нажать кнопку Подсказка, а затем ввести текст подсказки.

4.14 Как изменить гиперссылку?

Для изменения гиперссылки следует щелкнуть по изменяемой гиперссылке правой кнопкой мыши и выбрать в контекстном меню команду Гиперссылка ► Изменить гиперссылку.

4.15 С какими целями создаются страницы рамок для документов HTML?

Рамки могут использоваться:

для размещения информации, которую необходимо показывать постоянно

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

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

4.16 Как изменить свойства рамки?

С помощью команды Формат ► Рамки ► Свойства рамки.

4.17 Как из приложения MS Word загрузить обозреватель MS Internet Explorer?

Необходимо воспользоваться командой Файл ► Предварительный просмотр web-страницы.

Похожие работы: