Projektowanie i tworzenie stron internetowych

W tym artykule chciałbym przedstawić Wam krok po kroku stworzenie pierwszej strony internetowej. Pominiemy w tym przypadku projekt graficzny, zajmiemy się tylko kodem HTML strony www. Ogólne założenia to witryna internetowa ma posiadać nagłówek, trzy kolumny na treść oraz element dołu strony (footer). Przyjęły się nazwy w języku angielskim a więc nagłówek strony www, element odpowiedzialny za wyświetlanie topu strony nazywamy headerem, element dołu strony to footer. Panele boczne nazywamy left column oraz right column. Główny moduł odpowiedzialny za treść naszej strony nazwiemy center column. Oczywiście możemy te elementy nazywać jak nam się podoba i jak nam będzie wygodnie, ale w dobrym stylu jest nazywanie tych grup elementów HTML właśnie w ten sposób.

Osobiście unikam takiego podziału stron internetowych, na tyle kolumn, ponieważ nie wygląda to dobrze i pozostaje nam mało miejsca na treść strony www. Jednak na takim przykładzie będzie można pokazać możliwości i nie kiedy musimy budować w ten sposób stronę www np. w przypadku jakiś rozbudowanych serwisów internetowych.

Główne zamierzenia mamy już określone a więc zabieramy się za to co tygryski lubią najbardziej a więc piszemy kod HTML naszej strony internetowej.

Teraz wyjaśnię co autor miał na myśli.

Div “container” element grupujący nam wszystkie pozostałe elementy wykorzystane na naszej stronie internetowej. Określamy jego szerokość na 1000px oraz umieszczamy go na środku monitora (margin:auto). Przyjmujemy, że rozdzielczością minimalną użytkownika, który będzie przeglądał naszą stronę www to 1024 px. Chyba już nikt nie używa mniejszej rozdzielczości na komputerze stacjonarnym czy laptopie. Pozostawiamy 24 px na element odpowiedzialny za przesuwanie strony internetowej w górę i dół. Dzięki temu zabiegowi nie pojawi się suwak na dole naszej witryny internetowej. Kontener to pudełko do którego będziemy wrzucać pozostałe pudełka a całość będzie naszą strona internetową. Całą budowę strony www porównałbym do układania klocków, kontener to nasz “obszar roboczy”. Przestrzeń w zakresie której będziemy tworzyć naszą budowlę.

Div “header” – umieścimy tu nasze logo, nagłówek, menu górne, elementy graficzne np. slider. Jest to stały element praktycznie każdej strony internetowej. Określiłem tu jego szerokość, wysokość, kolor oraz odstęp, margines dolny.

Div “left_c” i “right_c” – elementy w których zamieścimy np. menu, sondy, banery reklamowe. Te elementy strony internetowej również będą stałe, a więc na każdej podstronie naszego serwisu www będą występować w tej samej formie. Moduły te “przykleiłem” do lewej i prawej strony naszego kontenera. Określiłem szerokość, kolor oraz wysokość minimalną (min-height:400px;). Moduły te samodzielnie będą się rozciągać jeśli ich zawartość będzie większa od ustalonej wysokości minimalnej.

Div “center_c” to jedyny moduł na naszej stronie www, którego zawartość będzie inna na każdej podstronie naszego serwisu internetowego. Umieścimy tam tytuł podstrony oraz treść naszej strony www. Opisałem ten element ustalając jego szerokość, kolor, wysokość minimalną, margines lewy oraz prawy a także przykleiłem go do lewej strony (float:left;), dzięki temu ten moduł będzie zachowywał się podobnie jak pozostałe dwie kolumny.

Na koniec div “footer” – stały element każdej podstrony, zawartość tego elementu nie będzie się zmieniać. Jest to moduł kończący kod naszej strony internetowej. Zwykle umieszczamy tu menu dolne, prawa autorskie czy podpis wykonawcy strony www. Określiłem szerokość, wysokość, kolor tego elementu, margines górny oraz anulowałem “przyklejanie” elementów (clear:both;). Zabieg ten pozwala na właściwe wyświetlanie strony www w praktycznie każdej przeglądarce.

Efekt naszej pracy możemy obejrzeć tutaj , na koniec warto sprawdzić czy nie popełniliśmy jakiegoś błędu tworząc naszą pierwszą stronę internetową (sprawdź poprawność).

Mamy już przygotowany szablon naszej strony, do tych elementów będziemy musieli dobudować i uzupełnić tak by całość tworzyła poprawnie napisaną stronę internetową.