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


Задання 3. Створення Web-вузлів за допомогою майстрів і шаблонів

У даному завданні будуть розглянуті лише шаблони створення Web-вузлів та Web-сторінок оскільки майстри створення Web-еле­ментів були детально розглянуті в методичних рекомендаціях “Сучасні комп’ютерні технології”1[1].

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

Домашня сторінка повинна мати Заголовок, опис розділів Web-вузла.

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

Шаблон – це сукупність параметрів документа для його бага­торазового використання, тобто це каркас Вашого документа. Вибравши, наприклад, шаблон One-columnbody, Ви одержите Web-сторінку, на якій інформація буде розміщена по центру в одну колонку; в інших шаблонах заздалегідь виділені області для розміщення тексту, графіки тощо.

Для створення Web-сайтів за допомогою шаблонів необхідно відкрити спеціальне вікно New (див. рис. 4).

Рис 4. Діалогове вікно New

  1. 1.  Шаблони створення односторінкового Web-вузла(Web-сайту):

  • –      в меню File (файл) виберіть команду New (новий);

  • –         в підменю, що з’явиться, виберіть команду Web(Web-вузол);

  • –      у діалоговому вікні New, що з’явиться, виберіть зі спис­ку шаблонів One page Web (одно сторінковий Web-сайт);

  • –      у полі Specify the locationof the new Web (вкажіть роз­міщення нового Web-вузла) введіть місце розташування і ім’я Web-вузла, що створюєте;

  • –      натисніть кнопку ОК.

При використанні односторінкового шаблону створення Web-вузла, програма FrontPage 2000 сама формує його структу­ру з декількох папок (private, image…), а також додає паралель­но з папками одну пусту Web-сторінку(index.htm).

Створений Web-вузол відкривається в режимі редагування (див. рис. 5).

Рис. 5. Область FolderList створеного Web-вузла

з використанням шаблону OnePageWeb

Вікно розділене на дві частини – панелі: зліва – панель па­пок – це і є структура Web-вузла, справа – робоча область FrontPage, в якій відкривається файл – пуста Web-сторінка(index.htm), зви­чайно це і буде Домашня сторінка.

У подальшому структуру односторінкового Web-вузла можна змінювати, додаючи до нього нові папки і сторінки.

  1. 2.  Шаблон створення пустого Web-вузла.

Для створення такого вузла використовується шаблон EmptyWeb (див. рис. 4), при цьому програма FrontPage формує струк­туру Web-вузла, що також складається з папок private і image, але в структурі ми не бачимо жодної сторінки.

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

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

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

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

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

  • –    у діалоговому вікні New, в папці SpecifyThelocationofnewwebвведіть місце розташування сайту, його ім’я, наприклад, Pers-Web, а зліва, в цьому ж вікні, клацніть два рази на іконі PersonalWeb: через деякий час на екрані з′явиться одержаний Web-вузол (див. рис. 6) для його перегляду і редагування.

 

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

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

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

  1. 4.  Модифікація персонального Web-вузла.

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

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

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

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

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

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

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

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

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

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

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

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

  • –    вибрати з меню (вікна MSFrontPage) опцію Tools (сервіс) і клацнути по команді WebSettings (установка Web-вузла).

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

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

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

  1. 5.  Створення Web-сторінок за допомогою шаблонів і майстрів.

Для перегляду таких шаблонів і майстрів необхідно скорис­татися командами:FileNewPage.

У результаті таких дій з′явиться діалогове вікно New (див. рис. 8), на вкладинці General (основні) якого вказані всі імена шаблонів, наприклад: OnecolumnBody інформація розміща­ється в одну колонку по центру сторінки; OnecolumnBodywithContentsonLeft (або Right) – інформація буде зліва (або справа) і зміст відповідно справа або зліва; ThreecolumnBody сторінка містить заголовок і текст в три колонки; TwocolumnBody – сторінка містить заголовок і текст в дві колонки;Twoco­lumnBodywithContentsonLeft – сторінка містить заголовок і текст в дві колонки по центру, а зліва – зміст тощо.

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

  1. 6.  Додавання до Web-вузла нової сторінки.

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

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

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

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

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

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

Рис. 9. Пуста Web-сторінка new_page.1htm

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

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

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

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

Тема. Створення Web-вузлів за допомогою шаблонів.

Мета: дати студентам практичні навички по створенню Web-вуз­лів, використовуючи для таких цілей арсенал шаблонів програ­ми FrontPage.

Завдання

    1. 1.  Створіть типовий Web-вузол за допомогою шаблону односторінковий (One_Page_Web) під іменем My_Web10 і проаналі­зуйте вміст папок вузла.

    2. 2.  Додайте ще одну папку під назвою Papka 1.

    3. 3.  Додайте до створеного Web-вузла ще одну пусту сторінку під назвою MyList.

    4. 4.  Відкрийте сторінку My_List, напишіть інформацію про себе (коротку автобіографію), відформатувавши (як і у Word) текст за своїм смаком (різні шрифти, їх колір, накреслення, інтервалів, зміщення, відступів тощо).

    5. 5.  Відкрийте у вашому Web-вузліMy_Web10домашню сторін­ку index.htm, клацнувши в Folderlist два рази по імені файла, і введіть в робочу область сторінки назву, наприклад, Моя власна сторінка.

    6. 6.  Створіть типовий Web-вузол за допомогою шаблона пустий Web-вузол(EmptyWeb) і проаналізуйте його вміст: там відсутні сторінки, є лише дві папки private і image.

    7. 7.  Створіть типовий Web-вузол за допомогою шаблона багато­сторінкового персонального Web-вузла під назвою MyWeb11. Проаналізуйте його вміст: папок private і image, а також файли index.htm, favorite.htm, interest.htm та інші.

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

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

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

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

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

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

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

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

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

  2. 3.  Створіть за допомогою шаблонів створення Web-сторінок (команди File – New – Page), які є в діалоговому вікні New (вкла­динка General – Основна), сторінки:

  • –       Normal Page (пуста сторінка);

  • –       One – column Body (інформація в одну колонку);

  • –       Two – column Body (є заголовок і інформація в дві ко­лонки);

  • –       Two – column Bodyurth Contents on Left (зліва заголовки, а по центру інформація в дві колонки).

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

  1. 1.  Що значить Планування Web-вузла?

  2. 2.  Для чого необхідно розробляти структуру Web-вузла?

  3. 3.  Що таке шаблон, а що таке майстер (для створення Web-сай­тів, Web-сторінок та фреймів)?

  4. 4.  Які шаблони для створення Web-вузла Ви знаєте?

  5. 5.  Які дії необхідно виконати, щоб відкрити вікно New, в яко­му є список шаблонів створенню Web-вузлів?

  6. 6.  Чим характерні односторінковий, пустий та персональний Web-вузли, який їх вміст?

  7. 7.  Яким чином створюються вищезазначені вузли?

  8. 8.  Що таке Панельнавігації?

  9. 9.  Яким чином можна модифікувати, наприклад, Персональ­ний Web-вузол?

  10. 10. Що таке Банер(Banner)?

  11. 11. Як викликати діалогове вікно Page Banner Properties для зміни назв заголовків Web-сторінок?

  12. 12. Яким чином можна змінювати назву домашньої Web-сто­рінки?

  13. 13. Назвіть декілька шаблонів створення Web-сторінок?

  14. 14. Яким чином викликається діалогове вікно New, в якому можна переглянути всі шаблони створення Web-сторінок?

Література: 1, С. 142-147; 2, С. 207-263, 271-300; 3, С. 342-378.

Задання 4. Створення текстових і графічних гіперпосилань

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

Розглянемо ці питання дещо детальніше.

  1. 1.  Створення гіперпосилань (І метод).

Розглянемо створення гіперпосилань на прикладі переходу з домашньої сторінки на інщі Web-сторінки:

  • –    відкрийте створений Web-вузол;

  • –    розмістіть на домашній сторінці будь-який список, еле­менти якого будуть використовуватись для переходу на інші сторінки, як назви цих сторінок;

  • –    виділіть перший елемент списку і виконайте команду: (або Insert (вставити) – Hyperlink (посилання); або контекстне меню і команда Hyperlink; або натисніть відповідну кнопку на панелі інструментів);

  • –    в діалоговому вікні CreateHyperlink (створити гіперпо­силання) в списку Look in (шукати в) є наш Web-вузол, а ниж­че – список всіх його сторінок;

  • –    виберіть з цього списку такуWeb-сторінку, на яку створю­єте гіперпосилання: її назва перейде в поле URL, яке знахо­диться під списком (див. рис. 10).

Рис. 10. Діалогове вікно CreateHyperlink

  • –    Натисніть кнопку ОК.

  • –    Збережіть цю Домашню сторінку, на якій ви створили список.

  • –    Перегляньте цю домашню сторінку – перший елемент спис­ку змінив колір і підкреслений, це і є ознака гіперпосилання.

  • –    Таким чином, ми зробили гіперпосилання на іншу сторін­ку нашого Web-вузла (наприклад, перший елемент списку – це ім’я першої Web-сторінки нашого Web-вузла).

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

Зауважимо, що переглянути дію гіперпосилання можна і в режимі редагування Normal, але для цього необхідно додатково тримати клавішу /I>Ctrl> перш ніж клацнути на гіперпосиланні.

Крім того, слід відмітити, що в діалоговому вікні CreateHyperlink є ще два поля:

  • –    Bookmark – для введення імені закладки, на яку створю­ється гіперпосилання.

  • –    TargetFrame – для введення імені цільового фрейму, в який буде завантажуватись сторінка, що вказана в гіперпосиланні.

  1. 2.    Створення гіперпосилань методом DragandDrop (ІІ метод):

  1. 1)    відкрийте свій Web-вузол;

  2. 2)      виконайте команду View (вид) – FolderList (список папок);

  3. 3)    відкрийте в робочій області сторінку, на якій буде гі­перпосилання на іншу сторінку;

  4. 4)    в області FolderList встановіть і утримуйте курсор на тому файлі чи сторінці, на яку перейдемо по гіперпосиланню;

  5. 5)    перенесіть об’єкт в те місце відкритої Web-сторінки, де буде гіперпосилання;

  6. 6)    відпустіть кнопку миші: в цьому місці створюється гі­перпосилання і з’являється текст, який відповідає назві сторін­ки, на яку переходимо по гіперпосиланню; скорочуйте його, на­стільки, щоб текст був виділений і підкреслений.

  1. 3.  Створення закладок

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

  • –    виділіть слово в тому місці, де буде закладка;

  • –    в меню Insert (вставити) виберіть команду Bookmark (закладка);

  • –    в діалоговому вікні Bookmark (в якому є список всіх закла­док поточної сторінки) введіть в поле Bookmark name (ім’я за­кладки) її назву (див. рис. 11);

  • –    клацніть по кнопці ОК;

  • –    перегляньте тепер текст Web-сторінки: текст-закладка ви­ділена пунктирним підкресленням.

Рис. 11. Діалогове вікно Bookmark

  1. 4.  Створення гіперпосилань на закладку поточної сторінки:

  • –      перед великим текстом Web-сторінки створіть список елементів, які в подальшому будуть гіперпосиланнями на певні місця Web-сторінки;

  • –      на початку якогось абзацу створіть закладку: виділіть перше слово абзацу і виконайте команду Insert-Bookmark, в д/в Bookmark введіть назву закладки і натисніть ОК;

  • –      аналогічним чином створіть ще одну закладку;

  • –      закрийте діалогове вікно Bookmark;

  • –      перейдіть на початок Web-сторінки ;

  • –      виділіть перший елемент списку і виконайте команду: (або Insert-Hyperlink; або викличте контекстне меню на виділе­ному слові і виконайте команду Hyperlink);

  • –      у діалоговому вікні CreateHyperlink (див. рис. 10) від­крийте список Bookmark і виберіть назву першої закладки: в полі URL перед іменем закладки з’явиться символ решітки “#” -, рисунок 12.

Рис. 12. Діалогове вікно CreateHyperlink

Зауважимо, що при створенні гіперпосилання на закладку, яка розміщена на іншій сторінці, символ решітки розділяє назву сторінки, на якій розміщена закладка і назву закладки;

  • –     Натисніть кнопку ОК.

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

Перевірте дію гіперпосилання: утримуючи клавішу /I>Ctrl>, клацніть спочатку на першому гіперпосиланні: перейдете на першу закладку, потім перейдіть на початок тексту і клацніть по другому гіперпосиланні.

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

  • –      відкрийте будь-яку сторінку Web-вузла;

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

  • –      створіть закладку командами: Insert-Bookmark;

  • –      в діалоговому вікні Bookmark (див. рис. 11) введіть назву закладки і натисніть кнопку ОК;

  • –      відкрийте ДомашнюсторінкуWeb-вузла;

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

  • –      виділіть цей текст і відкрийте діалогове вікно CreateHyperlink (див. рис. 10), командою: Insert-Hyperlink (або скорис­тайтесь контекстним меню –Hyperlink);

  • –      в списку Web-сторінок виберіть сторінку, на якій ство­рили закладку: її ім’я перейде в поле URL;

  • –      нижче в цьому ж вікні відкрийте список Bookmark і ви­беріть назву закладки: в полі URL після імені сторінки (на якій є закладка) розташувався символ решітки “#”, а за нею – назва самої закладки (див. рис. 13);

  • –      натисніть кнопку ОК.

Перевірте дію гіперпосилання: відкрийте ДомашнюWeb-сто­рінку, утримуючи клавішу /I>Ctrl>, і клацніть по гіперпосиланню.

Рис. 13. Діалогове вікно CreateHyperlink при створенні гіперпосилання на закладку іншої сторінки Web-вузла




Похожие документы:

  1. Інформація про надання грифів міністерства освіти і науки 2010 рік

    Документ
    ... слядипломної освіти; Т.А. Писаревська « Інформаційні системи в управлінні персоналомтаекономікипраці» (№1/11-3064 від 13.04.10 ... вський державний інститут економіки і управління. - Тоцька О.Л. «Інформаційні системи в інноваційній діяльності» (№1/11 ...
  2. Інформація про надання грифів міністерства освіти і науки 2010 рік

    Документ
    ... слядипломної освіти; Т.А. Писаревська « Інформаційні системи в управлінні персоналомтаекономікипраці» (№1/11-3064 від 13.04.10 ... вський державний інститут економіки і управління. - Тоцька О.Л. «Інформаційні системи в інноваційній діяльності» (№1/11 ...
  3. Інформаційні системи в менеджменті

    Документ
    ... інститут економіки ринкових відносин та менеджменту (ХІНЕМ) ІНФОРМАЦІЙНІ СИСТЕМИ В МЕНЕДЖМЕНТІ Завдання та методичні ... та оперативне використання персоналу організації; постійні співробітники, навчання персоналу. Фінансові інформаційні системи: управл ...
  4. Формування ринкової економіки

    Документ
    ... «Управління персоналомтаекономікипраці». 2008 року секцію перейменовано на Підкомісію з управління персоналомтаекономікипраці НМК з економікита підпри ...
  5. Київський університет туризму економіки і права «основи готельного менеджменту»

    Документ
    ... автоматизації управлінської діяльності Сучасні системи Інтернет-бронювання Глава 7. Сучасні інформаційні технології в управлінні ... готелю та інтересів працівників, економічної і соціальної ефективності; - підвищення ефективності управління персоналом ...

Другие похожие документы..