Лабораторная работа
Задание 1.«Проектирование wеb-сайтов средствами МSFrоntPаgе»
1 Цель работы
Освоить правила и приемысоздания wеb-узлов, средствами специализированного редактора MS FrontPage 2000.
2 Задачи работы
Научиться создавать,оформлять web-сайты, применяя различные эффекты,организовывать перемещение по страницам, используя гиперссылки.
3 Содержание работы
3.1 Создаю и оформляюweb-узел, содержащий web-страницы.Для этого выполняю команду Файл4Создаю4Web-узел. Затем перехожу в режим Navigation, далее дважды щелкаю по значку Home Page в центре экрана или по названию файла index.htm в поле Folder List. Затем располагаюна листе данные: ввожу текст по образцу, располагаю картинки.
Для оформления внешнеговида домашней страницы использую команду Формат4Шрифт, в которой выбрать цвет шрифта и гарнитурунаписания. Далее сохраняю страницу.
3.2 Для создания страницыс фреймами, указанной на рисунке 2 выполняю команду File4New4Page, в появившемся диалоговом окно New (Новая страница) выбираю вкладку Frames Pages (Страницы с фреймами), затем выбираю шаблон Ваnnег andСоntents (Банер и содержание), и щелкаю накнопке ОК. После этого перехожу в режим редактирования страницы, затем щелкаюна кнопке New Page (Новая страница) в каждом фрейме.
Для оформления страницыверхнего фрейма вставляю таблицу из одной строки и трех столбцов. Затем встолбцы таблицы помещаю рисунки, далее перемещаю границы столбцов по размерукаждого из рисунков и выравниваю их по центру. Затем щелкаю правой кнопкой мышина таблице и в появившемся контекстном меню выбираю команду Та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-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, выделяю на ней текст Далее, затемвыполняю команду 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-страниц?
строка для ввода данныхпроизвольного типа, т.е. форма с текстовым полем – One Line TextBox;
текстовое поле с полосойпрокрутки — Scrolling TextBox;
ниспадающее меню – Drop-Down menu;
флажок — 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-страницы
В начале выполненияработы создаю новую папку, в которой будут сохраняться все созданные файлы.
Создание web-страницы начинаю с создания пустой web-страницы. На страницу поместиинформацию о выбранной теме. Страницу оформляю графическими элементами.Присваиваю название web-странице.
3.2 Создание web-узла
Создание каждого издокументов web-узла начинаю с создания пустой web-страницы. На каждой из этих страницнабираю и форматирую текст обычными средствами Word.
В первом документе вставляюкартинку из библиотеки ClipArt;
вставляю бегущую строку;
Во втором документе вставляюкартинку из библиотеки ClipArt;
разделяю страницуграфической линией;
В третьем документесоздаю список с графическими маркерами;
Оформляю страницы,применив к ним тему.
Во втором документеключевое слово преобразовываю в гиперссылку на документ 3.
Проверяю работугиперссылок.
4 Контрольные вопросы
4.1 Для каких целейсоздаются документы HTML, почему их часто называют web-страницами?
Документ HTML – текстовыйфайл, предназначенный для просмотра в программе-обозревателе (браузере).Документы HTML по-другому называют web-страницами, так как в большинствеслучаев они предназначены для публикации в сети Internet.
4.2 Какими способами вприложении Word2000можно создать 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 Как из приложенияMSWordзагрузить обозреватель MSInternetExplorer?
Необходимовоспользоваться командой Файл ► Предварительный просмотр web-страницы.