Kodujemy layout

11 marca, 2012 w kategoriach: Web developing, HTML, xHTML, Pierwsze kroki

11,980 9
Dane:
  • Czas pracy: 1-1,5 godziny
  • Poziom: Podstawowy
Opis:

Poradnik przedstawiający jak zakodować swój pierwszy layout.

Pliki do pobrania

Pokaż/Ukryj wszystko

Kurs efektowne strony z CSS3

Witam. W tym poradniku opiszę jak zakodować swój pierwszy layout wykonany w photoshopie w kodzie HTML i CSS. Nasz szablon będzie kompatybilny ze wszystkimi aktualnymi przeglądarkami.

Projekt graficzny
Nie będę tutaj opisywał jak go wykonać, gdyż nie tego tyczy się tutorial. Będę bazował na szablonie zawartym TUTAJ. Na potrzeby poradniku lekko go zmodyfikuję, a efekt końcowy można zobaczyć tutaj:

EFEKT KOŃCOWY

Plik psd po lekkiej modyfikacji: tutaj

Zapraszam do drugiego kroku, gdzie potniemy nasz szablon. ;)


Wydawnictwo Strefa Kursów

Jeśli nie chcesz tracić czasu na cięcie możesz pobrać pocięte już obrazki tutaj. Ale jeśli jesteś faktycznie początkowym użytkownikiem zapraszam Cię do krótkiego zapoznania :)

Otwieramy nasz layout zaprojektowany w Photoshopie. Wybieramy narzędzie ‚Slice Tool’ (C). I zaznaczamy obrazki, grafikę jaką chcemy umieścić na stronie www. Dodam także, że nie ‚tniemy’ całej strony. Tła o jednym kolorze, tekstów nie zaznaczamy, gdyż będziemy je pisać w edytorze HTML (chyba, że jest to tekst nietypowy).
Naszego pomarańczowego, zszumowanego tła także nie tniemy całego tylko jakiś fragment, najlepiej, o maksymalnej wysokości i o szerokości np. 10px. Tak samo robimy z separatorem.

Po zaznaczeniu naszych obiektów przechodzimy do File>Save for Web & Devices. Wybieramy format png i zapisujemy w utworzonym wcześniej katalogu ‚images’.

Oto jakie obrazki będą nam potrzebne:

Alt Untitled-2

Przejdźmy teraz do edytora HTML. W moim wypadku będzie to Adobe Dreamweaver CS4. :)

W wybranym przez nas edytorze tworzymy dokument HTML. Zapiszmy go w folderze głównym projektu jako ‚index.html’.
Na początku dokumentu piszemy standardową linijkę, która określa jakim językiem jest zrobiona strona. Dajemy także znacznik html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

Następnie zaczynamy sekcję head. Ustawiamy kodowanie strony na ‚utf-8’, a także język polski.

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />

Podajemy ścieżkę naszgo pliku css, który stworzymy później.

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

Nadajemy przykładowy tytuł stronie i kończymy sekcję head.

<title>Kodujemy layout - Poradnik dla tutorials24.pl</title>
</head>

Zacznijmy część główną naszej strony, czyli sekcję body. Dodajmy komentarz, który będzie nam podpowiadał o poniższym kodzie.

<body>
<!-- HEADER -->

Struktura strony będzie zbudowana ze znaczników ‚div’. Div to inaczej kontener, który jest elementem blokowym o niewielu domyślnych właściwościach. Dlatego w łatwy sposób możemy stylować divy w CSS.
Dodajmy więc pierwszy div ‚header’, a w nim zagnieździmy kolejne divy.
Kontener ‚logo’ przetrzymywać będzie nasz plik graficzny z logiem, który odsyłać będzie do pliku ‚index.html’.

<div id="header">
<div id="logo"><a href="index.html"><img src="images/logo.png" border="0" /></a></div>

Jak widzisz do odsyłania na inne strony/podstrony posłuży nam znacznik <a> z wartością href, czyli źródło.

Następnie dodajemy kontener z naszym menu. Zamieśmy w nim listę nieuporządkowaną (<ul>), która posiada własne listki (<li>). Kończymy także kontener ‚header’.

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>

Część górna już za nami. Przejdźmy teraz do części głównej. Dajmy odpowiedni komentarz i utwórzmy kontener ‚content’, a w nim kolejne pod obiekty.

<!--- CZESC GLOWNA--->
<div id="content">
<div id="main_content">

Zamieśćmy div lewy i prawy. Lewy kontener będzie pusty, zaś prawy przechowuje nagłówek (<h2>), kontener z separatorem (div ‚line’), paragraf z tekstem (<p>), kolejny separator i przycisk, który będzie odsyłał na inną stronę (div ‚button’).
Zakończmy div ‚content’.

<div id="left_content"></div>
<div id="right_content">
<h2>Orangia dla iPhone</h2>
<div id="line1"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper ultrices mi eu lacinia. Nunc a iaculis purus. In libero odio, feugiat vitae pharetra placerat, hendrerit eget dolor. Praesent eu molestie dui. Etiam suscipit velit vitae orci gravida eget consectetur turpis pretium.<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper ultrices mi eu lacinia.</p>
<div id="line2"></div>
<a href=""><div id="button"></div></a>
</div>
</div>
</div>

Przejdźmy do naszej stopki. Utwórzmy w niej odpowiedni kontener, a w nim dajmy na początku obiekt ‚partnerzy’.

<!-- STOPKA --->
<div id="footer">
<div id="partnerzy">

Będzie on przechowywał obrazki naszych partnerów (w tym przypadku tutorials24.pl), które będą odsyłać na odpowiednią stronę.

<a href="http://www.tutorials24.pl"><img src="images/tutorials24.png" /></a>
<a href="http://www.tutorials24.pl"><img src="images/tutorials24.png" /></a>
<a href="http://www.tutorials24.pl"><img src="images/tutorials24.png" /></a>
<a href="http://www.tutorials24.pl"><img src="images/tutorials24.png" /></a>
</div>

Stwórzmy w stopce także odpowiednie informacje o prawach itp. Na koniec kończymy sekcje div.

<div class="left"><p>Copyright 2012 by unnamed.com</p></div>
<div class="right"><p>Poradnik dla <a href="http://www.tutorials24.pl">tutorials24.pl</a></p></div>
</div>

Kod HTML został prawie ukończony. Należy jeszcze domknąć tag body i html.

</body>
</html>

Zatem możesz teraz otworzyć plik index.html w przeglądarce. Jaki wyszedł efekt? A no właśnie.. Niezbyt ciekawy :) To wszystko dlatego, że stworzyliśmy tak naprawdę tylko strukturę naszej strony. Czas by ją ostylować w kodzie css. ;)

Otwieramy nasz edytor.
W pliku css do poszczególnych elementów odwołujemy się w zależności od tego, czy mają one nadane klasy, czy identyfikatory. Są też znacznik podstawowe tj body.
Jak zauważyłeś / zauważyłaś często zamieszczałem kontenery o wybranym ‚id’. Do id odnosimy się poprzez ‚#’identyfikator, a do klasy ‚.’nazwa_klasy.
Następnie są bloki, w którym deklarujemy dane wartości, które zaczynamy znakiem ‚{‚, a kończymy ‚}’. Chciałbym Ci poradzić, abyś starał się tworzyć swój kod estetycznie. Tak, aby mieć dobry wgląd na to, co już mamy.
Zacznijmy od ustawień resetowych, czyli dla każdego elementu ustawiamy margines i położenie = 0.

* {
margin: 0;
padding: 0;
}

Dla sekcji body (naszego dokumentu) ustawiamy kolejno: rodzaj czcionki, jej wielkość, kolor i kolor tła.

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #0e0e0e;
background: #101010;
}

Dla kontenera o ‚id’ header ustawiamy szerokość (width), wysokość (height) w pikselach. Najlepiej podejrzeć plik psd i zobaczyć ile tak naprawdę będzie ten obszar mierzył. Ustawiamy także margines na ‚0 auto’. Pierwsza liczba odpowiedzialna jest za górny i dolny margines, a druga za lewy i prawy. Takie ustawienie da nam margines wyśrodkowany.

#header {
width: 960px;
height: 60px;
margin: 0 auto;
}

Następnie kontener ‚logo’ chcemy umieścić po lewej stronie. Z pomocą przychodzi wartość ‚float’. Damy ją także 15px niżej.

#logo {
float: left;
padding-top: 15px;
}

Podobne wartości dla kontenera ‚menu’. Analogicznie bierzemy go na prawą stronę.

#menu {
padding-top: 25px;
float: right;
}

Ustawiamy listę nieuporządkowaną i jej listki. Lista będzie bez żadnego stylu (list-style) i widoczna będzie jako blok. Natomiast elementy li będą położone w jednej linii i oddzielone od siebie 8px od prawej strony.

#menu ul {
list-style: none;
display: block;
}
#menu ul li {
display: inline;
padding-right: 8px;
}

Ustawiamy także właściwości dla odnośników.Text-transform posłuży nam za to by wszystkie litery były duże.

#menu ul li a {
color: #fff;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
text-transform: uppercase;
text-decoration: none;
}

Następnie wartość ‚hover’, czyli wygląd odnośnika po najechaniu na niego myszką. Dajmy mu inny kolor i podkreślenie.

#menu ul li a:hover {
text-decoration: underline;
color: #ccc;
}

Przejdźmy do ostylowania części głównej.
Pierw stylujemy nasze tło (‚content’). Jako tło (background) ustawiamy adres do pliku. Zauważ, że ma ono wartość ‚repeat’, czyli się powtarza. Dajemy także obrys górny i dolny (border) i szerokość 100%.

#content {
width: 100%;
height: 544px;
background: url("../images/bg.png") repeat;
border-top: 1px solid #ffcc00;
border-bottom: 1px solid #ffcc00;
}

Przejdźmy teraz do zawartości. Wyśrodkujmy ją, dajmy odpowiednią szerokość i odstęp.

#main_content {
width: 960px;
margin: 0 auto;
padding-top: 50px;
}

Lewy i prawy kontener stylujemy poznaną już własnością ‚float’. Zauważ teraz, że lewy kontener, który był pusty będzie teraz przetrzymywał obrazek.

#left_content {
width: 310px;
height: 501px;
background: url("../images/iphone.png") repeat;
float: left;
}
#right_content {
float: right;
width: 550px;
}

Odnieśmy się teraz do znacznika h2 zawartym w prawym kontenerze. Nadajmy mu odpowiedni kolor, wielkość, a także cień i położenie liter.

#right_content h2 {
color: #141414;
font-size: 48px;
text-shadow: #fff 1px 1px 1px;
letter-spacing: -3px;
}

Jak się zapewne domyślasz za cień posłużyła nam własność text-shadow. Pierwsza jego wartość to kolor, druga to położenie poziome, trzecia pionowe, a czwarta to rozmycie.

Ustawiamy odpowiednie położenie dla paragrafu i także nadajemy mu mały cień.

#right_content p {
padding: 20px 0;
text-shadow: #777 1px 1px 1px;
}

Stylujemy nasze separatory, czyli ‚line1’ i ‚line2’. Będzie to nic innego jak powtarzany, bardzo mały obrazek.

#line1 {
margin-top: 5px;
width: 470px;
height: 2px;
background: url("../images/separator.png") repeat;
}
#line2 {
margin-top: 5px;
width: 550px;
height: 2px;
background: url("../images/separator.png") repeat;
}

Stylujemy nasz przycisk. Zwróć uwagę na to, że tłem dla niego będzie tylko połowa obrazka. Zaś druga połowa ukaże się jak będzie on aktywny (jak na niego najedziemy).

#button {
margin: 20px;
width: 148px;
height: 39px;
background: url("../images/button.png") repeat;
}
#button:hover {
background-position: center bottom;
}

Przechodzimy do naszej stopki. Centrujemy ją absolutnie.

#footer {
width: 960px;
height: 200px;
margin-left: -480px;
left: 50%;
position: absolute;
}

Ustalamy także wartości dla kontenera ‚partnerzy’.

#partnerzy {
width: 100%;
height: 150px;
}

Odwołujemy się do obrazków w nim zawartych. Nadajemy brak ramki i odpowiednie odległości.

#partnerzy img {
border: none;
margin: 35px 10px;
float: left;
}

Teraz odwołamy się do kontenera o klasie ‚lewy’ i ‚prawy’. A odwołujemy się do nich poprzez kropkę. Ustawiamy im kolor czcionki, położenie i szerokość.

#footer .left {
color: #bfbfbf;
float: left;
width: 250px;
}
#footer .right {
color: #bfbfbf;
float: right;
width: 250px;
}

Na sam koniec ustawiamy wartości dla odnośnika normalnego, jak i po najechaniu na niego.

#footer .right a {
color: #bfbfbf;
text-decoration: none;
}
#footer .right a:hover {
color: #FC0;
text-decoration: underline;
}

Możesz już zapisać swoje zmiany i podejrzeć swoją stronkę. Jak zapewne widzisz stronka już funkcjonuje poprawnie. Co za tym idzie? Oczywiście świetne połączenie kodu HTML i CSS.

Podgląd efekt końcowego tutaj.
Zakodowana strona tutaj

Pozdrawiam, Fisz ;)

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (9 wypowiedzi)

Dodaj odpowiedź

Dodaj komentarz