10 Užitočné Dreamweaver Tipy a triky pre začiatočníkov

Používateľ Dreamweaver určite rozhodne, aký je výkon. Balené s tonami funkcií, možností a diskutabilne jedným z najznámejších IDE (Integrated Development Environment) na dnešnom trhu. Možno nespĺňa kritériá, ktoré niektorí vývojári požadovali, ale Dreamweaver nepochybne poskytuje slušnú škálu vývojových, spolupracujúcich a kódovacích nástrojov. Tieto možnosti a nástroje sú skryté pod vrstvami poľutujúcich menej intuitívnych ponúk, preto poskytujeme konzultácie v dnešnom príspevku.

Ukážeme vám niektoré z najsilnejších funkcií aplikácie Dreamweaver, ktoré vám pomôžu rýchlo pristupovať k nej, spolu s mnohými ďalšími užitočnými trikami, ktoré vám pomôžu výrazne skrátiť čas vývoja a zlepšiť kvalitu vášho kódu. Úplný zoznam po skoku.

1. Dynamické zobrazenie s “Live View”

Už vieme, že DW ponúka statický pohľad na naše otvorené súbory, ale čo "dynamické zobrazenia" aplikácie, ako je WordPress?

Po prvé, musíme to urobiť oznámiť DW, aké nastavenia použijeme na prezentáciu nášho"dynamické zobrazenia" správne. Ak to chcete urobiť, vyberte položku Nastavenia požiadavky HTTP z Zobraziť> Možnosti živého zobrazenia a potom zadajte GET alebo POST potrebujete správne zobraziť vašu aplikáciu.

Potom prepnutím na Live View v DW, nahrádza starý Zobrazenie návrhu tabuľka s živým pixelovým perfektným vykreslením stránky WebKit; doplniť živé Javascript, manipulácie DOM, databázové dotazy, kód na strane servera a vykreslený CSS, skôr ako ikony zástupných symbolov, ktoré vidíte v Zobrazenie návrhu.

2. "Navigátor kódu" je firebug spoločnosti DW

Pokračovať ďalej je všetko o Kódový navigátor a keď je v Live View okno ALT-kliknutím (Command-Option-kliknutím pre Mac) kdekoľvek v okne, okamžite predstavuje kód, ktorý vykreslil danú položku. Podobne ako v súčasnosti môžete vidieť vo Firefoxe / Firebugovi.

3. Freezing JavaScript

Vzhľadom na dynamickú povahu Ajaxu potrebujeme mnohokrát komunikovať so stránkou, kde nie sú niektoré položky vykreslené alebo dostupné pri prvom načítaní stránky. Sú to položky, ktoré sa do stránky vkladajú nejaký čas po načítaní stránky. Tu je príklad:

Možno budete chcieť zmeniť vzhľad nástroja, ktorý je implementovaný úplne v jazyku JavaScript. Predtým by ste museli metodicky vyhľadávať svoje skripty, aby ste zistili, čo sa vytvára a kde.

Namiesto toho skúste toto:

Vymažte svoju stránku v Live View, potom hit F6 Ak chcete kedykoľvek zrušiť JavaScript, ktorý vám umožní zacieliť a rozdeliť kód vzťahujúci sa na ľubovoľnú dynamickú položku na stránke.

4. Najlepší priateľ Live View - "Live Code"

Pri používaní Live View, môžete tiež zapnúť Živý kód. Živý kód bude aktualizovať váš kód, ako ste vznášať, kliknúť a komunikovať s prvkami a položkami v Okno Živé zobrazenie!

5. Automatické dokončenie JavaScript

Dreamweaver je dodávaný s inteligentným a kompletným dokončením kódu HTML a CSS, ale čo Javascripts? Ak kódujete v aplikácii Dreamweaver jQuery alebo Prototype, mali by ste vedieť, že existujú rozšírenia rozhrania API, ktoré zabezpečujú dokončenie kódu Javascript. Znižuje potrebu písania a môže byť príliš praktická pre rýchle programátory.

Kliknite tu pre viac informácií alebo stiahnite si:

• Rozšírenie rozhrania jQuery API pre aplikáciu Dreamweaver
• Rozšírenie prototypu rozhrania API pre aplikáciu Dreamweaver

6. Skrášliť kódy na lietačke

Zdá sa, že vaša kódová stránka nevyzerá ako neorganizovaná, chaotická čiara kódu? Použi Použiť formátovanie zdroja funkcie a preformátovať presne podľa vašich preferencií. Ak chcete rýchlo ich vyčistiť, kliknite na tlačidlo Formátovať zdrojový kód ikona v spodnej časti okna Panel nástrojov pre kódovanie (Upraviť> Panely s nástrojmi> Kódovanie) a vyberte položku Nastavenie formátu kódu ak chcete nastaviť preferované formátovanie.

Môžete tiež získať prístup k možnosti formátovania od Príkazy> Použiť formátovanie zdroja alebo ho aplikujte iba na vybratý blok kódu výberom Použiť formátovanie zdroja na výber voľba.

7. Získajte miniaplikáciu

Stačí kliknúť na Rozšírte ikonu programu Dreamweaver (vyzerá to ako ozubená súprava) na paneli aplikácií a vyberte Prehliadať webové Widgety. Takto sa dostanete na lokalitu Adobe Exchange, kde nájdete ďalšie miniaplikácie od dodávateľov, ako je Yahoo !, JQuery a mnoho ďalších.

8. Subversion & Dreamweaver

A áno, Dreamweaver nepodporuje Subversion (SVN). Pre vývojárov, ktorí používajú SVN na udržanie kontroly revízie svojho projektu, môže to byť dobrá správa. Vývojár Dreamweaver Andrew Voltmer diskutuje ako môžete používať Subversions v aplikácii Dreamweaver.

9. Žiadne viac redundantné štýly

Mnoho ľudí používa program Dreamweaver ako spôsob, ako vizuálne aktualizovať obsah, napríklad textový procesor. Pred Dreamweaver CS4 by to mohlo mať za následok redundantné pravidlá CSS .Class1, .class2, a tak ďalej. V aplikácii Dreamweaver CS4 stačí prepnúť Vlastník inšpektora na HTML (kliknite na ikonu HTML na ľavej strane inšpektora) a rozlúčite sa so všetkými redundantnými CSS, vkladaním iba príslušnej značky HTML.

10. Overenie formulára sa uľahčilo

Chcete potvrdiť svoje polia formulára, ale obávajte sa, že budete musieť znovu vytvoriť od začiatku? Žiaden strach. Jednoducho vyberte existujúci prvok formulára, napríklad textové pole a aplikujte a Spry Validation widget z Vložiť> ponuku Spry. Potom overte požiadavky na validáciu, ako sú minimálne alebo maximálne znaky priamo z Inšpektor nehnuteľností.

Bonus: 3 ďalšie

11. Prístup k súborom jednoducho

Keď otvoríte súbor HTML alebo PHP, uvidíte v hornej časti okna dokumentu riadok závislých názvov súborov, ako sú napríklad CSS, Javascript a dokonca aj súbory pre PHP. Môžete ľahko prepnúť na tieto súbory, vykonať zmeny a uložiť ich, to všetko bez toho, aby ste ich otvorili. Ak kliknete na ľubovoľný súbor v paneli Súvisiace súbory, zobrazí sa jeho zdroj v zobrazení Kód a nadradená stránka v zobrazení Návrh. Alebo použite kódový navigátor na rýchly prístup k zdrojovému kódu CSS, ktorý ovplyvňuje váš aktuálny výber.

12. Skontrolujte kompatibilitu prehliadačov

Otvorte dokument, ktorý chcete skontrolovať z hľadiska kompatibility. z toho istého panela s ponukami, ku ktorému máte prístup k zobrazeniam Kód / Rozdelenie / Návrh,Skontrolujte stránku'tlačidlo.

Kliknutím na ňu rozbaľte rozbaľovaciu ponuku a zvoľte možnosť "Skontrolujte kompatibilitu prehliadača'. Okno výsledkov kompatibility prehliadača zobrazí sa v dolnej časti okna všetky problémy, ktoré je potrebné riešiť.

Poznámka: Toto nebude kontrolovať nové verzie IE na počítači Mac! Ak chcete vybrať, ktoré prehliadače sa použijú na testovanie, vyberte položku Skontrolujte stránku > nastavenie z ponuky.

13. Náhľad PHP stránok

Program Dreamweaver vám umožňuje spustiť a prezrieť si PHP kódy v rámci softvéru. Tu je návod na nastavenie.

Začíname

1. Najprv vyberte položku site -> Nové stránky z hornej navigácie.
2. Uvidíte oba základné a Rozšírená definícia lokality karty možností. Poďme pokračovať výberom Pokročilá karta Definícia lokality.
3. Zadajte názov priečinka pre danú lokalitu do príslušného poľa (v tomto príklade používame ako názov priečinka "myphp"),.
4. Vytvorte iný priečinok s názvom "obrázky" zadaním jeho názvu do poľa "Predvolené priečinky obrázkov".
5. Pod Miestne informácie, zadajte nasledujúce hodnoty do polí:
   • Názov siete: názov stránky. Používa sa iba v aplikácii Dreamweaver
   • Miestny koreňový priečinok: Toto je názov stránky, v ktorej budete pracovať. Uistite sa, že pomenujete stránky takým spôsobom, aby ste minimalizovali konflikty alebo zameniteľné mená.
   • Zložka Predvolené obrázky: Toto je voliteľné, ale odporúčame ho vytvoriť teraz, pretože väčšina stránok do určitej miery použije obrázky. Práve v tomto prípade DW bude "vyzerať" vložením obrázkov do vašich dokumentov počas fázy kódovania.
   • Odkazy v súvislosti s: Toto definuje, ako sa bude pracovať s prepojením dokumentov v aplikácii Dreamweaver. Môžete vybrať buď dokument alebo koreň. Rozdiely medzi týmito dvoma sú:
     • Relatívny dokument - vloží cestu vzhľadom na súbor, ktorý práve pracujete a na ktorú je prepojená položka.
     • Koreňová relatívna - Použitie / ktorá spôsobuje prepojenie dokumentu / súboru vo vzťahu k priečinku ROOT.
     • Ďalšou alternatívou je pridať nejakú konfiguráciu do konfiguračných súborov servera. Keďže sme pokročilejšou úlohou, budeme naďalej používať relatívny dokument.
   • HTTP adresu: zadajte koreňový priečinok vášho projektu
   • Odkazy citlivé na prípady: Program Dreamweaver skontroluje, či akýkoľvek súbor v projekte môže mať pri odovzdávaní na server problém citlivý na veľkosť písmen. Upozornenia sa zobrazia, keď používate: Site -> Check Links Sitewide. Môžete ho nechať skontrolovať, ak chcete. Ja osobne ho nenechávajte skontrolovať, pretože vždy menám súbory s malými písmenami. Veľké písmeno sa neodporúča.
   • cache: Začiarknite políčko Povoliť vyrovnávaciu pamäť.
6. V Diaľkové informácie stránku nastavte svoj FTP alebo iný prístup na vzdialený server alebo nechajte prístup k žiadnemu.
7. V Testovací server vyberte možnosť, ktorá sa týka typu / systému súborov, ktoré budete testovať.
8. Kontrola verzie nebudú použité pre tento príklad, takže môžete nechať prázdne, pokiaľ to nie je oboznámené.
9. maskovanie umožňuje umiestniť .psd, .fla a iné zdrojové súbory do priečinka vašich stránok a spoločnosť DW ich nebude pri nahrávaní / aktualizácii vašej stránky.
10. Poznámky o dizajne sú ideálne pre tím webového dizajnu, pretože si ponecháva poznámku o zmenách v súboroch. Je to predvolene skontrolované a pre nás vhodné používať tento spôsob.
11. zanechať Stĺpec Zobrazenie súboru, prispieť, a šablóny ako predvolené.
12. čulý stránka jednoducho poukazuje na priečinok Spry, ktorý je automaticky súčasťou programu Dreamweaver. Nie je potrebné túto zmenu meniť. Po dokončení každého nastavenia kliknite na tlačidlo OK.

Ukážka PHP v aplikácii Dreamweaver

Teraz otvorte súbor PHP a vykonajte potrebné zmeny. Ak chcete tento súbor jednoducho zobraziť v aplikácii Dreamweaver stlačte kláves F12 a výsledky sa zobrazia vo vašom predvolenom prehliadači. Môžete zmeniť, ktorý prehliadač sa používa editovať -> Preferencie -> Ukážka v prehliadači. Umožňuje to rýchlejšiu úpravu času na prehliadanie, eliminuje potrebu zadávania dlhých adries URL do panela prehliadača alebo použitie iného serverového softvéru na vykresľovanie súborov PHP, ktoré všetky šetria čas!

To je všetko. Happy Dreamweaver'ing :-)

Poznámka redaktora: Tento príspevok je napísaný používateľom Jesse Matlock pre Hongkiat.com. Za posledných 6 rokov sa Jesse ponoril do dizajnu používateľského rozhrania, vývoja aplikácií a webových trendov. Je zakladateľom a dizajnovým vedením pre malý, hoci veľmi talentovaný vývojový tím, ktorý sa zameriava na vývoj aplikácií na mieru.