Tworzymy krok po kroku stronę w HTML5 i CSS3 część 2

kodowanie-part2-title.jpg

W poprzednim artykule przygotowaliśmy i omówiliśmy podstawy dotyczące naszej prostej strony internetowej w HTML5 i wykorzystując możliwości styli CSS3. Opisałem typowy dla nowej wersji HTML Doctype, podałem także moją propozycję struktury i podziału na konkretne elementy naszego projektu graficznego. W poniższym artykule nadszedł czas na szczegółowe kodowanie i ostylowanie poszczególnych części serwisu.

Dla ułatwienia udostępniam:

Tło i kontener strony

Zaczniemy od najprostszej czynności czyli ustawienie tła i wyśrodkowanego kontenera dla naszego serwisu. Kod odpowiadający za tę część serwisu:

body{
background: #50763b url('../img/background.png') repeat-x;
width: 100%;
font: 12px/20px Verdana, Arial, sans-serif;
color:#fff;
}

#wrapper {
margin: 0 auto;
width:960px;
padding:0 10px;
margin-bottom:20px;
overflow: hidden;
}

W body ustawiliśmy dla całego tła kolor ciemno zielony (#50763b). Dodatkowo wykorzystując stworzony plik background.png, o wymiarach zaledwie 1 px na 250 px, dodamy górny jasno zielony gradient. Aby obrazek wyświetlał się na całej szerokości naszego serwisu stosujemy właściwość repeat-x. Ustawiamy także nasza podstawową czcionkę, kolor, jej wymiary i szerokość odstępów między liniami.

Nasz kontener ustawiamy na szerokość 960px, która obecnie jest standardowym i polecanym wymiarem szerokości strony. Warto jednak zwrócić uwagę, iż powoli wartość ta się zwiększa i nie jest błędem skorzystać np. z 1100px. Korzystamy także ze standardowej metody środkowania naszego kontenera poprzez ustawienie automatycznych marginesów.

Logo, nawigacja i top

W pierwszej kolejności zajmiemy się logiem i nawigacją. W sekcji header dodajemy kod:

<h1><a id="logo" href="#" title="Bieszczady">Bieszczady</a></h1>
<nav>
<ul>
<li><a class="active" href="#">Strona główna</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Katalog Firm</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>

Logo to prosty link o id logo, który w domyśle ma przenosić nas do strony głównej serwisu. W tym przypadku korzystamy z klasycznej techniki image replacement i zastąpimy tytuł strony obrazkiem. Oto styl CSS:

#logo{
background: url('../img/logo.png') no-repeat;
height:60px;
width: 220px;
display: block;
cursor: pointer;
text-indent: -9999px;
margin: 0 0 10px 10px;
}

Logo.png to drugi obrazek, jaki będziemy potrzebowali do prezentacji naszej strony i zawiera on nazwę serwisu z przezroczystym tłem. Właściwość text-ident odpowiedzialna jest za przesunięcie treści linku poza ekran, dzięki czemu nie nachodzi on na nasz obrazek. Dla testów zachęcam do ustawienia wartości na 0 i zobaczyć efekt.

Dalej możemy zauważyć nowy element języka HTML5 czyli tag nav. Odpowiada on za nawigację w serwisie, jego stosowanie nie kończy się na standardowym menu strony, ale może także być wykorzystywany np. podczas mechanizmów „następny” i „poprzedni” w różnego typach galerii. Do naszego menu zastosujemy zgodnie z wszystkimi panującymi teraz standardami nienumerowaną listę linków. W tym momencie podczas nadawania styli, po raz pierwszy skorzystamy z możliwości CSS3. Chodzi dokładnie o aktywny link, który wykorzystuje zaokrąglone rogi i gradient.

header {
position: relative;
margin-top: 20px;
height: 300px;
}
header nav {
position: absolute;
right: 0;
top:10px;
}
header nav ul {margin:0; padding:0;}
header nav ul li {
float:left;
margin-left: 5px;
position: relative;
list-style: none;
}

header nav ul li a{
color:#fff;
text-decoration: none;
font-size: 14px;
padding:4px 8px;
display: inline-block;/* IE8 nadanie obiektowi hasLayout*/
}
header nav ul li a.active{
background: #F9D468;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#F9D467', endColorstr='#DDBC5B' );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#F9D467', endColorstr='#DDBC5B#F9D467')";
background: -moz-linear-gradient(top, #F9D467 0%, #DDBC5B 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9D467), color-stop(100%,#DDBC5B));
color:#764524;
border:1px solid #c7aa52;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px #85b54d;
-moz-box-shadow: 1px 1px 2px #85b54d;
box-shadow: 1px 1px 1px #85b54d;
}

header nav ul li a:hover{color:#764524;}

Początkowy kod to typowe ustawienie menu w prawym górnym rogu za pomocą pozycji absolutnych. Wykorzystanie float:left; aby menu znajdowało się w jednej linii.

Podczas nadawania styli kolejnym linkom w menu, na pewno zauważyliście ustawienie display:inline-block i odpowiedni przy tej komendzie komentarz. Jest to pewnego rodzaju obejście, które pozawala na używanie funkcji filter w IE8, które potrzebne jest nam dalej przy tworzeniu gradientów. Dalej korzystając z narzędzi opisanych w artykule Narzędzia CSS3, tworzymy odpowiedni gradient, zaokrąglenie rogów i ustawiamy niewielki cień pod aktywną zakładką. Dzięki tym czynnościom uzyskaliśmy bardzo fajny efekt, bez wykorzystania jakichkolwiek obrazków i innych irytujących technik z tym związanych.

Teraz nadszedł czas, aby dodać nasze podstawowe zdjęcie panoramy Bieszczad, wraz z kilkoma hasłami po prawej stronie. Wykorzystany kod HTML:

<section id="main-image" class="drop-shadow lifted">
<figure>
<h2>Natura</h2>
<h2 class="second">Wypoczynek</h2>
<h2 class="third">Przyroda</h2>
</figure>
</section>

I dalej kod odpowiedzialny za style dla tej części naszej strony:

header section#main-image {
background: url('../img/foto.jpg') no-repeat;
height:206px;
width: 930px;
display: block;
border: 5px solid #fff;
margin:0 auto;
-webkit-box-shadow:0 5px 6px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 5px 6px rgba(0, 0, 0, 0.25);
box-shadow:0 5px 6px rgba(0, 0, 0, 0.25);
}

section#main-image figure {
float:right;
height: 166px;
padding: 40px 0 0 60px;
width: 250px;
background-color:rgba(0, 0, 0, 0.5);
}

section#main-image figure h2{
font-family: 'CapsuulaRegular', sans-serif;
color:#fff;
font-size: 28px;
line-height: 38px;
}

section#main-image figure h2.second{margin-left:40px;}
section#main-image figure h2.third{margin-left:80px;}

W tej części warto zwrócić uwagę na wykorzystanie rgba jako sposobu prezentowania koloru w CSS3, co pozwala nam na zastosowanie przezroczystości jako 4 argumentu funkcji. Funkcja ta przyjmuje w pierwszych trzech polach wartości od 0 do 255, jako ostatni parametr odpowiadający za stopień wypełnienia przyjmuje wartości od 0, czyli całkowicie przezroczyste, do 1 które odpowiada za pełne wypełnienie.

Drugim wartym uwagi jest wykorzystanie niestandardowej czcionki CapsuulaRegular przy wykorzystaniu techniki @font-face opisanej szerzej w artykule @font-face – własna czcionka na stronie internetowej.

Artykuł i nowości

W kontenerze div#content dodajemy kod naszego artykułu, oraz osobnej sekcji, która będzie zawierał nowości na stronie.

<article>
<h2>Witamy na stronie</h2>
<p>(…Treść…)</p>
</article>
<section class="news">
<h2>Aktualności</h2>
<ul>
<li>
<h3>01.01.2011 Nowa promocja</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam non justo orci, eget aliquet augue.
Suspendisse sollicitudin turpis eu mi ornare viverra.</p>
</li>
<li class="row-end">
<h3>01.01.2011 Nowa promocja</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam non justo orci, eget aliquet augue.
Suspendisse sollicitudin turpis eu mi ornare viverra.</p>
</li>
</ul>
</section>

I style dla tej części naszego serwisu:

#content-wrapper {padding: 0 10px;overflow: hidden;}
#content-wrapper strong{color:#f9d467;}
#content-wrapper h2{
font-family: 'GraublauWebBold', sans-serif;
color:#fff;
font-size: 24px;
margin-bottom: 30px;
margin-top: 20px;
text-shadow:0 0 1px transparent;
}

#content {float:left;width:620px;}
article {padding-bottom: 30px;}

#content section.news ul{margin:0; padding:0;overflow: hidden;}
#content section.news ul li{float:left;width: 300px;margin-right: 20px;}
#content section.news ul li.row-end{margin-right: 0;}
#content section.news ul li h3{color:#f9d467;}

W pierwszym części ustawiamy podstawowe parametry naszych kontenerów na dalszą treść, czyli #content-wrapper i #content. Ustawiamy także nagłówek dla treści w naszych stronach (h2), korzystając ponownie z możliwości @font-face. Tym razem wykorzystałem czcionkę GraublauWebBold. Tutaj warto zwrócić uwagę na właściwość text-shadow, komenda ta pozwala w niektórych przypadkach na ładniejsze wyświetlanie dodawanych czcionek, likwiduje efekt „postrzępienia” czcionki i lekko ją wygładza. Metoda nie zawsze się sprawdza, ale nie szkodzi spróbować i porównać efekty. Style CSS dla sekcji nowości nie powinien stanowić większych problemów.

W tym miejscu pominięte zostały style CSS szczegółowej treści artykułu. Ten element pozostawiam czytelnikowi, polecam także skorzystanie z szablonu artykułu w HTML, zamieszczonego wcześniej na Webnote, dzięki któremu nie przegapimy żadnego tagu, który może wystąpić w naszym artykule.

Sidebar – galeria i dane kontaktowe

Dla kodowania sidebar wykorzystamy kolejny zaproponowany nam przez W3C tag – aside. Tag ten przeznaczony jest na treść poboczną, ale w pewien sposób powiązaną z właściwą treścią podstrony.  W naszym przypadku sidebar podzielimy na dwie sekcje. Jedna będzie galerią dla naszego artykułu, a druga będzie zawierała dane kontaktowe. Zacznijmy może od galerii.

Do prezentacji obrazków wykorzystam mój ulubiony skrypt galerii i tzw. „modal box” czyli ColorBox. Należy ściągnąć całą bibliotekę i zarówno plik JavaScript jak i styl CSS  podpiąć do naszej strony:

<link rel="stylesheet" href="style/colorbox.css" type="text/css" />
<script src="js/jquery.colorbox-min.js"></script>

Dalej tworzymy kod naszej galerii:

<section>
<h2>Galeria</h2>
<ul class="sidebar-gallery">
<li>
<a class="colorbox" rel="bieszczady" href="img/photo1.jpg">
<img src="img/thumb1.jpg" alt="" />
</a>
</li>
<li>
<a class="colorbox" rel="bieszczady" href="img/photo2.jpg">
<img src="img/thumb2.jpg" alt="" />
</a>
</li>
<li>
<a class="colorbox" rel="bieszczady" href="img/photo3.jpg">
<img src="img/thumb3.jpg" alt="" />
</a>
</li>
<li>
<a class="colorbox" rel="bieszczady" href="img/photo4.jpg">
<img src="img/thumb4.jpg" alt="" />
</a>
</li>
</ul>
</section>

Jak widać galeria to prosta lista obrazków. Link kieruje obrazka w większej rozdzielczości, a obrazek wewnątrz linku stanowi jego miniaturę. Dodatkowo na potrzeby Colorbox dodaliśmy klasę colobox, która zidentyfikuje dla nas elementy, które mają być objęte mechanizmem „lightbox”. Ustawienie parametru rel tworzy dla nas mechanizm galerii i sygnalizuje, że te 4 obrazki są ze sobą powiązane. Umożliwi to nawigacje pomiędzy kolejnym i poprzednim obrazkiem w ramach galerii „bieszczady”. Ostatnim krokiem przy tworzeniu naszej galerii jest dodanie na końcu sekcji body kodu:

<script type="text/javascript">
$(document).ready(function(){
$('a.colorbox').colorbox({speed:500,opacity:0.7});
});
</script>

który, zainicjuje naszą bibliotekę Colorbox. W tym momencie nasza galeria jest już gotowa.

Dalej w aside umieszczamy kolejną sekcje z danymi kontaktowymi – kod HTML:

<section>
<h2>Aktualności</h2>
<p>
<strong>Telefon:</strong> 123 456 789<br>
<strong>E-mail:</strong> biuro@bieszczdy.xyz
</p>
<br>
<p>
<strong>Adres:</strong><br>
ul. Mickiewicza 9<br>
Bieszczady 12-234
</p>
</section>

Kod prosty i myślę, że nie wymaga komentarza, podobnie jak style odpowiedzialne za sekcje aside:

aside {float:right;width:300px;}
aside section{margin-bottom: 20px;overflow: hidden;}

ul.sidebar-gallery{margin:0;padding:0;}
ul.sidebar-gallery li{float:left;margin: 5px 10px;}

ul.sidebar-gallery li a img{
border:4px solid #fff;
-webkit-box-shadow: 0px 3px 6px #444;
-moz-box-shadow: 0px 3px 6px #444;
box-shadow: 0px 3px 6px #444;
}

Jak widać z możliwości CSS3 wykorzystane zostały cienie (box-shadow) pod miniaturkami w galerii.

Stopka

Ostatnim elementem naszej strony jest stopka. Od pewnego czasu ta część serwisów odgrywa sporą rolę, zwłaszcza w serwisach blogowych. W specyfikacji HTML5 pojawił się więc tag footer, odpowiedzialny właśnie za stopkę. Warto dodać, że footer można także wykorzystać np. w artykule, gdzie na końcu posta zamieścimy informacje o autorze wpisu. W naszym przypadku sprawa jest bardzo prosta, poniżej kod HTML:

<footer>
<p class="left">Copyright &copy; 2011.
<a href="http://www.webnote.pl">Webnote.pl</a>
</p>
<nav class="right">
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Katalog Firm</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</footer>

i kod CSS:

footer {
clear:both;
margin-top:20px;
padding:15px;
background: #84BA4E;
display: block;
overflow: hidden;
-moz-border-radius: 5px;
border-radius: 5px;
}

footer nav ul {margin:0; padding:0;}
footer nav ul li{float:left;margin-left: 20px;position: relative;list-style: none;}
footer nav ul li a{text-decoration: none;color: inherit;}

Prezentacja

Czasami lepiej jest samemu przeglądnąć cały kod i zobaczyć efekt jego działania we własnej przeglądarce dlatego zapraszam do:

naszego pociętego projektu graficznego.

Podsumowanie

I tym sposobem zakończyliśmy tworzenie naszej prostej strony internetowej w HTML5 i CSS3. Był to możliwie najprostszy przykład, ale obrazujący dosyć spore możliwości stosowania nowych technologii. Sięgając głębiej w HTML5 odkryjemy Canvas, bezflashowe odtwarzanie filmów i dźwięków, a także wiele ciekawych opcji związanych z formularzami. Ale to są tematy na inne artykuły.

DyskusjaKomentarze: 18

  • Początkująca 20 maj 2011 18:08
    Czy w #wrapper bez overflow: hidden będzie prawidłowo?
    Przed czym dokładnie stosowano zabezpieczenie? Które elementy mogą się rozszerzyć?
  • Początkująca 20 maj 2011 18:46
    Ogólnie co daje overflow: hidden w #wrapper i #footer?
  • Morfeusz_2005 30 wrzesień 2011 14:14
    Myślę, że warto było by zamieścić Turorial na temat formularzy w HTML5. Bardzo ciekawa jest walidacja w nich bez użycia JS lub PHP.
    • Krzysztof Bachula 30 wrzesień 2011 17:03
      Formularze w HTML5 mają ogromny potencjał, niestety obecnie mało która przeglądarka w pełni wspiera te rozwiązania. Dałoby się to obejść korzystając z narzędzi typu Modernizer, ale moim zdaniem jest to obecnie niepotrzebne dublowanie kodu.
      Na blogu staram się pisać o rzeczach, które można faktycznie stosować w swojej pracy. Formularzy HTML5 bym na dzień dzisiejszy nie użył. Na pewno jednak niecierpliwie czekam na możliwość ich pełnego wykorzystywania.
    • Morfeusz_2005 30 wrzesień 2011 23:23
      Nie ma już tego problemu. Sprawdziłem demo na kilku przeglądarkach (Safari, Chrome, FireFox, Opera) Tylko IE sobie czasem krzaczy.
    • Tobiasz Gala 10 sierpień 2014 01:18
      Validacja danych z formularza bez uzycia skryptow serwerowych takich jak php jest bardzo niebezpieczna.
  • yacobi 06 maj 2012 20:01
    Hej,
    Sans serif a nie sens. pozdrawiam.
    • Krzysztof Bachula 31 maj 2012 17:58
      Dzięki! Już poprawione, gratuluje czujności.
    • Tobiasz Gala 10 sierpień 2014 01:17
      Validacja danych z formularza bez uzycia skryptow serwerowych takich jak php jest bardzo niebezpieczna.
  • mic 30 maj 2012 00:29
    klasa
  • kabexxx 21 czerwiec 2012 00:49
    Trzeba poprawić artykuł, CSS3 umożliwia tworzenie gradientów.
  • Arthur28 27 sierpień 2012 17:35
    Witam
    Co jest powodem,że w IE9 narożniki górnego menu (nav) nie są zaokrąglone? W Fireoxie wszystko jest ok? Jest jakieś rozwiązanie problemu?
    pozdrawiam
    Artur
  • Zdzisław 23 listopad 2012 14:52
    Witam, wykonałem krok po kroku , jak zrobić layout strony wg Pana tutoriala , jak można teraz połączyć to z kodem html? tzn. ja mam teraz wycinać te elementy z photoshopa ktore będa mi potrzebne?? do logo itp.?

    Jestem całkowitym laikiem, przepraszam jeśli jest to trywialne pytanie
  • admin_909 07 luty 2014 11:48
    Świetny artykuł jak na początek. Gratuluję, postaram się wdrożyć coś takiego dla mojej strony. Dziękuję.
  • bogkrz 06 maj 2014 09:12
    Niby wszystko proste, html można jeszcze napisać ale CSS - kolega sam z głowy go stworzył ? - jak już to trzeba podać metodologie jak z painshopa to wyłuskać a nie bawić się samemu, CSS to niestety makabra do kwadratu.
  • Budowanie stron 25 czerwiec 2014 14:53
    Poradnik całkiem dobry, zwłaszcza dla początkujących. Przydały by się jeszcze opisy semantyki poszczególnych znaczników.
  • Weterynarz Bonifacy 24 sierpień 2014 22:32
    Witam,
    Dzięki za cenny artykuł. Jedno pytanie, czy takzaprogramowane menu będzie dynamiczne? Czy jeśli się doda więcej pozycjiw menu, menu sie nie rozjedzie?
    Pozdrawiam,
    Bonifacy
  • Gregoras 31 październik 2014 00:47
    Fajnie wszystko opisane, ale niektóre rzeczy "wyklepane na oko", w sensie, że np. używasz (nie pamiętam już selektora) -9999px przy ułożeniu tekstu, co powoduje wyskoczenie tekstu z danego bloku i przejecie przez inny, a wydaje mi sie, ze css3 by pozwolil zyc w zgodzie.

    Mogę o coś zapytać?
    zawsze kojarzyło mi się z tekstem. h1 - tekst. Na przykładowej stronie zauważyłem, że jednak z tego nie tylko da się ulepić tekst. Lecz co do w3.. jest to zgodne coś takiego? W sensie czy h1 nie lepiejby było zrobić w divie (czy tam span-ie)?

    Dopiero uczę się, więc nie przyjmuj moich słów jako krytyki, bo nie miałaby ona podstaw, raczej jako dociekliwe pytania, których potencjalne odpowiedzi mnie odpowiednio ukierunkują.

    Czy kod, który jest napisany jest zgodny z w3? Czy w ogóle przestrzeganie zasad w3 jest tak b.ważne?

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]

Copyright © 2017 Webnote

Projekt i wykonanie: Xelos

Dodaj link