Linkit olomuodot, ja niiden css selectorit->

  • linkki, jota ei ole koskaan vielä klikattu -> a:link
  • linkki, jota on klikattu joskus aikaisemmin -> a:visited
  • linkki, jonka päällä on hiiri (tätä muotoilua ei voi nähdä kännykällä)-> a:hover
  • linkki, jota klikataan juuri ->a:active

CSS-sääntöjä:

  • color (väri)
  • text-decoration: none (ei alleviivausta)
  • text-decoration: underline (alleviivaus)

Linkin värit ovat selaimissa OLETUSARVOISESTI sinisiä ja vieraillut linkit tummanvioletteja, mutta yleensä nämä muutetaan CSS:ssä sivuun sopiviksi.

Huom!

  • nav a viittaa navigaatiopalkissa sijaitseviin linkkeihin
  • pelkkä a muun sivun likkeihin

Linkkien määrä navigaatiopalkissa ei pitäisi olla enempää kuin noin 6 kpl.

Nykyään linkkilista määritellään melkein aina vaakatasoon, yleensä yläosaan otsikkokenttään, mahdollisen otsikkokuvan ylä- tai alapuolelle. (Tällä sivustolla olen toistaiseksi kapinallinen)

Pienellä ruudulla linkkilista voidaan joko määritellä sivuun, tai avautumaan ”hampurilais-ikonista” eli siitä missä kolme pientä viivaa vaakatasossa johtaa linkkeihin.

Linkkien ulkoasua muokatessa kannattaa huomioida:

  • Linkin pitäisi erottua muusta tekstistä
  • Linkkisanojen täytyisi olla lyhyitä ja ytimekkäitä, mieluiten yksisanaisia. Optimaalista olisi jos ne olisivat vielä suurin piirtein saman mittaisia, ei siis niin että on tosi lyhyitä ja tosi pitkiä sanoja. Erimittaisuus tuo sommitteluun hankaluutta.
  • Vierailemattomien linkkien väri voi olla erilainen kuin vierailtujen linkkien (ei pakko)
  • Usein kyseisen sivun jossa juuri ollaan, linkki määritellään, niin ettei se ”toimi”, eli ei esimerkiksi vaihda väriä, siis laitetaan linkkimääritys pois html:stä
  • Värit valitaan usein niin, että vierailematon väri kiinnittää enemmän huomiota kuin vierailtu, eli vieraillun linkin väri on ikään kuin kulunut/haalistunut
  • Kun hiiri on linkin päällä, linkki voi muuttaa ulkonäköään, vaikka väriä
  • Kun linkin värin määrittää eriväriseksi juuri silloin kun sitä painetaan (a: active), käyttäjä tietää osuneensa linkkiin, vaikka heti ei tapahtuisi mitään (ei toimi kännykässä/tabletissa)
  • Nykyään on usein tapana määritellä alleviivaus pois linkeistä kokonaan
  • Linkkien muotoilussa, kuten kaikessa muussakin, kannattaa välttää erikoisuuksia, kuten erikoisefektejä. Eivät välttämättä toimi toivotusti eri selaimilla, vaikka vaikuttaisivatkin oikein hienoilta omalla näytöllä. Ne voivat myös hidastaa sivun toimivuutta.
  • Linkeissä ei nykyään juurikaan käytetä erillistä värilaatikkoa jokaisen linkkisanan ympärillä(taustalla) kuten joskus kauan sitten oli tapana. Joskus niihin laitettiin vieläpä liukuvärejä ja hienoja efektejäkin, mitä nykyään pidetään vanhanaikaisena ja mauttomana.
  • Nykyään pyritään selkeyteen ja yksinkertaisuuteen. Efektien kanssa voi tulla ongelmia, kuten ed. kohdassa mainittiin. Koko linkkilista voidaan laittaa värilaatikkoon erottumaan muusta sivustosta, kunhan se sopii kokonaisuuteen ja linkit erottuvat selkeästi.
  • Nettisivuja katsotaan nykyään eniten kapealla näytöllä (känny/tabletti), joten määritykset kapeaan näyttöön kannattaa olla erityisen huolella mietitty. Linkkien välissä on oltava riittävästi tilaa, ja mietittävä tekstin ja taustan väri huolella, että ovat erityisen selkeät.

Linkin teko DW:ssä helposti

  • Live-näkymässä klikkataan 2 kertaa kohtaa jossa on linkki, se muuttuu ensin siniseksi sitten oranssiksi
    • Maalataan osoite ja leikkaa CTL + X
    • Maalaa teksti jonka haluat linkinksi ->DW tarjoaa ketjukuvaketta, Sijoita CTRL V, klikkataan enter
  • Window/Properties paletissa linkkien määritykset/linkiksi muotoilu on helppo