Drugi čas – CSS nastavak

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

Do  sada smo dizajnirali glavnu tabelu i prvi red, sledi dizajn ostalih redova. Prvi red ima pozadinsku sliku.

Pogledajte krajnji rezultat.

U CSS-u ćemo napraviti format za ostale redove koristeći selektor ID – #

- Drugi red je visine 40px, sa pozadinskom slikom meni.jpg. 

meni

 

Slika je napravljena tako da može da se ponavlja po horizontali i ispuni neograničen prostor po širini. Na ovaj način možemo ispuniti veliki prostor sa veoma malom slikom (mala veličina fajla), što omogućava brži rad sajta.

Kada elementu dodamo pozadinsku sliku ona se podrazumevano ponavlja horizontalno i vertikalno.

Npr. Element širine 400px i visine 300px ima pozadinsku sliku facebook.jpg čije su dimenzije 70x70px.

#ponavljanje-slike {
width:400px;
height:300px;
background-image:url(../images/facebook.png);
}

 

<td id="ponavljanje-slike">&nbsp;</td>

 

 

Pnavljanje pozadinske slike možemo da kontrolišemo osobinom background-repeat koja ima vrednosti repeat (što je podrazumevano), repeat-x, repeat-y i no-repeat.

Ako pogledate vaš sajt u browseru možete primetiti da se pozadinska slika ponavlja, odnosno na dnu reda vidi se tamna linija – što je u stvari gornji deo slike. Da bi ukinuli ponavljanje slike u CSS-u dodajte osobinu background-repeat:no-repeat.

 Sada možemo da formatiramo drugi red – mesto za navigaciju – meni sajta.

#meni {
	background-image:url(../images/meni.jpg);
	background-repeat:repeat-x;
	height:40px;
}

 

<td id="meni">&nbsp;</td>

 Red je visine 40px, kao i visina slike koja je pripremljena. Kada biramo sliku background-image: pa browse, nakon selektovanja slike u desnom delu možemo videti kako ona izgleda, a ispod preview dela ispisane su dimenzije slike širinaxvisina.

Dizajn:

 

 Zadatak: U poslednjem redu postaviti pozadinsku sliku futbg.gif koja se ponavlja po horizontali (x-osa). Na osnovu dimenzije slike možemo videti da red treba biti visine 60px.

#futer {
	background-image:url(../images/futbg.gif);
	background-repeat:repeat-x;
	height:60px;
}

 

<td id="futer">&nbsp;</td>

 

 

 

 Treći red će biti širine 800px i imaće sliku stripe_bg_tekst.png Slika je veličine 45x45px i ponavljaće se ispunjavajući ceo prostor trećeg reda. Obzirom da se slike podrazumevano ponavljaju, nećemo koristiti osobinu background-repeat.

#treci-red {
	width:800px;
	background-image:url(../images/stripe_bg_tekst.png);
}

 

<td id="treci-red">&nbsp;</td>

 

 

 

Stripe – pruge, ove slike moraju biti pripremljene tako da se mogu ponavljati. Najlakši način izrade ovih slika je pomoću online aplikacija, npr. http://www.stripegenerator.com/

Najpopularniji sajt za pozadinske slike je http://subtlepatterns.com/ gde možete da vidite kako izabrana slika izgleda kao pozadina sajta.

Glavna pozadina sajta

Ceo sajt se nalazi u body tagu, pa je glavna pozadina sajta pozadina body taga.

U CSS-u formatiranje body taga uradićemo pomoću selektora – element (tip)

body {
	background-image:url(../images/stripe_bg.png);
}

 Kada koristimo ime elementa u CSS-u (nije #body, već samo body) onda se taj format automatski prenosi na HTML element. Znači nema koraka gde treba CSS format da dodamo HTML elementu, odnosno nema <body id="body">)

Zadatak 2:

Napraviti novu stranu sa tabelom 2 reda i 2 kolone.

 

   
   

 

Ovu vežbu ćemo uraditi u novoj strani:

1. Napravimo novu stranu (file — new — HTML), fajl snimimo pod imenom vezba (file — save as – upišemo ime vezba.html). HTML strane snimamo u root folderu.

2. Napravimo novi CSS fajl (file — new — CSS), fajl snimimo pod imenom vezba (file — save as – upišemo ime vezba.css). CSS fajlove snimamo ufolderu CSS.

files-vezba

3. Povežemo fajlove. U fajlu vezba.html kliknemo na dugme za povezivanje CSS-a (attach css file), preko BROWSE dugmeta nađemo fajl vezba.css i kliknemo OK. Fajlovi su povezani, što možemo videti po kodu koji se pojavio u HEAD delu

<link rel="stylesheet" type="text/css" href="css/vezba.css">

 4. Na strani napravimo tabelu. U fajlu vezba.html ubacimo tabelu. Tabela treba da se vidi na sajtu, to je element sajta, pa se nalaziu u body delu. Obavezno proverimo da li se nalazimo u body delu strane. Kliknemo mišem u dizajn deo ili u kodu između početnog i krajnjeg body taga. tabelu ubacujemo preko ikone za tabele u Insert panelu. U prozoru koji se otvori upišemo 2 reda i 2 kolone, ostala polja obrišemo.

<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

 5. U CSS-u pripremimo formate za delove tabele

#tabela-vezba {
	width:400px;	
}
#levo1 {
background-image:url(../images/facebook.png);
width:70px;
height:70px;
background-repeat:no-repeat;
}
#levo2 {
	background-color:#FFCC00;
}
#desno1 {
	background-color:#339966;
}
#desno2 {
background-image:url(../images/futbg.gif);
background-repeat:repeat-x;
height:60px;
}

 6. HTML elementima dodelimo napravljene formate

<table id="tabela-vezba">
  <tr>
    <td id="levo1">&nbsp;</td>
    <td id="desno1">&nbsp;</td>
  </tr>
  <tr>
    <td id="levo2">&nbsp;</td>
    <td id="desno2">&nbsp;</td>
  </tr>
</table>

 Komentari i uređenje koda

 Treba se truditi da kod bude što uredniji, sa dosta komentara. U dizajn delu kada stisnemo ENTER pojavljuje se novi paragraf – tag p. U kodu kada stisnemo ENTER ne pojavljuje se novi tag, što nam omogućava praznim redovima odvajamo bitne delove sajta. 

Komentari se u HTML-u ubacuju preko ikone za komentar u INSERT panelu.

<!-- Ovo je komentar -->

 

<!-- Početak tabele -->
<table id="tabela-vezba">
  <tr>
    <td id="levo1">&nbsp;</td>
    <td id="desno1">&nbsp;</td>
  </tr>
<!-- ****************************
	Početak drugog reda
*********************************  -->
  <tr>
    <td id="levo2">&nbsp;</td>
    <td id="desno2">&nbsp;</td>
  </tr>
</table>

 Kako bi komentari bili vidljiviji, tekst između otvarajućeg i zatvarajućeg taga komentara možemo da odvojimo nekim znacima, npr zvezdice, tačke, crtice.

Komentare možemo da koristimo i ukoliko želimo da sakrijemo neki deo sajta, ali da ga ne obrišemo. Kada se element stavi pod komentar on nije vidljiv na sajtu, ali postoji u kodu.

<table id="tabela-vezba">
  <tr>
    <td id="levo2">&nbsp;</td>
    <td id="desno2">&nbsp;</td>
  </tr>
<!--  
  <tr>
    <td id="levo3">&nbsp;</td>
    <td id="desno3">&nbsp;</td>
  </tr>
-->
</table>

 

Komentari u CSS-u

/* Komentari u CSS-u */
#tabela-vezba {
	width:400px;	
}
/* Format za levi deo */
#levo1 {
background-image:url(../images/facebook.png);
width:70px;
height:70px;
background-repeat:no-repeat;
}
#levo2 {
	background-color:#FFCC00;
}
/* Format za levi deo
___________________________________________________ */
#desno1 {
	background-color:#339966;
}
#desno2 {
background-image:url(../images/futbg.gif);
background-repeat:repeat-x;
height:60px;
}
/*
#desno3 {
	background-color:#375966;
}
*/

 * Za sve vežbe kasnije ćemo praviti nove strane (vezba2.html, vezba3.html itd.) a koristićemo samo jedan CSS fajl (vezba.css). Bitno je da se imena selektora ne ponavljaju (npr ako ste sada koristili #levo1, to ime ne možete koristiti u sledećim vežbama.)

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.