Mukautettujen hyperlinkkien luominen CSS-tyylisivujen avulla FrontPage 2003:ssa

Artikkeleiden käännökset Artikkeleiden käännökset
Artikkelin tunnus: 825450 - Näytä tuotteet, joita tämä artikkeli koskee.
Tämän artikkelin Microsoft FrontPage 2002 -sovellusta käsittelevä versio on 287706.
Laajenna kaikki | Kutista kaikki

Tällä sivulla

Yhteenveto

Tässä artikkelissa kuvataan, miten Microsoft Office FrontPage 2003:ssa luodaan mukautettuja hyperlinkkejä CSS (Cascading Style Sheet) -tyylisivujen avulla. Artikkelissa on esimerkkejä, jotka esittelevät mukautettujen hyperlinkkien luomisen CSS-tyylisivuominaisuuksian avulla.

Huomautus Tässä artikkelissa käytetään CSS-tyylisivuominaisuuksia, joita kaikki Web-selaimet eivät välttämättä tue. Lisätietoja on FrontPagen ohjeessa. Voit tehdä tämän valitsemalla Ohje-valikosta Microsoft FrontPage Ohje, kirjoittamalla Haku-riville CSS-tyylisivujen yhteensopivuus ja painamalla sitten ENTER-näppäintä, jolloin näyttöön tulee tietoja aiheesta.

Mukautettujen hyperlinkkien luominen CSS-tyylisivujen avulla

Seuraava esimerkki esittelee, miten mukautetut hyperlinkin luodaan CSS-tyylisivuominaisuuksien avulla:

Microsoftin tarjoamat ohjelmointiesimerkit ovat vain ohjeellisia, eikä niihin liity mitään nimenomaisesti ilmaistua tai oletettua takuuta, mukaan lukien oletettu takuu tuotteen soveltuvuudesta kaupankäynnin kohteeksi tai sopivuudesta johonkin tiettyyn tarkoitukseen. Tässä artikkelissa oletetaan, että olet perehtynyt käytettyyn ohjelmointikieleen sekä työkaluihin, joita käytetään prosessien luomisessa sekä virheiden jäljittämisessä ja korjaamisessa. Microsoftin tukipalvelun asiantuntijat voivat auttaa tietyn toiminnon toteuttamisessa, mutta he eivät muokkaa näitä esimerkkejä niiden kuvaamien toimintojen parantamiseksi eivätkä esitä ratkaisuja erityistarpeita varten. Huomautus Näyttöön saattaa tulla virhesanoma tai sivua ei välttämättä näytetä oikein, jos kopiot esimerkit suoraan tästä artikkelista ja liität ne FrontPageen. Kulmasulkeet (< ja >) saattavat näkyä HTML-koodina. Voit kiertää tämän ongelman liittämällä koodinäytteen ensin tyhjään asiakirjaan Muistiossa ja kopioimalla sen sitten siitä sivuusi FrontPagessa.

Esimerkki 1: Sellaisten hyperlinkkien luominen, jossa vain alleviivaus näkyy erivärisenä

Tämä esimerkki muotoilee hyperlinkin tekstin käyttämään samaa väriä kuin asiakirjan teksti. Vain hyperlinkin alleviivaus näkyy erivärisenä. Voit luoda mukautetun hyperlinkin seuraavasti:
  1. Käynnistä FrontPage ja luo uusi, tyhjä sivu.
  2. Valitse Näytä-valikosta Sivu ja valitse sitten sivun alaosassa Koodi.
  3. Lisää seuraava koodi sivun <head></head>-alueeseen:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }
    a:link    { border-bottom-color: blue }
    a:visited { border-bottom-color: purple }
    a:hover   { border-bottom-color: green }
    a:active  { border-bottom-color: red }
    </style>
    
  4. Lisää seuraava koodi sivun <body></body>-alueeseen:
    <p>Lue lisätietoja osoitteesta <a href="http://www.microsoft.com">http://www.microsoft.com</a>.</p>
    <p>Lue lisätietoja osoitteesta <a href="http://www.msn.com">http://www.msn.com</a>.</p>
    
  5. Valitse Tiedosto-valikosta Tallenna.
  6. Määritä Tallenna nimellä -valintaikkunassa tiedoston tallentamisen sijainti, kirjoita Tiedostonimi-ruutuun Esimerkki1 ja valitse sitten Tallenna.
  7. Valitse Tiedosto-valikosta Esikatselu selaimessa ja valitse sitten Web-selain, jota haluat käyttää sivun esikatseluun.

Esimerkki 2: Valintapainikkeita käyttävien hyperlinkkien luominen

Tämä esimerkki luo kiinteätaustaisia valintapainikkeita käyttäviä hyperlinkkejä. Voit luoda mukautetun hyperlinkin seuraavasti:
  1. Käynnistä FrontPage ja luo uusi, tyhjä sivu.
  2. Valitse Näytä-valikosta Sivu ja valitse sitten sivun alaosassa Koodi.
  3. Lisää seuraava koodi sivun <head></head>-alueeseen:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; padding: 3px }
    a:link    { color: white; background-color: blue }
    a:visited { color: white; background-color: purple }
    a:hover   { color: white; background-color: green }
    a:active  { color: white; background-color: red }
    </style>
    
  4. Lisää seuraava koodi sivun <body></body>-alueeseen:
    <p>Lue lisätietoja osoitteesta <a href="http://www.microsoft.com">http://www.microsoft.com</a>.</p>
    <p>Lue lisätietoja osoitteesta <a href="http://www.msn.com">http://www.msn.com</a>.</p>
    
  5. Valitse Tiedosto-valikosta Tallenna.
  6. Määritä Tallenna nimellä -valintaikkunassa tiedoston tallentamisen sijainti, kirjoita Tiedostonimi-ruutuun Esimerkki2 ja valitse sitten Tallenna.
  7. Valitse Tiedosto-valikosta Esikatselu selaimessa ja valitse sitten Web-selain, jota haluat käyttää sivun esikatseluun.

Esimerkki 3: Ääriviivatehostepainikkeita käyttävien hyperlinkkien luominen

Tämä esimerkki luo hyperlinkkejä, joissa on ääriviivatehostetta käyttävä valintapainike. Hyperlinkin tekstin ympärille tulee värillinen laatikko, joka luo ääriviivatehosteen. Voit luoda mukautetun hyperlinkin seuraavasti:
  1. Käynnistä FrontPage ja luo uusi, tyhjä sivu.
  2. Valitse Näytä-valikosta Sivu ja valitse sitten sivun alaosassa Koodi.
  3. Lisää seuraava koodi sivun <head></head>-alueeseen:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px }
    a:link    { border-color: blue }
    a:visited { border-color: purple }
    a:hover   { border-color: green }
    a:active  { border-color: red }
    </style>
    
  4. Lisää seuraava koodi sivun <body></body>-alueeseen:
    <p>Lue lisätietoja osoitteesta <a href="http://www.microsoft.com">http://www.microsoft.com</a>.</p>
    <p>Lue lisätietoja osoitteesta <a href="http://www.msn.com">http://www.msn.com</a>.</p>
    
  5. Valitse Tiedosto-valikosta Tallenna.
  6. Määritä Tallenna nimellä -valintaikkunassa tiedoston tallentamisen sijainti, kirjoita Tiedostonimi-ruutuun Esimerkki3 ja valitse sitten Tallenna.
  7. Valitse Tiedosto-valikosta Esikatselu selaimessa ja valitse sitten Web-selain, jota haluat käyttää sivun esikatseluun.

Esimerkki 4: Eri tekstimuotoilua käyttävien hyperlinkkien luominen

Tämä esimerkki muotoilee hyperlinkit käyttämään alleviivaamatonta kursivoitua tekstiä, jossa käytetään pieniä kirjaimia. Kun siirrät hiiren osoittimen hyperlinkin päälle, hyperlinkin teksti muunnetaan isoiksi kirjaimiksi. Voit luoda mukautetun hyperlinkin seuraavasti:
  1. Käynnistä FrontPage ja luo uusi, tyhjä sivu.
  2. Valitse Näytä-valikosta Sivu ja valitse sitten sivun alaosassa Koodi.
  3. Lisää seuraava koodi sivun <head></head>-alueeseen:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; font-style: italic; text-transform: lowercase }
    a:link    { color: blue; font-weight: bold }
    a:visited { color: purple }
    a:hover   { color: green; text-transform: uppercase }
    a:active  { color: red  }
    </style>
    
  4. Lisää seuraava koodi sivun <body></body>-alueeseen:
    <p>Lue lisätietoja osoitteesta <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a>.</p>
    <p>Lue lisätietoja osoitteesta <a href="http://www.msn.com">http://WWW.msn.COM</a>.</p>
    
  5. Valitse Tiedosto-valikosta Tallenna.
  6. Määritä Tallenna nimellä -valintaikkunassa tiedoston tallentamisen sijainti, kirjoita Tiedostonimi-ruutuun Esimerkki4 ja valitse sitten Tallenna.
  7. Valitse Tiedosto-valikosta Esikatselu selaimessa ja valitse sitten Web-selain, jota haluat käyttää sivun esikatseluun.

Suositukset

FrontPagen ohjeessa on lisätietoja CSS-tyylisivujen käyttämisestä FrontPage 2003:ssa. Voit tarkastella ohjetta valitsemalla Ohje-valikosta Microsoft FrontPagen Ohje. Kirjoita Etsi-ruutuun CSS-tyylisivut ja paina sitten ENTER-näppäintä, jolloin näyttöön tulee tietoja aiheesta.

Suositukset

Saat lisätietoja napsauttamalla seuraavia artikkeleiden numeroita, jolloin pääset lukemaan artikkelit Microsoft Knowledge Base -tietokannassa:
196488 FP2000: CSS-tyylisivujen kuvaus (tämä artikkeli saattaa olla englanninkielinen)
205996 CSS-tyylisivujen luominen FrontPage 2000:ssa (tämä artikkeli saattaa olla englanninkielinen)
240972 Hyperlinkkien alleviivausten poistaminen FrontPage 2000:ssa (tämä artikkeli saattaa olla englanninkielinen)
222949 FP2000: Lomakepainikkeiden valintatehosteiden luominen DHTML- ja CSS-koodin avulla (tämä artikkeli saattaa olla englanninkielinen)

Ominaisuudet

Artikkelin tunnus: 825450 - Viimeisin tarkistus: 5. tammikuuta 2006 - Versio: 2.1
Artikkelin tiedot koskevat seuraavia tuotteita:
  • Microsoft Office FrontPage 2003
Hakusanat: 
kbhowto KB825450

Anna palautetta

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com