Tajniki webmasteringu
Oświadczam, że jestem autorem tego artykułu. Kopiowanie, rozpowszechnianie bez zgody autora zabronione.
Dla kogo jest ten artykuł? Napisałem go dla średnio zaawansowanych webmasterów. Jeśli nie wiesz do czego służy CSS czy DIV to poniższy tekst nie jest skierowany dla Ciebie.
W życiu każdego internauty przychodzi taki moment, w którym zada sobie pytanie "Skąd biorą się strony internetowe?". W końcu poznaje HTML, wie do czego służy <b> oraz <i>. Po pewnym czasie do jego rak trafia WYSIWYG (eng. What You See Is What You Get), czyli editor graficzny, w którym bezstresowo można pokolorować boksy, zmieniać czcionkę rodzajową i ustawić statyczne tło. Wszystko szybko, łatwo i przyjemnie. Tak postępują amatorzy. W tym artykule zrobimy to profesjonalnie ;-)
Co będziemy potrzebować?
- PSD , najlepiej już pocięty do formatu gif, jpg oraz png.
- edytor tekstowy - najlepiej PSPad lub Notepad++
- Mozilla Firefox 2.0 oraz 3.0, Internet Explorer 6.0 oraz 7.0, Opera 9.0 oraz Safari.
- Fire Bug 1.3
- IE Web Developer
- ColorZilla
Strony będziemy tworzyć pod FF 3.0, a gdy uzyskamy satysfakcjonujący nas stan, zabierzemy się za adaptowanie kodu po resztę przeglądarek. Podstawowa zasada: W miarę możliwości strona musi wyglądać identycznie pod każdą przeglądarką oraz przy rozdzielczości 1024x768 nie może występować poziomy suwak. Nie ma, że boli.
O tym musimy pamiętać tworząc HTML:
- strona musi być odporna na modyfikacje, np. musimy przewidzieć, że boks będzie się wydłużał i odpowiednio go ostylować
- ustawiamy kodowanie na UTF 8
- podstawowe czcionki (dla contentu) to Verdana i Tahoma
- HTML służy do trzymania layoutu. Nie używamy wewnętrznych styli np. <span style="color: #FFFFFF">.
- ograniczamy do minimum liczbę class i id nadając ogólne style, np.
- czcionki dla pozostałych elmentów (h1,h2... h6, span) to Verdana, Tahoma, Times New Roman, Helvetica, Arial, Courier oraz Comic.Cytuj:
#sub span{
text-transform: uppercase;
}
Dlaczego te a nie inne? Pamiętamy o tym, że piszemy pod wszystkie przeglądarki a np. Opera nie obługuje Timesa.
Verdana została stworzona specjalnie do prezentacji tekstu w internecie.
- nie stosujemy znaczników <font> oraz <center>
- XHTML 1.0 Strict nie wspiera <b> oraz <i> ich odpowiedniki to <strong> oraz <em>
- wszystkie znaczniki nie posiadające swojego zamknięcia muszą być zakończone slashem, np <img />
- Layout strony tworzymy z divów, nie używamy tabelek jako konstruktorów.
- Znaczki takie jak © bierzemy z tablicy ASCII.
- Wszystkie odstępy, wyrównania marginesy etc. definiujemy w stylach, czyli żegnamy się z <br /> i  
Gdy już to wiemy, możemy włączyć screen projektu, FF 3.0 z ColorZillą oraz Firebugiem.
Zaczynamy od standardowego HEAD, czyli
Następnie tworzymy <div id='container'> któremu nadajemy style:Cytuj:
<!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>
<title>Nazwa strony</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 7]> <link rel="stylesheet"
href="css/ie6.css" type="text/css" /><![endif]-->
<!--[if IE 7]> <link rel="stylesheet"
href="css/ie7.css" type="text/css" /><![endif]-->
<link rel="Content" href="#content" />
</head>
Kontener jak nazwa wskazuje, będzie słuzył jako opakowanie na strone, aby nam się ładnie trzymała.Cytuj:
#container{
margin: 0 auto; /* wycentrowanie strony w poziomie */
width: 768px; /* zaleznie od projektu */
overflow: hidden; /*z oczywistych powodów */
zoom:1; /* dla IE 6.0 */
}
Przyjmijmy, że tworzymy standardowy układ np. taki
http://img13.imageshack.us/img13/5881/projektwf1.png
I mamy taki kod
Czyli mamy przeźroczystego pnga. I tu zaczyna się pierwszy problem. IE 6.0 nie wyświetli nam poprawnie przeżroczystości. Nie pomoże nam przerobienie loga do gifa, bo transparent jest bardzo okrojone a logo musi mieć maksymalnie wysoką jakość. Będziemy potrzebowali małego tricku. Ściagamy plik iepngfix.htc oraz blank gif. (http://www.twinhelix.com/css/iepngfix/iepngfix.zip) i w arkuszu ie.css wrzucamy następujacą linijkę:Cytuj:
<div id='top'> <h1><a href='index.html'> <img src='images/logo.png' alt='Nazwa strony' /> </h1></div>
... i cieszymy się z efektu :) Nalezy pamiętać o tym, że na przeźroczystych pengach nie możemy wstawiać linków ani pozycjonowac ich w tle, ponieważ standardowo ustawią się w lewym górnym rogu.Cytuj:
#top img{
behavior: url(iepngfix.htc) }
}
Logo mamy z głowy. Ustawiamy na h1 margin-top:50px i mamy taki kod:
Otrzymujemy błąd w IE, ponieważ margin jest liczony od border-top a w IE od <ul> Nadajemy floata na <ul> i wstawiamy "za" logo i wszystko ładnie śmiga.Cytuj:
<div id='top'>
<ul>
<li>Strona główna</li>
<li>Sitemap</li>
<li>Wyślij znajomemu</li>
</ul
<h1><a href='index.html'> <img src='images/logo.png' alt='Nazwa strony' /> </h1>
</div>
Jesli chcemy rozcagnąć maksymalnie diva dodajemy style overflow:hidden oraz dla IE: zoom:1;
Na #top staramy się używać clearifxa, ponieważ często jest potrzeba zrobić rozwijane menu i wtedy nadmiar nam się schowa.
Bierzemy się z content, który w FF 2.0 może nie mieć tła.. dodajemy overflow:hidden i clear:both i wszystko powinno działac.
Przy robieniu suba staramy się używać padding-left na #content, czyli zamiast
dajemy:Cytuj:
#sub{
margin-left:30px;
float:left;
}
Ładniej to wygląda i nie ma błędów pod IE, który wyświetliłby nam podwojoną wartosc lewego marginu i w efekcie layout popsłby się.Cytuj:
#content{
padding-left:30px;
}
* Boksy z gradientem.
Czasami mamy taki projekt, w którym tło posiada gradient i musi się rozciągać. W takim wpadku korzystamy z potrójnej konstrukcji diva. Brzmi grożnie, ale wygląda to w ten sposób:
Cytuj:
HTML napisał
Zawartość piszemy w dolnym boksie.Cytuj:
CSS napisał
* Lista obrazkowa
- nie stosujemy list-style-image ponieważ IE ustawi nam li-img nieprawidłowo i efekt bedzie niemiły dla oka. Zamiast tego dajemy list-image w tlo, tj
*minusowy marginCytuj:
ul li{
list-style:none;
background: url(li.gif) no-repeat 1px 1px; /* ustawiamy pozycje imga */
}
Czasami zachodzi potzreba wsunięcia jednego diva na drugi. Z-index stosujemy ostrożnie. Jeśli IE chowa nam diva pod spód nadajemy mu position:relative;
*footer oraz niepożądane nakładanie się divów;
selektor{
clear:both;
}
I wszystko hula ;-)
*ColorZilla - czyli wtf?
Wtyczka do FF, dzięki któej mozemy pipetą pobierać kolory z projektu. Automatycznie ustawia się w w lewym dolnym rogu. Aby pobrać kolor, klikamy lewym na "kwadracik", pipetą kilkamy w interesujacy nas. Kolor kwadratu zmienia się na wybrany przez nas. Po kliknięciu prawym na ColorZille mamy zapisany w HEX, RGB procentowo oraz RGB zwyczajnie. Bardzo przydatna wtyczka.
*Firebug - czyli niezbędnik webmastera.
Ta wtyczka służy do dynamicznej zmiany HTML i CSS w przeglądarce. Posiada autouzupełnianie i zwiększanie liczb kursorami UP/DOWN. Możemy również usuwać style, dodawać imortanty. Dodatkowo style są sortowane priorytetowo.
Walidacja W3C - Czyli co odróznia webmajstra od webmastera?
http://validator.w3.org - ten link zapamiętajcie sobie do końca życia ;-)
Wielu początkujacych webmasterów nie wie do czego służy walidacja. Przykre, ale prawdziwe. Jest to standardowa procedura przy ocenie poprawnosci kodu. Wychwytuje wszystkie niedomknięcia tagów, brakujące parametry oraz osadzanie tagów w złych miejsach. Nie idziemy na łatwize - jak cos robimy to pożądnie i zgodnie ze standardami. CTRL+SFIFT+A forever!
Żeby stać się webmasterem trzeba rzucić tysiące wyzwisk w kierunku IE, podejmować nowe wyzwania i stale się edukować. Zrobić stronę pod Opere czy FF umie każdy, ale zrobić to samo zgodnie ze standardami, pod wszystkie przeglądarki oraz z pozwoloić na późniejsze modyfikacje - to czyni webmastera masterem.
Będę stale edytował ten artykuł dodając swoje spostrzeżenia. Jeśli macie jakieś pytania, sugestie, problemy - pisać śmiało!
