Prikaz stranice (100%)

[Carduel]

Prilikom dizajna web stranica za različite rezolucije što je najbolje učiniti?

Opcije:

- 800x600
- 1024x768
- 1600x1200

E sad gore vidimo 3 vrste rezolucije monitora i postavlja se pitanje koje veličine uzeti za određeni monitor?

Druga stvar je kako napraviti stranicu da se sama proširi bez obzira na rezoluciju, kao što je nrp. http://www.hgspot.hr, monitora?

[d@d]

1024x768...rezolucija ti neće ništa utjecati na design, samo jel "stane" ili ne bez scrollbara

staviš širinu tablice 100% i onda ti se sama "razvlači" kolko treba

[Gogy]

E vidiš, kod 100% načina dizajn stranice malo trpi, odnosno moraš radit tzv. element po element. Znači napravit patterne koji će se ponavljat u pozadinama tako da ne ovise o širini. Ne možeš samo napraviti interface u Photoshopu npr. 800x600 i staviti 100% širinu tablice. Stranica će ti se raspasti.

- 800x600 kao Tutorijali.Net je još uvijek dobra solucija zbog laptopa koji su većinom 15'' i koriste 800x600 (barem mislim da tu koriste)

-1024x768 se pokazuje kao najkorištenija rezolucija, statistika ove stranice pokazuje da ju koristi čak 63.75% posjetitelja za razliku od 800x600 koju koristi tek 5.38% posjetitelja.

- 1600x1200 baš i nije dobra solucija s obzirom da nije jako raširena među surferima, samo 0.40% posjetitelja Tutorijali.Net stranice koristi tu rezoluciju.

Između 800x600, 1024x768 i 100% ne možeš pogriješit koju god da odabereš.

Ako praviš neku manju stranicu preporučam 800x600 a ako trebaš funkcionalnost za veliku stranicu za recimo prodaju nečega ili tako preporučam 100% ili 1024x768.

A ovo za 100% kako napraviti. Pa jednostavno.

Code:

<table width="100%" ...... >

ili u CSS-u staviš za ID ili Class tablice

Code:

width: 100%;

[Carduel]

E ovo je odgovor. Alaj si me našao!

Hvala Gogy

[Carduel]

Gogy Wrote:E vidiš, kod 100% načina dizajn stranice malo trpi, odnosno moraš radit tzv. element po element. Znači napravit patterne koji će se ponavljat u pozadinama tako da ne ovise o širini. Ne možeš samo napraviti interface u Photoshopu npr. 800x600 i staviti 100% širinu tablice. Stranica će ti se raspasti.

Ovo mi se puno puta desilo da mi se stranica raspadne na većim rezolucijama od definirane. Mogu li se grafički elementi kako rješiti ako se radi sa 100% širinom tablice?

[Gogy]

Kao što sam već rekao ako ne želiš da ti se stranica raspadne moraš praviti dizajn element po element. Znači ne možeš ondako da napraviš nrp. interface za rezoluciju 800x600 pa onda te slike ubacit u stranicu sa 100% širine.

A što hoću reći sa ovim element po element. Dakle napraviš interface u photoshopu kakav želiš. I onda cropaš (izrezuješ) sličice koje se mogu ponavljati.

Pogledaj npr. header od ove stranice http://www.tutorijali.net vidiš ovo plavo gore. E to ti je samo jedna sličica od 1px širine koja se ponavlja u pozadini tako da koliko god razvučeš stranicu to će se ponavljati i tvoriti istu sliku.

Ovo je sličica od headera koja se ponavlja



To je ono plavo i ono sivo ispod toga.

[Carduel]

Stavio sam ovu sliku u jednu ćeliju 1x126 i postavio tablicu na 100% i sada sve fino radi bez obzira koja je rezolucija monitora.

Vraćam se na jednu drugu stvar koja me zanima a sigurno i druge članove foruma a to je neki grafički element (npr. logo) kako njega rješiti pri prikazu 100%. Ako imamo npr. logo 250 x 120 px da li će se i on deformirati ako je napravljen za 1024 x 768 a mi ga prikažemo na većoj rezoluciji. Kako se ovo rješava?

[Gogy]

Sam logo se ne može deformirati jer je on jedna cjelokupna slika. Može se deformirati sve okolo njega

Da bi napravio ovo što ti hoćeš, napraviš tablicu sa dvije columne. Prvu columnu fixiraš onoliko koliko je veličina logo-a a drugu staviš na 100%

dakle:

Code:

<tr>
<td width="250"><img src="logo.jpg" width="250" height="120"></td>
<td width="100%">Header u kojem se ponavlja slika u pozadini</td>
</tr>

Tako će ti prva columna uvijek ostati fixna a druga će se razvlačiti po potrebi.

Ali pazi na to da logo ne stavljaš kao pozadinsku sliku nego baš kao normalnu sliku sa <img src="logo.jpg">