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

[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"]
……

 

tanie serwery www: timnet.pl

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