HTML-koodi kirjutamine Dreamweaveris

Te ei pea kasutama ainult WYSIWYG-d

Dreamweaver on suurepärane WYSIWYG toimetaja , kuid kui te ei huvita veebisaitide kirjutamist keskkonnas, mida näed, on teil ikkagi Dreamweaver, kuna see on ka suurepärane tekstitöötlusprogramm. Kuid Dreamweaveri koodi redaktoris on palju funktsioone, mis libisevad teedel, sest esmane keskendub toote disainivaatele või WYSIWYG toimetaja osale.

Kuidas siseneda Dreamweaver koodi vaate juurde

Kui te pole kunagi Dreamweaverit HTML-i kujundajana kasutanud enne, kui olete näinud lehe ülaosas kolme nuppu: "Code", "Split" ja "Design." Dreamweaver käivitub vaikimisi "disainivaates" või WYSIWYG-režiimis. Kuid HTML-koodi vaatamist ja redigeerimist on lihtne üle minna. Lihtsalt klõpsake nuppu "Kood". Või mine menüüs Vaade ja vali "Kood".

Kui te õpite lihtsalt HTML-i kirjutama või soovite mõista, kuidas teie muudatused teie dokumendil mõjutavad, saate korraga avada koodivaatamise ja disainivaate. Selle meetodi ilu on see, et saate seda ka mõlemas aknas redigeerida. Nii saate HTML-koodi oma pilditunnuse koodi kirjutada ja seejärel kasutada disainivaate, et seda teisaldada lehekülje teise asukohta lohistades.

Mõlema korraga vaatamiseks kas:

Kui olete Dreamweaveri kasutanud oma HTML-koodi redigeerima, saate oma eelistusi muuta Dreamweaveri avamiseks koodi vaates vaikimisi. Lihtsaim viis on koodi vaate salvestamine tööruumiks. Dreamweaver avaneb teie viimati kasutatud tööruumis. Kui see pole nii, minge menüüsse Aken ja valige soovitud tööala.

Koodivaate valikud

Dreamweaver on nii paindlik, kuna sellel on nii palju võimalusi selle kohandamiseks ja töö tegemiseks nii, nagu seda soovite. Valikute aknas on koodi värvimine, koodi vormindamine, koodi vihjed ja koodi ümberkirjutamise valikud, mida saate kohandada. Kuid võite ka mõningaid erisuguseid valikuid koodi vaates ise muuta.

Kui olete koodi vaates, on tööriistaribal nupp "Vaate suvandid". Valikuid saate vaadata ka menüüs Vaade ja valides "Koodivaate valikud". Valikud on järgmised:

HTML-koodi redigeerimine Dreamweaver koodi vaates

Dreamweaveri koodi vaates on lihtne HTML-koodi redigeerida. Lihtsalt hakake oma HTML-i kirjutama. Kuid Dreamweaver pakub teile mõningaid lisasid, mis laiendavad seda lisaks tavalisele HTML-redaktorile. Kui alustate HTML-i märgendi kirjutamist, sisestate <. Kui peatate kohe pärast seda tähemärki, näitab Dreamweaver teile HTML-märgiste loendit. Neid nimetatakse koodi vihjuseks. Valiku kitsendamiseks alustage kirjade sisestamist - Dreamweaver kitsendab rippmenüüst sildi, mis vastab teie kirjutamisele.

Kui olete HTML-i uus, saate sirvida HTML-koodide loendit ja valida mitmesuguseid, et näha, mida nad teevad. Dreamweaver jätkab teie atribuutide esitamist, kui olete sildi sisestanud. Näiteks kui sisestate " HTML-i märgendisse, kusjuures teised märksõnad algavad järgmisest. Kui jätkate sisestades tähe "m", siis Dreamweaver kitsendab seda -märgi juurde.

Kuid koodi vihjed ei lõpe märgenditega. Võite sisestada koodi vihjeid:

Kui koodi näpunäited ei ilmu, võite nende kuvamiseks lohistada Ctrl-tühikuid (Windows) või Cmd-tühikuid (Macintosh). Kõige tavalisem põhjus, miks koodi vihjett ei pruugi olla, on enne sildi lõpetamist teise akna sisse lülitatud. Kuna Dreamweaver sisestab märgi kirjutamise <, kui jätate aknast välja ja tagastatakse, peate käivitama koodi vihjed.

Võite välja lülitada koodi vihjete menüü, lüües escape-klahvi.

Kui olete sisestanud avamise HTML-i märgendi, peate selle sulgema. Dreamweaver teeb seda loomulikul viisil. Kui sisestate "Sulge sildid", mis kõige paremini sobib teie vajadustele.

Kui te ei ole päris valmis HTML-ile lehtede redigeerimiseks üle lülitama, kuid soovite koodi vaadata, nagu see on kirjutatud, peaksite proovima koodinspektorit. See avab HTML-koodi eraldi aknas. See toimib täpselt nagu koodi vaade ja tegelikult on sellel dokumendil põhimõtteliselt eemaldatav koodi vaateaken. Koodi inspektori avamiseks minge akna menüüsse ja vali "Code Inspector" või klõpsa klaviatuuri F10 klahvile.

Dreamweaver vormindab HTML-koodi, kuid soovid seda kuvada. Näiteks kui kasutate sisestamiseks sisendit 3 tühikuid, kuid mitte kunagi varem IMG-märgendeid, võite selle koodi ümberkirjutamise valiku abil määrata vormindamise teabe. Seejärel avage menüü Käsud ja valige käsk "Rakenda lähtekoodi vormindamine". See on suurepärane võimalus saada kellegi teise kirjutatud kood teile teile tuttavaks vorminguks.

Funktsioon, mida paljud HTML-kooderid ei tea või mida ei kasutata, on HTML-koodi kokkuvarisemise võimalus. See ei eemalda dokumendist silte, vaid eemalda need vaatest nii, et need ei häiriks teie tegevust. Koodi kokkuvarisemine:

  1. Valige koodi sektsioon, mida soovite peita
  2. Valige menüüst Redigeerimine alammenüüst "Koodilõikamine" valik "Ahenda valik"

Lihtsam viis on koodi valimine ja seejärel kliki koodi kollaps ikoonidel, mis ilmuvad köis. Võite ka parema klikkida valitud koodil ja valida "Ahenda valikut".

Kui soovite peita kõik, välja arvatud esile tõstetud, valige mõnel eespool nimetatud meetodil valik "Sulge välist valikut".

Kokkuvarisenud koodi laiendamiseks lihtsalt topeltklõpsake seda. See avab koodi ja valib selle. Seejärel saate selle valiku üle minna või selle kustutada või selle juurde lisada täiendavaid silte.

Võite kasutada kollapsit ja laiendab funktsiooni kogu aeg lehtedel, kus te ei soovi välist malli muuta. Valige lihtsalt sisu ala, mida soovite välja muuta ja kollapsit. Siis kirjuta oma HTML-i. Saate siiski lehte kuvada disainivaates või eelvaates seda brauseris. Kokkuvunud koodi ei eemaldata dokumendist, lihtsalt pealtvaates. Saate seda ka kasutada, kui teete mõne rea üksusi. Kui olete selle valmis teinud, lammutage see. Tead, et olete valmis, kui koodi ei kuvata.