Laya cięcie gięcie
No i w koĹcu przyszedĹ czas na ciÄcie utworzonego wczeĹniej projektu. Otwieramy zatem plik psd w programie Adobe Image Ready, maksymalizujemy obszar roboczy i wyĹÄ czamy warstwy z tekstem lub elementami, ktĂłre zostanÄ utworzone później lub innÄ technikÄ (chociaĹźby formularz wyszukiwarki).
Zaznaczonym na rysunku narzÄdziem slice (odciÄcie [K]), wykorzystujÄ c prowadnice "tniemy" projekt na czÄĹci/warstwy, z ktĂłrych zostanie zbudowana strona. PowiÄkszamy lekko obszar roboczy (CTRL + +) i wspomnianym narzÄdziem zaznaczamy poszczegĂłlne obszary projektu. Jak ciÄ Ä? Ustawiasz "noĹźyk" w rogu fragmentu i przeciÄ gasz przy wĹÄ czonym LPM do odpowidniego miejsca 🙂
Po zaznaczeniu wszystkich prostokÄ tĂłw z paska narzÄdzi wybieramy narzÄdzie "Zaznaczanie odciÄcia" i przytrzymujÄ c klawisz "Shift" po kolei zaznaczamy (klikajÄ c na nie) kolejne, pociÄte czÄĹci. Na uĹźytek tutoriala, aby zachowaÄ przejrzystoĹÄ kodu, stopka zostaĹa przyciÄta w caĹoĹci.
Projekt zostaĹ pociÄty na 5 czÄĹci, ktĂłre na potrzeby tutoriala zaznaczyĹem róşnymi kolorami.
NiektĂłrzy zauwaĹźyli zapewne, Ĺźe projekt zostaĹ podzielony w zasadzie na dwie pionowe kolumny, w ktĂłrych zawierajÄ siÄ pozostaĹe czÄĹci i zakoĹczony na caĹej szerokoĹci stopkÄ , ktĂłra bÄdzie "clearowana" ale o tym nieco później. Po zaznaczeniu wszystkich czÄĹci projektu z menu wybieramy Plik -> Zapisz zoptymalizowany jako… [Ctrl+Shift+Alt+S] i po ustawieniu opcji podobnych jak na zrzucie ekranu zapisujemy plik np. na pulpicie.
Dlaczego takie opcje? Otóş zaleĹźy nam tylko na pociÄtych fragmentach projektu – kod napiszemy sami w … notatniku. Na poczÄ tek warto zmieniÄ nazwÄ folderu, w ktĂłrym zostaĹy zapisane w/w fragmenty jak rĂłwnieĹź ich wĹasne nazwy na bardziej zrozumiaĹe, ktĂłre kojarzyĹyby siÄ jednoznacznie z danym fragmentem strony.
I wĹaĹciwie to prawie wszystko. PozostaĹo jeszcze ustalenie tĹa strony i zoptymalizowania tĹa poszczegĂłlnych fragmentĂłw strony ale o tym rĂłwnieĹź nieco później.
Czas przejĹÄ do napisania strony. Warto sobie przygotowaÄ szablon, strukturÄ podstawowÄ
dokumentu, ktĂłry moĹźna bÄdzie wykorzystywaÄ wielokrotnie i zaoszczÄdziÄ sobie pisania ciÄ
gle takiego samego kodu. StwĂłrz plik tekstowy o nazwie "index" wklej do niego poniĹźszy kod i zapisz jako "index.html" – wĹaĹnie napisaĹeĹ stronÄ internetowÄ
.
[code lang="html"]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[/code]
Jaki widaÄ wybraĹem kodowanie strony iso-8859-2 chociaĹź standardem kodowania jest juĹź wĹaĹciwie utf-8. Absolutnie odradzam jednak kodowanie strony jako windows-1250. Czas zatem utworzyÄ strukturÄ strony czyli jej "body" a nastÄpnie wypeĹniÄ jÄ
treĹciÄ
.
No to lecimy z warstwami. Obie kolumny majÄ
ĹÄ
cznie 760px szerokoĹci – rozmiar taki zostaĹ ustalony juĹź podczas projektowania strony. Lewa kolumna z topem ma szerokoĹÄ 510px zaĹ kolumna prawa (na menu i formularz wyszukiwarki) ma szerokoĹÄ 210px. Rozmiar obrazka a zarazem danej warstwy, ktĂłra zostanie nim bÄ
dĹş tĹem wypeĹniona moĹźna sprawdziÄ w jego wĹaĹciwoĹciach lub po zaznaczeniu danego fragmentu w AIR.
Wszystkie warstwy strony zostanÄ umieszczone w wycentrowanej warstwie nadrzÄdnej – "kontenerze", ktĂłrÄ nazwaĹem "podstawa". Schematycznie wyglÄ daĹoby to tak:
[code lang="css"]
1.podstawa
2.lewa
3.top
4.content
5.menu
6.stopka
7.koniec podstawy
[/code]
PoszczegĂłlnym warstwom nadam odpowiedni identyfikator, ktĂłrego nazwa nie moĹźe powtarzaÄ siÄ w dokumencie i wszystko ujmÄ w kod html. ZwrĂłÄcie szczegĂłlnÄ uwagÄ na zamykanie poszczegĂłlnych warstw. Jeden otwarty i niezamkniÄty "div" potrafi zdemolowaÄ pracowicie przygotowywanÄ stronÄ.
[code lang="html"]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[/code]
I wĹaĹciwie to tyle co moĹźna napisaÄ w html-u – struktura strony zostaĹa napisana – do jej ĹşrĂłdĹa powrĂłcimy aby wypeĹniÄ jÄ treĹciÄ . ResztÄ zajmÄ siÄ Kaskadowe Arkusze StylĂłw (CSS). Na poczÄ tek zabawy z css-em rĂłwnieĹź moĹźna utworzyÄ szablon pliku css. Tworzymy plik tekstowy "style.txt" zmieniamy jego rozszerzenie na css czyli "style.css" i rĂłwnieĹź w notatniku zapisujemy:
[code lang="css"]
html, body, h1, h2, h3, h4, h5, h6, form, ul, ol, dl, dt, dd, li, div{
margin:0;
padding:0;
}
body{
background:#020202 url(images/bg.jpg);
color:#000;
font:normal 100% Verdana, Tahoma, Helvetica, sans-serif;
text-align:center;
}
[/code]
W ten sposĂłb pozbyliĹmy siÄ marginesĂłw i dopeĹnieĹ w wiÄkszoĹci elementĂłw strony ustaliliĹmy rozmiar, rodzaj i rodzinÄ czcionki, nadaliĹmy jej kolor czarny, opisaliĹmy tĹo dokumentu i ustaliliĹmy wycentrowanie tekstu co okaĹźe siÄ niezbÄdne (dla IE) aby wycentrowaÄ warstwÄ nazwanÄ
"podstawa" a zarazem i wszystkie inne w niej zawarte.
Zaczynamy opisywaÄ warstwy:
[code lang="css"]
#podstawa{
width:760px; /*szerokoĹÄ strony*/
margin:0 auto;/*wycentrowanie warstwy*/
text-align:left;/*powrĂłt do domyĹlnego wyrĂłwnania tekstu*/
background-color:#fff /*kolor warstwy*/
font-size:.75em; /*12px – wysokoĹÄ czcionki*/
background:url(images/bialy.jpg) #fff; /*kolor warstwy*/
}
#lewa{
width:510px; /*szerokoĹÄ warstwy*/
float:left;
}
#top{
background:url(images/top.jpg) #242424;
height:227px /*wys. fragmentu*/
}
#content{
background:url(images/bg_content.jpg) #fff;
}
[/code]
Nie okreĹlam szerokoĹci warstw "top", "content" i "stopka" gdyĹź jako elementy blokowe zajmujÄ one caĹÄ dostÄpna przestrzeĹ kontenera, w ktĂłrym zostaĹy umieszczone. W przykĹadzie "top" i "content" rozciÄ gnÄ siÄ na szerokoĹÄ warstwy "lewa" zaĹ stopka na szerokoĹÄ warstwy "podstawa"
[code lang="css"]
#menu{
width:250px; /*szer. warstwy*/
float:right; /*warstwie nie nadajÄ tĹa gdyĹź przejmie je niejako od podstawy */
}
#formularz{
height:84px;
background:url(images/formularz.jpg) #242424;
}
#stopka{
background:url(images/stopka.jpg) #242424;
height:117px;
clear:both; /* o clearowaniu poniĹźej*/
}
[/code]
Z grubsza rzecz biorÄ
c struktura dokumentu zostaĹa utworzona. Strona zawiera prawie () wszystkie elementy – te, ktĂłre zostanÄ
dodane wpĹynÄ
nie na zachowanie strony lecz na jej wyglÄ
d i wraĹźenia wizualne 😉
Czas na menu czyli listÄ nieuporzÄ
dkowanÄ
. OczywiĹcie w prawej kolumnie strony moĹźna umieszczaÄ kolejne bloki strony, grafikÄ, formularze itp…
[code lang="css"]
ul{
margin: 10px 10px 8px 24px;
}
li {
list-style-type: square;
}
[/code]
Po wypeĹnieniu strony tekstem czyli "loremami" nasza strona wyglada mniej wiÄcej tak:
Nie jest Ĺşle chociaĹź moĹźe byÄ lepiej. TreĹÄ jak widaÄ za bardzo przylega do elementĂłw strony. Z pomocÄ nadmiarowej warstwy "tresc" i nadaniu jej odp. dopeĹnieĹ oraz wyrĂłwnania tekstu moĹźna uzyskaÄ o wiele lepszy efekt. Przy okazji moĹźna rĂłwnieĹź odpowiednio sformatowaÄ nagĹĂłwki h2.
[code lang="css"]
#tresc{
padding:10px;
}
#menu h2{
font:1.4em Tahoma, Verdana, sans-serif;
margin-left:24px;
color:#008ED2;
}
#tresc h2{
font-size:1.8em;
color:#540303;
text-align:left;
}
[/code]
WarstwÄ "tresc" dodajemy oczywiĹcie wewnÄ trz warstwy "content" czyli:
[code lang="html"]
……
tutaj treĹÄ strony
-
Napisał: kris — 17/05/2007 @ 16:54
Witam – no nareszcie sie doczekaĹem – dobrze, Ĺźe mam RSS-a 😉 póŠroku trochÄ czasu. JuĹź sobie skopiowaĹem tutka i myĹlÄ, Ĺźe jak tylko znajdÄ trochÄ czasu to sobie poprĂłbujÄ. Szata graficzna strony znĂłw bardzo ciekawa (jak zawsze).
Pozdro Zama i nie dawaj znĂłw tak dĹugo czekaÄ na ciekawe artykuĹy.
-
Napisał: Booxa — 19/05/2007 @ 13:23
Witam, mam pewna sugestje co do bloga.
Jego aktualny layout jest bardzo fajny, ale niestety za waski, przez co niewygodnie sie go czyta. CzĹowiek (przynajmniej ja) jest zmeczony po okoĹo 1/4 tekstu. -
Napisał: zama — 19/05/2007 @ 15:17
ZdajÄ sobie z tego sprawÄ. W linii jest o ok. 18-20 znakĂłw za maĹo do optymalnego "ogarniania" tekstu wzrokiem. Blog nie jest jednak blogiem czysto informacyjnym. W sumie przedstawiam w nim projekty stron i trochÄ ciekawostek z css zaĹ tutoriale powstaĹy na proĹby czytelnikĂłw. Przy kolejnej zmianie szaty graficznej wezmÄ Twoje uwagi pod uwagÄ 🙂
-
Napisał: konieczny — 16/06/2007 @ 11:44
Hej Zama!
Napisz kiedyĹ kilka sĹĂłw o wariantach Drop Shadow, bo robisz super cienie. Nie chodzi mi o narzucenie Efektu na tÄ samÄ warstwÄ. Ty masz same cienie pod warstwÄ nadrzÄdnÄ i pod róşnymi kÄ tami. Jak to robisz? PrzykĹad tego o co mi chodzi jest w topie Blue.psd.
pozdrawiam
-
Napisał: zama — 17/06/2007 @ 03:50
Zerknij do tutoriala i fragmentu z cieniem kobiety w topie http://webmark.shost.pl/blog/?cat=6&paged=2 . "Cieniem" tworzonym na odrÄbnej warstwie moĹźna w dowolny sposĂłb manipulowaÄ.
-
Napisał: halley — 06/07/2007 @ 11:42
Bardzo fajna porada. Dla mnie bomba. Czasem ludziki sie pytajÄ jak zrobiÄ stronÄ a tu proszÄ krok po kroku w screenach wszystko ujÄte. Poprostu piÄkne.
-
Napisał: stato — 11/10/2007 @ 15:58
SUPER! DziÄki tego szukaĹem. Trudno jest znaleĹşÄ dobry tutek. Od dawna odwiedzam webmark. Szkoda Ĺźe juĹź nie jest rozwijany. ZachÄcam do wiÄkszej liczby tutkĂłw. MĂłgĹbyĹ napisaÄ coĹ o ajaxie ( dopatrzyĹem siÄ na stronie :))
-
Napisał: Wojtek — 26/12/2008 @ 01:28
Dlaczego w Firefoxie nie wczytuje arkusza stylĂłw, a w Operze czy IE jest wszystko w porzÄ dku ?
tanie serwery www: timnet.pl
Webmark został zbudowany na silniku Wordpress
wpisy (rss) • komentarze (rss)
design by zama 2008
Ostatnie komentarze
- Karol: Strona robi dobre wrażenie, pozdrawiam
- olka: genialna strona
- ad-system: Super strona, dużo przydatnych informacji.
- mazancak: Bardzo mi sie podoba stronka, przejrzysta i klarowna,przyjazna dla przeciettego uzytkownik
- Marek: Witam, czy jest możliwość pobrania starego szablonu z Webmarka, mianowicie chodzi mi o sza
- ogłoszenia busko: Treść super i grafika ekstra
- fotograf modeli do sklejania: Fantastyczny plugin, dĹugo czekaĹem na coĹ, co pomoĹźe szybko wyciÄ Ä model i przenieĹ
- NK: Super strona, zapraszam teraz na mojÄ Nasza kl
- Tomek: Webmark jak zawsze wyjÄ tkowo..:)
- Ania: Fajna strona. Bardzo podoba mi siÄ jej design.
- forex: Ciekawa stronka.
- Fotograf: DoskonaĹa strona.
- Marek: Ĺwietna stronka , super grafika , pozdrawiam . -
- CNF: Cenie takie przydatne strony ja ta. Mam nadzieje, Ĺźe moja nowa strona CNF - MateriaĹy bu
- Anna: Fajna grafika, ktĂłra sprawia Ĺźe miĹo patrzy siÄ.
- Aneta: Brawa za grafikÄ
- Krecik: Bardz interesujÄ cy design. Templatka jest darmowa czy pĹatna?
- jak-biegaÄ: Stronka pierwsza klasa, choÄ ksiÄga goĹci powinna byÄ podzielona na sekcje by nie trze
- Marcus_the_mutant: Ĺadna strona. Podoba mi siÄ to zszycie w nagĹĂłwku.
- Piotr: Witaj, piszÄ tutaj bo nie znalazĹem innego kontaktu do Ciebie. Pytanie jest czy nie chci
- Qba: Ĺwietne tutki. ZwĹaszcza mi siÄ przydaĹ "lay w 10 krokach". Pozdrawiam
- PaweĹ: Bardzo podoba mi siÄ ten pomysĹ. OgĂłlnie fajne sÄ takie niestandardowe strony. Oby wiÄ
- Adam: JesieĹ idzie wiÄc zbiera siÄ na sentymenty i dlatego tu wpadĹem. WspominaĹem kiedyĹ
- Modelarz: Mnie teĹź juĹź dawno tutaj nie byĹo ;]
- RafaĹ: Dawno nie byĹem na Webmarku, klasa sama w sobie :) wychowaĹem siÄna tej stronie - pozdr
Design flash sifr dymek Adobe Photoshop Adobe Image Ready core centrowanie warstwy linki gry theme takie tam... css jasny tutorial WP szablon ciemny psd