Skip to main content

Kako napisati HTML kodo v Dreamweaver - Beyond WYSIWYG

Anonim

Dreamweaver je odličen WYSIWYG urejevalnik, vendar če niste zainteresirani za pisanje spletnih strani v "tisto, kar vidite, kaj dobite", lahko še vedno uporabljate Dreamweaver, saj je tudi velik urejevalnik besedil. Vendar pa obstaja veliko funkcij, ki zdrsnejo ob poti v urejevalniku kodiranja Dreamweaver, ker je glavni poudarek na "design view" ali WYSIWYG urejevalnem delu izdelka.

Kako priti do Dreamweaver Code Code

Če v urejevalniku HTML še niste uporabljali Dreamweaver, preden morda niste opazili treh gumbov na vrhu strani: »Koda«, »Split« in »Oblikovanje«. Dreamweaver se zažene privzeto v načinu »Oblikovanje« ali v načinu WYSIWYG. Ampak preprosto je preklopiti na ogled in urejanje HTML kode. Samo kliknite na Koda gumb. Ali, pojdi na Pogled izberite in izberite Koda.

Če se samo učite, kako napisati HTML ali želite, da bi imeli občutek, kako bodo vaše spremembe vplivale na vaš dokument, lahko hkrati odpirate pogled kode in pogled oblikovanja. Lepota te metode je, da lahko uredite tudi v obeh oknih. Tako lahko kodo za slikovno oznako vnesete v HTML in nato uporabite pogled načrta, da ga premaknete na drugo mesto na strani s povleci in spusti.

Če si želite ogledati hkrati, bodisi:

  • Kliknite na Split gumb (med Koda in Oblikovanje).
  • V Ljubljani Pogled izberite meni Koda in oblikovanje.

Ko se z urejevalnikom Dreamweaver preprosto urejate vaša HTML koda, lahko spremenite svoje nastavitve, da privzeto odprete Dreamweaver v pogledu kode. Najlažji način je shraniti pogled kode kot delovni prostor. Dreamweaver se odpre v zadnjem delovnem prostoru, ki ste ga uporabljali. Če ne, preprosto pojdite v meni Window in izberite želeni delovni prostor.

Možnosti pogleda kode

Dreamweaver je tako prilagodljiv, ker ima toliko načinov, kako ga prilagoditi in omogočiti, da deluje tako, kot želite. V oknu z možnostmi se lahko prilagodijo barvno kodo, oblikovanje kode, kode namige in možnosti za ponovno kodiranje kode. Tudi v samem pogledu kode lahko spremenite nekatere posebne možnosti.

Ko ste v pogledu kode, obstaja Ogled možnosti gumb v orodni vrstici. Možnosti si lahko ogledate tako, da gredo v Pogled meni in izbiro Možnosti pogleda kode. Možnosti so:

  • Word Wrap - obesi HTML kodo, tako da si jo lahko ogledate brez vodoravnega pomikanja. Upoštevajte, da ta možnost v svojo kodo ne vstavlja nobenih povratnih informacij o prevozu, ampak samo prikaže kodo, tako da je lažje brati.
  • Številke vrstic - prikaže številke vrstic ob strani kode. Prikazuje simbol prelomnice za črte, ki se obdajajo dlje od okna za ogled.
  • Skrite znake - prikaže posebne znake namesto presledkov, ki bi se prikazali na spletni strani. Tako kot pika zamenja prostor, dvojni ševron zamenja vsak zavihek, označuje pa se tudi vsaka vrstica.
  • Označite neveljavno kodo - poudarja HTML, ki je napačen v rumeni barvi. Če izberete rumeno oznako, vam bo Property Inspector podaril namige, kako ga popraviti.
  • Sintaksa Barvanje - vklopi ali izklopi barvno kodiranje vaše kode. Barve barvnega kodiranja spremenite v razdelku za barvanje kode v nastavitvah.
  • Samodejni zamik - samodejno po vrnitvi vozička, če je zgornja koda nadomeščena. Velikost zamika lahko spremenite tako, da spremenite velikost zavihka v razdelku za oblikovanje kode v nastavitvah.

Urejanje kode HTML v pogledu kode Dreamweaver

HTML kodo je preprosto urejati v pogledu kode Dreamweaverja. Preprosto začnite vnašati svoj HTML. Toda Dreamweaver vam ponuja nekaj dodatkov, ki jih razširjajo preko osnovnega HTML urejevalnika. Ko začnete pisati oznako HTML, vnesite <. Če začasno zaustavite takoj po tem znaku, vam Dreamweaver prikaže seznam oznak HTML. Te se imenujejo namigi za kode. Če želite zožiti izbor, začnite vnašati črke - Dreamweaver bo zožil spustni seznam na oznako, ki ustreza tistemu, ki ga vnašate.

Če ste novi v HTML, se lahko pomikate po seznamu oznak HTML in izberete različne, da vidite, kaj počnejo. Dreamweaver vas bo še naprej zahteval za atribute, ko vnesete oznako. Če na primer vtipkate <>, Dreamweaver se spusti na Oznaka HTML, z drugimi oznakami, ki se začnejo z naslednjim. Če nadaljujete z vnosom črke m, Bo Dreamweaver zožil na oznaka.

Vendar oznake kode ne končajo z oznakami. Za vstavljanje lahko uporabite namige kode:

  • Atribute HTML
  • Imena razreda in ID
  • Lastnosti CSS

Če namigov kode ni prikazan, lahko pritisnete Ctrl-preslednica (Windows) ali CMD-preslednica (Macintosh), da jih prikažejo. Najpogostejši razlog, zakaj se morda ne prikaže koda, je, če ste pred koncem oznake preklopili na drugo okno. Ker Dreamweaver odlikuje tipkanje znaka <, če zapustite okno in se vrnete, boste morali znova zagnati kode namige.

Meni lahko izklopite tako, da pritisnete tipko za izhod v sili.

Ko vnesete začetno HTML oznako, jo boste morali zapreti. Dreamweaver to počne na naraven način. Če vnesete Zapri oznake možnost, ki najbolje ustreza vašim potrebam.

Če niste povsem pripravljeni, da preklopite na urejanje svojih strani v HTML-u, ampak želite, da si ogledate kodo, kot je napisana, poskusite inšpektorja kode. S tem se odpre koda HTML v ločenem oknu. Deluje tako kot pogled kode, v resnici pa je v bistvu snemljivo okno s pogledom kode za trenutni dokument.Če želite odpreti kodo inšpektorja, pojdite na Okno izberite in izberite Inšpektor kode ali zadeti F10 na tipkovnici.

Dreamweaver bo oblikoval kodo HTML, vendar bi jo želeli prikazati. Če na primer uporabljate 3 presledke, vendar nikoli ne označite oznak IMG, lahko to obliko zapisujete v možnostih prepisovanja kode. Potem pojdite na Ukazi izberite in izberite Uporabi oblikovanje virov. To je odličen način za pridobitev kode, ki jo je napisal nekdo drug v obliki, ki vam je znana.

Funkcija, za katero mnogi kodirniki HTML ne poznajo ali ne uporabljajo, je zmožnost za zlom HTML kode. To ne odstrani oznak iz dokumenta, ampak jih odstranite iz pogleda, tako da ne motijo, na kaj delate. Če želite strniti svojo kodo:

  1. Izberite del kode, ki ga želite skriti.
  2. V Ljubljani Uredi izberite meni Izbris izbire Iz Koda se zruši podmeni

Enostavnejši način je, da izberete kodo in nato kliknete ikone sesutja kode, ki se pojavijo v žlebu. Prav tako lahko z desno miškino tipko kliknete izbrano kodo in izberete Izbris izbire.

Če želite vse skriti razen kaj je poudarjeno, izberite Zmanjšaj zunanji izbor v kateri koli od zgornjih metod.

Če želite razširiti zloženo kodo, preprosto dvokliknite na njej. To odpre kodo in jo izbere. Nato ga lahko premaknete ali izbrišete ali dodate dodatne oznake.

Na straneh, na katere ne želite urediti zunanje predloge, lahko ves čas uporabljate funkcijo strnjenja in razširitve. Izberete samo področje vsebine, ki ga želite urediti, in kolaps zunaj. Nato napišite svoj HTML. Stran si še vedno lahko ogledate v Oblikovanje si ga ogledate ali si ogledate v brskalniku. Zlomljena koda ni odstranjena iz dokumenta, ki je preprosto skrita od pogleda. Uporabite ga lahko tudi, ko delate na vrsti predmetov. Ko končate z enim, ga strnite. Veš, da si končal, ko ni nobene kode.