Лабораторна робота
Завдання 1. «Проектування w е b-сайтів засобами М S Fr про ntP аgе»
1 Мета роботи
Освоїти правила і прийоми створення w е b-вузлів, засобами спеціалізованого редактора MS FrontPage 2000.
2 Завдання роботи
Навчитися створювати, оформлювати web-сайти, застосовуючи різні ефекти, організовувати переміщення по сторінках, використовуючи гіперпосилання.
3 Зміст роботи
3.1 Створюю і оформляю web-сайт, що містить web-сторінки. Для цього виконую команду Файл 4 Створюю 4 Web-вузол. Потім переходжу в режим Navigation, далі двічі клацаю по значку Home Page в центрі екрану або за назвою файлу index. Htm у полі Folder List. Потім в своєму розпорядженні на аркуші дані: вводжу текст за зразком, маю картинки.
Для оформлення зовнішнього виду домашньої сторінки використовую команду Формат 4 Шрифт, в якій вибрати колір шрифту і гарнітуру написання. Далі зберігаю сторінку.
3.2 Для створення сторінки з фреймами, зазначеної на малюнку 2 виконую команду File 4 New 4 Page, у діалоговому вікно New (Нова сторінка) вибираю вкладку Frames Pages (Сторінки з фреймами), потім вибираю шаблон Ва nn ег and Зі ntents (Банер і зміст), і клацаю на кнопці ОК. Після цього переходжу в режим редагування сторінки, потім клацаю на кнопці New Page (Нова сторінка) в кожному фреймі.
Для оформлення сторінки верхнього фрейму вставляю таблицю з одного рядка та трьох стовпців. Потім у стовпці таблиці розміщую малюнки, далі переміщаю кордону стовпців за розміром кожного з малюнків і вирівнювання їх по центру. Потім клацаю правою кнопкою миші на таблиці і в контекстному меню вибираю команду Та ble 4 Рrоре rties (Властивості таблиці). У групі елементів Під rders (Межі) ставлю нульовий розмір межі таблиці для того, щоб кордон став невидимою.
Для написання пунктів меню в лівій частині сторінки з фреймами також використовую таблицю, що складається з одного стовпця і чотирьох рядків. Кожен пункт меню записується в рядок таблиці.
У правій частині сторінки з фреймами вводжу текст, оформивши його відповідним чином.
Після цього виконую команду File 4 Save (Файл 4 Зберігаю), для збереження нових сторінок. Кожна сторінка буде збережена під своїм ім'ям. Збережена сторінка буде виділена рамкою синього кольору. Для сторінки верхнього фрейму ставлю ім'я baner. Htm, для лівого - mnu. Htm, для правого - text. Htm, а для самої сторінки з фреймами - ім'я start. Htm. У результаті повинна вийде сторінка з фреймами.
3.3 Після створення сторінки з фреймами start. Htm приступити до створення інших сторінок, які будуть містити інформацію по кожному з пунктів меню, що знаходиться в лівому фреймі.
Створюю нову сторінку, на якій в режимі Normal маю інформацію.
Потім зберігаю сторінку, поставивши їй ім'я o _ nas. Htm.
3.4 Після цього аналогічним чином створюю сторінку, на якій будуть розташовуватися відомості про товари, що пропонуються до продажу в магазині.
Зберігаю сторінку, поставивши їй ім'я tovar. Htm.
3.5 Далі створюю сторінку, що містить новини, помістивши на неї текст.
Зберігаю сторінку, поставивши їй ім'я new. Htm.
3.6 Створюю форму зворотного зв'язку. Для цього в режимі редагування вводжу текст за зразком, далі вставляю відповідні поля форм.
Для створення елементів спадаючого меню виділяю полі Drop - Down menu, викликаю його контекстне меню і вибираю там пункт Form Field Properties (Властивості поля форми), в діалоговому вікні Drop - Down Menu Properties натискаю кнопку Add (Додати) і в полі Choice вводжу назву міста , наприклад Уфа, OK. Потім знову натискаю кнопку Add і вводжу назви міст Стерлітамак, Салават, Ішимбай, Туймази, Бірськ. Зберігаю сторінку, поставивши їй ім'я otclik. Htm.
3.7 Потім переходжу в режим Navigation і перетягують мишею з поля Folder List файли start, otclik, o _ nas, new, tovar до блоку Home Page, розташованому в центрі екрану, щоб вийшла наступна структура web-сайту (малюнок 4). Перебуваючи в режимі Navigation зручно переміщатися по створеній структурі і використовувати її при редагуванні web-сторінок.
Малюнок 4 Структура web-сайту
3.8 Для організації навігації по навчальному web-сайту завантажую головну сторінку Index. Htm, виділяю на ній текст Далі, потім виконую команду Insert 4 Hipperlink (Вставка 4 Гіперпосилання) і в діалоговому вікні в полі URL вказую ім'я файлу Start. Htm.
Після цього аналогічним чином пов'язую гіперпосиланнями елементи лівого фрейму з відповідними сторінками: Про нас з сторінкою o _ nas. Htm. Потім пов'язую пункт меню лівого фрейму Товари з файлом tovar. Htm, Новини з сторінкою new. Htm, Гостьова книга з сторінкою otclik. Htm. Перевіряю працездатність створених гіперпосилань. Зберігаю відредаговану сторінку.
3.9 Після того, як web-сайт спроектований, для його оформлення застосовую стандартну тему. Для цього виконую команду Format 4 Theme (Формат 4 Тема).
4 Контрольнi питання
4.1 Поняття web-сайту та web - сторінки.
Web-вузли призначені для створення і редагування так званих web-документів або (web-сторінок), тобто електронних комбінованих документів, які можуть містити текст, графіку, мультимедійні та інші об'єкти.
4.2 Для чого призначена панель уявлень?
Вона призначена для перемикання між різними режимами роботи.
4.3 Назвіть режими подання сторінки.
Page (Сторінка) - редагування відкритої web-сторінки.
Folders (Папки) - робота з папками і файлами сайту.
Reports (Звіти) - режим перегляду інформації про сайт.
Navigation (Переходи) - перегляд і зміна структури сайту.
Hyperlinks (Гіперпосилання) - перегляд і зміна гіперпосилань сторінки.
Tasks (Задачі) - допомагає планувати роботу над вузлом і відзначати зроблене.
4.4 Поясніть сенс створення домашньої сторінки.
Вона містить відомості про зміст і темі web-сайту і призначена для залучення уваги його відвідувачів. Домашня сторінка містить посилання на інші сторінки web-сайту.
4.5 Як вставляю малюнок на web-сторінку?
Для того, щоб вставити малюнок з бібліотеки FrontPage необхідно виконати команду Вставка 4 Малюнок 4 Зображення. Для вставки зображення із зовнішнього файлу слід скористатися командою Вставка 4 Малюнок 4 З файлу.
4.6 Що таке сторінка з фреймами? Як її створюють?
Сторінка з фреймами - це НТМ L-сторінка особливого виду, яка ділить вікно браузера на декілька прямокутних областей, званих фреймами. Створити сторінку з фреймами можна на основі одного з готових шаблонів, що є в програмі FrontPage. Для цього
4.7 Який командою створюється сторінка з фреймами?
Необхідно вибрати команду Файл 4 Створити 4 Сторінка. На екрані з'явиться діалогове вікно Нова сторінка, в якому потрібно вибрати вкладку Сторінки з фреймами. На цій вкладці є набір шаблонів для створення сторінок з фреймами.
4.8 Як відбувається збереження сторінки з фреймами?
Для збереження сторінки з фреймами слід виконати команду Файл 4 Зберегти, для збереження нових сторінок. На екрані послідовно з'являться стандартні вікна збереження файлів Зберегти як для кожної сторінки. У цих вікнах потрібно вказати імена файлів (верхнього, лівого, правого та сторінки цілком).
4.9 Для чого використовуються таблиці при створенні web-сторінок?
Для вирівнювання елементів на екрані, многоколоночной верстки, накладення картинок.
4.10 Що таке теми і для чого їх використовують?
Тема - це певний набір елементів оформлення і колірних схем, які можна застосувати до сторінок.
4.11 Що таке форми?
Форми - це області сторінки, в які користувач може вводити інформацію. Вони можуть включати різні елементи: поля для введення даних, списки варіантів відповідей, набори перемикачів, а також кнопки, призначені для відправлення результатів введення даних на сервер і для очищення полів введення.
4.12 Які види форм використовуються при створенні web-сторінок?
рядок для введення даних довільного типу, тобто форма з текстовим полем - One Line TextBox;
текстове поле зі смугою прокрутки - Scrolling TextBox;
спадаюче меню - Drop - Down menu;
прапорець - Check Box.
4.13 Як додати форму на web-сторінку?
Для створення форм необхідно виконати команду Вставка 4 Форма, потім вибрати із списку потрібну форму.
4.14 Для чого використовуються кнопки Reset і Submit при створенні форм?
Submit - відправляє вміст форми на сервер, Reset - очищає поле форми, щоб відвідувач міг почати заново введення даних до неї.
4.15 Що таке гіперпосилання?
Гіперпосилання є основним засобом переходу на інші web-сторінки або web-сайти і являють собою зв'язок між елементом сторінки (текстом або малюнком) і деяким об'єктом або адресою, на який вказує посилання.
4.16 Який командою можна додати гіперпосилання?
Для створення гіперпосилання в режимі редагування сторінки, слід виділити текст або графічний об'єкт, який буде використовуватися як гіперпосилання, і виконати команду Вставка 4 Гіперпосилання. З'явиться діалогове вікно Додавання гіперпосилання. У списку файлів в центральній області діалогового вікна потрібно вказати назву сторінки, на яку буде здійснюватися перехід.
4.17 Як перевірити працездатність гіперпосилань?
Для перевірки працездатності посилань можна перейти в режим перегляду (Preview) або, не виходячи з режиму редагування і утримуючи клавішу З trl, клацати на посиланнях лівою кнопкою миші.
4.18 Назвіть способи оформлення web-сторінок.
Основними способами оформлення web-сторінок є використання тим, вставка горизонтальної лінії і біжучого рядка.
Завдання 2. «Проектування w е b-сайтів засобами MS Word»
1 Мета роботи
Навчитися розробляти документи, призначені для публікації в Internet.
2 Завдання роботи
Знайомство з можливостями текстового редактора Word по створенню документів HTML.
3 Зміст роботи
3.1 Виконання прикладу на створення web-сторінки
На початку виконання роботи створюю нову папку, в якій будуть зберігатися всі створені файли.
Створення web-сторінки починаю зі створення порожній web-сторінки. На сторінку помісти інформацію про обраною темою. Сторінку оформляю графічними елементами. Привласнюю назва web-сторінці.
3.2 Створення web-сайту
Створення кожного з документів web-сайту починаю зі створення порожній web-сторінки. На кожній з цих сторінок набираю і форматує текст звичайними засобами Word.
У першому документі вставляю картинку з бібліотеки ClipArt;
вставляю біжучий рядок;
У другому документі вставляю картинку з бібліотеки ClipArt;
поділяю сторінку графічною лінією;
У третьому документі створюю список з графічними маркерами;
Оформляю сторінки, застосувавши до них тему.
У другому документі ключове слово перетворюю на гіперпосилання на документ 3.
Перевіряю роботу гіперпосилань.
4 Контрольнi питання
4.1 Для яких цілей створюються документи HTML, чому їх часто називають web-сторінками?
Документ HTML - текстовий файл, призначений для перегляду в програмі-оглядачі (браузері). Документи HTML по-іншому називають web-сторінками, тому що в більшості випадків вони призначені для публікації в мережі Internet.
4.2 Якими способами у Word 2000 можна створити web-сторінку?
Існують два прості способи створення web-сторінок за допомогою Word. Можна створити нову сторінку за допомогою майстра або шаблону або перетворити існуючий документ Word у формат HTML.
4.3 Які файли містяться в папці, автоматично створюється при збереженні web-сторінки?
При збереженні файлу як web-сторінки, всі графічні об'єкти (маркери списків, лінії, текстури фону, малюнки) за замовчуванням зберігаються в допоміжній папці як графічні файли формату GIF або JPG (JPEG), з іменами image001, image002 і т. д..
4.4 Як присвоїти назву web-сторінці?
Для присвоєння назви web-сторінці потрібно вибрати команду Файл ► Властивості, на вкладці Документ у полі Назва ввести потрібний заголовок.
4.5 Як додати на web-сторінку графічну лінію?
Для вставки горизонтальної лінії слід помістити текстовий курсор в місце вставки лінії і скористатися командою Формат ► Межі та заливка, у вікні діалогу натиснути кнопку Горизонтальна лінія. Після вибору лінії натиснути кнопку Вставити кліп.
4.6 Як на web-сторінці створити список із графічними маркерами?
Набір таких зображень знаходиться в діалоговому вікні Список (меню Формат).
4.7 Як задати колір фону?
Для створення фону потрібно вибрати команду Фон в меню Формат, а потім - колір або, якщо потрібний колір немає в запропонованому списку, команду Додаткові кольори.
4.8 Як задати текстуру фону?
Вибрати команду Способи заливки.
4.9 Що таке тема? Як застосувати тему до web-сторінці?
У Microsoft Word 2000 є можливість автоматичного оформлення електронних документів. Доступ до вибору зразка оформлення виконується командою Формат ► Тема. Коли до документа застосовується будь-яка тема, автоматично налаштовуються наступні елементи документа:
колір фону або фоновий малюнок;
стилі оформлення основного тексту і заголовків;
стиль оформлення маркованих списків;
стиль графічних елементів оформлення (ліній);
кольору гіперпосилань;
колір межі таблиці.
4.10 Які формати графічних зображень підтримуються в web-документах?
GIF і JPEG
4.11 Як створити біжучий рядок?
Для вставки рядка, що біжить на панелі інструментів web-компоненти слід натиснути кнопку Рухомий рядок . У діалоговому вікні в полі Введіть текст рухомого рядка вводиться текст, який буде використовуватися в якості біжить терміни на web-сторінці.
4.12 Як додати гіперпосилання в документ HTML?
Для вставки гіперпосилання на існуючий файл потрібно виконати наступні дії:
виділити текст або графічний об'єкт, який передбачається використовувати як гіперпосилання, і вибрати команду Вставка ► Гіперпосилання;
у вікні Додавання гіперпосилання вибрати варіант Зв'язати c ► Наявним файлом, web-сторінкою;
ввести шлях до кінцевого файлу в полі Введіть ім'я файлу або web-сторінки або натиснути кнопку Файл і вибрати потрібний файл зі списку.
4.13 Як створити підказку для гіперпосилання?
Щоб призначити підказку для гіперпосилання, у вікні Додавання гіперпосилання слід натиснути кнопку Підказка, а потім ввести текст підказки.
4.14 Як змінити гіперпосилання?
Для зміни гіперпосилання слід клацнути по змінною гіперпосилання правою кнопкою миші і вибрати в контекстному меню команду Гіперпосилання ► Змінити гіперпосилання.
4.15 З якими цілями створюються сторінки рамок для документів HTML?
Рамки можуть використовуватися:
для розміщення інформації, яку необхідно показувати постійно
для приміщення змісту всіх або частини web-документів, що містяться на web-сервері, що дозволяє користувачеві швидко знаходити потрібну йому інформацію;
для створення вікон результатів запитів, коли в одній рамці знаходиться власне запит, а в іншому результат запиту.
4.16 Як змінити властивості рамки?
За допомогою команди Формат ► Рамки ► Властивості рамки.
4.17 Як з програми MS Word завантажити оглядач MS Internet Explorer?
Необхідно скористатися командою Файл ► Попередній перегляд web-сторінки.