Skapa anpassade hyperlänkar med CSS-formatmallar i FrontPage 2003

Artikelöversättning Artikelöversättning
Artikel-id: 825450 - Visa produkter som artikeln gäller.
En version av den här artikeln för Microsoft Frontpage 2002 finns i 287706.
Visa alla | Dölj alla

På den här sidan

Sammanfattning

I denna artikel beskrivs hur du skapar anpassade hyperlänkar med CSS (Cascading Style Sheets) i Microsoft Office FrontPage 2003. Artikeln innehåller även exempel på sådana länkar.

Obs! I denna artikel används CSS-funktioner som som kanske inte stöds i alla webbläsare. Mer information finns i hjälpen för FrontPage: Klicka på Hjälp om Microsoft FrontPageHjälp-menyn, skriv CSS-kompatibilitet i Sökfältet och tryck på RETUR så att avsnitten visas.

Skapa anpassade hyperlänkar med CSS-formatmallar

Följande exempel visar hur du kan skapa anpassade hyperlänkar med CSS-funktioner:

Microsoft tillhandahåller programmeringsexempel enbart i förklarande syfte och gör inga utfästelser, varken uttryckligen eller underförstått. Detta omfattar men begränsas inte till underförstådd garanti för säljbarhet eller lämplighet för ett visst syfte. I denna artikel förutsätts att du känner till det programmeringsspråk som demonstreras och de verktyg som används för att skapa och felsöka procedurer. Microsofts supporttekniker kan hjälpa till med att förklara funktionen hos en viss procedur, men kan inte ändra dessa exempel för att ge ytterligare funktioner eller skapa procedurer som motsvarar dina speciella behov. Obs! Om du kopierar exemplen från artikeln och klistrar in dem i FrontPage kan det visas felmeddelanden eller så visas inte sidorna korrekt. Vinkelparenteserna (< och >) kan visas som HTML-kod. Du kan kringgå problemet genom att först klistra in exempelkoden i ett tomt dokument i Anteckningar och sedan kopiera den till sidan i FrontPage.

Exempel 1: Skapa hyperlänkar där endast understrykningar visas med en annan färg

I detta exempel formateras hyperlänktexten med samma färg som dokumenttexten och understrykningen visas med en annan färg. Gör så här för att skapa den anpassade hyperlänken:
  1. Starta FrontPage och skapa en ny, tom sida.
  2. Klicka på SidaVisa-menyn och klicka sedan på Kod längst ned på sidan.
  3. Infoga följande kod i sidområdet <head></head>:
    <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. Infoga följande kod i sidområdet <body></body>:
    <p>Mer information finns på <a href="http://www.microsoft.com">http://www.microsoft.com</a>.</p>
    <p>Mer information finns på <a href="http://www.msn.com">http://www.msn.com</a>.</p>
    
  5. Klicka på SparaArkiv-menyn.
  6. Ange en plats där du vill spara filen i dialogrutan Spara som, skriv Exempel1 i rutan Filnamn och klicka sedan på Spara.
  7. Peka på Förhandsgranska i webbläsarenArkiv-menyn och klicka sedan på önskad webbläsare.

Exempel 2: Skapa hyperlänkar med hovringsknappar

I detta exempel skapas hyperlänkar med hovringsknappar med enfärgad bakgrund. Gör så här för att skapa den anpassade hyperlänken:
  1. Starta FrontPage och skapa en ny, tom sida.
  2. Klicka på SidaVisa-menyn och klicka sedan på Kod längst ned på sidan.
  3. Infoga följande kod i sidområdet <head></head>:
    <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. Infoga följande kod i sidområdet <body></body>:
    <p>Mer information finns på <a href="http://www.microsoft.com">http://www.microsoft.com</a>.</p>
    <p>Mer information finns på <a href="http://www.msn.com">http://www.msn.com</a>.</p>
    
  5. Klicka på SparaArkiv-menyn.
  6. Ange en plats där du vill spara filen i dialogrutan Spara som, skriv Exempel2 i rutan Filnamn och klicka sedan på Spara.
  7. Peka på Förhandsgranska i webbläsarenArkiv-menyn och klicka sedan på önskad webbläsare.

Exempel 3: Skapa hyperlänkar med konturknappar

I detta exempel skapas hyperlänkar med konturknappar. En färgad ruta visas runt hyperlänktexten, vilket ger en kontureffekt. Gör så här för att skapa den anpassade hyperlänken:
  1. Starta FrontPage och skapa en ny, tom sida.
  2. Klicka på SidaVisa-menyn och klicka sedan på Kod längst ned på sidan.
  3. Infoga följande kod i sidområdet <head></head>:
    <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. Infoga följande kod i sidområdet <body></body>:
    <p>Mer information finns på <a href="http://www.microsoft.com">http://www.microsoft.com</a>.</p>
    <p>Mer information finns på <a href="http://www.msn.com">http://www.msn.com</a>.</p>
    
  5. Klicka på SparaArkiv-menyn.
  6. Ange en plats där du vill spara filen i dialogrutan Spara som, skriv Exempel3 i rutan Filnamn och klicka sedan på Spara.
  7. Peka på Förhandsgranska i webbläsarenArkiv-menyn och klicka sedan på önskad webbläsare.

Exempel 4: Skapa hyperlänkar med annan textformatering

I detta exempel formateras hyperlänkarna med icke-understruken, kursiv text i gemener. När du placerar markören på hyperlänken, ändras länktexten till versaler. Gör så här för att skapa den anpassade hyperlänken:
  1. Starta FrontPage och skapa en ny, tom sida.
  2. Klicka på SidaVisa-menyn och klicka sedan på Kod längst ned på sidan.
  3. Infoga följande kod i sidområdet <head></head>:
    <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. Infoga följande kod i sidområdet <body></body>:
    <p>Mer information finns på <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a>.</p>
    <p>Mer information finns på <a href="http://www.msn.com">http://WWW.msn.COM</a>.</p>
    
  5. Klicka på SparaArkiv-menyn.
  6. Ange en plats där du vill spara filen i dialogrutan Spara som, skriv Exempel4 i rutan Filnamn och klicka sedan på Spara.
  7. Peka på Förhandsgranska i webbläsarenArkiv-menyn och klicka sedan på önskad webbläsare.

Referenser

Mer information om CSS i FrontPage 2003 finns i hjälpen för FrontPage. Klicka på Hjälp om Microsoft Office FrontPageHjälp-menyn. Skriv CSS i rutan Sök, och visa sedan hjälpavsnitten genom att trycka på RETUR.

Referenser

Om du vill ha mer information klickar du på följande artikelnummer för att visa artiklarna i Microsoft Knowledge Base:
196488 Fs000: Vad är CSS (Cascading Style Sheets)? (Länken kan leda till en webbplats som är helt eller delvis på engelska)
205996 Skapa CSS-formatmallar (Cascading Style Sheet) i FrontPage 2000 (Länken kan leda till en webbplats som är helt eller delvis på engelska)
240972 Ta bort understrykningar från hyperlänkar i FrontPage 2000 (Länken kan leda till en webbplats som är helt eller delvis på engelska)
222949 FP2000: Skapa hovringseffekter för formulärknappar med hjälp av DHTML och CSS (Länken kan leda till en webbplats som är helt eller delvis på engelska)

Egenskaper

Artikel-id: 825450 - Senaste granskning: den 3 januari 2006 - Revision: 2.0
Informationen i denna artikel gäller:
  • Microsoft Office FrontPage 2003
Nyckelord: 
kbhowto KB825450

Ge feedback

 

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