Лабораторная работа № 1 Разработка Web-представлений в Microsoft FrontPage Знакомство с интерфейсом

1. Запустите Microsoft FrontPage 2003. На экране появится пустая страница.

2. Ознакомьтесь с интерфейсом.

3. Ознакомьтесь с режимом редактирования и просмотра страниц.

• Normal(Обычный) — «нормальный» режим редактирования.

• HTML-код - режим редактирования в кодах HTML

• Preview(Просмотр) - предварительный просмотр.

Работа с текстом

Введите в качестве эпиграфа «О, сколько нам открытий чудных готовит просвещенья дух».

Введите следующий текст, каждое предложение - новый абзац.

Информационные технологии в образовании

Компьютер на уроках математики

Компьютер на уроках русского языка

Компьютер на уроках рисования

Интернет - технологии в образовании

Интернет как средство подготовки к урокам

Интернет как среда общения.

Установка параметров шрифта

Изменять параметры шрифта можно с помощью панели инструментов или команды Format/Font (Формат/Шрифт).

Отформатируйте текст:

• буквы в слове «просвещенья» набраны различными размерами шрифта от 1 до 7;

• предложения «Информационные технологии в образовании» и «Интернет технологии в образовании» — шрифт Arial, размер — 3, полужирный;

• остальные предложения – шрифт Arial, размер - 3, полужирный курсив;

• цвет текста: эпиграф - черный, первое предложение – {00,00,FF}, второе - черный, третье – {00,FF,FF}, четвертое – {00,55,FF}, пятое – {FF,00,00}, шестое – {00,00,В3}, седьмое - черный.

С помощью команды Формат/Абзац можно настроить параметры абзаца.

• Выровняйте эпиграф по правому краю.

Установка параметров страницы

1. Переместите курсор в рабочее поле («чистое» белое поле).

2. Щелкните правой кнопкой мыши и в контекстном меню выберите Page Properties(Свойства страницы).

3. Перейдите на вкладку Language (Язык).

4. В раскрывающемся списке Mark current document as (Пометить текущий документ) выберите Russian (Русский).

5. В раскрывающемся списке Save the document as: (Сохранить доку­мент) выберите Cyrillic (Кириллица).

6. В раскрывающемся списке Повторить загрузку текущего документа выберите Автоматический выбор.

7. Перейдите на закладку Общие и в поле Название наберите заголовок окна страницы Информатика.

Сохранение страницы

Сохранение страницы осуществляется стандартным способом. Надо выполнить команду Файл/Сохранить как. В появившемся окне указать папку, имя файла (без расширения!), нажать кнопку OK.

• Сохраните документ в своей рабочей папке, присвоив ему имя text.htm.

Предварительный просмотр Web-страницы

Надо помнить, что режим предварительного просмотра не дает реальной картины внешнего вида страницы, а лишь приблизительно показывает вид страницы при открытии ее в обозревателе.

• Откройте в редакторе Microsoft FrontPage 2003 страницу, которую необхо­димо просмотреть, и перейдите на вкладку Preview (Просмотр) в нижней части окна Microsoft FrontPage 2003

Просмотр Web-страницы в обозревателе

1. В меню File (Файл) щелкните Preview in Browser (Просмотр в обозревателе).

2. В открывшемся окне Preview in Browser щелкните кнопку Preview (Просмотр). Откроется окно обозревателя и вы увидите свою страницу.

Окно Preview in Browser позволяет выбрать для предварительного просмотра один из установленных в системе браузеров, а также указать разрешение экрана для просмотра.

Просмотр сохраненной Web-страницы, хранящейся на диске

1. Запустите Internet Explorer.

2. В меню Файл щелкните Открыть.

3. В появившемся окне Открыть щелкните кнопку Обзор.

4. В диалоговом окне Microsoft Internet Explorer выберите папку, в которой расположена страница. Выберите нужный файл.

5. Щелкните кнопку Открыть.

6. Щелкните ОК в окне Открыть.

Вставка разрыва внутри абзаца (Insert\Break)

Такой способ создания иллюзии нового абзаца достаточно часто используется в HTML-документах. С помощью команды Вставка/Разрыв можно создать один из 4-х разрывов:

• Normal Line Break (Обычный) - обычный разрыв строки, установлен по умолчанию;

• Clear Left Margin (Очистить левое поле) - разрыв вставлен в текст, который обтекает изображение у левого края экрана;

• Clear Right Margin (Очистить правое поле) - разрыв вставлен в текст, который обтекает изображение у правого края экрана;

• Clear Both Margin (Очистить оба поля) - при вставке разрыва данного типа об­текание будет у любого края экрана.

Вставьте обычный разрыв в эпиграфе после слова «чудных».

Создание нумерованных списков

1. Выделите текст после эпиграфа.

2. Щелкните кнопку Numbering (Нумерация) на панели инструментов Форма­тирование. Все предложения будут пронумерованы.

Создание вложенного маркированного списка

1. Выделите предложения со второго по четвертое.

2. Два раза щелкните кнопку Increase Indent (Увеличить отступ) на панели инструментов Форматирование, а затем - кнопку Bullets (Маркеры). При этом список станет маркированным. В качестве маркера будет взят рисунок по умолчанию.

3. Аналогичным образом измените шестое и седьмое предложения.

Работа со стилями

Так же как и в программе Word можно создать свой стиль и использовать его при форматировании текста. (Стиль – это набор параметров шрифта, абзаца, границы и т.п.).

Создание стиля

Выполните команду Формат/Стиль. Нажмите кнопку Создать. Появится окно Создание стиля. Выполните настройку стиля.

1. В поле Имя наберите My1.

2. Щелкните кнопку Format (Формат) и в раскрывшемся меню вы­берите Font (Шрифт).

3. В открывшемся окне Font (Шрифт) установите необходимые параметры шрифта:

• в списке Font (Шрифт) выберите Arial;

• в списке Font Style (Начертание) выберите Полужирный курсив;

• в списке Size (Размер) выберите размер шрифта 18пт;

• в списке Color (Цвет) выберите цвет текста — красный;

4. Щелкните ОК в окне Шрифт.

5. Щелкните кнопку Format (Формат) и в раскрывшемся меню вы­берите Paragraph (Абзац).

6. В появившемся окне в списке Alignment (Выравнивание) выберите Right (Вправо).

7. Щелкните ОК в окне Абзац.

1. Щелкните кнопку Format (Формат) и в раскрывшемся меню вы­берите Border (Граница).

2. В открывшемся окне Border and Shading (Границы и заливка) перейдите на вкладку Shading (Заливка).

3. В списке Color (Цвет) выберите цвет границы абзаца (в данном случае - желтый).

4. Щелкните ОК в окне Border and Shading (Границы и заливка),

5. Щелкните OK в окне Создание стилей.

6. Щелкните OK в окне Стили.

Применение стиля

Следует помнить что стиль применяется к абзацу! Поэтому чтобы применить стиль достаточно установить курсор в любое место абзаца и затем выбрать стиль.

1. Установите курсор на строку эпиграфа.

2. В списке Style (Стиль) на панели инструментов Форматирование выберите имя созданного вами стиля.

Сохраните страницу.

Работа с графикой

Вставка изображения из коллекции картинок

Выполните команду Вставка/Рисунок/Картинки. Справа в области задач выберите Коллекция картинок. Откройте список Коллекция Microsoft Office щелкнув по значку плюса. Выберите из категории «Домашнее хозяйство» первый рисунок и перетащите его на страницу. Установите выравнивание по центру. Отразите рисунок зеркально по горизонтали.

Создание зеркального отражения изображения

1. Щелчком выделите изображение.

2. Щелкните кнопку Flip Horizontal (Отразить слева-направо) на панели инструментов Pictures (Рисование).

Выравнивание изображения по центру

1. Щелчком выделите изображение.

2. Установите изображение по центру, щелкнув кнопку Center (По центру) на панели инструментов Форматирование.

Наложение текста на графический объект

1. Щелчком выделите изображение.

2. Щелкните кнопку Text (в виде буквы А) на панели инструментов Pictures. В цен­тре рисунка появится поле для ввода текста. (Панель Pictures появляется автоматически в нижней части окна Microsoft FrontPage при выделении графического объекта.)

3. Введите текст «Это моя семья» (без кавычек).

4. Один раз щелкните левой кнопкой мыши вне текстового поля (при этом вокруг текста появится рамка).

5. Подведите курсор на текстовое поле.

6. Нажмите левую кнопку мыши и, удерживая ее, переместите текстовое поле в верхний левый угол изображения.

Текстовое поле может перемещаться только внутри границ изобра­жения, не выходя за его рамки.

Создание эскиза изображения

Иногда нужно на странице расположить не рисунки, а их эскизы – уменьшенную копию рисунка.

1. Вставьте второй рисунок из библиоте­ки Clip Art Gallery в любое место созда­ваемой страницы.

2. Щелчком выделите рисунок.

3. На панели инструментов Pictures (Рисунки) щелкните кнопку Auto Thumbnail (Автоэскизы). Рисунок уменьшится.

Создание альтернативных надписей

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

1. Щелчком выделите рисунок.

2. Щелкните рисунок правой кнопкой мыши и в контекстном меню выберите Picture Properties (Свойства рисунка).

3. Откроется окно Picture Properties (Свойства рисунка).

4. На вкладке General (Общие) в разделе Alternative representations (Альтернативное представление) в поле Text введите текст «Это мама и папа».

5. Щелкните ОК в окне Picture Properties (Свойства рисунка).

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

Выбор цвета фона Web-страницы

1. В меню Format (Формат) щелкните Background. (Фон). Откроется окно Page Properties (Свойства страницы) на закладке Фон.

2. В разделе Colors (Цвета) в списке Background (Фон) выберите желтый цвет.

После этого фон страницы станет жел­тым, однако внутри границ графи­ческих объектов останется белое поле.