bardzofajna

bardzofajna

strony z divami

Dla początkujących webmasterów prawdziwą zmorą jest zbudowanie solidnego szablonu strony WWW, opartego o CSS oraz elementy blokowe <div> </div>. Zazwyczaj początkujący programiści budują strony za pomocą tabelek co jest nierozsądne oraz niedopuszczalne! Po pierwsze taka konstrukcja, jest sprzeczna ze standardami W3C, a po drugie znacznie utrudnia przebudowywanie witryny.

W niniejszym artykule, pokarzę w jaki sposób stworzyć szablon strony WWW oparty o elementy blokowe DIV oraz style CSS o stałej szerokości.

Stały szablon

Stały szablon (ang. fixed layout), zawiera stałą odgórnie ustaloną szerokość wyrażoną w pikselach. Szerokość ta jest identyczna zarówno na monitorze 27-calowym jak i smartphonie posiadającym 4-calowy ekran. Przy tworzeniu takiego szablonu należy zadbać o komfort internauty i ustalić taką szerokość, aby nie trzeba było przewijać strony poziomo. Domyślnie zakłada się, że internauci korzystają z monitorów pracujących w rozdzielczości 1024×768 oraz 1366×768 (są one najpopularniejsze). Wobec tego, tworzony przez nas szablon powinien mieć 1004 piksele szerokości (od 1024px odejmujemy 20px na pasek przewijania w dół) lub 1346.

Szablon dwukolumnowy

Przygotujmy pierwszy szablon, zawierający dwie pionowe kolumny (jedna jest przeznaczona na menu nawigacyjne, a druga na treść). Graficznie będzie on prezentował się tak:

szablon-dwukolumnowy

 

A jego kod będzie wyglądał tak:

 

 

Kod HTML: