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

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

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