webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 4

Hiperłącza - ciekawe efekty

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: hiperłącza hiperłącza linki linki odnośniki odnośniki kurs css kurs css

Będzie to dział, który chyba najbladziej się każdemu z was przyda. Pamiętam, że pierwszy raz użyłem CSS do zmiany wyglądu linków. Na tej lekcji nauczysz się nie tylko jak można spowodować zmianę koloru tekstu, ale również jak można osiągać bardzo ciekawe efekty, jak zawsze, przy minimalnym nakładzie pracy.

Będziemy dalej kontynuować pracę nad twoją stronką. Stwórzmy więc najpierw bazę dla naszych linków, czyli zdefiniujmy wygląd samego a [bez klasy].

Dodaj do pliku 'style.css':

a {
text-decoration:none; // 1
color: black} // 2

Opis:

Dzięki temu, że nie użyłem tu klasy wszystkie 'a' będą miały te właściwości wyżej opisane - dziedziczenie. Teraz czas, aby opisać linki, które będą w menu po lewej w lewej komórce środkowej tabeli.

Dodaj do pliku 'style.css'

a.lewe { // 1
border-left: 1px solid white; // 2
border-bottom: 1px solid white;
width:90%; // 3
background-color:#CBD1D3; // 4
display: block; } // 5

a.lewe:hover { // 6
background-color: white;} // 7

Opis:

Nadszedł czas, aby to wszystko jakoś ze sobą połączyć(twoją stronę i nowe klasy).

Otwórz plik 'index.htm' i znajdź pierwszą od lewej komórkę drugiej (środkowej tabeli). Powinno to wyglądać mniej-więcej tak:

<td class="menu">
<tr>
<p class="menu1">Menu:</p>
<p class="menu2">
<A href="index.htm" class="lewe">O mnie</a>
<A href="index.htm" class="lewe">Ważne</a>
<A href="index.htm" class="lewe">Formularz</a>
<A href="index.htm" class="lewe">Kontakt z autorem</a>
<A href="index.htm" class="lewe">www.yarpo.prv.pl</a></p>
</td>
<td class="txt">

Fragmenty kodu o kolorze czarnym powinny się już znajdować w kodzie stron [jest to druga tabela, pierwsza komórka od lewej]. Nowe fragmenty są niebieskie. Podobnych zmian dokonaj na wszystkich stronach, które dotąd zrobiłeś. Powinny wyglądać prawie tak samo. Liczba linków jest zależna od twojej woli.

Poprobuj. Zrób jedną stronę o sobie (skopiuj 'index.htm' zmień jego nazwę i napisz kilka zdań o własnej osobie), drugą z listami - np. lista zakupów (tu nie chodzi o treść), kolejną z formularzami (nie będą działać, gdyż wstawisz jedynie pola, ale popróbuj), następny link niech uruchamia program pocztowy [ <a href="mailto:twoj@adres.pl class="lewe">Kontakt</a> ]. Możesz oczywiście zrobić jeszcze więcej stron, ale sądzę, że starczy jeśli będzie ich 3-4. Oczywiście, aby linki odnosiły się do nich musisz wpisać href="xxx", gdzie xxx - nazwa strony.

Rada: Nie musisz za każdym razem pisać od nowa kodu. Stwórz jedną stronę, która będzie mieć wszystko na swoim miejscu, a następnie skopiuj ją x razy i pozmieniaj jedynie nazwy nowo otrzymanych plików.

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Szukasz wykonawcy?
Tworzenie stron internetowych.
Zobacz nasze realizacje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org