Rozciąganie Się Strony I Tło.

[traktor]

Witam,

 

Mam taki problem:

 

Jak można pociąć szablon w taki sposób, aby strona rozciągała się wraz z przyrostem tekstu? oraz Jak zrobić tło z paska powiedzmy 1x200 poprzez kopiowanie go, aby zaoszczędzić rozmiar szablonu?

 

Proszę o wytłumaczenie mi tego swoimi słowami ( zawsze możecie sobie powtórzyć jak to się robi ) lub podanie linka do jakiejś strony w której byłoby to w dość przejrzysty sposób opisane. Gdyby można było, to prosiłbym również o jakichś link do strony w której jest opisane jak zrobić z pociętej grafiki szablon, bo słyszałem, że ten generator w photoshopie do niczego się nie nadaje.

 

 

Bardzo dziękuje za ewentualne odpowiedzi i pozdrawiam, traktor

[PelzaK]

nadać styl do elementu w którym ma być tło (np div)

background-image: url('obrazek.jpg');background-repeat: repeat-x;	/* ewentualnie repeat-y w zależności od kierunku powielania tła */

Edytowane 19 Listopada 2008 przez PelzaK

[m4r]

Witam,

 

Mam taki problem:

 

Jak można pociąć szablon w taki sposób, aby strona rozciągała się wraz z przyrostem tekstu? oraz Jak zrobić tło z paska powiedzmy 1x200 poprzez kopiowanie go, aby zaoszczędzić rozmiar szablonu?

 

Proszę o wytłumaczenie mi tego swoimi słowami ( zawsze możecie sobie powtórzyć jak to się robi ) lub podanie linka do jakiejś strony w której byłoby to w dość przejrzysty sposób opisane. Gdyby można było, to prosiłbym również o jakichś link do strony w której jest opisane jak zrobić z pociętej grafiki szablon, bo słyszałem, że ten generator w photoshopie do niczego się nie nadaje.

 

 

Bardzo dziękuje za ewentualne odpowiedzi i pozdrawiam, traktor

Layoutów w ps się nie robi. True.

 

Strona zwykle rozciąga się z przyrostem tekstu. Jeżeli chcesz w pionie- zrób coś na tę nutę:

• tworzysz jakiś tam kontener (a.k.a. div).
• ustawiasz mu stałą szerokość (Np. 1000px - bo nie lubię ludzi chwalącymi się 1920+px monitorem, niech mają po 460px luzu).
• wrzucasz w niego dowolną ilość tekstu, bądź innej zawartości. Powinien ładnie się rozciągać na wysokość.

Na temat cięcia layoutu moge jedynie parę rzeczy podpowiedzieć, bo nie znam praktycznie żadnej strony z tutorialami. Ot- co strona to inaczej się robi.

» Naciśnij aby pokazać/ukryć tekst oznaczony jako spoiler « - "uwaga, przydługie i nudne"

Najpierw- czego lepiej nie robić (przynajmniej w początkowym stadium krojenia stron):

• Nie używasz przezroczystych png (podziękujmy IE6, którego ciągle dużo ludzi ciągle używa. IE7 też ma czasem problemy).
• Nie używasz tzw. "spacerów"- może Cię to ominie, jeżeli nie dotkniesz zabawki do cięcia stron od Adobe. Spacer = obrazek którego jeden z rozmiarów jest równy 1px i służy do ustawiania innych obrazków layoutu.
• Za żadne skarby nie próbuj wyśrodkowywać czegoś w pionie.
• Tabelki to zło. Nie robi się na nich layoutu.
• Nie wstawiasz css "inline", o ile nie jest to koniecznie potrzebne. Potem łatwo się pogubić co i gdzie jest ustawione. Lepiej zmontować klasę/dodać id dla stylowanego elementu.
• IE nie nadaje się do sprawdzania layoutów. To ostatnia przeglądarka, na której sprawdzasz czy strona wygląda poprawnie.
• Nie kombinujesz. Im bardziej coś zakręcisz, tym większe prawdopodobieństwo, że się sp... zepsuje. Szczególnie w IE.
• Nie zapisujesz grafiki w 100% jakości- obrazki dużo zajmują, a różnica między jpg z super jakością, a jpg z jakością 70-80% praktycznie nie do zauważenia dla przeciętnego.
• Tagi i atrybuty z dużej litery to zło. Właściwie- duża litera w kodzie to zło.

Chyba tyle co ważniejszych "nie".

Teraz trochę na temat, jak by wypadało ciąć, żeby się przy tym nie pociąć.

• Znasz li jakiś edytor tekstu kolorujący składnię? Proponuję notepad++.
• Firefox Twoim przyjacielem. Odpalasz ff, instalujesz Firebug (ew. web developer toolbar) i jesteś gotów do walki z layoutami.
• Opera Twoim przyjacielem. Instalujesz developerskie zabawki i masz prawie firebuga.
• W IE Developer toolbar jest też parę zabawek do wgłębienia się w kod. Potrafi nawet podświetlać bloki i ma fajną linijkę xDD
• W photoshopie jest takie fajne narzędzie "crop tool" - proponuję poznać zasadę jego działania. Tak samo jak save for web.
• Strony robi się dzięki fajnym elementom, zwanym 'div', które styluje się przez arkusze stylu (css), a animuje przez javascript.
• Tabelki Twoimi przyjaciółmi. Jeżeli masz dużo danych typowo 'excelowych', to nie baw się z divami, tylko motaj na tabelkach (przy zachowaniu poprawnej dla doctype struktury).
• Validator Twoim przyjacielem, tak samo jak strony w3.org i w3schools.com - cała reszta tutoriali, etc może nie istnieć. Właściwie... powinienem zamiast tego tekstu wkleić link w3schools.com z adnotacją "przeczytaj" i byłoby bardziej praktyczne.
• Kiedy już masz zrobiony cały layout- sprawdzasz go w IE i poprawiasz (jeżeli masz taką ochotę- ja prywatnie mam go gdzieś. W pracy, niestety, trzeba trzymać jeden komputer specjalnie z ie6). Jeżeli używasz dużo paddingów, marginów, możesz jechać na bieżąco i sprawdzać w Trzech królach (Opera, FF, IE). Z nudów możesz jeszcze w webkitach.
• Jeszcze to czytasz? :x
• Gify wbrew pozorom są fajne. 256 kolorów z przezroczystością pozwala robić takie tricki z tłem, jak w stopce na stronie StarCraft 2.
• charset utf-8, pliki przekonwertowane do utf-8 bez BOM.

[PelzaK]

Jeszcze to czytasz? :x

nawet ja to przeczytałem... w sumie nie wypada się nie zgodzić

 

Aczkolwiek ja na bierząco sprawdzam jak storna wygląda na ff i ie (korzystając oczywiście z odpowiedniego plugina do ff :) )