Treći čas – DIV tagovi

Dragan Filipović Korak po korak, Kurs Comments (0)

Uvod

Div tagovi – Slojevi (Layers) su strukturni elementi Web stranice. Služe kao kontejneri za razne elemente i možete ih postaviti bilo gde na Web stranici. U kodu  su obeleženi <div> Tag-om. Najlakše je zamisliti DIV tagove kao kvadrate bez karakteristika (dimenzije, boje isl.)  koji se formatiraju preko CSS-a.

Div tag se ubacuje komandom Insert — Layout object — Div tag ili preko ikone za Div tag u INSERT panelu. Pri ubacivanju DIV tagova možemo im dodeliti ID ili Klasu, pa je uvek bolje prvo pripremiti dizajn elementa u CSS-u pa ga kasnije ubaciti u HTML stranu.

Uvek kada koristimo insert panel moramo paziti gde se nalazi kursor miša, jer će se element ubaciti upravo na tom mestu.

Obzirom da su DIV tagovi delovi – elementi sajta, oni se ubacuju u body deo sajta.

Zadatak:

Sajt koji smo počeli da pravimo pomoću tabela napravićemo sa DIV tagovima.

Prvo ćemo sačuvati index.html stranu pod imenom tabele.html, kako bi nam ostao rad sa tabelama. (file — save as) Na ovaj način ćemo dobiti dve iste strane index.html i tabele.html. Nastavićemo sa radom u index.html strani. Obrisaćemo tabele. Možemo ručno selektovati kod ili selektovati tabelu preko Status bara. Kada klikneme negde unutar tabele u Status baru se pojavljuje niz tagova od body taga do elementa u kome smo kliknuli mišem. Klikom na neki element u Status baru, taj element će biti selektovan u kodu. Npr. ukoliko kliknemo na table selektovaćemo tabelu, pa ćemo je lako obrisati kada stisnemo DELETE.

U body delu ćemo sada ubaciti Div tagove. Imamo dva načina.

1. Ubacimo spoljne elemente, pa unutar njih ostale elemente

2. Ubacimo unutrašnje elemente, pa oko njih spoljne elemenete.

Mišem kliknemo u body deo (body deo je deo između otvarajućeg i zatvarajućeg body taga

<body>
ovo je body deo
</body>

 Preko ikone za DIV tag ubacimo prvi DIV tag – prvi red. U prozoru koji se pojavi iz padajuće liste ID izaberemo heder, jer smo naš prvi red nazvali heder i koristili smo ID selektor (#heder)

insert-div

div-prozor

 

 U kodu se pojavljuje Div tag sa ID-jem heder. Unutar Div taga pojavljuje se tekst Content for  id "heder" Goes Here

Ovaj tekst je koristan, jer Div podrazumevano nema dimenzije, pa se ništa ne bi videlo u Dizajn delu ukoliko Element nema sadržaj.  Tekst ćemo obrisati kada budemo ubacivali sadržaj unutar elementa.

<body>
<div id="heder">Content for  id "heder" Goes Here</div>
</body>

 Isto nastavimo i sa ostalim redovima. U kodu napravimo prostor ispod diva za heder i ubacimo drugi red.

  <div id="heder">Content for  id "heder" Goes Here</div>
  <div id="meni">Content for  id "meni" Goes Here</div>
  <div id="treci-red">Content for  id "treci-red" Goes Here</div>
  <div id="futer">Content for  id "futer" Goes Here</div>

 Oko unutrašnjih elemenata treba da ubacimo okvir (glavnu tabelu). DIV tagovi se ubacuju oko elemenata tako što prvo selektujemo te elemente i opet koristimo istu ikonu za ubacivanje DIV tagova. DW prepoznaje da ubacujete DIV tag oko selekcije i aktivira opciju Wrap Around Selection.

Odnosno selektujemo sva četiri DIVA (reda), kliknemo na ikonu za DIV i izaberemo ID glavna tabela.

<div id="glavna-tabela">
  <div id="heder">Content for  id "heder" Goes Here</div>
  <div id="meni">Content for  id "meni" Goes Here</div>
  <div id="treci-red">Content for  id "treci-red" Goes Here</div>
  <div id="futer">Content for  id "futer" Goes Here</div>
</div>

 Vaš sajt sada izgleda ovako.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.