Горизонтальне меню, що випадає. Створення Web-сторінок у прикладній програмі FrontPage Як створити спадне меню в frontpage

03.10.2020 Огляди

Створення нової порожньої Web-сторінки

Якщо при відкритті вікна програми FrontPageу ньому відображається порожня сторінкаРозробку веб-сторінки можна здійснювати на базі цієї сторінки. Якщо під час відкриття редактора FrontPage, відображається порожнє головне вікно, то для створення нової порожньої сторінки необхідно виконати команду Файл/Створитита вибрати в області завдань Порожня сторінка. У вікні програми з'явиться пуста сторінка. Далі потрібно здійснити розробку сторінки, тобто. виконати розмітку (структуру) сторінки, запровадити текст, малюнки тощо.

Створення веб-сторінки на основі шаблонів FrontPage

Створити нову сторінку можна також на базі одного із шаблонів. Для цього необхідно вибрати команду «Інші шаблони сторінок»у сфері завдань. На екрані з'явиться вікно діалогу Шаблони сторінок, де представлені різні шаблони сторінок за категоріями.

Створення веб-сторінки на основі наявних Web-сторінок у ПК

Створити веб-сторінку можна на базі наявних, на комп'ютері веб-сторінок. Для цього необхідно в галузі завдань вибрати команду «З наявною сторінки»і у вікні діалогу вибрати необхідну сторінку. Далі можна зробити необхідні зміни на сторінці та зберегти її під іншим ім'ям.

Навчання створення Web- сторінок

Створення нової порожньої Web-сторінки

Якщо при відкритті вікна програми FrontPageв ньому відображається нова порожня сторінка, то розробку веб-сторінки можна здійснювати на базі цієї сторінки. Якщо при відкритті редактора відображається порожнє головне вікно, то для створення нової порожньої сторінки необхідно виконати команду Файл/Створитита вибрати в області завдань "Порожня сторінка".

Спробуємо створити Головну сторінку нашого Web-сайту!

У вікні програми з'явиться порожня сторінка. Зберігаємо сторінку, але перед тим, як зберегти сторінку у вікні «Зберегти»створюємо папку serverОсобисті папкиПрізвище Ім'яСайт «Дінас», в якій створюємо вкладену папку Малюнки для малюнків, а потім зберігаємо сторінку в папці Сайт «Дінас». Ім'я сторінки призначаємо – index, що означає домашня або головна сторінка. Редактор зберігає сторінку з розширенням.htm. Таким чином, у папці Сайт «Дінас», буде знаходитись вкладена папка Малюнки та файл index.htm.


Малюнки для веб-сторінки повинні бути заздалегідь підготовлені та вставлені до папки Малюнки. Скопіюємо в папку Малюнки малюнок Офіс ТОВ Дінас для створення веб-сторінки, присвяченої ТОВ «Дінас».

Щоб створений вами документ скрізь коректно визначався як написаний російською мовою, зробіть таке:

Виберіть Файл Властивості. Відкриється діалог Властивості сторінки.

На вкладці Мовау випадаючому меню Позначити поточний документ, вказавши:групи налаштувань Мовасторінки виберіть пункт Українська. У меню, що випадає Зберегти документ, використовуючигрупи налаштувань Набір знаківвиберіть пункт Кирилиця. Ок!

Фон сторінки

Щоб станиця виглядала барвистішим спробуємо додати до нашої сторінки Фон,. Зробити це можна двома способами:

1. Зайти в меню Формат Фон та у вікні Властивості сторінки вибрати через кнопку Огляд потрібний малюнок.


У результаті наша сторінка набуде наступного вигляду:


Спробуйте виконати це, але після закінчення скасуйтеце дія!

2. Як Фон нашої сторінки можна використовувати вже готові Теми. Зайдіть до меню Формат Тема. Виберіть подвійним клацаннямТему Хвилі.

Таблиця як каркас Web - сторінки

Далі необхідно здійснити розробку сторінки. Розробка сторінки починається з її розмітки. Для розмітки сторінки використовуються таблиці. Можна застосувати Макети сторінки, які розташовані на панелі завдань "Макети таблиці і осередки"у сфері завдань. Для цього потрібно зайти в меню Таблиці Макетні таблиці і осередки. Таким чином, у нас з'явилася чудова можливість вибрати готові макети таблиць, але може так вийти, що дані макети не задовольняють нашим вимоги. Тому ми докладно розглянемо використання Таблицьяк каркас нашої сторінки.

Виберіть команду Таблиця Вставити таблицю. З'явиться діалог Вставка таблиці, що дозволяє налаштувати параметри створюваної таблиці. (Рис.10)

Я У полях введення з лічильником Рядокі Стовпцівгрупи елементів налаштування Розмірзадається кількість рядків та стовпців, які міститиме таблиця.

џ Становищезнаходяться елементи керування розташуванням таблиці на сторінці та положення вмісту осередків усередині таблиці.

Я У списку, що відкривається Вирівнюванняможна вибирати спосіб вирівнювання вмісту осередків. Згодом для кожного конкретного осередку можна окремо налаштувати параметри вирівнювання вмісту.

Я Список Обтіканнявизначає спосіб обтікання таблиці текстом та іншими елементами сторінки.

Я Поле введення з лічильником Поля осередківвизначає відстань між межами осередків та їх вмістом.

Я У полі введення з лічильником Інтервал осередківзадає відстань між сусідніми осередками таблиці.

Я Встановивши прапорець Задати ширину, Ви зможете це зробити в полі, що знаходиться трохи нижче.

Я Поле Задати висотуаналогічно попередньому.

У групі елементів керування Межірозташовуються настройки, пов'язані з відображенням меж таблиці.

Я Поле введення з лічильником Розмірзадає товщину межі таблиці у точках.

Я Випадаючий список Колірдозволяє вибирати колір, яким буде відображено кордон.

Якщо встановити прапорець Згорнути кордон таблиці, то межа буде відображатися у вигляді одиночної лінії, інакше вона прийматиме псевдо-об'ємний вигляд.

В групі Фонзібрані елементи, що управляють фоновим зображеннямтаблиці.

Я Список Колірдозволяє вибрати колір тла таблиці.

Я Якщо встановлено прапорець Використати фоновий малюнок, то ви зможете задати таблиці як тло зображення.

Якщо встановити прапорець за замовчуваннямдля нових таблиць групи елементів за замовчуванням, то всі параметри, які ви встановили для цієї таблиці, стануть стандартними для всіх наступних таблиць.

Згодом, якщо у вас виникне потреба змінити параметри вже створеної таблиці, клацніть усередині її - з'явиться контекстне меню, в якому необхідно вибрати пункт Властивості таблиці.

Є можливість змінювати параметри окремо взятої комірки, так кількох осередків відразу. Для цього необхідно виділити одну або кілька осередків, викликати контекстне меню та вибрати в ньому пункт Властивості осередки.

У групі елементів керування Становищезнаходяться елементи керування розташування вмісту комірки.

  • · У списках, що відкриваються Вирівняти по горизонталі і по вертикалі, ви зможете вибрати спосіб вирівнювання вмісту комірки.
  • · У групі елементів управління Межі, розташовуються налаштування, пов'язані з відображенням меж таблиці. перелік Колірдозволяє вибрати колір межі комірки.
  • · В групі Фонзібрані елементи, що управляють фоновим зображенням комірки. перелік Колірвибирає колір її тла. Прапорець Використати фоновий малюнокзадає як тло зображення.

Є також додаткові можливості: додати і видалити стовпці, розбити і об'єднати осередки. Всі ці команди можна знайти також у контекстному меню при виділенні осередків. Аналогічні команди ви вже зустрічали у програмах Wordі Eхcel, тому описувати їх немає сенсу.

Використовуючи отриманий теоретичний матеріал, спробуйте створити дві таблиці.

Має вийти щось подібне!

Настав час написати на нашому сайті назву фірми, якій він належить. Але робити це ми будемо не у вигляді звичайного тексту, а за допомогою об'єкта WordArt (Ми сподіваємося, що ви знаєте, як це зробити!) Таким же чином вставте слово Акціяу третій осередок нижньої таблиці та Вакансіяв перший осередок.. А тепер відокремте назву фірми Горизонтальній лінією: Вставка Горизонтальна лінія.


Текстове оформлення сайту

Існує безліч варіантів оформлення текстів на Web-сторінках. Використання потенціалу текстового форматування дозволяє робити тексти приємнішими візуально, оформляти їх у згоді з вашими авторськими задумами, дає можливість явно підкреслювати важливі словата думки.

Оскільки ви вирішили зайнятися вивченням такого непростого продукту, як створення Web-сайтів, ми просто впевнені в тому, що ви знаєте, як форматується текст ну, наприклад, в такій програмі, як Microsoft Word. Так ось редагування текстів у програмі FrontPageаналогічно до цього, тому, природно на цьому зупинятися ми теж не будемо.

Скажемо лише, що для цього використовується панель форматування або рядок меню Формат Шрифт Абзац.

Самостійно введіть весь текст, який ви бачите на рисунку15. При його редагуванні можете трохи пофантазувати. АЛЕ не перестарайтеся!


Вставка ілюстрацій

Неможливо уявити HTML - сторінку без елементів графіки, малюнків тощо. Вміло підібрана графіка приверне увагу відвідувачів на сторінку, акцентує їхню увагу на тих чи інших моментах нашої сторінки. Допоможе виділити логічні підрозділи і надасть нашій сторінці особливу неповторність, але при цьому під час вибору зображень слід врахувати наступні моменти. По-перше, не треба використовувати як тло зображення, яке ускладнює читання тексту документа. Наприклад, занадто строкаті, яскраві тощо. Не потрібно використовувати великі зображення, які затягнуть до нескінченності час завантаження. Якщо все-таки треба вставити зображення на сторінку, краще створити його маленьку копію, і після цього призначити посилання на сторінку з вихідним великим зображенням, щоб користувач міг сам вирішити, якщо він дуже хоче завантажити зображення у вихідному вигляді. А так розмір файлу зображення не повинен перевищувати 20-25 кб. На Web-сторінках зазвичай розміщують зображення двох форматів GIF і JPG. Такі зображення коректно відображаються у всіх браузерах, які підтримують показ графіки. Звичайно, можна вставити і файли з іншими форматами, наприклад, BMP, TIF, але при цьому треба врахувати, що при записі на диск FrontPageїх автоматично перетворить на один із двох базових форматів.

Розглянемо переваги та недоліки цих форматів. GIF - це стандартний формат для невеликих графічних зображень, такі як кнопки, піктограми. Він не підтримує тіней та півтонів і в його основі лежить палітра з 256 кольорів. JPG в порівнянні з GIF, підтримує набагато більше кольорів - понад 16 млн., що робить його найбільш вигідним для відображення графічних зображень з плавними переходами напівтонів. Крім того, розмір JPG файлу можна зменшувати з різним ступенем стиснення, але треба пам'ятати, що на відміну від файлів GIF, стиснення файлів JPGвиробляється із втратою їхньої якості. Чим більше стискування, тим більше втрата, але треба взяти до уваги, що JPG це досить хороший формат: він дає високий ступінь стиснення при досить маленьких втратах, практично не видно на око.

Все, що стосується графік більш детально, ми розглянемо трохи далі, поки скажемо тільки, що вставити картинку можна знову ж таки, як і в інших програмах.

Спробуємо вставити в сторінку фото Каталогз папки малюнки.

Підготовка графіки з допомогою Adobe PhotoShop та Adobe ImageReady

Зовнішній вигляд і привабливість сайту значною мірою залежать від графіки, що його наповнює. Графіка - це візуальний засіб підкреслення та виділення інформації, що розкривається текстом Web-сторінки, який водночас не повинен відволікати відвідувача від самого тексту. Тому підготовці графіки слід приділити найсерйознішу увагу.

Серед програм професійної підготовки растрових зображеньмабуть немає програми більш досконалої та популярної, ніж Adobe PhotoShop.

Adobe PhotoShop та Adobe ImageReady добре доповнюють один одного. В Adobe PhotoShop обробляються фотографії, створюються графічні кнопки, банери та інші зображення для веб-сайту. На ImageReady отримані зображення оптимізуються, розрізаються на фрагменти тощо.

Кнопка Видалити… (6)

дозволяє

виділений

селектор

Користувальницькі

стилі.

на кнопку

Створити...

відкриває

діалогове

створення

стилю, в якому

створюються

селектори. Натискання

на кнопку Змінити… (8)

відкриває діалогове

Зміна

стилю, яке

Рисунок 5.40 – Діалогове вікно Стиль

повністю збігається з вікном Створення стилю та служить для зміни опису виділеного селектора. У разі зміни стилю для тега зі списку HTML Теги, цей селектор тега переноситься до списку стилі користувача.

Працюючи з діалоговим вікном

Зміна

(Створення) стилю

використовуються наступні поля та кнопки.

У полі Ім'я (для вибору) (1) : вводиться

ім'я селектора (ім'я селектора тега має

збігатися з ім'ям самого тега; ім'я

селектора класупочинається з точки (.).

Кнопка Формат (2) дозволяє отримати

доступ до випадаючого списку, в якому

можна вибрати такі пункти:

Шрифт… –

відкриває

діалогове

Рисунок 5.41 – Вікно Зміна стилю

Шрифт,

що дозволяє зробити

стильові налаштування шрифту.

Абзац… – відкриває діалогове вікно Абзац, яке дозволяє встановити абзацні відступи (ліворуч та праворуч) від вікна браузера, відступ для першого рядка, налаштувати інтервали між рядками та абзацами, налаштувати інтервали між словами в абзацах;

Кордон… – відкриває діалогове вікно Межі та заливання, за допомогою якого можна встановити кордон для виділеного абзацу, залити абзац будь-яким

кольором; Нумерація… – відкриває діалогове вікно Список, за допомогою якого можна

створити нумеровані, марковані та інші списки; Положення… – відкриває діалогове вікно Положення, за допомогою якого

Ви можете точно розмістити різні елементи на сторінці.

Поле Зразок (3) показує, як виглядатиме об'єкт, до якого буде застосований створений стиль.

У полі Опис (4) відображається текстовий опис атрибутів цього стилю.

Випадаюче меню Тип стилю (5) активно у разі створення селектора класу. При виборі типу Знак до початку імені селектора додається слово span.

селектори тегів застосовуються автоматично після вибору

відповідних команд;

шляхом вибору їх з інших стилів у випадаючому

списку Стиль (рис.5.42) на панелі інструментів

Форматування;

шляхом вибору

з випадаючого вікна Клас: діалогового

Малюнок 5.42 –

Список стилів

Зміна

(рис.5.43), що відкривається

кнопкою Стиль… з різних

діалогових вікнах(наприклад:

Властивості малюнка,

Властивості

таблиці, Властивості осередку,

Список, Розрив, Властивості

горизонтальну лінію).

використання

впроваджених

стилів їх

необхідно налаштовувати для кожної

веб-сторінки.

Рисунок 5.43 – Вікно Зміна стилю

5.4.3. Зовнішні таблицістилів.

У цьому випадку для визначення стилів CSS приділяється окремий файл, на який будуть посилатися web-сторінки. Такий підхід:

забезпечується централізоване управління стилями CSSна всіх веб-сторінках

(внесені зміни будуть автоматично застосовуватися одразу на всіх web-сторінках, які посилаються на файл, що містить CSS);

зменшується сумарний обсяг веб-сайту;

збільшується швидкість завантаження веб-сторінок.

Для створення зовнішнього файлу, Що містить каскадні таблиці стилів, необхідно виконати такі дії (рис.5.44).

Виконати команду Файл→Створити та вибрати команду Інші шаблони сторінок.

У діалоговому вікні Шаблони сторінок , вибрати вкладку Таблиці стилів (2), на якій показані шаблони таблиць стилів, що входять до складу FrontPage

Для самостійного створення таблиці стилів вибрати шаблон Звичайна таблицястилів(3) і натисніть кнопку OK.

Рисунок 5.44 – Створення зовнішнього файлу стилів

Отриману сторінку з розширенням.css необхідно зберегти (команда Файл→Зберегти ) в одну з папок web-сайту з заданим ім'ям обов'язково

латинськими літерами та розширенням .css .

Створити опис для селекторів тегіві селекторів класів, використовуючи команду Формат→Стиль… , яка відкриває діалогове вікно Стиль (рис.5.40), описане у попередньому розділі.

Створену таблицю стилів необхідно зв'язати зі сторінками веб-сайту. Для цього необхідно.

Виконати командуФормат→Зв'язки з таблицями стилів… .

У діалоговому вікні, що відкрилосяЗв'язати з

таблицею стилів

можна встановити

такі параметри:

перемикач всі сторінки (1) застосовує

стилі до всіх виділених сторінок веб-сайту;

перемикач

виділені

сторінки

застосовує стилі до поточної сторінки або до web-

сторінкам, виділеним на панелі Список папок;

кнопка Додати… (3) служить для додавання

Малюнок 5.45 – Діалогове вікно

кнопка Видалити (4) служить для видалення файлу,

Зв'язати із таблицею стилів

з таблицями каскадних стилів до web-сторінок (якщо використовують кілька таблиць каскадних стилів);

Кнопка Редагувати (7) відкриває виділений у вікні Адреса URL: (8) файл css для редагування.

Натисніть OK.

До виділених об'єктів селектори застосовуються по-різному:

селектори тегів використовуються автоматично після вибору відповідних команд;

селектори класів застосовуються:

Шляхом вибору їх з числа інших стилів у списку Стиль (рис.5.42) на панелі інструментів Форматування :

Шляхом вибору з вікна, що випадає Клас: діалогового вікна Зміна стилю

(рис.5.43), що відкривається кнопкою Стиль… з різних діалогових вікнах

(наприклад: Властивості малюнка, Властивості таблиці, Властивості осередку, Список,

Розрив, властивості горизонтальної лінії).

5.5. Фрейми (кадри) у FrontPage 2003.

Фрейми - засіб розділення вікна браузера на кілька областей

(фреймів), у кожній з яких відображається вміст окремої web-сторінки. Кожна область може мати свої смуги прокручування та її перегляд за допомогою них, що не впливає на інші області. За допомогою програми FrontPage 2003 можна створювати різні кадрові структури, вставляти вбудовані кадри і залежно від

характеру інформації, що подається організовувати відповідні гіперпосилання. Усі команди пов'язані з фреймовою структурою перекладені словом рамки .

Для організації кадрової структури необхідно (рис.5.46).

Рисунок 5.46 – Створення сторінки кадрів Виконати команду Файл→Створити та вибрати команду Інші шаблони сторінок.

(1) в галузі завдань Створення .

У діалоговому вікні Шаблони сторінок , вибрати вкладку Сторінка рамок (2), на якій показані шаблони (3) web-сторінок з фреймовою структурою,

що входять до складу MS FrontPage 2003.

Виділити найбільш вдалий шаблон і натиснути кнопку "OK".

Вікно нової web-сторінки кадрів (рис.5.47) буде розбите на частини відповідно до обраної структури. Цю сторінку необхідно зберегти (Файл→Зберегти ) в одну з папок веб-сайту з ім'ям (1) заданим обов'язково латинськими літерами.

Малюнок 5.47 – Нова web-сторінка кадрів

1) Кнопка Задати початкову сторінку…(2) дозволяє вибрати вже готову web-5

сторінку сайту у вікні Додавання гіперпосилання.

2) Кнопка Створити сторінку(3) завантажує у кадр нову порожню web-сторінку,

редагування якої може бути здійснено звичайним чином.

Якщо частина кадрів заповнюється за допомогою кнопки Створити сторінку, то при збереженні сторінки кадрів (Файл→Зберегти ) окремо зберігається кожна нова web-сторінка (імена обов'язково задаються латинськими літерами).

Під час роботи зі сторінкою кадрів на панелі кнопок представлення з'являється ще одна кнопка Без рамок (4). У цьому режимі редагується вміст, який відображатиметься у браузері, якщо він не підтримує показ кадрів.

Робота над web-сторінками, що входять у фреймову структуру, можлива як окремо, так і через сторінку фреймів.

Для вибору одного з кадрів потрібно натиснути на нього лівою кнопкою миші. Активний кадр відрізняється від інших кольоровою рамкою (5). Якщо натиснути лівою кнопкою миші на зовнішню рамку сторінки кадрів, то виділеною виявиться вся кадрова структура. Кордони кадрів можна переміщати натиснутою лівою кнопкою миші.

Для роботи з виділеним кадром можна скористатися командами меню

Рамки.

Команда Розділити рамку дозволяє розбити кадр на дві частини по вертикалі або горизонталі.

Команда Видалити кадр видаляє кадр зі сторінки кадрів. При цьому якщо web-

сторінку, що завантажується в цей кадр, була збережена раніше, вона залишається в структурі web-сайту.

Команда Відкрити сторінку в новому вікнівідкриває веб-сторінку кадру для редагування окремо від кадрової структури.

Команда Властивість рамки.відкриває діалогове вікно

Властивості рамки , в якому можна встановити різні параметри кадру: ім'я, опис, розміри, ширина і відображення меж, властивості смуг прокручування, відступи.

Малюнок 5.48 – Вбудований кадр

Ще один варіант використання фреймів – вставка у звичайну web-сторінку вбудованого кадру (рамки) (рис.5.48) командою Вставка→Вбудована рамка. У

результаті в тому місці, де було встановлено курсор, вставляється рамка, яку можна заповнити двома способами: Задати початкову сторінку…або Створити сторінку.

Клацніть лівою кнопкою миші на межу рамки, виділяє кадр для зміни його розмірів. Подвійне клацання лівою кнопкою миші на межу рамки відкриває діалогове вікно Властивості вбудованої рамки, в якому можна задавати різні параметри

кадру: ім'я кадру, назва, розміри, відступи, вирівнювання, текст, що заміщає.

організації

гіперпосилань

сторінками

фреймовий

структури

необхідно з

діалогове

Кінцева рамка (рис.5.49)

та вказати, куди буде

завантажувати

новий об'єкт.

Поле Поточна

сторінка

Рисунок 5.49 – Діалогове вікно Кінцева рамка

рамок (2) дозволяє клацанням лівої кнопки миші вибрати кадр для завантаження нового об'єкта. У списку (завантаження до того ж кадру, звідки організовувалося гіперпосилання), (завантаження у нове вікно браузера), (завантаження у вбудовану рамку).

5.6. Форми у програмі FrontPage 2003.

Форми дозволяють організувати на веб-сторінки текстові поля, перемикачі, прапорці, кнопки та багато інших елементів керування. При надсиланні користувачем заповненої форми у браузері значення всіх полів форми відправляються обробнику форми. Обробник форми - програма на web-сервері, яка виконується під час надсилання форми відвідувачем вузла.

У програмі FrontPage 2003 підтримуються різні обробники форм, які розміщені на web-серверах, що працюють під керуванням FrontPage Server

Extensions (серверні розширення Microsoft FrontPage - набір програм та сценаріїв, що підтримують створення сторінок у Microsoft FrontPage та розширюють функціональні можливостівеб-сервера), SharePoint Team Services версія 1.0 (Microsoft) або Microsoft Windows SharePoint Services 2.0. Ці обробники приймають результати форм і роблять з них різні дії. У програмі FrontPage

підтримуються також сценарії, наприклад ISAPI, NSAPI, CGI та ASP.

Існують три способи створення форми у MS FrontPage 2003.

1) Додавання порожньої форми з кнопкамиНадіслати та Скинути, командою

Вставка→Форма→Форма.

2) Вставка першого поля форми командоюВставка→Форма→Поле форми. Область форми з кнопками Надіслати та Скидання додається автоматично.

3) Вибір та використання доступного шаблону форми або майстра сторінки форм за допомогою таких дій.

У сфері завдань Створення сторінки(команда Файл→Створити) потрібно вибрати

команду Інші шаблони сторінок… та вкладку Загальні.

Вибір одного із шаблонівГостьова книга, Реєстраційна форма, Сторінка пошуку, Форма зворотнього зв'язку дозволяє створити нову web-сторінку із типовою формою.

Вибір шаблону Майстер сторінки формизапускає майстер сторінки форми визначення кількості, типу, змісту елементів форми.

Область форми відображається в пунктирній рамці, яка помітна тільки в режимі Конструктор.

Для завдання властивостей форми необхідно встановити курсор всередині форми, і виконати команду Вставка→Форма→Властивості форми…або клацнути правою кнопкою миші в область форми та вибрати команду контекстного меню Властивості форми.. Через війну відкривається діалогове вікно Властивості форми (1 рис.5.50), у якому встановлюються різні параметри форми.

Секція Збереження результатів(2) визначає кінцевий сценарій обробки даних форми. У разі використання власних сценаріїв необхідно встановити перемикач в іншому місці (3) та зі списку вибрати Сценарій, що настроюється..

Рисунок 5.50 – Налаштування параметрів форми

Поле Ім'я форми: (4) служить

для вказівки імені форми.

Кнопка Кінцева рамка

відкриває діалогове вікно

Кінцева рамка, в якому

можна вибрати вікно, з якого робитиметься запит.

Кнопка Параметри… (6)

відкриває діалогове вікно

Параметри оброблювача

форм (7). У полі Дія:

(8) вказується ім'я скрипта для обробки форми або mailto: e-mail для надсилання даних форми на адресу електронної пошти e-mail. У полі Метод: (9) вибирається спосіб передачі (GET спосіб передачі через адресний рядок, POST – спосіб передачі у теле HTTP запиту). У полі Тип кодування: (10)

вказується тип кодування даних форми під час відправки на web-сервер. Можливі типи кодувань: application/x-www-form-urlencoded - дані форми кодуються як пари імені та значення, що використовується за умовчанням; multipart/form -data - дані форми кодуються як повідомлення з окремими частинами кожного елемента управління на сторінці, використовується для відправлення форм, містять файли; text/plain – дані форми кодуються як відкритий текст, без керуючих та форматуючих символів,

використовується для надсилання даних на адресу електронної пошти.

Кнопка Додатково… (11) відкриває вікноДодаткові властивості форми

для редагування прихованих полів форми (кнопки Додати… , Змінити… ,

Видалити).

Щоб додати форму форми, потрібно виконати команду Вставка→Форма

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

визначає послідовність заповнення полів форми у браузері. Кнопку Перевірити… у цьому вікні можна використовувати лише у випадку, якщо використовується стандартний обробники форм FrontPage 2003. Кнопка Стиль…

текстове

застосовується для введення короткого

повідомлення, наприклад імен та

електронної

Параметри

поля (ім'я, початкове значення,

встановлюються

діалоговому

вікно Властивості текстового поля.

Малюнок 5.51 – Поля форми

Текстове

використовуються для введення одного або кількох рядків тексту, наприклад, коментаря.

Це поле прокручується, що дозволяє вводити тексти різного об'єму. Параметри поля (ім'я, початкове значення, ширина у знаках, число рядків) встановлюються у діалоговому вікні Властивості текстового поля.

Поле відправлення файлу(3) – служить для надсилання файлу на web-сервер у вказану папку web-сайту, складається з поля для введення імені файлу та кнопки огляд, яка дозволяє відкрити діалогове вікно Вибір файлу. Параметри поля (ім'я, ширина у знаках) встановлюються у діалоговому вікні Властивості поля надсилання файлу.

Прапорець (4) – служить для організації вибору елемента, користувач може встановити чи зняти прапорець на власний розсуд. Параметри поля (ім'я, значення, початковий стан) встановлюються у діалоговому вікні Властивості прапорця .

Перемикач (5) – служить для організації вибору зі списку, у якому можна вибрати лише одне значення (кілька полів перемикач з тим самим ім'ям групи). Параметри поля (ім'я, значення, початковий стан) встановлюються у діалоговому вікні Властивості перемикача.

Список, що розкривається(6) – служить для організації вибору з списку одного або декількох варіантів. Заповнення поля (кнопки Додати… , Змінити… , Видалити , Вгору , Вниз ) та його параметри (ім'я, висота в рядках,

роздільна здатність вибору декількох елементів) встановлюються в діалоговому вікні

Властивості списку . При заповненні поля (кнопкиДодати…,

Змінити… ) відкривається додаткове діалогове вікно Додавання або

Зміна варіанта. У цьому вікні задається назва варіанта (поле Варіант: ),

значення, яке буде передано при надсиланні форми у разі вибору цього варіанта

Тема 3.4: Застосування Інтернету в економіці та захист інформації

Програми для створення сайтів

3.3. Прикладні програми для створення Веб-сайтів

3.3.4. Створення сайту та веб-сторінок у FrontPage

Планування сайту

Планування сайту є одним із найскладніших завдань. Як правильно розмістити на сторінках майбутнього сайту наявну інформацію? Якою має бути структура сайту? Які сторінки має сайт? Який дизайн мають сторінки сайту? Яка має бути навігація сайтом?

Ці та багато інших проблем, пов'язаних із розробкою сайту, мають бути вирішені до застосування прикладних програм для розробки сайтів.

Припустимо, що ми вирішили розробити сайт, на якому буде представлена ​​інформація про компанію EN101, цю інформацію ми можемо викласти на чотирьох сторінках:

  1. Головна
  2. Про компанію
  3. Бізнес-огляд проекту
  4. Способи оплати

Вибираємо ім'я сайту, виходячи з виду діяльності, наприклад: lessons-en101.

Призначаємо імена сторінкам:

  • index – Головна;
  • info - Про компанію;
  • business- Бізнес-огляд проекту;
  • pay - способи оплати.

В якості головної сторінкивикористовуємо створену веб-сторінку Головна (index). Створюємо структуру сайту, яка представлена ​​малюнку.


Мал. 1.

Підготуємо текст у редакторі Word для кожної сторінки та малюнки в Adobe Photoshopу форматах GIF, JPEG або PNG з роздільною здатністю 72 пікс/дюйм, крім того, можна використовувати скрипти.

Далі можна зареєструвати домен другого рівня в одній із зон (ua, ru, com, net, info і т.д.) та після розробки сайту вибрати платний хостинг, який влаштовує за швидкістю доступу та надає необхідні послуги для ефективної роботисайту. Якщо ми розташовуватимемо сайт на безкоштовному хостингу, то можна вибрати, наприклад, хостинг на сервері narod.ru. Для цього необхідно буде зареєструватися на сервері та отримати безкоштовний хостинг. У цьому випадку у вас буде домен третього рівня, наприклад: lessons-en101.narod.ru.

Створення сайту за допомогою програми FrontPage

1. Для створення сайту за допомогою програми FrontPage необхідно відкрити вікно програми одним із способів. Після цього на екрані відображатиметься вікно програми або графічний інтерфейс FrontPage, в якому відображатиметься попередній сайт або сторінка. Для виходу з попереднього сайту або сторінки у FrontPage потрібно виконати команду «Файл/Закрити» або «Файл/Закрити вузол», або те й інше, якщо були відкриті вузол та сторінка.

Потім виконуємо команду Файл / Створити і в області завдань «Створення» клацаємо мишею на «Інші шаблони веб-вузлів» в розділі «Створити Веб-вузол». Відкриється вікно діалогу «Шаблони веб – вузлів», в якому необхідно виділити «Порожній веб – вузол», далі вказати розташування нового веб-вузла (наприклад, D:\Documents and Settings\ТВА\Мої документи\Мої веб-вузли\lessons- en101) та клацнути ОК. На малюнку представлено фрагмент вікна діалогу «Шаблони веб – вузлів», в якому вказано адресу нового сайту.


Мал. 2.

Після збереження сайту на екрані у вікні FrontPage буде відображатися новий веб-сайт в режимі папки.



Мал. 3.

2. Створення домашньої сторінки FrontPage для нового сайту. Створення домашньої сторінки FrontPage можна здійснювати по-різному. Наприклад, можна клацнути на кнопці «Створити сторінку» на панелі «Вміст», в результаті у вікні веб-сайту додасться сторінка index.htm, яка показана на малюнку



Мал. 4.

3. Потім копіюємо вміст раніше створеної папки EN101, в якій знаходяться папка images та сторінка index (папка _vti_cnf формується автоматично під час створення веб-сторінки). Вміст папки EN101 представлений малюнку.


Мал. 5.

Вставляємо збережений вміст папки EN101 з буфера обміну до новоствореної папки веб-сайту lessons-en101, яка представлена ​​на малюнку.


Мал. 6.



Мал. 7.

Таким чином, як домашня сторінка в новому сайті використана раніше створена сторінка index.htm ( Англійська мовав інтернет). Можна створювати головну сторінку та іншими способами, викладеними у розділі 3.3.2. Знайомство із програмою FrontPage.

5. Створюємо у редакторі FrontPage структуру сайту, тобто. до головної сторінки додамо ще три сторінки: info - Про компанію; business - бізнес-огляд проекту; pay - способи оплати. Для цього потрібно перейти в режим Переходи, виконавши команду Вигляд/Переходи. Потім необхідно виділити домашню сторінкуі клацнути на кнопці Нова сторінка на панелі Переходи або застосувати контекстне меню, додасться Нова сторінка 1. Аналогічно додаємо ще дві нові сторінки. Структура сайту представлена ​​малюнку.



Мал. 8.

6. Перейменування Нових сторінок у FrontPage. Переходимо в режим папки та за допомогою контекстного меню змінюємо імена Нова сторінка 1 на info, Нова сторінка 2 на business, Нова сторінка 3 на pay.


Мал. 9.

7. З метою єдності дизайну сторінок сайту копіюємо зміст головної сторінки у створені сторінки info, business, pay. Для цього відкриваємо головну сторінку в режимі Сторінка та виконуємо команду "Редагування / Виділити все", і клацаємо на кнопці Копіювати на панелі інструментів. Переходимо в режим Папки і двічі клацаємо на сторінці info, вона відкриється в режимі Сторінка, потім клацаємо на кнопці Вставити. Вміст головної сторінки скопіюється на сторінку info, аналогічно копіюємо вміст головної сторінки в решту двох сторінок.

  • Головна;
  • Про компанію;
  • Бізнес-огляд проекту;
  • Способи оплати.

Наприклад, виділяємо пункт навігації "Бізнес-огляд проекту" та за допомогою контекстного меню відкриваємо вікно діалогу Додавання гіперпосилання, в якому виділяємо business.htm та клацаємо ОК. Аналогічно створюємо посилання для всіх пунктів навігації на всіх сторінках. На малюнку представлений фрагмент вікна діалогу Додавання гіперпосилання.



Мал. 10.

10. Додаємо та заповнюємо метатеги (між тегами) і) на сторінках: "Про компані"; "Бізнес-огляд проекту"; "Спосіб оплати" в режимі Код.

Наприклад, для сторінки "Про компанію" теги заповнені таким чином:

  • Про компанію En101

11. Перейменування заголовків сторінок у режимі Переходи. Виділити сторінку та за допомогою контекстного меню здійснити перейменування:

  • нова сторінка 1 перейменувати на "Про компанію".
  • нова сторінка 2 перейменувати на "Бізнес-огляд проекту".
  • Нова сторінка 3 перейменувати на "Способи оплати".

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

Для розробки свого сайту в FrontPage скачайте.

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

Коротко про програму Microsoft FrontPage

Це простий у освоєнні та зручний Web-редактор для проектування, підготовки та публікації Web-сайтів. Завдяки інтеграції з сімейством продуктів MS Office, звичному інтерфейсу та різноманітності шаблонів програма дозволяє швидко освоїти роботу навіть початківцям, знайомим з основами роботи в MS Word. При цьому FrontPage не можна назвати рішенням для чайників: програма надає широкі функціональні можливості та різноманітні засоби оптимізації інтернет сторінок.

Слід зазначити, що назва Microsoft FrontPage існувала до 2003 року, а далі доповнювалася новими функціями та змінювалася сама назва програмного забезпечення. У 2007 програма FrontPage була перейменована на Microsoft Expression Web, а в 2010 в Microsoft Office SharePoint Designer. Фактичний до нових версій були додані деякі доповнення, але основний вид програми зберігався.

Основні інструменти програми

Загальний вигляд програми Microsoft FrontPage

Програма Microsoft FrontPage має багато спільного з інструментами MS Word, тому багато кнопок та вкладок меню також інтуїтивно зрозумілі і це полегшує процес створення сторінки. Багато хто вже знає, як набирати і форматувати простий текст, створювати таблиці в Microsoft Word, за таким же принципом редагується сторінка і FrontPage.

Праворуч на малюнку показано загальний вигляд програми зі стандартним набором інструментів, за допомогою яких можна зробити шаблон сторінки з текстом, посиланнями та картинками. Зайдіть у вкладку "Вид" далі "Панель інструментів" і переконайтеся, що включено " Стандартна", "Форматування"і" Таблиці", цих інструментів буде достатньо для створення просто сторінки. Знизу зверніть увагу на вкладки "Конструктор", "Код" і "Перегляд" - це три різні режими в яких можна весь час переглядати, як виглядає сторінка, що створюється.

  • У Конструкторі вводяться всі правки, набирається і форматується текст, вставляються картинки, створюються посилання, змінюються кольори фону та шрифту так само, як і в Microsoft Word.
  • У вкладці "Код" можна переглянути так званий HTML-код. HTML - це стандартна моварозмітки документів у Всесвітньому павутинні. Більшість веб-сторінок створюються за допомогою мови HTML. У цій вкладці також можна редагувати сторінку, але потрібно знати цю мову розмітки. Однак усі зміни початківцям слід робити в конструкторі і всі зміни в HTML відбуватимуться автоматично.
  • У вкладці "Перегляд" можна побачити, як виглядає сторінка безпосередньо в браузері (у такому, як Internet Explorer)

Детальний опис інших меню, кнопок та функцій Microsoft FrontPage представлено у довідці програми. Для цього потрібно натиснути клавішу F1.

Створюємо шаблон для сторінок у FrontPage

Вставляємо основну таблицю у редакторі

І так для того, щоб створити нескладний шаблон, необхідно вставити таблицю з трьома блоками. Три блоки - це простий стандарт: верхній блок призначений для назви сайту, другий блок для навігаційних посилань по сайту, третій блок для тексту, картинок та іншої інформації на сторінці. Можна вставити більше блоків таблиць для зручності, але це вже справа смаку, як, скільки і якими розмірами робити ці блоки. Існують і інший спосіб створення блоків не через створення таблиць, а вставкою в сторінок, так званих, "div" елементів і призначення ним певних стилів, але цей спосіб не для нових веб-майстрів, і про це можна написати окрему статтю.

  1. Щоб вставити таблицю заходимо у вкладку "Таблиця" > "Вставити" > "Таблиця" та заповнюємо поля, як це показано на малюнку праворуч. Фактичний можна ввести свої параметри, але дана таблицямає фіксовану ширину та витягнута на 100% площі екрану. Таким чином, таблиця компактно буде відображатися в браузері.
  2. Потім необхідно налаштувати всі три осередки, тому що вони після вставки мають однакову висоту. Натискаємо правою кнопкою мишки на верхній комірки і заходимо в "Властивості комірки" в поле висота вписуємо умовно "150" і ставимо галочку "у точках", тобто. розмір комірки становитиме 150 пікселів. У цьому ж меню ми можемо вибрати колір фону комірки, а натиснувши в меню "стиль..." можна внести інші налаштування комірки, наприклад, вибрати колір і розмір межі комірки, з цим можете поекспериментувати і подивитися результат. У самій комірці можна вписати назву сайту.
  3. Далі редагуємо другий осередок, який призначений для посилань навігації по сайту. Ширину робимо близько 40 пікселів, цього буде достатньо, та й інші налаштування, як колір фону та полів налаштовуємо на свій смак. Далі пишемо назви самих посилань розділяючи знаками вертикальної лініїабо іншим знаком (переглянути можете нижче завантаживши шаблон). Виділяємо тест і тиснемо кнопку вирівнювання по центру, як і в MSWord. Так само можна змінювати шрифт, розмір шрифту та інші параметри тексту.
  4. Також налаштовуємо останній осередок. Вона призначена для основного тексту, в якому можна внести текст привітання.
  5. Насамкінець можна зайти у вкладку "Файл" > "Властивості", де можна внести назву сайту та змінити загальний фон сторінки та інші загальні налаштування

Тепер шаблон готовий. Це каркас для всіх наступних сторінок сайту. Ось як сайт виглядає у HTML коді:

Такий отримуємо шаблон для сайту

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> < title >Назва сайту < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" >Назва сайту < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >Головна | < b >Сторінка 2 | < b >Сторінка 3 | < b >Сторінка 4 | < b >Сторінка 5 | < b >Контакти < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >Текст головної сторінки. Тут можна вставити текст привітання і коротко написати чомусь присвячений сайт.

Цей HTML-код можна відразу вставити в редактор у вкладці "Код" і відразу побачите готовий шаблон. Його можна змінювати та редагувати під власні потреби. Тут варто пояснити, що там, де вставляється основний текст і щоб він не розташовувався впритул до полів, він був обрамлений в тег "div", з налаштуванням відступу, як це показано в прикладі.

Додаткові шаблони

  1. Потрібно також знати, що у програмі FrontPage та й інших подібних програмах існують стандартні шаблони, за якими можна використовувати для створення сторінок, вони легко редагуються і можна підігнати будь-який шаблон під свої потреби. Для того, щоб вибрати стандартний шаблон перейдіть у вкладку "Файл" > "Створити..." у вікні вибрати "Інші шаблони сторінок", де можна вибрати будь-який шаблон, що сподобався.
  2. Є другий варіант – скачати повністю шаблон з інтернету. Сайтів, що надають такий сервіс дуже багато. шаблони можуть бути як платними, і безкоштовними. Завантаживши той чи інший шаблон, його можна редагувати у програмі, заповнювати потрібним змістом та змінювати стиль того чи іншого елемента.

Використання стандартних макетів таблиць та тем

Microsoft FrontPage дає хороші інструменти готових макетів таблиць і тем оформлення для сайтобудування

Потрібно знати, що в Microsoft FrontPage є стандартний набір макетів таблиць і тим, за допомогою яких можна добре навчитися мистецтвом створення звичайних сторінок або сайтів візиток. І так праворуч вгорі є меню, що випадає (дивіться картинку праворуч, де також відображено результат використання матектів таблиць і теми оформлення), натиснувши з'явиться меню, в якому потрібно вибрати "Макетні таблиці та комірки" і далі нижче з'явиться багато різних макетів таблиць, можна вибрати будь-який на свій розсуд і смак. Таким чином, це звільняє створювати самому таблицю вручну.

І так набравши або вставивши свій текст, логотип, посилання в комірки таблиці, зайшовши до того ж меню, можна вибрати меню "Тема", де можна вибрати різні теми для оформлення сторінки, посилань, фону сторінки та багато іншого. Така можливість хороша для тих, хто тільки вчиться створювати інтернет-сторінки і цілком наочно відображає сам процес створення сайту. Іншими словами, Microsoft FrontPage можна експериментувати з різними налаштуваннями і бачити наочно, як перетворюється та чи інша сторінка. Тут можна дати одну пораду, вивчайте всі функції програми і не бійтеся наживати на те чи інше меню, тому що кожен інструмент має свою властивість і призначення для формування повноцінної сторінки

Вставляємо картинку та створюємо посилання на сторінки

Важливо початківцям веб-майстрам знати, як вставляти картинки в сторінку і робити посилання на інші сторінки. Наприклад, замість тексту назви сайту можна вставити малюнок логотипу сайту. Для цього спочатку натисніть у поле, куди необхідно вставити зображення, потім у верхній частині натисніть на вкладку "Вставка" > "Малюнок" > "З файлу", виберіть потрібний малюнок і натисніть "Вставити", після чого малюнок з'явиться на сторінці. Натиснувши на малюнку правою кнопкою мишки можна вийти в меню з додатковими налаштуваннямизображення. Важливо, щоб усі зображення знаходилися в одній строго визначеній папці для всіх зображень.

Для переходу на інші сторінки сайту необхідно створити посилання, за якими користувачі зможуть відвідати всі сторінки сайту. Для цього потрібно виділити потрібний текст для посилання і перейти у вкладку "Вставка" > "Гіперпосилання", у меню потрібно вказати сторінку, на яку створюється посилання, і натиснути "ок". У цьому ж вікні є інші параметри для посилань, такі як відкривати посилання в новому вікні чи ні. У принципі, це можна вивчити самостійно.

Висновок

У своїй основі подібні редактори між собою схожі, мають схожі функції та меню. Освоївши базові налаштування, з легкістю можна буде створювати сайти та інших редакторах. Освоївши ці принципи, можна перейти до складнішого методу оформлення сайтів - за допомогою так званого CSS. Про те, що це таке і як редагувати дизайн сайту, можна прочитати в статті про CSS.

Недоліком даного "шаблонного" методу полягає в тому, що кожну сторінку доводиться створювати окремо на базі створеного шаблону. Коли як при створенні сайтів за допомогою так званих движків не потрібно окреме формування сторінок, вони формуються автоматично в міру додавання контенту

Якщо у Вас виникли питання щодо статті, використання подібних програм для створення сайтів, то їх можна поставити в темі обговорення нашого форуму .

Статті за схожою тематикою

У попередніх розділах ми розглянули створення сайту, який містить одну сторінку. Але, як правило, сайт складається з кількох сторінок. Для додавання до сайту нових або створених сторінок раніше використовуються команди меню, комбінації клавіш, кнопка Створити (New) на стандартній панелі інструментів.

Для переміщення Web-сторінкою, як і в будь-якому текстовому редакторі, можна використовувати смуги прокручування, клавіші зі стрілками на клавіатурі та комбінації клавіш. Так, наприклад, для початку сторінки використовується комбінація клавіш +, наприкінці сторінки - +. Клавіші І Дозволяють переміститися на один екран вгору або вниз відповідно.

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

Діалогове вікно Шаблони веб-сайтів(Web Site Templates), що відкривається під час створення нового сайту, містить шаблони, що пропонують створити порожній або односторінковий сайт. Необхідну для розміщення інформації кількість сторінок ви додаєте до сайту самостійно. Це можуть бути нові сторінки, на яких ви пізніше розмістите інформацію, або Web-сторінки, створені раніше як за допомогою програми FrontPage, так і за допомогою інших програмних продуктів.

Зауваження

Питання імпортування файлів у даному уроці не зачеплять, оскільки цьому буде присвячений окремий урок.

Існує кілька способів додавання до сайту нової сторінки. Ви можете скористатися будь-яким із них залежно від того, який спосіб вам здається зручнішим, а також від того, який шаблон ви хочете застосувати під час створення нової сторінки. Щоб додати на сайт нову сторінку, можна використовувати:

  • Кнопку Створити(New) на стандартній панелі інструментів
  • Команду Створити(New) меню Файл(File), що розміщує у вікні програми FrontPage панель Створення веб-сторінки або вузла(New Page or Web)
  • Комбінація клавіш +

При використанні комбінації клавіш або натискання кнопки Створити(New) на стандартній панелі інструментів до сайту за замовчуванням додається порожня сторінка, створена за допомогою шаблону Звичайна сторінка(Normal Page).

Якщо при створенні нової сторінки ви хочете використовувати будь-який інший шаблон, вам необхідно відкрити діалогове вікно Шаблони сторінок(Page Templates) (рис. 16.1), що містить перелік шаблонів сторінок, запропонованих програмою FrontPage. Щоб відкрити вікно, виконайте одну з таких дій:

  • У меню кнопки Створити(New) стандартної панелі інструментів виберіть команду Сторінка(Page)
  • В меню Файл(File) виберіть команду Створити(New), а потім з підменю, що відкрилося - опцію Сторінка або веб-сайт(Page or Web). У вікні FrontPage з'являється панель Створення веб-сторінки або вузла(New Page or Web), на якій виберіть команду Шаблони сторінок(Page Templates)

Мал. 16.1. Діалогове вікно для вибору шаблону створюваної сторінки

Діалогове вікно Шаблони сторінок(Page Templates) містить список шаблонів. Виберіть шаблон, який ви бажаєте використовувати при створенні нової сторінки. Використовуючи область Зразок(Preview) діалогового вікна, перегляньте, який вигляд вона матиме. Натисніть кнопку ОКдля закриття вікна та розміщення шаблону сторінки у сайті.

В результаті додавання нової сторінки до сайту у робочій області програми FrontPage з'явиться порожня сторінка з назвою newjage_l.htm(Рис. 16.2). Ця назва вказує на те, що ця сторінка є першою, яку ви створюєте з моменту запуску програми. При створенні наступних сторінок FrontPageнадає їм імена зі зростаючими номерами: new_page_2.htm, newjage_3.htm і т.д.

Мал. 16.2. До сайту додано нову сторінку, створену з використанням шаблону "Звичайна сторінка"