Питання для самоконтролю
Як створити нову Web-сторінку в Dreamweaver?;
Що таке шаблон, які шаблони існують в Dreamweaver;
Як створити текстовий блок на новій Web-сторінці, як форматувати абзаці;
Як створити різні типи заголовків у тексті Web-сторінки;
Як змінити додаткові параметри списку;
Форматування окремих символів;
Вставка спеціальних символів;
Створення поштових гіперпосилань.
Тема семінару 6 Створення всіх сторінок сайту, наповнення їх звичайними і змінними зображеннями.
Мета семінару: навчитися додавати звичайні та зміннні зображення на сторінку, створити інші сторінки сайту.
План
Створити усі сторінки Інтернет-сайту.
Додати та відформатувати усі зображення Вашого Інтернет-сайту.
Зробити декілька зображень змінними.
За результатами семінарів 4 – 8 сформувати звіт.
Теоретичні відомості виконання практичного семінару.
Додавання зображення на Web-сторінку.
Для того, щоб вставити зображення в редагований документ, необхідно натиснути кнопку Insert Image (Рис. 12) на панелі. У діалоговому вікні необхідно вибрати графічний файл (в форматі GIF, JPEG або PNG).
Рис. 12 Додавання зображення
У редакторі властивостей зображення (Рис. 13) поля введення W і Н дозволяють вам ввести вручну відповідно ширину і висоту зображення. У деяких випадках зручніше задавати розміри зображення, перетягуючи мишею маркери розміру. Поля введення V – Space і Н – Space задають відповідно вертикальне і горизонтальне відстань від краю зображення до обтікаючого його тексту. За замовчуванням обидва вони дорівнюють нулю. Поле введення Border дозволяє задати товщину рамки, яка відображається навколо зображення. За замовчуванням вона дорівнює нулю, тобто рамки немає. Поле Link дозволяє створити гіпертекстове посилання з даного графічного елементу. Поле введення Alt задає так званий "альтернативний текст". Коли картинка ще не завантажилася, Web-оглядач відобразить невелику підказку, що містить цей самий "альтернативний текст". Параметр Align задає вирівнювання графічного об'єкта щодо інших елементів абзацу або рядка.
Рис. 13 Редактор властивостей зображення
Додавання змінного зображення на Web-сторінку.
Для створення зображень, що змінюють свій вигляд при наведенні курсору миші, використовується кнопка Rollover Image в підменю Images.
У діалоговому вікні (Рис. 14) необхідно вказати імена файлів, які будуть використовуватися при роботі мінливого зображення:
Original Image - шлях до початкового файлу із зображенням;
Rollover Image - шлях до файлу із зображенням, яке буде з'являтися, коли курсор миші опиниться над областю зображення.
Рис. 14 Діалогове вікно додавання змінного зображення
Ім'я інтерактивного елемента (Image Name) використовується при роботі скриптів. Якщо не передбачається взаємодія з цим об'єктом або зміна алгоритмів роботи скриптів, то ім'я можна залишити заданим за умовчанням.
Якщо увімкнути прапорець Preload Rollover Image, то в HTML-документ буде вставлено скрипт для попереднього завантаження файлів з зображеннями в кеш-пам'ять броузера.
Змінюється зображення можна зробити посиланням, якщо в полі When Clicked, Go To URL вказати адресу Internet-ресурсу.
Питання для самоконтролю
Як додати зображення на створювану Вами Web- сторінку;
Яка вкладка містить кнопку Image;
Що треба зробити, за для пропорційного змінювання розміру зображення;
Як створити зображення-гіперпосилання;
Як вставити активне зображення;
Тема семінару 7
Додавання мультимедійного контенту на створені Web-сторінки
Мета семінару: навчитися додавати зображення Flash та елементи ActiveX на створені Web-сторінки.
План
Додати на створені Web-сторінки, логічно розміщені зображення Flash.
Додати на створені Web-сторінки елементи ActiveX, що продовжують тематику Інтернет-сайту.
За результатами семінарів 4 – 8 сформувати звіт.
Теоретичні відомості виконання практичного семінару
Додавання зображень Flash на web-сторінку.
На Web-сторінку можна вставити будь-яке зображення Flash, створене вами або кимось іншим. Натисніть кнопку Flash (Рис. 15) підменю Media панелі об'єктів. На екрані з'явиться вже знайоме вам діалогове вікно Select File де ви зможете вибрати потрібний файл SWF.
Рис. 15 Додавання зображення Flash
Для вставки заздалегідь заготовлених Flash-кнопок необхідно натиснути кнопку Flash Button в підменю Media. При цьому відкриється діалогове вікно налаштування параметрів Flash-кнопки (Рис.16).
Рис.16 Додаваняя Flash-кнопок
Зі списку Style можна вибрати будь-яку з підготовлених розробниками Dreamweaver кнопок, зовнішній вигляд яких відображається у верхній частині діалогового вікна. Текст, написаний в полі Button Text, буде розміщений на кнопці (в існуючій версії Dreamweaver можливе використання тільки латинських літер). Гарнітуру та розмір шрифту можна змінити використовуючи елементи управління Font і Size відповідно. Кнопку можна перетворити на гіперпосилання, якщо в полі Link вказати ім'я файлу або URL для переходу. Колір фону можна змінити з використанням елемента керування Bg Color. Кнопку, налаштовану таким чином, слід зберегти у файлі, ім'я якого можна вказати в полі Save As.
Параметри налаштування кнопки можна змінити в будь-який момент. Вікно налаштування параметрів Flash-кнопки можна викликати по кнопці Edit в редакторові властивостей.
Аналогічно, використовуючи інструмент Flash Text, в HTML-документ можна додати і налаштувати Flash-текст.
Додавання елементів ActiveX на web-сторінку.
Для додавання на Web-сторінку елемента ActiveX необхідно натиснути кнопку ActiveX, розташовану на панелі об'єктів. Після цього у вікні документа ви побачите значок елемента ActiveX. Збільште його розміри, як ви проробляли це із зображеннями.
Погляньте на редактор властивостей. У списку, що розкривається ClassID виберіть потрібний елемент ActiveX. В нашому випадку це буде відома програма мультимедійного програвача RealPlayer-саме з її допомогою ми будемо програвати мультимедіа-файли.
Відкрийте діалогове вікно Parameters. У єдиному рядку таблиці параметрів у графі Parameter введіть ім'я параметра - src, а в графі Value - ім'я файлу (наприклад example.mid). І натисніть кнопку ОК.
Тепер можна перевірити в роботі вийшов елемент ActiveX. Натисніть кнопку Play, клацніть по кнопці відтворення - і ви почуєте музику.
Питання для самоконтролю
Які формати даних, можна віднести до мультимедійних;
Як додати на створювану Вами Web-сторінку мультимедійні дані;
Який модуль допомагає програвати відео файли в Dreamweaver.
Тема семінару 8
Додавання таблиць, їх форматування та наповнення на Web-сторінці.
Мета семінару: навчитися додавати таблиці на web-сторінку: для представлення табличних даних, та в якості засобів форматування web-сторінок.
План
Додати табличні форми для роботи з табличними даними.
Відформатувати таблиці, та табличні дані.
Підготувати сайт до публікації.
За результатами семінарів 4 – 8 сформувати звіт.
Теоретичні відомості виконання практичного семінару
Одним з найбільш широко використовуваних в HTML засобів є таблиці. Причому, дуже часто вони використовуються не тільки традиційно – як метод представлення табличних даних, але і як засіб форматування web-сторінок. Хоча слід зауважити, що другий варіант використання суперечить ідеології мови HTML.
Щоб додати таблицю в редагований документ в Dreamweaver необхідно натиснути кнопку Table (Рис. 16) на панелі об'єктів. Після цього на екрані з'являється діалогове вікно Table (Рис. 16), в якому пропонується вказати параметри майбутньої таблиці. У полях Rows і Columns задається кількість рядків і стовпців відповідно, в поле Width - ширина таблиці (може бути відносною у відсотках або абсолютній в пікселях). Параметр Border задає товщину рамки навколо всієї таблиці в цілому і кожної з її клітинок. Якщо вказано нульове значення, то рамка не буде відображатися. Параметр Cell Padding задає відстань між вмістом клітинки та її межами (за замовчуванням 1 піксель), а Cell Spacing – відстань між сусідніми елементами таблиці (за замовчуванням 2 пікселя).
Рис. 16 Діалогове вікно Table
У редакторі властивостей таблиці (Рис. 17) можна змінити кількість рядків і стовпців (Rows і Cols), ширину і висоту таблиці (W і H), параметри відступів (CellPad і CellSpace) товщину рамки (Border). Крім того, можна вказати вирівнювання таблиці щодо решти елементів абзацу (Align), кольори фону і рамки таблиці (Bg Color і Brdr Color), а також задати фонове зображення (Bg Image).
Для зміни властивостей окремої комірки необхідно поставити курсор в цю комірку, а для групи комірок - виділити їх. При цьому в нижній частині панелі властивостей з'являться параметри виділеної групи комірок. За допомогою кнопок Merge і Split можна відповідно об'єднати або розділити комірки. При розподілі осередків відкривається діалогове вікно Split Cell, в якому пропонується вказати кількість рядків (Rows) або стовпців (Columns) розбиття.
Рис. 17 Редактор властивостей таблиці
У редакторі Dreamweaver існує можливість створення таблиць на основі даних з файлу. Дані, підготовлені в іншому додатку (наприклад, Microsoft Excel) повинні бути попередньо збережені в текстовий файл із роздільниками (символами табуляції, комами, крапками з комами і т.п.), після чого їх можна буде імпортувати в HTML-таблицю.
Спочатку необхідно підготувати зазначений файл. Потім, в Dreamweaver натиснути кнопку Insert Tabular Data на панелі об'єктів.
У з’явившемуся діалоговому вікні (Рис. 18) необхідно вказати шлях до файлу з даними (поле Data File).
Рис. 18 Діалогове вікно додавання таблиці з файлу
У списку Delimiters вибрати тип роздільника, використаного у файлі з даними. Якщо вибрати пункт Other, то з'явиться додаткове поле, в якому можна вказати нестандартний роздільник (який, взагалі кажучи, може бути будь-яким символом). Параметр Table Width дозволяє задати ширину таблиці і може приймати одне з наступних значень:
Fit to Data – ширина колонок таблиці буде обрана автоматично таким чином, щоб умістити найдовшу рядок;і
Set – дозволяє вказати ширину таблиці у відсотках по відношенню до ширини вікна броузера або в пікселах.
У списку Format Top Row можна вибрати один з чотирьох варіантів оформлення верхнього рядка таблиці:
No Formatting – не форматувати;
Bold – виділити жирним шрифтом;
Italic – виділити курсивом;
або Bold Italic – виділити жирним курсивом.
Параметри Cell Padding, Cell Spacing і Border мають той же зміст, що й у звичайних таблицях.