Створення гіпертекстових посилань

Для створення посилання в редакторі Dreamweaver необхідно виділити об'єкт (блок тексту або зображення), а потім на панелі властивостей об'єкта Properties в полі Link вказати URL файлу, на який буде здійснюватися гіпертекстовий перехід. Якщо це внутрішнє посилання (тобто файл входить до складу даного сайту), то адресу переходу найпростіше вказати з використанням інструменту Browse for File, який викликається по кнопці, розташованої поруч. У відкритому стандартному діалоговому вікні необхідно вибрати файл, на який буде здійснюватися перехід. Якщо ж це зовнішнє посилання, то необхідно вказати повну URL ресурсу, починаючи з імені протоколу (наприклад, http://fio.ifmo.ru/index.html). Поле Target вказує, де має бути відкритий документ, на який вказує посилання. Це може бути одне з чотирьох попередньо встановлених значень:

• _blank - документ завантажується в новому неіменовані вікні;

• _parent - документ завантажується в батьківському фреймі або вікні;

• _self - документ завантажується в те ж вікно або фрейм, що й вихідний;

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

За замовчуванням всі посилання відкриваються в тому ж вікні або фреймі (тобто використовується установка _self). Якщо необхідно зробити посилання з одного фрейма в іншій (тобто документ, на який вказує посилання, повинен бути завантажений в іншому фреймі), то в полі Target необхідно вказати ім'я цільового фрейма. Крім того, в полі може бути вказано ім'я вікна браузера, в якому слід відкрити посилання. Якщо такого вікна не існує, то буде відкрито нове і йому буде присвоєно вказане ім'я.

Крім посилань на файли цілком, існує можливість створення посилання на певне місце в документі - якір. Для цього спочатку необхідно створити в документі самі якоря. Це можна зробити, виконавши команду Insert => Named Anchor або натиснувши кнопку Named Anchor на панелі об'єктів.

У відповідному діалоговому вікні в полі Anchor Name необхідно вказати ім'я якоря, яке може складатися з латинських символів і не повинно містити пробілів. Для створення посилання на якір в поле Link після імені файлу необхідно вписати символ # і вказати після нього ім'я якоря (наприклад, filename.html # part1). Якщо якір знаходиться в цьому ж файлі, то ім'я файлу можна опустити (наприклад, # part1).

Окремим випадком є посилання на адресу електронної пошти. Для створення таких посилань можна скористатися або кнопкою Email Link на панелі об'єктів або виконати команду Insert => Email Link. У діалоговому вікні, що відкриється, в полі Text необхідно вказати той текст, з якого буде йти посилання, а в полі E-Mail - адресу електронної пошти, на яку це посилання буде вказувати.

Створення карти посилань

Для створення карти посилань необхідно виділити на зображенні активні області (hotspot). У Dreamweaver можна створювати області трьох видів - прямокутні, круглі і довільної конфігурації. Для цього потрібно натиснути одну з кнопок і за допомогою миші виділити необхідну область на зображенні. Параметри активної області будуть відображені на панелі властивостей.

Поле Map вказує назву карти, до якої належить дана область. Поля Link і Target задають, як завжди, параметри посилання, а поле Alt - альтернативний текст. Для додавання додаткових областей потрібно вибрати необхідний інструмент виділення і повторити описані дії.

Створені області можна переміщувати по зображенню, утримуючи ліву кнопку миші.

Створені раніше активні області можна редагувати: переміщувати та змінювати їх розміри. Так само можна копіювати зображення з активними областями з одного документа в іншій - їх параметри при цьому зберігаються. Можна копіювати активні області з одного зображення на інше. Для виконання будь-якої операції над областю необхідно виділити її. Для цього призначений інструмент Pointer Hotspot Tool.

Створення і використання стилів CSS

У Dreamweaver для роботи зі стилями CSS призначена панель стилів (рис. 9). Для її включення потрібно виконати команду Window => CSS Styles або натиснути на кнопку Show CSS Styles в навігаторі панелей.

Рис. 9. Головне вікно Dreamweaver з панеллю стилів

Dreamweaver може працювати з трьома типами каскадних таблиць стилів:

• стилі, перевизначають дію того чи іншого тега HTML;

• індивідуальні стилі на основі ідентифікуючих атрибутів, які можуть бути застосовані до різних блоків тексту або елементів сторінки;

• стилі, що перевизначають вплив певної комбінації тегів або тегів, що містять спеціальний атрибут-ідентифікатор.

Для створення нового стилю потрібно натиснути кнопку New Style на панелі стилів або вибрати команду New Style ... з контекстного меню. У діалоговому вікні, що відкривається (рис. 10), необхідно в першу чергу вказати тип створюваного стилю - список Selector Type. Значення Class цього списку створює іменований стиль, який може бути застосований до різних блоків тексту. При цьому в полі Name необхідно вказати ім'я класу, яке повинно починатися з символу точка (рис. 10 а).

а) б)

в)

Рис. 10. Діалогове вікно створення різних видів стилю

Значення Tag перевизначає параметри форматування певного тега, який необхідно вибрати в списку Tag (рис. 10 б). Advanced дозволяє визначити форматування для комбінації тегів або для тегів, що містять особливий ідентифікатор. В даному випадку в полі Selector необхідно вказати ID-ідентифікатор. Ідентифікатори використовуються аналогічно іменованим стилям, але призначені для форматування елементів, що вимагають індивідуальної обробки. В інших випадках кращим є використання іменованих стилів (CLASS).

Далі необхідно визначити де буде розташовано опис стилів - список Define In. При виборі New Style Sheet File таблиця стилів буде збережена в окремому файлі, посилання на який буде вставлена ​​особливим чином в заголовок документа (якщо з редагованої сторінкою вже пов'язані небудь файли з описом стилів, то їхні імена будуть перераховані в списку). При такому підході одна і та ж таблиця стилів може використовуватися в різних документах. Це особливо зручно, коли треба визначити елементи форматування загальні для всіх сторінок сайту. У другому випадку (This Document Only) опис стилів буде збережено безпосередньо в редагованому документі (може бути використано тільки в його межах). Такий варіант зручний для створення стилів, специфічних для даної сторінки.

Після того, як всі параметри визначені, відкриється діалогове вікно визначення параметрів нового стилю (рис. 11). У лівій його частині в списку Category можна вибирати групи параметрів форматування, які необхідно визначити. Якщо якісь з параметрів не мають значення для створюваного стилю, то відповідні їм поля повинні залишитися незаповненими.

Рис. 11. Діалогове вікно створення різних видів стилю

У першій групі Type зібрані параметри форматування шрифту. В полі Font можна задати його гарнітуру. Поле Size дозволяє визначити розмір шрифта. Він може бути заданий числовою величиною, тоді в сусідньому полі необхідно вказати одиниці вимірювання (найбільший інтерес тут представляють піксель - pixels і традиційна друкарська одиниця вимірювання пункт - points). Крім того, розмір може бути заданий за допомогою однієї з наперед визначених відносних одиниць виміру або у відсотках від успадкованого розміру.

В полі Style можна вибрати один з варіантів накреслення шрифта: normal - звичайне (використовується за умовчанням), italic - курсив, oblique - похиле. Параметр Line Height дозволяє задати відстань між базовими лініями суміжних рядків тексту - інтерліньяж. Властивість Decoration застосовує до тексту підкреслення (underline), надкресленням (лінія над текстом, overline), закреслення (line-through), ефект миготіння (blink). Параметр None використовується за умовчанням для звичайного тексту. Якщо його застосувати до гіпертекстового посиланням (для яких за умовчанням використовується underline), то воно не буде підкреслене.

Зверніть увагу, що дію всіх властивостей, позначених символом зірочка (*), не буде відображатися в полі документа Dreamweaver, а тільки у вікні браузера.

Параметр Weight задає вагу, або жирність, шрифту. Властивість Varint використовується для відображення елемента маленькими прописними буквами (значення small-caps). Параметр Case впливає на використання великих букв в елементі (capitalize - відображає першу букву кожного слова у верхньому регістрі, uppercase - відображає всі символи у верхньому регістрі, lowercase - відображає всі символи в нижньому регістрі). Параметр Color використовується для задання кольору тексту.

У групі параметрів Background зібрані властивості фону. В ідеалі фон займає простір позаду вмісту і відступів навколо нього (хоча на практиці це не завжди так). Background Color і Background Image визначають відповідно колір фону і фонове зображення елементу. Якщо задано фонове зображення, то властивість Repeat визначає як воно буде повторюватися (repeat - у вертикальному і горизонтальному напрямках, repeat-x - тільки по горизонталі, repeat-у - тільки по вертикалі, no-repeat - без повторів, один раз). Параметром Attachment визначається чи буде прокручуватися фонове зображення разом з документом (за замовчуванням, scroll) чи ні (fixed). Властивості Horizontal Position і Vertical Position визначають початкове положення фонового зображення щодо прямокутника, що охоплює вміст елемента.

У групі параметрів Block можна задати вирівнювання і взаємне розташування фрагментів тексту в елементі. Властивість Word Spacing задає інтервал між словами. Letter Spacing визначає розмір інтервалу між символами. Параметр Vertical Alignment впливає на вертикальне вирівнювання елементу. Text Align задає горизонтальне вирівнювання текстових елементів. Властивість Text Indent визначає розмір відступу перед першим рядком тексту елемента. Параметр Whitespace визначає, яким чином використовуються прогалини, задані у вихідному документі: normal - трактує текст звичайним чином, замінюючи множинні пробіли на один; pre - аналог тега <pre> в HTML (але при цьому не використовується шрифт з фіксованою шириною); nowrap - запобігає перенесення елементів тексту на наступний рядок, якщо не заданий тег <br>.

Властивості, зібрані в розділі Box використовуються для управління розміщенням елементів на сторінці. Параметри, позначені двома зірочками (**) можуть бути застосовані не до всіх елементів.

Параметри з розділу Border дозволяють управляти виведенням і параметрами рамок навколо елементів.

У розділі List можна задати параметри форматування списків.

Параметри розділу Positioning дозволяють перетворити тег або виділений блок тексту в шар. Їх використання обмежене тим, що ці властивості підтримуються тільки Internet Explorer.

У групі Extensions зібрані параметри, які не підтримуються більшістю браузерів.

Після того, як всі необхідні параметри стилю визначені, він з'явиться в списку в панелі стилів. Обраний в списку стиль застосовується до поточного виділеного елементу документа. Для того, щоб прибрати з елемента вплив усіх стилів, потрібно його виділити і вибрати пункт (none). Зверніть увагу, що в цьому списку відображаються лише іменовані стилі. Стилі перевизначення тегів і стилі з ідентифікаторами автоматично застосовуються до відповідних елементів сторінки.

Кнопка Attach Style Sheet панелі стилів дозволяє приєднати до поточного редагованого документу заздалегідь підготовлений файл з описом стилів.

Для внесення змін в опис стилів потрібно натиснути кнопку Edit Style Sheet. При цьому відкривається діалогове вікно редагування стилів. У цьому вікні перераховані всі вбудовані в документ стилі, а також імена зовнішніх файлів з описом стилів, пов'язаних з даною сторінкою. Кнопка Link, дозволяє приєднувати або створювати зовнішні таблиці стилів. У даному діалоговому вікні необхідно в поле File / URL вказати шлях до файлу, що приєднується. Якщо в списку Add As вибрати Link, то буде встановлено зв'язок із зовнішнім файлом стилів. Якщо ж вибрати Import, то описи стилів будуть перенесені із зовнішнього файлу безпосередньо в редагований документ.

Кнопка New в діалоговому вікні редагування стилів викликає діалог створення нового стилю (рис. 11). Кнопка Edit викликає діалогове вікно редагування параметрів обраного в списку стилю (рис. 17). Якщо в списку було вибрано ім'я файлу з описом стилів, то відкриється ще одне вікно редагування (рис. 18), в якому будуть перераховані стилі, розміщені в цьому файлі. Кнопка Duplicate дозволяє зробити кнопку виділеного стилю.

Видалити стиль можна за допомогою кнопки Remove. Так само можна видалити виділений стиль на панелі стилів за допомогою кнопки Delete Style.