10 полезни Dreamweaver съвети и трикове за начинаещи

Потребителят на Dreamweaver определено ще си помисли какъв е електростанцията. Снабден с много функции, опции и един от най-добре познатите IDE (Интегрирана среда за развитие) на днешния пазар. Той може и да не отговаря на критериите, които някои разработчици изискват, но Dreamweaver несъмнено осигурява прилична гама от инструменти за разработка, сътрудничество и кодиране. Тези опции и инструменти са скрити под слоеве на по-малко интуитивни менюта, поради което предоставяме уроци в днешната публикация.

Ще ви покажем някои от най-мощните функции на Dreamweaver, за да подпомогнете бързото ви достъп до тях, както и много други полезни трикове, които ще ви смажат времето за развитие и ще подобрят значително качеството на кода. Пълен списък след скок.

1. Динамичен изглед с “На живо”

Вече знаем, че DW предлага статичен изглед на нашите отворени файлове, но какво става "динамични изгледи" на приложение като WordPress?

Първо, трябва казвам DW какви настройки да използвате, за да представите нашите"динамични изгледи" правилно. За да направите това, изберете Настройки на HTTP заявки от Изглед> Опции за преглед на живо и след това въведете GET или POST трябва да видите правилно вашето приложение.

След това с преминаване към На живо в DW, той замества стария Дизайн панел с жив, пиксел-перфектен WebKit рендеринг на вашата страница; пълни с живи Javascript, DOM манипулации, заявки за база данни, код от страна на сървъра и визуализирани CSS, а не икони на контейнери, които виждате в Дизайн.

2. "Навигатор за кодове" е Firebug на DW

Като стъпка напред е всичко Навигатор за код и когато в. \ t На живо прозорец, ALT-щракване (Command-Option-кликване за Mac) навсякъде в прозореца, мигновено представя кода, който визуализира този елемент. Подобно на това, което може да видите в Firefox / Firebug.

3. Замразяване на JavaScript

Поради динамичния характер на Ajax, много пъти трябва да си взаимодействаме със страница, на която някои елементи не се визуализират или са достъпни при зареждане на първа страница. Това са елементи, които се инжектират в страницата известно време след зареждането на страницата. Ето един пример:

Може да искате да промените стила на върха на инструмента, който се изпълнява изцяло в JavaScript. Преди днес ще трябва систематично да търсите пътя си през скриптовете си, за да намерите това, което е било създадено и къде.

Вместо това опитайте следното:

Представете страницата си в На живо, след това удари F6 да блокирате JavaScript по всяко време, което ви позволява да насочвате и анализирате кода, свързан с която и да е динамична позиция в страницата.

4. Следващият най-добър приятел на Live View - "Live Code"

Когато използвате На живо, можете също да включите Live Code. Live Code ще актуализира кода ви по време на придвижване, кликнете и взаимодействате с елементи и елементи в Прозорец Live View!

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

Dreamweaver идва с интелигентно и пълно завършване на HTML и CSS кода, но какво става с Javascripts? Ако код jQuery или Prototype в Dreamweaver, тогава трябва да знаете, че има API разширения, които осигуряват Javascript код завършване. Това намалява необходимостта от писане и може да бъде доста удобно за бързи кодери.

Кликнете тук, за да прочетете повече или да изтеглите:

• jQuery API разширение за Dreamweaver
• Прототипно разширение на API за Dreamweaver

6. Разкрасяване на кодове на самолета

Дали кодовата ви страница изглежда като неорганизирани, разхвърляни линии на код? Използвай Прилагане на форматирането на източника да го преформатирате точно според вашите предпочитания. За да ги почистите бързо, щракнете върху Форматиране на изходния код икона в долната част на Лента за кодиране (Редактиране> Ленти с инструменти> Кодиране) и изберете Настройки за формат на код , за да зададете предпочитаното форматиране.

Можете също да получите достъп до опцията за форматиране от Команди> Прилагане на форматирането на източника или само да го приложите към избран блок код, като изберете Приложете Форматиране на Източник към Избор опция.

7. Вземете притурка

Просто кликнете върху Разширете иконата на Dreamweaver (изглежда като предавка) в лентата за приложения и изберете Потърсете Web Widgets. Това ще ви отведе до Adobe Exchange, където ще намерите допълнителни приспособления от доставчици като Yahoo !, JQuery и много други..

8. Subversion & Dreamweaver

И да, Dreamweaver поддържа Subversion (SVN). За разработчици, които използват SVN, за да поддържат контрол над своя проект, това може да е добра новина. Dreamweaver разработчик Андрю Voltmer обсъждат как можете да използвате Subversions с Dreamweaver.

9. Не повече излишни стилове

Много хора използват Dreamweaver като начин за визуално обновяване на съдържанието, като текстов редактор. Преди Dreamweaver CS4, това може да доведе до излишни CSS правила като .Клас1, .Class2, и така нататък. В Dreamweaver CS4 просто превключете Инспектор по собственост да се HTML режим (щракнете върху иконата на HTML вляво на инспектора) и ще се сбогувате с цялата тази излишна CSS, като вмъкнете само подходящ HTML код.

10. Улесняване на валидността на формуляра

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

Бонус: още 3

11. Лесен достъп до свързани файлове

Когато отворите HTML или PHP файл, сега ще видите ред от зависими имена на файлове, като CSS, Javascript и дори включени файлове за PHP, в горната част на прозореца на документа. Можете лесно да превключите към тези файлове, да направите промени и да ги запазите, без дори да ги отваряте. Когато щракнете върху който и да е файл в лентата Сродни файлове, ще видите неговия източник в изглед Код и родителската страница в изгледа Дизайн. Или използвайте Code Navigator за бърз достъп до изходния код на CSS, който засяга текущия избор.

12. Проверете съвместимостта на браузърите

Отворете документа, който искате да проверите за съвместимост; от същата лента на менюто, до които са достъпни изгледи Код / Разделяне / Дизайн, погледнете най-вдясно за „Проверете страницатабутон.

Кликвайки върху него, ще се покаже падащото меню, изберете „Проверете съвместимостта на браузъра". Най- Прозорец за резултати за съвместимост на браузъра ще се покаже в долната част на прозореца с всички проблеми, които трябва да адресирате.

Забележка: Това НЕ ще проверява новите версии на IE на Mac! За да изберете кои браузъри да се използват за тестване, изберете Проверете страницата > Настройки от менюто.

13. Прегледайте PHP страниците

Dreamweaver ви позволява да стартирате и преглеждате PHP кодовете в софтуера. Ето как да го настроите.

Приготвяме се да започнем

1. Първо изберете място -> Нов сайт от горната навигация.
2. Ще видите и двете Основен и Разширено определение на сайта раздели за опции. Нека продължим, като изберете Раздел Разширено определение на сайта.
3. Въведете името на папката за сайта в съответното поле (за този пример ще използваме „myphp“ като име на папката).
4. Създайте друга папка с име "images", като въведете името й в полето 'Default Images Folder'.
5. Под Местна информация, въведете следните стойности в полетата:
   • Име на сайта: името на сайта. За да се използва само в Dreamweaver
   • Местна основна папка: Това е името на сайта, в който ще работите. Не забравяйте да наименувате сайтовете по начин, който свежда до минимум конфликтите или объркващите имена.
   • Стандартна папка Изображения: Това е по избор, но е препоръчително да го създадете сега, тъй като повечето сайтове ще използват изображения до известна степен. Тук DW ще „погледне“ да вмъкне изображения във вашите документи по време на фазата на кодиране.
   • Връзки, свързани с: Това определя как ще се обработва връзката на документи в Dreamweaver. Можете да изберете Документ или Корен. Разликите между двете са:
     • Document Relative - ще вмъкне път, относим към файла, с който работите, и елемента, с който е свързан.
     • Root Relative - Използва / което причинява свързаност на документа / файла във връзка с папката ROOT.
     • Друга алтернатива е да добавите някаква конфигурация към конфигурационните файлове на сървъра. Като по-усъвършенствана задача, ние просто ще се придържаме към използването на Document-relative за сега.
   • HTTP адрес: въведете главната папка на сайта за вашия проект
   • Връзки, чувствителни към регистъра: Dreamweaver ще провери дали всеки файл в проекта може да има чувствителен към регистъра въпрос, когато качвате на сървъра. Известия ще се показват, когато използвате: Site -> Check Links Sitewide. Можете да я оставите проверен, ако искате. Аз лично не го оставям да проверявам, тъй като винаги наименувам файловете с малки букви. Не се препоръчва главна буква.
   • скривалище: Маркирайте Enable cache.
6. В Отдалечена информация страница, или настройте FTP или друг достъп до отдалечен сървър или оставете Access to None.
7. В Сървър за тестване изберете опцията, която е свързана с типа на файла / системата, която ще тествате.
8. Контрол на версиите няма да се използва за този пример, така че можете да го оставите празно, освен ако не сте запознати с него.
9. Прикриване ви позволява да поставите .psd, .fla и други изходни файлове в папката на сайтовете си и DW ще ги пренебрегне при качването / актуализирането на сайта ви.
10. Бележки за дизайн са идеални за екип за уеб дизайн, тъй като запазва бележка за промените, направени във файловете. Проверено е по подразбиране и е добре за нас да използваме по този начин.
11. оставям Колона за изглед на файл, Принос, и Templates по подразбиране.
12. Най- пъргав Страницата просто сочи към папката Spry assets, която автоматично се включва в Dreamweaver. Няма нужда да променяте това. След като приключи всяка настройка, кликнете върху Добре.

Преглед на PHP в Dreamweaver

Сега отворете PHP файл и направете необходимите промени в него. За да видите този файл просто в Dreamweaver натиснете F12 и резултатите ще се покажат в браузъра ви по подразбиране. Можете да промените в кой браузър се използва редактиране -> Предпочитания -> Преглед в браузъра. Това позволява по-бързо време за редактиране на визуализацията, премахва необходимостта от въвеждане на дълги URL адреси в лентата на браузъра или използването на друг сървърен софтуер за изобразяване на PHP файловете, като всички спестяват време!

Това е всичко. Happy Dreamweaver'ing :-)

Бележка на редактора: Тази публикация е написана от Джеси Матлок за Hongkiat.com. През последните 6 години Джеси се потапя в дизайна на потребителския интерфейс, разработването на приложения и уеб тенденциите. Той е основател и водещ дизайнер на малък, макар и много талантлив екип, който се фокусира върху разработването на приложения по поръчка.