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

[code lang="html"]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Tytuł strony











[/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.

miniaturka

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">


Tytuł strony











[/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:

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.

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

* 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=""> <s> <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

Ostatnie komentarze

admin