Резка дизайна и создание Web-публикации.

1. Тепер переходимо з Photoshop в ImageReady

2.Тепер Нові зміни з Photoshop в ImageReady

3.Пограйтеся з настройками, оптимізуйте зображення

4.Виберіть інструмент Slice Tool, і тепер Вам слід буквально порізати зображення на частини. Роблячи це інтуїтивно, спробуйте внести сенс в резку. Наприклад, слід відокремити зображення посилань один від одного. В останню чергу відокремте головне зображення, де буде текст. кожній розрізний частини присвоюється свій номер.:

Ефект Rollover.

1. Виберіть інструмент Slice select tool і виділіть будь-яке зображення посилання і вона буде активною, її Ви побачите на панелі Web Content. Тепер виділіть цей же шар на панелі Layers. Переконайтеся, що видимість ефектів відключена!

2. А теперь на панели Web Content данного слоя правой клик мышью выберите Add Rollover State => Over. Сделайте Over активным и на панели Layers включите видимость эффектов.

\

Застосуйте дану дію до всіх посилань.

3.А тепер, щоб по посиланнях можна було кудись переходити Вам слід заповнити їх вмісті, тобто ... посиланнями.

7.1.6 Оптимізація зображень.

1. Наступне, що Вам слід зробити це оптимізувати кожен відрізаний шматок дизайну (тобто малюнка). Виділяємо і експериментуємо з настройками. Краще вибирати для маленьких шматків jpg формат, а для великих gif

2. Після цього зберігаємо сторінку File> Save optimized as. У нас вийти hmtl файл і папка з зображеннями.

7.1.7 Створення макету сайту: спосіб 2.

Використовувати файли leafs.png, pixelated_blue_rectangle.png

Крок 1.

Создайте новий документ (Ctrl + N) 1200х750 px. Виберіть Gradient Tool (G) і застосуйте лінійний градієнт зверху вниз від # 792700 до # 000000.

Крок 2

Створіть новий шар, виберіть Brush Tool (В), встановіть м'яку кисть діаметром 300 px і додайте кольору на ваш макет. Автор використав червоний, помаранчевий і блакитний. Назвіть шар color".

Крок 3

Відкрийте зображення з листям і вставте його в ваш документ. Клацніть правою кнопкою миші на шарі і виберіть Convert to Smart Object. Потім Filter> Artistic> Film Grain, встановіть параметри, зазначені на картинці нижче. Далі Filter> Pixelate> Mosaic. Змініть режим накладання шару на Difference, зменшите opacity до 30% і перейменуйте шар в "texture".

Крок 4

Створіть новий шар, виберіть Rounded Rectangle Tool (U), встановіть радіус 3 рх і намалюйте чорний прямокутник з круглими кутами. Двічі клікніть на шарі і застосуйте параметри для Drop Shadow, зазначені нижче. Зменшіть opacity шару до 70% і назвіть його "black shape".

Крок 5

Виберіть всі шари і згрупуйте їх. Назвіть групу "background".

крок 6

Створіть нову групу і назвіть її "home". Створіть ще одну групу всередині "home" і назвіть її "logo".

Крок 7

Создайте шар в групі "logo". Виберіть Type Tool (T) і напишіть логотип сайту (колір # f4f4f4). Двічі клікніть на шарі і застосуйте параметри, вказані нижче. Створіть новий шар і додайте теглайн (колір # eeeeee).

Крок 8.

Создайте нову групу, назвіть її "Sign up | Login". Виберіть Rounded Rectangle Tool (U) і намалюйте прямокутник як на картинці. Двічі клацніть на шарі і застосуйте параметри, вказані нижче. Встановіть білий колір foreground і за допомогою Type Tool (T) напишіть на кнопці "Sign up | Login". Зменшіть opacity текстового шару до 75%.

Крок 9

Створіть нову групу "Navigation". Додайте новий шар, виберіть Single Row Marquee Tool і створіть виділення висотою 1 px. Залийте виділення # 406f94 кольором і видаліть області, що знаходяться поза чорного прямокутника, використовуючи Rectangular Marquee Tool (M). Зменшіть opacity шару до 40% і назвіть його "Line".

Крок 10

Створіть новий шар. За допомогою Rectangular Marquee Tool (M) створіть виділення як у автора (замітка: можете використовувати напрямні для точності). Візьміть Gradient Tool (G) і застосуйте градієнт знизу вврех від # 35423e до прозорого. Зніміть виділення. Потім Filter> Noise> Add Noise і встановіть параметри, зазначені на картинці. Назвіть цей шар "gradient" і встановіть відстань між лінією і градієнтом в 1 px

Крок 11

Виберіть Type Tool (T) і напишіть назви сторінок на навігаційній панелі. Двічі клацніть на текстовому шарі і застосуйте параметри, вказані нижче. Автор використав шрифт Greyscale Basic.

Крок 12

Чоздайте новий шар, виберіть Single Column Marquee Tool і клацніть один раз на макеті. Потім виберіть Rectangular Marquee Tool (M), клікніть на кнопці "Intersect with selection" на панелі опцій і створіть виділення як на картинці. Залийте виділення білим, зніміть виділення.

Крок 13

Дважди клацніть на шарі, створеному в попередньому кроці, встановіть параметри, вказані нижче. Назвіть шар "line 1".

Крок 14

Продублюйте шар "line 1" і назвіть копію "line 2". Виберіть Move Tool (V) та натисніть один раз на праву стрілку на клавіатурі, щоб зрушити лінію на 1 рх вправо. Двічі клікніть на шарі, застосуйте параметри, вказані нижче.

Крок 15

Виділіть шари "line 1" і "line 2", клікніть на них правою кнопкою миші і виберіть Convert to Smart Object. Назвіть об'єкт "separator".

Крок 16

Створіть новий шар під "separator". Виберіть Rectangular Marquee Tool (M), створіть виділення як на картинці, залийте його # 35423e кольором. Клацніть правою кнопкою миші на шарі і виберіть Convert to Smart Object. Потім Filter> Blur> Gaussian Blur, Filter> Noise> Add Noise (для обох фільтрів встановіть параметри, зазначені нижче). Встановіть opacity шару 60% і назвіть його "highlight".

Крок 17

Виберіть шар "separator", потім Layer> Layer Mask> Reveal All. Виберіть Gradient Tool (G) і застосуйте градієнт знизу до середини від чорного до прозорого.

Крок 18

Виділіть шари "separator" і "highlight". Виберіть Move Tool (V), утримуючи клавіші Alt і Shift, клацніть в документі і потягніть мишку. Тепер у вас є копії виділених шарів. За допомогою Move Tool (V) посуньте шари вправо. Повторіть цей крок і створіть стільки роздільників, скільки потрібно.

Крок 19

Виберіть всі шари "separator" і "highlight" і згрупуйте їх. Назвіть групу "separators".

Крок 20

Виберіть Rectangle Tool (U) і створіть прямокутник. Помістіть шар під усіма верствами з назвами сторінок. Двічі клікніть на шарі і встановіть наступні параметри для Gradient Overlay. Назвіть шар "active menu", встановіть opacity 50%.

крок 21

Створіть нову групу, назвіть її "search" і розташуйте її під групою "navigation". Виберіть Rounded Rectangle Tool (U), встановіть радіус 3 рх і створіть прямокутник, як показано нижче (використовуйте # 104f59 колір). Назвіть цей шар "text field" і встановіть opacity 80%.

\

крок 22

Виберіть Rectangle Tool (U) і створіть прямокутник. Помістіть його справа на панелі пошуку. Двічі клацніть на шарі і встановіть параметри, вказані нижче. Клацніть правою кнопкою миші на шарі і виберіть Create Clipping Mask.

крок 23

Виберіть Type Tool (T) і напишіть "search" білим кольором. Встановіть opacity шару 75%.

крок 24

Виберіть Line Tool (U) і намалюйте вертикальну лінію (використовуйте колір # 123036). Назвіть шар "line", розташуйте його під шаром "button" і за допомогою Move Tool (V) розмістіть його між панеллю пошуку і кнопкою.

крок 25

Створіть нову групу і назвіть її "Showcase". Створіть ще одну групу всередині цієї групи і назвіть її "background". Виберіть Rectangle Tool (U) і створіть прямокутник (використовуйте колір # 219aad). У автора ширина прямокутника 983 рх, висота 273 рх. Встановіть opacity шару 55% і назвіть його "bg4".

Крок 26

Відкрийте зображення з піксельним блакитним прямокутником, вставте його в документ і розташуйте його над шаром "bg4". Встановіть opacity 55%, назвіть шар "bg3".

крок 27

Утримуючи Ctrl, клацніть на масці шару "bg4", потім створіть новий шар, виберіть Gradient Tool (G) і застосуйте градієнт знизу вгору від # 56b8e5 до прозорого. Зніміть виділення.

крок 28

Створіть новий шар, виберіть Rectangular Marquee Tool (M) і створіть виділення. Візьміть Gradient Tool (G) і застосуйте градієнт знизу вгору від # 0f2b42 до # 2a607f. Зніміть виділення і назвіть шар "bg1".

крок 29

Створіть групу "sign up button". Виберіть Rounded Rectangle Tool (U), встановіть радіус 2 рх і намалюйте прямокутник. Двічі клікніть на шарі і застосуйте параметри, вказані нижче. Виберіть Type Tool (T) і напишіть "sign up" білим кольором.

крок 30

Повторіть попередній крок і створіть іншу кнопку, але тепер напишіть на кнопці "learn more". Створіть новий шар, виберіть Custom Shape Tool (U) і намалюйте білу стрілку.

крок 31

Створіть групу "left arrow". Виберіть Ellipse Tool (U) і створіть окружність кольору # 406f94. Двічі клікніть на шарі і встановіть параметри.

крок 32

Створіть новий шар, виберіть Custom Shape Tool (U) і намалюйте білу стрілку. Двічі клікніть на шарі, встановіть вказані параметри. Встановіть opacity шару 50%.

крок 33

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

крок 34

Створіть нову групу "image". Вставте невелике зображення в цю групу і назвіть шар "image". Двічі клікніть на шарі і встановіть параметри.

крок 35

Далі Layer> Layer Style> Create Layer, потім Layer> Layer Mask> Reveal All. Виберіть Gradient Tool (G) і застосуйте градієнт від низу картинки до середини від чорного до прозорого. Назвіть шар "shadow".

крок 36

Створіть нову групу, виберіть Type Tool (T) і додайте текст. Назвіть шар "text".

крок 37

Створіть групу "content". Створіть ще одну групу в цій групі і назвіть її "shadows". Виберіть Rectangle Tool (U) і намалюйте прямокутник білого кольору. Назвіть шар "white shape" і встановіть opacity 90%.

Крок 38

Утримуючи Ctrl, клацніть на масці шару "white shape". Створіть новий шар, виберіть Gradient Tool (G) і застосуйте градієнт від # 8f8f8f до прозорого. Встановіть opacity 50% і назвіть шар "top shadow". Виберіть Move Tool (V) і двічі натисніть на стрілку "вниз".

Крок 39

Створіть новий шар. За допомогою Rectangular Marquee Tool (M) створіть виділення. Потім використовуючи Gradient Tool (G), застосуйте градієнт від # 8f8f8f до прозорого. Додайте маску і за допомогою великої чорної кисті замаскуйте центр тіні. Встановіть opacity 30% і назвіть шар "vertical shadow 1". Продублюйте шар, назвіть його "vertical shadow 2" і посуньте праворуч.

Крок 40

Виберіть Line Tool (U) і створіть горизонтальну лінію шириною 1 рх (використовуйте колір # aebcc7). Назвіть шар "line".

крок 41

Виберіть Type Tool (T) і додайте зміст. Ви також можете використовувати зображення.

Крок 42

Створіть групу "footer". Створіть новий шар всередині групи, виберіть Rectangular Marquee Tool (M) і створіть виділення. Встановіть колір foreground # 555555, візьміть велику м'яку кисть і малюйте їй на верхньому краю виділення. Встановіть opacity шару 50% і назвіть його "gradient".

крок 43

Створіть новий шар, виберіть Single Row Marquee Tool і клацніть в документі. Залийте виділення білим, зніміть виділення. Потім Layer> Layer Mask> Reveal All, візьміть велику м'яку чорну кисть і малюйте на масці. Встановіть opacity 15% і назвіть шар "line".

Крок 44

Виберіть Type Tool (T) і додайте текст на колонтитул.

Результат

Завдання для виконання роботи

1. На основі вище описаних прикладів ви повинні створити шаблон сайту та Web-публікацію про улюблену квітку, тварину або марку автомобіля тощо.

2. Оформити протокол лабораторної роботи, який повинен відображати всі етапи створення Web-публікації і містити висновки про виконану роботу.

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

1. Яка мета створення макету сайту?

2. Опишіть етапи створення макету сайту.

3. Що дає ефект Rollover?

4. Для чого робиться оптимізація зображень?

Лабораторна робота 8

Тема: Ознайомлення з мовою програмування JavaScript

Мета: набути навичок використання засобів мови програмування JavaScript

8.1 Теоретичні положення

Елементи мови JavaScript

JavaScript дозволяє "оживити" веб- сторінку . Це реалізується шляхом додавання до статичного опису фрагмент виконуваного коду. JavaScript- сценарій може взаємодіяти з будь-якими компонентами HTML - документа і реагувати на зміну їх стану.

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

Як і програма мовою Java , сценарій JavaScript виконується під управлінням інтерпретатора . Однак якщо Java -додаток або Java- аплет компілюється в байтовий код , то сценарій JavaScript інтерпретується на рівні початкового тексту .Слід зазначити , що мовні конструкції JavaScript збігаються з відповідними засобами C + + і Java.

8.1.2 Cтруктура сценарію

Сценарієм JavaScript вважається фрагмент коду, розташований між дескрипторами <SCRIPT> і </ SCRIPT>:

Текст HTML-документа

<SCRIPT>

код сценарію

</ SCRIPT>

Текст HTML-документа

8.1.3 Змінні

У сценаріях JavaScript змінні можуть зберігати дані будь-яких типів : числа, рядки тексту, логічні значення, посилання на об'єкти, а також спеціальні величини , наприклад " нульове " значення null або значення NaN , яке повідомляє про неприпустимість операції .Мінлива в мові JavaScript оголошується за допомогою ключового слова var . Так , наприклад, вираз

var selected = " first item "

створює змінну з ім'ям selected і привласнює їй як значення рядок символів " first item " . Змінні можуть оголошуватися також автоматично. Це відбувається при присвоєнні значення змінної , не зустрічалася раніше в даному сценарії . Так , в наступному прикладі створюється змінна з ім'ям rating , якій присвоюється числове значення, рівне 512.5 :

rating = 512.5 ;

8.1.4 Об'єкти

У мові JavaScript не передбачені засоби для роботи з класами в тому вигляді , в якому вони реалізовані в C + + або Java. Розробник сценарію не може створити підклас на основі існуючого класу , перевизначити метод або виконати якусь іншу операцію з класом. Сценарієм, написаним на мові JavaScript , в основному доступні лише готові об'єкти . Побудова нового об'єкта доводиться виконувати лише в рідкісних випадках.Об'єкти містять властивості (властивості об'єктів можна порівняти з змінними ) та методи . Об'єкти , а також їх властивості та методи ідентифікуються іменами. Об'єктами є форми , зображення , гіпертекстові посилання та інші компоненти веб -сторінки , HTML - документ , який відображається у вікні браузера , вікно браузера і навіть сам браузер . У процесі роботи JavaScript сценарій звертається до цих об'єктів , отримує інформацію і керує ними .

Крім того , розробнику сценарію на мові JavaScript доступні об'єкти , не пов'язані безпосередньо з HTML - документом. Їх називають зумовленими , або незалежними об'єктами . За допомогою цих об'єктів можна реалізувати масив , описати дату і час , виконати математичні обчислення і вирішити деякі інші завдання .

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

<HTML>

<НЕАD>

<ТIТLЕ>Перший сценарий JavaScript</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

document.write("Перевірка сценарія JavaScript");

</SCRIPT>

</BODY>

</HTML>

Імена чутливі до регістрів символів, і якщо ви спробуєте звернутися до поточного документа на ім'я Document, інтерпретатор JavaScript відобразить повідомлення про помилку.

Основне призначення сценаріїв JavaScript - створювати динамічно змінюються об'єкти, коригувати вміст HTML-документів в залежності від особливостей оточення, здійснювати взаємодію з користувачем і т.д.

8.1.5 Операції

Набір операторів в JavaScript, їх призначення та правила використання в основному збігаються з прийнятими в мові С + +. Винятком є операція задається символом "+".

У JavaScript символ "+" визначає як підсумовування числових значень, так і конкатенацію рядків.

Так, наприклад, в результаті обчислення виразу

sum = 47 + 21;

змінної sum буде присвоєно значення 68, а після виконання операції

sum = "рядок 1" + "рядок 2";

в змінну sum буде записана послідовність символів "рядок 1 рядок 2". Розглянемо ще один приклад:

<HTML>

<BODY>

<H2>Числа та рядки</H2><BR>

<SCRIPT LANGUAGE="JavaScript">

var a = 3;

var b = 8;

var c = " папуг ";

document.write("a+b="); document.write(a + b);

document.write("<BR>");

document.write( "a + с = "); document.write(a+c);

document.write("<BR>");

document.write("c + a = "); document.write (c + a);

document.write ("<BR>");

document.write ("a + b + с = "); document.write(a + b + c);

document.write("<BR>");

document.write("c + a + b = "); document.write(c + a + b);

document.write("<BR>");

</SCRIPT>

</BODY>

</HTML>

У вікні браузера Наведений вище HTML-код виглядає так, як показано на скріншоті

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

8.1.6 Керуючі конструкції

Керуючі конструкції , використовувані в мові С + + , в основному застосовні і в сценаріях JavaScript.

У JavaScript додатково визначені мовні конструкції , відсутні в С + + , а саме: оператори for ... in і with .

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

<html>

<body>

<table>

<script language="JavaScript">

document.write("<tr><td> </td>");

for (i = 1; i < 10; i++) document.write("<td>"+i+" </td>");

document.write("</tr>");

for (i = 1; i < 10; i++)

{

document.write("<tr><td>" + i + " </td>");

for (j = 1; j < 10; j++)

{

document.write("<td bgcolor='#00ffa0'>" + (i*j) + " </td>");}

document.write("</tr>");

}

</script>

</table>

</body>

</html>

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

змінна = new тіп_ об'єкта (параметри)

8.1.7 Функції

Формат оголошення функції виглядає наступним чином:

function ім'я функції ( [ параметри ] ) тіло функції

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

· імя_функциі ( [ параметри ] );

· змінна = ім'я функції ( [ параметри ] ) ;

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

8.1.8.Область видимості змінних

Робота із змінними в тілі функції підпорядковується таким правилам.

· Якщо змінна оголошена за допомогою ключового слова var , доступ до неї здійснюється за правилами , подібним тим, які використовуються в мові С.

· Змінна, оголошена всередині функції , вважається локальної . Область видимості такої змінної обмежується тілом функції , в якій вона оголошена.

· Змінна, оголошена поза функції , вважається глобальною. До неї можна звертатися з будь-якої точки сценарію .

· Якщо локальна і глобальна змінні мають однакові імена , то в тілі функції локальна змінна " маскує " глобальну .

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

HTML DOM

DOM ( Document Object Model ) - являє собою стандарт консорціуму W3C для програмного доступу до документів HTML або XML. Фактично це платформ - та мовно - нейтральний інтерфейс, що дозволяє програмам і сценаріями динамічно звертатися і оновлювати вміст , структуру і стиль документа .В рамках даного стандарту можна виділити 3 частини:

· Core DOM - стандартна модель будь-якого структурованого документа

· XML DOM - стандартна модель XML документа

· HTML DOM - стандартна модель HTML документаDOM визначає об'єкти і властивості всіх елементів документа і методи ( інтерфейс) для доступу до них.

HTML DOM визначає об'єкти і властивості всіх HTML елементів і методи ( інтерфейс) для доступу до них. Інакше кажучи , HTML DOM описує яким чином необхідно отримувати , змінювати , додавати і видаляти HTML елементи .

У відповідності з моделлю DOM все , що міститься всередині HTML документа - є вузлом . Тобто HTML документ представляється у вигляді дерева вузлів , якими є елементи , атрибути та текст.

Рисунок 8.1. HTML документ представляється у вигляді дерева вузлів

Об'єктна модель браузера містить 12 об'єктів:

1. Document - надає можливість доступу до компонентів документа HTML.

2. Event - надає можливість доступу до властивостей подій , коли останні відбуваються .

3. History - надає інформацію про адреси , які клієнт відвідав .

4. Location - надає інформацію про адресу поточного документа .

5. MimeType - надає інформацію про тип MIME .

6. Navigator - дозволяє звертатися до властивостей браузера .

7. Selection - відображає поточне виділення документа .

8. Style - представляє конкретний елемент стилю в таблиці стилів.

9. TextRange - відображає розділи тексту , що формує документ HTML.

10. Screen - надає інформацію про моніторі і системі виводу , інформації клієнта .

11. Window - надає властивості , методи і події , пов'язані з вікном браузера .

12. StyleSheet - представляє всі елементи стилю всередині таблиці стилів.

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

Крім об'єктів в об'єктній моделі вводяться такі поняття:

Методи - способи роботи з об'єктами. Наприклад: закрити вікно. По суті це функція, асоційована з об'єктом. object.methodname

Події - об'єкт повідомляє нам, що щось сталося. Наприклад: елемент ставати активним.

Властивості - властивості об'єкта. Наприклад: ім'я та розміри вікна.

8.1.10 Вікна діалогу. об'єкт

Window-відкриття вікна.

синтаксис :

window.open ( " URL або URI " , " ім'я вікна " , " властивості вікна ") Наступний оператор створює вікно , яке відображає вміст сторінки http://www.microsoft.ua :

window.open ( " http://www.microsoft.ua " )

При створенні вікна ви можете також надати ім'я , в даному випадку - nuftWindow , для звернення до вікна як до мети / target при відправці форми або при переході за гіперпосиланням .

window.open ( " http://www.microsoft.ua " , " newWindow " )

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

При відкритті вікна ви можете специфікувати атрибути , такі як висота / height і ширина / width , панель утиліт / toolbar , адресна рядок / location field або смуги прокрутки / scrollbars .

Наступний оператор створює вікно без панелі утиліт , але з смугами прокрутки:

window.open ( " http://www.microsoft.ua " , " wwwWindow " , " toolbar = no , scrollbars = yes " )

Деякі властивості вікна:

directories - Якщо yes , створюються стандартні кнопки директорій браузера , такі як What's New і What's Cool .

height - специфікують висоту вікна у точках.

innerHeight - специфікують висоту області вмісту вікна у точках. Ця властивість замінило height , яке залишено для забезпечення зворотної сумісності.

innerWidth - специфікують ширину області вмісту вікна у точках. Ця властивість замінило width , яке залишено для забезпечення зворотної сумісності.

location - Якщо yes , створює поле введення

Location .menubar - Якщо yes , створює рядок меню у верхній частині вікна.

outerHeight - специфікують розмір по вертикалі в пікселах зовнішнього кордону вікна .

resizable - Якщо yes , дає користувачеві можливість змінювати розміри вікна screenX - специфікують відстань , на якому нове вікно поміщається від лівого краю екрана.

screenY - специфікують відстань , на якому нове вікно поміщається від верху екрана.

scrollbars - Якщо yes , створюються вертикальна і горизонтальна смуги прокрутки , якщо документ стає більше розмірів вікна .

status - Якщо yes , створюється статусний рядок внизу вікна.

titlebar - Якщо yes , створюється вікно з рядком заголовка.toolbar - Якщо yes , створюється стандартна панель браузера з кнопками , такими як Back і Forward width - специфікують ширину вікна в пікселях.

Для того щоб функція відпрацьовувалася при натисканні мишкою на елементі документа , використовуватимемо подію onClick об'єкта Document .

Приклад:

Відкриємо посилання в новому вікні

<a href =""

onClick="window.open(http://www.microsoft.ua,'nuftWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')"> Відкрити нове вікно

</ a>

Теж саме можна зробити за допомогою кнопки:

<input type = "button" value = "Відкрити нове вікно" onClick="window.open('http://www.microsoft.ua','kstuWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')">

Закриття вікна.

Наступний оператор закриває поточне вікно: window.close ()

Вузли дерева HTML документа.

Відповідно до моделі DOM:

· Весь документ представляється вузлом документа;

· Кожен HTML тег є вузлом елемента;

· Текст всередині HTML елементів представляється текстовими вузлами;

· Кожному HTML атрибуту відповідає вузол атрибута;

· Коментарі є вузлами коментарів.

<html>

<head>

<title>HTML документ</title>

</head>

<body>

<h1>Заголовок </h1>

<p>Просто текст</p>

</body>

</html>

У цьому прикладі кореневим вузлом є тег <html> . Всі інші вузли містяться всередині <html> .

У цього вузла є два дочірніх вузла: <head> і <body> .

Вузол <head> містить вузол <title> , а вузол <body> містить вузли <h1> і <p>

Слід звернути особливу увагу на те , що текст , розташований у вузлі елемента відповідає текстовому вузлу. У прикладі <title> HTML документ </ title > вузол елемента <title> містить текстовий вузол " HTML документ" , тобто " HTML документ " не є значенням елемента <title> . Проте , в рамках HTML DOM значення текстового вузла може бути доступно за допомогою властивості innerHTML .

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

· Відносно вузлів дерева дотримуються наступні принципи:

· Самий верхній вузол дерева називається кореневим;

· Кожен вузол, за винятком кореневого, має рівно один батьківський вузол;

· Вузол може мати будь-яке число дочірніх вузлів;

· Кінцевий вузол дерева не має дочірніх вузлів; • Нащадки мають загального батька.

8.1.11. Програмний інтерфейс HTML DOM

У рамках DOM моделі HTML можна розглядати як безліч вузлових об'єктів. Доступ до них здійснюється за допомогою JavaScript або інших мов програмування. Програмний інтерфейс DOM включає в себе набір стандартних властивостей і методів. Властивості являють деякі сутності (наприклад, <h1>), а методи - дії над ними (наприклад, додати <a>).

До типових властивостях DOM належать такі:

· x.innerHTML - внутрішнє текстове значення HTML елемента x;

· x. nodeName - ім'я x;

· x.nodeValue - значення x;

· x.parentNode - батьківський вузол для x;

· x.childNodes - дочірній вузол для x;

· x.attributes - вузли атрибутів x.

Вузловий об'єкт, відповідний HTML елементу підтримує такі методи:

· x.getElementById (id) - отримати елемент із зазначеним id;

· x.getElementsByTagName (name) - отримати всі елементи з вказаним ім'ям тега (name);

· x.appendChild (node) - вставити дочірній вузол для x; • x.removeChild (node) - видалити дочірній вузол для x.

Приклад.Для отримання тексту з елемента <p> зі значенням атрибута id "demo" в HTML документі можна використовувати наступний код:

txt = document.getElementById ("demo"). innerHTML

Той же самий результат може бути отриманий по-іншому:

txt = document.getElementById ("demo"). childNodes [0]. nodeValue

У рамках DOM можливі 3 способи доступу до вузлів:

1. За допомогою методу getElementById (ID). При цьому повертається елемент із зазначеним ID.

2. За допомогою методу getElementsByTagName (name). При цьому повертаються всі вузли з вказаним ім'ям тега (у вигляді індексованого списку). Перший елемент у списку має нульовий індекс.

3. Шляхом переміщення по дереву з використанням відносин між вузлами. Для визначення довжини списку вузлів використовується властивість length.

x = document.getElementsByTagName("p");

for (i = 0; i < x.length; i++)

{

document.write(x[i].innerHTML);

document.write("<br/>");

}

У даному прикладі всередину HTML документа вставляється у вигляді списку текстовий вміст всіх елементів відповідних тегом <p>.

Для навігації по дереву навколо міста поточного вузла можна використовувати такі властивості:

· parentNode;

· firstChild;

· lastChild.

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

· document.documentElement - для доступу до кореневого вузла документа;

· document.body - для доступу до Тегу <body>.

8.1.12 Властивості вузлів

У HTML DOM кожен вузол є об'єктом, який може мати методи (функції) і властивості. Найбільш важливими є наступні властивості:

· nodeName;

· nodeValue;

· nodeType.

Властивість nodeName вказує на ім'я вузла. Ця властивість має такі особливості:

· Властивість nodeName призначене тільки для читання;

· Властивість nodeName вузла елемента точно відповідає імені тега;

· Властивість nodeName вузла атрибута відповідає імені атрибута;

· Властивість nodeName текстового вузла завжди одно # text

· Властивість nodeName вузла документа завжди одно # document

Зауваження: nodeName завжди містить ім'я тега HTML елемента у верхньому регістрі. Властивість nodeValue вказує на значення вузла. Ця властивість має такі особливості:

· Властивість nodeValue вузла елемента не визначено;

· Властивість nodeValue текстового вузла вказує на сам текст;

· Властивість nodeValue вузла атрибута вказує на значення атрибута.

Властивість nodeType повертає тип вузла. Ця властивість призначене тільки для читання: Найбільш важливими типами вузлів є наступні:

Тип элемента	Тип узла
Element
Attribute
Text
Comment
Document

8.1.13.Зміна HTML елементів

HTML елементи можуть бути змінені з допомогою використання JavaScript, HTML DOM і подій. У прикладі показано, як можна динамічно змінювати текстовий вміст тега <p>:

<html>

<body>

<p id="p1">Hello World!</p>

<script type="text/javascript">

document.getElementById("p1").innerHTML="New text!";

</script>

</body>

</html>

8.1.14 Діалогові елементи

У JavaScript підтримується робота з наступними діалоговими елементами інтерфейсу:

1. Alert . Застосовується для повідомлення користувача , що працює з веб -браузером.Синтаксис: alert ( "повідомлення" ) ;

2. Confirm . Застосовується для вибору користувачем одного з двох варіантів відповіді " Так / Ні". Відповідно Confirm повертає значення true / false . Синтаксис :confirm ( "питання " ) ;

3. Prompt . Застосовується для введення користувачем значення. При натисканні " OK " повертається введене значення , у випадку " Cancel" повертається значення null .Синтаксис :prompt ( "питання / запит", " значення за замовчуванням " ) ;

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

<html>

<body>

// тут буде відображатися текст

<div id="c" style="color:blue">Ви обрали колір текста: чорний</div>

<script language="JavaScript">

// користувач обирає колір текста

var tcolor = prompt("Оберить колір текста: red, blue, green, yellow, black","black");

// задається текст

document.getElementById("c").innerHTML = "Виобрали колір текста: " + tcolor;

// задається колір текста

document.getElementById("c").style.color = tcolor;

</script>

</body>

</html>

Завдання для виконання роботи 1.

Вивчить нижчеприведений скрипт і перевірте його працездатність.

<!-- Меняем знак числа -->

<HTML>

<HEAD>

<TITLE>Вычисление максимального значения</TITLE>

<script language="JavaScript">

function invert(obj)

{

var a = Number(obj.num1.value);

obj.res.value = -a

}

</script>

</HEAD>

<BODY bgcolor="#FFFFCC">

<H4>Меняем знак числа</H4>

<FORM name="form1">

Число: <input type="text" size=8 name="num1"><hr>

После смены знака число равно

<input type="button" value=Определить onClick="invert(form1)">

<input type="text" size=8 name="res"><hr>

<input type="reset">

</FORM>

</BODY>

</HTML>

Завдання для виконання роботи 2.

Створити форму для введення 6 чисел та вивести назву відповідного завдання. Використовуючи приклад 1 в якості зразка, напишіть скрипт

1) Перший додатній елемент поміняти місцями з максимальним.

2) Знайти суму третього та п’ятого додатных лементів.

3) Другий від’ємний елемент замінити мінімальним

4) Скільки є елементів з мінімальним значенням серед додатніх?

5) Обчислиити суму перших чотирьох від’ємних елементів

6) Вивести номер передостаннього позитивного елемента

7) Знайти добуток другого та четвертого елементів, більших ніж 3

8) Максимальний елемент поміняти місцями з першим нульовим

9) Останній від’ємний елемент поміняти місцями з максимальним

10) Обчислити добуток другого від’ємного та першого позитивного елементів

11) Чи третій позитивний елемент є останнім?

12) Вивести номери найбільших елементів. Обчислити їх суму

13) Максимальний елемент поміняти місцями з мінімальним

14) Визначити номер третього від’ємного елемента

15) Обчислити добуток першого позитивного та другого від’ємного елементів

16) Поміняти місцями мінімальний та другий позитивний елементи

17) Визначити індекси мінімального елемента та обчислити їх суму

18) Обчислити добуток всіх позитивних елементів

19) Вивести номер другого від’ємного елемента

20) Вивести номери найменших елементів. Обчислити добуток їх квадратів

21) Обчислити суму від’ємноих елементів

22) Обчислити кількість від’ємних елементів та суму позитивних елементів

23) Обчислити середнєарифметичне позитивних елементів

24) На місце мінімального та максимального елементів записати їх індекси

25) Знайти добуток першого та третього елементів, менших ніж -10

26) Визначити суму номерів другого та третього від’ємних елементів

27) Вивести номери другого та четвертого позитивних елементів

28) Вивести добуток номерів двох найменших елементів серед позитивних

29) Чи є два елементи серед від’ємних із максимальних значень?

30) Третій позитивний замінити номером першого від’ємного

31) Обчислити добуток перших трьох додатніх елементів та визначити їх номери

32) Максимальний елемент поміняти місцями з четвертим, що більше 1

Завдання для виконання роботи 3.

Створення таблиці випадково вибраних кольорів

Узявши за основу сценарій побудови таблиці множення, побудуйте таблицю випадково вибраних кольорів. Колір елементу таблиці задається за допомогою атрибуту bgcolor. Колір осередку описується у рамках трикомпонентної моделі RGB, наприклад: <td bgcolor="#c0a145">. Для генерації кожної компоненти можна використовувати генератор випадкових чисел за допомогою методів об'єкту Math і перетворення в шістнадцятковий формат:

color = Math.round(255.0*Math.random());

r = color.toString(16);

Результуючий колір утворюється шляхом конкатенації компонентів :

color = r + g + b;

Зразковий вид результату роботи сценарію в загальному вигляді:

При цьому таблиця повинна має бути наступного виду( варіант залежить від номера останньої цифри залікової книжки)

1. Осередки (4, 4), (5,4) об'єднані, Осередки (8, 8), (8, 9) об'єднані

2. Осередки (1, 7), (1,8) об'єднані, Осередки (8, 1), (9, 1) об'єднані

3. Осередки (2, 2), (2,3), (2, 4), (2,5) об'єднані

4. Осередки (3, 9), (4,9), (5, 9), (6,9) об'єднані

5. Осередки (3, 5), (4,5), (5, 5), (6,5) об'єднані

6. Осередки (6, 4), (7,4) об'єднані, Осередки (6, 7), (6, 8) об'єднані

7. Осередки (2, 7), (3,7) об'єднані, Осередки (1, 8), (1, 9) об'єднані

8. Осередки (3, 4), (4,4) об'єднані, Осередки (9, 1), (9, 2) об'єднані

9. Осередки (3, 3), (3,4), (3, 5), (3,6) об'єднані

0. Осередки (9, 8), (9,9) об'єднані, Осередки (1, 9), (1, 9) об'єднані

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

1. Яка структура сценарію JavaScript?

2. Назвіть керуючі конструкції мови JavaScript.

3. Охарактенризуйте функції мови JavaScript.

4. Що таке DOM?

5. Які є діалогові елементи мови JavaScript?

РЕКОМЕНДОВАНА ЛІТЕРАТУРА

1. Adobe Photoshop CS2: Офиц. учеб. курс / перевод с англ. А. Горлач, А.Тимаков – М.: Издательство «Триумф», 2005. – 480 с.

2. Хольцшлаг, М. Языки HTML и CSS. / М. Хольцшлаг, Е. Молли – М.: Триумф, 2007. – 304с.

3. Флэнаган, Дэвид. JavaScript. Подробное руководство. / Дэвид Флэнаган - М.: Символ-Плюс, 2012. – 1081с.

ЗМІСТ

ВСТУП.. 3

МЕТА, ЗМІСТ, ПОРЯДОК ПРОВЕДЕННЯ І КОНТРОЛЮ ЛАБОРАТОРНИХ РОБІТ 4

Лабораторна робота 1. 5

1.1 Теоретичні положення. 5

1.1.1 Загальна структура HTML-документу. 5

1.1.2 Теги і атрибути. 7

1.1.3 Регістр запису команд. 7

1.1.4 Escape-послідовності 7

1.1.5 Переведення рядка, прогалини, табуляція. 8

1.1.6 Коментарі 9

1.1.7 Загальні рекомендації 10

1.1.8 Кольорові специфікації 10

1.1.9 Базові теги розмітки гіпертексту. 11

1.1.10 елемент <FONT>. 14

1.1.11 Атрибути тега <BODY>. 16

1.1.12 Заголовки. 18

1.1.13Списки. 19

1.1.14 Створення блоків цитат. 22

1.1.15 Завдання розмірів полів сторінки. 22

1.2. Завдання для виконання роботи. 22

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

Лабораторна робота 2. 23

2.1 Теоретичні положення. 23

2.1.1 Вставка графічних зображень. 23

2.1.2 Додання фонової графіки. 24

2.1.3 Обрамлення графічного зображення. 24

2.1.4 Задання параметрів обтікання графіки текстом. 24

2.1.5 Вирівнювання тексту відносно графіки. 25

2.1.6 Пуста область навколо графічного зображення. 25

2.1.7 Побудова горизонтальної лінійки. 25

2.1.8 Побудова списків з графічними маркерами. 25

2.1.9 Встановлення розмірів зображення. 26

2.1.10 Побудова гіперпосилань, які вказують на іншу Web-сторінку. 26

2.1.11 Побудова гіперпосилань, які вказують на Web-сторінку в межах власного сайту. 27

2.1.12 Створення гіперпосилання на об’єкт тіє ж сторінки. 27

2.1.13 Створення гіперпосилань на окремі області іншої сторінки. 27

2.1.14 Використанн зображень, як гіперпосилання. 27

2.1.15 Створення гіперпосилань, які вказують на зображення. Створення мініатюрних зображень. 28

2.1.16 Створення гіперпосилань, які вказують на файл. 28

2.1.17 Посилання на адресу електронної пошти. 28

2.1.18 Створення гіперпосилання, яке вказує на сайт FTP. 28

2.1.19 Відкриття Web-сторінок в новому вікні браузера. 29

2.1.20 Колір тексту гіперпосилань. 29

2.1.21 Гіперпосилання і “гарячі клавіші”. 29

2.1.22 Порядок переходу по гіперпосиланням. 30

2.1.23 Створення гіперпосилання на файл аудиозапису. 30

2.1.24 Впровадження звукових об’єктів. 30

2.1.25 Створення гіперпосилань на файл відеозапису. 31

2.1.26 Впровадження об’єктів відео. 32

2.2 Завдання для виконання роботи. 32

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

ЛАБОРАТОРНА РОБОТА 3. 33

3.1 Теоретичні положення. 33

3.1.1 Створення таблиці в HTML. 33

3.1.2 Обрамлення таблиці 34

3.1.3 Зміна кольору рамки. 34

3.1.4 Визначення заголовку таблиці 34

3.1.5 Групування стовпців таблиці 35

3.1.6 Групування рядків таблиці 35

3.1.7 Зміна кольору елементів таблиці та графічного фону таблиці 37

3.1.8 Вирівнювання даних в таблиці 38

3.1.9 Вирівнювання даних в комірці таблиці 38

3.1.10 Зміна розміру таблиці 38

3.1.11 Зміна розміру комірки таблиці 38

3.1.12 Злиття комірок таблиці 39

3.1.13 Відображення меж і ліній розділення таблиці 39

3.1.14 Перенесення слів в середині таблиці 40

3.1.15 Побудова вбудованих таблиць. 40

3.1.16 Задання параметрів обтікання таблиці текстом. 40

3.2 Завдання для виконання роботи. 41

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

Лабораторна робота 4. 41

4.1 Теоретичні положення. 42

4.1.1 Створення фреймів. 42

4.1.2 Відтворення об’єкту гіперпосилання у вікні фрейма. 43

4.1.3 Створення плаваючих фреймів. 45

4.2 Завдання для виконання роботи. 45

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

Лабораторна робота 5. 46

5.1 Теоретичні положення. 46

5.1.1 Загальна структура форми. 46

5.1.2Основні типи елементів <INPUT>. 47

5.1.3 Елемент <SELECT>: 49

5.1.4 Елемент <TEXTAREA>. 50

5.2.1 Завдання для виконання роботи 1. 51

5.2.2 Завдання для виконання роботи 2. 52

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

Лабораторна робота 6. 52

6.1 Теоретичні положення. 52

6.1.1 Розмітка сторінок за допомогою таблиць. 52

6.1.2 Розмітка сторінок за допомогою блоків (DIV) і CSS. 54

6.1.3 Праця з зовнішнім CSS. 57

6.1.4 Властивості і можливі значення в CSS. 59

6.2.1 Завдання для виконання роботи 1. 61

6.2.2 Завдання для виконання роботи 2. 61

6.2.3 Завдання для виконання роботи 3. 61

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

Лабораторна робота 7. 62

7.1 Теоретичні положення. 62

7.1.1 Створення макету сайту: спосіб 1. 62

7.1.2 Додавання елементів дизайну. 67

7.1.3 Ефект Rollover. Підготовка. 68

7.1.4. Резка дизайна и создание Web-публикации. 69

7.1.5 Ефект Rollover. 70

7.1.6 Оптимізація зображень. 72

7.1.7 Створення макету сайту: спосіб 2. 72

7.2 Завдання для виконання роботи. 118

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

Лабораторна робота 8. 118

8.1 Теоретичні положення. 118

8.1.1 Елементи мови JavaScript 118

8.1.2 Cтруктура сценарію.. 119

8.1.3 Змінні 119

8.1.4 Об'єкти. 119

8.1.5 Операції 120

8.1.6 Керуючі конструкції 121

8.1.9.HTML DOM.. 123

8.1.10 Вікна діалогу. об'єкт. 124

8.1.11. Програмний інтерфейс HTML DOM.. 127

8.1.12 Властивості вузлів. 128

8.1.13.Зміна HTML елементів. 129

8.1.14 Діалогові елементи. 129

8.2.1 Завдання для виконання роботи 1. 130

8.2.2 Завдання для виконання роботи 2. 130

8.2.3 Завдання для виконання роботи 3. 131

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

РЕКОМЕНДОВАНА ЛІТЕРАТУРА.. 133