Dreamweaver як створити шаблон із html сторінки. Встановити шаблон в Dreamweaver. Вставка графічного зображення
Шаблони Dreamweaver вирішують проблему, з якою стикаються багато компаній – як підтримувати сайт та залишати стандартні розділи стандартними. Звичайним рішенням є використання SSI (Серверні вставки), але не всі веб-сервери підтримують цю технологію. Є інші способи, за допомогою яких можна включити один html-файл в інший, але всі вони використовують або програми на стороні сервера, або java-скрипти на стороні користувача.
Шаблони Dreamweaver дозволяють створювати шаблон сторінки, який постійно знаходиться в одній області вашого сайту, і в подальшому створювати інші сторінки, ґрунтуючись на цьому шаблоні. Потім, при внесенні змін до шаблону, також зміняться сторінки, які використовують шаблон.
1. Починаємо з макета
Найпростіший спосіб створення шаблону на Dreamweaver – почати з макета, на основі якого ви хочете створити шаблон. Я використовую вдосконалену версію безкоштовного шаблону: зліва – навігація, вгорі – шапка, а також фото та кольори.
Оскільки існує можливість створення шаблону Dreamweaver з нуля, багато хто вважає, що легше спочатку зробити дизайн, а потім вирішити, що в ньому змінюватиметься, а що буде частиною шаблону.
Примітка. Шаблони Dreamweaver створюються як частина сайту Dreamweaver. Якщо у вас не визначено жодного сайту, вам потрібно створити сайт у Dreamweaver перед створенням шаблону.
3. Зробіть опис шаблону
Виберіть сайт, на якому ви бажаєте використовувати шаблон. Я його використовуватиму на сайті «Dreamweaver Examples». Назва вашого сайту відрізнятиметься.
Опишіть шаблон. Опис може бути настільки коротким або довгим, наскільки вам це потрібно. Однак не скупіться на деталі, вони можуть бути важливими у майбутньому.
4. Створення папки для зберігання шаблонів
Мій сайт вже має папку для шаблонів. Але якщо її не було, Dreamweaver автоматично створить таку.
Всі шаблони Dreamweaver зберігаються у папці «templates» на вашому сайті, і мають розширення *.dwt (скорочено від Dreamweaver Template).
5. Починаємо додавати редаговані області
- Виберіть частину тексту, яку ви бажаєте зробити.
- Перейдіть до меню Вставка — Об'єкти шаблону.
- Виберіть «Редагована область».
Є й інші об'єкти шаблону, але вони виходять за межі цього уроку.
6. Введіть ім'я Редагованої області
Ви можете залишити ім'я, яке Dreamweaver поставив за замовчуванням, але я рекомендую задати ім'я, що описує, що пізніше нагадає вам, яка саме інформація повинна міститися в цій галузі.
7. Редаговані області в блокових елементах
Якщо ви спробуєте розмістити редаговані області всередині блокових елементів (таких як заголовок, параграф), Dreamweaver видасть попередження. Якщо ви залишите область всередині блокового елемента, ваші автори контенту не зможуть впровадити туди будь-які інші HTML-елементи.
Я використовую це, коли хочу переконатися, що заголовок залишиться заголовком, або потрібна конкретна кількість параграфів або інших елементів у шаблоні.
Якщо ви вирішили залишити можливість додавати інші блокові елементи всередині даного елементатоді вам потрібно перенести межі редагованої області за теги елемента. Ви можете це зробити в режимі відображення HTML-коду, або знову вказавши область, попередньо її видаливши.
У готовий шаблонобласті, що редагуються, виділяються рамками, над якими буде ім'я області.
9. Створюємо сторінку на основі шаблону
Як тільки ви збережете шаблон, можете його використовувати на сайті: У меню Файл виберіть "Створити";
- Перейдіть до вкладки «Сторінка із шаблону»;
- Виберіть створений шаблон;
- Переконайтеся, що вибрано пункт «Оновлювати сторінку під час зміни шаблону»;
- Натисніть кнопку «Створити».
Тепер ви можете вносити зміни, але тільки в області, що редагуються. Dreamweaver не дозволить вам змінювати інші частини шаблону.
10. Змініть шаблон – оновіть файли
Якщо вам потрібно внести зміни до шаблону, відредагуйте файл dwt у папці «Templates». Як тільки ви збережете зміни в шаблоні, Dreamweaver запитає, чи не хочете ви оновити сторінки, створені на основі шаблону. Він також вкаже, які файли.
Як тільки ви натисніть «Оновити», всі файли, створені на основі цього шаблону, будуть оновлені. Вам тільки залишається зберегти їх та завантажити на веб-сервер.
Web-сторінки та Web-сайти
Що таке веб-сторінка? Відповісти на це запитання можуть багато хто. Це інтернет-документ, призначений для розповсюдження через Інтернет через сервіс WWW. А якщо говорити по-простонародному, це те, що показує у своєму вікні програма-клієнт для перегляду Web-сторінок - Web-браузер.
З технічної точки зору Web-сторінка - це звичайний текстовий файл, який можна створити в будь-якому текстовому редакторі, тому ж Блокноті, що стандартно поставляється у Windows. Цей файл містить власне текст Web-сторінки та різні команди форматування цього самого тексту. Команди форматування називаються тегами, а описує їхню особливу мову HTML(HyperText Markup Language), мова гіпертекстової розмітки.
Наступний крок - з'ясувати, за допомогою яких програм на мові HTML пишуться ці веб-сторінки. Так, оскільки вони є звичайними текстові файли, що містять код HTML, їх можна писати у звичайному Блокноті або аналогічній програмі.
Навіщо потрібні Web-редактори?
Мова HTML, незважаючи на таку мудру назву, дуже проста. І написати з його допомогою простеньку Web-сторінку з парою абзаців тексту можна буквально за п'ять хвилин, причому більшість цього часу буде витрачено на набір самого тексту цієї сторінки, а не тегів HTML. То в чому ж проблема?
Багато хто не знає HTML, більше того - не хоче його вивчати або не має на це часу. Але створювати Web-сторінки хочуть. Тому спеціально їм програмісти написали безліч програм, призначених до створення Web-страниц.
Одна з таких програм написана розробниками фірми Macromediaі називається Macromedia Dreamweaver. Перша її версія вийшла ще далекого 1998 року; в даний час доступна версія 8.
Саме з Dreamweaver ми і працюватимемо.
Dreamweaver- Типовий представник візуальних Web-редакторів, що працюють за принципом WYSIWYG (What You See Is What You Get, "що ти бачиш, то ти і отримаєш"). При цьому користувач форматує текст і у вікні редактора відразу бачить результати своєї праці.
Існують також і невізуальні Web-редактори (вони ж - HTML-редактори), засновані на іншому принципі. Вони працюють безпосередньо з самим HTML-кодом, надаючи при цьому користувачеві різні додаткові можливості: швидка вставка тегів, зручне завдання їх параметрів, набір зумовлених шаблонів для створення стандартних елементів Web-сторінки та ін. У цьому сенсі вони схожі на Блокнот, але значно розширені.
Тут треба сказати, що практично всі серйозні Web-редактори мають режим редагування безпосередньо самого коду HTML (тобто фактично є гібридними Web-редакторами). Тому зараз практично завжди, коли говорять "візуальний Web-редактор", мають на увазі саме гібридні програми. Зрозуміло, до них належить і Dreamweaver, з яким нам час познайомитися ближче.
Вступ
При першому запуску програми, вам буде запропоновано вибрати робоче середовище. Давайте створимо новий документ File->New(Файл-Новий)
На цій вкладці створіть новий документ, вибравши Basic Page (Базова сторінка) -> HTML.
Перед вами відкриється вікно програми.
І на новоствореній сторінці напишіть якийсь текст, що складається з російсько-англійських слів. Для прикладу: " корисна інформація щодо роботи з програмою DreamWeaver".
Після цього збережіть сторінку командою " File -Save as", але саму сторінку не закривайте в редакторі, а тепер відкрийте новостворену сторінку в браузері, - що у вас вийшло? У моєму випадку відобразився такий напис
Тому перше з чого варто почати – це навчити DreamWeaver кирилиці. Головне меню Edit(Редагувати) - Preferences(Налаштування), у діалозі виберіть категорію New Document (новий документ) та на цій вкладці у списку "Default Encoding", виберіть "Cyrillic (Windows-1251)". Далі в лівій частині цього діалогу виберіть " Fonts(Шрифти)" та у списку " Font Setting(Налаштування Шрифту)" виберіть "Cyrillic (Кирилиця)".
Тут ви також можете налаштувати відображення тексту (вибрати шрифти та встановити розмір літер), який використовуватиметься за замовчуванням. Щоб завершити, натисніть " ОК". Після чого створіть ще одну сторінку і впишіть будь-який текст, збережіть її" File - Save" і відкрийте збережену сторінку. Тепер все в порядку, АЛЕ! Будь-яка веб - сторінка, де в тезі Meta, явно не буде вказано кодування "charset = windows-1251" буде "переганятися" в кодування "Cyrillic (ISO-8859-5 )"
Щоб це не відбувалося, відкрийте файл: (Ваш диск \Program Files\Macromedia\Dreamweaver 8\Configuration\Encodings\EncodingMenu.xml) і в списку кодувань знайдіть чотири кодування Кирилиці, що йдуть один за одним
|
Таблиця 1
Відредагуйте цей файл у "Блокноті", змінивши місцями кодування "ISO-8859-5" та "Windows-1251", щоб порядок дотримання кодувань Кирилиці набув такого вигляду
Таблиця 2
|
Збережіть зміни у файлі, на цьому процес навчання програми російської можна вважати закінченим.
Інтерфейс
Тепер давайте знову повернемося до робочого середовища програми.
Для перемикання режиму відображення робочого середовища (режимів лише три: Code(Код), Design(Дизайн) та Code and Designна панелі інструментів або головне меню " View(Вигляд).
Виберіть з цих режимів той, з яким ви можете/умієте працювати, хоча краще залишити "Code and Desig", тоді робоче вікно розділиться на дві частини і ви зможете бачити і сам HTML-код і сторінку в режимі WYSIWYG.
Вище, нижче та правіше вікна документа знаходяться групи панелей - невеликі вікна, які можуть бути "приклеєні" до одного краю головного вікна, або вільно "плавати" поруч з ним. У верхній частині кожної групи панелей є її заголовок - "опукла" синя смуга, на якій написано назву панелі.
Більшість панелей мають так зване додаткове меню. Воно відкривається при клацанні мишею по невеликій кнопці, розташованій у правому верхньому куткугрупи, в якій знаходиться дана панель, що має зображення списку з трьох позицій та невеликої стрілки, спрямованої вниз. (У стислому стані ця кнопка не видно.)
Групи панелей завжди розміщуються над вікном документа, навіть якщо зараз неактивні. Це зроблено для того, щоб ми могли завжди отримати доступ до них, незалежно від того, яке вікно зараз активно.
Якщо ж ми захочемо прибрати якусь із цих груп, ми можемо "винести" її за межі вікна документа або взагалі закрити, розкривши її додаткове меню та вибравши пункт Close panel group. Тепер звернемо увагу на правий край головного вікна, де є безліч усіляких груп панелей. Це так званий док – область, спеціально для них призначена. Док відокремлений від решти простору головного вікна товстою сірою смугою, яку ми можемо перетягувати мишею, змінюючи розміри дока. Ми також можемо клацнути мишею досить помітну кнопку на доку, щоб швидко приховати його з усіма.
Ще три панелі Dreamweaver варті окремої згадки. Від звичайних панелей вони відрізняються тим, що мають постійні розміри та утворюють кожна свою особливу групу
- інструментарій об'єктів
- інструментарій документа
стандартний інструментарій, що надає доступ до операцій з файлами (створення, відкриття та збереження Web-сторінки), буфером обміну тощо, спочатку прихований.
Щоб вивести ці панелі на екран, головне меню “ Вид(View) - Панелі інструментів(Toolbars)” (відповідні панелі (Insert, Document, Standard)).
Якщо ми відкриємо кілька Web-сторінок, розібратися в них буде дуже важко – вікна документів перекривають один одного, і дістатися потрібного вдається далеко не відразу.
Якщо ж ми розкриємо одне з вікон документів на весь екран (точніше, на все головне вікно), перемикатися між вікнами стане просто. У цьому випадку в інструментарії документа з'являться вкладки, які відповідають відкритим вікнам документа.
Якщо нам необхідно тримати на увазі відразу два вікна або більше, варто скористатися пунктами меню "Window - Cascade, Tile Horizontally або Tile Vertically". Перший з них "викладає" всі відкриті вікна документів у вигляді "стопки" у головному вікні так, що ми зможемо бачити їхні заголовки та частину вмісту. Другий та третій пункти "викладають" у головному вікні "мозаїку" з вікон документів так, щоб вони не перекривалися. Причому другий пункт викладає мозаїку по горизонталі, а третій - по вертикалі.
Визначення сайту у Dreamweaver
Перш ніж почати керувати сайтом, його необхідно зареєструвати у Dreamweaver.
Для того, щоб створити новий сайт, скористайтесь пунктом New site(Новий сайт) меню Site(Сайт). Після вибору на екрані з'явиться діалогове вікно Site Definition(Визначення сайту), що складається із двох вкладок.
Якщо вона відкрита на вкладці Basic(Основні), перейдіть на вкладку Advanced(Додатково) - вона надає більше можливостей для налаштування вашого сайту.
Як бачите, у лівій частині цього вікна знаходиться список вкладок другого рівня. Перейдіть на вкладку Local Info(Локальна інформація) ,
де задається інформація про файли вашого сайту, що знаходяться на жорсткому диску вашого комп'ютера (локальної копіїсайту).
У полі введення Site Name(Ім'я сайту)вводиться ім'я сайту. Воно служить тільки для того, щоб вам було зручно з цим сайтом працювати. Назвіть сайт "proba".
У полі введення Local Root Folder(Локальний кореневий каталог) вказується шлях до кореневої папки локальної копії сайту. Ви також можете клацнути по значку папки, розташованому праворуч від цього поля введення, та вибрати потрібну папкуу діалоговому вікні, що з'явилося на екрані.
Прапорець Refresh Local File List Automatically(Обновити локальний список файлів автоматично)включає або вимикає автоматичне оновленнясписок файлів локальної копії сайту. Якщо ви залишите його увімкненим, список файлів сайту завжди буде оновлюватися автомагічно, як тільки Dreamweaver стає активним. Якщо ви вимкнете вищеназваний прапорець, вам самим доведеться оновлювати список файлів сайту, але Dreamweaver активізуватиметься швидше.
У полі введення Default Images Folder(Папка з зображеннями за замовчуванням)вводиться ім'я папки, в якій за умовчанням будуть розміщені всі графічні зображення, які ви розміщуєте на Web-сторінки сайту. Ви також можете клацнути по значку папки, розташованому праворуч від цього поля введення і вибрати потрібну папку в діалоговому вікні, що з'явиться на екрані. Введіть у поле “pic”.
У полі введення HTTP Addressвводиться інтернет-адреса вашого сайту. Не вводіть у поле нічого.
Якщо переглянути всі категорії справа, то у вас буде багато різних налаштуваньАле для знайомства з ними потрібно ще кілька лекцій, але у нас немає стільки часу.
Після натискання кнопки “ Готово” у панелі Файливідобразиться список файлів сайту, спочатку там немає файлів, але вони з'являться в міру Вашої роботи.
Основа практично будь-якої сторінки – це текст. Створіть нову сторінку(File - New) і наберіть у ній будь-який текст.
Текст набирається за допомогою клавіатури (а як ви думали?), при цьому Dreamweaver самостійно розіб'є текст на рядки.
Текстовий курсор, тобто миготлива вертикальна рисочка, що показує місце, де буде з'являтися текст, що набирається нами, може переміщатися у всіх напрямках за допомогою клавіш-стрілок.
І тоді в будь-якому браузері, в його заголовку, можна буде прочитати
Збережіть цю сторінку, давши їй якесь ім'я. Головним сторінкам сайтів або директорій дають назву: index.htm, index.html, index.php і так далі.
Для форматування абзаців цілком зручніше користуватися списком, що розкривається. Формат(Формат)" на панелі " Properties(Параметри)".
Якщо ця панель у вас не відкрита - натисніть на трикутник поруч зі словом " Properties(Параметри)".
У прикладі наведено приклади форматування абзаців, сам процес досить простий: клікаєте мишкою за будь-яким абзацом та у списку " Формат(Формат)" вибираєте один із шести пунктів.
Якщо ви хочете форматувати не абзаци, а лише вибрані слова, вирази або символи, то вам знадобляться інші піктограми.
Для визначення розміру символів скористайтеся пунктом " Size(Розмір)».
Ви можете вибрати шрифт тексту - список DefaultFontДля різних символів або слів можна встановити різні шрифти.
Для вирівнювання тексту можна скористатися цими 4 кнопками. Цікава деталь: якщо клацнути ще раз по натиснутій кнопці-перемикачі, вона "відімкнеться". У цьому випадку для абзацу буде встановлено вирівнювання за замовчуванням, зазвичай – по лівому краю.
- по лівому краю;
- по центру;
- з правого краю;
- по ширині.
Для завдання (збільшення/зменшення) відступу абзаців можна скористатися пунктами
При кожному натисканні пункту "Indent" відступ збільшуватиметься, а при натисканні на "Outdent" навпаки зменшуватиметься.
Зробимо деякі слова на нашій Web-сторінці напівжирними та курсивними. І допоможуть нам у цьому дві кнопки зміни зображення. А ось щоб увімкнути чи вимкнути підкреслення тексту лінією, нам все одно доведеться скористатися пунктом-вимикачем Underlineпідміню Style(Стиль) меню Text(Текст) або контекстного меню. Ні кнопки, ні комбінації клавіш для цієї дії не передбачено.
Пункт |
Опис |
Teletype |
Текст, виведений пристроєм виведення комп'ютера (телетайп) |
Emphasis |
Звичайний курсивний текст |
Звичайний напівжирний текст |
|
Фрагмент вихідного коду програми якоюсь мовою програмування (команд, імен змінних, ключових сліві т.п.) |
|
Variable |
Використовується для позначення в тексті імен змінних програм на якійсь мові програмування |
Інформація, виведена якоюсь програмою користувачеві |
|
Keyboard |
Текст, який користувач повинен запровадити з клавіатури |
Citation |
|
Definition |
Визначення будь-якого терміну |
Текстові редакторипідтримують створення нумерованих та маркованих списків. Пункти нумерованих (упорядкованих) списків, як ви знаєте, позначаються порядковими номерами, а пункти маркованих (невпорядкованих) списків будь-якими значками. Давайте, і ми створимо такий список.
Для того щоб перетворити виділені рядки на список, скористаємося кнопками-перемикачами редактора властивостей .
Поставте текстовий курсор на будь-якому пункті списку. У контекстному меню виберіть “ перелік – Властивості” і з'явиться діалогове вікно List Properties, за допомогою якого ми можемо задати деякі параметри списку. Змінити стилі маркерів або нумерацію (наприклад: використовувати букви замість цифр - a b c d;), а також для нумерованих списків, задати число, з якого слід починати нумерацію. Поля введення List Type" (три верхніх) - - дозволяють задати тип всього списку, тоді як поля введення " List Item " (два нижніх поля) - ставляться лише у тому рядку списку, де зараз встановлено курсор миші.
Текст можна пофарбувати у всі кольори веселки-:) Для цього виділіть будь-яку частину тексту та натисніть кнопку .
У діалозі представлена палітра кольорів
Ви можете вибрати будь-який колір із цієї палітри за допомогою піпетки, у верхньому вікні цієї палітри відображається колір тієї області, на якій зараз знаходиться піпетка.
Причому вибирати колір ви можете не тільки за допомогою палітри, але й переміщуючи піпетку по всьому документу у вікні редактора.
А при натисканні на трикутник у верхньому правому куті панелі ПалітраВи викличте ще одне підменю, де зможете поміняти палітри.
Часто потрібно вставити дату створення або останнього редагування документа, в цьому вам допоможе кнопка " Date(Дата)" або (Insert (Вставити)- Date (Дата)). У діалозі, що відкрився.
Ви можете встановити варіант відображення дати, а також за бажання і день тижня і час. Якщо ви встановите галочку в " UpdateAutomaticallyonSave" - тоді після кожного оновлення/редагування сторінки дата буде оновлюватись.
Також у вас є можливість вставляти спеціальні символискориставшись вкладкою "Text".
Ще одна корисна функція – це чистильник HTML-коду. Викликати його можна командою Command - CleanUpXHTMLі перед вами відкриється віконце цього діалогу.
Іноді необхідно розділити інформацію, і для цього ставлять горизонтальну лінію. На панелі “ Вставити” вкладка “ HTML” кнопка. У горизонтальній лінії є властивості Ширина, Висота та Колір. Для встановлення Ширини та Висоти на панелі “ Properties” необхідно вказати необхідні значення у полях Wі H.
Для завдання кольору лінії виділіть лінію та в контекстному меню Редагувати тег (Edit Tag) …
У діалоговому вікні виберіть потрібний колір лінії.
Зв'язки та навігація
Існує кілька способів створення гіпертекстових посилань на різні типифайлів. Почати слід із створення навігації по сайту. Для створення зв'язку між файлами потрібно точно вказати шлях, яким можна дістатися до потрібного документа.
Шлях може бути як повний - починатися із вказівки інтернет-адреси (наприклад: http://Dreamweaver/index.htm), так і коренезалежний (../index.htm). Давайте розглянемо, як процес завдання зв'язків між документами реалізований у DreamWeaver.
Для того, щоб зробити з будь-якого слова або кількох слів гіперпосилання - достатньо "причепити" до нього інтернет адресу. Для наочності зробимо так, - у тексті "Macromedia DreamWeaver. Практикум" виділіть словосполучення "Macromedia DreamWeaver." і в полі "Link" вкладки "Properties" введіть початкову адресу цього посібника (http://Dreamweaver/) та натисніть "Enter".
Як ви змогли помітити - слова "Macromedia DreamWeaver. Практикум" змінили колір і стали гіперпосиланням. Для видалення гіперпосилання - просто видаліть інтернет адресу в полі "Link" вкладки "Properties" і натисніть клавішу "Enter". Тепер перейдемо до коренезалежного шляху.
Виділивши "Macromedia DreamWeaver" натисніть кнопку із зображенням папки
і у діалозі, що відкрився, ви можете вказати сторінку, на яку слід перейти при натисканні за цим посиланням. Причому за замовчуванням відкриється та папка, де розташована сторінка, на яку ви хочете дати посилання. Так як і ця (поточна сторінка, на якій я хочу дати гіперпосилання) і та сторінка, куди це гіперпосилання направить, розташовані в одній папці, досить просто виділити мишкою потрібну сторінкута натиснути кнопку "ОК".
Тепер поставте курсор миші на це посилання та розкрийте список " Target" вкладки " Properties".
У цьому списку є чотири пункти, причому в нашому випадку працюватимуть лише два. Перший пункт "_self" - виведе сторінку на яку вказує гіперпосилання в тому ж вікні браузера (цей режим встановлюється за замовчуванням), і другий - "_blank" - розкриє сторінку в новому вікні.
Інші пункти меню "Target" знадобляться для роботи з кадрами.
Коли ви створюєте сайт, початкова папка цього сайту є кореневою, а в ній вже знаходяться різні файли та інші вкладені папки.
Якщо ви подивіться на HTML - код цього гіперпосилання, то побачите, що він набув наступного вигляду../index.htm. Причому ці дві точки перед рисою говорять браузеру "піднятися" на один рівень вгору по дереву каталогу. На два рівні вгору - ../../index.htm і таке інше.
Якщо ви хочете вставити поштову адресу, то для цього необхідно ввести в поле "Link" вкладки "Properties" адресу електронної пошти (наприклад: mailto:[email protected] dvpion.ru), будь-яке посилання на поштову адресу починається з mailto:, хоча якщо ви через якісь обставини не хочете руками вписувати слово " mailto:"Тоді можете на вкладці "Common" натиснути кнопку , де в полі "Text" впишіть текст посилання, а в полі "E-Mail" - адреса електронної пошти. І в тому і іншому випадку ефект буде той же.
Якоря
Ще один тип посилань - "якоря". Використовувати цей тип посилань особливо корисно при великій кількості інформації, розташованої на одній сторінці.
Давайте встановимо перехід до поточної сторінки. Перше, що потрібно буде зробити - це встановити сам якір на сторінці.
І натиснути кнопку на вкладці Common. У діалозі вкажіть ім'я якоря ім'я "new_page_11_top".
Тепер залишилося тільки встановити посилання на цей якір. Для цього потрібно виділити текст, і в полі "Link" вкладки " Properties" ввести адресу гіперпосилання, що посилається на цей якір: #new_page_11_top
Решітка перед ім'ям якоря - це і є команда браузеру "направитися" до позначки під ім'ям new_page_11_top.
Якщо ви хочете послатись на якір, розташований на іншій сторінці, тоді вкажіть шлях до самої сторінки з якорем. Наприклад, я хочу направити відвідувачів на сторінку з "прикладами якір". Оскільки ім'я сторінки з прикладами - examples.htmа якір, на який я хочу перенаправити, має ім'я 02
, те й посилання матиме такий вигляд: (examples.htm#02).
Робота з графікою
Із чим ми мали справу раніше? З текстовими елементами веб-сторінок. Всі текстові елементи створюються за допомогою відповідних тегів HTML.
Крім того, ви зможете задати фон вашої сторінки. Якщо в якості фону ви просто хочете задати який-небудь колір, - то скористайтеся для цього пунктом "Background (Фон)" (клікнувши лівою кнопкою мишки по квадратику, що відноситься до цього пункту). І в палітрі, що розкрилася, виберіть потрібний вам колір. Фонову картинку можна задати, вибравши файл у відповідному полі цього ж діалогового вікна.
Вставка графічного зображення
Помістимо текстовий курсор у потрібне місце і подивимося на вкладку “ Common” інструментарію об'єктів - там знаходиться кнопка “ Image(Зображення)”. Натиснемо на неї і в меню, що з'явиться на екрані, виберемо пункт Image. Також можна скористатися пунктом Imageменю Insertабо натиснути
Список папок, що відкривається, і список файлів дозволять нам вибрати потрібну папку і файл.
У полі введення ім'я файлуз'явиться ім'я вибраного файлу (або ми можемо ввести його туди). А список, що розкривається Тип файлівдозволить нам вибрати, який тип файлів потрібно знайти. Все це знайоме нам за стандартними діалоговим вікнамвідкриття та збереження файлів Windows. Єдина відмінність - справа знаходиться панель попереднього перегляду. А якщо ми бажаємо її прибрати відключимо прапорець Preview images.Отже, ми вибрали файл. Залишилось натиснути кнопку ОК. Але Dreamweaver вимагатиме від нас ще деяку інформацію, вивівши діалогове вікно “ Image Tag Accessibility Attributes(Атрибути доступності тега зображення)” .
Комбінований список “ Alternate text(Альтернативний текст) цього вікна служить для завдання, так званого тексту заміни.Це вигадано для користувачів повільних каналів зв'язку. Після того як Web-браузер завантажить HTML-файл з Web-сторінкою, він замість зображення, розміщеного на ній, відобразить порожню рамку відповідних розмірів. Коли користувач помістить курсор миші над порожньою рамкою малюнка, Web-браузер виведе невелику підказку, що містить цей текст заміни. Тому рекомендується завжди скористатися цією можливістю.
Власне до списку Alternate textвводиться короткий текст заміни.Його обмеження – не більше 50 символів. Якщо нам потрібно виводити більш детальний текст заміни на екран, його можна зберегти в окремий файл Web-сторінки, а потім ввести його інтернет-адресу в поле введення Long description.Також можна клацнути кнопку у вигляді папки, розташовану правіше цього поля, і вибрати потрібний файл у діалоговому вікні Select File.Закінчивши введення даних, натисніть кнопку ОК. Dreamweaver помістить графічне зображення в те місце, де зараз знаходиться текстовий курсор.
Параметри графічного зображення
Тепер збережемо сторінку, що вийшла, виділимо зображення, якщо воно не виділено, і подивимося на редактор властивостей. Те, що ми побачимо Поля введення Wі Ндозволяють нам задати розміри зображення, ввівши його відповідно ширину і висоту вручну. Це може бути корисним, якщо виділене зображення - частина оформлення сайту; в інших випадках зручніше задавати розміри зображення, перетягуючи мишею маркери зміни розміру.
Взагалі, Dreamweaver при приміщенні на Web-сторінку графічного зображеннясам поміщає в ці поля введення його початкову ширину та висоту. Як ми вже знаємо, Web-браузер відразу після завантаження сторінки
відображає ще не завантажені зображення у вигляді пустих рамок. Якщо розміри зображень були явно задані, вони будуть відразу застосовані до рамок і оформлення сторінки не порушиться. В іншому випадку Web-браузер відобразить рамки якогось розміру за замовчуванням, і при подальшому завантаженні зображень їх розміри будуть змінюватися, що викличе перемальовування самої сторінки. А це дуже неприємно.
Поля введення V Spaceі Н Spaceзадають, відповідно, вертикальну і горизонтальну відстань від краю зображення до тексту, що його обтікає. За умовчанням обидва вони дорівнюють нулю.
Полі введення Srcзадає інтернет-адресу файлу, де зберігається графічне зображення. Праворуч від нього видно дві кнопки. Натиснувши на праву (з зображенням папки), ми відкриємо діалогове вікно Select Image Source.
Ми також можемо змінити ім'я файлу зображення, клацнувши на зображенні правою кнопкою миші та вибравши пункт Source Fileу контекстному меню, або просто двічі клацнувши мишею на зображенні. Після цього на екрані з'явиться діалогове вікно Select Image Source.
Полі введення Low Srcаналогічно полю Src,за винятком, що задає ім'я файлу, де збережено так зване "чорнове" зображення."Чорне" зображення має менший розмір, як правило, за рахунок більш низької якості, і придумано, знову ж таки, для власників низькошвидкісних каналів зв'язку. Web-браузер насамперед завантажить "чернетку", тому що він має значно менший розмір, і виведе його на сторінці. А вже потім, поки користувач переглядає готову сторінку, поступово завантажується основне зображення і підміняє собою "чернетку".
Рекомендується виготовляти "чернетку" тільки тоді, коли оригінальне зображення занадто велике, щоб швидко завантажитися. Зокрема, це підійде, якщо ми зберемося робити сайт із художньою графікою.
Полі введення Borderдозволяє встановити товщину рамки, що відображається навколо зображення, в пікселах. За умовчанням вона дорівнює нулю, тобто рамки немає.
Комбінований список Altзадає знайомий нам короткий текст заміни.
А тепер звернемося до списку, що розкривається. Align.Він дозволяє нам задати вирівнювання зображення, фактично - відносне розташування його та тексту, в якому воно знаходиться.
перелік Alignмістить такі пункти:
- Default- розташування за промовчанням, зазвичай аналогічне пункту Baseline;
- Baseline- низ зображення збігається з базовою лінією тексту(уявної лінією, де знаходиться рядок тексту) рядки, у якому воно перебуває;
- Тор- верх зображення збігається з верхом тексту рядка, в якому воно знаходиться;
- Middle- середина зображення збігається із базовою лінією тексту;
- Bottom- низ зображення збігається з низом тексту (зазвичай не те саме, що Baseline);
- TextTop- верх зображення збігається з верхом найвищого символу тексту (зазвичай не те саме, що Тор);
- Absolute Middle- середина зображення збігається точно з центральною лінією тексту(Лінією, що проходить через центр рядка);
- Absolute Bottom- низ зображення збігається з низом нижнього символу тексту;
- Left- Зображення "притискається" до лівого краю сторінки, а текст "обтікає" його праворуч;
- Right- Зображення "притискається" до правого краю сторінки, а текст "обтікає" його зліва.
В останніх двох випадках зображення стає плаваючим. Web-браузером ліворуч або праворуч, при цьому текст, в який воно було вставлено, буде обтікати його. А у точці, де було вставлено плаваюче зображення, Dreamweaver відображає спеціальний маркер плаваючого зображення. Цей маркер виводиться лише для зручності Web-дизайнера і лише у Dreamweaver; Web-браузер його не відображає.
Отже, із редактором властивостей ми розібралися. Тепер давайте задамо властивості нашого зображення. Відстань від тексту зробимо по 5 пікселів по горизонталі та вертикалі, вирівнювання - по лівому краю, "альтернативний" текст - "напис, що спливає". І збережемо сторінку.
Щоб повернути початкові розміри зображення, ми можемо скористатися кнопкою скасування), розташованою між полями введення W і Н редактора властивостей і правіше за них, а також пунктом контекстного меню Reset Size.Це корисно, якщо ми їх сильно спотворили і хочемо почати все спочатку.
Спеціальні зображення
Мова HTML і Dreamweaver дозволяють створювати як звичайні зображення, а й мають особливі властивості. Це зображення-гіперпосилання, активні зображенняі карти-зображення. Вони часто використовуються на Web-сторінках, тому нам потрібно їх розглянути.
Будь-яке зображення може використовуватися як гіперпосилання, для цього лише достатньо ввести інтернет адресу в полі. Link"панелі" Properties".
Причому посилання можна дати як на адресу електронної пошти, так і на іншу веб сторінку. У другому випадку у вас стане доступним список Target"
Зображення можна зробити активним, що реагує на наведення на нього курсором мишки - Rollover. Для цього вам потрібно буде запастися двома зображеннями, які змінюватимуть один одного, і на вкладці " Commonнатисніть відповідну кнопку.
У вікні вам потрібно буде заповнити необхідні поля
В полі Image Name- вкажіть оригінальне ім'я активного зображення, причому в імені можуть бути лише латинські літери (з літери має починатися будь-яке активне зображення) та цифри (неодмінно арабські!-:)
В полі Original Image- введіть шлях до основного зображення, яке першим завантажуватиметься на сторінці.
В полі Rollover Image- введіть шлях до "зображення - ефекту", - це зображення з'являтиметься лише при наведенні курсору миші на активне зображення.
Поставте прапорець у полі Preload Rollover- у цьому випадку обидва малюнки відразу будуть завантажені броузером і виконання ефекту почнеться відразу ж після наведення мишки. В іншому випадку (при відключеній галочці), при наведенні на таке зображення мишки - браузер почне завантаження другого зображення... і якийсь ефект вийде.
В полі Altemate Text- введіть текстовий коментар, який випливає при наведенні курсором мишки на зображення.
Ну а в полі Go To URL – інтернет адреса.
Зображення-картки
Карта - це цільне зображення з розміченими "гарячими областями", причому кожна така область є гіперпосиланням і відповідає її інтернет адресу.
Для початку розмістіть малюнок на сторінці, виділіть його, клацнувши по ньому лівою кнопкою мишки та на вкладці " Properties" за допомогою бірюзових фігур (у лівому нижньому кутку - група елементів Map) виберіть один із методів виділення "гарячої області". Так як для прикладу я хочу зробити "гарячою областю" сині піктограми, то найближче до цього фігура прямокутник. Але ви можете вибрати як коло, так і фігуру неправильної форми, натисніть на чотирикутник і виділіть область, що вас цікавить.
Виділена вами фігура набуде вигляду:
вам залишилося тільки ввести інтернет-адресу в полі “ Link” (посилання можуть бути на інші сторінки вашого сайту або на інші сайти, або на поштові адреси), вибрати один із пунктів поля Target та ввести альтернативний текст у полі Alt.
Після виділення можна переміщати виділену область, натиснувши для цього кнопку зі стрілочкою - в лівому нижньому кутку.
А для виділення фігур неправильних форм достатньо клацати лівою кнопкою мишки по периметру області для виділення. Насамкінець дайте оригінальне ім'я вашій карті в полі введення Map і все.
Таблиці
Щоб створити нову таблицю, перейдіть на вкладку " Commons"панелі" Insertі натисніть кнопку . 
У діалозі заповніть необхідні поля.
Rows- кількість рядків у таблиці
Columns- кількість стовпців у таблиці
Table width- ширина таблиці, причому у меню, що випадає, вам потрібно вказати одиниці вимірювання - відсотки або пікселі.
Border thickness- Товщина рамки таблиці в пікселях, причому якщо ви поставите значення рівним нулю, то сама таблиця буде не видно на сторінці.
Cell Padding- відстань відступу всередині осередків таблиці
Cell Spacing- відстань між межами осередків таблиці
Набір перемикачів Header(Верхній колонтитул) дозволить нам створити "шапку" та виділений перший стовпець таблиці. У цьому наборі доступні перемикачі None (немає ні "шапки", ні виділеного першого стовпця), Left (виділений перший стовпець), Тор ("шапка") та Both (і "шапка", і виділений перший стовпець).
Осередки, що становлять "шапку" і виділений стовпець, будуть оформлені як осередки заголовка, а текст, який ми введемо в них, буде автоматично вирівняний по центру і виділений жирним шрифтом.
У полі введення Caption(Заголовок) вводиться назва таблиці. Ця назва буде знаходитись над створюваною таблицею.
Список, що розкривається Align caption(Вирівнювання) дозволить нам задати місце розташування та вирівнювання назви (якщо, звичайно, ми її ввели). Тут є такі пункти:
default (за умовчанням)- вирівнювання виконує сам Web-браузер, зазвичай у разі назва перебуває над таблицею і вирівнюється по центру;
top - назва знаходиться над таблицею та вирівнюється по центру;
bottom - назва знаходиться під таблицею та вирівнюється по центру;
left - назва знаходиться над таблицею та вирівнюється по лівому краю;
right-назва знаходиться над таблицею і вирівнюється праворуч.
У сфері редагування Summary(Разом) вводиться примітка таблиці. Ця примітка не виводиться Web-браузерами на екран, але може бути використана для якихось інших цілей (наприклад, його можуть обробляти програми, які читають екранний текст). Задавати його необов'язково.
Після того, як таблиця створена, ви можете змінювати її розміри, перетягуючи межі за допомогою мишки. Наведіть курсор на один із трьох квадратиків у виділенні таблиці.
Тепер поставимо текстовий курсор у будь-яку комірку таблиці і наберемо якийсь текст. Повторимо те саме з іншими осередками таблиці.
Осередок таблиці обов'язково повинен мати хоч якийсь вміст, інакше Web-браузер може відобразити її некоректно. Якщо ж комірка все-таки має бути порожньою, вставте в неї нерозривну прогалину (його код HTML -), як це робить у подібних випадках сам Dreamweaver.
Щоб визначити властивості таблиці - Виділіть її, клацнувши для цього лівою кнопкою мишки по межі таблиці. Після цього на вкладці "Properties".
Ви зможете змінити властивості таблиці та налаштувати її вигляд.
Поле Table id- задайте ім'я таблиці (атрибут не є обов'язковим)
Поля Rowsі Cols- кількість рядків та стовпців у таблиці.
Поля Vі H- ширина та висота таблиці в пікселях або відсотках.
Поле Align- вирівнювання таблиці по лівому краю, центру або правому краю
Поле CellPad- відстань усередині комірки (між вмістом та межею комірки)
Поле CellSpase- відстань між осередками таблиці
Поле Bolder- ширина межі таблиці
Bg Color- колір фону таблиці
Brdr Color- Колір кордонів для всієї таблиці.
Bg Image- Завдання фонового малюнка для таблиці.
Там же є ще шість додаткових кнопок
- Кнопка ClearColumnWidths- очистити значення ширини стовпця
- Кнопка ClearRowHeights- очистити значення висоти рядка
- Кнопки ConvertWidthstoPixelsі ConvertWidthstoPercent- перетворити ширину осередків у пікселі та перетворити ширину осередків у відсотки
- Кнопки ConvertHeightstoPixelsі ConvertHeightstoPercent- перетворити висоту осередків у пікселі та перетворити висоту осередків у відсотки
Крім завдання властивостей таблиці існує завдання властивостей осередку чи групи осередків. Для завдання властивостей комірки – клацніть у ній лівою кнопкою мишки. Якщо ж ви хочете задати властивості групі осередків, то після того, як клацніть по полю першого осередку, не відпускаючи ліву кнопку мишки виділіть необхідні осередки (ви можете виділити таким чином хоч всю таблицю). При виділенні - межі всіх доданих осередків фарбуватимуться в інший колір.
Після того, як осередки виділені - знову зверніть увагу на панель. Properties"
Horz- горизонтальне вирівнювання вмісту осередків (ліворуч, центром або правим краєм)
Vert- вертикальне вирівнювання вмісту осередків (по верху, посередині, по низу або базової лінії)
У полях Wі H- вкажіть ширину та висоту вибраних осередків, якщо вам необхідно вказати значення у відсотках - додайте після числового значення символ %.
Bgі Brdr- встановлення фону осередків та встановлення кольору меж осередків. А за допомогою верхнього поля Bg – ви зможете задати фонове зображеннядля осередків.
Прапорець NoWrap- заборона перенесення рядка
Прапорець Header- для форматування вибраних осередків як заголовок таблиці.
Тепер клацніть лівою кнопкою мишки всередині будь-якої комірки і натисніть кнопку .
За допомогою цього діалогу ви зможете розділити обраний осередок на кілька частин. Перемикачі Rowsі Columns- розділити на рядки та стовпці відповідно. Number of... - на скільки рядків чи стовпців слід ділити обрану комірку.
Тепер виділіть дві комірки та натисніть кнопку .
Дві обрані вами осередки об'єдналися в один і цей новий об'єднаний осередок ви можете знову ділити або навпаки об'єднувати з іншими як і стандартні.
До будь-якої таблиці можна швидко застосувати форматування. Для цього слід виділити таблицю та в меню “ Commands” вибрати пункт “ ФорматTable(Форматувати таблицю)”.
І у діалозі, що відкрився, ви зможете налаштувати дизайн вашої таблиці
Після вибору одного з попередньо встановлених шаблонів ви можете змінювати всі його атрибути на свій смак.
Ви можете вирізати, вставляти чи копіювати комірки таблиці.
Для того, щоб вирізати комірку (або кілька осередків), вам потрібно виділити її і дати команду Edit - Cut. Осередок (або кілька) буде видалено з таблиці.
Для того, щоб скопіювати комірку (або кілька осередків), вам потрібно виділити її і дати команду Edit - Copy. Осередок (або кілька) буде скопійовано.
Для вставки скопійованих чи вирізаних осередків скористайтесь командою Edit – Paste.
Перш ніж рухатися далі, спробуйте свої сили у створенні найпростіших таблиць.
Табличний дизайн
Припустимо, що ми робимо інтернет-магазин. Нам потрібно помістити на сторінку назву, опис, ціну та фотографію товару. З таблицями це найпростіше.
За допомогою спеціально відформатованої таблиці ми можемо розмістити декілька фрагментів тексту та графічне зображення так, як нам потрібно. А якщо нам щось не сподобається, ми можемо трохи переробити цю таблицю та отримати зовсім інший результат.
Веб-дизайнери давно освоїли таблиці. І так само давно носилася у повітрі проста, як усе геніальне, ідея. А що якщо помістити ВЕСЬ текст Web-сторінки у велику, складно відформатовану таблицю, розтягнувши її на все вікно Web-браузера? Адже тоді ми отримаємо практично необмежені можливості майже такі ж, як у наших колег-поліграфістів. Ми зможемо створювати і примітки, і виноски, і врізки, і множинні "потоки" тексту, які починаються і перериватимуться там, де нам потрібно.
Ось ми і підійшли впритул до табличного дизайну, тобто способу побудови Web-сторінок з використанням таблиць.
Основний принцип табличного дизайну вже наведено. Весь текст і вся графіка поміщаються в осередки таблиці, що дозволяє робити з ними все, що завгодно. Як правило, такі таблиці (назвемо їх таблицями розмітки) мають невидимі межі, а лінійки створюються за допомогою дуже тонких осередків із фоновим заповненням. Таблиці розмітки дуже складні, використовують різне форматування та багаторазове об'єднання осередків і практично завжди – вкладені таблиці.
Створення складних таблиць розмітки вручну – вищий пілотаж Web-дизайну. Не всякий досвідчений Web-дизайнер візьметься робити складні сторінки на основі таблиць. І все це через неймовірну складність HTML-коду. Тому дуже часто в коді Web-сторінок, побудованих на основі таблиць, трапляються помилки, через що їх не завжди може відобразити Web-браузер. Насправді, у всіх цих численних об'єднаних осередках і в найскладнішому форматуванні можна просто заплутатися.
Шаблон- це своєрідний зразок, "скелет" Web-сторінки, що містить загальні для всіх сторінок елементи: заголовок сайту, набір гіперпосилань, відомості про авторські права, можливо, таблицю розмітки та ін. тому так і називаються - незмінними елементами. Так, але яким чином на сторінці міститься її основний вміст?
Дуже просто. Спеціально для цього у шаблоні створюються змінні області
. Вони призначені для унікального вмісту сторінки, яка буде створена на основі цього шаблону.
Все просто: створюємо на основі шаблону сторінку і вводимо в області, що змінюються, її основний вміст. Незмінні ж елементи Dreamweaver у разі нам правити не дає, і правильно - вони ж незмінні, зрештою. Але це не біда – ми завжди можемо змінити сам шаблон.
Нехай, наприклад, потрібно виправити заголовок сайту. Оскільки він входить до складу шаблону, ми відкриваємо шаблон, виправляємо його та зберігаємо. Dreamweaver відразу пропонує нам перенести зроблені в шаблоні зміни у всі сторінки, створені на його основі. І переносить, та так акуратно, що не зачіпає вміст областей, що змінюються! Фактично він за нас виправляє всі елементи, що повторюються, на всіх Web-сторінках сайту. Шаблони зберігаються в спеціальних файлах, що мають розширення dwt, в папці Templates, яку Dreamweaver створює сам у кореневій папці локальної копії сайту. Кількість шаблонів, що використовуються у сайті, не обмежена, тому ми можемо створювати одні сторінки сайту на основі одного шаблону, а інші – на основі іншого. А можемо взагалі обмежитися одним єдиним шаблоном, як, власне, найчастіше буває.
Перш ніж створити шаблон, створіть сайт. Зареєструйте його у Dreamweaver.
Тепер створимо документ та зробимо розмітку.
- Створіть таблицю з шириною 100%, 2 рядки та 1 стовпець, межа 0.
- У першому рядку зробимо фон (fon.gif) та висоту 100 пікселів.
- Далі напишіть заголовок Мій сайт у заголовку сторінки та у першому рядку. Встановіть розмір тексту +7 та колір жовтий.
- У другому рядку поставте вирівнювання по вертикалі зверху.
- Вставте ще одну таблицю із шириною 100%, 1 рядком та 3 стовпцями, межа 0.
- У кожному осередку встановіть вирівнювання по вертикалі зверху.
- Ширина першого шпальти 20%, другого 60%, третього 20%.
- У кожен стовпець вставимо ще таблиці 2 рядки х 1 стовпець, шириною 95%, вирівнювання таблиці по центру. І також вирівнювання у кожному осередку по вертикалі Згори.
- Далі заповніть рядки текстом як у прикладі.
- У стовпці навігації встановіть колір клітинок через зелений колір.
Макет нашої сторінки готовий. Нічого складного ми робити не будемо. У рамках цієї лекції цього достатньо.
Саме час створювати шаблон та редаговані області.
Є два способи створення шаблону Dreamweaver. По-перше, його можна створити "з нуля", а потім заповнити вмістом як звичайну Web-сторінку.
По-друге, існуючу сторінку можна зберегти як шаблон, а потім відредагувати, видаливши корисний вміст та залишивши лише загальні елементи. І те, й інше зробити однаково легко.
Щоб створити новий шаблон"з нуля" меню " File – New“
Створити новий шаблон на основі існуючої веб-сторінки ще простіше. Для цього відкрийте потрібну Web-сторінку, виберіть меню “ File"Пункт" Save as Template“ (Зберегти як шаблон). Також ви можете натиснути кнопку Make Template(Створити шаблон) на панелі об'єктів. На екрані з'явиться діалогове вікно Save As Template ”.
У списку, що розкривається Siteвибирається сайт, у якому зберігається шаблон. (Шаблони є невід'ємною власністю сайту, пам'ятайте) За замовчуванням там вибрано поточний сайт.
Саме ім'я шаблону вводиться у поле введення Save As. Давайте назвемо наш новий шаблон main("Головний"), оскільки це наш головний шаблон, на основі якого ми побудуємо наш сайт.
Ввівши всі необхідні дані, натисніть кнопку Save(Зберегти), щоб зберегти шаблон.
Після створення нового шаблону останній з'явиться у списку шаблонів. А оскільки ми створили новий шаблон на основі існуючої Web-сторінки, тобто він має вміст, ми можемо переглянути його на панелі попереднього перегляду. Щоправда, ця панель дуже мала, і щоб отримати уявлення про вміст шаблону, нам доведеться відкрити його у вікні документа.
Виправлення шаблону
Порожній шаблон потрібно заповнити вмістом. Шаблон, створений на основі Web-сторінки, необхідно відредагувати: усунути унікальний для цієї сторінки вміст, залишивши тільки загальні для всіх сторінок сайту елементи. Для цього нам потрібно буде відкрити шаблон у вікні документа як звичайну Web-сторінку.
На екрані з'явиться вікно документа, в якому буде відкрито вибраний шаблон. Зовні він нічим не відрізнятиметься від звичайної Web-сторінки.
Що ми можемо зробити із шаблоном? Все що завгодно. Можна вважати його звичайною Web-сторінкою з деякими особливостями. (Ці особливості ми опишемо далі.) Ми можемо набирати текст, форматувати його, розміщувати зображення, таблиці, гіперпосилання, перемикатися в режим розмітки сторінок і створювати таблиці та комірки розмітки, створювати набори кадрів, "чистити" HTML-код і т.д.
Але все-таки шаблон не Web-сторінка і має деякі особливості. Так, нам потрібно буде помістити на ньому області, що змінюються, в яких згодом буде знаходитися основний вміст сторінок. (Більше того, нам обов'язково потрібно буде це зробити, інакше навіщо нам тоді цей шаблон.) Як це зробити, ми дізнаємося трохи згодом.
Відкриємо шаблон main, який ми створили на основі сторінки default.htm (якщо вона ще не відкрита).
Тепер нам потрібно помістити в шаблон області, що змінюються. Поки що область, що змінюється, буде всього один-основний вміст сторінки. І розташовуватиметься вона у найбільшому осередку нашої таблиці розмітки. Колонку новин та панель навігації ми поки дамо спокій.
Створення областей, що змінюються
Як і у випадку з самим шаблоном, ми можемо створювати області, що змінюються, двома способами. По-перше, створити порожню змінну область на порожньому місці сторінки. По-друге, перетворити фрагмент поточного вмісту сторінки на змінну область.
Перший спосіб найкраще підходить, якщо ми створили шаблон "з нуля", а другий - якщо ми перетворили на шаблон існуючу сторінку.
Створити в шаблоні порожню змінну область дуже просто. Для цього спочатку ставимо текстовий курсор у те місце, де ми хочемо створити порожню змінну область і вирішуємо, чим скористатися:
- інструментарієм об'єктів, натиснувши кнопку Templatesна вкладці Commonі вибравши в меню пункт Editable Region;
- контекстним меню, вибравши в його підменю Templateпункт New Editable Region;
- системним меню, вибравши у підменю Template Objectsменю Insertпункт Editable Region;
- клавіатурою, що найшвидше, - достатньо натиснути
+ + .
На екрані після цього з'явиться діалогове вікно New Editable Region.
У єдиному полі введення Name, що знаходиться в цьому вікні, вводиться унікальне ім'я області, що змінюється. Кожна створена нами у шаблоні змінна область повинна мати унікальне ім'я. Це ім'я може містити будь-які символи, крім літер російського алфавіту, лапок, апострофа та знаків.<", ">" і "&". Введіть ім'я, натисніть кнопку ОК, щоб створити змінну область, або Cancelвідмовитися від цього.
Якщо ми випадково помістили змінну область не в те місце, куди хотіли, це можна виправити. Виділяємо змінну область, клацнувши мишею по її заголовку, "захоплюємо" її мишею за вміст і тягнемо на потрібне місце.
Dreamweaver під час створення будь-якого шаблону автоматично створює невелику змінну область doctitle. (Тому ми й зможемо дати змінюваної області ім'я doctitie - змінювана область із такою назвою вже існує). Ця змінна область включає вміст тега