Тема семінару 6 Створення всіх сторінок сайту, наповнення їх звичайними і змінними зображеннями

Мета семінару: навчитися додавати звичайні та зміннні зображення на сторінку, створити інші сторінки сайту.

План

1. Створити усі сторінки Інтернет-сайту.

2. Додати та відформатувати усі зображення Вашого Інтернет-сайту.

3. Зробити декілька зображень змінними.

4. За результатами семінарів 4 – 8 сформувати звіт.

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

1. Додавання зображення на Web-сторінку.

Для того, щоб вставити зображення в редагований документ, необхідно натиснути кнопку Insert Image (Рис. 12) на панелі. У діалоговому вікні необхідно вибрати графічний файл (в форматі GIF, JPEG або PNG).

Рис. 12 Додавання зображення

У редакторі властивостей зображення (Рис. 13) поля введення W і Н дозволяють вам ввести вручну відповідно ширину і висоту зображення. У деяких випадках зручніше задавати розміри зображення, перетягуючи мишею маркери розміру. Поля введення V – Space і Н – Space задають відповідно вертикальне і горизонтальне відстань від краю зображення до обтікаючого його тексту. За замовчуванням обидва вони дорівнюють нулю. Поле введення Border дозволяє задати товщину рамки, яка відображається навколо зображення. За замовчуванням вона дорівнює нулю, тобто рамки немає. Поле Link дозволяє створити гіпертекстове посилання з даного графічного елементу. Поле введення Alt задає так званий "альтернативний текст". Коли картинка ще не завантажилася, Web-оглядач відобразить невелику підказку, що містить цей самий "альтернативний текст". Параметр Align задає вирівнювання графічного об'єкта щодо інших елементів абзацу або рядка.

Рис. 13 Редактор властивостей зображення

2. Додавання змінного зображення на Web-сторінку.

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

У діалоговому вікні (Рис. 14) необхідно вказати імена файлів, які будуть використовуватися при роботі мінливого зображення:

· Original Image - шлях до початкового файлу із зображенням;

· Rollover Image - шлях до файлу із зображенням, яке буде з'являтися, коли курсор миші опиниться над областю зображення.

Рис. 14 Діалогове вікно додавання змінного зображення

Ім'я інтерактивного елемента (Image Name) використовується при роботі скриптів. Якщо не передбачається взаємодія з цим об'єктом або зміна алгоритмів роботи скриптів, то ім'я можна залишити заданим за умовчанням.

Якщо увімкнути прапорець Preload Rollover Image, то в HTML-документ буде вставлено скрипт для попереднього завантаження файлів з зображеннями в кеш-пам'ять броузера.

Змінюється зображення можна зробити посиланням, якщо в полі When Clicked, Go To URL вказати адресу Internet-ресурсу.

Питання для самоконтролю

1. Як додати зображення на створювану Вами Web- сторінку;

2. Яка вкладка містить кнопку Image;

3. Що треба зробити, за для пропорційного змінювання розміру зображення;

4. Як створити зображення-гіперпосилання;

5. Як вставити активне зображення;

Тема семінару 7