Встановити шаблон в Dreamweaver. Ілюстрований самовчитель Adobe Dreamweaver MX Створення сторінки за існуючим шаблоном
Добридень
Усі ми знаємо, що унікальний шаблондобре сприймається пошуковими системами.
Так от сьогодні я хочу поговорити про те, як написати свій власний шаблонза допомогою програми Adobe Dreamweaver
Ця програма платна, але якщо пошукати в гугле, то можна знайти і безкоштовну версію (не демо),
Adobe dreamweaver cs6 + кряк
Як тільки скачали та встановили, думаю можна починати
Перед тим як почати, створіть десь папку для сайту, туди будемо зберігати наші файли. І відразу створіть папку для картинок
У головному меню виберіть HTML
Перед вами з'явиться код документа.
Title- Потрібен для відображення назви сайту у браузері. Туди пишемо назву нашого майбутнього сайту. Наприклад я зараз створюватиму сайт на тематику туризм. І погодьтеся, ціни за клік в контекстних рекламахтуристичних тематик вище, ніж у тематик кіно або спорт. Звичайно з мого боку недобре робити сайт виключно для заробітку, але я постараюся зробити наполовину СДЛ. Сама статті не пишу, тільки замовлятиму. Але тематика ТУРИЗМ занадто велика, так що мій сайт буде про конкретну країну, тобто про Італії. Ось що в мене вийшло
Body- це тіло сайту, ставимо між ними курсор, натискаємо на " Вставка", у ньому на " ТаблиціТут можна вибирати кількість рядків і стовпців.
За допомогою таблиці ми розділимо наш сайт на розділи (шапка, меню, підвал, основа). У мене каркас буде простим. Якщо зможете відразу розібратися можете вибрати складний шлях. Ось як я розділила мій майбутній сайт:
Спочатку задала 2 стовпці та 3 рядки, а потім верхні 2 та нижні 2 осередки об'єднала. Для цього зайшла до " Дизайн" . Виділила за допомогою кнопка " ctrl" 2 комірки, і правою кнопкою миші " таблиці" => "об'єднати комірки"
Ось що у мене вийшло у розділі " Код"
width - ширина, поставив 1115, шапка теж буде такого розміру
height - висота, 100%, на весь екран
border - нехай поки що коштує 1, щоб ми бачили межі. Потім, коли все закінчите, можна змінити його на 0
Хочу виділити одну з переваг програми, коли починаєш писати якийсь тег вискакує підказка, і там можна відразу вибрати той тег і вставити.
Один раз збережіть як index.html. Мало що, світло вимкнуть помилку якусь видасть...
Тепер давайте почнемо наповнювати сайт контентом
Спершу ми маємо поставити шапку, у мене є заздалегідь підготовлена шапка
Для цього вставляємо курсор у перший осередок, далі " вставка"і" зображення" , Вибираємо там нашу шапку. І вона автоматично вставиться в код, ширину я змінюю на 1115px, а висоту залишаю як є.
Але при збільшенні масштабу сторінки таблиця йде в ліву частину і права залишається порожньою. Потрібно все вирівняти центром. Для цього виділяємо всю таблицю (у коді), дивимося вниз і бачимо там. вирівняти", вибираємо" по центру", ось і все. Дивимося скрін
Давайте відразу тут зробимо нашу клікабельну шапку, виділяємо текст, йдемо вниз і там є рядок " посиланнятуди пишемо index.html
З шапкою закінчили, можете ще додати, сфантазуйте
Тепер можна додавати категорії до блоку Меню: " вставка" - "гіперпосиланняЗмінюючи параметри під себе вставляємо кілька категорій. Наприклад у мене, Міста Італії- city.html, Італія огляд- italiya.html, Італійська кухня- italyanskaya-picca.html і т.д.
Якщо натиснути кнопку " властивості сторінки" , знизу розділу " дизайн", можна змінити параметри посилань (світло, розмір, відступи, шрифт і т.д.)
Основна частина: Заходимо в дизайн, наводимо курсор у блок "основна частина" та вставляємо свій текст, код до нього пропишеться автоматично. Тут також, якщо зайти в " властивості сторінки" , можна редагувати параметри
Тепер давайте створимо наші інші сторінки
Заходимо до " дизайн", там у блоці "Основна частина" видаляємо все, заповнюємо іншою інформацією. Наприклад Міста Італії, пишу сюди все, що пов'язано з тематикою Міста Італії, і зберігаю сторінку як city.html
Італія огляд, заповнюю та зберігаю як italiya.html
В кінці ось що в мене вийшло
Це звичайно майстерклас. І для досвідчених дизайнерів, яких багато на цьому форумі, мій урок здасться смішним, але для новачка, який і поняття не має у створенні сайту, цілком зійде.
Сподіваюся, мій урок послужить новачкам хорошим прикладом, і направить його робити більш серйозні проекти.
Якщо десь припустилася помилки не судіть суворо
Для того, щоб створити шаблони сторінок у 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» та в цій черговій статті розглянемо html шаблон на основі односторінника.
Створюватимемо наш html шаблон на основі вже готового зразка найпростішої «воронки» залучення потенційних дистриб'юторів (клієнтів) або передплатників.
Минулої статті "Як самому зробити свій сайт у програмі Dreamweaver" ми трохи вивчили програму "Dreamweaver" і створили через неї свою першу html сторінку.
Якщо говорити про те, чому я розпочав цю тему (тему створення односторінок або як ще кажуть, створення вирви залучення потенційних клієнтів, дистриб'юторів, то...
Справа в тому, що я неодноразово стикаюся з тим, як багато людей просто не розуміють очевидного. Саме того, що для того, щоб якісно створювати свої односторінкові сайти та налагодити систему залучення саме цим способом, навіть не бажано, а просто необхідно орієнтуватися в мовах верстки, вміти створювати найпростіший html шаблон і в разі потреби вносити до нього додаткові зміни.
Вам не треба знати все досконало. Потрібно для вирішення Ваших завдань. І, як Ви зрозуміли, одне із завдань - мати стійку навичку створення односторінника. Довести цю навичку до того, щоб Ви в будь-який момент змогли створити потрібний Вам html шаблон для будь-яких цілей.
Це може бути html шаблон для односторінника, для випуску розсилки, для сайту візитки, для сторінки, що продає, а також html шаблон для різних довільних вставок на Вашому сайті.
Щоб там не говорили, а технічна складова Вашого мережевого бізнесу чи бізнесу, що базується на продажу інфо-продуктів, дуже важлива.
Як я й казав у минулій статті, в даний час дуже багато сервісів для створення односторінкових сайтів, на яких пропонуються різні технології створення htmlшаблон.
Однак, по перше, такі послуги старіють і з часом вже не відповідають тим вимогам, які пред'являють сучасні технології.
По-другеЯкщо Ви слабко або взагалі не орієнтуєтесь в html верстці, то Вам буде дуже складно робити на таких сервісах зміни, потрібні саме Вам. Однак, якщо Ви кровно зацікавлені в тому, щоб Ваша конверсія залучення партнерів збільшувалася, Вам просто необхідні навички створення html шаблону.
По-третє, - у випадку, якщо Ви лише поверхово вивчите цю тему, страждатиме Ваша індивідуальність, Ваш стиль і, як наслідок - Ваш бренд.
Ось і виходить, що дуже багато «ведуться» на різні продукти, купують різні пакети і сервіси, копіюють те, що в багатьох випадках не працює, а потім дивуються, чому так мало віддачі від їхнього бізнесу.
Проблема ще й у тому, що навіть купивши подібні продукти, люди стикаються з різними підводним камінням», Опускають руки і, в результаті «закидають» все це, навіть не зробивши спроб з'ясувати справжні причини невдач.
Найцікавіше, що ці помилки та невдачі більшою мірою пов'язані саме з технічною складовою html верстки, вивченням каскадних таблиць стилів (css), а також розуміємо того, а що взагалі являють собою нутрощі створеної html сторінки.
Створюємо локальний сервер та готуємо ґрунт для створення першого html шаблону
Отже, починаємо створювати наш перший html шаблон у програмі "Dreamweaver".
Минулого відео та статті ми познайомилися з програмою «Dreamweaver», а також навчилися вставляти на нашому найпростішому html шаблоні кілька елементів (або, як ще кажуть, блоків).
Також ми створили спеціальну папку, де розмістили потрібні файли для роботи.
Зараз ми з Вами навчимося створювати складнішу річ – локальний сервер. Він потрібний для того, щоб ми без допомоги Інтернету могли створювати, налаштовувати та тестувати наші створені html шаблони.
Тобто. при створенні локального серверана жорсткому диску створюється віртуальний розділ (диск), який імітує Інтернет. Відповідно, коли ми встановимо локальний сервер на Ваш жорсткий диск, шлях до Вашої html сторінки буде виглядати так, якби Ви знаходилися в Інтернеті.
Як локальний сервер для створення нашого html шаблонуми будемо використовувати "Denwer".
Відразу хочу трохи зупинити Вас. Модифікацій "Denwer" багато і багато до нього є доповнень. Тому, якщо Ви перейдете на основний сайт для скачування, то хоча його і буде достатньо для наших завдань, проте я рекомендую Вам завантажити саме ту версію та складання, посилання на яке знаходиться нижче.
У цій збірці є дуже важливий компонент - «Zend Optimizer», який нам знадобиться надалі для налаштування дуже важливого скрипту для підвищення конверсії Ваших html-сторінок.
Для того, щоб встановити локальний сервер у себе на жорсткому диску, просто запустіть виконуваний файлта дотримуйтесь інструкцій, які з'являться на екрані.
Більш детально про встановлення та налаштування локального сервера, я розповів та показав у спеціально створеному відеоуроці.
Html шаблон на прикладі
Html шаблон, який ми розглядатимемо, є найпростішим, проте в даний час конверсія на такі односторінники ще досить висока. Тому Ви сміливо можете розміщувати такий вигляд htmlшаблон на своїх сайтах.
На що слід звернути увагу.
Я постарався зробити урок так, щоб це було не важко, т.к. розумію, що багато хто ще не зовсім добре знає мову html-верстки, а також каскадні таблиці стилів. Тому в уроці докладно пояснюється, за допомогою яких кнопок можна зробити свій односторінковий сайт без цих знань та вмінь.
Втім, дивіться урок, всі необхідні файли (якщо ще не скачали) і створюйте свій односторінок у візуальний редактор html "Dreamweaver".
P.S.В уроці невелика помилка, яку я помітив після створення відео. Пояснення дивіться у самому відео.
P.S.У наступній статті я підготую відео, в якому покажу «просунутий» спосіб створення односторінкового сайту на основі найпопулярніших html шаблонівРунету.
З повагою, Андрій Аверьков
#averkovteam #млм #мережевиймаркетинг #роботудому #рекрутинг #млмбізнес #соціальнімережі
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:vsh@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 - змінювана область із такою назвою вже існує). Ця змінна область включає вміст тега