Видалення ефекту червоних очей
1 Спочатку виділимо ділянки очей з пошкодженим кольором. Для цього використайте засоби виділення панелі інструментів. Виділену область скопіюйте на новий шар Слойðновыйð слой через-копирование (LayerðNewðLayer via Copy).Назвіть новий слой NoRedEyes
2 Перейдіть на шар Изображенияðрегулировкиðтон насыщености NoRedEyesі приступіть до зміни кольору очей за допомогою діалогового вікна Hue/Saturation.Встановіть прапорець тонирование (Colorize) і переміщенням движків Тон и насыщение (Hue і Saturationдобийтеся потрібного кольору очей. Цей метод працює ефективно, але порівняно грубо.
3 Отримавши позитивний результат, склеюйте слої зображення і уровниð склеиваем уровни (LayerðFlatten Image).Режим змішування слоїв NoRedEyeð Normal.
4Якщо задумано подальше редагування, збережіть зображення разом з шарами у форматі PSD або TIFF.
Практична робота №32.
Тема: Обертання виділеної області
Допустимо потрібно вирівняти лінію горизонту на фотографії
1. Відкрийте файл 5048.jpg
2. Точний поворот зображення на довільний кут можна зробити таким чином: На панелі інструментів вибиріть лінійку Measure Tool в групі інструментів Пипетка (Eyedropper.)
3. Протягніть інструмент Измерение (Measure Tool) паралельно лінії, яка повинна бути в кадрі горизонтальною або вертикальною.
4. Відкрийте вікно повороту зображення RotateCanvas: Изображениеðповернуть холстðпроизвольной (Image ð Rotate Canvas ð Arbitrary).
5. Тут вказані кут повороту і напрям обертання. Нічого не змінюйте, завершуйте операцію клацанням на кнопці ОК.
6. Після обертання зображення надайте йому належного вигляду обрізайте краї, які заважають.
7. Зробіть дублікат фонового шару.
8. Створіть знімок (Snapshot) в палітрі В палитре история (History).
9. Прибиріть колір Изображение регулировкиðУменьшение насыщенности (Image ð Adjustments ð Desaturate).
10. Пензлем Историческая кисть (History Brush) відновіть колір одного об'єкту
|
| ||||
Практична робота №33.
Тема: Кадрування
1. Відкрийте будь -яке зображення
2. Виконайте те, що кадрується двома способами
3. Перший метод простий, зрозумілий і широко використовується користувачами.
4. Вибиріть інструмент Кадрирования (Crop). Нічого не треба змінювати на панелі властивостей інструменту! Встановіть покажчик інструменту в кут того прямокутника, що кадрується, і простяганням визначіть межі кадру. Перевірте розміри кадру на палітрі Информация (Info).
5. При необхідності перемістіть рамку кадру за допомогою курсорних клавіш або мишею при натиснутій клавіші CTRL.
6. Обріжте кадр по рамці натисненням клавіші ENTERабо подвійним клацанням усередині рамки.
7. Другий метод гнучкіший і дозволяє отримувати фігурні межі сюжетної області. Виберіть один з інструментів виділення Полигональное лассо (Polygonal Lasso).
8. Вибраним інструментом обведіть межу сюжетної області. Межа може бути не тільки прямокутною, але і фігурною.
9. Для фігурної межі сформуйте підкладку. Продублюйте поточний шар Слойðдублировать слой (Layer ð Duplicate Layer). Створіть новий шар (Layer ð New ð Layer) і перетягніть його нижче дубльованого щару. Відключіть фоновий шар Background і заповніть новий шар потрібним кольором.
10. Оформіть межу сюжетної області. Дайте команду Выделенияðперо (Select ðFeather) і в діалоговому вікні Радиус растушовки (Feather Selection) встановіть величину розтушовування межі. Перейдіть в режим швидкої маски (Q) і перевірте зображення контура. Поверніть в нормальний режим (Q).
11. Обріжте зображення по контуру: Изображениеð подрезать (Image ð Crop). Інвертуйте Выборð-инвертировать (Select ð Inverse) і очистіть Редактироватьðочистить (Edit ð Clear) область виділення. Зніміть виділення Выделениеðубрать выделение (Select ð Deselect).
Розділ 8. Розробка гіпермедіальних додатків з використанням мови HTML
Практична робота № 34
Тема «Розробка гіпермедіальних додатків з використанням мови HTML.
Мета роботи:познайомитися з мовою HTML. Навчитись розробляти додатки з використанням мови HTML.
Теоретичний матеріал
МОВА HTML
HTML розшифровується як HyperText Markup Language, або мова гіпертекстової розмітки. Це скорочена назва мови, за допомогою якої створюють Web-сторінки.
HTML-команди називають тегами (дескрипторами).
Тег (tag-ярлик, ознака) – це код, ідентифікуючий певний елемент документа HTML, наприклад, абзац, заголовок, посилання, таблицю і т.д. Теги заносять в кутові дужки <>.
Теги HTML бувають парними і непарними. Непарні теги надають вплив на весь документ або визначають разовий ефект в місці своєї появи. При використанні парних тегів в документ додаються відкриваючий і закриваючий теги, які впливають на частину документа, укладену між ними. Закриваючий тег відрізняється від відкриваючого наявністю символу «/» (коса риска) перед ключовим словом (</DIV>). Закриття парних тегів виконується так, щоб дотримувались правил вкладення.
<В><1>На цей текст впливають два теги</1></В>
Ефект застосування тегу може видозмінюватися шляхом додавання атрибутів. В парних тегах атрибути додаються тільки до відкриваючого тегу. Атрибути уявляють собою додаткові ключові слова, відокремлювані від ключового слова, визначаючого тег, і від інших атрибутів пробілами і розміщені до завершального тегу символу «>». Спосіб застосування деяких атрибутів потребує вказівки значення атрибута. Значення атрибута відокремлюється від ключового слова атрибута символом «=» (знак дорівнює) і ставиться в лапки.
<Н> ALIGN="LEFT”>
HTML-документ складається, насамперед, із тегу: <HTML>... </HTML>. Ця частина, у свою чергу, складається із головного тегу (<HEAD>... </HEAD>) - розділ заголовків (зокрема, розділ заголовків повинен містити загальний заголовок документа, обмежений парним тегом <TITLE>) і тегу змісту (<BODY>... </BODY>).
Загальна структура HTML- документа наступна:
<HTML>
<HEAD>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
Найважливішим використовуємим в HEAD елементом є заголовок сторінки: <TITLE>... </TITLE>. В TITLE-елементі вказується заголовок документа. Це ім’я використовується для ідентифікації цього документа в браузері.
Більшість елементів мови HTML описує частини змісту документа и поміщається між тегами <BODY> і </BODY>, тобто всередину структурного елемента BODY. Такі елементи ділять на блочні і текстові. Блочні елементи відносяться к частинам тексту рівня абзацу. Текстові елементи описують властивості окремих фраз і ще більше дрібних частин тексту.
правила вкладення елементів.
§ Елементи не повинні перетинатися. Іншими словами, якщо відкриваючий тег розміщується всередині елемента, то і відповідний закриваючий тег повинен розміщуватися всередині цього ж елемента.
§ Блочні елементи можуть містити вкладені блочні і текстові елементи.
§ Текстові елементи можуть містити вкладені текстові елементи.
§ Текстові елементи не можуть містити вкладені блочні елементи.
Модифікація тексту. HTML пропонує різні можливості для модифікації тексту. Теги модифікації можуть знаходитись в різних частинах тексту. В HTML існує відмінності між фізичними і логічними параметрами тексту. Фізичні параметри формують зовнішній вид документа, в той час як форма логічних установок залежить від браузера.
Фізичні елементи
<B>... </B> - жирний текст (Bold);
<I>...</I> - курсив (Italic);
<U>...</U> - підкреслювання;
<TT>... </TT> постійна символьна відстань , як у друкарської машинки (Teletype);
Приклад:
...
<I>курсив</I> і <B>жирний</B> у реченні.
...
Отримуємо:
…
курсив і жирний у реченні.
Логічні елементи. <EM>... </EM> - застосовується для акцентування уваги на текст всередині тегу, в основному відображається курсивом;
<STRONG>...</STRONG> - застосовується для створення логічного наголосу на текст всередині тегу, в основному відображається жирним шрифтом;
<CODE>...</CODE> - приклад коду;
<SAMP>...</SAMP> - послідовність символів;
<KBD>...</KBD> - символи введені з клавіатури;
<VAR>...</VAR> - ім’я змінної, в основному курсив;
<CITE>...</CITE> - цитата, в основному курсив.
Хід роботи.
1. Створіть папку WEB.
2. Запустіть текстовій редактор Блокнот : Пуск ð Программы ð Стандартные ðБлокнот.
3. Спочатку введіть теги, визначаючі структуру будь-якого –документа (використовуйте будь-який регістр – верхній або нижній).
3.1. Введіть з клавіатури основні теги, помістивши кожен з них, крім закриваючого тега </title>, з нового рядку.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
3.2. Між <title> </title> вставте назву документа – Група КМ. Це повинно виглядати наступним чином:
<title> Группа КМ </title>
3.3. Вставте пустий рядок між тегами <body> і </body> і введуть у ній наступний тест:
Ласкаво просимо на сторінку групи КМ! Тут ви дізнаєтесь про наше навчання та життя коледжу.
3.4. Додайте ваш особистий текст – кілька речень. Перед тим реченням, яке ви хочете перенести на наступний рядок ставте тег <BR>- перенос рядка.
3.5. Перед цим текстом і після нього проведіть горизонтальну лінію, використовуючи тег <hr>, цей тег не є парним, тому не потребує закриваючого тегу.
3.6. Нехай фон нашої сторінки буде синій, а для тексту – жовтий. Вставте в відкриваючий тег <body> атрибути bgcolor=blue і text=yellow, це буде мати вигляд:
<body bgcolor=blue text=yellow>
3.7. Збережіть документ: Файл ðСохранить какð Открыть вашу папку WEВ ðв поле ім’я файлу введіть Км.html (розширення html обов’язково).
3.8. Подивимося результат нашої роботи: Зверніть вікно Блокнотð знайдіть папку WEВ ðпо імені вашого файлу подвійне клацання
3.9. Подивившись результат зверніть вікно браузера.
4. Задання стилів тексту:
Щоб сторінка мала гарний вигляд, розділимо текст на абзаци і виділимо заголовок к. HTML має 6 рівнів заголовків розділів документа, пронумерованих числами от 1 до 6. Заголовок оголошується парою тегів з номерами, відповідними рівню, наприклад <h1></h1> - заголовок розділу першого рівню. Від нормального тексту заголовок відрізняється розміром і товщиною букв.
4.1. Вставте теги <h1></h1> так, щоб вони обмежували перше речення тексту:
<h1> Ласкаво просимо на сторінку групи КМ! </h1>
4.2. Подивимось результат: Збережіть файл в блокнотіð а в вікні браузера кнопку обновить, файл буде перезагружений.
4.3. Подивіться як будуть виглядати заголовки, якщо ви будете змінювати рівень заголовка з h1 на h2 і до h6, не забувайте зберігати файл і оновлювати в браузері.
4.4. Відновіть перший рівень заголовка.
4.5. Розмістіть заголовок по центру, добавте атрибут align=center
<h1 align=center > Ласкаво просимо на сторінку групи КМ!</h1>
4.6. Збільшимо розмір решти тексту і оформимо його полужирним курсивом підкреслюванням. Для цього використовуйте парні теги <b> </b>
4.7. Перевірте результат.
4.8. Курсивне підкреслення встановлюється за допомогою тегів <i></i>
4.9. Залиште обидва теги і перевірте результат.
4.10. За допомогою тегів <u></u>встановіть підкреслення.
4.11. За допомогою тегів <tt></tt>зобразіть текст шрифтом.
4.12. Залиште той вигляд, який вам сподобався.
4.13. Збільшить розмір шрифту з допомогою тегу <big></big>
4.14. Зменшить розмір шрифту з допомогою тегу <small></small>
4.15. Інший спосіб зміни розміру шрифту за допомогою тегу <font=1> </ font>, перевірте при різних значеннях атрибуту від 1 до 7. Можна зі знаком + або -, в цьому випадку розмір збільшується або зменшується в порівнянні з вихідним.
4.16. Центруючи по горизонталі даний абзац за допомогою тегу <center> </ center>
4.17. У своїй роботі ви можете використовувати наступні теги, що визначають логічні стилі, Перевірте, як вони працюють.
<dfn> </ dfn> - застосовується для визначення слова. Текст звичайно виводиться курсивом
<em> </ em> - для виділення слів і посилення. Відображається курсивом.
<cite> </ cite> - для виділення назв книг, фільмів, спектаклів і т.д.
Вводить курсивом.
<code> </ code> - для фрагментів коду програм. Показується на екрані шрифтом фіксованої ширини.
<kbd> </ kbd> - використовується для тексту, який користувач вводить з клавіатури. У різних браузерах може відображатися різними шрифтами.
<samp> </ samp> - служить для відображення повідомлень програм. Виводиться шрифтом фіксованої ширини.
<strong> </ strong> - для особливо важливих фрагментів. Звичайно виділяється напівжирним зображенням.
<var> </ var> - використовується для вказівки, що частина тексту або слово є символьної змінної, тобто текстом, який може бути замінений різними виразами. Відображається курсивом.
Специфікація HTML 4.0 пропонує більш прогресивний спосіб вказівки стилів тексту та інших елементів - за допомогою спеціальної мови каскадних таблиць стилів СSS (Cascading Style Sheets). Таблиці стилів - це велике досягнення в області Web дизайну, що розширює можливості поліпшення зовнішнього вигляду сторінок. Таблиці стилів спрощують визначення інтервалів між рядками, відступів, кольорів, використовуваних для тексту і фону, розміру і стилю шрифтів і т.д. Стиль більшості елементів HTML може описуватися за допомогою атрибуту style, який розташовується усередині відкриваючого тегу елемента. В якості значення атрибута style використовуються пари виду «властивість: значення». Наприклад, у фрагменті коду, що описує заголовок розділу <hl style="color: blue"> атрибут style = "color: blue" визначає, що властивість color (колір) має значення blue (синій), тобто текст заголовка першого рівня повинен відображатися синім кольором.
4.18. Можна вказувати стилі за допомогою спеціальної мови каскадних таблиць стилів (CSS - Cascading Style Sheets). Відредагуйте текст, видаливши попередні теги і вставивши теги <p> і </ p> з атрибутом так, щоб цей елемент мав вигляд:<p style=”font-weight: bold; font-style:italic; font-size:150%; text-align: center”> и в конце текста </p>.
font-size-можна вказати у відносних і абсолютних величинах, відносні - це відсотки, абсолютні - пункти (pt), пікселі (px), сантиметри (cm), міліметри (mm).
Вставка малюнку.
5.1. Копіюємо файл малюнка в папку WEB, візьмемо файл з розширенням. GIF або BMP.
5.2. Вставимо зображення в документ и відображення рамки навколо рисунка, товщиною в 5 пікселів після заголовка:
<img src=cc.gif border=5>
5.3. Вирівняти малюнок по центру <center></center>.
Створення списку.
6.1. Створимо нову сторінку нашого сайту, на якій вставимо ненумерований список. У вікні програми Блокнот (Notepad) виберіть команду меню Файл ð Створити (File ð New)
6.2. . Створіть структуру Web-документа, надрукувавши основні теги: пункт 3.1
6.3. Як заголовок документа в тезі <tltle> </ title> введіть: Чим ми займаємося?
6.4. Такий же заголовок для списку введіть в тілі документа між тегами <body> і </ body>, використавши для його відображення теги <h2> </ h2> з атрибутом align = center, вирівнюючи заголовок по центру сторінки:
<h2 aling =center> Чим ми займаємося? </ h2>
6.5. Самостійно підберіть колір фону сторінки і колір тексту, вказавши відповідні значення для атрибутів bgcolor і text у відчиненому тезі <body>, наприклад, так:
<body bgcolor=aqua text=navy>
Пам'ятайте, однак, що колір тексту повинен бути таким, щоб текст добре читався на вибраному фоні. Якщо атрибути кольору не вказувати, то за умовчанням текст буде відображатися чорним кольором на білому фоні.
6.6. Тепер вставимо на сторінку ненумерований список з інформацією про життя та діяльність вашої групи. Ненумеровані списки створюються за допомогою пари тегів <UL> </ UL> - (Unordered List-неупорядкований список), що обмежують список. Між ними розташовується стільки елементів, що починаються з тегу <LI> - (List Item - елемент списку), скільки елементів у списку.
<OL> </ OL>- нумерований список - (Ordered List упорядкований)
<DL> </ DL> - список визначень (Difinition List)
Заголовок списку необов'язковий елемент, формується за допомогою парного тегу: <LH> </ LH>
<LH></LH>
6.7. Вставте порожній рядок під рядком з кодом
<h2 align»center> Чим ми займаємося? </ h2> і введіть в тілі документа наступний код:
<ul>
<li> Вивченням предметів на заняттях.
<Li> Самостійне вивчення предметів в бібліотеці.
<Li> Робота в Інтернеті.
<Li> Практика за фахом.
<Li> Дружба.
<Li> Клуб дозвілля.
</ ul>
Зверніть увагу: тег <li> може використовуватися як одиночний, тобто без парного закриває тегу </ li>.
6.8. Інший вид маркера можна встановити за допомогою аркушів стилів, наприклад <LI type=square>- маркер у вигляді заповненого квадратика, <LI type=circle> - незаповненого гуртка. По експериментуйте з цим.
6.9. Збережіть документ у папці Web під ім'ям spisok.html.
6.10. Відкрийте файл spisok.html з папки Web
Створення форми
Розповівши на Web-сторінці про сферу свого життя ви припускаєте, що відвідувачі сайту захочуть зв'язатися з вами, задати питання, обговорити спільні проблеми, зробити якісь пропозиції. Щоб прискорити і полегшити їм процедуру зв'язку, досить помістити на даній сторінці спеціальну форму; заповнивши її, відвідувач сайту передасть вам інформацію, яку він вважатиме за потрібне послати.
Подібні форми широко використовуються на Інтернет-сайтах для збору різних відомостей, реєстрації користувача, формування запиту і т.д. Така форма може містити поля для введення даних, поля списків, що відкриваються списки, прапорці та перемикачі для вибору значень і інші елементи управління. Після заповнення форми користувачем спеціальна програма-обробник або, як її ще називають, скрипт, обробляє отримані-дані і передає їх за призначенням. Як вставити в Web-документ просту форму, яка дозволить користувачеві надрукувати своє повідомлення прямо на Web-сторінці і автоматично відправити його вам по електронній пошті?. Для цього вставимо в HTML-документ spisok.html текст із запрошенням заповнити форму, помістивши його під списком. Текст запрошення слід виділити в окремий абзац, обмеживши його парою тегів <р> </ р> і вирівняти по центру за допомогою атрибуту align = center.
7.1. Вставте порожній рядок між тегом </ u1> і закриваючи тегом </ body> і введіть в цьому рядку наступний код:
7.2. <р align=center >Якщо у Вас є питання або зауваження, напишіть нам: </р>
7.3. Кожна форма починається міткою <form> і закінчується тегом </ form> HTML - документ може містити в собі кілька форм, однак вони не повинні знаходитися одна усередині іншої. Текст і теги можуть розміщуватися всередині форми без обмежень. Відкриває тег <form> повинен містити обов'язковий атрибут action, який визначає, де знаходиться програма-обробник або адресу сервера, який буде обробляти форму. Так як повідомлення, написане відвідувачем сайту, буде відправлятися по електронній пошті, то значення цього атрибута повинно містити адресу E-mail власника сайту, наприклад: action = "mailto: km@narod.ru".
Ще один атрибут тега <form> - method - визначає, яким чином або за допомогою якого протоколу дані з форми будуть передані програмі-обробнику. Так як буде використана електронна пошта, то значення цього атрибута повинно бути post: method = post. Таким чином, елемент <form> .. . </ form> матиме приблизно такий вигляд:
<form action="mailto: km@narod.ru" method=post> </ form>
7.4. Додайте в документі spisok.html порожній рядок перед закриваючим тегом </ body> і введіть вказаний код, Тепер нам потрібно помістити в формі багаторядкове текстове поле для введення повідомлення. Для цього служать теги <textarea> </ textarea>. В якості атрибутів відкриваючого тегу <textarea> необхідно вказати кількість рядків (rows) і колонок (cols) а також ім'я (name), під яким вміст текстового поля введення буде передано програмі-обробнику.
7.5. Вставте порожній рядок перед закриваючим тегом </ form> і введіть наступний елемент, який створює текстове поле:
<center> <textarea rows=5 cols=40 name=comments> </ textarea> </ center>
Такий елемент створить текстове поле вводу висотою 5 рядків і шириною 40 символів. Введений відвідувачем сайту текст буде переданий обробникові під ім'ям comments (Коментарі)
7.6. Вставте порожній рядок перед закриваючим тегом </ form> і введіть в неї наступний код, що створює кнопку в новому абзаці та вирівнюючий її по центру сторінки:
<p> <center> <input type=submit value= "Відправити"> </ center> </ p>
7.7. Роботу форми можна перевірити:
7.7.1. Введіть у текстовому полі кілька слів.
7.7.2. Натисніть кнопку Надіслати під текстовим полем. На екрані з'явиться діалог з попередженням про те, що форма передасть вашу адресу E-mail одержувачу, а дані, що містяться у формі, будуть передані без шифрування і, якщо вони конфіденційні - це може бути небажано для вас
7.7.3. Натисніть кнопку ОК, щоб підтвердити передачу даних. Діалог з попередженням закриється.
Якби з'єднання з Інтернетом було встановлено, то дані з форми були б відправлені і через деякий час ви отримали б їх по електронній пошті. Але так як з'єднання не встановлено, то, в залежності від налаштувань вашої поштової програми або з'явиться повідомлення про неможливість відправити пошту, або дані з форми будуть поміщені в папку вихідних повідомлень поштової програми
8. Вставка гіпертекстових посилань
На відміну від простого тексту, який можна читати тільки від початку до кінця, гіпертекст дозволяє здійснювати миттєвий перехід від одного фрагмента тексту до іншого. Довідкові системи багатьох програмних продуктів побудовані саме за принципом гіпертексту. При клацанні лівою кнопкою миші на деякому виділеному кольором і підкресленому фрагменті поточного документа - гіпертекстовому посиланні - відбувається перехід до заздалегідь призначеного документу або фрагменту документа.
На Web-сторінках гіпертекстові посилання широко використовуються для переходу до певного фрагменту поточної сторінки, до наступної або будь-якій сторінці сайту або до документа іншого сайту.
Для завдання переходу по гіперпосиланню в мові HTML використовуються теги <а> </ а> з атрибутом href, значенням якого є адреса переходу. В якості адреси може використовуватися ім'я файлу іншого документа або URL-адресу.
Кожен комп'ютер, підключений до Інтернету, має свою унікальну адресу, яка може бути представлена або в числовому вигляді, наприклад, 204.146.46.133, або певним поєднанням символів, наприклад, www.microsott.com. Оскільки кожен комп'ютер має свою унікальну структуру каталогів і файлів-, то і кожна Web-сторінка також має унікальну адресу, званий URL (Uniform Resource Locator - Уніфікований покажчик ресурсів). Як видно з назви, URL може вказувати не тільки на сторінки Web, але також і на інші ресурси Інтернету, наприклад, FTP (File Transfer Protocol - Протокол передачі файлів) - сховища файлів. У найзагальнішому вигляді URL включає в себе покажчик на протокол, який застосовується для доступу до ресурсу - http, ftp та ін - і символьна адреса комп'ютера в поєднанні з ім'ям конкретного файлу в структурі каталогів цього комп'ютера. Наприклад, URL-адресу http://www.chat.ru/user/faq.html складається з покажчика на протокол http, який застосовується для доступу до Web, імені комп'ютера www.chat.ru і імені файлу-документа faq.html, який знаходиться в каталозі user.
Зі сказаного випливає, що кожній Web-сторінці відповідає свій HTML-файл. Однак ви можете помітити, що в багатьох URL-адресах відсутня ім'я файлу, наприклад, http://www.microsoft.com. Тим не менш, у вікні браузера все ж з'являється конкретна сторінка. Справа в тому, що адміністратори Web-серверів можуть вказати на своїх вузлах деякі HTML-файли, які виводяться за замовчуванням, якщо ім'я файлу в URL явно не задано. Зазвичай ці файли мають імена index.html або index.htm.
8.1. Створимо перехід по посиланню з кінця поточного документа spisok.html на першу сторінку вашого сайту, тобто до файлу Км.html. Щоб повідомити відвідувачеві сайту про можливість повернутися до першої сторінки, необхідно передбачити між відкриває <а> і закриваючим </ а> тегами відповідний текст:
8.2. Вставте у файлі spisok.html порожній рядок перед закриваючим тегом </ body> і введіть в неї наступний код:
<center> <a href=> "Км.html"> Ha першу сторінку </ а> </ center>
8.3. Збережіть і перевірте роботу, якщо ви все правильно зробили, то ви потрапите на вашу першу сторіночку.
8.4. Тепер створимо гіперпосилання для переходу з першої сторінки - Км.html - на другу - spisok.html. Для посилання найлогічніше буде використовувати текстовий фрагмент нашої діяльності, так як список на другій сторінці розкриває зміст саме цього фрагмента тексту. Для чого:
8.4.1. Відкрийте в програмі Блокнот (Notepad) файл Км.html
8.4.2. Відредагуйте цей файл, вставивши тег <center> <a href=:spisok.html"> </ a> за тегом <h1 align=center> Ласкаво просимо на сторінку групи Км! </ H1>
8.4.3. А тег <а href = "spisok.html"> між текстом «Тут ви дізнаєтесь» і «про наше навчання і життя в коледжі», а закриваючий тег </ а> - після нього
8.4.4. Встановіть для не переглянутих посиланнь білий колір (white), для переглянутої світло-зелений (lime), а для посилання в момент клацання мишею - червоний (red). Для чого відредагуйте файл Км.html, додавши в тег <body> атрибути link = white, vlink = lime, alink = red так, щоб цей тег мав такий вигляд:
8.4.5. <body bgcolor=blue text=yellow link=white, vlink=yellow,alink=red>
8.4.6. Перевірте роботу переходячи з однієї сторінки на іншу.
9. Створення таблиці.
До цих пір ми створювали документи, в яких текст розташовувався в одній колонці. На практиці іноді буває необхідно розташувати текст у двох або трьох колонках. Допомогти в цьому може таблиця. Крім того, таблиця, що складається з однієї комірки, може ефектно виділити фрагмент тексту, на який ви хочете звернути увагу читача. Дуже зручно чергувати в комірках таблиці малюнки і текст. Ну, і звичайно ж, таблиця потрібна для відображення інформації в табличному вигляді. Часто таблиця використовується для подання меню. Створимо у новому файлі таблицю з однієї колонки, в комірках якої, як в меню, уявімо посилання на наявні й інші, ще не створені сторінки сайту. Адже сайт може містити десятки сторінок. Тому дуже важливо мати можливість швидко вибирати потрібну сторінку з меню. Це меню ми потім помістимо у лівого краю екрану так, щоб воно постійно залишалося в полі зору користувача.
Кожна таблиця починається тегом <table> і закінчується тегом </ tаble>. Рядки таблиці утворюються парою тегів <tr> </ tr>, між якими розташовуються пари тегів <td> </ td>. Кожна пара цих тегів утворює один стовпець. Між відкриваючим <td> і закриваючим </ td> тегами поміщається текст або будь-яка інша інформація комірки.
9.1. Створимо нову сторінку нашого сайту, У вікні програми Блокнот (Notepad) виберіть команду меню Файл ð Створити ( NewðFile )
9.2. В заголовку документа вкажіть Меню. Колір фону і тексту документа самостійно виберіть такими, щоб посилання були добре видні
<title> Meню> </ title>
<body bgcolor=esilver>
9.3. Вставте порожній рядок між відкриваючим <body> і закриваючим </ body> тегами і, починаючи з неї, введіть код.
table>
<tr><td>Головна сторінка</td></tr>
<tr><td>Чим ми займаємося? </td></tr>
<tr><td>Про нашу групу</td></tr>
<tr><td>Новості</td></tr>
<tr><td>Розклад </td></tr>
<tr><td>Розваги</td></tr>
<tr><td>Наші партнери</td></tr>
<tr><td>Клуб дозвілля</td></tr>
<tr><td>Зв'язок з нами</td></tr>
</table>
9.4. Збережіть документ у папці Web під ім'ям menu.html
9.5. Запустіть його
9.6. Використовуючи атрибут align = center вирівняти таблицю по центру
9.7. Додайте в тег <tаble> атрибут border = 1, щоб показати рамку і комірки таблиці товщиною 1 піксель
9.8. Встановіть для таблиці ширину 140 пікселів, додавши атрибут width = l40 в відкриваючий тег <table>
9.9. Виділити дані в осередках напівжирним підкресленям і вирівняти по центру комірок, замість тегів <td> </ td> використовуйте теги <th> </ th>
9.10. У тегах <td> і <th> ви можете використовувати наступні атрибути:
• align - для горизонтального вирівнювання вмісту осередків по центру (center), лівого (left) і правого (right) краях комірки;
• width - для вказівки ширини осередку в пікселах;
• height - для визначення висоти комірки;
• valign - для вертикального вирівнювання даних у комірці по верхньому (top) і нижнього (bottom) краях і середині (middle) осередку; за замовчуванням valign = middle.
9.11. Перевірте, як працюють ці атрибути, після чого поверніть таблицю в колишній стан.
9.12. По експериментуйте з кольорами і підберіть відповідні, з вашої точки зору, для таблиці, вставивши атрибут bgcolor відповідно в тег <th>, <tr> або <table>.
9.13. Створимо посилання з двох перших пунктів меню на відповідні сторінки нашого сайту. Так як інші сторінки ще не створені, то обмежимося цими двома посиланнями. Як і колись, скористаємося тегами <а> </ а> з атрибутом href. Як значення цього атрибута для першого пункту меню - Головна сторінка - слід вказати файл Km.html, тобто href = "Km.html", а для другого - Чим ми займаємося?-файл spisok.html, т.е.href = "spisok.html"
<tr> <th> <a href="km.html" target="frame"> Головна сторінка </ a> </ th> </ tr>
<tr> <th> <a href="spisok.html" target="frame"> Чим ми займаємося? </ a> </ th> </ tr>
9.14. Перевірте роботу. Клацніть мишею на першому посиланню - Головна, сторінка Якщо файл був завантажений в те ж саме вікно браузера, то натисніть кнопку Назад (Back) на панелі інструментів або просто закрийте вікно, якщо файл був завантажений в нове вікно. На екрані знову відобразиться файл menu.html.
9.15. Клацніть мишею на другий посиланню - Чим ми займаємося? У вікні браузера з'явиться файл spisok.html. закрийте вікно
10. Створення сторінки з фреймами.
Значно поліпшити зовнішній вигляд і функціональність сайту можна, використовуючи фрейми. За допомогою фреймів екран поділяється на кілька вікон, у кожному з яких відображається вміст окремої сторінки. Використовуючи подібним чином технологію фреймів, можна одночасно завантажити в одне вікно браузера кілька Web - сторінок.
Розмір фрейму може змінюватися користувачем прямо в екрані за допомогою миші. Кожен фрейм має власну адресу, що дозволяє відображати його незалежно від інших фреймів, і власне ім'я, що дозволяє переходити до нього з інших фреймів. Такі властивості фреймів дозволяють розміщувати в одному фреймі інформацію, яку автор вважає за необхідне постійно показувати користувачеві. Це може бути логотип фірми, набір керуючих кнопок, меню і т.д. За допомогою фреймів можна створювати також вікна запитів, коли в одному фреймі знаходиться власне запит, а в іншому - його результати.
Подивимося, як за допомогою фреймів помістити у вікні браузера меню для переходу на інші сторінки сайту і самі сторінки.
Для опису фреймів використовується спеціальний HТML-файл
10.1. У вікні програми Блокнот (Notepad) створіть новий файл
10.2. Введіть основні теги, крім тегів <body> </ body>, які у файлі, що описує фрейми, не використовуються. У тегах <title> </ title> заголовка вкажіть - Група Км.
Замість тегів <body> </ body> у файлі, що описує фрейми, використовується пара тегів <frameset> </ frameset> з атрибутами rows або cols, визначальними, як ділиться екран по горизонталі або по вертикалі. В якості значень цих атрибутів можна використовувати числове значення висоти або ширини фрейму в пікселях або у відсотках від 1% до 100%. Наприклад, якщо ви хочете розділити вікно браузера по горизонталі на два рівних за розміром фрейма, то код HTML повинен бути таким:
<frameset rows="50%,50%">
Зверніть увагу: значення атрибутів відокремлюються один від одного комою. Щоб розділити вікно браузера по вертикалі на два фрейми шириною 200 і 600 пікселів, слід написати:
<frameset cols="200,600">
Однак фактична ширина і висота вікна фрейму залежить від поточного дозволу монітора. Тому, якщо у користувача встановлено дозвіл, наприклад, 1024x768 пікселів, тобто ширина екрану - 1024 піксела, то частина екрану може залишитися незаповненою. Тому рекомендується задавати розміри фреймів у відсотках так, щоб їх сума дорівнювала 100%. Якщо все ж необхідно для одного з вікон вказати фіксований розмір в пікселах, то розмір іншого вікна можна не вказувати, замінивши його значення символом В цьому випадку браузер сам підбере потрібний розмір для другого вікна. Створимо для відображення нашого сайту два вертикальних фрейми. Для першого фрейма, в якому буде виводитися меню, встановимо фіксовану ширину - 160 пікселів, а розмір другого надамо визначити браузеру, замінивши його зірочкою. Для опису кожного фрейма окремо використовуються одиночні теги <frame>, які повинні знаходитися всередині елемента <fraimeset>. .. </ Frameset>. Обов'язковим атрибутом тега <frame> є src, значення його - адресу документа, який повинен знаходитися в даному фреймі. Так як в першому фреймі буде знаходиться файл menu.html, то даний тег слід записати так:
<frame src ="menu.html">
10.3. У вікні програми Блокнот (Notepad) вставте порожній рядок після закриваючого тегу </ head> і введіть наступний код:
<frameset cols=160,*>
</ frameset>
10.4. Вставте у вікні програми Блокнот (Notepad) порожній рядок після відкриваючого тегу <frameset> і введіть вказаний тег:
<frame src ="menu.html">
10.5. У другій фрейм повинен завантажуватися файл Km.html, тому другий тег <frame> буде таким:
<frame src="Km.html" name="frame">
Саме для того, щоб при переході по посиланнями нашого меню сторінки відкривалися не в першому фреймі, в якому розташовано меню, а в другому, ми використовували в попередньому пункті в посиланнях меню атрибут target зі значенням "frame": target = "frame", де "frame" - це ім'я другого фрейма. І тепер ім'я "frame" слід присвоїти другому фрейму, в якому повинен відкриватися файл geoton.html. Тому другий тег <frame> в остаточному вигляді повинен бути записаний так, як ми записали.
10.6. Збережіть файл в папці під ім’ям index.html
10.7. Відкрийте в браузері файл index.html з папки Web. Ви побачите, що вікно програми перегляду розділене по вертикалі на два фрейми. У лівому фреймі відображається меню, а в правому-файл КМ.html
10.8. Перевіримо, як працюють посилання меню:
10.8.1. Клацніть мишею на посиланні меню Чим ми займаємося? У правому фреймі буде відкритий файл spisok.html.
10.8.2. Клацніть мишею на посиланні меню Головна сторінка. У правому фреймі знову з'явиться файл KM.html
10.9. Ми створили сайт із двох Web-сторінок. Тепер, щоб він став доступний всім, його необхідно помістити в Інтернеті на один з серверів World Wide Web.
Розділ 9. Система підготовки презентацій MS PowerPoint.
Можливості створення презентацій: нова презентація, з шаблону оформлення, з майстра автозміста, фотоальбом. Додавання слайдів в презентацію. Операції із слайдами. Оформлення презентації.
Практична робота №35.
Тема: Створення презентації туристичної фірми, що займається організацією подорожей та екскурсій.
Хід роботи
1. Запустіть MS PowerPoint і вибрати створення нової презентації.
2. Додайте в презентацію нові слайди (команда Создать слайд вменю Вставка),вибираючи відповідну розмітку слайдів так, щоб було створено 9 слайдів (Вставка Þ Создать слайд).
Перший слайд (Формат ð Разметка слайда ð Пустой слайд ð Добавить обьект WordArt, Формат ð Оформление слайда):
Другий слайд (Формат ðРазметка слайда ð Пустой слайд ðДобавить обьект WordArt ð Добавить картинку, Формат ð Оформление слайда):
Третій слайд (Формат ð Разметка слайда ð Заголовок и текст (мітку-заповнювач Заголовокслід видалити) ðВвести текст слайду, Формат ð Оформление слайда):
Четвертий слайд (Формат ð Разметка слайда ð Только заголовок ðВвести текст, Добавить обьект WordArt ð Добавить картинку):
П'ятий слайд (Формат ð Разметка слайда ð Заголовок и текст, ввести текст и вставить картинку):
Шостий слайд (Формат ð Разметка слайда ð Только заголовок ð Ввести текст Добавить картинку):
Сьомий слайд (Формат ðРазметка слайда ð Только заголовок ð Ввести текст):
Восьмий слайд (Формат ð Разметка слайда ð Только заголовок ð Ввести текст, Добавить обьект WordArt):
Дев'ятий слайд (Формат ð Разметка слайда ð Обьект, добавить картинку):
3. Додайте анімацію об'єктів слайдів, для чого потрібно перейти до необхідного слайду і скористатися командою Настройка анимациив меню Показ слайдов. Далі, вибираючи кожен об'єкт слайду, додайте необхідний ефект – звук, час і т.д. (з використанням можливостей області завдань в режимі настройки анімації):
4. Для того, щоб набудувати перехід між слайдами, слід скористатися командою Смена слайдовв меню Показ слайдові встановити необхідні параметри переходу (по клацанню миші, автоматично, ефект при переході і т. д.); або для одного слайду, або – для всіх.
5.У режимі сортувальника слайдів (команда Сортировщик слайдовв меню Вид) можна проглянути підготовлені слайди презентації і внести загальні корективи, наприклад, в кількість або порядок проходження слайдів. Наприклад, для приховання 5-го і 8-го слайдів слід виділити слайд і скористатися командою Скрыть слайдв меню Показ слайдов.
6. Створимо також декілька довільних демонстрацій (команда Произвольный показв меню Показ слайда): «Туризм 1» і «Туризм 2»
7.Для перегляду слайдів необхідно використовувати, наприклад, команду Начать показв меню Показ слайдов.
8. Для збереження підготовленої презентації в режимі демонстрації слід скористатися командою Сохранитьабо Сохранить как (вибравши тип файлу – демонстрація, розширення pps) в меню Файл.