Wszystkie MOJE pytania na temat tworzenia strony www

[setter14]

1. Zacznijmy od tego; mianoiwice zakładam ze tłem strony jest zdjęcie. Rozne komputery = rozne rozdzielczosci wiec co mam zrobić zeby zdjecie (i cała strona) ładnie dopasowywała się do ekranu monitora ?

 

2. Przygotowalem grafike w Photoshopie, pocialem je i teraz chce jest wstawic do Adobe Dreamweaver i tu pytanie jak to zrobić zeby je rozmiescic na stronie a nie kazdy element pod soba. Prosze mi wytłumaczyc tak na chlopski rozum.

[olaf]

zainteresuj sie divami.

[Lukasz_D]

Jesli chodzi o drugie pytanie to ten tutek moze sie przyda

 

http://www.carlosaleman.com/tutorial.html

 

a jesli chodzi o pierwsze pytanie to z checia sie dowiem o co chodzi z tymi tłami div -tak na chlopski rozum poprosze :)

[Orangegraphics]

ale jak divem rozciągać jpg-a? chyba się nie da?

[Gość AT7]

A jeśli chodzi o pytanie pierwsze to odpowiedzią jest JavaScript. Taki skrypcik który wrzucamy w body:

 

<br />
document.body.style.backgroundImage = "url(images/bg"+screen.width+"x"+screen.height+".jpg)";<br />

 

Oczywiście nazwa fotki tła to np "bg1600x900.jpg", wystarczy wrzucić każdą możliwą wersje rozdzielczości i działa :)

[olaf]

ale jak divem rozciągać jpg-a? chyba się nie da?

nawet nie wiem czy sie da, chyba tak. niemniej mi przez dopasowanie chodziło bardziej wypozycjonowanie. Jak cos jest tlem, to lepiej by sie pozycjonowalo niz sklaowalo jezeli ma sie zgrac z resztą. Mozliwe ze sie nie zrozumielismy.

[Lukasz_D]

Będę musial to wypróbowac pozniej - zdjęcia stracą jakość jak się je bedzie rozciagac ... czyli trzeba przygotowac zdjecie w kilku roznych rozdzielczosciach ?

[Gość AT7]

Właśnie one nie bedą się rozciągać. Tak jak piszesz, przygotowujesz zdjecia w różnej rozdzielczości i nic się nie będzie rozciągać.

Edytowane 5 Sierpień 2010 przez AT7

[setter14]

AT7 bo ja sie troche na tym nie znam czyli jesli ich jest np trzy czyli:

 

document.body.style.backgroundImage = "url(bg1600x900.jpg)";

document.body.style.backgroundImage = "url(bg1280x800.jpg)";

document.body.style.backgroundImage = "url(bg800x600.jpg)";

 

?

[olaf]

ty tylko nazywasz pliki na serwerze i wklejasz tamten skrypt, a on sam wybiera jaką bitmapę zaladować. Nazwy podales dobre.

[kots]

Witam.

 

Jeżeli kojarzysz trochę angielski polecam:

http://css-tricks.com/perfect-full-page-background-image/

 

"Rozciągnięte" tło wcale nie wygląda tak źle - oczywiście wszystko w granicach rozsądku. ;) Wykonywałem coś takiego: rozdzielczość bazowa obrazka wynosiła 1024x768px - przy skalowaniu do 1440x900 wyglądało to całkiem ok. Oczywiście można tez pójść w drugą stronę, podać obrazek większy, który będzie interpolowany do mniejszej rozdzielczości. ;)

 

Sugeruję Ci też zainteresować się media queries:

http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/

http://www.protofunc.com/scripts/jquery/mediaqueries/

 

Chociaż to już trochę bardziej zamotane zagadnienie, trzeba by się było bawić w testy kompatybilności pomiędzy przeglądarkami (niestety nie testowałem tego jeszcze, więc sam niewiele mogę CI napisać). Niemniej to rzecz interesująca, na pewno nie zaszkodzi Ci się z nią zapoznać. :P

[kots]

Wykonałem super prosty lay, któy używa bitmapy (1024x768) rozciągniętej na full. Posłużyłem się jquery (poszedłem na łatwiznę ;P). Załączam - może komuś się przyda. ;)

 

Nie działa to na ie6, ponieważ użyłem "position:fixed". Dało by się zrobić na 666, ale nie chciało mi się bawić. ;P Praca z ie6 to nic przyjemnego.