Практическое занятие № 21

ТЕМА: Редактор визуального веб-конструирования. Элементы интерфейса. Элементы оформлениявеб-страниц.

ЦЕЛЬ: Сформировать знания о редакторе визуального веб-конструирования, элементах интерфейса, и оформления веб-страницы, сформировать умения использовать инструменты редактора визуального веб-конструирования. 

 

1. Последовательность выполнения практического занятия.

1.1. Внеаудиторная подготовка

а. повторить технику безопасности при работе на ПК.

1.2. Работа на учебном занятии

а. Выполнить практические задания.

б. Убрать рабочее место.

в. Оформить отчёт.

2. Методические указания

 

Теоретические сведения для выполнения Заданий 1-2.

Редактор визуального веб-конструирования Microsoft FrontPage.

Редактор Microsoft FrontPage относится к программным средствам визуального веб-конструирования. При работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница простоконструируется на экране и сохраняется в формате .html. Выполняемые при этом действия напоминают работу в текстовом редакторе Word.

Интерфейс редактора FrontPage достаточно прост, чтобы пользователь смог быстро освоить основные приемы работы. После запуска FrontPage открывается окно, основные элементы которого представлены на рисунке:

 

http://bkgatk.by/dotd/inform/pz22/pz22.files/image002.jpg

Панели Стандартная, Форматирование и Рисование по своим возможностям напоминают аналогичные панели  текстового редактора Word.

Вид Рабочей области зависит от выбранного режима работы.

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

Режим С разделением  является комбинацией  двух режимов - Конструктор, Код.

Режим Просмотр позволяет просматривать созданные страницы.

С помощью меню Вид можно выбрать и другие полезные при конструировании сайта режимы.

Режим Страница предназначен для создания и редактирования веб-страниц.

В режиме Папки просматривается структура папок сайта, выполняются файловые операции. Заметим, что любые изменения файлов и папок сайта необходимо производить из среды разработки, так как это позволяет отследить изменения  в структуре взаимосвязанных веб-страниц сайта.

Режим Переходы отображает структуру связей между страницами и позволяет ее изменять.

Режим Гиперссылки наглядно отображает систему ссылок, обеспечивает их проверку и редактирование.

Работа в редакторе FrontPage.

Рассматривать основные приёмы работы в редакторе визуального веб-конструирования удобнее всего на примере разработки веб-страницы, для которой заранее приготовлены текст и картинки.

Важно помнить, что отображение веб-страницы на экран зависит от разрешения монитора и настройки браузера. Поэтому размер принято задавать в условных единицах от 1 до 7. Если размер не указан, то по умолчанию он принимается равным 3, что при установке в браузере значения Размер шрифта средний соответствует 12 пунктам.

 

http://gatk.by/dotd/inform/pz27/pz27.files/image003.jpgДля форматирования текста используем панель инструментов Форматирование, а такжеШрифт и Абзац из меню Формат.

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

 

 

 

 

 

 

 

 

http://gatk.by/dotd/inform/pz27/pz27.files/image005.jpg В окне Свойства горизонтальной линии задаются параметры линии.

 

 

 

Как и в документе MS Word изображения могут располагаться по отношению к тексту различными способами. Параметры изображения настраиваются в диалоговом окне Свойства рисунка, которое вызывается  двойным щелчком левой клавиши мыши по рисунку. В редакторе FrontPage предусмотрена возможность простейшей обработки изображений (коррекция яркости, повороты, обрезка и т.д.). С помощью меню Вид вызывается панель инструментов Рисунки, которая дает возможность изменять параметры по своему усмотрению.

 

 

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

 

 

 

 

Задание 1. Создать веб-страницу на тему озер Беларуси как показано на рисунке ниже.

http://gatk.by/dotd/inform/pz27/pz27.files/image009.jpghttp://gatk.by/dotd/inform/pz27/pz27.files/image011.jpg

 

Методика выполнения Задания 1.

- запустить редактор FrontPage, который находится Пусксе программы\MS Office\ FrontPage;

- все файлы, необходимые для работы находятся в папке на D:\ Папка для сохранения\ Для 1 курса\Озера;

- перейдем в режим Конструктор;

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

- с помощью команды ВставкаГоризонтальная линия поместить горизонтальную разделительную линию;

- зададим параметры разделительной линии с помощью окна Свойства горизонтальной линии: Высота – 6, Выравнивание – по центру, Цвет – синий;  

- с помощью команды ВставкаРисунок поместим фотографии на веб-страницу и зададим Обтекание – справа, Выравнивание – по правому краю, Толщина границы - 0;

- вставим бегущую строку ВставкаВеб-компонентБегущая строка с текстом, например, Приезжайте отдыхать на озера Беларуси;

- увеличим шрифт текста, выполнив следующую последовательность действий, СтильФорматШрифт и в пунктеРазмер выберем 36pt и нажмем кнопку OK;

- создадим рамку для бегущей строки: СтильФорматГраница и выберем Тип – рамка, Стиль – точечная, Цвет синий, Ширина – 3 и нажмем кнопку OK три раза;

http://gatk.by/dotd/inform/pz27/pz27.files/image013.jpg

- сохраните веб-страницу в свою папку с именем main1.htm.

 

Самостоятельная работа

Создайте домашнюю страницу на тему «Города Беларуси» на основе текстовой информации и фотографий, которые размещены на диске  D:\Папка для сохраненияля 1 курса\Города.

 

3. Содержание отчета

а. Титульный лист

б. Цель работы

в. Дидактическое и методическое обеспечение

г. Последовательность выполнения работы по заданиям с описанием основных этапов осуществляемых действий

д. Заключение в виде анализа полученных результатов и выводов

 

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

1.   Каково назначение редактора FrontPage?

2.  Какие возможности форматирования текста имеет FrontPage?

3.  Как задается размер шрифта на веб-страницах?