Dreamweaver створення сторінки на основі шаблону. Встановити шаблон в Dreamweaver. Параметри графічного зображення
Ось ми закінчили наш третій Web-сайт. Все працює, всі сторінки нормально завантажуються та відображаються у Web-браузері. Здавалося б, немає приводів для занепокоєння.
Ні, але тільки до певного часу.
Уявімо таку ситуацію. Ми раптом вирішили додати до нашого сайту нову сторінку. Щоб це зробити, нам потрібно змінити смугу навігації у всіх сторінках, а для цього доведеться відкрити кожну з них у вікні документа, додати посилання та зберегти сторінку. Наш сайт невеликий за розміром і ми виконаємо цю роботу досить швидко. А якби він був великий?
Звичайно, ми можемо скористатися вбудованими засобами Dreamweaver. Наприклад, викликати діалогове вікно Find and Replace - Винятково потужний засіб. (Про можливості пошуку та заміни підрядків див. розділ 2.) Або запустити заміну гіперпосилань, викликавши пункт Change Link Sitewideменю Siteпанелі Site(Див. розділ 6). У багатьох випадках це допоможе нам швидко замінити цілі фрагменти вмісту сторінки або HTML-коду. Велику допомогу нам можуть надати активи та бібліотека елементів, також описані у розділі 6.
Але що робити, якщо хочемо зробити якісь значні зміни, наприклад, радикально змінити структуру таблиці розмітки? Пошук і заміна нам навряд чи допоможуть, а автоматична заміна гіперпосилань - тим більше. Навіть активи з бібліотекою нам у цьому випадку не допоможуть. Невже доведеться знову переробляти всі сторінки?!
Якби ви працювали не в середовищі Dreamweaver, мабуть, так би довелося робити. Але нам пощастило. Dreamweaver підтримує такий потужний засіб, як шаблони. Вони вже згадувалися у розділі 3. Нині їх розглянемо докладніше.
Шаблон- це своєрідний зразок, "скелет" Web-сторінки, що містить загальні всім сторінок елементи. Коли ви створюєте нову сторінку на основі шаблону, вам залишається лише вписати в потрібні місця унікальний вміст цієї сторінки та зберегти її. Згодом ви можете змінити шаблон – і Dreamweaver сам оновить усі створені на його основі сторінки.
У цьому сенсі шаблони схожі на елементи бібліотеки (див. розділ 6). Відмінність у тому, що шаблон – це заготівля для цілої сторінки, а бібліотека зберігає лише її окремі елементи. Однак розробники Dreamweaver вважають, що шаблони найближче за "спорідненістю" активів (див. розділ 6), і помістили список шаблонів в панелі Assets.
Спочатку шаблон змінити не можна, тобто коли ви створюєте на його основі сторінку, ви можете поміщати вміст тільки в спеціально відведених для цього місцях - областях, що змінюються. Елементи самого шаблону ви не можете редагувати, тому що вони є незмінними областями. Якщо ж ви хочете щось виправити, вам доведеться відкрити у вікні документа сам шаблон. Таким чином, Dreamweaver рятує вас від помилкової зміни шаблону та, відповідно, від спотворення створених на його основі Web-сторінок.
Можна сказати, що шаблони – це звичайні Web-сторінки. Під час редагування ви можете звертатися до шаблонів, як зі звичайними веб-сторінками, і використовувати ті ж інструменти. Також можна задавати параметри сторінки, яка буде створена на основі цього шаблону (назва, колір фону, тексту та гіперпосилань). Однак під час створення HTML-коду шаблонів Dreamweaverвикористовує безліч власних тегів і атрибутів, тому говорити, що шаблон - звичайна Web-сторінка, зовсім коректно.
Шаблони зберігаються у файлах з розширенням.dwt у папці Templates, що знаходиться в кореневій папці локальної копіїсайту. З цього випливає, що шаблони є невід'ємною частиною вашого сайту, як і бібліотека. Щоб використовувати будь-який шаблон в іншому сайті, ви повинні скопіювати його в той сайт, використовуючи стандартні засоби Dreamweaver (див. розділ 6). В одному сайті можуть використовуватись кілька шаблонів.
Шаблони найбільше стануть вам у нагоді, якщо ви створюєте сторінки на основі табличного дизайну. Такі сторінки практично завжди містять безліч елементів, що повторюються, оновлювати які вручну вкрай трудомістко. Але ви можете заготовити шаблони для "звичайних" сторінок. Це може знадобитися, наприклад, якщо ви створюєте сторінки з однаковим оформленням якогось великого фірмового сайту.
Разом із Dreamweaver поставляється досить багато шаблонів, створених професійними веб-дизайнерами. Ви можете використовувати ці шаблони для створення сторінок; як це робиться, було розглянуто в розділі 3. Спробуйте - можливо, ви знайдете щось, для вас потрібне.
Створення сторінки за існуючим шаблоном
Можна вибрати, попередньо переглянути та створити новий документза існуючим шаблоном. Ви можете використовувати діалогове вікно «Створити документ». щоб вибрати шаблон із будь-якого сайту, визначеного засобами Dreamweaver, або скористатися панеллю Активи (Ресурси). щоб створити новий документ за існуючим шаблоном.Сторінка із шаблону
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 (на основі імені джерела файлу зразка).
Для того, щоб створити шаблони сторінок у Dreamweaver, необхідно використовувати меню File -> Save As Template. Приступимо до їхнього створення. Для початку створимо шаблон головної сторінкимайбутнього сайту. Для цього виберемо закладку з відкритим у Dreamweaver файлом index.html. Потім у головному меню програми вибираємо File -> Save As Template.. (зберегти, як шаблон). В результаті цих дій з'явиться панель, показана на малюнку нижче.
Далі залишається тільки натиснути кнопку Save, з'явиться панель із питанням "Update Links?" на який потрібно відповісти "Yes". В результаті цього в папці з нашим проектом з'явиться ще одна папка "Templates", а в ній файл під назвою index.dwt. Це справжній шаблон головної сторінки сайту. Оскільки цей файл вже відкритий у робочому вікні Dreamweaver, то можна переглянути його код і з'ясувати чим він відрізняється від коду файлу index.html. Адже зовні відкриті в броузері ці файли нічим не відрізняються. То в чому фокус? А фокус у тому, що між тегами
із'явилися написи, виділені зеленим кольором.
Це так звані регіони, що редагуються. Що це означає? Це означає, що якщо сторінка сайту буде прив'язана до даному файлушаблону, то зміни на сторінці можна буде проводити тільки в цих місцях. Решту такої сторінки буде закрито для редагування.
Зараз весь сайт складається лише з однієї сторінки – index. Але ваш сайт буде складатися не з однієї сторінки, правильно? Тоді давайте займемося створенням інших сторінок.
Мається на увазі, що у вас в голові вже повинен бути образ зразкового змісту інших сторінок вашого сайту. Якщо його у вас ще немає, раджу вам цей образ у голові спорудити, тому що в подальшій роботівін дуже поможе.
Взагалі, у вас є назви розділів і підрозділів? Логічно почати з їхнього створення.
Спочатку відкрийте сторінку index у Dreamweaver. Тепер збережіть її, виконавши команду File (Файл) | Save as (Зберегти як)але вже під іншим ім'ям. Припустимо, друга сторінка у вас буде називатися states(Статті). Ось і збережіть сторінку index під назвою states.
Тепер у вас є дві ідентичні сторінки-близнюки, які мають різні імена. Але навіщо вам на сайті дві зовсім однакові сторінки, Нехай і під різними іменами? Думаю, зовсім ні до чого.
Тому, не закриваючи Dreamweaver, внесіть зміни до вашої нової сторінки, яку я за умовчанням називатиму states. Вставте всі картинки, напишіть текст… Втілюйте свої уявлення про цю сторінку. Звичайно, спочатку там може бути всього пара абзаців, але це ж лише перший варіант?
Готово? Тоді заходимо до Page Properties. Пам'ятаєте, як це робиться? Команда меню Modify (Змінити) Page Properties (Властивості сторінки)або поєднання клавіш
Поруч із написом 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. Він буде виглядати як звичайне текстове посилання. Відкриємо сторінку у браузері та натиснемо на посилання. Відкриється стандартне вікно програми електронної пошти.
Ми підготували сторінку до того, щоб зробити з неї шаблон у програмі Dreamweaver.
Трохи пригадаємо, що я вже писав про шаблон Dreamweaver. Коли ви, н-е кількість сторінок, до створеного шаблону, і потім змініть його, то всі сторінки змінюватися за шаблоном!
Єдине місце, яке не зміниться – це область, що редагується! Там може бути оригінальний текст, або будь-яка інша унікальна інформація.
Як зробити редаговану область у Dreamweaver.
Кількість редагованих областей необмежена і ви можете встановити такі області будь-де.
Ми ж створюватимемо редаговану область у районі, де у нас буде основний текст!
Відкриваємо підготовлену програму Dreamweaver.
Якщо у вас немає тексту, ви просто наведіть мишку туди, де у вас буде редагована область. Я маю текст, я його виділяю. Натискаємо , - далі – шаблони – нова область, що редагується.
У новому вікні назвіть редаговану область. Я не застосовую для цього тексту, а просто ставлю цифру. Для тексту на всіх сайтах цифра 2. А для заголовка роблю окрему редаговану область №1 – чому так? Не знаю, просто спочатку так повелося.
В принципі і заголовок і текст можна зробити в одній області, що редагується!
Дивимося, що в нас вийшло.
Тут ми бачимо, що в створеній нами області, що редагується, №2 є текст. Цю редаговану область можна побачити тільки в програмі, в браузері її не видно!
Коли ви зберігаєте перший шаблон, автоматично створюється папка для зберігання шаблонів, яка буде називатися - Templates.
Відкривається нове вікно, де:
Сайт – сайт
Існуючі шаблони – у мене вже є шаблони, а у вас, якщо це перший шаблон, вікно буде порожнє.
Опис завжди залишав його порожнім.
Як назвати шаблон у Dreamweaver?
Чому виникло таке питання? Якщо ви збираєтеся робити сайт на різні теми або у вас будуть різні під рубрики, то і шаблони, напевно, відрізнятимуться. У мене багато тем, тому багато шаблонів. Кожен шаблон відрізняється від свого побратима верхнім рядком, перший рядок на сторінці, що вказує, де ви знаходитесь.
Кожен із шаблонів повинен якось називатися. Назва шаблону відображатиметься у коді. Як ця назва відображатиметься на оптимізації вашої сторінки – важко сказати, але мені здається, що якщо називатимемо шаблон відповідно до теми, яку ви збираєтеся розробляти, то це буде краще, ніж назвати шаблон номером або безликим словом.
Розглянемо приклад, якщо ви зараз натиснете клавіші ctrl + U, то побачите код.
Це другий рядок, і ми бачимо, що наш шаблон називається - "Все про програму Dreamweaver.dwt"
