Роздрукувати сторінку

Главная \ Методичні вказівки \ Методичні вказівки \ 1614 Лабораторна робота 7 на тему Навчитись створювати Web-сторінки за допомогою MS Word

Лабораторна робота 7 на тему Навчитись створювати Web-сторінки за допомогою MS Word

« Назад

ЛАБОРАТОРНА РОБОТА №7

МЕТА: Навчитись створювати Web- сторінки за допомогою MSWord

Загальні положення

Створити нову Web-Сторінку за допомогою Microsoft Word можна одним з двох способів: за допомогою майстра або шаблону, або перетворити існуючий документ Word у формат HTML, використовуваний для Web-Сторінок.

Для використання майстра (або шаблону) досить скористатися вкладкою Web-Сторінки меню Створення документа. Далі слід скористатися вказівками майстра, відповідаючи на його питання й заповнюючи відповідні поля й графи потрібним текстом. Виконання цих дій не викличе труднощів у користувачів, що володіють основами роботи в Microsoft Word. Іншим способом є перетворення існуючого документа Word у формат HTML. Це найпростіша операція, однак тут можуть виникати деякі проблеми, описувані нижче в даній главі.

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

Створення маркірованих і нумерованих списків на Web-Сторінках

Так само, як і в документах Word, в Web-Сторінках можна створювати списки.

Списки в HTML можуть бути маркіровані (Bulleted) і нумеровані (Numbered). У маркірованих списках можуть уживатися стандартні маркери, реалізація виду яких покладає на браузер, а також графічні зображення, що завантажуються з окремого файлу. Для нумерованих списків можуть бути використані арабські або римські цифри, а також латинські букви. Більш докладна інформація про правила організації списків приводиться у відповідній главі.

Створення списків виконується точно так само, як і у звичайних документах Word. Виділите текст, який повинен бути представлений у вигляді списку, і виберіть пункт Список з меню Формат. Буде видана панель Список, утримуюча дві вкладки — Маркірований (мал. 8.2) і Нумерований (мал. 8.3).

Можна також скористатися кнопками панелі інструментів Нумерація або Маркери.

При створенні маркірованого списку можна вибрати один із трьох стандартних або одне із пропонованих графічних зображень. Скориставшись кнопкою Інший можна в якості маркера вибрати будь-який існуючий графічний файл. Залежно від вибору типу маркерів список в HTML буде реалізований по-різному. Якщо обрано один із трьох стандартних маркерів, то список буде сформований за допомогою тегу <ul> і елементів списку <li>. При цьому буде генеруватися одна з наступних рядків коду HTML:

<UL> — для першого стандартного маркера (маленький чорний кружок)

<UL TYPE="CIRCLE"> — для другого маркера (квадратик)

<UL TYPE= "SQUARE"> — для третього маркера (зафарбований квадратик)

Приведемо приклад. Нехай був створений наступний текст:

Перший елемент списку

Другий елемент списку

Третій елемент списку

При розмітці цього тексту як списку і виборі другого стандартного маркеру буде згенеровано наступний фрагмент коду HTML:

<LI>Перший елемент списку </LI>

<LI>Другий елемент списку </LI>

<LI>Третій елемент списку</LI></UL>

Якщо в якості маркера вибирається графічне зображення, то список, по суті, не формується, тобто спеціальний тег списку <ul> використовуватися не буде. Тут кожний елемент списку буде виділений в окремий абзац тегом <р> і випереджений посиланням на вбудоване зображення. Саме графічне зображення маркера буде збережено в тому ж каталозі, що й Html-Файл. Для наведеного прикладу при виборі одного із графічних маркерів буде згенерован наступний код:

<DIR>

Перший елемент списку

Другий елемент списку </Р>

Третій елемент списку</Р>

Примітка

Відмінність у використанні стандартних і графічних маркерів проявляється не тільки в реалізації, але й можливості скасування списку. Якщо були обрані стандартні маркери, то список можна скасувати так само, як це робиться при роботі з документом Word. Досить виділити список і вибрати режим Немає в панелі Список або ж нажати відповідну кнопку на панелі інструментів. Якщо ж були обрані графічні маркери, то скасувати список не вдається. Необхідно вилучити всі графічні маркери окремо, виділяючи їх і натискаючи клавішу <Delete>.

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

Залежно від обраного формату нумерації списку будуть генеруватися наступні коди:

<OL> — для нумерації арабськими цифрами

<OL TYPE="I"> — більшими римськими цифрами

<OL TYPE="i"> — маленькими римськими цифрами

<OL TYPE="A"> — прописними латинськими буквами

<OL TYPE="а"> — рядковими латинськими буквами

Наприклад:

<LI>Перший елемент списку</LI>

<LI>Другий елемент списку</LI>

<LI>Третій елемент списку</LI></OL>

Примітка

Вибрати формат нумерованого або маркірованого списку можна тільки при використанні меню. Якщо ви скористалися відповідними кнопками панелі інструментів, то буде обраний формат, використаний останнім.

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

1. Виділите текст, що є верхнім рівнем списку.

2. Виберіть потрібний формат нумерації із вкладки Нумерований панелі Список.

3. Зруште текст, що належить наступному рівню списку, установивши курсор на початку кожного абзацу або рядка й нажавши клавішу <Таb>. Хоча табуляція не застосовується в HTML, у редакторі Word символи табуляції списку будуть перетворені у відступи.

4. Виберіть формат нумерації для чергового рівня.

5. Для кожного рівня в списку повторите кроки 3—4.

Примітка

Незважаючи на те, що наведена рекомендація зі створення багаторівневих списків дана розроблювачами Word, вона не завжди працює коректно. Іноді для того, щоб добитися бажаного результату, доводиться доводити вручну одержуваний HtmllКод.

Вставка горизонтальної лінії в Web-Сторінку

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

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

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

<Р ALIGN="CENTER"><IMG SRC="line9.gif" WIDTH=623 HEIGHT=11>

Перша ж лінія зі списку реалізується за допомогою стандартного тегу <hr>.

Параметри горизонтальної лінії можуть бути змінені, якщо нажати праву кнопку миші й у меню, що з'явився, вибрати пункт Формат автофігури (Format Autoshape). Можна змінити довжину й товщину лінії, її розташування на сторінці в горизонтальному напрямку. Наприклад:

Для того щоб швидко вставити в текст сторінки ще одну лінію того ж стилю, можна нажати кнопку Горизонтальна лінія на панелі інструментів.

Вибір тла створюваного документа

Щоб зробити Web-Сторінки більш привабливими, часто використовують різні фонові зображення, у тому числі текстурне заливання. Щоб задати колір тла Web-Сторінки або додати фонове зображення, слід скористатися командою Тло меню Формат (Format/Background).

Після виконання цієї команди з'явиться діалогова панель, за допомогою якої можна вибрати необхідний колір тла документа з списку основних або додаткових квітів або ж задати зображення, яке буде служити фоновим. Для вибору фонового зображення необхідно нажати кнопку Способи заливання (Fill Effects), при цьому з'явиться панель Заливання (Fill Effects) із вкладкою Текстура (Texture), з якої можна підібрати потрібне зображення.

Крім стандартних текстур, відображуваних на вкладці Текстура, у якості фонового зображення можна використовувати будь-який малюнок. Для цього натисніть кнопку Інша текстура і укажіть файл, що містить потрібний малюнок.

Якщо буде визначений колір тла документа, то обране значення зберігається в Html-Документі в якості значення параметра BGCOLOR тегу <BODY>. При завданні фонового зображення ім'я відповідного файлу графічного зображення буде значенням параметра BACKGROUND.

Приведемо приклади обох варіантів:

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

При створенні Web-Сторінки фонове зображення зберігається у вигляді окремого файлу, наприклад image.gif, який міститься у той же каталог, що й сама Web-Сторінка.

Зміна кольору й форматування тексту Web-Сторінок

При створенні Web-Сторінки для тексту й посилань можна визначити використовувані за замовчуванням кольори. Для цього слід скористатися командою Колір тексту меню Формат (Format/Text Colors). З'явиться панель у якій можна задати колір тексту, колір посилань і колір посилань, що відповідає вже відвідуванним сторінкам. Задамо для прикладу як кольору тексту — синій, кольору посилань — бірюзовий, а кольору переглянутих посилань — зелений. Задані значення визначать параметри тегу <BODY>:

Ці параметри задають кольору за замовчуванням для всього документа. Якщо ж необхідно задати колір для обраного фрагмента документа, то випливає використовувати кнопку Колір шрифту на панелі інструментів або команду Шрифт меню Формат (мал. 8.8). Якщо для фрагмента тексту буде обраний, наприклад, червоний колір, то результат такого вибору в Html-Документі буде відбитий так:

ЭTOT текст буде відображатися червоним кольором

Читач Web-Сторінки може задати свої власні встановлювані по умовчанню кольору в браузері. Щоб текст і посилання зображувалися в обирані за замовчуванням квітах браузера, задайте значення Авто у всіх трьох списках панелі Кольору тексту.

При створенні Web-Сторінок у редакторі Word можна використовувати багато засобів форматування, призначені для форматування документів Word. Наприклад, можна привласнити тексту напівжирне накреслення за допомогою кнопки Напівжирний або вибрати стиль Заголовок 1 зі списку стилів. Завдання елементів форматування тексту визначає вставку відповідних тегів HTML у генеруемий код.

Панель Шрифт, викликувана з меню Формат, служить також для завдання типу шрифту, його розмірів і форматування виділених фрагментів тексту.

Установка прапорців, що відповідають кожному із шести доступних у даній панелі ефектів, приводить до вставки в Html-Код наступних тегів:

<в> — Напівжирний

— Курсив

— Підкреслений

<STRIKE> — Закреслений

— Верхній індекс

— Нижній індекс

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

Для швидкого перехід до наступного доступного розміру шрифту використовуйте кнопки Збільшити розмір шрифту й Зменшити розмір шрифту. Дня кожного абзацу в HTML генерується тег початку абзацу <р>, а також тег кінця абзацу </р>. Останній тег при створенні документів вручну звичайно опускається. Більшість браузерів абзаци автоматично відокремлюють порожнім рядком. Щоб реалізувати перехід на новий рядок без утвору абзацу, натисніть клавіші <Shift>+<Enter>. У цьому випадку буде генеруватися тэг переходу на новий рядок .

Примітка

У довідковій системі Word " для створення абзаців без інтервалів" (саме так сформульоване) помилково пропонується скористатися клавішами <Ctrl>+<Enter>. Нагадаємо, що сукупність клавіш <Ctrl>+<Enter> звичайно використовується при редагуванні документів Word для примусового переходу на наступну сторінку. При перетворенні документів Word в HTML у цьому випадку буде лише створений додатковий абзац, а при редагуванні Web-Документів клавіші <Ctrl>+<Enter> взагалі неприпустимі.

Форматування, не підтримуване мовою HTML або деякими засобами перегляду Web, недоступно в розділі редагування Web-Сторінок редактори Word. У число таких засобів входять ефекти форматування символів Піднятий, З тінню і Утоплений, міжрядковий інтервал, полючи, міжсимвольний інтервал, кернинг, параметри обтікання тексту й інтервали між абзацами. Не слід використовувати символи табуляції, тому що багато браузерів зображують їх як пробіли; замість них для зрушення першого рядка тексту вправо можна використовувати відступ.

Для зміни відступу тексту використовуйте кнопки Збільшити відступ і Зменшити відступ. З погляду мови HTML, відступи реалізуються шляхом обрамлення тексту парою тегів <DIR> і </DIR>. Формально даний тег визначає початок списку й має на увазі використання тегів елементів списку <LI>. Однак тут тег <LI> не використовується, а тег <DIR> потрібний тільки для організації відступів, які неможливо задати в HTML природно. Вкладені друг у друга теги <DIR> мають на увазі багаторівневі списки, причому кожний рівень зрушать на один відступ стосовно попереднього. Наприклад:

<DIR><Р>Цей текст має один відступ</Р>

<DIR>

<Р>Цей текст має два відступи</Р>

</DIR>

Примітка

Аналогічний підхід для створення відступів застосовують і інші Html-Редактори. Наприклад, Netscape Composer ( так само, як і редактор пакета Netscape Navigator Gold) для відступів використовується аналогічне приймання, тільки в якості тегу списку застосовується <UL>.

Примітка

При збільшенні відступу Word часто генерує відразу два тегу <DIR>, створюючи подвійний відступ. Відповідно при зменшенні відступу віддаляються два тегу <DIR>. Іноді генерується й віддаляється по одному тегу <DIR>. Логікові поведінки редактори зрозуміти надзвичайно важко, якщо взагалі можливо. По всій видимості ми маємо справу із черговою некоректністю роботи програми.

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

Примітка

Неможливість вирівнювання тексту на Web-Сторінках по ширині відзначається в довідковій системі Microsoft Word. Дійсно, у панелі інструментів Форматування при роботі з Html-Документом немає кнопки вирівнювання по ширині. Це пов'язане з тим, що в специфікації HTML аж до версії 3.2 для параметрів вирівнювання тегу абзацу <Р> не було вирівнювання по ширині.

Однак у цей час провідні браузери підтримують цю можливість, реалізовану в такий спосіб: . Більше того, навіть в Microsoft Word це вже закладене. Якщо працювати з документом Word, у якім є текст, вирівняний по ширині, а потім перетворити його Html-Документ, то з'являться абзаци, що мають наведений вище код.

Робота зі стилями на Web-Сторінках

На Web-Сторінках можна використовувати вбудовані стилі, що відповідають форматуванню, прийнятому для мови HTML. Стиль призначається тексту Web-Сторінок так само, як документам Word, однак у роботі стилів є деякі відмінності.

При створенні Web-Сторінки в Word стилі HTML додаються в список стилів на панелі форматування й у діалоговім вікні Стиль (меню Формат). Один зі стилів символів Розмітка HTML спеціально призначений для запису вихідних кодів HTML вручну.

Спеціальні стилі HTML, наприклад Адреси й Н2, безпосередньо генерують відповідні команди мови HTML; тому зміни, внесені в ці стилі, не зберігаються. При внесенні змін у вбудований стиль Word, наприклад Заголовок 1, пов'язане із цим стилем форматування буде перенесено на відповідну команду HTML, якщо таке форматування підтримується HTML.

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

Безпосереднє редагування Html-Коду

Microsoft Word 97 розрахований насамперед на створення й зміна Web-сторінок у візуальному режимі без явного застосування тегів HTML. Однак при необхідності на створену сторінку можна вручну вставити власні коди HTML. Є два шляхи рішення цього завдання. По-перше, можна редагувати Html-Код у режимі перегляду вихідних кодів Web-Сторінки, а по-друге, привласнити тексту спеціальний стиль Розмітка HTML.

Перейти в режим перегляду вихідних кодів Web-Сторінки можна, виконавши пункт Джерело HTML у меню Вид. До того, як виконати перехід у цей режим, слід виконати збереження файлу. Якщо цього не зроблене, то буде видано попереджуюче повідомлення. У режимі перегляду вихідних кодів Word можна використовувати в якості звичайного текстового редактора, змінюючи текст коду HTML. Зворотний перехід виконується кнопкою Закрити джерело HTML. При цьому переході також видається попереджуюче повідомлення про необхідність збереження зроблених змін.

Інший шлях полягає в записі необхідних Html-Кодів при роботі в режимі візуального редагування. При цьому не потрібно переходити в інший режим роботи. Щоб указати, що введений текст є вихідним кодом HTML, необхідно позначити його спеціальним стилем символів Розмітка HTML. Цей стиль робить текст схованим, для того щоб побачити, потрібно працювати у режимі перегляд символів, що Перемикання режиму здійснює кнопка Недруковані символи.

Попередній перегляд Web-Сторінки в процесі редагування

Хоча Word 97 відображає, що редагується Html-Документ практично в такому ж виді, як він надалі буде відображатися браузерами, завжди слід виконувати попередній перегляд створеної сторінки в браузері, що воліється вами. Це дозволить вам переконатися в тому, що й при розміщенні документа на Web-Сервері він буде виглядати відповідним чином.

Для попереднього перегляду Web-Сторінки в процесі її редагування необхідно встановити на комп'ютері браузер. Для перегляду слід нажати кнопку Перегляд Web-Сторінки на панелі інструментів. Для повернення в Word слід вибрати значок Word на панелі завдань або закрити браузер.

Таблиці на Web-Сторінках

Робота з таблицями на Web-Сторінках не відрізняється від роботи з таблицями у документах Word. Для створення таблиці можна використовувати два способи: вставити таблицю, скориставшись командою Додати таблицю з меню Таблиця ( для цього випадку необхідно задати розміри створюваної таблиці) або шляхом перетворення існуючого тексту з роздільниками (символ абзацу, символ табуляції, крапка з коми або інший символ) у таблицю (пункт Перетворити в таблицю з меню Таблиця). Для редагування структури таблиці використовується команда Намалювати таблицю. При цьому виникне панель інструментів Таблиці й границі (мал. 8.12), що містить кнопки для зміни параметрів таблиці.

Наприклад, якщо додати таблицю розміром 4x2, то Word створить наступний код:

</TR>

</TR>

</TR>

</TR>

</TR>

</TR>

</TR>

</TR>

</TABLE>

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

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

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

Оскільки можливості форматування Html-Документів уступають аналогічним можливостям документів Word, те часто при перетворенні в Html-Документ деякі елементи форматування можуть бути втрачені або змінені. Більше того, навіть при роботі в режимі створення HTML-документа можна сконструювати на екрані таку таблицю, яка не може бути в точно такому ж виді відображена браузерами. Приведемо приклад.

На мал. 8.15 показана таблиця, створена в Word у режимі редагування НТМL-Документа.

Другий рядок таблиці містить на одне ячійоко більше, ніж інші рядка. Мова розмітки HTML не допускає ситуації, коли в різних рядках утримується різне число ячійок. Точніше, якщо при записі даних для окремих рядків вказується менша кількість ячійок, ніж в інших рядках, то браузери автоматично додають відсутнє число ячійок, уважаючи, що вони порожні. Природно, при підрахунку числа ячійок ураховуються протяжні ячійки, які займають кілька суміжних ячійок. (Нагадаємо, що для протяжної ячійки потрібно вказати параметр COLSPAN з відповідним значенням.) Тому очевидно, що наведений приклад не може точно також відображатися браузерами. Редактор Word повинен якимсь образом ураховувати склавшуюся ситуацію. Щоб переконатися в цьому, досить зберегти, що редагується документ у файлі й знову його завантажити в редактор. Помітимо, що можна зробити навіть простіше, а саме, перейти в режим перегляду вихідного коду документа, а потім повернутися назад.

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

Наведений приклад показує, що вид Html-Сторінки може відрізнятися не тільки при перегляді в різних браузерах, але навіть може змінюватися після збереження, що редагується в Word сторінки у файлі.

Порада

Після збереження, що редагується в Word документа формату HTML не буде зайвим знову його завантажити й переглянути. Ці дії, втім, не скасовують необхідність перегляду остаточного варіанта документа в браузері.

Робота з малюнками на Web-Сторінках

При збереженні Web-Сторінки у форматі HTML усі зображення перетворяться у формат GIF або JPEG. При цьому у форматі JPEG зберігаються тільки ті зображення, які спочатку були записані в цьому форматі.

Усі інші формати графічних файлів перетворяться в GIF. Щоб вставити малюнок в Web-Сторінку, виберіть команду Малюнок у меню Вставка, а потім команду З файлу або Картинки.

Якщо малюнок вставляється з файлу, при збереженні він копіюється в ту ж папку, що й Web-Сторінка, якщо не встановлений прапорець Зв'язок з файлом. Якщо прапорець Зв'язок з файлом установлений, можна задати посилання на малюнок в заданому каталозі, як на інший Web-Вузол.

Вставлений на Web-Сторінку малюнок за замовчуванням вирівнюється по лівому полю. Щоб задати взаємне розташування тексту й малюнка, слід виділити малюнок і вибрати відповідну команду в меню Формат або на панелі інструментів Малювання.

Приклад використання зображення на створюваної Web-Сторінці. Для цього прикладу буде згенерован наступний фрагмент коду:

<Р>

Приклад вставки зображення в текст Html-Документа. Цей малюнок узятий з добірки Microsoft Clip Gallery і розташовується на сторінці з вирівнюванням по правому краю</Р>

Помітимо, що Word автоматично нумерує малюнки, які конвертуються з інших форматів. У даному прикладі зображення, узяте зі збірника малюнків Clip Gallery, було перетворено у формат GIF і збережене c іменем Image28.gif.

Примітка

Зображення у файлі зберігаються в їхньому вихідному розмірі. При зміні розмірів зображення при компонуванні Web-Сторінки для вбудованого зображення змінюються лише значення параметрів WIDTH і HEIGHT тегу <IMG>.

Таким чином, перетворення зображення до потрібного розміру буде виконуватися браузером при відображенні сторінки.

Створення посилань у документі

Програма Word 97 дозволяє включати в документ, що редагується, посилання усередині документа, а також посилання на інші сторінки й документи. Є кілька способів включення посилань до складу документа. Найбільше простим способом є використання режиму автоформатування, коли текст, що представляє собою адреса посилання, автоматично перетвориться в потрібне посилання. Для включення режиму автоформатування посилань необхідно виконати наступні дії: вибрати пункт Автозаміна з меню Сервіс. На вкладці Автоформат при введенні в розділі Заміняти при введенні включити режим адреси Інтернету й мережні шляхи гіперпосиланнями. Тоді при введенні тексту, що представляє собою відповідні адреси, вони будуть замінятися гіперпосиланнями. Наприклад, при введенні тексту:

www.anywhere.ru

Sergeev@mail.ifmo.ru

буде сгенерирован наступний код:

<А HREF="http://www.anywhere.ru/">www.anywhere.ru</A>

<A HREF="mailto:Sergeev@mail.ifmo.ru">Sergeev@mail.ifmo.ru</A>

Іншим способом включення в текст посилання є використання команди Гіперпосилання з меню Вставка. Після виклику цієї команди буде відкрито діалогове вікно Додати гіперпосилання, у якім потрібно вказати необхідну адресу й інші параметри посилань.

Створення форм на Web-Сторінках

Редактор Word має набір інструментів для створення форм і завдання властивостей їх елементів. Зразки форм, наприклад форми для опитування, представляються майстром Web-Сторінок. За допомогою майстра можна створити основні форми, а потім відредагувати їх відповідно до конкретних завданнями. Якщо потрібної форми немає в майстру, її можна створити, уводячи необхідні елементи керування. Для цього необхідно перейти в режим конструктора, скориставшись відповідним режимом меню Вид. Потім потрібно вибрати необхідні елементи з панелі, що з'явився, Елементи керування й розмістити їх у формі.

Наприклад, якщо розмістити у формі рядок уведення тексту й дві кнопки Submit і Reset, те буде створений наступний код:

<FORM>

<Р>

</FORM>

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

Збереження існуючого документа Word у форматі HTML

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

Після відкриття існуючого або створення нового документа Word можна виконати його збереження у вигляді Html-Документа. Це виконується в спеціальному пункті меню Файл із назвою Зберегти у форматі HTML (File/Save as HTML). Документ Word закривається, а потім знову відкривається у форматі HTML.

Якщо перед перетворенням документ Word не був збережений, то буде видано попереджуюче повідомлення про те, що ряд елементів форматування Word-Документа буде загублений.

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

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

Використання приміток у документі

Нагадаємо, що примітки часто використовуються при роботі декількох користувачів з одним документом, кожний з яких вносить свої ремарки. Додавання приміток у документ виконується в пункті Примітка меню Вставка (Insert/Annotation). Як правило, в остаточний документ примітки не вносяться, а використовуються в якості робочих записів окремих розроблювачів або рецензентів документа. Примітки схожі на виноски (Footnote) тим, що при вставці в документ примітки в те місце, до якого воно ставиться, ставиться спеціальний символ, а сам текст примітки, як і текст виноски, уводиться в окремім вікні. Примітки нумеруються послідовно, але на відміну від виносок, у символ примітки додаються ініціали автора даного примітки. Word дозволяє також вставляти звукові примітки, якщо комп'ютер оснащений звуковою платою й мікрофоном.

Усі примітки й виноски, вставлені в документі Word, при перетворенні у формат HTML губляться. Для цього досить виділений текст позначити стилем Примітка (Comment). Ця рада компанії Microsoft потребує коментарів.

Використання цього стилю приводить до того, що весь текст, позначений даним стилем, обрамляється парою тегів <COMMENT> і </COMMENT>. Цей тег служить для оцінки приміток (часто їх називають коментарями), які ігноруються браузерами й часто служать лише для заміток автора Html-Документа. Такий підхід до реалізації коментарів в HTML має істотний недолік. Справа в тому, що тег <COMMENT> не розпізнається деякими браузерами. У цей час стало загальноприйнятим записувати коментарі, обрамляючи їх сукупністю символів <!— і —>. Цей варіант запису коментарів розпізнається всіма провідними браузерами й давно входить у специфікацію HTML.

Порада

Не використовуйте стиль Примітка (Comment) при створенні Html-Документа в середовищі Word. Якщо ви все-таки скористалися цим стилем, то в отриманому Html-Коді виконаєте заміну згенерованих тегів <COMMENT> і </COMMENT> відповідно на символи <!— і —>.

ЗАВДАННЯ ДО ВИКОНАННЯ РОБОТИ

1. Ознайомтесь з теоретичною довідкою.

2. Створіть за допомогою MS Word маркіровані і нумеровані списки.

Збережіть документ у Htlm-Коді у папці. Запустіть на виконання браузером.

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

3. У попередній документ MS Word вставте декілька видів горизонтальних ліній. Збережіть у Htlm-Коді. Запустіть на виконання браузером.

4. Створіть два документи у MS Word. У першому документі зробіть заливку і напишіть завдання, використавши форматування шрифту. У другому документі зробіть фонове зображення за допомогою графічного зображення і напишіть своє прізвище, використавши форматування шрифту.

5. Побудуйте у MS Word таблицю.

1	2	3
4	5	6	7
8	9	10

Збережіть у Htlm-Коді. Запустіть на виконання браузером. Які зміни відбулись при відображенні таблиці? Занотуйте свій результат у Web- сторінці.

6. Вставте у документ MS Word графічні зображення з різними положеннями у вікні. Дайте пояснення до розташування зображень. Збережіть у Htlm-Коді. Запустіть на виконання браузером.

7. Створіть форму-анкету у MS Word з елементами управління. Збережіть у Htlm-Коді. Запустіть на виконання браузером.

8. Побудуйте таблицю Витрати на покупку продовольчих товарів. Нехай є документ, показаний на мал. 8.25.

У ньому є таблиця, що містить поля з формулами, а також деяка інша інформація, що містить обновлювані поля. У першому стовпці знаходяться назви продуктів, другий і третій стовпці містять відповідні значення, які повинні бути введені користувачем. Кожна ячійка третього стовпця містить поле з формулою, що визначає перемножування значень ячійок другого й третього стовпця. Наприкінці таблиці задана формула, що підводить підсумкове значення. Така таблиця може з успіхом служити шаблоном для оперативних підрахунків витрат. Досить заповнити відповідні ячійки в перших трьох колонках, обновити значення полів, що містять формули, тоді останній стовпчик і підсумкова графа приймуть потрібні значення. Звичайно, завдання обробки електронних таблиць логічніше вирішувати в Microsoft Excel, який спеціально призначений для цього, однак деякі елементарні можливості цілком припустимо реалізовувати й в Word. Тут спеціально обраний приклад таблиці з формулами. Відзначимо також ще одну особливість таблиці — наявність протяжної ячійки. В останньому рядку об'єднані разом три ячійки, у якій записано слово " Разом:". Такого ж візуального ефекту можна було б добитися й без об'єднання ячійок. Наприклад, можна було для цих трьох ячійок залишити тільки промальовування загальної рамки, а лінії між цими ячійками скасувати. Таке рішення припустиме для документа Word, однак нездійсненне у форматі HTML. Зверніть увагу на те, як протяжні ячійи будуть реалізовані в кодах HTML, що приводяться нижче.

Примітка

Microsoft Word надає також можливість об'єднання декількох ячійок таблиці по вертикалі. Той же самий документ на мал. 8.26 показаний у режимі відображення кодів полів. У таблиці використовується формула множення (PRODUCT), а також формула для підсумовування всіх елементів даного стовпця (SUM).

Примітка

Нагадаємо, що коди полів можна переглянути при роботі з документом в форматі Word, використовуючи гарячу клавішу перемикання режиму перегляду полів (View Fields, <Alt>+<F9>). Також припустимо перемикати відображення окремого поля (Toggle Field, <Shift>+<F9>).

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

Примітка

Нагадаємо, що відновлення виділеного поля виконується клавішею <F9> (Update Field). Для одночасного відновлення всіх полів можна виконати пункт Виділити все меню Виправлення, а потім нажати клавішу <F9>. Автоматичне відновлення полів при зміні даних не проводиться ( на відміну від Excel).

Виконаємо збереження даного документа у форматі HTML. При перетворенні документа у формат HTML коди полів втрачаються й заміняються відповідним текстом. У дійсності не все коди полів при перетворенні будуть замінятися відповідним текстом. Для даного прикладу поле, що містить дату, буде замінено текстом ( як це й зазначене як приклад у таблиці), однак усі інші коди полів просто зникнуть і не будуть замінені нічим. Перетворений документ у форматі HTML буде виглядати в такий спосіб (мал. 8.27).

Важко аналізувати причини такого перетворення. Безглуздо також проводити аналіз, які поля будуть перетворюватися, а які ні.

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

Для досягнення поставленої мети можна рекомендувати до проведення перетворення у формат HTML здійснити процедуру розриву зв'язки з полями (Unlink Field). Інакше цю процедуру називають відключенням полів.

Після розриву зв'язку з полем поточне значення поля стає звичайним текстом. Код поля зникає, тому, якщо надалі буде потрібно обновити відомості, прийде вставляти це поле знову. Слід порекомендувати зберігати документ із кодами полів, а процедуру розриву зв'язки з полями здійснювати з копією документа, яка може бути вилучена після перетворення у формат HTML. Це забезпечить можливість повернення до документа Word з обновлюваними полями. Для розриву зв'язку з полем необхідно виділити його й нажати клавіші <Ctrl>+<Shift>+<F9>. Для розриву зв'язків з усіма полями документа можна виділити весь документ і нажати ті ж клавіші. Увага, при розриві зв'язку з полем не відбувається його відновлення. Наприклад, якщо ви змінили якісь значення в другому або третьому стовпці прикладу й розірвали зв'язок з полями без їхнього відновлення, то в підсумковому стовпчику збережуться колишні значення. Після виконання всіх цих дій у документі не залишиться обновлюваних полів, а буде присутній лише звичайний текст, перетворення якого в HTML буде виконано без проблем.

Зведемо всі зазначені рекомендації в єдиний порядок дій, виконуючи які можна уникнути втрати значень полів при перетворенні в Html-Формат:

а) Відкрийте документ Word, що підлягає перетворенню в Html-Формат.

б) Якщо необхідно, то обновить поля документа. Для цього виділите весь документ або його фрагмент і натисніть клавішу <F9>.

в) Виконаєте розрив зв'язку з полями. Для цього виділите весь документ або його фрагмент і натисніть сукупність клавіш <Ctrl>+<Shift>+<F9>.

Коди полів будуть загублені, тому попередньо збережіть копію документа.

г) Виконаєте збереження файлу в Html-Форматі.

Примітка

Зверніть увагу на деякі можливості Word, незнання яких може привести до шоку навіть досить досвідчених користувачів. Кожне з полів документа може бути піддане блокуванню, що означає заборону на його відновлення. Блокування поля (Lock Field) виконується клавішами <Ctrl>+<F11>.

Зняття блокування (Unlock Field)— клавішами <Ctrl>+<Shift>+<F11>. Якщо яке-небудь поле заблоковане, то запит на його відновлення буде ігнорований і при цьому не буде видано ніяких текстових повідомлень. Лише ті користувачі, комп'ютер яких оснащений звуковою картою, при включеному звуці почують сигнал, що означає неможливість виконання необхідної операції.

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

Після збереження документу, Html-Код має наступний вигляд:

<HTML>

<HEAD>

< META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

<ТIТLЕ>Витрати на покупку продовольчих товарів</ТIТLЕ>

< META NAME="Template" CONTENT="С:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot">

</HEAD>

<Р>Витрати на покупку продовольчих товарів</Р></В>

Продукт</ТD>

Кількість, кг</TD>

Ціна за</Р>

1 кг</TD>

Вартість, грн. </TD>

</TR>

<Р>Хліб</ТD>

1</TD>

4,5</TD>

</TR>

Цукор</TD>

2</TD>

7,3</TD>

</TR>

<Р>Картопля</ТD>

5</TD>

5,0</TD>

</TR>

Orірки</TD>

0,5</TD>

11</TD>

</TR>

<Р>Помідори</ТD>

1</TD>

8</TD>

<TD WIDTH="25%" VALIGN="TOP">inbsp;</TD>

</TR>

Разом: </TD>

</TR>

</TABLE>

Датa складання: вівторок,

21 Вересня 2013 р.</Р>

<Р>Склав: </BODY>

</HTML>

9. Оформити звіт.

ЗАПИТАННЯ ДЛЯ ПЕРЕВІРКИ

Як створюються марковані і нумеровані списки на Web-сторінках за допомогою MS Word?
Як вставляється горизонтальні лінії на Web-сторінках за допомогою MS Word?
Як створюється фонове зображення на Web-сторінках за допомогою MS Word?
Зміна кольору і форматування тексту на Web-сторінках за допомогою MS Word.
Таблиці на Web-сторінках за допомогою MS Word.
Робота з зображеннями на Web-сторінках за допомогою MS Word?
Створення форм на Web-сторінках за допомогою MS Word?

З повагою ІЦ "KURSOVIKS"!