Ілюстрований самовчитель з Adobe Dreamweaver MX. Встановлення шаблону в Dreamweaver Створення папки для зберігання шаблонів

Зараз весь сайт складається лише з однієї сторінки – index. Але ваш сайт буде складатися не з однієї сторінки, правильно? Тоді давайте займемося створенням інших сторінок.

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

Взагалі, у вас є назви розділів і підрозділів? Логічно почати з їхнього створення.

Спочатку відкрийте сторінку index у Dreamweaver. Тепер збережіть її, виконавши команду File (Файл) | Save as (Зберегти як)але вже під іншим ім'ям. Припустимо, друга сторінка у вас буде називатися states(Статті). Ось і збережіть сторінку index під назвою states.

Тепер у вас є дві ідентичні сторінки-близнюки, які мають різні імена. Але навіщо вам на сайті дві абсолютно однакові сторінки, хай і під різними іменами? Думаю, зовсім ні до чого.

Тому, не закриваючи Dreamweaver, внесіть зміни у вашу нову сторінку, яку я за умовчанням називатиму states. Вставте всі картинки, напишіть текст… Втілюйте свої уявлення про цю сторінку. Звичайно, спочатку там може бути всього пара абзаців, але це ж лише перший варіант?

Готово? Тоді заходимо до Page Properties. Пам'ятаєте, як це робиться? Команда меню Modify (Змінити) Page Properties (Властивості сторінки)або поєднання клавіш +. Далі у лівому списку Category (Категорія)вибираємо пункт Title/Encoding (Заголовок/Кодування).

Поруч із написом Title (Заголовок)пишіть заголовок вашої сторінки. У даному випадку«Статті». Можна також написати «назву вашого сайту > статті» або навпаки, «статті > назву вашого сайту».

До речі, а для головної сторінкиу вас прописано заголовок? Що таке заголовок? Це те, що відображається у верхній частині вікна вашого браузера під час перегляду сторінки.

Ось і все, друга сторінка створена. Перед тим, як перейти до створення всіх інших сторінок, я розповім, як поєднати дві вже створені сторінки (index та states) гіперпосиланнями.

Як користувач Інтернету, ви, безумовно, не раз стикалися з посиланнями. Весь Інтернет складається із них! Важко уявити його існування без посилань, які є практично на кожній сторінці.

Вашим відвідувачам теж потрібно буде якось перейти з одного розділу до іншого. І як це зробиш без посилань?

Тепер можна виконати команду меню Modify (Змінити) Make Link (Створити посилання)(відкриється діалогове вікно) або звернутися до нашої улюбленої панелі Properties.
Якщо ви вибрали другий варіант, то зверніть увагу на поле Link (Посилання). Праворуч знаходимо кнопку із зображення папки Browse for fileта натискаємо на неї.

Відкриється діалогове вікно Select File, де потрібно вибрати файл, який буде вести посилання.

Натискаємо ОК, зберігаємо сторінку та відкриваємо її у браузері. Перевіряємо, як працює посилання. Якщо ви все зробили правильно, то після клацання потрапите на потрібну сторінку. В даному випадку з головної сторінки на сторінку Статті. Все так? Значить, із завданням ви впоралися успішно!

Гіперпосилання можна створювати і з нуля, не виділяючи попередньо слово чи словосполучення. Відкриваємо вкладку Commonпанелі інструментів Insert. Першою розташована кнопка Hyperlink (Гіперпосилання).

Натискання на ній відкриває діалогове вікно Hyperlink (Гіперпосилання).

Поле Link (Посилання)вам вже знайомо, тут має бути URL-адреса сторінки, на яку робиться посилання. При натисканні на праворуч кнопку Browseіз зображенням папки, відкриється вікно Select File.

Зверніть увагу на поле введення Title. Сюди можна ввести пояснювальний текст, який відображатиметься під час наведення курсору на посилання. Це поле є досить містким, є можливість ввести кілька пропозицій.

Щоб змінити адресу створеного посилання, можна виділити її та виправити введене значення у полі Linkпанелі Properties. Або виконати команду меню Modify (Змінити) Change Link (Змінити посилання), яка відкриває вікно Select File, в якому потрібно вибрати новий файл, що містить потрібну сторінку.

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

Обидва способи призводять до відкриття діалогового вікна Email Link (Посилання e-mail).

Натискаємо ОК та дивимося, що вийшло.

На сторінці, де знаходиться текстовий курсор, з'явиться текст, введений у полі Text. Він буде виглядати як звичайне текстове посилання. Відкриємо сторінку у браузері та натиснемо на посилання. Відкриється стандартне вікно програми електронної пошти.

Створення сторінки за існуючим шаблоном

Сторінка із шаблону

1. Виберіть «Файл» > «Створити».

2. У діалоговому вікні «Створити документ» виберіть категорію «Сторінка шаблону».

3. У стовпці "Веб-сайт" виберіть сайт Dreamweaver, який містить необхідний шаблон, а потім виберіть шаблон зі списку праворуч.

4. Зніміть прапорець «Оновлювати сторінку під час зміни шаблону», якщо не бажаєте оновлювати сторінку. цю сторінкущоразу, коли вносите зміни до базового шаблону.

5. Натисніть кнопку «Параметри», щоб встановити параметри документа за замовчуванням, наприклад тип документа, кодування та розширення файлу.

6. Натисніть «Отримати додатковий вміст...», щоб відкрити Dreamweaver Exchange, де можна отримати більше вмісту для оформлення сторінки.

7. Натисніть кнопку «Створити» та збережіть документ («Файл» > «Зберегти»).

Створення шаблонного документа з панелі Активи («Ресурси»)

1. Відкрийте панель Активи («Ресурси») (меню «Вікно» > «Ресурси»), якщо вона ще не відкрита.
2. На панелі Активи («Ресурси») клацніть значок «Шаблони» ліворуч, щоб переглянути список шаблонів у поточному сайті.
Якщо шаблон, який потрібно застосувати, щойно було створено, може знадобитися натиснути кнопку «Оновити», щоб побачити його.
3. Клацніть правою кнопкою миші (Windows) за шаблоном, який потрібно застосувати, або клацніть по ньому, натиснувши клавішу Control (Macintosh), а потім виберіть «Створити із шаблону».
Документ відкриється в області «Вікно документа».
4. Збережіть документ.

Сторінка зі зразка

До складу Dreamweaver включено кілька розроблених професіоналами CSS-файлів та початкових сторінок для мобільних додатків. Можна використовувати файли зразка як відправну точку для розробки сторінок свого сайту. Під час створення документа на основі файлу зразка Dreamweaver створює копію файлу.

Можна попередньо переглянути файл зразка та прочитати короткий опис елементів оформлення сторінки у діалоговому вікні «Створити документ». При використанні таблиць стилів CSSможна скопіювати попередньо розроблену таблицю стилів та застосувати її до своїх документів.

1. Виберіть «Файл» > «Створити».

2. У діалоговому вікні «Створити документ» виберіть категорію «Сторінка зі зразка».

3. У стовпці "Зразок папки" виберіть "Таблиця стилів CSS" або "Початкові сторінки Mobile", а потім виберіть зразок у списку праворуч.
4. Натисніть кнопку «Створити».

Новий документ відкриється в області «Вікно документа» (режими перегляду «Код» та «Дизайн»). При виборі пункту "Таблиця стилів CSS" таблиця стилів відкриється у поданні "Код".

6. Коли з'явиться діалогове вікно «Копіювати залежні файли», установіть параметри та натисніть кнопку «Копіювати», щоб скопіювати ресурси до вибраного каталогу.

Можна вибрати власне розташування залежних файлів або використовувати за промовчанням, згенероване Dreamweaver (на основі імені джерела файлу зразка).

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

Для початку почніть пошуки якісного шаблону в інтернеті. Знайшовши один з варіантів (як правило, архів з файлами), відкрийте його і переконайтеся, що в ньому є необхідні папки та файли, такі як images, index.html, defaukt.css і т.д. Якщо даних фалів немає в архіві, можете відразу ж починати пошуки іншого шаблону.

Інструкція встановлення шаблону

Якщо всі необхідні файли є, то скористайтесь наступною інструкцією.

1. Архів необхідно розархівувати в папку Templates, яку необхідно створити в директорії вашого сайту. це може бути причиною неякісного відображення деяких елементів.

2. Тепер відкрийте Dreamweaverі натисніть клавіші Ctrl+N або виберіть «Файл» > «Новий». У вікні необхідно перейти на вкладку «Шаблони» і вибрати назву свого сайту в лівій колонці.

Після цього в лівій колонці з'явиться назва шаблону, який ви щойно додали до папки Templates:

У правій частині, яку ми виділили зеленим кольором, можна спостерігати як виглядатиме шаблон, що встановлюється. Щоб створити сторінку з цим шаблоном, натисніть кнопку «Create».

3. Після цього з'явиться сторінка з кодом, де ви зможете змінювати деякі параметри сторінки:

Як показує практика, сторінки з готовими шаблонами часто є засміченими, тому є сенс уважно ознайомитися з кодом і видалити непотрібні частини.

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

Вам також буде цікаво:
—
—
—

Шаблони 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 запитає, чи не хочете ви оновити сторінки, створені на основі шаблону. Він також вкаже, які файли.

Як тільки ви натисніть «Оновити», всі файли, створені на основі цього шаблону, будуть оновлені. Вам тільки залишається зберегти їх та завантажити на веб-сервер.