Створіть новий веб-документ.

Для цього виконайте команди File => New => закладка веб-pages => Newвеб-pages.

3. Увімкніть панель інструментів Frames (Рамки) і створіть фрейм ліворуч (25% від розміру вікна).

Для цього клацніть на другій кнопці New frame left і пере­суньте мишею межу фреймів вліво.

4. Проекспериментуйте з властивостями фреймів. Задайте межу фрейму невидимою, а смуги прокручування мають вмикатися за необхідністю. Дозвольте пересувати межу фреймів у броузері.

5. У лівому фреймі введіть у стовпець текст відповідно до зразка сюжету сайту (а ви введіть свій текст):

Фірма: Прізвище, ім’я студента

Візитка

Товари

та ін.

Тексти вирівняйте до лівого краю. Літери зробіть достат­ньо великими.

6. Задайте тло у лівому фреймі, вибравши текстуру «газет­ний папір» (першу у меню) чи «граніт» (рис. 17.1).

Для цього до лівого фрейму застосуйте команди Format => Background => Fill Effects => Техture => ОК.

Задайте сіре градієнтне тло у правому фреймі.

Для цього до правого фрейму застосуйте команди Format => Background => виберіть сірий колір. Ще раз застосуйте команди Format => Background => Fill Effects => Gradient => вигляд градієнтного кольороподілу виберіть до вподоби. Поекспериментуйте з усіма доступними радіокнопками, зокрема, з кнопкою Заготовка => ОК. Яке тло вам більше до вподоби?

У правому фреймі задайте тло «граніт».

Створіть сторінку Візитка.

Виокремте слово Візитка і виконайте команди Вста­вити => Гіперпосилання. Заповніть діалогове вікно: виберіть режим Create New Document, а також по­трібну папку для сайту. Зверніть особливу увагу на вибір папки за допомогою команди Изменить.... Ство­ріть, якщо треба, нову папку МуВеб (у власній папці). Введіть латинськими літерами назву файлу, наприклад раgе1. Увімкніть радіокнопку Edit the new document і задайте режим відображення нової та всіх інших сторінок у правому фреймі (у рамці 1). Створіть підказку на зразок «Наш офіс» тощо. Натисніть на кнопку ОК.

Рис. 17.1. Заливки кольорами і текстури

10. У вікні, що відкрилося, створіть сторінку Візитка відпо­відно до сценарію або на власний розсуд.

Закрийте вікно зі сторінкою Візитка (файл раgе1), щоб перейти до конструктора сайту.

Перевірте у конструкторі, чи працює гіперпосилання. Для цього натисніть на клавшу Сігі і клацніть мишею над гіперпосиланням.

Створіть сторінку Товари.

Для цього повторіть пункти 9—12. Текст придумайте самостійно.

14. Створіть сторінку Послуги.

15. Створіть сторінку Замовлення.

16. Виберіть у лівому фреймі слово Адреса і створіть гіпер­посилання на власну електронну адресу. Створіть підказ­ку: „Це моя електронна адреса".

Під час перевірки гіперпосилання може запуститися пош­това програма. Закрийте її відразу.

17. Перемикайте сайт зі сторінки на сторінку і наповніть їх
різними елементами: картинками, лініями, закладками, внутрішніми гіперпо-силаннями тощо.

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

19.Запишіть створений основний файл на диск у папку сай­ту під назвою іпаех.Ьіт.

20. Закрийте програму Word і перегляньте створений сайт.

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

Помандруйте сторінками сайту. Закрийте вікно броузера.

Модифікуйте (удоскональте) зовнішній вигляд вашого сайту на свій розсуд, а також за допомогою тем.

Для цього відкрийте у програмі Word свій сайт і для кожної сторінки задайте тему, яка вам найбільше сподобалася, командами Format => Themes. Увімкніть усі перемикачі у діалоговому вікні вибору те­ми. Якщо натиснете на кнопку За замовчуванням, то ви­брана тема стане шаблоном у процесі роботи над наступ­ним сайтом. Не натискайте на цю кнопку без потреби.

23. Збережіть модифіковані сторінки й основний файл у зовсім новій папці, наприклад МуВеб2, за допомогою команди Sаvе as...

Продемонструйте свій сайт оточуючим і візьміть участь у конкурсі на сторення ліпшого сайту.

Запитання

1. Які можливості для веб-дизайну має програма Word 2007?

2. Які можливості мають програми Word 2000/ХР?

3. Як створити фон для сторінки?

4. Як задати текстуру для фону сторінки чи фрейму?

5. Які елементи можна вставити у сторінку?

6. Що таке тема?

7. Які теми ви знаєте?

8. Як створити фрейми на сторінці?

9. Які властивості фреймів ви знаєте?

10. Що можна зробити за допомогою команди Формат рисунка?

11. Як створити гіперпосилання?

12. Яке призначення підказок?

 

 

Тема 10. Веб-дизайн у програмі М8 Word.

План

Від Word 97 до Word 2007.

2. Word 2000 і Word 2003 (ХР).

Сайт фірми.

 

 

1. Від Word 97 до Word 2007.

Для створення веб-сторінки згідно з елементарними правилами веб-дизайну програма Word 97 має примітивні засоби. Спочатку потрібно виконати команди Файл (File) і Створити (Now). Потім слід перейти на закладку Веб-сторінки, вибрати шаблон Нова веб-сторінка (Blanc BebPage), увімкнути радіокнопку Документ і натиснути на кнопку Ок. Тепер можна розпочати роботу над сторінкою.

Фон для сторінки створюють за допомогою команд Формат => Фон => вибирають колір фону або, що значно цікавіше, вибирають на свій смак способи заливання сторінки (fill effects), які називаються текстурами (tехture), натискають на Ок. Після цього вводять потрібний текст і за допомогою панелі форматування чи команди Формат добирають шрифт, його розмір, колір, вигляд та розташування.

Текстові блоки, списки і таблиці створюють за правилами програми "Word”. За допомогою команди Вставити розташовують горизонтальні лінії, рухомі тексти, різноманітні об'єкти, поточну дату, автотексти, символи, картинки, файли, закладки, гіперпосилання, елементи управління (форми), а також задають фоновий звук і відеокліпи. Таку сторінку зберігають у файлі з розширенням htm. У Word 97 немає змоги створити фрейми тощо.

У Word 2007 документи можна переглядати броузером. А створювати любительську веб-сторінку взагалі просто — достатньо перемкнути відображення документа на веб-режим. Спрацьовує технологічний принцип wisiwig: що я бачу, те я й отримаю. Коди веб-сторінки генеруються автоматично. І оскільки вони є неоптимальними, то такий підхід — не для професіоналів.

Детальніше зупинимось на технології створення любительської веб-сторінки у програмі Word ХР, яка буде актуальною ще деякий час.

 

2. Word 2000 і Word 2003 (ХР).

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

Програми мають також потулший засіб веб-дизайну, який називається застосуванням тем. Тема — це сукупність деякого декоративного фону і стилів подання тексту, списків, таблиць, горизонтальних ліній і гіперпосилань. Тема автоматизує процес створення сторінок і сайту. Тем є декілька десятків. Найцікавіші такі: АиtоmоЬіlе, Ваrs, Виbblеs, Canvas, Декорація, Перетікання, Пласти, Смужки, Японська тощо. Користувач має змогу побачити, який буде результат від застосування теми. Слід пам'ятати, що теми для різних сторінок і фреймів треба добирати гармонійно (контрастними або однотонними) з урахуванням властивостей шрифтів (усі шрифти із засічками або без них) тощо. Початківцям рекомендується задавати одну тему для всіх сторінок і фреймів сайту. Теми можна задавати або змінювати після створення сторінки чи сайту. У багатьох випадках доцільно на базі теми, яка сподобалась, створити сторінку-шаблон і всі сторінки сайту створювати на його основі.

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

Початківцям рекомендується обмежетись одним фреймом ліворуч від основного тексту і задати йому розмір 25-30% від розміру екрана. У цьому фреймі традиційно розташовують елементи навігації: текстові гіперпосилання, гіперпосилання у вигляді кнопок чи рисунків.

За допомогою команди Властивості фрейму (рамки) у фрейм можна помістити деяку сторінку з html-файлу, задати розміри, ширину межі (границі), зробити межу невидимою, задавати смуги прокручування, дозволити пересувати межу під час перегляду сторінки у броузері, якщо броузер уміє це робити. Доступ до властивостей фрейму та інших команд можна отримати за допомогою його контекстового меню, тобто клацнувши у фреймі правою клавішею миші.

Тексти на сторінках створюють так, як у звичайному текстовому редакторі, добираючи потрібні шрифти, утворюючи списки, таблиці, вставляючи за допомогою команди Вставити різноманітні об'єкти. Щоб вставити лінії, застосовують команди Формат => Границі і заливки, натискають на кнопку Горизонтальна лінія і вибирають лінію із запропонованого меню. Різні геометричні фігури можна створювати за допомогою панелі інструментів Рисування.

Рисунки вставляють за допомогою команд Вставити =>, Рисунок => Картинки або рисунок з файлу чи зі сканера. Двічі клацнувши на рисунку, можна отримати доступ до вікна Формат рисунка і змінити його властивості: розміри, кут повороту і кольори, яскравість, спосіб обгортання текстом, задати альтернативний текст, обрізати, задати йому стиль водяного знака тощо. Ці ж дії над рисунком можна виконати за допомогою панелі інструментів Налаштовування зображення і команди Формат рисунка з його контекстового меню.

Можна вставляти специфічні веб-компоненти: елементи керування для форм, рухомі тексти у Word 2000, навігаційні панелі у Word ХР. Однак зауважимо, що панелі потребують взаємодії з програмою М8 FrontPage.

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

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

Щоб текст чи картинку зробити гіперпосиланням, їх виокремлюють і виконують команди Вставити => Гіперпосилання або клацають на відповідній кнопці на стандартній панелі інструментів.

Отримаємо вікно Додавання гіперпосилання, де слід задати одну з чотирьох можливостей зв'язку:

1) з деяким файлом (тоді задають шлях до нього за допомогою навігатора) чи з іншою веб-сторінкою в Інтернет (тоді задають її адресу у полі Адреса);

2) з місцем у документі (тоді вибирають це місце чи закладку);

3) з новим документом, який створюватимуть (тоді задають його розташування на диску і зазначають чи створюватимуть його тепер чи пізніше;

4) з електронною поштою (тоді у відповідні поля заносять адресу і тему листа).

Рекомендуємо натиснути на кнопку Підказка... і ввести текст, який з'являтиметься, коли укажчик миші наводитимуть на гіперпосилання, особливо, якщо ним є картинка, наприклад, «Це біографія Васі Квакіна» тощо.

Важливо також зазначити фрейм (рамку), де відображатиметься ця сторінка, клацнувши на кнопці Вибір рамки і на відповідній рамці у схемі рамок (це є у Word ХР). Рамки мають номери — запам'ятайте їх.

Стежте за тим, щоб усі нові сторінки адресувались до одної папки, інакше файли проекту будуть розкидані по всьому диску. Назву файлам сторінок придумує користувач, наприклад, page1, рage2 тощо, розширення htm система додає автоматично. Усі назви файлів слід записувати латинськими літерами. Це суттєво під час публікування сайту на сервері, який може працювати під операційною системою Unix.

3. Сайт фірми.

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

Створимо сайт про вашу фірму. Сторінка має складатися з двох фреймів: основного (рамка 1) і лівого, навігаційного (рамка 2). Текст зліва, набраний у стовпець, може бути такий: Фірма Васі Квакіна, Візитка, Товари, Послуги, Замовлення, Адреса. Останні п'ять назв перетворимо у гіперпо-силання і зв'яжемо з файлами, які відразу і створимо.

Кожна сторінка має починатися з логічної назви (Візитка, Товари, Послуги, Замовлення, Адреса), містити логотип, створений у WordАгt тощо.

Сторінку Візитка заповніть даними про місцезнаходження фірми, розмістіть на ній картинки з видами місцевості чи своєю фотографією (вставте будь-які доступні картинки і по-експериментуйте з ними).

На сторінці про товари опишіть п'ть-піість найменувань товарів та їхні властивості (номер, назва, наявна кількість, ціна тощо), застосувавши табличну форму подання даних.

На сторінці про послуги опишіть чотири-п'ять послуг, що надає ваша фірма, застосувавши списки.

Адресі поставимо у відповідність електронну адресу уаsуа@kvakin. lviv. uа.

Сторінку про замовлення наповніть таким змістом: «Ця сторінка у процесі розробки. її виконаємо дещо пізніше, вивчивши тему форми, сценарії опрацювання форм, програму FrontPagе».