Laya ci─?cie gi─?cie

Index » Kategoria: Tutoriale » Tagi: , , .

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).

miniaturka

miniaturka

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 :)

miniaturka

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.

miniaturka

Projekt zosta?? poci─?ty na 5 cz─???ci, kt??re na potrzeby tutoriala zaznaczy??em r????nymi kolorami.

miniaturka

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.

miniaturka

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.

miniaturka

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

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <title>Tytu?? strony</title>
  4. <meta name="author" content="zama" />
  5. <meta name="generator" content="notatnik" />
  6. <meta http-equiv="reply-to" content="zama@op.pl" />
  7. <meta name="description" content="opis strony" />
  8. <meta name="keywords" content="s??owa kluczowe" />
  9. <meta name="copyright" content="zama" />
  10. <meta name="language" content="pl" />
  11. <meta name="robots" content="all" />
  12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2″ />
  13. <link rel="stylesheet" href="style.css" type="text/css" />
  14. </head>
  15. <body xml:lang="pl">
  16.  
  17. <!–zawarto??─? strony–>
  18.  
  19. </body>
  20. </html>

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.

miniaturka

Wszystkie warstwy strony zostan─? umieszczone w wycentrowanej warstwie nadrz─?dnej - "kontenerze", kt??r─? nazwa??em "podstawa". Schematycznie wygl─?da??oby to tak:

  1. 1.podstawa
  2. 2.lewa
  3. 3.top
  4. 4.content
  5. 5.menu
  6. 6.stopka
  7. 7.koniec podstawy

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

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <title>Tytu?? strony</title>
  4. <meta name="author" content="zama" />
  5. <meta name="generator" content="notatnik" />
  6. <meta http-equiv="reply-to" content="zama@op.pl" />
  7. <meta name="description" content="opis strony" />
  8. <meta name="keywords" content="s??owa kluczowe" />
  9. <meta name="copyright" content="zama" />
  10. <meta name="language" content="pl" />
  11. <meta name="robots" content="all" />
  12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2″ />
  13. <link rel="stylesheet" href="style.css" type="text/css" />
  14. </head>
  15. <body xml:lang="pl">
  16.  
  17. <div id="podstawa">
  18. <div id="lewa">
  19. <div id="top"></div>
  20. <div id="content"></div>
  21. </div>
  22.  
  23. <div id="menu">
  24. <div id="formularz"></div>
  25. </div>
  26.  
  27. <div id="stopka"></div>
  28. </div>
  29. </body>
  30. </html>

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:

  1. html, body, h1, h2, h3, h4, h5, h6, form, ul, ol, dl, dt, dd, li, div{
  2.         margin:0;
  3.         padding:0;
  4. }
  5. body{
  6.         background:#020202 url(images/bg.jpg);
  7.         color:#000;
  8.         font:normal 100% Verdana, Tahoma, Helvetica, sans-serif;
  9.         text-align:center;
  10. }

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:

  1. #podstawa{
  2.         width:760px; /*szeroko??─? strony*/
  3.         margin:0 auto;/*wycentrowanie warstwy*/
  4.         text-align:left;/*powr??t do domy??lnego wyr??wnania tekstu*/
  5.         background-color:#fff /*kolor warstwy*/
  6.         font-size:.75em; /*12px - wysoko??─? czcionki*/
  7.         background:url(images/bialy.jpg) #fff; /*kolor warstwy*/
  8. }
  9.  
  10. #lewa{
  11.         width:510px; /*szeroko??─? warstwy*/
  12.         float:left;
  13. }
  14. #top{
  15.         background:url(images/top.jpg) #242424;
  16.         height:227px /*wys. fragmentu*/
  17. }
  18. #content{
  19.         background:url(images/bg_content.jpg) #fff;
  20. }

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"

  1. #menu{
  2.         width:250px; /*szer. warstwy*/
  3.         float:right; /*warstwie nie nadaj─? t??a gdy?? przejmie je niejako od podstawy */
  4. }
  5. #formularz{
  6.         height:84px;
  7.         background:url(images/formularz.jpg) #242424;
  8. }
  9. #stopka{
  10.         background:url(images/stopka.jpg) #242424;
  11.         height:117px;
  12.         clear:both; /* o clearowaniu poni??ej*/
  13.  
  14. }

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…

  1. ul{
  2.         margin: 10px 10px 8px 24px;
  3. }
  4.  
  5. li {
  6.         list-style-type: square;
  7. }

Po wype??nieniu strony tekstem czyli "loremami" nasza strona wyglada mniej wi─?cej tak:

miniaturka

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.

  1. #tresc{
  2.         padding:10px;
  3. }
  4. #menu h2{
  5.         font:1.4em Tahoma, Verdana, sans-serif;
  6.         margin-left:24px;
  7.         color:#008ED2;
  8. }
  9. #tresc h2{
  10.         font-size:1.8em;
  11.         color:#540303;
  12.         text-align:left;
  13. }

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

  1. ……
  2.  
  3. <body xml:lang="pl">
  4.  
  5. <div id="podstawa">
  6. <div id="lewa">
  7. <div id="top"></div>
  8. <div id="content">
  9. <div id="tresc"> <!–w??a??nie tutaj–>
  10. tutaj tre??─? strony
  11. </div>
  12. </div>
  13. </div>
  14.  
  15. <div id="menu">
  16. <div id="formularz"></div>
  17. </div>
  18.  
  19. <div id="stopka></div>
  20. </div>
  21. </body>

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:

miniaturka

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.

  1. div #stopka_content{
  2.         padding:20px 30px 20px 0;
  3.         color:#696969;
  4.         width:500px;
  5. }

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 :)


* * *

  • 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 ?

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze s─ů moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy mo┼╝e spowodowa─ç zablokowanie IP komentuj─ůcego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B─?dziesz m??g?? prowadzi─? sw??j w??asny serwis lub reklamowa─? swoje us??ugi. A do tego zaoszcz─?dzi─? p??ac─?c niewielkie pieniadze za du??─? przestrze?? dyskow─?. Zapraszamy do zapoznania si─? ofert─? firmy hostingowej TimNet. Dzi─?ki naszej wsp????pracy z firm─? mamy do zaoferowania 25% bonifikat─? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa─?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj─?cego domy??lne parametry (dope??nienia, marginesy, wielko??─? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni─??

    Ju?? ponad p???? roku min─???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl─?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost─?pni─? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??─? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy─? czy narz─?dy i tkank─? ma zdrow─?. Wydaje mi si─?, ??e zupe??nie inaczej mo??na popularyzowa─? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi─?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi─?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi─?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP