glava
     

Cilji vaje:

  • odpreti in urejati HTML v urejevalniku kode programa Adobe Dreamweaver CS3,
  • uporabljati hitri urejevalnik oznak v programu Adobe Dreamweaver CS3,
  • očistiti kodo HTML, ki jo izdela Microsoft Word.

Ogled in spreminjanje kode HTML

Spoznavanje pogleda na kodo

Adobe Dreamweaver CS3 s kodo HTML dela v ozadju, omogoča pa nam več načinov, da si kodo HTML lahko ogledamo in jo tudi urejamo.

V orodni vrstici Adobe Dreamweaverja lahko izbiramo med različnimi pogledi na dokumentno okno:

  • Design (Design view) - prikaz postavitve spletne strani,
  • Code (Code view) - prikaz kode,
  • Split (Code and Design view) - prikaz obeh pogledov v deljenem dokumentnem oknu.

Kodo si lahko ogledujemo tudi v samostojnem oknu, ki ga odpremo v meniju Window, kjer izberemo Code Inspector oziroma pritisnemo funkcijsko tipko F10.

Zaglavje in telo

Odprimo si nov prazen HTML dokument. Nastavimo deljen pogled na delovno okno. V delu okna, kjer se prikazuje koda, vidimo osnovni HTML dokument brez vsebine. Dokument ima v prvi vrstici kodo, ki vsebuje podatke o različici HTML-ja, ki jo vsebuje naša stran. To vrstico Adobe Dreamweaver doda samodejno. Celotna spletna stran je obdana z oznakama <HTML>. Spletno stran sestavljata dva glavna dela:

  • zaglavje - oklepa ga značka <HEAD>,
  • telo - oklepa ga značka <BODY>.

V praznem dokumentu nam Adobe Dreamweaver doda v zaglavje dve znački <META> in <TITLE>. Prva določa nabor znakov, druga pa naslov dokumenta. Večina vsebine strani je v telesu, v praznem dokumentu pa je telo prazno, ker še nismo dodali vsebine dokumenta.

s

Možnosti pogleda na kodo

Ko je izbran pogled na kodo, lahko z menijem View options (možnosti pogleda), spreminjamo način prikaza kode.

s

Pri čemer lahko:

  1. Word Wrap - prelivanje besedila - prelomi vrstico na desnem robu okna, da ni potrebno vodoravno drseti po oknu. Nastavitev ne spreminja kode, prikaže jo le drugače.
  2. Line Numbers - oštevilčenje vrstic - na levem robu okna prikaže številke vrstic kode.
  3. Hidden Charcters - prikaže skrite znake - prikaže skrite znake npr. Entre, presledke, tabulatorje.
  4. Highlight Invalid Code - označi neveljavno kodo - vključi označevanje neveljavne kode.
  5. Syntax Coloring - barvno označevanje kode - obarva kodo za lažje prepoznavanje kode.
  6. Auto Indent - samodejni umik - vključi samodejno umikanje delov kode.

Podobno pa lahko izbiramo načine prikaza kode tudi v orodjarni Coding, ki jo odpremo v meniju View v izbiri Toolbars. Orodjarna se prikaže ob levem delu dokumentnega okna, ko je vključen pogled na kodo oz. deljen pogled. V orodjarni so med drugim gumbi, ki nam omogočajo skrivanje in razkrivanje kode posamezne značke, kot kaže slika. To nam omogoča preglednejšo kodo in s tem lažje urejanje.

s

Odprimo si naš prvi dokument prvi.html, ki smo ga izdelali v vaji 2, tako da v meniju File izberemo Open. V oknu Open izberemo dokument prvi.html in odpiranje potrdimo s klikom na gumb Odpri.

s

Nastavimo si deljen (Split) pogled na dokumentno okno. Če v dokumentnem oknu izberemo predmet, bo koda zanj izbrana v urejevalniku kode, kot kaže slika. To je najhitrejši način prikaza kode izbranega predmeta.

s

Ogled in urejanje značk HTML

Odprimo si tudi dokument ure.html, ki smo ga izdelali v vaji 3 in si ga oglejmo v urejevalniku kode. Vidimo, da je koda že kar obsežna in se v njej težko znajdemo.

Dokumentno okno si nastavimo v deljen pogled. Poiščimo si sliko z enačbo in jo označimo. Sliko bomo v urejevalniku kode namesto na sredino poravnali na levo.

s

Vidimo, da je slika del odstavka in jo oklepata znački <P>. Lastnost poravnave je prirejena odstavku. V kodi označimo in izbrišimo parameter align=''center'', kot kaže slika.

s

Lahko bi samo spremenili parameter ''center'' v ''left''. Namesto tega bomo uporabili vgrajeno orodje Adobe Dreamweaverja, ki nam pomaga pisati. Ko pišemo kodo, nam v padajočem meniju Adobe Dreamweaver nudi vse možnosti, ki so tisti trenutek na voljo. V našem primeru se bomo postavili za p značke <P>  in pritisnili preslednico, izbrali align in z dvoklikom na izbran parameter potrdili izbiro, kot kaže slika.

s

Odpre se nam še en meni, ki nam nudi možnosti poravnave. V meniju dvokliknemo na left.

s

Spremembe v dokumentnem oknu bodo vidne, ko bomo kliknili v dokumentno okno ali pa na gumb Refresh v oknu z lastnostmi.

s

Ogled in urejanje značk HTML s hitrim urejevalnikom

V Adobe Dreamweaverju hitri urejevalnik značk omogoča najhitrejši in najenostavnejši način prikaza in urejanja posameznih značk HTML. Urejevalnik lahko odpremo na več načinov:

  • kliknemo ikono urejevalnika v oknu z lastnostmi,

s

  • z desno tipko miške kliknemo poljuben predmet in v meniju izberemo Quick Tag Editor.,
  • v meniju Modify izberemo Quick Tag Editor.,
  • natipkamo tipkovno bližnjico Ctrl+T,
  • z desno tipko kliknemo značko v vrstici stanja, kjer so prikazane značke in ve meniju izberemo Quick Tag Editor..

Hitri urejevalnik HTML kode ima tri načine dela:

  • Insert HTML - omogoča vstavljanje  kode html,
  • Edit Tag - omogoča urejanje obstoječe vsebine značke,
  • Wrap Tag - izbrano značko ugnezdi v novo značko.

Ko imamo odprto okno hitrega urejevalnika značk, lahko preklapljamo med vsemi tremi načini dela s tipkovno bližnjico Ctrl+T.

Dokument ure.html sedaj prikažimo v pogledu postavitve strani (Design view). V tekstu bomo pod sliko enačbe našli tekst t0 = nihajni čas, kjer bomo ničlo s hitrim urejevalnikom kode postavili v podpisan tekst. To storimo tako, da ničlo označimo in z desnim klikom na ničlo odpremo hiter urejevalnik kode Quick Tag Editor.. S hitrim urejevalnikom v načinu Wrap Tag bomo vrinili značko <SUB>, kot kaže slika, in z Enter potrdili vnos.

s

s

Shranimo si dokument ure.html in ga zaprimo. Zaprimo tudi vse ostale odprte dokumente.

Čiščenje kode HTML, ki jo izdela Microsoft Word

Včasih želimo dokument, izdelan v Wordu shraniti kot spletno stran. Word se pri izdelavi spletne strani, ki je zelo podobna Wordovemu dokumentu, dobro odreže. Težava je le v tem, da potrebuje veliko dodatne kode, da lahko prikaže spletno stran v svojem oknu. Če želimo spletno stran objaviti v spletu in ne potrebujemo njenega prikaza v Wordovem oknu, lahko nepotrebno kodo počistimo v Adobe Dreamweaverju CS3.

V mapi gradivo bomo našli dokument z imenom dolzina.doc.  Odprimo ga in ga shranimo kot spletno stran. To storimo tako, da v meniju Datoteka izberemo ukaz Shrani kot spletno stran..  Pri tem moramo paziti, da izberemo v izbiri Shrani kot vrsto Spletno stran (*.htm, *.html).

s

Shranjeno Wordovo spletno datoteko dolzina.htm sedaj odprimo v Adobe Dreamweaverju in si jo oglejmo v pogledu kode. Vidimo, da je koda zelo obsežna in vsebuje kar 596 vrstic kode. 

s

s

Očistimo kodo dokumenta s pomočjo Adobe Dreamweaverja. V meniju Commands izberimo ukaz Clean Up Word HTML.. Okno Clean Up Word HTML  ima dva zavihka Basic (Osnovne nastavitve) in Detailed (Podrobne nastavitve), ki nam nudita različne možnosti čiščenja kode. Označiti moramo možnosti na listih z osnovnimi in podrobnimi nastavitvami, izbrati različico Worda s katero je bil izdelan spletni dokument in s klikom na gumb OK potrditi čiščenje kode.

s

Shranimo kopijo dokumenta z imenom dolzina.htm in ga primerjajmo z originalnim Wordovim dokumentom. Vidimo, da se je količina kode občutno zmanjšala, saj je v očiščeni datoteki le še 201 vrstica kode.

s

Oglejmo si še obe verziji spletne strani v brskalniku in ju primerjamo. Opazimo, da se oblika spletne strani pri čiščenju kode ni bistveno spremenila, kot kažeta sliki.

Zaprimo odprte dokumente.

S tem smo zaključili vajo 5.

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh