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

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

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

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

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

Фрейми – один з потужних засобів представлення інформа­ції на Web-вузлах.

Фрейми дозволяють розбивати Web-сторінки на окремі пря­мокутні області, в кожній з яких віддзеркалюються окремі сто­рінки, наприклад, у фреймі з двох областей можна відтворити: зліва глави з гіперпосиланнями на сторінки Web-вузла, а спра­ва – самі Web-сторінки, які вибрані по гіперпосиланнях.

Інформація про сторінки, що входять в склад фреймів, збері­гається на окремій сторінці – фреймсеті.

Шаблони фреймів

Шаблони фреймів прискорюють їх створення. Список шабло­нів наведений на рис. 1. Наступними діями виберіть команду: File (файл) – New (но­вий) – Page (сторінка): виберіть в д/в New, що з′явиться, Frame Pages (сторінки фрейма), отримайте 10 шаблонів, основні з них наступні: Banner and Contents – створюється шаблон з заголовком, змістом, і областю відтворення інформації; Contents – створюється шаблон зі змістом і областю відтворення інформації; Header, Footer and Contents – створюється шаблон з областями заголовка, відображен­ня інформації, верхнього та нижнього колонтитулів; Top – Down Hierarchy – створюється три області, які розділені горизонталь­ними лініями; Footer і Header – створюється дві області: область основної інформації і нижній або верхній колонтитул; Vertical Split – створюються дві області, які розділені вертикальною лі­нією; Horizontal Split – створюються дві області, які розділені горизонтальною лінією; Nested Hierarchy – створюються три області: змісту, відображення інформації і верхній колонтитул.

Для перегляду будь-якого шаблона використовується область Preview. Виберіть шаблон і клацніть по ньому два рази або на­тисніть кнопку OK – сторінка розбита на відповідні області з двома кнопками в кожній:

• Set Initial Page – для відкриття д/в Create Hyperlink, яке дозволяє вказати сторінку, яка розміститься в даній області фрейму при його відкритті;

• New Page – для завантаження в фрейм нової сторінки шаб­лона Normal.

Рис. 1. Діалогове вікно New зі списком шаблонів

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

Створення фрейму

Для створення Web-вузла, в склад якого входить фрейм, необ­хідно:

1. створити порожній Web-вузол;

2. створити три сторінки, які будуть завантажуватись по за­мовченню в три області фрейму: одну – як заголовок вгорі, дру­гу – як сторінку, де розміститься зміст (зліва), третю – основну де розміщуватимуться сторінки, що будуть завантажуватись зі змісту;

3. створити сторінки, які будуть розміщуватись в основній області фрейму при виборі назв сторінок в області змісту; кіль­кість сторінок визначається списком змісту;

4. розмістити у Web-вузол фрейм;

5. зв’язати області фрейму зі сторінками, які будуть в них за­вантажуватись по замовченню;

6. Зв’язати елементи списку в змісті зі сторінками, які будуть завантажуватись для перегляду в основній області фрейму.

Управління фреймами

1. Зміна розмірів фрейму простіше за все робиться за допо­могою миші: встановіть курсор на межу двох фреймів і, коли курсор прийме вигляд двонапрямленої стрілки, переміщуйте об­ласть фрейму в потрібному напрямку.

2. Додавання нового фрейму:

• натисніть і утримуйте клавішу <Ctrl>;

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

• натисніть ліву клавішу миші і переміщуйте курсор у потрібну сторону до створення області певного розміру;

• відпустіть клавішу <Ctrl> і кнопку миші.

Новий фрейм містить, як завжди, дві кнопки – Set Initial Page (установка початкової сторінки) і New Page (нова сторінка), які будуть завантажені в створену область фрейму.

2. Знищення фрейму з фреймсету виконується наступним чином:

• встановіть на область, яка знищується, курсор;

• виконайте команди: Frame – Delete Frame.

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

Завдання

1. Створити Web-вузол, на сторінці якого розміс­титься фрейм з трьома областями Banner and Contents (заголо­вок, зміст, область відображення інформації).

Виконання:

1. створіть порожній Web-вузол командами: File – New – Web (Web-вузол); введіть в полі Specify the location of the new web ді­алогового вікна Web-sites (Web-вузли) назву і папку – розміщен­ня вузла, що створюємо, а потім клацніть два рази по шаблону Empty Web (порожній Web-вузол): відкриється порожній Web-вузол;

2. створіть сторінку, що розміститься в заголовку фрейма: File – New – Page і введіть заголовок в режимі редагування (вкладинка Normal у вікні FrontPage); збережіть її під назвою Banner-f.htm (що значить заголовок). Аналогічним чином ство­ріть ще дві сторінки: першу – де будуть заголовки Web-сторінок у вигляді списку під назвою Contents-f.htm та другу, в яку буде розташовуватись текст Web-сторінок, при їх виборі зі списку в основну область фрейма і збережіть її в файлі main-f.htm;

3. створіть дві сторінки назви яких будуть в змісті і які бу­дуть розміщуватись в основній області фрейму при виборі їх назв зі списку змісту (область заголовків сторінок), наприклад, першому пункту списку дайте назву Наш університет, а дру­гому – Гуртожитки. Підготуйте ці дві сторінки з відповідним списком (щось про університет і щось про гуртожитки) і збере­жіть першу в файлі під назвою universitet.htm, а другу в файлі під назвою gurt.htm;

4. всі сторінки готові, тепер їх необхідно буде розмістити в фрейм, що створимо;

5. додайте в Web-вузол новий фрейм, тобто Web-сторінку, яка буде розділена на області, в які завантажуються інші Web-сторін­ки (команди: File – New – Page): в діалоговому вікні New, що від­криється, перейдіть на вкладинку Frames Page і клацніть два ра­зи по значку шаблона Banner and Contents (див. рис. 2) – фрейм по шаблону Banner and Contents містить область заголовку, наз­ви глав (Web-сторінок) і область відображення основної інфор­мації (рис. 2).

Рис. 2. Вибраний шаблон фрейма Banner and Contents

6. зв’яжіть верхню область фрейму зі сторінкою, яка буде там розміщуватись при його завантаженні, тобто banner-f.htm:

• натисніть кнопку Set Initial Page, яка є в цій області;

• в діалоговому вікні Create Hyperlink, що з′явиться в полі URL введіть назву сторінки, яка містить заголовок: клацніть два рази по назві сторінки в рубриці Name цього вікна – заголовок сторінки з′явиться в URL;

• клацніть по OK: вікно закриється, а сторінка banner-f.htm з′явиться в верхній області фрейму;

• використовуючи кнопки Set Initial Page інших двох облас­тей фрейму, розмістіть в них створені Web-сторінки Contents-f.htm і main-f.htm.

На цьому розміщення Web-сторінок в області фрейму по за­мовченню завершено.

Тепер необхідно в області змісту (де є назви глав) створити гіперпосилання на сторінки, які за допомогою назв глав будуть переглядатися в третій основній області фрейму;

2. зв’яжіть елементи списку (назви глав) зі сторінками, які будуть переглядатись в правій основній області:

• в області глав виділіть назву першої глави Наш універси­тет (як перший елемент списку) і виберіть в його контекстному меню команду Hyperlink (гіперпосилання);

• в поле URL д/в Create Hyperlink введіть назву сторінки, яка відповідає першому пункту списку, тобто universitet.htm клац­нувши по цьому файлу два рази в області Name;

• для того, щоб сторінка universitet.htm завантажилась саме в праву область фрейму виконайте наступні дії: натисніть кнопку Change Target Frame (зміна цільового фрейму) в цьому ж вікні і в д/в Target Frame, що з′явиться (див. рис. 3) в області Current frames page (сторінка поточних фреймів) клацніть в правій області структури фрейму (або виберіть зі списку Common target слово Page Default (main);

Рис. 3. Діалогове вікно Target Frame

• клацніть по кнопці OK: вікно Target Frame закриється, і ви повертаєтесь до попереднього вікна Edit Hyperlink, в якому теж натисніть на кнопку OK;

• аналогічним чином для всіх елементів списку вкажіть наз­ви сторінок, що завантажуються і область цільового фрейму в яку ці сторінки будуть завантажуватись (в даному випадку всі сторінки завантажуються в праву основну область фрейму).

• збережіть фрейм (тобто сторінку з областями): команда Save As;

• перегляньте в Internet Explorer, через вкладинку Preview, вигляд створеного вами фрейму та перевірте дію гіперпосилань, які є в області змісту.

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