Тема: Створення веб-сторінок за допомогою Microsoft FrontPage.

Мета роботи: знайомство з інтерфейсом і можливостями Microsoft FrontPage по створенню веб-сторінок.

Завдання:

1. Ознайомитися з теоретичним матеріалом даної теми.

2. У додатку FrontPage можна створити веб-сторінки на основі:

ü порожньої сторінки (сторінки без змісту);

ü текстового файлу (текстового файлу, аналогічного файлу, створеному в редакторові Блокнот);

ü наявної сторінки (з будь-якої веб-сторінки, що є на даному ПК);

ü інших шаблонів сторінок (вбудованих шаблонів сторінок, які можна вибрати у вікні діалогу «Шаблони сторінок»).

3. Результати роботи представити у вигляді звіту.

Послідовність виконання роботи:

1. Для створення веб-сторінки на основі порожньої сторінки за допомогою додатку FrontPage необхідно відкрити вікно додатка одним із способів. Після чого на екрані відображуватиметься вікно додатку або графічний інтерфейс FrontPage, представлений на малюнку.

Рис. 2. Вікно додатка FrontPage 2003

2. Далі необхідно виконати команду Файл/Cоздать і вибрати в області завдань Порожня сторінка. У вікні додатка з'явиться нова порожня сторінка нов_стр_1.htm.

3. Зберегти сторінку, але перед тим, як зберегти сторінку, у вікні «Зберегти» створіть папку, наприклад lab13, в якій створіть вкладену папку images для малюнків, а потім зберегти сторінку в папці lab13. Ім'я сторінки призначте – index, що означає домашня або головна сторінка. Редактор зберігає сторінку з розширенням .htm. Таким чином, в папці lab13, знаходитиметься вкладена папка images і файл index.htm.

4. У папку images скопіюйте підготовлені малюнки для веб-сторінки.

5. Далі необхідно здійснити розробку сторінки. Розробка сторінки починається з її розмітки. Для розмітки сторінки використовуються таблиці (Таблица / Вставить / Таблица), але можна застосувати Макеты страницы, які розташовані на панелі завдань "Макеты таблицы и ячейки" в області завдань. Встановити в області завдань "Макеты таблицы и ячейки".

Рис. 3. Розмічена сторінка

6. Клацнути мишею на необхідному макеті таблиці, представленому на рис. 2, внаслідок чого отримаємо розмічену сторінку. Цифри в елементи таблиці введені тільки для пояснення технології заповнення ячейок.

7. Вставити в першу ячейку будь-який малюнок ("Вставка / Рисунок / Из файла", виберіть малюнок з папки images).

8. Встановити фон ячейок. Для заливки ячейки кольором необхідно клацнути на тег ячейки <td> (на панелі швидкий виклик тега) і вибрати команду «Свойства тега», потім у діалоговому вікні «Свойства ячейки» встановлюємо колір фону.

9. У другу ячейку помістити заголовок сайту (Моя сторінка, Прізвище Ім’я По-батькові). Текст вводите в режимі конструктора. Установити параметри згідно варіанту (додаток).

Виберіть шрифт Verdana (найбільш поширений шрифт для веб-сервера – сторінок), розмір 24 пт, колір темно-синій (код кольору: 000080) або будь-який інший колір, вирівнювання по центру.

10. Вставити гіперпосилання для рядка «Привіт». Виділити рядок «Привіт», клацнути правою кнопкою миші і з контекстного меню вибрати команду Гиперссылка. Відкриється вікно діалогу, в якому треба в папці lab13 виділити файл index і натиснути ОК.

11. Створити посилання на партнерські сайти. Встановити курсор нижче у пусту ячейку і вибрати команду "Таблица / Вставить / Таблица", у діалоговому вікні встановити: Рядків – 2, Стовпців – 1; Вирівнювання – по центру; Задати ширину: 98%; Задати висоту: 30 в крапках; Межі: розмір – 1, колір – темно-синій (код: 000080); Фон: колір – темно-синій (код: 000080). Далі клацнути Применить і ОК. Потім в створену таблицю введіть текст «Партнер №1», «Партнер №2» шрифтом Verdana, розмір шрифту 10 пт, вирівнювання по центру, колір білий.

12. Створити гіперпосилання для партнерськіх сайтів. Наприклад, виділити текст «Партнер №1» і викликати контекстне меню, в якому вибрати команду Гиперссылка. У діалоговому вікні встановити курсор в рядок Адрес, вставити в неї http://google.com.ua і клацнути ОК.

13. В ячейці 4 розмістити текст (задається викладачем). Текст можна вводити з клавіатури або вставляти скопійований текст з буфера обміну. Текст вводиться, редагується і форматується як в будь-якому текстовому редакторові. Малюнки можна вставляти тільки з папки images, яку Ви заздалегідь створили при збереженні веб-сервером – сторінки і наповнили її малюнками.

14. Додати колір фону навколо сторінки. Виберіть команду Формат / Фон, у діалоговому вікні на вкладці форматування встановити колір фону – темно-синій (код: 000080) або будь-який інший колір фону.

15. У режимі Код додати на сторінку відсутні на ній метатеги і заповнити нижчевказані метатеги (між тегами <head> і </head>):

Зразок заповнення:

<title>Економічна кібернетика</title>

16. Зберегти створену веб-сторінку з метою використання її при створенні веб-сайту.

Питання для захисту роботи:

1. Що таке веб-сайт?

2. Що таке html редактор? Основні групи html редакторів.

3. Найпоширеніші візуальні редакторами для створення сайтів?