10 Корисні поради Dreamweaver & трюки для початківців

Користувач Dreamweaver, безумовно, вважатиме, що таке електростанція. Упакований тоннами функцій, опцій і дискусійно одним з найбільш відомих IDE (Інтегрованого середовища розробки) на сучасному ринку. Вона може не відповідати критеріям, які вимагали деякі розробники, однак Dreamweaver безсумнівно забезпечує пристойний діапазон засобів розробки, співпраці та кодування. Ці параметри та інструменти приховані під шарами жалюгідних, менш інтуїтивних меню, тому ми надаємо навчальні посібники в сьогоднішній публікації.

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

1. Динамічний перегляд з “Live View”

Ми вже знаємо, що DW пропонує статичний вигляд наших відкритих файлів, але що саме "динамічні перегляди" програми, наприклад, WordPress?

По-перше, нам потрібно Скажіть DW які налаштування використовувати для представлення нашого"динамічні перегляди" правильно. Для цього виберіть Параметри запиту HTTP від Перегляд> Параметри перегляду в реальному часі введіть меню GET або POST Параметри, необхідні для правильного перегляду програми.

Потім шляхом переходу на Live View в DW, він замінює старий Дизайн панель з живою, ідеальною версією WebKit на вашій сторінці; повні живі Javascript, маніпуляції DOM, запити бази даних, код на стороні сервера та надані CSS, а не іконки заповнювача, які ви бачите в Дизайн.

2. "Навігатор коду" - Firebug DW

Це ще один крок далі Навігатор коду і коли в Live View вікно, ALT-натискання (натискання Command-Option-клацання для Mac) в будь-якому місці вікна, миттєво представляє код, який надав цей елемент. Подібно до того, що ви бачите в Firefox / Firebug.

3. Заморожування JavaScript

Через динамічну природу Ajax багато разів нам потрібно взаємодіяти зі сторінкою, де певні елементи не відображаються або недоступні при завантаженні першої сторінки. Це елементи, які вводяться на сторінку через деякий час після завантаження сторінки. Ось приклад:

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

Замість цього спробуйте це:

Надішліть свою сторінку в Live View, потім удари F6 Заблокувати JavaScript у будь-який час, дозволяючи націлювати та розкривати код, який стосується будь-якого динамічного елемента на сторінці.

4. Наступний найкращий друг Live View - "Live Code"

При використанні Live View, Ви також можете увімкнути Live Code. Live Code оновить ваш код під час наведення, натискання та взаємодії з елементами та елементами у Вікно перегляду в реальному часі!

5. Автоматичне завершення роботи з JavaScript

Dreamweaver поставляється з інтелектуальним і повним завершенням коду HTML і CSS, але що про Javascripts? Якщо ви код jQuery або прототип в Dreamweaver, то ви повинні знати, є розширення API, які забезпечують завершення Javascript код. Це зменшує необхідність набору тексту і може бути дуже зручним для швидких кодерів.

Натисніть тут, щоб дізнатися більше або завантажити:

• Розширення для jQuery API для Dreamweaver
• Розширення прототипу API для Dreamweaver

6. Прикрасьте коди на льоту

Чи виглядає ваша кодова сторінка неорганізованими, безладними рядками коду? Використовувати Застосувати форматування джерела функція і переформатувати його саме відповідно до ваших уподобань. Щоб швидко очистити їх, натисніть кнопку Формат вихідного коду значок у нижній частині вікна Панель інструментів кодування (Редагувати> Панелі інструментів> Кодування) і виберіть Налаштування формату коду , щоб встановити бажане форматування.

Ви також можете отримати доступ до опції форматування з Команди> Застосувати форматування джерела або застосуйте його лише до блоку коду вибору, вибравши Застосування форматування джерела до вибору опції.

7. Отримати віджет

Просто натисніть кнопку Розширте піктограму Dreamweaver (виглядає як передача) на панелі програм і виберіть Перегляньте веб-віджети. Це призведе до переходу до Adobe Exchange, де можна знайти додаткові віджети від таких постачальників, як Yahoo !, JQuery та багато інших.

8. Subversion & Dreamweaver

І так, Dreamweaver підтримує Subversion (SVN). Для розробників, які використовують SVN для підтримки контролю над проектами, це може бути гарною новиною. Розробник Dreamweaver Ендрю Вольтмер обговорює як ви можете використовувати Subversions з Dreamweaver.

9. Не більше зайвих стилів

Багато людей використовують Dreamweaver як спосіб оновлювати вміст візуально, як текстовий процесор. Перед Dreamweaver CS4, це може призвести до надлишкових правил CSS .class1, .class2, і так далі. У Dreamweaver CS4 просто переключіть ваш Інспектор майна до HTML режим (клацніть значок HTML ліворуч від інспектора), і ви прощаєтеся з усім тим зайвим CSS, вставляючи лише відповідну розмітку HTML.

10. Перевірка форми спрощена

Хочете перевірити ваші поля форми, але стурбовані тим, що вам доведеться відновлювати їх з нуля? Не турбуйтеся. Просто виберіть існуючий елемент форми, наприклад текстове поле, і застосуйте a Віджети перевірки Spry від Вставити> Меню Сприт. Потім контролюйте вимоги перевірки, такі як мінімальна або максимальна кількість символів безпосередньо з Інспектор власності.

Бонус: ще 3

11. Доступ до доступних файлів легко

Коли ви відкриваєте файл HTML або PHP, ви побачите ряд залежних імен файлів, таких як CSS, Javascript і навіть включені файли для PHP, у верхній частині вікна документа. Ви можете легко переключитися на ці файли, внести зміни і зберегти їх, навіть не відкриваючи їх. Коли ви натискаєте будь-який файл у панелі пов'язаних файлів, ви побачите його джерело у перегляді коду та батьківську сторінку у вигляді перегляду. Або скористайтеся Code Navigator для швидкого доступу до вихідного коду CSS, який впливає на поточний вибір.

12. Перевірте сумісність браузерів

Відкрийте документ, який потрібно перевірити на сумісність; з тієї ж панелі меню, де доступні перегляди коду / розділення / дизайнПеревірте сторінку'.

Натиснувши її, розгорнеться спадний список, виберіть "Перевірте сумісність із браузером'. The Вікно результатів сумісності з браузером у нижній частині вікна з усіма проблемами, які потрібно вирішити.

Примітка: Це НЕ перевірятиме нові версії IE на Mac! Щоб вибрати, які браузери використовувати для тестування, виберіть Перевірте сторінку > Налаштування з меню.

13. Попередній перегляд сторінок PHP

Dreamweaver дозволяє запускати та переглядати коди PHP у програмному забезпеченні. Ось як це зробити.

Починаємо

1. Спочатку виберіть Сайт -> Новий сайт з верхньої навігації.
2. Ви побачите обидва Основний і Розширене визначення сайту вкладки опцій. Давайте перейдемо до вибору Вкладка Розширене визначення сайту.
3. Введіть назву папки для сайту у відповідному полі (для цього прикладу будемо використовувати "myphp" як ім'я папки).
4. Створіть іншу папку з назвою "images", ввівши її назву в поле "Default Images Folder".
5. Під Місцева інформація, введіть у поля такі значення:
   • Назва сайту: назва сайту. Для використання лише у Dreamweaver
   • Локальна коренева папка: Це ім'я сайту, на якому ви працюєте. Обов'язково називайте сайти таким чином, щоб мінімізувати конфлікти або змішувати імена.
   • Стандартна папка зображень: Це необов'язково, але рекомендується створити його зараз, оскільки більшість сайтів використовуватимуть зображення до певної міри. Саме тут DW буде «шукати», щоб вставити зображення у ваші документи під час фази кодування.
   • Посилання відносно: Це визначає, як буде оброблятися зв'язок документів у Dreamweaver. Можна вибрати Документ або Корінь. Відмінності між ними такі:
     • Document Relative - Вставить шлях відносно файлу, з яким ви працюєте, і пов'язаного з ним елемента.
     • Root Relative - використовує / який призводить до прив'язки документа / файлу до папки ROOT.
     • Іншою альтернативою є додавання деяких конфігурацій до файлів конфігурації сервера. Будучи більш просунутим завданням, ми просто дотримуватимемося відносно документа відносно на даний момент.
   • HTTP-адреса: введіть кореневу папку сайту для вашого проекту
   • Регіональні посилання: Dreamweaver перевірятиме, чи може будь-який файл у проекті мати важливе значення при завантаженні на сервер. Повідомлення відображатимуться при використанні: Site -> Check Links Sitewide. Ви можете залишити його перевіркою, якщо хочете. Я особисто не залишаю його перевіряти, оскільки я завжди називаю файли в нижньому регістрі. Велика літера не рекомендується.
   • Кеш: Перевірте Увімкнути кеш.
6. В Віддалена інформація сторінки, або налаштуйте ваш FTP або інший доступ до віддаленого сервера або залиште доступ до жодного.
7. В Сервер тестування на сторінці виберіть опцію, яка стосується типу файлу / системи, яку ви будете тестувати.
8. Контроль версій не буде використано для цього прикладу, тому ви можете залишити його пустим, якщо не знайомі з ним.
9. Маскування дозволяє розміщувати файли .psd, .fla та інші вихідні файли в папці веб-сайтів, і DW не враховуватиме їх під час завантаження / оновлення вашого сайту.
10. Примітки щодо дизайну ідеально підходять для команди веб-дизайнерів, оскільки вона зберігає примітку про зміни, внесені до файлів. Це за замовчуванням перевірено, і ми можемо використовувати цей спосіб.
11. Залишати Стовпець перегляду файлів, Внесок, і Шаблони за замовчуванням.
12. The Spry Сторінка просто вказує на папку Spry assets, яка автоматично входить до Dreamweaver. Немає необхідності змінювати це. Після завершення кожного налаштування натисніть в порядку.

Попередній перегляд PHP в Dreamweaver

Тепер відкрийте файл PHP і внесіть до нього необхідні зміни. Щоб просто переглянути цей файл у Dreamweaver натисніть F12 і результати відображатимуться у веб-переглядачі за умовчанням. Ви можете змінити, у якому браузері використовується Редагувати -> Налаштування -> Попередній перегляд у браузері. Це дає змогу швидше переглядати час редагування, виключає необхідність вводити довгі URL-адреси в панель веб-переглядача або використовувати інше серверне програмне забезпечення для відображення файлів PHP, які заощаджують час!

Це все. Happy Dreamweaver'ing :-)

Примітка редактора: Цей пост написано Джессі Матлок для Hongkiat.com. Протягом останніх 6 років Джессі занурюється в дизайн інтерфейсу, розробку додатків і веб-тенденції. Він є засновником і керівником дизайну для невеликої, хоча і дуже талановитої команди розробників, яка зосереджується на розробці спеціальних програм.