Peti čas – Linkovi

Dragan Filipović Korak po korak, Kurs Comments (0)

Vrste linkova:

1.Regularni – povezuju stranice, sajtove isl.

2.Email linkovi – otvaraju Outlook ili drugi program za slanje emailova.

3.Sidra – povezuju različite delove strane, npr. back to top, ili naslovi i tekst .

 

Regularni linkovi mogu biti spoljašnji (vode do drugog sajta) i unutrašnji (vode do drugih strana istog sajta).

Izrada linkova

Linkovi se prave tako što selektujemo tekst od koga želimo da napravimo link, i u Properties baru, u polju za link ukucamo adresu koju link treba da otvori.

properties-bar-linkovi

Nakon upisivanja adrese obavezno kliknemo ENTER. U kodu se pojavljuje tag za link - a:

neki tekst

Prva osobina linka href="http://blic.rs" je referenca – gde vodi link (više o putanjama ovde). Druga bitna osobina linka je target - kako se link otvara, tekući prozor ili novi prozor.  Za sve spoljašnje linkove obavezno birati target="_blank" odnosno otvaranje linka u novom prozoru. Treća, za SEO veoma bitna osobina, je titletitle="Opis linka - KW"

Tako da je krajnji izgled koda: 

neki tekst

Podrazumevani izgled linkova.

Linkovi su podrazumevano plave boje i podvučeni. – a:link

Posećeni linkovi su ljubičasti. – a:visited

Aktivni linkovi (u trenutku dok klikćete po linku) su crveni. - a:active

Najbitnija karakteristika je a:hover, odnosno izgled kada se mišem pređe preko linka.

Izgled linkova menjamo kroz CSS.

a {
color: green;
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}

Korišćenje selektora element (odnosno ime elementa, u ovom slučaju a) znači da će izabrani dizajn važiti za sve elemente na sajtu, odnosno sve linkove (u ovom slučaju).  Ovde treba biti pažljiv, odnosno treba birati samo minimalne promene, boju i dekoraciju teksta.

Izrada dugmića

Ukoliko želimo da pojedini linkovi izgledaju drugačije, onda tim linkovima treba dodati klasu.

Tekst je inline element, pa ne može imati dimenzije (širinu i visinu).  Da bi link koji je napravljen od teksta, postao dugme, potrebno je da ga proširimo pomoću padding osobine. Kasnije ga možemo finije formatirati, pozadinska boja, boja, senka, zaobljene ivice isl.

.dugme {
padding: 5px 10px;
border: 1px solid #96d1f8;
background: #65a9d7;
border-radius: 8px;
-webkit-box-shadow: black 0 0 7px 3px;
-moz-box-shadow: black 0 0 7px 3px;
box-shadow: black 0 0 7px 3px;
color: white;
text-decoration: none;
}
.dugme:hover {
 background: #28597a;
color: #ccc;
-webkit-box-shadow: inset black 0 0 7px 3px;
-moz-box-shadow:inset black 0 0 7px 3px;
box-shadow:inset black 0 0 7px 3px;
}
.dugme:active {
background: red;
}

3d dugme

Za izradu 3d dugmeta pogledajte ovaj tekst.

 Kada u CSS-u napravimo dugme, to je samo jedan deo posla, odnosno napravili smo format za neki element na sajtu (u html strani). Sledeći korak je izrada tog html elementa, u ovom slučaju linka.

U desnoj koloni selektujete neku reč od koje želite da napravite dugme, i od nje napravite link, tako što u Properties baru u polju za link ukucate #. Taraba # se koristi za izradu praznih linkova, kada još uvek ne znamo pravu adresu linka.

U kodu ćete dobiti

neka rec

 Da bi od ovog linka napravili dugme potrebno je da mu dodate klasu koju ste ranije spremili u CSS-u.

neka rec

 

Senka – box-shadow

CSS3 osobina box-shadow se sastoji od 5 vrednosti:

box-shadow: boja x-udaljenje y-udaljenje blur offset;

Osim boje sve ostale vrednosti se unose u pikselima: 

box-shadow: #000000 6px 8px 12px 3px;

Kako bi se osigurali da stariji browseri prikažu css3 osobine moramo koristiti prefixe za različite browsere:

-webkit- za Chrome, -moz- za Mozillu, -o- za Operu.

-webkit-box-shadow: black 0 0 7px 3px;
-moz-box-shadow: black 0 0 7px 3px;
-o-box-shadow: black 0 0 7px 3px;
box-shadow: black 0 0 7px 3px;

 Ukoliko želimo unutrašnju senku, dodajemo novu vrednost inset:

box-shadow:inset black 0 0 4px 1px;

 Za senku koja treba da bude podjednako udaljena oko elementa sa svih strana, stavimo x i y rastojanje 0.

Senka teksta:

Tekst takođe može imati senku:

text-shadow:#000000 4px 4px 5px;

 Ovde ne postoji vrednost offset, kao ni inset.

senka teksta

Transition

Prelaz između običnog u hover stanje može da se ublaži CSS3 osobinom transition.

Tranzicija može da se odnosi samo na određenu osobinu ili na sve osobine. Ova osobina ima 3 vrednosti:

transition: osobina trajanje vrsta;

Npr: transition: all 1s linear; ili transition:color 0.7s ease-in;

Za osobinu se kuca ime te osobine ili reč all koja se odnosi na sve osobine. Trajanje se unosi u sekundama. Vrsta prelaza može biti: linear, ease, ease-in, ease-out, ease-in-out...

Navigacija

Navigacija se uvek radi pomoću neuređenih listi. Liste pravimo tako što prvo napravimo nekoliko redova teksta. Tekst uvek kucamo u dizajn delu, kako bi se tagovi za paragraf automatski napravili.

U vašem drugom redu napravite 4 reda teksta:

home

o meni

galerija

kontakt

Redove selektujte mišem i napravite listu, klikom na ikonu za liste u Properties baru.

  • home
  • o meni
  • galerija
  • kontakt

Dok je lista još uvek selektovana u polju za link ukucajte # kako bi od svake stavke napravili link.

Ovim smo završili izradu navigacije u html strani. Ostaje nam da navigaciju formatiramo u CSS-u. Koristićemo parent i child selektore u CSS-u. Odnosno linkove, kao i stavke liste stilizovaćemo kroz jedini poznati element – drugi-red.

Za drugi red koristili smo id selektor, odnosno #drugi-red, to nam je parent element. Ostali elementi koji se nalaze u drugom redu su child elementi, i u CSS-u ih formatiramo na sledeći način:

#drugi-red ul li a

Ovde smo samo prikazali niz elemenata kako stoje u html-u. U okviru drugog reda nalazi se lista, u listi su stavke liste, a svaka stavka u sebi ima link.

<div id="drugi-red">
<ul>
<li><a href="#">home</a></li>

 

  Prvo ćemo vertikalnu listu pretvoriti u horizontalnu, odnosno stavke liste ćemo poređati horizontalno.

#drugi-red ul li {
display:inline;
}

 

 Liste podrazumevano imaju definisane margine, pa se iznad drugog reda pojavio prazan prostor. Ovo rešavamo CSS resetom, odnosno ukidanjem tih margina.

#drugi-red ul {
margin:0;
}

 Sada možemo pristupiti izradi dugmića.

#drugi-red ul li a {
padding:10px 30px;
background-color:blue;
line-height:40px;
color:white;
font-weight:bold;
-webkit-transition:all 0.7s ease-in-out;
}
#drugi-red ul li a:hover {
background-color:red;
}

 

Ukoliko želimo da ukinemo razmak između dugmića, linkovima treba dodati negativnu marginu:

margin-left:-4px;

Pogledajte neke zanimljive navigacije:

http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html

http://www.red-team-design.com/wp-content/uploads/2011/06/css3-menu.html

http://papermashup.com/demos/css-buttons/

 Email linkovi

Pri izradi email linkova u polju za link ukucamo mailto:mojaadresa@domen.com

Klikom na email link otvara se program za slanje mailova (Outlook, Gmail isl), u svemu ostalom isti su kao i regularni linkovi.

 

Zadatak:

Napraviti email link u Futeru (od imena i Prezimena), u desnoj koloni postaviti neko dugme, u drugom redu napraviti navigaciju.

Pogledajte vaš sajt.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.