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.
#sub span{
text-transform: uppercase;
}
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
<!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>
"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>
#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 */
}
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
I mamy taki kod
<div id='top'> <h1><a href='index.html'> <img src='images/logo.png' alt='Nazwa strony' /> </h1></div>
#top img{
behavior: url(iepngfix.htc) }
}
behavior: url(iepngfix.htc) }
}
Logo mamy z głowy. Ustawiamy na h1 margin-top:50px i mamy taki kod:
<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>
<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
#sub{
margin-left:30px;
float:left;
}
margin-left:30px;
float:left;
}
#content{
padding-left:30px;
}
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:
HTML napisał
Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.
CSS napisał
Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.
* 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
ul li{
list-style:none;
background: url(li.gif) no-repeat 1px 1px; /* ustawiamy pozycje imga */
}
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!
Odpowiedź z cytatem
.org.pl - Rezultaty od 1 - 10 z około 33,300 
Zakładki