To jest tylko wersja do druku, aby zobaczyć pełną wersję tematu, kliknij TUTAJ
phpBB2 by Przemo
Support forów phpBB2 modified by Przemo
F.A.Q. - style i grafika - Tworzenie nagłówka - CSS i HTML
Polaczek - 18-08-2010, 15:06
Temat postu: Tworzenie nagłówka - CSS i HTML
CSS Top Construction Kit 01
    Tworzymy prosty nagłówek w oparciu o CSS i HTML.




No cóż mogę powiedzieć na wstępie... zacznę od tego, że jest to bardzo prosty i dzięki temu jest user-friendly, bo małe nagłówki są bardzo dobre. Poradnik powstał po zobaczeniu przeze mnie nagłówka na pewnym forum, który miał wysokość około 1500px!

Dlaczego właśnie CSS?
    Teraz wszystko jest oparte na CSS - jest to szybsze, wygodniejsze i elastyczniejsze. Dosyć napchanych tabel tam gdzie są niepotrzebne i pociętych grafik na 100 części tylko po to, żeby je wstawić w tagi img. Teraz wystarczą dwa obrazki top_bg.png (2,85KB) oraz logo.png (6,6KB). Lekkie prawda? I oto chodzi. Nie będzie się to wczytywać dopóki nie wyjdziesz ze swojej strony.


Potrzebna grafika


Chcę zobaczyć to w akcji


No dobra mam grafikę to od czego zacząć?
    Najpierw utwórzmy plik style.css i dodajmy tam na początek taki kod:
    Kod:
    body {
    background: #000;
    margin: 0;
    }

    Co to robi? Koloruje tło na czarne i ustawia margines na 0 pikseli.
    Później tworzymy identyfikator dla tła naszego topu - czyli nagłówka.
    Kod:
    /**
     * Budujemy tło, na którym ma być logo
     */
    #top_background {
    background: url('top_bg.png') repeat; /* Obrazek tła, który będzie się powtarzał */
    width:100%; /* Ustawiamy szerokość na 100% */
    height:100px; /* Ustawiamy wysokość na 100px - czyli tyle ile ma nasze tło */
    }

    Tło się powtarza nie zjadając przy tym więcej transferu niż oryginalnie ma grafika top_bg.png. Szerokość ustawiona jest na 100%, a szerokość na 100 pikseli - tyle właśnie ma grafika.

    Teraz możemy wbudować logo w tło nagłówka.
    Kod:
    /**
     * Budujemy logo
     */
    .logo {
    background: url('logo.png') no-repeat; /* Logo, niepowtarzające się */
    width: 300px; /* Ustawiamy szerokość na 300px - czyli tyle ile ma nasze logo */
    height:100px; /* Ustawiamy wysokość na 100px - czyli tyle ile ma nasze logo */
    }

    Tło ma wysokość 100 pikseli tak jak tło i szerokość 300 pikseli. Obrazek tła konfigurujemy przez linię background:url('logo.png'). Tutaj obrazek się nie powtarza.

    Budujemy wyszukiwarkę.
    Kod:
    /**
     * Budujemy wyszukiwarkę
     */
    #top_background form {
    margin: -75px 0px 0px 175px; /* Margines */
    font-family: Arial; /* Czcionka */
    font-size:11px; /* Wielkość czcionki */
    color: #fff; /* Kolor czcionki */
    }

    .search_input {
    background: #000; /* Tło */
    color: #fff; /* Kolor */
    height: 15px; /* Wysokość */
    font-size: 11px; /* Wielkość czcionki */
    font-family: Arial; /* Czcionka */
    border: 1px solid #cacaca; /* Obramowanie */
    /* Zaokrąglone rogi 3px */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .search_icon {
    background: url('search_icon.png'); /* Tło przycisku */
    background-color: transparent; /* Kolor tła */
    border: 0px; /* Obramowanie */
    color: transparent; /* Kolor */
    /* Wysokosć/szerokość */
    width: 17px;
    height: 15px;
    }

    Element #top_background form odpowiada za położenie i czcionkę, klasa search_input odpowiada za kontrolkę w formularzu wyszukiwarki - czyli jej tło, kolor tekstu, wysokość, rodzaj (nazwę czcionki), obramowanie i zaokrąglone rogi, klasa search_icon odpowiada za ikonkę "wyszukaj", po której kliknięciu zostaniemy przeniesieni do wyników wyszukiwania - można tam ustalić tło przycisku, kolor tła, obramowanie, wysokość i szerokość.

    Czas na budowanie nawigacji (menu):
    Kod:
    /**
     * Budujemy nawigację
     */
    ul#menu {
    list-style: none; /* Żaden typ listy */
    margin: -25px 27px 0px 27px; /* Margines: góra, prawa, dół, lewa */
    }

    /**
     * Element menu - typ wyświetlenia
     */
    ul#menu li {
    display: inline; /* Typ wyświetlenia - w linii */
    }

    /**
     * Element menu
     */
    ul#menu li a {
    background: #fff; /* Kolor tła */
    padding:5px; /* Wielkość dopełnienia */
    font-size:14px; /* Wielkość czcionki */
    font-family: Arial; /* Nazwa czcionki */
    color:#000; /* Kolor czcionki */
    text-decoration: none; /* Nie podkreślaj! */
    }

    /**
     * Element menu po najechaniu kursorem
     */
    ul#menu li a:hover {
    background:#008000; /* Kolor tła */
    padding: 5px; /* Wielkość dopełnienia */
    font-size:14px; /* Wielkość czcionki */
    font-family: Arial; /* Nazwa czcionki */
    color:#fff; /* Kolor czcionki */
    text-decoration: none; /* Nie podkreślaj! */
    }


    Identyfikator menu działający tylko dla tagu ul odpowiada za typ listy i margines (położenie).
    Element menu - typ wyświetlania: ta sekcja pozwala na zdefiniowanie w jaki sposób styl ma wyświetlać menu. W tym przypadku będzie to inline, czyli w linii.
    Element menu: ta sekcja odpowiada za kolor tła elementu menu, wielkość dopełnienia, wielkość czcionki, nazwę czcionki, kolor czcionki, a także odpowiada za to, żeby link nie został udekorowany podkreśleniem.
    Element menu po najechaniu kursorem: ta sekcja odpowiada za kolor tła elementu menu po najechaniu na niego kursorem i wszystko inne - to samo co było w sekcji element menu tylko po prostu po najechaniu na ten element myszką.


To oczywiście nie wystarczy - teraz czas na HTML...
[list]Zaczynamy od utworzenia pliku index.html lub wstawienia tego w overall_header.tpl jeśli chcesz użyć tego menu na swoim forum(ach).
Definiujemy doctype:
Kod:
<!doctype html>

I jakby to nazwać, coś bez czego żyć się nie da :mrgreen:
Kod:
<html lang="pl">
<head>
<title>__NAZWA__STRONY__</title>
<link rel="stylesheet" href="style.css" type="text/css"> <!-- tutaj includowany jest plik CSS -->
</head>

Tworzymy ciało dokumentu:
Kod:
<body>

Zaczynamy od tła nagłówka:
Kod:
<div id="top_background">

Teraz dodajemy logo:
Kod:
<div class="logo"></div>

Wyszukiwarka:
Kod:
<form action="search.php" method="post">
<label for="keywords">Wyszukaj:</label>
<input type="text" name="search_keywords" class="search_input">
<input type="hidden" name="show_results" value="topics" checked="checked">
<input type="submit" name="search" value="" class="search_icon">
</form>

Prawda, że to jest lżejsze od tabel? :)

Zamykamy tło nagłówka:
Kod:
</div>

Tworzymy nawigację (menu):
Kod:
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
<li><a href="#">Item 14</a></li>
<li><a href="#">Item 15</a></li>
<li><a href="#">Item 16</a></li>
</ul>


Ciało dokumentu powinno skończyć się tak:
Kod:
</body>
</html>


Koniec
    To na tyle. Mogę tylko jeszcze podać kilka ciekawych faktów:
    • plik HTML zajmuje 1,04KB
    • plik CSS zajmuje 2,11KB


    A całość pięknie się prezentuje i łatwo się to edytuje.
zax - 18-08-2010, 15:34
No no no, ładnie. Mógłbyś jeszcze powiedzieć jak zrobić, żeby usunąć odstępy ?
Polaczek - 18-08-2010, 16:07
zax, które odstępy?
dkwi - 18-08-2010, 16:19
Odstępy będące skutkiem white space bugu.
Kod:
ul#menu li {
  float: left;
}


Kod:
margin:0px

Zero nie ma jednostki.
Kod:
background:url('logo.png') no-repeat 0px 0px;

Jak wyżej, poza tym nie trzeba definiować przesunięcia, gdy ma wynosić 0.
Kod:
font-family:arial;

Warto zdefiniować ogólną rodzinę fontów, np. sans-serif
Kod:
list-style-type:none

list-style wystarczy, oszczędzamy bajty. Tak samo deklaracja typu arkusza CSS (text/css) nie jest wymagana w HTML 5.
Kod:
display:inline

Nie wierzę, że to nie rozwali się pod Operą, dlatego używam inline-block
Kod:
<div class="search">

Zbędne. Jako kontenera możesz użyć <form>.
Kod:
<div class="logo"></div>

Elementom, które wedle logiki występują tylko raz, nadajemy ID. Logo może być obrazkiem, a nawet powinno.
Kod:
<!doctype html>

Hint: nie radzę robić tego w by Przemo, wszystko się może rozwalić.

Poza tym nie lepiej nadać całemu div-owi ID a potem odnosić się do zawartych w nim elementów przez selektory dziedziczenia? Przecież formularz, lista i obrazek loga są unikalne w tym kontenerze.
Polaczek - 18-08-2010, 16:23
Szczerze mówiąc lepiej wygląda z odstępami.

[ Dodano: 18-08-2010, 17:48 ]
dkwi napisał/a:
Warto zdefiniować ogólną rodzinę fontów, np. sans-serif

Ja użyłem ariala. Wg mnie starczy :>
dkwi napisał/a:
list-style wystarczy, oszczędzamy bajty. Tak samo deklaracja typu arkusza CSS (text/css) nie jest wymagana w HTML 5.

Przyzwyczaiłem się jakoś.
dkwi napisał/a:
Nie wierzę, że to nie rozwali się pod Operą, dlatego używam inline-block

Hmm działa i pod Operą.
Cytat:
Zbędne. Jako kontenera możesz użyć <form>.

Faktycznie.
dkwi napisał/a:
Hint: nie radzę robić tego w by Przemo, wszystko się może rozwalić.

No patrz - ja jakoś tak mam i nic mi się nie rozwala.

Parę rzeczy jest do poprawy. Ogólnie dziękuję - cały czas się uczę.

[ Dodano: 18-08-2010, 17:56 ]
Ok poprawiłem kilka spraw.
Nie mogę jednak poradzić sobie z 0px na margin w sekcji body - gdy zmienie na none to wtedy psuje się i nie ma takiego efektu, jaki był zamierzony.

plik HTML - z 1,07KB na 1,04KB
plik CSS - tyle samo KB
Bucu - 18-08-2010, 19:43
Polaczek, napisałes się, nic tylko pogratulowac. A i tak znajda sie lenie co beda chcieli zeby im za darmo do forum calosc dostosowac i wdrozyc :P
Polaczek - 18-08-2010, 20:32
Jeszcze się nie napisałem :P Dopiero się napiszę przy drugim tutorialu ;)
zax - 18-08-2010, 20:45
Polaczek, chodzi mi o te przerwy między obrazkami.
Np. na vBulletin nie ma przerwy.
Polaczek - 18-08-2010, 20:58
dkwi napisał/a:
Odstępy będące skutkiem white space bugu.
Kod:
ul#menu li {
float: left;
}
Misiek [PL] - 19-08-2010, 11:22
Temat naprawdę przyda się początkującym lecz proponuje przeniesienie do F.A.Q. - style i grafika
arearfdz - 12-09-2010, 15:28
hmmmmm a jak ja robie Portfolio to jak zrobić taki coś jak ma np. patryk spec


http://patrykspec.pl/category/download/

chodzi mi o to, że jak ktoś kliknie na logo to może sobie obejrzeć cały styl, podałby mi ktoś taki kod HTML? Proszę ;]
Polaczek - 12-09-2010, 15:55
arearfdz, to jest lightbox js.
arearfdz - 12-09-2010, 16:32
Polaczek, no niby fajnie, ale skad to miec? albo jak to zrobic?

i mógłbyś podać jeszcze kod do tego, w jaki sposób się umieszcza tekst?
Polaczek - 12-09-2010, 17:27
http://www.lokeshdhakar.com/projects/lightbox2/
Spróbuj najpierw sam wdrożyć. Jak będziesz miał problemy to napisz.
arearfdz - 12-09-2010, 17:54
Nie dość że nie rozumiem po angielsku to jeszcze nie wiem jak to zrobic.... pliki na serwer wgralem, ale nie wiem gdzie poumieszczac te kody co tam podali i jak to obslugiwac


Powered by phpBB modified by Przemo © 2003 phpBB Group