10 Hasznos Dreamweaver tippek és trükkök kezdőknek

A Dreamweaver felhasználó mindenképpen számít, hogy mi az erőmű. Tonna jellemzőkkel, opciókkal és vitathatatlanul az egyik legismertebb IDE (Integrált Fejlesztési Környezet) közé tartozik a mai piacon. Előfordulhat, hogy nem felel meg a kritériumoknak, amelyeket egyes fejlesztők követeltek meg, a Dreamweaver kétségtelenül tisztességes fejlesztési, együttműködési és kódolási eszközöket biztosít. Ezek a lehetőségek és eszközök a sajnálatos, kevésbé intuitív menük rétegei alatt rejtve vannak, ezért a mai poszton oktatóanyagokat nyújtunk.

Bemutatjuk a Dreamweaver leghatékonyabb funkcióit, hogy gyorsan elérhessük a hozzáférést, valamint számos más hasznos trükköt is, amelyek jelentősen megnövelik a fejlesztési időt és jelentősen javítják a kódminőséget. Teljes lista ugrás után.

1. Dinamikus nézet a következővel: “Élő nézet”

Már tudjuk, hogy a DW statikus képet nyújt a nyitott fájljainkról, de mi a helyzet "dinamikus nézetek" egy olyan alkalmazás, mint a WordPress?

Először is mond DW milyen beállításokat kell használni a bemutatásra"dinamikus nézetek" helyesen. Ehhez válassza a lehetőséget HTTP kérés beállításai tól Nézet> Élő nézet beállításai menüt, majd írja be a KAP vagy POST paramétereket, amelyeket az alkalmazás helyes megtekintéséhez.

Ezután átkapcsolva Élő nézet a DW-ben a régi helyettesíti Design nézet az oldal egy élő, pixel-tökéletes WebKit megjelenítésével; az élő Javascript, DOM manipulációk, adatbázis lekérdezések, kiszolgálóoldali kódok és megjelenített CSS, ahelyett, hogy a helyőrző ikonokat látnád Design nézet.

2. A "Code Navigator" a DW Firebugja

Ha egy lépéssel tovább lépünk, az a Kód navigátor és mikor Élő nézet ablak, ALT-kattintás (a Mac parancsra kattintva), bárhol az ablakban, azonnal megjeleníti az adott tételt. Hasonlóan ahhoz, amit jelenleg a Firefox / Firebug tartalmaz.

3. JavaScript befagyasztása

Az Ajax dinamikus jellege miatt sokszor együtt kell lépnünk egy olyan oldallal, ahol bizonyos tételek nem kerülnek megjelenítésre vagy elérhetők az első oldalak betöltésekor. Ezek olyan elemek, amelyeket az oldal betöltése után néhány perccel az oldalra injektálnak. Íme egy példa:

Lehet, hogy módosítani szeretné a szerszámcsúcs stílusát, amelyet teljes egészében a JavaScriptet használ. A mai napig módszeresen meg kell keresnie az utat a szkriptjein, hogy megtalálja, hogy mi jött létre és hol.

Ehelyett próbálja ki:

Adja meg az oldalt Élő nézet, majd nyomja meg F6 hogy bármikor lehessen befagyasztani a JavaScriptet, lehetővé téve, hogy az oldal bármely dinamikus eleméhez tartozó kódot célozza meg és bontsa.

4. Élő nézet következő legjobb barátja - "Élő kód"

Használat során Élő nézet, akkor is be lehet kapcsolni Élő kód. Élő kód frissíti a kódot, amikor lebeg, kattint, és kölcsönhatásba lép az elemekkel és elemekkel Élőkép ablak!

5. Automatikus JavaScript befejezés

A Dreamweaver intelligens és teljes HTML és CSS kóddal rendelkezik, de mi van a Javascriptekkel? Ha a Dreamweaverben kódolod a jQuery-t vagy a Prototype-t, akkor tudnod kell, hogy vannak olyan API-kiterjesztések, amelyek JavaScript kódot tartalmaznak. Csökkenti a szükséges gépelési feladatot, és a gyors kódolók számára elég praktikus lehet.

Kattintson ide, ha többet szeretne olvasni, vagy letölteni:

• jQuery API kiterjesztés a Dreamweaver számára
• Prototípus API kiterjesztés a Dreamweaver számára

6. Díszítsd a repülési kódokat

Úgy néz ki, mintha a kódlap rendezetlen, rendetlen kódsorok lennének? Használja a Forrásformázás alkalmazása funkciója és formázása pontosan az Ön preferenciáira. A gyors eltávolításhoz kattintson a gombra Formátum forráskód ikonja a Kódoló eszköztár (Szerkesztés> Eszköztárak> Kódolás) és válassza a lehetőséget Kódformátum beállításai a kívánt formázás beállításához.

A formázási opciót is elérheti Parancsok> Forrásformázás alkalmazása vagy csak a kiválasztott kódrészletre alkalmazza a Forrásformázás alkalmazása a kiválasztáshoz választási lehetőség.

7. Kapjon widgetet

Csak kattintson a Bontsa ki a Dreamweaver ikont (úgy néz ki, mint egy fogaskerék) az alkalmazássávban, és válassza ki Keresse meg a webes eszközöket. Ezzel eljuthat az Adobe Exchange-hez, ahol további widgeteket találhat az olyan gyártóktól, mint a Yahoo !, JQuery és sok más.

8. Subversion és Dreamweaver

És igen, a Dreamweaver támogatja a Subversionot (SVN). A fejlesztők számára, akik SVN-t használnak a projektük ellenőrzésének ellenőrzéséhez, ez jó hír lehet. Dreamweaver fejlesztő, Andrew Voltmer megvitatja hogyan használhatja a Subversions programot a Dreamweaver segítségével.

9. Nincs több redundáns stílus

Sokan használják a Dreamweaver-t a tartalom vizuális megjelenítésére, mint egy szövegszerkesztő. A Dreamweaver CS4 előtt ez redundáns CSS szabályokat eredményezhet .Class1, .class2, stb. A Dreamweaver CS4-ben csak váltson át Ingatlanfelügyelő nak nek HTML mód (kattintson az ellenőr bal oldalán található HTML ikonra), és búcsúztat az összes redundáns CSS-re, és csak megfelelő HTML-jelölést helyez be.

10. Az űrlap érvényesítése egyszerű

Szeretné érvényesíteni az űrlapmezőit, de aggódik amiatt, hogy újra kell építeni a semmiből? Semmi gond. Egyszerűen válasszon ki egy létező űrlapelemet, például egy szövegmezőt, és alkalmazza a Spry Validation widget tól Beszúrás> Spry menü. Ezután ellenőrizze az érvényesítési követelményeket, mint például a minimális vagy a maximális karaktereket Ingatlanfelügyelő.

Bónusz: még 3

11. Könnyen elérheti a kapcsolódó fájlokat

HTML vagy PHP fájl megnyitásakor a dokumentumablak tetején megjelenik egy függő fájlnevek sora, mint például a CSS, a Javascript és még a PHP fájlok is. Könnyen átválthat ezekre a fájlokra, módosíthatja és mentheti őket, anélkül, hogy megnyitná őket. Ha a Kapcsolódó fájlok sáv bármely fájljára kattint, a forráskódot a Kód nézetben és a szülőoldalon láthatja a Tervezés nézetben. Vagy a Code Navigator segítségével gyorsan elérheti az aktuális választást befolyásoló CSS ​​forráskódot.

12. Ellenőrizze a böngészők kompatibilitását

Nyissa meg a kompatibilitást ellenőrizni kívánt dokumentumot; ugyanabból a menüsorból, ahol a Code / Split / Design nézetek elérhetők, nézd meg a jobb oldali jobb oldali 'Ellenőrizze az oldalt'gomb.

Ha rákattint, megnyílik egy legördülő menü, válassza a 'Ellenőrizze a böngésző kompatibilitását”. A Böngésző kompatibilitási eredmények ablak az ablak alján megjelenik minden olyan probléma, amelyet meg kell oldani.

Megjegyzés: Ez nem fogja ellenőrizni az IE új verzióit a Mac-en! A teszteléshez használni kívánt böngészők kiválasztásához válassza a lehetőséget Ellenőrizze az oldalt > Beállítások a menüből.

13. PHP oldalak előnézete

A Dreamweaver lehetővé teszi a PHP-kódok futtatását és megtekintését a szoftveren belül. Itt találja meg a beállítást.

Elkezdeni

1. Először válassza ki a lehetőséget Webhely -> Új oldal a felső navigációból.
2. Mindkettőt látni fogod Alapvető és Speciális webhelymeghatározás opció fülek. Folytassuk a Speciális webhelymeghatározás lap.
3. Adjon meg egy mappanevet a webhelyhez a megfelelő mezőben (ehhez a példához a "myphp" -t használjuk a mappa neveként).
4. Hozzon létre egy másik "képeket" tartalmazó mappát a nevének az "Alapértelmezett képek mappája" mezőbe való beírásával.
5. Alatt Helyi információ, adja meg a következő értékeket a mezőkben:
   • Webhely neve: az oldal neve. Csak Dreamweaverben használható
   • Helyi root mappa: Ez az a webhely neve, amelyen dolgozni fog. Ügyeljen arra, hogy a webhelyeket úgy nevezze el, hogy minimálisra csökkentsék a konfliktusokat vagy a zavaró neveket.
   • Alapértelmezett képek mappa: Ez opcionális, de javasoljuk, hogy most hozza létre, mivel a legtöbb webhely bizonyos képeket használ. Ez az a pont, ahol a DW „megkeresi” a képeket a dokumentumokba a kódolási fázis alatt.
   • Kapcsolódó linkek: Ez határozza meg, hogyan kezelik a Dreamweaverben lévő dokumentumokat. Kiválaszthatja a Dokumentum vagy a Gyökér lehetőséget. A kettő közötti különbség:
     • Dokumentum relatív - beilleszti az elérési utat az Ön által használt fájlhoz és az elemhez kapcsolódó elemet.
     • Gyökér relatív - Felhasználás / ami a dokumentum / fájl összekapcsolását eredményezi a ROOT mappához képest.
     • Egy másik alternatíva a szerver konfigurációs fájljainak néhány konfigurációja. A fejlettebb feladatnak köszönhetően most csak ragaszkodunk a dokumentum-relatív használatához.
   • HTTP-cím: adja meg a webhely gyökérmappáját a projekthez
   • Eset-érzékeny linkek: A Dreamweaver ellenőrzi, hogy a projektben lévő fájlnak eset-érzékeny problémája lehet-e a szerverre való feltöltéskor. Az értesítések akkor jelennek meg, amikor a következőket használja: Site -> Check Links Sitewide. Ha szeretné, hagyja, hogy ellenőrizze. Én személy szerint nem hagyom ellenőrizni, mert mindig kisbetűkkel nevezek fájlokat. A nagybetűs betű nem ajánlott.
   • gyorsítótár: Ellenőrizze a gyorsítótár engedélyezését.
6. Ban,-ben Távoli információ oldal, vagy állítsa be az FTP-t vagy más hozzáférést egy távoli kiszolgálóhoz, vagy hagyja a Hozzáférést semmihez.
7. Ban,-ben Testing Server Az oldal kiválasztja azt a beállítást, amely a tesztelt fájltípushoz / rendszerhez kapcsolódik.
8. Verzióvezérlés nem használható erre a példára, így üresen hagyhatja, hacsak nem ismeri.
9. álcázás lehetővé teszi, hogy a .psd, .fla és más forrásfájlokat a webhely mappába helyezze, és a DW figyelmen kívül hagyja azokat a webhely feltöltésekor / frissítésekor.
10. Tervezési megjegyzések ideálisak egy webes tervezőcsapat számára, mivel megtartja a fájlok módosításaira vonatkozó megjegyzéseket. Ez alapértelmezés szerint ellenőrzött és finom, hogy ezt a módot használjuk.
11. Szabadság Fájl nézet oszlop, Hozzájárul, és sablonok alapértelmezettként.
12. A Fürge Az oldal egyszerűen a Spry eszközök mappájára mutat, amely automatikusan szerepel a Dreamweaver-ben. Ezt nem kell megváltoztatni. Ha minden beállítás befejeződött, kattintson a gombra rendben.

Előnézet PHP-ben a Dreamweaverben

Most nyisson meg egy PHP fájlt, és végezze el a szükséges módosításokat. A Dreamweaver fájl egyszerű megtekintéséhez nyomja meg az F12 billentyűt és az eredmények az alapértelmezett böngészőben jelennek meg. Megváltoztathatja, hogy melyik böngészőt használja szerkesztése -> preferenciák -> Előnézet a böngészőben. Ez gyorsabb szerkesztés-előnézeti időt tesz lehetővé, így nem kell hosszú URL-eket beírni a böngészősávba, vagy egy másik kiszolgálószoftvert használnia a PHP-fájlok megjelenítéséhez.!

Ez minden. Boldog Dreamweaver'ing :-)

A szerkesztő megjegyzése: Ezt a bejegyzést írta Jesse Matlock Hongkiat.com részére. A Jesse az elmúlt 6 évben az UI tervezésében, alkalmazásfejlesztésében és webes trendjeiben merült fel. Ő egy kis, bár nagyon tehetséges fejlesztőcsapat alapítója és tervezői vezetője, amely a speciális alkalmazások fejlesztésére összpontosít.