-
Jak stworzyć stronę za pomocą xhtml oraz css
dodano 12.09.2007 / komentarzy: 3 / autor: agressivaTen tutorial został napisany w celach edukacyjnych, dla osób, które rozpoczynają zabawe z XHTML + CSS. Dowiecie się z niego jak stworzyć stonę taką jak Sunny Design
Jak wygląda kod XHTML dla tej strony?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head><body>
<div id="container">
<div id="header"></div><div id="lewo">
<div id="menu">
<div class="menu"></div>
<ul id="mainmenu">
<li class="home"><a href="#">home</a></li>
<li class="ofirmie"><a href="#">o firmie</a></li>
<li class="portfolio"><a href="#">portfolio</a></li>
<li class="oferta"><a href="#">oferta</a></li>
<li class="news"><a href="#">news</a></li>
<li class="kontakt"><a href="#">kontakt</a></li>
</ul>
</div>
<div id="ramka">
<div class="zaufali"></div>
<ul id="navlist">
<li id="active"><a href="#" id="current">Schering Polska</a></li>
<li><a href="#">Schering Polska</a></li>
<li><a href="#">Schering Polska</a></li>
<li><a href="#">Schering Polska</a></li>
<li><a href="#">Schering Polska</a></li>
</ul>
<div class="more"><a href="#">zobacz wiecej >></a></div>
</div>
</div><div id="prawo">
<div id="gora">
</div><div id="dol">
<div class="gradient"></div>
<div class="ostatnie"></div>
<div class="obrazek"><img src="images/palma.jpg" alt="palma"/></div>
<div class="opis">
<h1 class="naglowek">Palms Design</h1>
Nunc sed erat eu massa lobortis convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor. Ut dictum aliquet neque. Vestibulum scelerisque mattis dui. Suspendisse tempor pharetra lorem. Nullam varius tortor quis nibh. Vivamus quis dui scelerisque leo dapibus varius. Nulla justo enim, vulputate at, semper vitae, ultricies ac, est. Nullam tincidunt eros quis diam.
<div class="ostatnie_more"><a href="#">czytaj wiecej >></a></div>
</div>
</div>
</div><div id="footer">
<div class="footer">Page created by Water Design © all rights reserved</div>
</div></div>
</body>
</html>Co do czego służy?
<div id="container">
Jest to div, w którym znajduje się cała zawartość strony - taki div musi być, ale nazwać go można dowolnie - podobnie jak wszystkie inne divy, spany, h1, h2 etc.<div id="header">
Za pomocą tego diva tworzymy nagłówek strony.<div id="lewo">i<div id="prawo">
Te dwa divy dzielą stronę na dwie kolumny - lewą i prawą.<div id="menu">
W tym divie znajduje się menu, które oparte jest na liście.<div id="ramka">
W tym divie znajdują się linki z działu “zaufali nam”.<div id="gora">
Ten div jest w kodzie pusty, ponieważ za pomocą wybranego skryptu nawigacyjnego będzie się w nim pojawiała zawartość podstron widocznych w menu.<div id="dol">
Jest to ta część strony umieszczona pod divem o klasie gora. Zawartość jej jest sztywna i znajduje się w głównym kodzie strony (index.html).<div class="gradient">
Ten div mimo, że wydaje się pusty to za pomocą stylu CSS zawiera w sobie tło - linie odzielającą divy:
<div id="gora">i<div id="dol"><div id="footer">
W tym dive znajduję się stopka strony - tło oraz tekst.Styl CSS
Na początek powinniśmy w stylu wyzerować wszystkie marginesy wewnętrzne (paddingi) oraz marginesy zewnętrzne (marginy), aby dla wszystkich przegladarek nasze późniejsze wartości były takie same:
* {
padding:0;
margin:0;
}To samo musimy zrobić dla obrazków, aby nie mialy obramowania nadanego automatycznie przez przegladarki (Firefox i IE)
img {
border:0;
}W body musimy nadać następujący styl
body {
text-align:center;
background:url(images/pasek.jpg) repeat-x #FFF;
}Dzięki
text-align:center;nasza strona będzie wyśrodkowana w przegladarce IE 5.
A dzięki background nadajemy tło - w tym przypadku w body widzimy szary i niebieski pasek (http://sunnydesign.glt.pl/images/pasek.jpg), który powtarza się w linii poziomej.
Aby wyśrodkować stronę w pozostałych przegladarkach, nalezy dodaćmargin:0 auto#container {
width:764px;
margin:0 auto;
text-align:left;
background:url(images/tlo.jpg) repeat-y;
font:11px Tahoma, Arial, Helvetica, sans-serif;
}0 oznacza że margin z góry i z dołu ma
0pxaauto, że prawy i lewy margin są dostosowywane automatycznie, są takie same po obydwu stronach.text-align:left;- powoduje tutaj, że tekst w zawarttości wyrównany jest do lewej strony.
Aby zdefiniować rodzaje użytych czcionek i wielkość używamy na przykład takiego skrótu:font:11px Tahoma, Arial, Helvetica, sans-serif;
Jeżeli chcemy nadać divowi o identyfikatorze header tło musi napisać:#header {
background:url(images/head.jpg) no-repeat;
width:764px;
height:195px;
}W taki sytuacjach koniecznie należy podać wysokość (height) i szerokość (width) obrazka, którego chcemy użyć w tle. No-repeat za lokalizacją obrazka oznacza, że tło to nie może się powtrzać ani w pionie ani w poziomie.
Teraz przechodzimy do stylizowania kolejnych dwóch ważnych divów, w których zamieszczać będziemy zawartość strony
<div id="lewo">i<div id="prawo">.Aby każda kolumna ustawiła się prawidłowo należy podać im szerokość oraz float (sprawia, że element zaczyna pływać i można go za pomocą odpowiednich atrybutów ustawić w odpowiednim miejscu), czyli:
Lewa kolumna ma płynąć do lewej strony -float:left;#lewo {
width:200px;
float:left;
color:#173E5F;
}
A prawa kolumna ma płynąć prawej strony -
float:right;#prawo {
width:550px;
float:right;
color:#173E5F;
margin:0 0 25px 0;
}Zajmijmy się teraz głównym menu. Jest ono oparte na liście. Jak wiadomo każda lista składa się z:
<ul>
<li></li>
<li></li>
<li></li>
</ul>Na standardzie przy każdym
<li>pokazuje się punktator - kropeczka. My musimy się tutaj pozbyć i zastosować jako punktatory małe ikonki./*Za pomocą list-style:none; pozbywamy się punktatorów, line-height:22px; określa wysokość między poszczególnymi < li >*/
#mainmenu
{
padding:0;
list-style: none;
font-size:13px;
color:#173E5F;
line-height:22px;
margin:0 0 0 30px;
}/*A za pomocą tych dwóch opcji ustalamy kolor czcionki w odnośnikach utworzonych w każdym < li > oraz to czy ma być podkreślenie czy nie*/
#mainmenu a {
color:#173E5F;
text-decoration:none;
}#mainmenu a:hover {
color:#54B4E5;
text-decoration:none;
}Jeżeli chcemy aby kazde
<li>miało inny obrazek, musimy każdemu<li>nadać inną klasę, a następnie podać odpowiednibackground(tło), aby tekst nie nachodził na obrazek najlepiej w kazdej pozycji podać taką samą wartośćpaddinga (0 .2em), np:#mainmenu li.oferta
{
padding-left: 25px;
background: url(images/oferta.gif) no-repeat 0 .2em;
}#mainmenu li.home
{
padding-left: 25px;
background: url(images/home.gif) no-repeat 0 .2em;
}#mainmenu li.portfolio
{
padding-left: 25px;
background: url(images/portfolio.gif) no-repeat 0 .2em;
}#mainmenu li.kontakt
{
padding-left: 25px;
background: url(images/kontakt.gif) no-repeat 0 .2em;
}#mainmenu li.oferta
{
padding-left: 25px;
background: url(images/oferta.gif) no-repeat 0 .2em;
}#mainmenu li.ofirmie
{
padding-left: 25px;
background: url(images/ofirmie.gif) no-repeat 0 .2em;
}#mainmenu li.news
{
padding-left: 25px;
background: url(images/aktualnosci.gif) no-repeat 0 .2em;
}Ramka niżej jest skonstruowana w bardzo podobny sposób - w tym miejscu dodaliśmy jedynie color tła oraz obramowania pola w którym znajduje sie lista z linkami:
#navlist
{
margin:0 0 0 30px;
padding:0;
list-style: none;
}#navlist li
{
padding:0 0 0 13px;
background: url(images/arrow.gif) no-repeat 0 .5em;
}#navlist li a {
text-decoration:none;
font-size:12px;
color:#173E5F;
}#navlist li a:hover {
color:#54B4E5;
text-decoration:none;
}#ramka {
width:170px;
background:#F0F0F0;
border:1px #4BC6DD solid;
margin:0 0 0 30px;
padding:10px 0 10px 0;
line-height:18px;
}.zaufali {
background:url(images/zaufali.jpg) no-repeat;
width:104px;
height:21px;
margin:0 0 10px 15px;
}Stopka strony zawiera w sobie obrazek oraz tekst.
Tekst został wypozycjonowany z lewej strony za pomocąmargin. Tagclear:both;w stopce służy można powiedzieć do zamknięcia wcześniej uzytychfloat:left;orazclear:right;i dzięki temu stopka jest częścią zamykającą całą stronę. Nie oznacza to oczywiscie, że pod nią nie można utworzyć kolejnych częsci strony.clear:both;może byc też używany w innych częściach kodu, tam gdzie jest potrzebny w tym samym celu co w tym.
<div id="footer">
<div class="footer">Page created by Water Design © all rights reserved</div>
</div>#footer {background:url(images/footer.jpg) no-repeat;
width:764px;
height: 26px;
clear:both;
}
.footer {
margin:0 0 0 450px;
padding:6px 0 0 0;
color:#173E5F;
}
I tak skonstruowana jest część główna strony.
Podstrony zbudowane sa na podobnej zasadzie. Możecie to zobaczyć po wejściu do źródła kazdej podstrony. Ich format jest zależy tylko od waszego zapotrzebowania i fantazji.Trzeba pamietać, że najważniejsze jest to, aby strona poprawnie była wyświetlana w każdej przeglądarce. Nie można właściwie żadnej lekceważyć, bo w ten sposób lekceważy się również gości naszej strony, którzy korzystają z innej przegladarki niż my.
Dlatego jeżeli chcemy sami zrobić sobie stronę musimy mieć co najmniej 3 podstawowe przeglądarki internetowe (Opera, Firefox, IE) aby móc od razu poprawiać błedy, które wychodzą w trakcie pisania kodu. Niestety nasz kod przez np. IE może być inaczej czytany niż przez Operę czy Firefoxa.Życzę miłej nauki.
Komentarze / dodaj komentarz
autor: Oryginalny blog na Wordpressie? Zrób go sam! cz.1 | vivee.info
dodano: 05.12.2007
[...] Więcej o kodowaniu stron www dowiecie się czytając tutorial temu poświęcony. [...]
autor: bzee.bzee
dodano: 11.07.2008
Witam, proszę o aktualizację odnośnika do strony Sunny Design :]
autor: palmiak
dodano: 11.07.2008
Już działa
Napisz komentarz