10 Užitečné tipy a triky pro začátečníky

Uživatel aplikace Dreamweaver bude určitě počítat s tím, co je to powerhouse. Baleno s množstvím funkcí, možností a debatně jedním z nejznámějších IDE (Integrated Development Environment) na dnešním trhu. Nemusí splňovat kritéria, která někteří vývojáři požadovali, ale Dreamweaver nepochybně poskytuje slušnou řadu vývojových, spolupracujících a kódovacích nástrojů. Tyto možnosti a nástroje jsou ukryty pod vrstvami poněkud méně intuitivních menu, což je důvod, proč poskytujeme konzultace v dnešním příspěvku.

Ukážeme vám některé z nejvýkonnějších funkcí aplikace Dreamweaver, které vám pomohou s rychlým přístupem k nim, spolu s mnoha dalšími užitečnými triky, které vás budou mazat časem vývoje a výrazně zlepší kvalitu kódu. Plný seznam po skoku.

1. Dynamické zobrazení pomocí “Živé zobrazení”

Již víme, že DW nabízí statické zobrazení našich otevřených souborů, ale co "dynamická zobrazení" aplikace, jako je WordPress?

Za prvé, musíme sdělit DW jaká nastavení použít k prezentaci našich"dynamická zobrazení" správně. Chcete-li to provést, vyberte možnost Nastavení požadavku HTTP od Zobrazit> Možnosti živého náhledu a poté zadejte DOSTAT nebo POŠTA parametry, které potřebujete pro správné zobrazení aplikace.

Poté přepnutím na Živé zobrazení v DW nahrazuje staré Návrhové zobrazení podokno s živým vykreslením stránky WebKit, které je perfektní pro pixely; doplňte živý Javascript, DOM manipulace, databázové dotazy, kód na straně serveru a renderované CSS, spíše než ikony zástupných symbolů, které vidíte v Návrhové zobrazení.

2. "Navigátor kódu" je DW's Firebug

Vezmeme-li to o krok dále, je vše o Navigátor kódu a kdy v Živé zobrazení Okno, ALT-klepnutí (Command-Option-kliknutím pro Mac) kdekoli v okně, okamžitě zobrazí kód, který tuto položku vykreslil. Podobně jako v aplikaci Firefox / Firebug.

3. Zmrazení JavaScriptu

Vzhledem k dynamické povaze Ajaxu, mnohokrát potřebujeme komunikovat se stránkou, kde určité položky nejsou vykresleny nebo dostupné na stránce první stránky. Jedná se o položky, které jsou vloženy do stránky nějaký čas po načtení stránky. Zde je příklad:

Možná budete chtít změnit styl tipu nástroje, který je implementován výhradně v JavaScriptu. Před dnešním dnem budete muset metodicky hledat cestu skrz skripty, abyste zjistili, co bylo vytvořeno a kde.

Místo toho zkuste toto:

Vykreslete stránku ve formátu Živé zobrazení, pak hit F6 Chcete-li kdykoli zmrazit JavaScript, můžete cílit a rozdělit kód týkající se jakékoli dynamické položky na stránce.

4. Příští nejlepší přítel Live Viewu - "Live Code"

Při použití Živé zobrazení, můžete také zapnout Živý kód. Živý kód bude aktualizovat svůj kód, jak budete přecházet, kliknout a pracovat s prvky a položkami v Okno živého náhledu!

5. Automatické dokončení JavaScriptu

Dreamweaver je dodáván s inteligentním a úplným dokončením kódu HTML a CSS, ale co Javascripts? Pokud v programu Dreamweaver zadáte kód jQuery nebo Prototype, měli byste vědět, že existují rozšíření API, která poskytují doplnění kódu Javascript. Snižuje potřebu psaní a může se hodit pro rychlé kodéry.

Chcete-li se dozvědět více, klikněte zde:

• Rozšíření jQuery API pro Dreamweaver
• Rozšíření Prototype API pro Dreamweaver

6. Zkrášlení kódů na letadle

Vypadá vaše kódová stránka jako neuspořádaná, chaotická linie kódu? Použijte Použít formátování zdroje a přeformátujte je přesně podle svých preferencí. Chcete-li je rychle vyčistit, klepněte na tlačítko Formát zdrojového kódu ikona v dolní části Panel nástrojů Kódování (Upravit> Panely nástrojů> Kódování) a vyberte Nastavení formátu kódu nastavení preferovaného formátování.

Můžete také přistupovat k možnosti formátování z Příkazy> Použít formátování zdroje nebo jej použít pouze na vybraný blok kódu výběrem Použít formátování zdroje na výběr volba.

7. Získejte widgety

Stačí kliknout na tlačítko Rozšíření ikony aplikace Dreamweaver (vypadá to jako převodovka) ve vašem panelu aplikací a vyberte Vyhledejte webové widgety. Tím se dostanete na Adobe Exchange, kde můžete najít další widgety od dodavatelů, jako je Yahoo !, JQuery a mnoho dalších.

8. Subversion & Dreamweaver

A ano, Dreamweaver podporuje Subversion (SVN). Pro vývojáře, kteří používají SVN k udržení kontroly nad svým projektem, by to mohla být dobrá zpráva. Dreamweaver vývojář Andrew Voltmer diskutovat jak lze pomocí Dreamweaveru použít Subverze.

9. Žádné další redundantní styly

Mnoho lidí používá Dreamweaver jako způsob, jak aktualizovat obsah vizuálně, jako textový editor. Před aplikací Dreamweaver CS4 by to mohlo mít za následek redundantní pravidla CSS .třídy1, .třída2, a tak dále. V aplikaci Dreamweaver CS4 stačí přepnout Inspektor vlastností na HTML režim (klikněte na ikonu HTML na levé straně inspektora) a rozloučíme se s veškerým nadbytečným CSS a vložíme pouze odpovídající značení HTML.

10. Form Validation usnadnila

Chcete ověřit pole formuláře, ale obáváte se, že budete muset obnovit od nuly? Bez obav. Jednoduše vyberte existující prvek formuláře, například textové pole, a použijte příkaz a Widget pro ověření Spry od Vložit> Nabídka Spry. Pak kontrolujte požadavky na validaci, jako jsou minimální nebo maximální znaky, přímo z Inspektor vlastností.

Bonus: 3 více

11. Snadný přístup k souvisejícím souborům

Když otevřete soubor HTML nebo PHP, uvidíte v horní části okna dokumentu řádek závislých názvů souborů, například CSS, Javascript a dokonce i soubory pro PHP. Na tyto soubory můžete snadno přepínat, provádět změny a ukládat je, aniž byste je dokonce otevřeli. Po klepnutí na libovolný soubor v panelu Související soubory uvidíte jeho zdroj v zobrazení kódu a nadřazenou stránku v návrhovém zobrazení. Nebo použijte program Code Navigator pro rychlý přístup ke zdrojovému kódu CSS, který ovlivňuje váš aktuální výběr.

12. Zkontrolujte kompatibilitu prohlížečů

Otevřete dokument, který chcete zkontrolovat pro kompatibilitu; ze stejného panelu nabídek, kde jsou zobrazeny pohledy Kód / Rozdělit / Návrh, podívejte se na možnostZkontrolujte stránkutlačítko.

Kliknutím na něj rozbalíte rozbalovací nabídku, vyberte možnostZkontrolujte kompatibilitu prohlížeče". Okno s výsledky kompatibility prohlížeče se zobrazí v dolní části okna s případnými problémy, které je třeba řešit.

Poznámka: To nebude kontrolovat nové verze IE na Mac! Chcete-li vybrat, které prohlížeče budou použity pro testování, vyberte možnost Zkontrolujte stránku > Nastavení z nabídky.

13. Náhled PHP stránek

Dreamweaver umožňuje spouštět a prohlížet PHP kódy v rámci softwaru. Zde je návod, jak to nastavit.

Začínáme

1. Nejdříve vyberte možnost Místo -> Nové stránky z horní navigace.
2. Uvidíte oba Základní a Pokročilá definice webu záložek. Pokračujme výběrem Karta Pokročilé definování webu.
3. Do příslušného pole zadejte název složky webu (v tomto příkladu použijeme jako název složky "myphp").
4. Vytvořte jinou složku s názvem "obrázky" zadáním jejího názvu do pole "Výchozí složky obrázků".
5. Pod Místní informace, do polí zadejte následující hodnoty:
   • Jméno stránky: název webu. Používá se pouze v aplikaci Dreamweaver
   • Místní kořenová složka: Toto je název webu, ve kterém budete pracovat. Nezapomeňte pojmenovat stránky způsobem, který minimalizuje konflikty nebo matoucí názvy.
   • Výchozí složka Obrázky: Toto je volitelné, ale doporučuje se jej vytvořit, protože většina stránek bude do určité míry používat obrázky. Toto je místo, kde DW bude vypadat, aby vkládal obrázky do vašich dokumentů během fáze kódování.
   • Odkazy Relativní k: Definuje, jak bude s Dreamweaverem pracovat. Můžete vybrat možnost Dokument nebo Kořen. Rozdíly mezi těmito dvěma způsoby jsou:
     • Relativní dokument - Vloží cestu relativní k souboru, který pracujete, a položce, na kterou je odkazováno.
     • Relativní kořen - Použije / způsobí, že bude dokument / soubor propojen ve vztahu ke složce ROOT.
     • Další alternativou je přidání nějaké konfigurace do konfiguračních souborů serveru. Vzhledem k tomu, že se jedná o pokročilejší úkol, budeme se nyní držet používání dokumentu relativního.
   • Adresa HTTP: zadejte kořenovou složku webu pro váš projekt
   • Odkazy citlivé na případy: Aplikace Dreamweaver zkontroluje, zda žádný soubor v projektu nemůže mít při odesílání na server problém s rozlišením velikosti písmen. Oznámení budou zobrazena při použití: Site -> Check Links Sitewide. Pokud chcete, můžete ji nechat zaškrtnutou. Já osobně nenechávám to kontrolované, protože vždy pojmenovávám soubory malými písmeny. Velké písmeno se nedoporučuje.
   • Mezipaměti: Zaškrtněte políčko Povolit mezipaměť.
6. V Vzdálené informace stránku, buď nastavte FTP nebo jiný přístup ke vzdálenému serveru nebo ponechte přístup k None.
7. V Testovací server vyberte možnost, která se týká typu souboru / systému, který budete testovat.
8. Řízení verzí nebude použit pro tento příklad, takže jej můžete nechat prázdné, pokud s ním nebudete seznámeni.
9. Maskování umožňuje umístit soubory .psd, .fla a další zdrojové soubory do složky webů a služba DW je bude při nahrávání / aktualizaci stránek ignorovat.
10. Poznámky k provedení jsou ideální pro tým webového designu, protože si zachovává informace o změnách provedených v souborech. Je to standardně kontrolováno a je to pro nás vhodné.
11. Zanechat, opustit Sloupec zobrazení souboru, Přispět, a Šablony jako výchozí.
12. Čilý stránka jednoduše ukazuje na složku Spry, která je automaticky součástí aplikace Dreamweaver. Není třeba to měnit. Jakmile je každé nastavení dokončeno, klepněte na tlačítko OK.

Náhled PHP v Dreamweaveru

Nyní otevřete soubor PHP a proveďte potřebné změny. Chcete-li zobrazit tento soubor jednoduše v aplikaci Dreamweaver stiskněte klávesu F12 a výsledky se zobrazí ve výchozím prohlížeči. Můžete změnit, který prohlížeč se používá Upravit -> Předvolby -> Náhled v prohlížeči. To umožňuje rychlejší editaci na dobu náhledu, eliminuje potřebu zadávat dlouhé adresy URL do panelu prohlížeče nebo použít jiný serverový software k vykreslení souborů PHP, což šetří čas!

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

Poznámka editora: Tento příspěvek je napsán Jesse Matlock pro Hongkiat.com. Za posledních 6 let se Jesse ponořil do designu uživatelského rozhraní, vývoje aplikací a webových trendů. Je zakladatelem a vedoucím projektantem malého, i když velmi talentovaného vývojového týmu, který se zaměřuje na vývoj aplikací na míru.