Nem kell csak WYSIWYG-t használni
A Dreamweaver nagyszerű WYSIWYG szerkesztő , de ha nem érdekli a webes oldalak "mi az, amit látsz, amit kapsz" környezetet írsz, még mindig használhatod a Dreamweaveret, mert ez egy nagyszerű szövegszerkesztő is. De sok olyan tulajdonság van, amely a Dreamweaver kódszerkesztőjénél fogva csúszik, mert az elsődleges cél a termék "tervnézet" vagy WYSIWYG szerkesztő része.
Hogyan lehet belépni a Dreamweaver kódnézetbe?
Ha soha nem használta a Dreamweaveret HTML-szerkesztőként, még mielőtt észre sem vette volna az oldal tetején lévő három gombot: "Code", "Split" és "Design". A Dreamweaver alapértelmezés szerint elindul a "Tervező nézet" vagy a WYSIWYG módban. De könnyű átváltani a HTML kód megtekintésére és szerkesztésére. Csak kattintson a "Kód" gombra. Vagy menjen a Nézet menübe, és válassza a "Kód" lehetőséget.
Ha csak megtanulod, hogyan írhatsz HTML-t, vagy szeretnéd megérteni, hogy a módosítások miként befolyásolják a dokumentumot, egyszerre megnyithatja a kódnézetet és a tervezési nézetet. A módszer szépsége, hogy mindkét ablakban szerkeszthető. Így írhatja le a HTML címkéjéhez tartozó kódot, majd a tervrajz nézetben áthelyezheti egy másik helyre az oldalon drag and drop (drag and drop) segítségével.
Egyszerre megtekintheti a következőket:
- Kattintson a "Split" gombra (a "Code" és a "Design" között)
- A Nézet menüben válassza ki a "Kód és design"
Miután kényelmesen használta a Dreamweaver használatát a HTML kód szerkesztéséhez, alapértelmezés szerint megváltoztathatja a beállításokat a Dreamweaver kódnézetben történő megnyitásához. A legegyszerűbb módja a kódnézet mint munkaterület mentése. A Dreamweaver az utolsó munkaterületen fog megnyílni. Ha nem, egyszerűen menjen az Ablak menübe, és válassza ki a kívánt munkaterületet.
Kódnézeti beállítások
A Dreamweaver annyira rugalmas, mert annyiféle módon testreszabható, és olyan módon működik, ahogyan azt szeretné. Az opciók ablakban vannak kódszínek, kód formázás, kódhoz és módosíthatja a kód újraírását. De néhány speciális lehetőséget is megváltoztathat a kódnézetben belül.
Ha már kódnézetben van, megjelenik egy "Megtekintési beállítások" gomb az eszköztáron. A beállításokat a Nézet menüben is meg lehet tekinteni, és a "Kód nézet opciók" lehetőséget választva. Az opciók:
- Word Wrap - csomagolja a HTML-kódot úgy, hogy vízszintesen görgethet. Ne feledje, hogy ez az opció nem helyezi be a kocsi visszatérési értékét, hanem egyszerűen csak a kódot jeleníti meg, így könnyebben olvasható.
- Vonalszámok - a sorok oldalán található sorszámokat jeleníti meg. A vonalhúzás szimbólumát mutatja a vonalakon, amelyek hosszabbak a nézetablaknál.
- Rejtett karakterek - a weblapon megjelenő, a fehértől elkülönített karaktereket jelenít meg. Mint például egy pont helyettesíti a helyet, egy dupla kagyló helyettesíti az egyes lapokat, és egy nadrág vagy bekezdésjelző helyettesíti az egyes sortörést.
- Jelöljön ki érvénytelen kódot - kiemeli a sárga sárga hibát. Ha kiválasztja a sárga címkét, a Tulajdonos-ellenőrző útmutatást ad a javításhoz.
- Szintaxisszínezés - a kód színkódolásának be- vagy kikapcsolása. A színkódolás színeit a preferenciák kódmódosítási szakaszában módosíthatja.
- Automatikus behúzás - a kódhoz való visszatérés után automatikusan behúzza a kódot, ha a fenti kód be van fejezve. Megváltoztathatja a behúzás méretét a beállítások kódformázási szakaszában lévő lap méretének megváltoztatásával.
HTML kód szerkesztése a Dreamweaver kód nézetben
A HTML kód egyszerű szerkesztése a Dreamweaver kódnézetében. Egyszerűen kezdje el begépelni a HTML-t. De a Dreamweaver olyan extrákat kínál, amelyek kiterjesztik azt egy egyszerű HTML-szerkesztőn túl. Ha elkezdi írni egy HTML-címkét, a <-t. Ha szünet után közvetlenül a karakter után, a Dreamweaver megmutatja a HTML-címkék listáját. Ezeket kódkódoknak hívják. A kijelölés szűkítéséhez írja be a betűk begépelését - a Dreamweaver szűkíti a legördülő listát a címkére, amely megfelel a gépelésének.
Ha újak vagyunk a HTML-ben, akkor görgessünk a HTML-címkék listáján, és válasszuk ki a különbözőeket, hogy megnézzük, mit csinálnak. A Dreamweaver továbbra is kérni fogja az attribútumokat, miután beírta a címkét. Például, ha beírja a " címkét.
De a kódcímek nem érik el a címkéket. Használhatja a kódcímeket a beillesztéshez:
Ha a kód tippjei nem jelennek meg, a Ctrl-szóköz (Windows) vagy a Cmd-szóköz (Macintosh) megnyomásával megjelenítheti őket. A leggyakoribb oka annak, hogy egy kódleírás esetleg nem jelenik meg, ha másik címkére vált át a címke befejezése előtt. Mivel a Dreamweaver kikényszeríti a karakter begépelését <, ha elhagyja az ablakot és visszatér, újra be kell indítania a kódot.
A kódleírások menüjét kikapcsolhatja a menekülési kulcs megnyomásával.
Ha beírta a nyitó HTML-címkét, akkor be kell zárnia. A Dreamweaver ezt természetes módon végzi el. Ha beírja a "Close Tags" opciót, amely megfelel az Ön igényeinek.
Ha még nem áll készen arra, hogy átváltson az oldalak szerkesztésére a HTML-ben, de meg szeretné nézni a kódot, ahogy írták, próbálja ki a kódfelügyelőt. Ez megnyitja a HTML kódot egy külön ablakban. Úgy működik, mint a kódnézet, és valójában alapvetően egy leválasztható kódnézet ablak az aktuális dokumentumhoz. A kód-ellenőrző megnyitásához menjen az Ablak menübe, és válassza a "Code Inspector" parancsot, vagy nyomja meg az F10 billentyűt a billentyűzeten.
A Dreamweaver formázza a HTML kódot, azonban azt szeretné, hogy megjelenjen. Ha például 3 szóközt használ az IMG címkék behúzására, de soha nem illeszkedik, megadhatja a formázási információkat a kódújítási opciókban. Ezután a Parancsok menüre lép és válassza a "Alkalmazásforrás formázása" alkalmazást. Ez egy nagyszerű módja annak, hogy valaki más által írt kódot olyan formátumba írja be, amely ismerős az Ön számára.
Az a tulajdonság, amelyet sok HTML kódoló nem tud, vagy nem használ, a HTML kód összeomlására való képesség. Ez nem távolítja el a címkéket a dokumentumból, de csak távolítsa el őket a nézetből, hogy ne zavarják a munkájukat. A kód összeomlása:
- Válassza ki az elrejteni kívánt kódot
- A Szerkesztés menüben válassza az "Összecsukásválasztás" lehetőséget a "Kódösszeállítás" almenüből
Könnyebb módja a kód kiválasztása, majd kattintson a kód összeomlás ikonokra, amelyek a csatornában jelennek meg. A jobb gombbal is kattinthat a kiválasztott kódra, és válaszd a "Collapse Selection" menüpontot.
Ha el akarja rejteni mindent, kivéve azt, ami kiemelve van, válassza a "Collapse Outside Selection" lehetőséget a fenti módszerek egyikében.
Az összecsukott kód kibontásához egyszerűen kattintson duplán. Ez megnyitja a kódot, és kiválasztja azt. Ezután áthelyezheti ezt a kijelölést, vagy törölheti azt, vagy további címkéket adhat hozzá.
Az összeomlást és a funkció bővítését bármikor használhatja olyan oldalakon, ahol nem kívánja szerkeszteni a külső sablont. Csak ki szeretné választani a szerkeszteni kívánt tartalmat, és kívülről összeomolni. Ezután írja meg HTML-jét. Továbbra is megtekintheti az oldalt a Tervező nézetben vagy megtekintheti azt böngészőben. Az összeomlott kódot nem távolítják el a dokumentumból, egyszerűen elrejtve a nézetből. Ezt akkor is használhatja, ha egy sor elemen dolgozik. Ha befejezte az egyiket, csukja össze. Tudod, hogy befejeződött, amikor nem jelenik meg kód.