Лабораторнi_Модуль 1 / ЛР12

Змістовний модуль 2. Комп‘ютерні мережі. Системи оброблення тексту та основи WEB-дизайну

Лабораторне заняття №12 (2 год.). Створення багатосторінкового WEB-вузла засобами MS FrontPage

[складено за Енгель П.С., Запара С.В. Створення Web-сайтів та Web-сторінок: Методичні рекомендації. – Полтава: РВВ ПУСКУ, 2003. – 69 с. .]

Загальні відомості

Шаблони створення багатосторінкового персонального Web-вузла

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

Цей шаблон дуже важливий саме для початківців, які вивчать програму FrontPage.

Для створення Personal Web виконайте такі дії:

• у меню File виберіть команду New і далі Web (Web-вузол);

• у діалоговому вікні New, в папці Specify The location of new web введіть місце розташування сайту, його ім’я, наприклад, Pers-Web, а зліва, в цьому ж вікні, клацніть два рази на іконі Personal Web: через деякий час на екрані з′явиться одержаний Web-вузол (див. рис. 1) для його перегляду і редагування.

Рис. 1. Персональний Web-вузол, створений

за допомогою шаблона Personal Web

Екран теж розділений на частини: на лівій панелі бачимо струк­туру Web-вузла з папками (private, image) і файлів-сторінок ство­реного Web-вузла (index.htm, favorite.html, interest.htm, photo.html, myfav.html), які можна переглядати справа в робочій області. Ви­користовуючи засоби програми FrontPage, можна модифікувати сторінки: змінювати назву, додавати нові сторінки, вставляти текст, рисунки тощо.

Модифікація персонального Web-вузла. Клацнувши по файлу – сторінці index.htm (зліва на сторінці), праворуч побачимо Домашню Web-сторінку, яку і почнемо ре­дагувати, як власну Web-сторінку, при чому, якщо курсор миші приймає на будь-якій частині правої панелі вигляд руки з сто­рінкою – то тут корегування можливе, але при цьому необхідно клацнути на об’єкті два рази і у відповідних діалогових вікнах внесіть свої корективи, якщо курсор не змінює свого вигляду (це нижче і правіше від пунктирних ліній), де розміщений звичайний текст – міняйте його, як вам потрібно, знищуючи попередній.

Зліва в робочій області (правої панелі) розміщена панель навігації (Navigation Bar), за допомогою якої можна переходити на інші сторінки, назви яких і вказані на цій панелі (файли цих сторінок розміщені в лівій панелі і мають розширення. htm, а назви сторінок, що розміщені на панелі навігації, мають ті ж са­мі назви, що і їх файли, але без розширення. Наприклад: в струк­турі є файл interest.htm, а на панелі навігації – його сторінка, як гіперпосилання під назвою interest). Щоб змінити англійські назви кнопок панелі навігації на українські (чи російські) вико­найте такі дії:

• відкрийте цю сторінку, тобто 2 рази на файлу interest.htm (на структурі Folder list),або утримуючи клавішу <Ctrl> клац­ніть по назві сторінки на панелі навігації;

• встановіть курсор на назві сторінки interest (з’явилась вго­рі тексту) і клацніть 2 рази : відкриється діалогове вікно Page Banner Properties;

• в поле Page Banner Properties (текст банера сторінки) за­мість назви сторінки interest введіть відповідне українське слово Інтерес і натисніть кнопку OK.

Сторінка матиме вигляд як на рисунку 2.

Рис. 2. Вигляд Web-сторінки після зміни її назви

Як бачимо, змінилась не лише назва відкритої сторінки, але і відповідна назва кнопки на панелі навігації (горизонтальна па­нель навігації під назвою сторінки).

Між іншим, якщо вернутись на домашню сторінку (клацнув­ши у вікні Інтереси по кнопці Home на горизонтальній панелі навігації), то побачимо, що і на вертикальній панелі навігації Домашньої сторінки є відповідна українська назва, тобто зміна буде на всіх сторінках Web-вузла.

Зауважимо також, що поняття банер (Page Banner) – це об’єкт, який використовується для відображення в графічному вигляді заголовків Web-сторінок.

Таким чином, можна змінити назву всіх кнопок, але крім назви кнопок Home.

Щоб змінити на панелі навігації назву кнопки переходу на Домашню Web-сторінку, необхідно виконати таку послідовність дій:

• вибрати з меню (вікна MS Front Page) опцію Tools (сервіс) і клацнути по команді Web Settings (установка Web-вузла).

• у діалоговому вікні Web Settings, що з’явиться виберіть вкладинку Navigation;

• в текстове поле Home page замість англійського слова Home (додому) введіть відповідне українське слово і клацніть по кнопці OK.

Зауважимо, що в цьому ж діалоговому вікні можна змінити назви кнопок, які дозволяють переміщуватись по сторінках од­ного рівня – Назад, Попередня, Наступна.

Форматування на Web-сторінці тексту (завдання шрифту, його кольору, інтервалу між рядками, відступи для абзацу, ви­рівнювання, величина полів тощо) використовуйте Панель ін­струментів Formatting і команди з меню Format.

Додавання до Web-вузла нової сторінки. Діалогове вікно New (див. рис. 4), яке відкривається при ство­ренні нового Web- вузла командами File-New-Web містить шаб­лони, які пропонують створити або порожній, або односторінковий Web-вузол. Необхідна для розміщення інформації кількість сто­рінок ми додаємо до Web-вузла самостійно. Для цього існує де­кілька способів, а саме:

• при натисненні на кнопку New на стандартній панелі ін­струментів і виборі команди Page (сторінка) з’явиться шаблон Normal Page (звичайна Web-сторінка);

• при виборі команди: File – New – Page;

• при одночасному натисненні клавіш <Ctrl+N>.

У останніх двох випадках ми попадаємо в звичайне для нас вікно New зі списком шаблонів Web-сторінок типу One column body і т.д.

У результаті додавання нової сторінки до Web-вузла в правій панелі FrontPage з’явиться порожня Web-сторінка з назвою: newpage1.htm (див. рис. 3).

Рис. 3. Порожня Web-сторінка new_page.1htm

Це вказує на те, що це є перша створена Вами сторінка з мо­менту запуску програми Front Page. Наступні сторінки, що бу­дуть створені, матимуть назви: new_page_2.html, new_page_3.htm і т. д.

Створивши цю сторінку можна зразу ж вносити в неї інфор­мацію.

Після завершення роботи необхідно обов’язково зберегти цю сторінку, скориставшись командою: File-SaveAs (зберегти в) і в діалоговому вікні SaveAs виберіть в полі Save in свій Web-вузол, а в полі імені сторінки буде new_page_1.htm і клацніть по кнопці Save, тобто все так, як і в усіх додатках MS Office. Назва сто­рінки збережеться з розширенням .html і ми її бачимо в області Folder list.

Створення нових Web-сторінок за допомогою шаблонів і майстрів. Для перегляду таких шаблонів і майстрів необхідно скорис­татися командами: File – New – Page.

У результаті таких дій з′явиться діалогове вікно New (див. рис. 4), на вкладинці General (основні) якого вказані всі імена шаблонів, наприклад: One – column Body інформація розміща­ється в одну колонку по центру сторінки; One – column Body with Contents on Left (або Right) – інформація буде зліва (або справа) і зміст відповідно справа або зліва; Three column Body сторінка містить заголовок і текст в три колонки; Two – column Body – сторінка містить заголовок і текст в дві колонки; Two – co­lumn Body with Contents on Left – сторінка містить заголовок і текст в дві колонки по центру, а зліва – зміст тощо.

Рис. 4. Вікно для вибору шаблона створюваної Web-сторінки

Завдання

1.Створіть типовий Web-вузол за допомогою шаблона багато­сторінкового персонального Web-вузла під назвою My_Web_Прізвище3.

2. Проаналізуйте його вміст: папок private і image, а також файли index.htm, favorite.htm, interest.htm та інші.

3. Після створення персонального Web-вузла My Web11 зро­біть наступне:

• вивчіть призначення об’єкту банер (Page Banner);

• знищіть звичайний текст (де є курсор у вигляді верти­кальної лінії), що є в робочій області, на текст про свою групу (назва групи, кількість студентів, староста тощо);

• змініть властивості об’єкту (на яких курсор приймає вигляд руки), наприклад, дати: клацніть два рази по даті і в діалоговому вікні Date and Time Properties змініть формат дати;

• змініть в панелі навігації (вертикальна смужка зліва в робочій області Web-сторінки) англійські слова Interest та Photo, на відповідні слова українською мовою – Захоплення і Фото­графії, використовуючи для цього такі дії: відкриття сторінки, наприклад, Interests.htm виклику вікна Page Banner Properties клацнувши 2 рази по назві сторінки в робочій області і введення слова Захоплення в поле Page Banner Text замість слова Interests;

• змініть назву сторінки Home Page на Домашня сторін­ка, використовуючи команди: Tools (сервіс);

• Web-setting (установки Web-вузла) і в діалоговому вікні Web-setting на вкладинці Navigation зробити відповідні зміни.

1. Зробіть декілька переміщень по сторінках Web-вузла і про­аналізуйте результати дій.

2. Збережіть персональний сайт як My_Web_Прізвище3 в особистій мережній папці.