Webmark

Laya ci�?cie gi�?cie

Index » Kategoria: Tutoriale » Tagi: Adobe Image Ready , szablon , tutorial.

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�?.

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:

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�?.

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:

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:

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"

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…

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.

Warstw�? "tresc" dodajemy oczywi??cie wewn�?trz warstwy "content" czyli:

Po ustaleniu wygl�?du listy menu oraz sformatowaniu nag????wk??w h2 odpowiedzialnych za tytu??y artyku????w na stronie i blok??w w menu strona wygl�?da ju?? ca??kiem przyzwoicie:

W zwi�?zku z budow�? stopki mo??na doda�? wewn�?trz niej jeszcze jedn�? warstw�? (lub np. akapit, kt??ry r??wnie?? jest elementem blokowym) dzi�?ki, kt??rej wypozycjonujemy zamieszczony w niej tekst.

Ostatecznie utworzona strona wygl�?da w tej chwili tak. Tak jak wcze??niej napisa??em pozosta??o jeszcze zoptymalizowanie t??a poszczeg??lnych warstw (zabawa w jednopikselowe, powtarzalne t??a) i oczywi??cie dodanie t??a ca??ej strony - ale o tym r??wnie?? nieco p????niej.
Najpierw postaram si�? wyja??ni�? kwestie zwi�?zan�? z floatowaniem warstw a nast�?pnie clearowaniem kontenera. Ot???? je??li warstwa jest (a jest) elementem blokowym to zajmuje ca??�? szeroko??�? kontenera, w kt??rym zosta??a umieszczona. Nie jest zatem mo??liwe aby dwie, trzy warstwy mo??na by??o umieszcza�? w jednej linii czyli obok siebie - ka??da nast�?pna warstwa by??aby umieszczana poni??ej poprzedniej. Najbardziej popularnym aczkolwiek nie jedynym sposobem na budowanie stron jest "floatowanie" warstw powoduj�?cych wyprowadzenie ich poza porz�?dek dokumentu. Floatowane warstwy "p??ywaj�?" nie s�? ju?? osadzone w pewnej kolejno??ci. Nadaj�?c im zatem odpowiedni�? szeroko??�? i "float" mo??na ustawi�? je obok siebie a wi�?c i budowa�? strony "kolumnowe". Aby nie rozpisywa�? si�? za bardzo na temty zwi�?zane z floatowaniem warstw podam kilka link??w do artyku????w, kt??re w do??�? przyst�?pny spos??b t??umacz�? poruszane zagadnienie. Floatowanie, floatowanie, floatowanie, floatowanie ??ci??le zwi�?zane z floatowaniem jest clearowanie kontenera, w kt??rym warstwy zosta??y umieszczone.

cdn w mo??liwie najkr??tszym czasie. Art. zosta?? opublikowany jako niezupe??nie doko??czony na pro??b�? kilku os??b

---

* * *

• Miniblog
• Komentarze
• Archiwum