Adobe Dreamweaver: всі плюси (Частина 1)

Adobe DreamWeaver (а до 2008 року – Macromedia DreamWeaver) є одним з флагманів компанії Adobe, що об’єднує й інші програми від Adobe. Наприклад, спочатку дизайнери створюють дизайн майбутнього сайту в програмі Photoshop або Fireworks, потім працюють з картинкою, готуючи її до верстки, і далі формують безпосередньо HTML-код шаблону у DreamWeaver. Те ж саме стосується і флеш-роликів, які після розробки в Adobe Flash потрапляють в DreamWeaver.

Основна функціональність програми зосереджена на створенні HTML і CSS коду, а також роботі з файлами сайту. Візуальний інтерфейс програми дозволяє працювати з цими речами швидко і інтуїтивно зрозуміло. Ви можете наочно бачити результат вашого коду, проте відображається в програмі результат не завжди відповідає дійсності. А якщо ж уважно і точно писати код, то прихильники написання коду в блокноті можуть сказати, що по суті код можна якісно писати і в будь-який інший програмі, навіщо для ЦЬОГО Дрімвейвер використовувати? Чи потрібно в такому разі все різноманіття його інструментів? Чи потрібен за такою величезною ціною (близько 800 доларів за версію CS5) просто редактор коду і файловий менеджер?

Остання версія HTML-редактора Adobe DreamWeaver CS 5, що відноситься до категорії WYSIWYG-редакторів, має дуже багато переваг: зручний інтерфейс, настроювання функцій, підтримка великих проектів і ShockWave-технологій, можливість закачування файлів через FTP, підтримка SSI і багато чого іншого. Для роботи в цій програмі не потрібно досконально знати HTML (у цьому і полягає перевага технології WYSIWYG — що бачу, те й одержую).

Проте DreamWeaver на кілька кроків випереджає інші редактори, що використовують технологію WYSIWYG, у першу чергу завдяки тому, що генерує «чистий» HTML-код. DreamWeaver дозволяє позбутися однотипної роботи при створенні сторінок (наприклад, верстка тексту) за допомогою використання опції «Запис послідовності команд» (записується послідовність вироблених вами команд, після натискаєте, наприклад, CTRL+P, DreamWeaver відтворює їх усі у тій самій послідовності).

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

Підсвічування коду

Ця функція допоможе вам швидко просканувати код, а також знайти можливі помилки. Кожен тип коду має різне підсвічування, що дозволить вам відрізнити HTML від CSS, а PHP від JavaScript. Це особливо зручно, коли ваша веб-сторінка є поєднанням HTML і PHP або ASP. Ну а для початківців підсвічування коду допомагає краще зрозуміти кожен його елемент, а також допомагає виявити можливі помилки.

Автопідстановка коду

Ще одна надзвичайно корисна функція, яка дозволяє суттєво зекономити ваш час – це автоматичне дописування коду. Коли ви починаєте писати HTML-теги, перед вами відкривається список можливих варіантів на основі введених перших букв. Вам залишається лише вибрати підходящий варіант. Причому це зручно не тільки для написання самих тегів, але і для їх атрибутів.

Візьмемо, наприклад, щоб додати зображення. Як правило, ви повинні знати такі речі, як розташування зображення і його розміри. За допомогою DreamWeaver ви можете просто написати <IMG, а далі, як тільки ви натиснете пробіл і напишете літеру S, то вам миттєво виведуть атрибут SRC = “”. Далі просто двічі натисніть Еnter і перед вами відкриється вікно провідника, щоб ви могли вибрати відповідне зображення, а далі програма автоматично пропише його шлях, а також підставить атрибути ширини і висоти цієї картинки.

Ще один приклад цієї функції: наприклад, ви пишете CSS-код, і вам потрібно прописати властивість сімейства шрифтів “font-family:Arial, Helvetica, sans-serif;”, тобто ввести 41 символ. Або ж:

1. Пишемо fon і один раз натискаємо на стрілку Вниз клавіатурі;
2. Натискаємо Enter щоб вибрати опцію “font-family”;
3. вибираємо зі списку “Arial, Helvetica, sans-serif”;
4. додаємо крапку з комою, і все готово!
Набір 41 символу або виконання 4 простих кроків 🙂

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

Режим коду і режим дизайну

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

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

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

Перевірка коду

Також у DreamWeaver є відмінний інструмент для перевірки коду, який не дозволить жодному веб-дизайнеру писати код, який не відповідає стандартам. Помилки і проблеми сумісності можуть бути швидко знайдені саме під час написання коду, а не після того, як файли з кодом вже завантажені на сервер і перевірені онлайн-валідатором.

Панель властивостей і панель вставки зображень

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

Або ще приклад: якщо вам здається, що три абзаци будуть краще виглядати списком, то просто виділіть їх і натисніть відповідну іконку на панелі властивостей і … через мить ви побачите результат. І жодного коду 🙂

Більше про плюси та переваги Adobe Dreamweaver ви можете дізнатися у другій частині нашого огляду.

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки

Залишити відповідь