Приклади

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

<SMALL>Приклад FORM-1.html</SMALL>:

<FORM ACTION=mailto:[e-mail] METHOD=POST”> <TEXTAREAROWS=5COLS=72NAME=Comments></TEXTAREA>

<P>

<INPUTTYPE=SUBMITVALUE=Send>

</FORM>

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

<SMALL>Приклад FORM-2.html</SMALL>:

<FORM ACTION=mailto:[e-mail] METHOD=”POST”>

Pleasetellyouropinionabouttheoverallqualityofthisdocument:

<SELECTNAME=evaluation>

<OPTION>Verypoor

<OPTION>Ratherpoor

<OPTION>Average

<OPTION>Rathergood

<OPTION>Verygood

</SELECT>

<P>Youcanalsobemorespecificbywritingafewcomments:

<TEXTAREA NAME=CommentsROWS=5COLS=72></TEXTAREA>

<P>

<INPUTTYPE=SUBMIT VALUE=Send>

</FORM>

5.2 Хід роботи

1. Продовження створення особистого сайту. Створити 2 нових сторінки сайту з використанням фреймових структуp.

2. Додайте до змісту сайту два гіперпосилання на ці дві сторінки (frame1.html і frame2.html).

3. Як основну сторінку використовуйте файл index.html.

4. Як додаткові – використовуйте файли з придуманим вами змістом. Наприклад, один може бути про вашого улюбленого музиканта або гурт (muz.html), другий – по тій темі, що вас цікавить (tema.html).

5 Додати до свого сайту сторінку (kniga.html) з книгою відгуків або книгою відвідин і створити її з використанням форм.

Вимоги

1. При виконанні роботи використовувати вертикальні і горизонтальні фрейми або в різних сторінках, або одночасно в одній сторінці.

2. Основна сторінка повинна містити лівий фрейм, у якому знаходиться зміст всього сайту, виконане у виді гіперпосилань.

3. При натисканні на гіперпосилання в змісті, сторінка відповідна їй повинна з' являтися в іншому фреймі.

4. Спробувати використання вертикальних і горизонтальних фреймів в одній фрейм структурі і кількість фреймів (більше 2).

5. Досліджувати поведінку браузера при відображенні вкладених фреймів.

6. При виконанні роботи потрібно використовувати всі теги форм.

7. Дані, введені у форму відправляти методом POST в окрему сторінку (gost.html).

8. Прийняти і перевірити відправлені дані.

9. Розібратися й описати в звіті формат передачі даних методом POST.

5.4 Звіт

Повинен містити вихідний текст HTML-коду.

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

1. Що таке фрейми і їхнє призначення?

2. Як задаються фреймові структури?

3. Напишіть формат запису тегів FRAMESET i FRAME?

4. Для чого використовуються імена фреймів?

5. Як зазначити в гіперпосиланні, у який фрейм завантажувати цільову сторінку?

6. Як відчинити сторінку в новому вікні навігатора?

7. Що відбудеться, якщо зазначеного в гіперпосиланні фрейму не існує.

8. Що таке форми і їхнє призначення?

9. Чи можна використовувати теги введення даних не у формах?

10. Які методи передачі даних із форм ви знаєте?

11. Яких тегів для введення даних, на вашу думку, не вистачає в HTML?

12. Перерахувати теги введення даних.

13. Перерахувати типи тегу INPUT.

14. Чи можна в одному документі HTML використовувати декілька форм?

15. Який вид при відображенні сторінки має тег SELECT?

16. Чи обов'язково наявність у формі кнопок?

Лабораторна робота 6
Робота із графічними зображеннями у GIMP. Створення елементів дизайну web-сторінки у GIMP

Мета:

o ознайомитись із середовищем створення анімованих забражень GIMP;

o одержати на практиці навички роботи із графічними зображеннями у GIMP та створенні елементів дизайну сторінки.

6.4 Теоретичні відомості

Спочатку скорочення «GIMP» означало «General Image Manipulation Program», а в 1997 повну назву було змінено на «GNU Image Manipulation Program» і програма офіційно стала частиною проекту GNU. GIMP можна використовувати для обробки цифрових фотографій. Типові області застосування включають створення графіки і логотипів, масштабування і обрізання фотографій, розфарбовування, комбінування зображень з використанням шарів, ретушування і перетворення зображень в різні формати.

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

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

Для тих хто не знайомий з цим, традиційний метод, який використовується художниками для додання руху зображенню – це створення численних картинок. Кожна картинка представляє окремий «знімок» сцени, відомий як кадр, і ці кадри організовані в хронологічному порядку, від раннього до пізнього. Анімація – просто показ цих кадрів. Вона може виглядати дуже правдоподібно при відповідній швидкості. Швидкість анімації відома як частота кадрів і вимірюється в кадрах-в-секунду. Отже, давайте подивимося що GIMP може запропонувати нам в сенсі анімації.

6.2 Хід роботи

Шари будуть відігравати основну роль у створенні анімації. Кожен шар буде працювати як окремий кадр. Самий нижній кадр буде самим першим і кадри будуть програватися знизу вгору за допомогою вибору Animation Playback з меню фільтрів. Для прикладу створимо невелику анімацію.

1 Створимо лого Microsoft чорними літерами на білому тлі. Самий близький до справжнього лого шрифт – «Eras».

Відкриваємо діалогове вікно Layers & Channels і натискаємо на кнопку Duplicate Layer (це кнопка на якій намальовані два аркуші паперу, один на іншому). Утворюється копія шару. Тепер клацніть на шар, щоб переконається, що він в активному стані, потім виберіть Rectangular Select tool з toolbox. Потім у вікні зображення, виберіть останню букву лого, тобто «t» створіть прямокутне виділення навколо неї. Після того як ви побачите межу виділення та помістіть курсор миші всередину виділеної області, він перетвориться на хрест. Це означає, що ви можете клікнувши і потягнувши посунути виділену область. Злегка зрушуємо її вниз, близько 5 пікселів. Потім натискаємо Ctrl + H, щоб закріпити зрушену область на новому місці.

Дублюємо верхній рівень, створивши третій шар. Потім натискаємо на новий верхній шар, щоб його активувати, перевіряємо чи вибраний Rectangular Selection tool і повертаємося назад у вікно картинки. Далі вибераем ДВІ останні букви лого («f» і «t») і зрушуємо виділену область вниз на 5 пікселів або близько того.

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

Зрештою повинно вийти 15 кадрів. Бажано перейменувати кадри і помістити номери поруч, двічі клікнувши на текст у кожному шарі. У назві кожного шару можна вказати величину часу в дужках в мілісекундах і фільтр Animation Playback буде показувати цей кадр протягом цього часу. Таким чином можна контролювати швидкість анімації від кадру до кадру. Не обов'язково мати частоту кадрів постійною. Для цього прикладу кріпи можна використовувати затримку в 50 мілісекунд для кожного кадру.

Отже, тепер є анімація, яка являє собою падіння Microsoft, і необхідно зберегти її, так щоб помістити на web-сторінку. GIMP дозволяє зберегти анімацію у форматі animated GIF, який дозволить у web-браузері спостерігати її. Однак перед тим як зберегти її в GIF, ми повинні переконатися, що наша картинка в форматі індексованих кольорів, а не в RGB. Назва картинки надає цю інформацію в дужках. Якщо там написано RGB ви повинні натиснути правою кнопкою на вікно картинки, отримати меню і вибрати з нього Image-> Indexed. Після цього ми отримаємо повідомлення GIMP, що для створення прозорого або анімованого GIF оптимальна кількість кольорів – це 255 або менше. Після цього ми отримаємо вікно Indexed Color Conversion, яке дозволить нам вибрати деякі кріпия конвертації. Виберіть варіанти за замовчунням. Після цього з назви буде видно, що картинка кріп конвертована в індексовані кольори.

Тепер необхідно зберегти зображення, тому перейдемо у вікно зображення і клікнемо правою кнопкою, щоб викликати меню. Виберемо File-> Save As, щоб викликати вікно Save Image. Потім виберемо місце збереження файлу і ім'я. GIMP автоматично визначив, що це має бути збережено у форматі GIF – OK. Тепер з'являється вікно Save As GIF і дозволяє нам вибрати деякі параметри формату файлу. Можна вибрати зберегти файл у форматі interlace, вибрати збереження коментаря до файлу, встановити затримку між кадрами для кадрів в яких не вказано затримку в діалоговому вікні Layers, і можна вибрати як кадри взаємодіють один з одним у процесі анімації.

2 Створіть нове зображення розміром 400 × 400 пікселів, виберіть режим: «Колір RGB» та фон: «Прозорість». Використовуючи інструмент «Виділення еліптичних областей «, виділіть коло.

3 Створіть новий прозорий шар і назвіть його «Ring». Виберіть інструмент «Заливка кольоровим градієнтом». У вікні опцій інструменту виберіть «Основний в фоновий (RGB)» у випадаючому списку опції «Градієнт» і «Радіальний» в випадаючому списку опції «Форма:». Змініть колір переднього плану в світло-синій (# 8FBEE8), а колір заднього плану в чорний (# 000000). Утримуючи ліву кнопку миші проведіть від лівої верхньої частини кола, до правої нижньої частини. У Вас повинно вийде коло, залите градієнтом синього кольору. Виділення повинно залишитися активним.

4 Використовуючи інструмент зменшення виділення (<Меню зображення> «Виділення» → «Зменшення»), зменшіть виділення на 9 пікселів. Натисніть Ctrl+K, щоб очистити виділення. Центр кулі повинен стати прозорим.

5 Використовуючи інструмент збільшення виділення (<Меню зображення> «Виділення» → «Збільшення»), збільште виділення на 2 пікселя. Створіть новий прозорий шар і назвіть його «Cirlce». Переконайтесь, що цей шар знаходиться між шарами «Фон» і «Ring». Змініть колір переднього плану на #A3DB1D і виберіть інструмент «Заливка кольором або шаблоном». У вікні опцій інструмента, поміняйте значення опції «Область застосування» на «Заповнити всі виділене».

6 Створіть новий прозорий шар і назвіть його «Shade». Проведіть вертикальну і горизонтальну направляючі так, щоб їх перетин був центром кола (<Зображення> «Направляюча» →»Направляюча»). Можливо, щоб побачити направляючі Вам потрібно поставити галочку в <Перегляд> «Показувати кріпияючі» (Shift+Ctrl+T). Переконайтесь, що шар «Shade» знаходиться між шарами «Circle» і «Ring». Виберіть інструмент «Виділення еліптичних областей», і у вікні опцій інструменту виберіть опцію «Розтушувати краї» і поставте значення опції «Радіус» в 30. Натиснувши копку Ctrl, намалюйте коло, але починайте виділення трохи правіше точки перетину направляючих. Це дозволить залишити виділення у формі серпа на лівій стороні внутрішнього кола.

7 Переконайтесь, що активним шаром є шар «Shade». Виберіть інструмент «Заливка кольором або шаблоном «(Shift + B), колір переднього плану поставте чорний і залийте виділення. Це повинно гарно виглядати, якщо виділення зроблено добре. Поставте значення прозорості цього шару в 30%.

8 Виберіть шар «Circle». Виберіть опцію у меню <Шар> «Прозорість» → «Альфа-канал → Виділена область «. І знову виберіть шар «Shade». Після цього внутрішнє коло повинне виділитися. Знову виберіть інструмент «Виділення еліптичних областей», цього разу значення у опції «Радіус» поставте в 100. Зробіть ще один «серп», але зробіть його в правій стороні кола і тонше. Після цього виберіть інструмент «Заливка кольором або шаблоном», встановіть колір переднього плану в чорний і залийте одержане виділення. І знову, якщо все було зроблено правильно, коло буде красиво розмите всередині.

9 Створіть новий прозорий шар, назвіть його «Highlight» і помістіть верхівку стека шарів. Використовуючи інструмент «Виділення еліптичних областей» створіть широкий еліпс, що займає більшу частину верхньої частини кола. Виберіть білий колір як колір переднього плану. Потім виберіть інструмент «Заливка кольоровим градієнтом «і у вікні опцій інструменту змініть значення опції «Градієнт:» в «Основний в прозорий» і значення опції «Форма» в «Лінійне». Утримуючи ліву кнопку миші просто проведіть від верхньої частини еліпса до нижньої. Змініть значення прозорості шару на 80%.

10 Виберете інструмент «Додати текст до зображення» і що-небудь напишіть. Збільшіть розмір тексту, щоб заповнити місце всередині кола. Упевніться, що шар тексту розташований десь між шаром «Shade» і шаром «Highlight».

11 Виберете шар «Ring». Запустіть скрипт <Скрипт> «Тінь» → «Падаюча тінь «. Встановіть обидва зміщення в 4. Перемістіть шар тіні вниз стеку шарів, але останнім залиште шар фону. Виберіть шар фону і залийте його білим кольором. Також можете поставити значення прозорості шару тексту у межах 25%.

Вимоги

1 Продовжити створення власного сайту. Доповнити його створеним в GIMP анімованим логотипом.

2 За методикою п.2-11 доповнити сторінки власного web-сайту створеними в GIMP елементами дизайну.

6.4 Звіт

Повинен містити вихідний текст HTML-коду, кріпи проміжних результатів роботи в GIMP.

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

1 Що таке шар і для чого його використовують в середовищі GIMP?

2 Поняття каналів в середовищі GIMP.

3 Мета застосування скриптів в GIMP.

4 Дайте характеристику можливостей GIMP.

5 Для чого використовують GIMP?

6 Як створити анімований текст? Основні етапи.

ПЕРЕЛІК РЕКОМЕНДОВАНИХ ДЖЕРЕЛ

1. Буров Є. Комп'ютерні мережі [Текст] / Є. Буров; Пасічник В., ред. — 2-ге оновлене і доповн. вид. — Львів: Бак, 2003. — 584 с.

2. Гаевский А.Ю. Самоучитель по созданию WEB-страниц: HTML, JavaScript и Dynamic HTML. / А.Ю.Гаевский, В.А.Романовский. - К.: А.С.К., 2002. - 472 с.

3. Глинський Я.М. Інтернет. Сервіси, НТМL і web-дизайн: навч. посіб. / Я.М.Глинський, В.А.Ряжська. - 3-є вид. - Львів: Деол, СПД Глинський, 2005. - 192 с.

4. Жуков І.А. Комп'ютерні мережі та технології: Навч. посібник. / І.А.Жуков, В.О.Гуменюк, І.Є.Альтман. - К.: НАУ, 2004. - 276 с.

5. Калита Д.М. Комп'ютерні мережі. Апаратні засоби та протоколи передачі даних: Навч. посібник. / Третяк О.В., ред. - К.: Видав.-полігр. центр "Київський університет", 2003. - 327 с.

6. Комолова Н.В. HTML: учебный курс. - С.Пб.: Питер, 2006. - 268 с.

7. Маслов І.В. Комп'ютерні мережі: конспект лекцій. - Івано-Франківськ: ІФНТУНГ Факел, 2008. - 50 с.

8. Матвієнко О.В. Internet - технології: проектування Web-сторінки: Навч. посібник. / О.В.Матвієнко, І.Л.Бородкіна. - 2-ге вид., дороб. і доп. - К.: ЦУЛ, 2004. - 154 с.

9. Практикум для лабораторних та самостійних робіт з використанням сервісних програм та INTERNET / Юрчишин В.М., авт. - Івано-Франківськ: ІФНТУНГ, 2000. - 37 c.

10. Терлецька І.М. Організація пошукової роботи студентів у мережі INTERNET / І.М.Терлецька, Н.П.Зеленська, О.С.Коптенко // Нові технології навчання. - К.: Інститут інноваційних технологій і змісту освіти, 2007. - Вип. 47. - С.15-17.

Дата добавления: 2015-07-10