Skip to main content

Kako napisati HTML kod u Dreamweaver - Beyond WYSIWYG

HTML, multimedijalni kurs (Lipanj 2026)

HTML, multimedijalni kurs (Lipanj 2026)
Anonim

Dreamweaver je izvrstan WYSIWYG urednik, ali ako niste zainteresirani za pisanje web stranica u okruženju "ono što vidite je ono što dobivate", još uvijek možete koristiti Dreamweaver jer je i dobar uređivač teksta. Ali postoje mnoge značajke koje se skliznu za put u editoru kodova Dreamweaver jer je glavni fokus na "izgledu dizajna" ili WYSIWYG uređivaču proizvoda.

Kako doći do Dreamweaverovog kodnog prikaza

Ako nikad niste upotrijebili Dreamweaver kao HTML uređivač prije nego što nikada niste primijetili ni tri gumba pri vrhu stranice: "Kod", "Split" i "Dizajn". Dreamweaver se prema zadanim postavkama pokreće u "Dizajn pogledu" ili WYSIWYG modu. No, lako se prebaciti na pregled i uređivanje HTML koda. Samo kliknite na Kodirati dugme. Ili idite na Pogled izbornik i odaberite Kodirati.

Ako samo učite kako napisati HTML ili želite saznati kako će vaše izmjene utjecati na vaš dokument, istovremeno možete otvoriti prikaz koda i dizajn. Ljepota ove metode je da možete urediti i na oba prozora. Na taj način možete napisati kôd za svoju oznaku slike u HTML-u, a zatim upotrijebiti izgled dizajna da biste ga premjestili na drugo mjesto na stranici povlačenjem i ispuštanjem.

Da biste istovremeno vidjeli ili:

  • Klikni na Podjela gumb (između Kodirati i Dizajn).
  • U Pogled izbornika, odaberite Kod i dizajn.

Kada budete zadovoljni pomoću Dreamweavera za uređivanje HTML koda, možete promijeniti svoje postavke kako biste standardno otvorili Dreamweaver u prikazu koda. Najlakši je način spremiti prikaz koda kao radnog prostora. Dreamweaver će se otvoriti u zadnjem radnom prostoru koji koristite. Ako to ne učinite, jednostavno idite na izbornik Prozor i odaberite željeni radni prostor.

Opcije prikaza koda

Dreamweaver je tako fleksibilan jer ima toliko mnogo načina da ga prilagodite i učinite da funkcionira onakav kakav želite. U prozoru opcija postoje boje za kodiranje, oblikovanje koda, savjeti o kodovima i mogućnosti za prepisivanje koda koje možete prilagoditi. Ali možete i promijeniti neke posebne opcije unutar samog koda.

Nakon što vidite kôd, postoji a Opcije prikaza na alatnoj traci. Opcije možete pregledati tako da odete na Pogled izbornik i odabir Opcije prikaza koda. Opcije su:

  • Word Wrap - omotava HTML kôd tako da ga možete pregledati bez pomicanja vodoravno. Imajte na umu da ova opcija ne unosi kvačicu vozača u kvar, samo prikazuje kôd tako da je lakše čitati.
  • Brojevi redaka - prikazuje brojeve linija duž strane koda. Prikazuje simbol linije omota za crte koji se protežu duže od prozora prikaza.
  • Skriveni likovi - prikazuje posebne znakove umjesto razmaka koji bi se prikazali na web stranici. Kao što točka zamjenjuje prostor, dvostruki chevron zamjenjuje svaku karticu, a pilcrow ili marker odjeljka zamjenjuje svaki prekid linije.
  • Označite nevažeći kôd - ističe HTML koji je pogrešan žuto. Ako odaberete žutu oznaku, Property Inspector će vam dati savjete o tome kako to popraviti.
  • Bojanje sintakse - uključuje ili isključuje kodiranje boje vašeg koda. Promijenite boje boje kodiranja u odjeljku bojanja koda postavki.
  • Automatsko uvlačenje - čini vaš kôd automatski uvučen nakon vraćanja kotača ako je kôd iznad njega uvučen. Veličinu alata možete promijeniti promjenom veličine kartice u odjeljku oblikovanja koda postavki.

Uređivanje HTML koda u Dreamweaverovom kodu

Jednostavno je uređivati ​​HTML kod u Dreamweaverovom kodnom prikazu. Jednostavno započnite upisivati ​​HTML. Ali Dreamweaver vam pruža neke dodatke koji ga šire izvan osnovnog HTML urednika. Kada započnete s pisanjem HTML oznake, upisujete <, Ako privremeno zaustavite nakon tog znaka, Dreamweaver će vam pokazati popis HTML oznaka. To se naziva šifrom koda. Da biste suzili odabir, počnite pisati slova - Dreamweaver će suziti padajući popis oznaku koja odgovara onome što upisujete.

Ako ste novi u HTML-u, možete se kretati kroz popis HTML oznaka i odabrati različite da biste vidjeli što rade. Dreamweaver će i dalje tražiti atribute nakon što upišete oznaku. Na primjer, ako upisujete <>, Dreamweaver će pasti na HTML tag, s ostalim oznakama počevši od sljedećeg. Ako nastavite upisivanjem slova m, Dreamweaver će ga suziti na označiti.

Ali savjeti za kod ne završavaju na oznakama. Pomoću koda za umetanje možete dodati sljedeće:

  • HTML atributi
  • Klasa i ID imena
  • CSS svojstva

Ako se kôdovi ne prikazuju, možete ih udariti Ctrl-razmaknica (Windows) ili CMD-razmaknica (Macintosh) da biste ih prikazali. Najčešći razlog zašto se kôd ne može pojaviti ako ste se prebacili na drugi prozor prije završetka oznake. Jer Dreamweaver isključuje tipkanje znaka <, ako napustite prozor i vratite se, morat ćete ponovno pokrenuti kôd savjete.

Možete isključiti izbornik alata za kôd pritiskom na tipku za bijeg.

Kada unesete početnu HTML oznaku, morat ćete ga zatvoriti. Dreamweaver to čini na prirodan način. Ako upišete Zatvori oznake opcija koja najbolje odgovara vašim potrebama.

Ako niste sasvim spremni prebaciti se na uređivanje stranica u HTML-u, ali biste htjeli gledati kôd kao što je napisan, trebali biste pokušati inspektora koda. To otvara HTML kôd u zasebnom prozoru. Radi isto kao i kodni prikaz, a zapravo je u osnovi odvojivi kôd prikaza koda za trenutni dokument.Da biste otvorili inspektor koda, idite na Prozor izbornik i odaberite Inspektor koda ili pritisnite F10 na tipkovnici.

Dreamweaver će oblikovati HTML kod, međutim, želite ga prikazati. Na primjer, ako koristite 3 razmaka za uvlačenje, ali nikada ne uvlačite IMG oznake, možete odrediti informacije o oblikovanju u opcijama prepisivanja koda. Onda idete na naredbe izbornik i odaberite Primijeni oblikovanje izvora, Ovo je odličan način da dobijete kôd napisan od strane nekog drugog u oblik koji vam je poznat.

Značajka koju mnogi HTML koderi ne znaju o ili ne upotrebljavaju jest mogućnost slanja HTML koda. To ne uklanja oznake iz dokumenta, već ih samo uklonite iz prikaza da ne ometaju rad na vašem računalu. Da biste saželi svoj kôd:

  1. Odaberite odjeljak koda koji želite sakriti.
  2. U Uredi izbornik, odaberite Sklapanje odabira od Šifriranje kodova podizbornika

Jednostavniji način je odabir koda, a zatim kliknite ikone kolabiranja koda koji se pojavljuju u kanalu. Također možete desnom tipkom miša kliknuti na odabrani kôd i odabrati Sklapanje odabira.

Ako želite sakriti sve osim što je istaknuto, odaberite Sažimanje izvan odabira u bilo kojem od gore navedenih metoda.

Da biste proširili srušeni kôd, jednostavno dvaput kliknite na njega. To otvara kôd i odabire ga. Zatim možete premjestiti taj odabir ili je izbrisati ili dodati dodatne oznake oko nje.

Svojstva kolapsa i proširenja možete koristiti cijelo vrijeme na stranicama na kojima ne želite uređivati ​​vanjski predložak. Izaberite samo područje sadržaja koje želite urediti i srušiti van. Zatim napišite svoj HTML. I dalje možete vidjeti stranicu u Dizajn pregledajte ili pregledajte ga u pregledniku. Skupljeni kôd nije uklonjen iz dokumenta, jednostavno skriven od prikaza. Možete ga koristiti i kada radite na nizu stavki. Kada završite, slomite je. Znate da ste gotovi kada se ne prikazuje kôd.