Tworzymy krok po kroku stronę w HTML5 i CSS3 część 2
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:
- podgląd efektu końcowego naszego serwisu
- plik do ściągnięcia zawierające gotowy kod HTML i CSS opisany w tym artykule
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, sens-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', sens-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', sens-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 © 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: 6
Przed czym dokładnie stosowano zabezpieczenie? Które elementy mogą się rozszerzyć?
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.
Sans serif a nie sens. pozdrawiam.
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]