nagradzam tutoriale

  • Gotowe szkielety stron internetowych

    dodano 04.01.2008 / komentarzy: 1 / autor: shdw

    Na różnych forach internetowych coraz więcej osób zadaje pytania dotyczące budowy strony internetowej. A to sypią im się kolumny, a to header nie pasuje. Opiszę więc dwa podstawowe szkielety stron wraz z przykładami, abyście mieli rozeznanie dlaczego strona wygląda tak, a nie inaczej.

    Jeden z najczęściej wykorzystywanych układów

    Jeżeli surfujecie dużo w internecie, zapewne zauważyliście, że coraz częściej popularne są strony które zawierają zarówno menu jak i pasek nawigacji. Jak wygląda taka strona można zobaczyć tutaj.

    Oto budowa strony:

    <div id="container">
    <div id="header">
    </div>
    <div id="menu">
    </div>
    <div id="content">
    </div>
    <div id="navigation">
    </div>
    <div id="footer">
    </div>
    </div>
     

    * {
    padding: 0px;
    margin: 0px;
    border: 0px;
    }

    #container {
    width: 760px;
    background: url(images/1_container.jpg) repeat-y;
    margin: 0 auto;
    }

    #header {
    width: 760px;
    height: 180px;
    background: #8a826b;
    }

    #menu {
    width: 760px;
    height: 32px;
    background: #453e2b;
    }

    #content {
    width: 520px;
    height: 600px;
    float: left;
    }

    #navigation {
    width: 240px;
    height: 500px;
    float: right;
    }

    #footer {
    width: 760px;
    height: 24px;
    background: #453e2b;
    clear: both;
    }

    Podgląd

    Trochę wytłumaczenia:

    • w #content i #navigation są wstawione wartości height. Do elastycznego działania strony należy je oczywiście usunąć, teraz są dodane tylko w celu pokazania działania
    • cała strona jest zamknięta w div’ie container, który trzyma ją w ryzach. Dzięki niemu możemy kierować całą stroną na raz
    • * - ustawiamy wszystkie domyślne marginesy, paddingi i obramowania na 0px.
    • margin: 0 auto - wyśrodkowuje całą stronę
    • float - ustawia opływanie danej warstwy, w naszym szkielecie jest ich dwa. Jeden do menu, drugi do contentu.
    • clear: both - dzięki temu parametrowi nasz footer jest w ogóle widoczny, bez niego chował by się pod opływające go warstwy

    Rzeczy o których trzeba pamiętać aby dopasować szkielet dla własnych potrzeb:

    • nadanie szerokości dla każdego elementu, tak aby content i menu mieściły się w containerze, czyli ich szerokość łącznie nie może być większa niż szerokość containera
    • nadanie wysokości dla headera, menu i footer’a
    • ustawienie tła dla containera - to tło będzie widoczne pod menu i contentem. Zrobione jest to w celu elastyczności i ciągłości tła. Jeżeli ustawilibyśmy osobne tło dla contentu i osobne dla menu, bez stałej szerokości zawsze jedno z nich było by nie dociągnięte do końca
    • nie ustawiać stałej wysokości dla nawigacji i contentu

    Wordpress’owy układ

    Bloggerzy korzystający z gotowych już skórek, często do wyboru mają taką w której nawigacja jest ustawiona na samym dole, a cała treść jest widoczna na całej szerokości strony. Jeżeli również chcecie sami napisać kod takiej strony, oto jak możecie tego dokonać.

    <div id="container">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="navigation">
    <div id="nav1">
    </div>
    <div id="nav2">
    </div>
    <div id="nav3">
    </div>
    <div style="clear:both;"></div>
    </div>
    <div id="footer">
    </div>
    </div>


    * {
    padding: 0px;
    margin: 0px;
    border: 0px;
    }

    #container {
    width: 660px;
    margin: 0 auto;
    }

    #header {
    width: 660px;
    height: 180px;
    background: #8a826b;
    }

    #content {
    width: 660px;
    height: 400px;
    background: #d7cfba;
    }

    #navigation {
    width: 660px;
    background: url(images/2_navigation.jpg) repeat-y;
    }

    #nav1 {
    width: 220px;
    float: left;
    height: 200px;
    }

    #nav2 {
    width: 220px;
    float: left;
    height: 200px;
    }

    #nav3 {
    width: 220px;
    float: left;
    height: 200px;
    }

    #footer {
    width: 660px;
    height: 24px;
    background: #453e2b;
    }

    Podgląd

    W #content, #nav1, #nav2 i #nav3 są wstawione wartości height. Do elastycznego działania strony należy je oczywiście usunąć, teraz są dodane tylko w celu pokazania działania

    Wszystko jest tak samo jak w poprzednim szkielecie, tutaj jednak zamiast jedno kolumnowego menu mamy dolną nawigację w której zawarte są 3 divy ustawione obok siebie.

    Div który nie ma nadanej żadnej klasy, ani idyntyfikatora, lecz ma dodany w stylu clear: both; jest w celu rozciągnięcia tła na wysokość całego div’a pod nawigacją. Jest tak zrobione, ponieważ wewnątrz są 3 warstwy z opływaniem, a przeglądarki interpretują to jako brak jakichkolwiek danych w divie co skutkuje jego nie rozciągnięciem (nie ma nadanej stałej szerokości).

    Rzeczy o których trzeba pamiętać aby dopasować szkielet dla własnych potrzeb:

    • nadanie szerokości dla wszystkich 3 divów nawigacji tak, ich łączna szerokość nie przekroczyła szerokości głównego div’u nawigacji
    • nadanie wysokości dla headera i footer’a
    • ustawienie tła dla głównego div’a nawigacji - to tło będzie widoczne pod każdym z 3 wewnętrznych div’ów
    • nie ustawiać stałej wysokości dla nawigacji, nav1, nav2, nav3 i contentu

    Podsumowanie

    To by było na tyle, mam nadzieje, że te 2 opisy pomogą wam w zakodowaniu własnej strony. Jeżeli macie jakieś pytania/propozycje/pomysły lub znaleźliście błąd, napiszcie o tym na naszym forum.

    Komentarze / dodaj komentarz


    • autor: ducat
      dodano: 14.07.2008

      Wiadomo kwestia zastosowania (tutaj stały width) ale …
      nie lepszym rozwiązaniem będzie (przykład pierwszy)
      wyalić całkiem float z #navigation, a zamiast tego dać
      margin-left równy lub większy width #navigation?
      W sumie mała różnica a wg mnie elastyczność większa.

    Napisz komentarz