Tworzymy ładny, zaokrąglony projekt na DIV

code 1076536 1920 Tworzymy ładny, zaokrąglony projekt na DIV
4/5 - (1 vote)

Autor: Patryk Jaworski

Znudziły Ci się zwykłe, kanciaste strony? Potrzebujesz czegoś więcej? Zapraszam do lektury. W tym artykule zaprezentuję metodę na zrobienie ładnej, estetycznej strony z zaokrąglonymi rogami z wykorzystaniem znacznika DIV.

Czego oczekuje od czytelnika?

  • Znajomości (X)HTML – przynajmniej podstawy
  • Znajomości CSS – podstawy powinny wystarczyć
  • Korzystania z normalnej przeglądarki
  • Stosowania się do standardów sieciowych

Co nam będzie potrzebne?

Do rozpoczęcia prac potrzebujemy edytora stron www (tekstowego, nie WYSIWYG) np. Pajączka 5 NxG bądź zwykłego edytora tekstu. Potrzebujemy również programu graficznego. W tym artykule pokażę, jak w prosty sposób uzyskać pożądany efekt przy pomocy programu GNU Image Manipulation Program (GIMP), możemy go pobrać z http://gimp.org/. Edytor udostępniany jest na licencji GNU GPL (General Public License – Powszechna Licencja Publiczna) co oznacza, że masz wolność uruchamiania programu w dowolnym celu (zarówno komercyjnym jak i do użytku domowego), wolność rozpowszechniania, kopiowania, dawania, pożyczania etc. Więcej informacji o licencji GNU GPL znajdziesz np. na Wikipedii – http://pl.wikipedia.org/wiki/GNU_General_Public_License. Program jest bardzo zaawansowany i bez wątpienia można go porównać do takich gigantów jak Paint Shop czy nawet PhotoShop. Dlatego zachęcam do jego użytkowania lub chociaż spróbowania.

Koncepcja

Najpierw powinniśmy się zastanowić, co tak na prawdę jest nam potrzebne i na co możemy sobie pozwolić… Jaką chcemy mieć kolorystykę strony, jaką ustalimy jej wielkość? Czy będzie ona na środku? Ile przewidujemy linków w menu? To wszystko jest bardzo potrzebne ponieważ jest potem brane pod uwagę przy pozycjonowaniu elementów strony. Niezastanawianie się na takimi rzeczami, w przypadku dużego projektu prowadzi do poważnych problemów, na których rozwiązanie z pewnością stracisz trochę czasu.
W tym artykule nie będziemy oczywiście robić giganta – pokażę, jak zrobić „prostą” wizytówkę naszej firmy.

Zaczynamy

Uruchamiamy nasz ulubiony edytor i tworzymy w nim szkielet dokumentu XHTML, najlepiej 1.1:

 
<?xml version="1.0" encoding="iso-8859-2"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" /> 
<meta http-equiv="Content-Language" content="pl" /> 
<title>Tytuł strony</title> 
</head> 
<body xml:lang="pl"> 

<!-- Miejsce na treść dokumentu --> 

</body> 
</html> 

Tworzymy główną sekcję, tzw. kontener:

  
<div id="kontener"> 

</div> 

Następnie dzielimy ją na 3 części: nagłówek, treść i stopkę:

 
<div id="kontener"> 

<div id="naglowek"></div> 
<div id="tresc"></div> 
<div id="stopka"></div> 

</div> 

W nagłówku umieszczamy np. informację o nazwie firmy, w treści dodajmy z 5 paragrafów

<p></p>

na zmianę z nagłówkami

<h1></h1>

Stopka to miejsce na informacje o autorze strony, ostatniej modyfikacji, prawach autorskich, zgodności strony z nowoczesnymi standardami itd..

 
<div id="kontener"> 

<div id="naglowek"> 
<h1>Nazwa firmy</h1> 
</div> 

<div id="tresc"> 

<h1>Nagłówek</h1> 
<p>Paragraf paragraf paragraf (...)</p> 
<h1>Nagłówek</h1> 
<p>Paragraf paragraf paragraf (...)</p> 

(...) 

</div> 

<div id="stopka"> 
<p>Valid XHTML 1.1 | Valid CSS 3 | Created &amp; Copyright by Patryk Jaworski</p> 
</div> 

</div> 

I to już koniec jeśli chodzi o kod XHTML, resztą „zajmie się” CSS.

Wygląd – cześć pierwsza

W naszym dokumencie musimy stworzyć dowiązanie do arkusza CSS, robimy to dodając poniższą linijkę kodu do sekcji head:

 
<link rel="Stylesheet" href="style.css" type="text/css" /> 

Teraz tworzymy zdefiniowany wyżej arkusz stylów (plik style.css) i otwieramy go w naszym edytorze, wszystkie niżej zaprezentowane fragmenty kodu będziemy zapisywać właśnie w nim.

Ustalenie szerokości strony

Teraz ustalamy rozmiar naszej strony… Powiedzmy, że będzie to 700 pikseli. Wysokość zostawiamy – będzie różna w zależności od zawartości. Ustalamy szerokość naszego kontenera na 700px:

 
div#kontener{ 
width: 700px; 
} 

Robocze obramowanie

W celu ułatwienia pracy proponuję dodać tzw. robocze obramowanie, które przydaje się np. do szybkiego odnalezienia elementów na stronie, oraz dostrzeżenia ich granic i pozycji. Dodaj następującą linię do selektora naszego kontenera:

  
border: 1px dashed #CCCCCC; 

Powinno pojawić się jasne, przerywane obramowanie. Teraz widać wyraźnie granicę oraz położenie naszego głównego elementu:

Podgląd strony

Podgląd strony

Widać, że nie jest on położony równo, w lewym górnym rogu ekranu. Aby go tam umieścić musimy usunąć marginesy oraz dopełnienia (padding) elementu body. Dodaj poniższy kod na początku naszego pliku ze stylami.

 
body{ 
margin: 0px; 
padding: 0px; 
} 

Wyśrodkowanie kontenera

Zgodnie ze specyfikacją, jeżeli elementowi blokowemu zdefiniujemy stałą szerokość i ustawimy mu prawy oraz lewy margines na automatyczny powinien on zostać wyśrodkowany. Pierwsze (ustalenie szerokości) mamy już za sobą, teraz musimy ustawić marginesy na automatyczne. Należy to zrobić dodając poniższą linię do selektora kontenera.

 
margin: 0px auto; 

0px ustawia górny i dolny margines na zero, natomiast auto – prawy i lewy na automatyczny. Po tym zabiegu nasz kontener powinien znajdować się na środku.

Ale oczywiście jest pewien problem… I oczywiście z Internet Explorerem… Część „Wyśrodkowanie kontenera” zaczynałem słowami „zgodnie ze specyfikacją”, jak dobrze wiemy, IE specyfikację ma w… tak więc musimy zastosować trik… Polega on na ustawieniu wyśrodkowania tekstu dla elementu body. W selektorze body dodajemy następujący zapis:

 
text-align: center; 

Gotowe, zobaczcie jakie to proste i „logiczne”, wyśrodkowujemy tekst, a wraz z nim wyśrodkowuje się cała strona, łącznie ze wszystkimi sekcjami (div – division – sekcja) – paranoja – niech żyje IE… Co z naszym tekstem? Przecież nie możemy go tak zostawić… Należałoby go wyrównać do lewej krawędzi lub najlepiej wyjustować. Można to zrobić dodając następującą linię do selektora kontenera:

 
text-align: justify; 

Po tych wszystkich modyfikacjach nasz kod CSS powinien wyglądać następująco:

 
body{ 
margin: 0px; 
padding: 0px; 
text-align: center; 
} 

div#kontener{ 
width: 700px; 
border: 1px dashed #CCCCCC; 
margin: 0px auto; 
text-align: justify; 
} 

A strona powinna wyglądać podobnie do tej:

Podgląd strony

Podgląd strony

Wygląd – cześć druga

W tej części zajmiemy się przygotowaniem grafiki. Zapewne dla wielu z was GIMP to nowość i być może pierwszy raz z niego skorzystacie, tak więc postaram się opisywać wszystko zrozumiale i wyczerpująco.

Otwieramy wcześniej przygotowany nagłówek w GIMPie. Pamiętajmy o tym, żeby miał on wymiary takie jak ustaliliśmy na początku… W naszym wypadku będzie to 700px szerokości i dowolna wysokość, u mnie 150px.

Ja, na potrzeby tego artykułu przygotowałem taki oto nagłowek:

Nagłówek strony zrobiony w GIMP

Nagłówek strony zrobiony w GIMP

Oczywiście całość w GIMPie Jeżeli uważasz, że nie jesteś w stanie zrobić swojego nagłówka, nie masz na to czasu, wykorzystaj do nauki jakiś gotowy element graficzny.

Do roboty!

Naszym celem jest zaokrąglenie rogów nagłówka. Z menu Zaznaczenie wybieramy Wszystko. Następnie zmniejszamy zaznaczenie o 25 pikseli – menu Zaznaczenie->Zmniejsz…, jako „Stopień zmniejszenia zaznaczenia” ustawiamy 25, „Zmniejszaj do granic obrazu” musi być odhaczone.

Zmniejszanie zaznaczenia

Zmniejszanie zaznaczenia

Efekt powinien być następujący:

Zaznaczenie na obrazku po zmianach

Zaznaczenie na obrazku po zmianach

Teraz zaokrąglamy rogi. Z menu wybieramy Zaznaczenie->Zaogrągl…. Promień zaokrąglenia ustawiamy na 50, jednostkę na piksele. Następnie powiększamy zaznaczenie o tą samą wartość o która zmniejszyliśmy (25px) – menu Zaznaczenie->Powiększ… Stopień powiększenia ustawiomy na 25, jednostkę oczywiście na piksele.

Nagłówek po zaokrągleniu

Nagłówek po zaokrągleniu

Kolejną rzeczą, która musimy zrobić to wyostrzenie zaznaczenia. Menu Zaznaczenie->Wyostrz. Teraz musimy usunąć dole zaokrąglenia. Wybieramy narzędzie Zaznaczanie obszarów prostokątnych, następnie Tryb ustawiamy na Dodaje do bieżącego zaznaczenia.

Zaznacz prostokąt w GIMP

Zaznacz prostokąt w GIMP

Zmniejszamy powiększenie naszego nagłówka poprzez menu Widok->Powiększenie->Dalej, Shift+kółko myszy lub klawisz – (minus). Następnie zaznaczamy dole rogi w sposób pokazany na obrazku niżej.

Zmniejszanie zaznaczenia

Zmniejszanie zaznaczenia

Gotowe, teraz pozostaje nam tylko oderwać zaznaczenie – menu Zaznaczenie->Oderwij, po tym zabiegu nasza tabela warstw powinna wyglądać następująco:

Warstwy i kanały GIMP

Warstwy i kanały GIMP

Z oderwanego zaznaczenia tworzymy nową warstwę. W oknie zaprezentowanym wyżej klikamy prawym przyciskiem myszy na „Oderwane zaznaczenie (oderwana warstwa)” i wybieramy Nowa warstwa. Dolną warstwę usuwamy – prawym przyciskiem myszy na warstwę „Tło”, Usuń warstwę. Zmieniamy nazwę naszej warstwy na „Nagłówek”, można to zrobić poprzez dwuklik lub prawym i Zmień atrybuty warstwy. Tabela warstw powinna wyglądać następująco:

Zmiana atrybutów warstwy

Zmiana atrybutów warstwy

To już prawie koniec. Pozostaje tylko poprawienie jakości zaokrąglenia. Teraz nie wygląda ono za ładnie, widać pojedyncze piksele:

Powiększenie zaokrąglenia

Powiększenie zaokrąglenia

Klikamy prawym przyciskiem myszy na warstwę „Nagłówek” i wybieramy Duplikuj warstwę. Duplikat przesuwamy na spód, zaznaczamy go i odznaczamy „Zachowanie przezroczystości”.

Duplikowanie warstw w GIMP

Duplikowanie warstw w GIMP

Na warstwie kopia: Nagłówek stosujemy Rozmycie Gaussa. Wybieramy ww. warstwę, następnie z menu: Filtry->Rozmycie->Rozmycie Gaussa… Promień rozmycia ustawiamy na 5 pikseli.

Rozmycie Gaussa w GIMP

Rozmycie Gaussa w GIMP

Klikamy prawym przyciskiem na warstwę „Nagłówek” i wybieramy Połącz w dół. Nowej warstwie zmieniamy nazwę na „Nagłówek” oraz zaznaczamy „Zachowanie przezroczystości”.

Łączenie warstw w GIMP

Łączenie warstw w GIMP

Teraz nasze zaokrąglenia powinny wyglądać mniej więcej tak:

Zaokrąglenie po retuszu

Zaokrąglenie po retuszu

Efekt cienia

Teraz zajmiemy się dodaniem efektu cienia naszego nagłówka. Najpierw musimy zrobić mu miejsce. Zakładając, że nasz cień będzie miał grubość 15 pikseli, musimy powiększyć szerokość obrazka o 30 pikseli oraz wyskość o 15. Do roboty. Z menu Obraz wybieramy Wymiary płótna…. Odznaczamy zachowanie proporcji obrazu – ikona łańcucha obok wymiarów płótna. Szerokość ustawiamy o 30px większą – 700+30=730; wysokość o 15 większą – 150+15=165. Następnie klikamy „Wyśrodkuj” i przesunięcie Y ustawiamy na max, czyli 15.

Wymiary płótna w GIMP

Wymiary płótna w GIMP

Teraz musimy dostosować wymiary warstwy do nowych wymiarów obrazu – z menu Warstwa wybieramy Dopasuj wymiary warstwy do obrazu.

Duplikujemy warstwę „Nagłówek” (klikamy prawym przyciskiem na warstwę „Nagłówek”, Duplikuj warstwę). Duplikat przesuwamy na spód i zmieniamy mu nazwę (poprzez dwuklik, lub prawy przycisk myszy i Zmień atrybuty warstwy…) na „Cień”. Przechodzimy do warstwy „Cień” i odznaczamy „Zachowanie przezroczystości”.

Ukrywamy warstwę „Nagłówek” poprzez kliknięcie ikony „oka” po lewej stronie nazwy warstwy.

Cień na warstwie GIMP

Cień na warstwie GIMP

Przechodzimy do warstwy „Cień”. Następnie z menu Warstwa wybieramy Przezroczystość->Kanał alfa na zaznaczenie. Nasz nagłówek powinien się zaznaczyć… Zaznaczenie zalewamy kolorem czarnym – zakładając, że kolor pierwszoplanowy mamy ustawiony na czarny – menu Edycja->Wypełnij kolorem pierwszoplanowym.

Nagłówek z zaokrągleniami

Nagłówek z zaokrągleniami

Usuwamy zaznaczenie (menu Zaznaczenie->Brak) i stosujemy Rozmycie Gaussa – menu Filtry->Rozmycie->Rozmycie Gaussa…, promień rozmycia ustawiamy na 15, jednostkę na piksele.

Rozmycie Gaussa w GIMP

Rozmycie Gaussa w GIMP

Klikamy OK i mamy cień. Pozostaje tylko „pokazanie” warstwy „Nagłówek” (kliknięcie w puste miejsce obok nazwy warstwy – tam gdzie była kiedyś ikona oka) oraz połączenie warstwy „Nagłówek” z warstwą cienia – klikamy prawym przyciskiem myszy na warstwę „Nagłówek” i wybieramy „Połącz w dół”.

To już koniec zabawy z nagłówkiem… Czas go zapisać. Menu Plik->Zapisz jako… Wybieramy położenie (ten sam folder, w którym znajduje się nasz plik ze stylami – style.css) i w pole nazwa wpisujemy naglowek.png.

Wygląd – część trzecia

W tej części zajmiemy się umieszczeniem naszego nagłówka na stronie oraz stworzeniem menu.

Montujemy nagłówek

Tworzymy nowy selektor – div#naglowek:

div#naglowek{ 

} 
[/div]

Dodajemy do niego definicję tła: 

[code lang=&quot;css&quot; light=&quot;true&quot;]
background: transparent url('naglowek.png') no-repeat; 

Transparent oznacza, że tło nie objęte obrazkiem ma pozostać przezroczyste, url(’naglowek.png’) to ścieżka do obrazka, który chcemy wstawić w tło, no-repeat oznacza, że obrazek w tle nie ma być w żaden sposób powielany.

Musimy jeszcze określić wysokość nagłówka, będzie ona równa wysokości naszego obrazka (165px):

height: 165px; 

Szerokości nie musimy, ponieważ div jest elementem blokowym, a każdy taki element przyjmuje szerokość równą jego elementowi nadrzędnemu, w naszym przypadku będzie to 700px.

Ok. Teraz zobaczmy jak wygląda nasza strona… Widać wyraźnie, że nagłówek (obrazek) się nie mieści. Ma on szerokość 730px, a przecież nasz kontener ma tylko 700px. Musimy go powiększyć do rozmiarów obrazka. W selektorze kontenera zamieniamy wartość cechy width – 700px na 730px.

I w ten oto sposób naszym oczom powinien się ukazać obrazek podobny do tego:

Podgląd strony z zaokrąglonym nagłówkiem

Podgląd strony z zaokrąglonym nagłówkiem

Teraz musimy usunąć rzucający się w oczy odstęp między górnym, roboczym obramowaniem a nagłówkiem „Nazwa firmy”. Usuwamy wszystkie marginesy nagłówków pierwszego stopnia (h1) wewnątrz sekcji (div) nagłówka:

div#naglowek h1{ 
margin: 0px; 
}
Podgląd strony po zmianach w CSS

Podgląd strony po zmianach w CSS

Zapewne niektórzy z Was zastanawiają się po co w ogóle umieszczamy element h1 wewnątrz nagłówka… Jak wiemy roboty wyszukiwarek nie potrafią przeczytać tekstu z obrazka, potrafią jednak przeczytać i odpowiednio zinterpretować zwykły tekst, a takim właśnie jest ten, zamieszczony wewnątrz h1. Jest to więc jedna z rzeczy, o jakiej nie możemy zapomnieć optymalizując stronę pod kątem wyszukiwarek.

Roboty wyszukiwarek nie interpretują również w żaden sposób reguł CSS, tak więc możemy ukryć h1 przed zwykłym użytkownikiem dodając następującą linię kodu do selektora nagłówka (h1):

visibility: hidden; 

Aby ta akcja miała jakikolwiek sens należy zmienić zawartość h1 na zgodną z tekstem zamieszczonym na obrazku, w naszym przypadku będzie to „Skorpion – tworzenie stron www„.

Tworzymy nawigację

Naszą nawigację – menu umieścimy zaraz pod nagłówkiem i nadamy mu kolor tła identyczny z kolorem napisu na obrazku.

Tworzymy nową sekcję (div) o identyfikatorze menu i umieszczamy ją zaraz za sekcją o id naglowek:

(...) 

<div id="naglowek"> 
<h1>Nazwa firmy</h1> 
</div> 

<div id="menu"></div> 

(...) 

Wewnątrz nowo powstałej sekcji tworzymy nieuporządkowaną listę wyliczeniową (ul), w niej odnośniki (linki) do podstron naszej witryny.

<div id="menu"> 
<ul> 
   <li><a href="index.php" title="Strona główna">Strona główna</a></li> 
   <li><a href="index.php?go=oferta" title="Oferta">Oferta</a></li> 
   <li><a href="index.php?go=kontakt" title="Kontakt">Kontakt</a></li> 
</ul> 
</div> 

Ok. Kod XHTML zostawiamy w spokoju, przechodzimy do stworzenia tła pod menu.

Uruchamiamy GIMPa i tworzymy w nim nowy dokument o wymiarach 700×20 pikseli. Przechodzimy do narzędziówki i ustawiamy kolor tła (domyślnie czarny) na identyczny z kolorem liter na naszym nagłówku (#001472).

Tworzenie nowego dokumentu GIMP

Tworzenie nowego dokumentu GIMP

Zalewamy nasz nowy obrazek kolorem tła (Edycja->Wypełnij kolorem tła). Przechodzimy do tworzenia cienia… Zaznaczamy wszystko (Zaznaczenie->Wszystko). Następnie zmieniamy wymiary naszego obrazu – menu Obraz->Zmień wymiary płótna. Odznaczmy zachowanie proporcji klikając na ikonę łańcucha obok wartości wymiarów płótna, szerokość ustawiamy na 730 pikseli, wysokość bez zmian – 20px, na koniec klikamy Wyśrodkuj.

Zmiana wymiarów płótna w GIMP

Zmiana wymiarów płótna w GIMP

Tworzymy nową warstwę, jako kolor tła ustawiamy przezroczysty, przesuwamy ją na spód. Górnej warstwie zmieniamy nazwę na „Pasek”, dolnej na „Cień”. Przechodzimy do edycji warstwy cienia.

Tworzenie nowej warstwy w GIMP

Tworzenie nowej warstwy w GIMP

Jako kolor tła ustawiamy czarny (#000000), następnie, cały czas mając aktywne zaznaczenie, zalewamy nim aktywną warstwę (Cień). Efekt nie będzie widoczny, chyba, że ukryjemy (klikając w ikonę oka) warstwę Pasek. Anulujemy zaznaczenie poprzez wybranie z menu Zaznaczenie pozycji Brak. Mając cały czas aktywną warstwę Cień, stosujemy Rozmycie Gaussa (Filtry->Rozmycie->Rozmycie Gaussa…), promień rozmycia ustawiamy na 15 pikseli.

Gotowe! Na koniec warstwie Cień ustawiamy Krycie na 80.

Ustawianie krycia (przezroczystości)

Ustawianie krycia (przezroczystości)

Łączymy warstwę Pasek z warstwą Cień klikając prawym przyciskiem na tą pierwszą, następnie Połącz w dół.

Tak przygotowany obrazek zapisujemy pod nazwą tlo-menu.png w tym samym katalogu co plik ze stylami (style.css).

Przechodzimy do edycji pliku CSS. Zerknijmy jeszcze tylko na naszą stronę:

Podgląd strony po zmianach

Podgląd strony po zmianach

Naszym zadaniem jest wstawienie niedawno przygotowanego obrazka w tło menu, usunięcie kropek oraz ustawienie linków w pozycji poziomej. Do roboty!

Tworzymy selektor listy wyliczeniowej (ul) znajdującej się wewnątrz sekcji o identyfikatorze menu:

div#menu ul{ 

} 

Usuwamy marginesy oraz dopełnienia wpisując do selektora:

margin: 0px; 
padding: 0px; 

Usuwamy kropki:

list-style-type: none; 

Ustawiamy wysokość równą wysokości obrazka, który zaraz wstawimy w tło:

height: 20px; 

Wstawiamy obrazek w tło:

background: transparent url('tlo-menu.png') no-repeat; 

Ustawiamy wyśrodkowanie tekstu, rozmiar czcionki na 8pt, krój czcionki na Verdana:

text-align: center; 
font-size: 8pt; 
font-family: Verdana; 

Tworzymy selektor dla elementu listy wyliczeniowej (li):

 
div#menu ul li{ 

} 

Stawiamy kursor w jego wnętrzu, zmieniamy sposób wyświetlania elementu na liniowy:

display: inline; 

Tworzymy nowy selektor, dla linków (a) w menu:

div#menu ul li a{ 

} 

Stawiamy kursor w jego wnętrzu i usuwamy podkreślenie oraz zmieniamy kolor tekstu na jasnoniebieski (#A4BFE0) wpisując poniższe linie:

text-decoration: none; 
color: #A4BFE0; 

Przydałoby się zrobić większy odstęp między linkami i przesunąć je o pare pikseli w dół aby były mniej więcej na środku:

padding: 0px 5px; 
line-height: 1.6em; 

Pierwsza wartość obok cechy padding0px zeruje górne i dolne dopełnienie, druga wartość – 5px ustawia prawe i lewe dopełnienie na 5px. Zatem między naszymi linkami powstaję odstęp rzędu 10 pikseli. Cecha line-height oznacza wysokość linii, w naszym przypadku będzie to linia tekstu, ustawiamy ją na 1.6em.

Teraz sprawimy, że kolor linków zmieni się na jaśniejszy gdy kursor myszy będzie nad obiektem. Tworzymy selektor pseudoklasy w ten sposób:

div#menu ul li a:hover{ 

} 

Następnie wstawiamy do niego cechę odpowiedzialną za zmianę koloru:

 
color: #F4F7FC; 

Ewentualnie możemy jeszcze dodać pogrubienie:

 
font-weight: bold; 

Tutaj mamy duże pole do popisu z linkiem możemy robić „wszystko”, zmieniać odstęp między literami, przesuwać go, zmieniać jego tło etc. Ja pokazałem jak uzyskać prosty efekt – zmiany koloru oraz pogrubienia, można zrobić coś znacznie ciekawszego – zmianę koloru tła, zrezygnowałem jednak z tego rozwiązania ponieważ jest to metoda zdecydowanie trudniejsza i etapy jej powstawania mogłyby okazać się nie do przejścia dla osób początkujących. Dla zainteresowanych, napiszę jak to zrobić.

Elementom listy wyliczeniowej nie wystarczy zmienić sposobu wyświetlania z blokowego na liniowy, należy pozostawić blokowy i zmienić sposób przenoszenia elementu (float) na lewo. Sekcję o identyfikatorze menu należy pozycjonować relatywnie, natomiast listę wyliczeniową absolutnie, do tego trzeba określić stałą wysokość linków (które również muszą być wyświetlane jako elementy blokowe) oraz pobawić się marginesami i dopełnieniami.

Oto jak teraz powinna wyglądać nasza strona:

Podgląd strony po zmianach

Podgląd strony po zmianach

Kończymy „zabawę” z nawigacją, zabieramy się za sekcję z treścią.

Upiększamy sekcję z treścią

Na początku zajmiemy się przygotowaniem obrazka. Uruchamiamy nasz ulubiony edytor – GIMP.

Tworzymy nowy obrazek o wymiarach 700×20 pikseli.

Jako kolor pierwszoplanowy ustawiamy #EFF4FA (jasnoniebieski), kolor tła – #FFFFFF (biały). Następnie wybieramy narzędzie Wypełnienie gradientem koloru, Krycie ustawiamy na 100, Tryb: Zwykły, Gradient: Kolor pierwszoplanowy na kolor tła (RGB), Przesunięcie: 0, Kształt: Liniowa, Okresowość: Brak

Ustawianie gradientu w GIMP

Ustawianie gradientu w GIMP

Ustawiamy kursor na pozycji np. 0,10. Druga współrzędna nie jest ważna, ważne, aby kursor znajdował się dokładnie na początku dokumentu (współrzędna X=0) – patrz lewy dolny róg okna. Jeżeli dobrze ustawimy kursor, rozpoczynamy zalewanie gradientem – przytrzymujemy (i nie puszczamy) prawy przycisk myszy oraz klawisz Control, następnie przesuwamy myszkę w prawo, tak aby powstał gradient o długości 120px – patrz pasek postępu u dołu okna.

Definiowanie gradientu w GIMP

Definiowanie gradientu w GIMP

Teraz musimy zrobić dokładnie taki sam gradient z drugiej strony. Duplikujemy warstwę z gradientem. Duplikat odbijamy poziomo (Warstwa->Przekształcenie->Odbij poziomo), następnie wybieramy narzędzie do zaznaczania obszarów prostokątnych i zaznaczamy obrazek począwszy mniej więcej od jego środka, a kończywszy równo na jego końcu (koniec=prawa strona). Kadrujemy warstwę (Warstwa->Kadruj warstwę). Anulujemy zaznaczenie (Zaznaczenie->Brak), spłaszczamy obraz (Obraz->Spłaszcz obraz) i gotowe.

Ustawianie gradientu w GIMP

Ustawianie gradientu w GIMP

Pozostaje dodanie cienia. Klikamy prawym przyciskiem myszy na naszą jedyną warstwę i wybieramy Dodaj kanał alfa – bez tego nie będziemy mogli przesunąć warstwy cienia na spód. Dalej postępujemy dokładnie tak samo jak to robiliśmy tworząc cień tła pod menu. Należy zwrócić uwagę, aby na końcu ustawić krycie warstwy Cień na 80. Gotowy obrazek zapisujemy jako tlo-tresc.png.

Teraz musimy się zająć wstawieniem tła na stronę. Tworzymy nowy selektor:

div#tresc{ 

} 

W jego wnętrzu wstawiamy:

background: transparent url('images/tlo-tresc.png') repeat-y; 

Musieliśmy dodać repeat-y, aby obrazek był powielany względem osi Y.

Jeżeli teraz uruchomimy podgląd, wyraźnie widzimy, że powstał odstęp między menu a treścią, jest to margines nagłówka pierwszego stopnia (h1), musimy go usunąć (margines oczywiście ), tworzymy selektor dla nagłówków wewnątrz sekcji tresc i usuwamy margines górny zastępując go dopełnieniem:

div#tresc h1{ 
margin-top: 0px; 
padding-top: 15px; 
} 

Odstęp powinien zniknąć. Musimy jeszcze wszystkim elementom wewnątrz sekcji tresc ustawić prawe i lewe dopełnienia na 30px (aby je umieścić we właściwym miejscu – teraz zachodzą na cień).

div#tresc *{ 
padding-left: 30px; 
padding-right: 30px; 
} 

Gotowe, powoli ukazuje nam się piękny obrazek:

Finalny podgląd strony

Finalny podgląd strony

Tworzymy tło pod stopkę

To będzie już nasz ostatni obrazek. Uruchamiamy GIMPa, otwieramy w nim obrazek tła pod treść, zaznaczmy całość. Następnie z menu Script-Fu wybieramy Zaznaczenie->Do desenia, w nowo otworzonym okienku wpisujemy nazwę, pod która będzie wyświetlany nasz deseń np. „tło-treść”. Zatwierdzamy i zamykamy obrazek.

Tworzymy nowy o wymiarach 730×150 pikseli. Z listy deseni wybieramy nasze tło pod treść i przeciągamy na pusty obrazek – powinien się wypełnić.

Zaznaczamy całość, następnie zmniejszamy zaznaczenie o 15px (Zaznaczenie->Zmniejsz…), kadrujemy obraz (Obrazk->Kadruj obraz) – tym sposobem pozbywamy się cienia.

Następnym krokiem jest zaokrąglenie rogów – robimy to tak samo jak z nagłówkiem, z tą różnicą, że zaokrąglamy dolny róg (można zaokrąglić górny, następnie odbić obraz pionowo).

No i nie zapomnijmy również dodać cienia!

Gotowy obrazek zapisujemy jako tlo-stopka.png.

Montujemy tło

Tworzymy selektor dla stopki, ustalamy jej stałą wysokość równą wysokości naszego obrazka (u mnie będzie ot 120px):

div#stopka{ 
height: 120px; 
background: transparent url('images/tlo-stopka.png') no-repeat; 
} 

Stopce musimy również ustawić sposób pozycjonowania na relatywny, dlatego, aby każdy element w jej wnętrzu mógł być pozycjonowany absolutnie względem sekcji stopki:

position: relative; 

Po raz kolejny powstaje nam odstęp – między treścią a stopką, tym razem przyczyną jest dolny margines ostatniego paragrafu (p) oraz górny paragrafu znajdującego się w stopce. Usuwamy odstęp tworząc selektory z następującymi cechami:

div#stopka p{ 
margin-top: 0px; 
} 

div#tresc p{ 
margin-bottom: 0px; 
padding-bottom: 15px; 
} 

Paragraf w stopce musimy pozycjonować absolutnie – umieścić go w dolnej części sekcji i najlepiej wyśrodkować, do jego selektora dodajemy następujące wpisy:

position: absolute; 
width: 100%; 
left: 0px; 
bottom: 10px; 
text-align: center; 
margin-bottom: 15px; 

To już koniec Możemy usunąć nasze robocze obramowanie kontenera. Oto efekt końcowy:

Podgląd gotowej strony

Podgląd gotowej strony

Zakończenie

Mam nadzieje, że mój artykuł okazał się przydatny i jego treść nie sprawiała Wam zbyt wielu problemów, za wszelkie niedociągnięcia, błędy, literówki – przepraszam.

Zaraz zaraz, ale co z IE?

No tak, oczywiście Internet Explorer! Przecież on nie obsługuje przezroczystości PNG… No cóż… Możemy poszukać jakiegoś hacka lub najlepiej z góry ustalić tło elementu body i takie samo podstawić pod obrazki. Wystarczy je otworzyć w GIMPie, zrobić nową warstwę, przesunąć ją na spód i zalać kolorem, takim jak tło body. Nie jest to dużo roboty, ale sama myśl, że musimy to robić specjalnie dla inteligentnego Internet Explorera przysparza o ból głowy. Z drugie strony wyobrażamy sobie tłumy zadowolonych użytkowników swojej kochanej przeglądarki krzyczące do nas „dlaczego to tak wygląda?”. No ale zastanówmy się trochę bardziej… Dlaczego jest tylu użytkowników „tego czegoś”? Być może to wina webmasterów? Oni zamiast informować, że przeglądarka nie jest w stanie wyświetlić poprawnie napisanej strony, męczą się i robią wszystko, żeby jednak jakoś to wyglądało i tym samym pozostawiają „biedną” część społeczeństwa w przekonaniu, że wszystko jest w jak najlepszym porządku. Przed wykonaniem dwa razy większego wysiłku należy się poważnie zastanowić… Czy warto? Oczywiste jest, że niektóre strony po prostu muszą mieć wsparcie dla Internet Explorera, przykładem mogą być strony firm, które oferują projektowanie witryn internetowych.

Modyfikacje

Aby nasza strona nadawała się do użytku należy jeszcze zmienić kolor i krój czcionki, niestety w przeglądarkach takich jak IE czy FF domyślne czcionki nie wyglądają za ciekawie.

Jeżeli obrazki przerobimy w ten sposób jak opisałem wyżej to tło treści możemy przenieść do kontenera w ten sposób zyskamy miejsce na dodatkowy obrazek.

W razie jakichkolwiek wątpliwości proszę pytać.

Pozdrawiam
Patryk Jaworski

1 komentarz

  1. Krzysiek

    Fajny efekt i to z pomocą gimpa. Idealny dla początkujących, którzy dopiero uczą się jak tworzyć strony internetowe.

Skomentujesz?

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.