«Управління персоналом І економіка праці»

Вид материала

Навчально-методичний посібник

Содержание Практичне заняття 4 Домашньої Web-сторінки Завдання для самостійної і індивідуальної роботи студентів Контрольні питання Задання 5. Створення структури Web-вузла та панелі навігації Режим структури. Folder List Apply Changes Домашньої сторін­ки Web-сторінках Панелі навігації Домашньої сторінки Панелі навігації Navigation Bar Properties Hyperlink to add to page Домашній сторінці Orientation and Appearance Word для абзацу: виділіть і натисніть відповідну кнопку на Панелі інструментів Navigation Bar Properties Панель навігації Панелей навігації ... Полное содержание

Подобный материал:

• Робоча програма та методичні вказівки щодо проходження магістерської практики для студентів, 416.45kb.
• Інформація про програми Напрям підготовки 030505 „Управління персоналом та економіка, 102.35kb.
• Графік, 89.39kb.
• Управління персоналом І економіка праці, 28.54kb.
• Програма вступного іспиту зі спеціальності 050109 «Управління персоналом І економіка, 172.45kb.
• Програма фахового вступного випробування з англійської мови, 63.05kb.
• Освітня програма підготовки магістра за спеціальністю «Управління персоналом І економіка, 14.54kb.
• Освітня програма підготовки бакалавра за напрямом «Управління персоналом І економіка, 33.27kb.
• Програма фахового вступного випробування для зарахування на навчання за окр «бакалавр», 173.16kb.
• Програма вступних випробувань за спеціальністю „Управління персоналом та економіка, 436.27kb.

Практичне заняття 4

Тема. Створення різноманітних текстових та графічних гіпер­посилань, закладок та їх корегування

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

Завдання

1. 
   1.   Створіть гіперпосилання, за допомогою яких можна пере­ходити з Домашньої Web-сторінки на інші на прикладі створе­ного Web-вузла, розмістивши на Домашній сторінці довільний список, (наприклад, назва Ваших Web-сторінок) елементи якого будуть використовуватись для переходу на інші сторінки, як їх назви.
   
2. 2.   Створіть гіперпосилання методом Drag and Drop для пе­реходу з Домашньої сторінки на другу в списку Web-сторінки (див. завдання 1) і скорегуйте текст гіперпосилання таким чи­ном, щоб він був виділений і підкреслений.
   
3. 3.   Створіть закладки на певне місце в тексті першої Web-сто­рінки.
   
4. 4.   Створіть гіперпосилання на початку тексту під назвою Кінець тексту, а в кінці тексту створіть гіперпосилання під назвою На початок тексту для переходу на початок Web-сто­рінки встановивши і відповідні закладки в цих місцях.
   
5. 5.   Створіть на Домашній сторінці гіперпосилання для пере­ходу на закладку на другій Web-сторінці.
   
6. 6.   Знищіть створені закладки і гіперпосилання.
   

Завдання для самостійної і індивідуальної роботи студентів

1. 
   1.  Розмістіть в середині першої сторінки, наприклад Домаш­ньої, рисунок з бібліотеки Clip Art, який буде слугувати для пе­реходу на другу Web-сторінку нашого Web-вузла (якщо така від­сутня – створіть і розмістіть її в кінці Image).
   
2. 2.  Створіть для цього рисунку гіперпосилання для переходу на ту Web-сторінку, яка є в папці Image за допомогою команд: контекстне меню на об’єкті – команда Picture Properties – вкла­динка General і натисніть по кнопці Browse; в д/в Edit Properties виберіть зі списку назву другої сторінки.
   
3. 3.  Перегляньте всі гіперпосилання Web-вузла за допомогою команд View (вид) Hyperlink (гіперпосилання).
   
4. 4.  Проаналізуйте всі етапи самостійної роботи і при необ­хідності створіть ще одне графічне гіперпосилання але вже з будь-якої сторінки Web-вузла на Домашню.
   

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

1. 
   1.   Що таке гіперпосилання?
   
2. 2.   Які методи створення гіперпосилань Ви знаєте?
   
3. 3.   Які елементи в тексті свідчать про наявність в ньому гі­перпосилань?
   
4. 4.   Яка технологія створення гіперпосилань методом Drag and Drop?
   
5. 5.   Що таке закладка і для чого вона створюється?
   
6. 6.   Яка технологія створення гіперпосилань на закладку по­точної сторінки?
   
7. 7.   Яка технологія створення гіперпосилань на закладку іншої Web-сторінки?
   
8. 8.   Яким чином можна знищити закладку і гіперпосилання?
   
9. 9.   Яка технологія створення графічних гіперпосилань?
   
10. 10. Яким чином можна переглянути всі гіперпосилання?
    

Література: 1, С. 41-50; 2, С. 302-328; 3, С. 240-262; 4, С. 579-602.

Задання 5. Створення структури Web-вузла та панелі навігації

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

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

Режим структури.

Для переходу в цей режим використовується кнопка Navigation на панелі режимів Views, або команда Navigation (навігація) з меню View (вид).

При виконанні цих дій в головному вікні програми FrontPage зліва з’явиться область Folder List зі структурою папок, а спра­ва – структура Web-вузла, в якій кожна сторінка має вигляд прямокутника з назвою в центрі, а зверху розміщена домашня Web-сторінка (див. рис. 16).



Рис. 16. Режим перегляду структури Web-сторінки

Зауважимо, що з самого початку розробки Web-вузла в режи­мі структури (команди View-Navigation) справа бачимо лише прямокутник домашньої Web-сторінки навіть якщо у Web-вузлі є декілька сторінок. Ми їх повинні розмістити у відповідний рі­вень ієрархії самостійно, використовуючи список Folder List, а саме: спочатку формують структуру верхнього рівня, а потім нижче розташовують дочірні сторінки, потім приступають до формування наступного рівня і т.д.

Дії для розміщення сторінки в структурі Web-вузла:

• –    в області Folder List встановіть курсор на файл-сторінку, яку переносимо в структуру справа;
  
• –    натисніть ліву клавішу миші і, утримуючи її, перемістіть файл в праву робочу область Front Page на відповідний рівень ієрархії: з’явиться лінія, яка зв’язує файл, що переміщуємо, з файлом верхнього рівня;
  
• –    відпустіть клавішу миші.
  

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

Слід пам’ятати також, що в структурі біля назв сторінок є значки “+” та “-“, які використовуються для перегляду вложених сторінок так само, як і в Провіднику в OS Windows для перегляду вложених папок. Тому і знищення і перейменування сторінок теж виконується аналогічно як і в Провіднику.

Для збереження структури, яку ми створили, необхідно ско­ристатися контекстним меню і виконати команду Apply Changes (застосувати зміни).

Панель навігації.

Панелі навігації, як і гіперпосилання, використовуються для переміщення між сторінками. Але, якщо гіперпосилання в ос­новному призначені для переходу на певне місце Web-сторінки, то Панель навігації – це декілька розміщених поруч посилань в певних місцях кожної сторінки (в верхніх або лівих їх частинах), які називаються загальними областями.

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

У випадку використання майстрів створення Web-вузлів, па­нелі навігації розміщуються на сторінках автоматично, в проти­лежному випадку – необхідно скористатися командами: Insert (Вставити) – Navigation Bar (панель навігації), при чому FrontPage використовує структуру Web-вузла, створену в режимі Navigation.

Створення панелей навігації.

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

Для розміщення на Web-сторінках Панелі навігації необхідно виконати наступні дії:

1. 
   1)  перейти в режим створення структури (команда Navigation на панелі режимів Views);
   
2. 2)  у центрі правої робочої області програми є прямокутник Домашньої сторінки. Використовуючи метод Drag and Drop по­чергово перенесіть Web-сторінки з області Folder List в Робочу область таким чином, щоб вони розмістились під Домашньою сторінкою і були з’єднані між нею і між собою лініями.
   
3. 3)  змініть назви сторінок, враховуючи, що саме ці назви дадуть назви кнопкам на Панелі навігації: викликайте почергово кон­текстне меню на прямокутниках сторінок і виконуйте команду Rename (перейменувати); на рисунку 17 показана карта навігації;
   
4. 4)  перейдіть в режим редагування Домашньої сторінки, клац­нувши по імені її файлу Index.php два рази;
   

Рис. 17. Карта навігації Web-вузла

5. 5)  на Домашній сторінці, яка відкрита в правій робочій об­ласті, установіть курсор у той рядок, в якому хочете бачити па­нель навігації;
   
6. 6)  виконайте команду: Insert (вставити) – Navigation Bar (па­нель навігації);
   
7. 7)  у діалоговому вікні Navigation Bar Properties (властивості панелі навігації) можна вказати вид Панелі навігації, яку форму­ємо (див. рис. 18); сторінка має дві області:
   

Рис. 18. Діалогове вікно Navigation Bar Properties

• –       верхня, під назвою Hyperlink to add to page (зв’язки, що додаються на сторінку), містить опції для розміщення гіпер­посилань на панелі навігації з метою переходу на певні сторінки батьківського (Parent level) чи поточного рівнів (Same level), а також гіперпосилання для переходу між сторінками того самого рівня (Back and Next), на сторінки дочірнього рівня (Child level), чи верхнього рівня; останнє гіперпосилання – для переходу на дочірні сторінки Домашньої Web-сторінки (Child pages under Home).
  

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

Опція (справа, під назвою Additional pages (сторінки, що до­даються), має два прапорці: Home page – додається зв’язок по­силання на Домашню сторінку; Parent page – додається зв’язок посилання на батьківську сторінку, але ці зв′язки нам не потріб­ні, так як ми знаходимось на Домашній сторінці і робимо зв′яз­ки на дочірні сторінки;

• –       нижня, під назвою Orientation and Appearance (орієнта­ція і вигляд) має по два перемикачі: перші для розміщення кно­пок панелі навігації горизонтально (Horizontal) чи вертикально (Vertical), другі – дозволяють створити гіперпосилання або у ви­гляді кнопок (Buttons), або у вигляді тексту (Text).
  

Виберіть опції Horizontal і Button;

8. 8)  натисніть кнопку OK: на Домашній сторінці з′явиться створена Панель навігації (див. рис. 19); вона містить гіперпоси­лання на всі сторінки крім, звичайно, домашньої, так само з неї робимо зв′язки до інших;
   
9. 9)  вирівняйте панель навігації точно по центру так, як це ро­биться в Word для абзацу: виділіть і натисніть відповідну кнопку на Панелі інструментів.
   

Тепер розмістіть в області редагування будь-яку сторінку ін­шого рівня (під Домашньою), клацнувши по ній в області Folder List два рази (по імені відповідного файла): сторінка заванта­житься в робочу область;

10. 10)  виконайте (тепер вже для цієї сторінки) дії аналогічні діям пунктів 5-9 тільки у вікні Navigation Bar Properties встановіть опцію Same level (той самий рівень) – для створення зв’язків між сторінками поточного рівня; для переходу на Домашню сторін­ку встановіть в області Additional Page (що вгорі справа) пра­порець біля Home Page, а в області Orientation and Appearance встановіть ті ж (що і для Домашньої сторінки) опції – Horizontal і Button, щоб кнопки Панелі навігації були по горизонталі;
    
11. 11)  Натисніть кнопку OK: на сторінці (див. рис. 20) з’явиться створена Панель навігації, яка містить гіперпосилання на всі сторінки Web-вузла, включаючи і Домашню;
    

Рис. 19. Домашня сторінка з розміщеною на ній Панеллю навігації



Рис. 20. Web-сторінка другого рівня

з розміщеною на ній Панеллю навігації

12. 12)  аналогічним чином можна розмістити Панель навігації і на інших сторінках.
    

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

Створення Панелей навігації закінчено.

Перевірте дію гіперпосилань, завантаживши Ваш Web-вузол в Internet Explorer.

Створення Панелей навігації з використанням загальних областей.

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

Створимо на Web-сторінках загальні області і на них розміс­тимо панелі навігації:

1. 
   1)  відкрийте створений Вами Web-вузол;
   
2. 2)  знищіть з його сторінок створені раніше панелі навігації;
   
3. 3)  відкрийте в режимі редагування (вкладинка Normal внизу робочої області) будь-яку Web-сторінку Вашого вузла;
   
4. 4)  для створення загальних областей сторінок в меню Format виберіть команду Shared Borders (загальні поля): на екрані з′я­виться діалогове вікно тієї ж назви (див. рис. 21);
   

Рис. 21. Діалогове вікно Shared Borders

для створення загальних областей сторінок

5. 5)  встановіть перемикач Apply to (застосувати до) в положен­ня All pages (всі сторінки ), що дозволить створити загальні об­ласті на всіх Web-сторінках, а не тільки на поточній (Current Page);
   
6. 6)  встановлення перемикача в положення All pages робить доступним і прапорці Include navigation buttons (включити кноп­ки навігації), які, при виборі установки загальних областей вгорі (Top) і зліва (Left), дозволяють автоматично розмістити панелі навігації в верхній або в лівій загальних полях Web-сторінок. Встановіть ці прапорці.
   
7. 7)  натисніть кнопку OK.
   

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

Проаналізуємо створене:

• –    відкрийте Домашню Web-сторінку: в її верхній частині є заголовок, під нею напис: , а зліва робочої області розміщена Панель навігації;
  
• –    клацніть в будь-якій зоні загальних областей, наприклад, на заголовку або на Панелі навігації: заголовок, напис під ним і панель навігації виділяться прямокутними рамками, що вказує на те, що це загальні області (див. рис. 22);
  
• –    встановіть курсор на заголовку сторінки і викличте кон­текстне меню, з якого виберіть команду Page banner properties (властивості сторінки банера), яка вказує що, при створені заго­ловка FrontPage використовує банер; у відповідному діалого­вому вікні можна змінити заголовок, а значить і назву кнопки навігації. Для зміни назви кнопки з посиланням на Домашню сторінку необхідно скористатись командою Tools (сервіс) – Web Setting (установка Web-вузла) і у відповідному вікні на вкладин­ці Navigation в поле Home Page ввести нову назву.
  

Для переходу з Домашньої сторінки на інші – використову­ється панель навігації, що розміщена зліва в загальній області; в ній є теж речення:

Edit the properties for this Navigation Bar to display hyperlinks here, яка вказує на можливість створення в цьому місці Панелі навігації для переходу на Web-сторінки 3-го рівня.

Відкрийте будь-яку іншу сторінку Web-вузла (рис. 23): вона містить в верхній області Панель навігації з посиланнями на сто­рінки поточного рівня і домашню сторінку.



Рис. 22. Розміщення загальних областей на Домашній сторінці



Рис. 23. Панель навігації, яка розміщена

на Web-сторінці другого рівня ієрархії

У лівій загальній області сторінки є той самий напис Edit the properties for this Navigation Bar to display hyperlinks here, який резервує місце під можливу панель навігації.

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

• –    додайте до Web-вузла нову сторінку Авто командою: File-New-Page;
  
• –    збережіть її командою Save;
  
• –    перейдіть в режим створення структури командою Панелі режимів Views-Navigation;
  
• –    перенесіть методом Drag and Drop цю нову сторінку з об­ласті Folder List в робочу область, зв’язуючи її з будь-якою сто­рінкою другого рівня ієрархії Інтерес;
  
• –    змініть назву цієї сторінки; на рисунку 24 надана нова кар­та навігації Web-вузла.
  

Рис. 24. Нова карта навігації Web-вузла зі сторінкою 3 рівня

• –    відкрийте в області редагування сторінку, яка є батьків­ською по відношенню до нової сторінки: верхня панель навігації не змінилась, а зліва в загальній області замість напису;
  
• –    Edit the properties for this Navigation Bar to display hyperlinks here з′явиться панель навігації, яка має посилання на дочірню Web-сторінку (див. рис. 25);
  
• –    відкрийте нову сторінку Web-вузла: FrontPage розмістила на ній заголовок, введений нами в режимі створення структури, а під ним – панель навігації, яка містить посилання для переходу на домашню сторінку і родинну сторінку, з якою вона зв’язана. Вам залишається лише розмістити на цій Web-сторінці необхід­ну інформацію.
  

Рис. 25. Web-сторінка, яка містить дві панель навігації