Тема: Створення електронних учбово-інформаційних видань. Розробка елементів навігації і оформлення

Позначка: Виробити практичні навики по використанню графічних елементів, колірному оформленню і використанню основних компонентів Web-сторінок за допомогою засобів Microsoft FrontPage.

Порядок виконання роботи:

1. Уключіть комп'ютер.

2. Запустите додаток Microsoft FrontPage (група Microsoft Office).

3. Відкрийте домашню сторінку створеного вами Web-сайту групи.

4. Виберіть стиль оформлення сторінки, скориставшись однією із стандартних тім.

Скористайтеся меню Формат/ Тема. (Format/ Theme.) і в діалоговому вікні Тими (Themes), що з'явилося, у спискові тім (зліва) виберіть потрібний вам шаблон. Застосуєте його до поточної сторінки або до всіх сторінок сайту, скориставшись перемикачами в лівому верхньому куткові вікна, розташованими під заголовком Застосувати Тему: (Apply Theme to:).

Ви можете також змінити деякі стандартні елементи тими, вибравши або відключивши опції Яскраві кольори (Vivid colors), Включити графіку (Active graphics), Тло (Background picture). Для зміни стандартних шрифтів, кольорів, фонового малюнка й ін. т.п. елементів тими можна використовувати кнопку Змінити (Modify).

5. Створіть загальні полючи для сторінок вашого Web-сайту.

У меню Формат (Format) виберіть компонент Загальні Поля. (Shared Borders.). У діалоговому вікні, що з'явилося, у розділі Застосувати до: (Apply to:) виберіть Усі сторінки (All pages). Виберіть Верхнє (Тор) і Ліве (Left) полючи, для шкірного поля проставте прапорці біля рядків Включити кнопки навігатора (Include navigation buttons). Натискуйте кнопку ОК. Перевірте, чи змінився зовнішній вигляд усіх сторінок вашого сайту, які нові компоненти сторінки додалися (Банер (заголовок) сторінки (Page Banner), Панелі Навігатора (Navigation Bars) на лівому і правому полях).

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

6. Змініть властивості однієї з панелей навігатора.

Аби змінити властивості Панелі Навігатора (Navigation Bar), виділите її на робочому полі сторінки і виберіть у меню Формат пункт Властивості. (Format/ Properties.). У вікні Властивості Панелі Навігатора (Navigation Bar Properties), що з'явилося, у розділі Гіперпосилання на сторінки (Hyperlinks to add to page) виберіть категорію (рівень) сторінок, гіперпосилання на яких ви хочете бачити на Панелі Навігатора. У розділі Орієнтація і вигляд (Orientation and appearance) виберіть горизонтальну (Horizontal) або вертикальну (Vertical) орієнтацію панелі і вигляд гіперпосилань: текст (Text) або кнопки (Buttons).

Відмітьте, що для створення додаткової панелі навігатора необхідно скористатися меню Вставка/ Панель Навігатора (Insert/ Navigation Bar) і задати властивості панелі у вікні властивостей, що з'явилося.

7. Поверніться на домашню сторінку і створіть таблицю наступного вигляду:

Для створення таблиці скористайтеся меню Табліца/ Вставіть/ Таблицю. (Table/ Insert/ Table.). У діалоговому вікні, що з'явилося, Вставка Таблиці (Insert Table) у розділі Розмір (Size) задайте необхідне число рядків і стовпців у полях Рядка: (Rows:) і Стовпці: (Columns:). У розділі Положення (Layout) задайте Вирівнювання (Alignment) по центрі (center); Розмір кордонові (Border Size) покладете рівним нулеві; встановите Наповнення вічок (Cell padding) рівне одиниці і Відстань між вічками (Cell spacing) рівна двом. Натискуйте кнопку ОК. Звернете увагу, що ви завжди можете змінити указані вище властивості для існуючої таблиці, скориставшись меню Табліца/ Властивості/ Таблиці (Table/ Properties/ Table) або Табліца/ Властивості/ Вічка (Table/ Properties/ Cell).

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

Для вставки графічного зображення скористайтеся меню Вставка/ Картінки/ З файлові. (Insert/ Picture/ From file.). У вікні, що з'явилося, виберіть файл графічного зображення із спискові, якщо він знаходиться в одній з каталогів вашого сайту. Інакше скористайтеся кнопкою Вибрати файл на вашому комп'ютері (Select file on your computer), розташованою праворуч від полючи введення адреси (URL:).

Після появи всіх графічних зображень на потрібних місцях вашої сторінки збережете її (меню Файл/ Зберегти (File/ Save)). Перед вами з'явиться діалогове вікно Збереження Вкладених файлів (Save Embedded Files). Збережете файли із запропонованого спискові в підкаталог images вашого Web-сайту (використовуйте кнопку Змінити течу. (Change folder.), якщо це необхідно).

8. Створіть гіперпосилання для переходові до персональних сторінок по фотографіях студентів і перевірте їх роботі.

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

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

10. Створіть на своїй сторінці список, що стискується, наприклад такого вмісту:

• Детальніша інформація про Іванова

  • навчання

  • захоплення

  • суспільне життя

У вихідному стані видно лише перший рядок спискові («Детальніша інформація про Іванова»), при клацанні лівою клавішею миші на маркері першого рядка стають видно категорії інформації (другий рівень спискові).

Для створення спискові, що стискується, скористайтеся меню Формат/ Список. (Format/ Bullets and Numbering.) і у вікні Властивостей Спискові (List Properties), що з'явилося, у розділі Маркери (Pictures) виберіть вигляд маркерів спискові. Рекомендується вибирати маркери з використовуваної тими (Use pictures from current theme).

Створіть звичайний багаторівневий список (пригадаєте багаторівневі списки в редакторові Microsoft Word).

Встановите курсор у рядкові першого рівня спискові і знову скористайтеся меню Формат/ Список. (Format/ Bullets and Numbering.). У вікні Властивостей Спискові (List Properties) включите опції Вирішити Стискування (Enable Collapsible Outlines) і Стислий При Вході (Initially Collapsed). Натискуйте кнопку ОК.

Перевірте роботові спискові, перемкнувши в режим Попереднього Переглядові (Preview).

11. Оголосіть гіперпосиланнями рядка іншого рівня вашого спискові, що стискується.

При завданні адреси сторінки для заслання користуйтеся кнопкою Створити зв'язану сторінку (Create а page and link to the new page), розташованою праворуч від полючи введення адреси (URL:). Збережете створені сторінки під відповідними іменами (наприклад, навчання_іванова.htm і тому подібне) і, перемкнувши в режим Навігатора (Navigation View), внесіть їх на відповідні місця в ієрархії сторінок вашого Web’a.

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

Контрольні питання:

1. Які елементи розташовуються на загальних полях сайту?

2. Яким чином можна помістити графічну інформацію на сторіночку Вашого сайту?

3. Яким чином можна змінити властивості панелей навігатора

4. Як можна змінити оформлення Web, задане при використанні стандартної тими Microsoft FrontPage?

5. Яким чином можна створити макет Web- сторінки (задати розташування текстових, графічних і ін. елементів)?

6. Яким чином перевіряється працездатність електронного ресурсові, що створений Вами?

7. Яка повне ім’я головної сторінки Вашого сайту?