STRONA W xHTML'u - KROK PO KROKU, część 1 - pocięcie layoutu i napisanie styli

**~~Vo!teZ~~** · 19.01.2008, 01:17

Witajcie, wychodząc naprzód waszym prośbom - postanowiłem napisać tutorial o tworzeniu stron od podstaw – czyli od layout’u aż po zrobienie podstron itd.. – w pełnej specyfikacji z XHTML 1.1 oraz CSS. To co przeczytacie (mam nadzieje) poniżej stanowi tylko część 1, i dotyczy pocięcia layoutu do xHTML'a i CSS'a. Zapraszam do przeczytania !!

ZACZYNAMY – jako layout’u użyjemy prosty przykładowy design wykonany przez Jakuba:

Zobaczcie…

Po pierwsze musimy z istniejącego już layout’u wyciąć obrazki, w naszym wypadku wystarczą dwa.. Zastosujemy do tego celu programu ADOBE IMAGE READY… Robimy wszystko zgodnie z powstałym już tutorialem. Odcięcia zaznaczamy w taki sposób

Pamiętamy jeszcze tylko o jednym, żeby pliki graficzne zapisało nam do formatu gif (domyślnie JPG) – aby to ustawić w zakładce ZAWARTOŚĆ WWW zaznaczamy poszczególne odcięcia a w zakładce OPTYMALIZUJ – format ustawiamy na GIF a w ustawieniach bierzemy opcję pierwszą od góry…

Gdy zapiszemy już stronę jako HTML szukamy plików graficznych wytworzonych przez program… zaznaczamy te dwa a resztę możemy usunąć – wygenerowany przez program kod HTML również… Nasze obrazki wyglądają tak:
Teraz musimy zająć się napisaniem szkieletu na 3-kolumny opartego na divach. Budowę czegoś takiego dokładniej opisała już Aga_kc i to z jej tutoriala tutaj skorzystamy. Oto kod - jego opis jest w linku powyżej.

Kod php:

 <?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Author" content="SADDAM92" />
  <title> STRONA W XHTML'u KROK PO KROKU by SADDAM92</title>
</head>
<body>
    <div id="container">
         <div id="header"> </div>
         <div id="navcontainer">
               <div id="nav1"></div>
               <div id="nav2"></div>
        </div>
         <div id="srodek"></div>
         <div id="stopka"></div>
    </div>
</body>
</html>

Gdy mamy już szkielet strony, to warto by był wrzucić na nią jakiś tekst…

Kod php:

 <?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Author" content="SADDAM92" />
  <title>STRONA W XHTML'u KROK PO KROKU by SADDAM92</title>
</head>
<body>
    <div id="container"> 
         <div id="header"> </div>
         <div id="navcontainer">
               <div id="nav1">
                      <a href="#" alt="link">LINKI1</a>
                      <a href="#" alt="link">LINKI1</a>
                      <a href="#" alt="link">LINKI1</a>
               </div>
               <div id="nav2">
                       <a href="#" alt="link">LINKI2</a>
                       <a href="#" alt="link">LINKI2</a>
                       <a href="#" alt="link">LINKI2</a>
               </div>
        </div>
         <div id="srodek">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, </div>
         <div id="prawo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac</div>
        <div id="stopka"> Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>
    </div>
</body>
</html>

W sekcji navcontainer utworzyliśmy linki natomiast w sekcji srodek, prawo oraz stopka wpisaliśmy normalny tekst.
Do tej pory uzyskaliśmy tylko coś takiego. Nie zadawala nas to – i nic w tym dziwnego.. musimy napisać style CSS. W sekcje HEAD wstawiamy więc

Kod php:

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

oraz tworzymy nowy plik style.css… Teraz zajmiemy się nowo utworzonym plikiem..

Kod php:

  body {
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        text-align:center;
    }
div {
        position:relative;
    }
#container {
        margin: 0 auto;
        padding: 0 0;
        position: relative;
        width: 700px;
        background-color: #ffffff;
        text-align: left;
}
#header {
        background: #ffffff url(l1.gif) no-repeat;
        width: 700px;
        height: 100px;
}
#navcontainer {
        width:115px;
        float:left;
        background-color: transparent;
}
#prawo {
        width:135px;
        float:right;
        text-align:left;
}
#srodek {
        width: 446px;
        float: left;
}
#stopka{
        text-align: center;
        clear:both;
}

Efekty możecie zastosowania kodu można zobaczyć tutaj. Nie jest to jednak zupełnie satysfakcjonujące, w następnym kroku zajmiemy się dodaniem ramek do naszego szkieletu. Do kodu css dopiszemy więc:

Kod php:

  #header {
        background: #ffffff url(l1.gif) no-repeat;
        width: 700px;
        height: 100px;
        -> background-position: left bottom;
        -> border-bottom: 2px solid #000;
}
#srodek {
        width: 446px;
        float: left;
        -> border: 2px solid #000;
        -> border-bottom: 0px;
        -> border-top: 0px;
}

Widzimy już lekkie zmiany w wyglądzie strony. Pójdźmy więc dalej tym tropem i dodajmy pola pod nagłówkiem. Użyjemy do tego specjalnej klasy którą zaraz stworzymy, nazwiemy ją title i dodamy do każdej kolumny

Kod php:

 <div class=”title”>//nazwa kolumny np. MENU albo KONTAKT//</div>

W tym wszystkim ważniejszy jest jednak kod CSS:

Kod php:

 .title {
        height: 20px;
        border-top: 1px solid #FF4500;
        border-bottom: 2px solid #000;
        text-align: center;
        line-height: 20px;
        font-weight: bold;
}

żeby się nie rozdrabniać od razu zastosowałem formatowanie czcionki która wystąpi w naszym polu.. Oto efektyJeszcze dwie rzeczy związane z wyglądem szkieletu strony zostały nam do poprawienia, obrazek w prawej czesci nagłówka, oraz ramka przy stopce. Obrazek wstawimy za pomocą polecenia

Kod php:

 <img src="l2.gif" alt="by JAKUB" style="width: 65px; height: 9px; position: absolute; bottom: 3px; right: 5px;"/>

Teraz troche wyjaśnienia, obrazek wczytujemy ze zwykłego polecenia IMG ponieważ wgranie jako tło już nie jest możliwe – mamy w tym miejscu inny obrazek. Stosujemy od razu do niego style, a w zasadzie to tylko pozycjonujemy go w odpowiednim miejscu na stronie (position: absolute; bottom: 3px; right: 5px

. Cała filozofia.. Jeszcze żeby na pewno żadna z przeglądarek nie wyświetliła nam ramki wokół grafiki, do kodu CSS dodamy

Drugi zadanie z tego punktu wymaga już troche przebudowania naszego szkieletu strony, dotychczas istniejącą stopkę

Kod html:

<div id="stopka"> Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>

musimy zamienić na

Kod html:

<div id="stopka_container">
              <div id="stopka"> �* Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>
       </div>

zmieni się również kod CSS. Oto on:

Kod html:

 #stopka_container {
        clear:both;
        border-top: 2px solid #000;
}
#stopka{
        border-left: 2px solid #000;
        border-right: 2px solid #000;
        width: 446px;
        margin-left: 115px;
        text-align: center;
}

Efekt pracy zobaczycie tutaj.Naszym następnym zadaniem będzie pogrupowanie linków. Mamy już stworzone na początku dwa divy nav1 i nav2. I właśnie teraz one nam się przydadzą. Zauważmy, że do tej pory wszędzie nasze linki zbite są w jeden ciag wyrazów, a nie poprzenoszone do nowe linii.. Zmieńmy to za pomocą polecenia <br />

Kod html:

<div id="navcontainer">
                <div class="title">Menu</div>
                      <div id="nav1">
                       <a href="#">LINKI1</a><br />
                       <a href="#">LINKI1</a><br />
                       <a href="#">LINKI1</a>
                </div>
                <div class="title" style=”border-top: 0px;”>Drugie Menu</div>
                  <div id="nav2">
                       <a href="#">LINKI2</a><br />
                       <a href="#">LINKI2</a><br />
                       <a href="#">LINKI2</a>
                  </div>
       </div>

Spostrzegawczy na pewno zauważyli ze od razu dodałem do kodu DIV o klasie TITLE jednak z dodatkowym formatowaniem za pomocą CSS, które ma za zadanie usunąć czerwoną ramkę od góry tegoż diva. Od razu zajmiemy się również jakimś sformatowaniem linków w MENU. Do kodu CSS dopiszemy

Kod html:

 #navcontainer {
        width:115px;
        float:left;
        -> text-align: center;
        background-color: transparent;
}
-> #nav1 {
        border-bottom: 2px solid #000;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: transparent;
}
-> #nav2 {
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
}
-> #navcontainer a{
        text-decoration: none;
        color: #000;
        font-weight: bold;
        line-height: 14px;
        font-variant: small-caps;
        width: 80px;
        margin: 0 auto;
}
-> #navcontainer a:hover{
       text-decoration: underline;
}

Takim kodem powinniśmy już sobie poradzić z prawidłowym sformatowaniem linków.. Jednak nie był bym sobą gdybym nie dodał pewnych udziwnień, a raczej upiększeń.. Trick będzie polegał na dodaniu wybranego znaku specjalnego dla każdego linka z sekcji nav1 i innego dla linków z sekcji nav2. Tabelę znaków specjalnych możecie zobaczyć tutaj. Ja wybrałem dla sekcji nav1 coś takiego ⊗ (& #8855;, & otimes

, a dla sekcji nav2 - • (& #8226;, & bull

Normalnie wstawienie takiego znaku nie jest trudne.. Po prostu wypisujemy którykolwiek z kodów które podałem w nawiasach, jednak my chcemy zrobić tak, aby do każdego linku znak dodawał się automatycznie. Zastosujemy do tego pseudoelement :before. Pozostaje jeszcze jedna rzecz - kod CSS nie akceptuje numeru znaku w formie dziesiętnej (np. & #8855

, wyławiamy wiec numery czyli np. 8855 i 8226, a następnie za pomocą dowolnego kalkulatora zamieniamy je na format szesnastkowy. W moim przypadku będzie to odpowiednio: 2297 i 2022. A oto kod CSS który skonstruowaliśmy:

Kod html:

 #nav1 a:before {
        content: "\2297  ";
}
#nav2 a:before {
        content: "\2022  ";
}

Myślę że podoba sie wam ten efekt.. Przejdźmy więc dalej, myślę że teraz moglibyśmy skupić się na formatowaniu tekstu i odsunięciu go trochę od ramek. Pierwszą rzeczą którą dopiszemy do naszego kodu CSS będzie wybór czcionki i jej rozmiaru, zastosujemy ją do całego dokument, więc dopiszmy styl dla body:

Kod html:

 body {
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        text-align: center;
        -> font-family: Verdana;
        -> font-size:11px;
}

Następną rzeczą jaką zrobimy to dla treści w divach SRODEK i PRAWO damy odpowiednią DIV-CLASS’ę, podzielimy sobie zawartość ze SRODKA na akapity (<p>..</p>), a zawartość KONTAKTU zmienimy na bardziej podobną do oczekiwanej w przyszłości.. oto kod po zmianach – mam nadzieje ze rozumiecie:

Kod html:

<div id="srodek">
                  <div class="title"></div>
                       <div class="tresc"><p>dolor sit amet, consectetuer adipi <a href="#">Lorem ipsum</a> scing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum.</p><p> Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac,</p> </div>
       </div>
         <div id="prawo">
                 <div class="title">Kontakt</div>
                       <div class="tresc">GG: <a href="gg:3442356">3442356</a><br />
                       E-Mail: <a href="mailto:a@a.pl">a[at]a.pl</a>
                       </div>
       </div>

Teraz napiszemy do tego kod CSS, na początku zajmiemy się nowo utworzoną klasą .tresc która odpowiadała będzie u nas między innymi za odsunięcie treści od ramek. CSS:

Kod html:

 .tresc {
       padding: 5px;
}

Dotychczas osiągnięty wynik, już jest całkiem całkiem, jednak proponuję dodanie kilku rzeczy. Po pierwsze, mamy niesformatowane linki w divach SRODEK, STOPKA i PRAWO, myślę ze możemy się tym zająć, dla linków w divie SRODEK i STOPKA damy kolor z podkreśleniem jako przerywana linia, zmieniający się przy najechaniu na niego. Natomiast dla diva PRAWO zrobimy to samo tylko bez podkreślenia.

Kod html:

 #srodek, #stopka .tresc a{
        text-decoration:none;
        border-bottom: 1px dashed #880000;
        color:#880000
}
#srodek, #stopka .tresc a:hover {
        text-decoration:none;
        color: #fb5107;
}
#prawo .tresc a{
        text-decoration:none;
        color:#880000;
}
#prawo .tresc a:hover {
        text-decoration:none;
        color: #fb5107;
}

Jak pewnie zauważyliście, mimo ze pisalem ze zastosujemy podkreślenie, to nigdzie nie ma text-decoration:underline; – przecież chcieliśmy osiągnąć przerywaną linię jako podkreślenie, a pogrubiony przed chwilą fragment kodu tworzy ciągłą linie – i właśnie dlatego zastosowałem atrybut border, resztę mam nadzieje że rozumiecie – efekt. Na koniec zostało nam już tylko upiększyć akapity tekstu. Zastosujemy do tego pseudoelement :first-letter – pierwszą literę akapitu powiększymy i zmienimy jej kolor na czerwony.

Kod html:

 .tresc p:first-letter {background-color: transparent;color: red; font-size: 250%; float:left; }

Na absolutny już koniec dodamy tylko zabezpieczenie kolumny PRAWO przed „wylaniem” się z niej tekstu, jako że na Mozilli dodanie margin-right zepsuje nam kompozycje strony, zastosujemy pewien TRICK i damy styl TYLKO dla IE, oto kod:

Kod:

 /* hack dla internet explorera */
/*\*/
* html div#prawo {
margin-right: 2px;
}
/**/

Tutek zaczerpniety z webtips

Narzędzia wątku

Typ wyświetlania

STRONA W xHTML'u - KROK PO KROKU, część 1 - pocięcie layoutu i napisanie styli

Podobne wątki

Proces Zakupu Licencji - Krok po kroku

Przed-strona z Przyciskiem "Wejście na Forum" jak na DW

Gdzie się włącza otrzymywanie powiadomienia na PW o raportowanym poście?

[Zlecę] Zlecę pocięcie oraz zakodowanie layout'u cms, forum, blog - vb4.

Jak stworzyć stronę za pomocą XHTML oraz CSS