Du kan ganska enkelt lägga in kommandot hover när du vill visa besökaren att den kör muspekaren över en länk. Här kan du använda både färg och bilder. Här har vi lagt in en fusklänk före varje textavsnitt som ser ut så här <a href="#">och vi slutar alltså länken med </a>. Här börjar du med att efter starten för kommandot, här använder vi #ettnamn, skriva ett a direkt efter kommandot. Som #ettnamnpakommandot a{här kommer kommandon för hur cellen eller den länkade texten ser ut innan någon för en muspekare över}. För att sedan få fram effekten när muspekaren förs över länken skrivs a:hover så här #ettnamnpakommadot a:hover {här kommer kommandon för hur cellen eller den länkade texten ser ut efter någon för en muspekare över}
Några exempel på hur du kan skifta färg både i bakgrund och text med hover kommandot. |
| här har vi använt <!--start för kod-->#hoover1 a{ background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }<!--slut för kod--> i css filen och id="hover1" i td taggen |
| För att få fram hoover effekten har vi i nästa steg använt <!--start för kod-->#hoover1 a:hover{ background-color:#0000FF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#FF0000; font-size:large }<!--slut för kod--> i vår css fil som ger effekten när du för muspekaren över området som är länkat. |
| Och i denna <!--start för kod-->#hoover5 a{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i vår css fil samt id="hoover5" i vår td tagg till denna cellen. |
| För att få fram effekten när du för muspekaren över länken har vi använt <!--start för kod-->#hoover5 a:hover{ background-color:#FFFFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i css filen som ändrar bakgrundsfärgen till vit |
| Här har vi använt <!--start för kod-->#hoover7 a{ background-color:#000000; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}<!--slut för kod--> i vår css fil och id="hoover7" i td taggen |
| För att sedan ändra bakgrundsfärg och färgen på texten har vi skrivit <!--start för kod-->#hoover7 a:hover{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> efter i vår css fil. Lägg märke till a efter hoover7 och a:hoover i nästa kommando för att få fram effekten. |
I vår CSS fil har vi alltså skrivit <!--start för kod-->#hoover1 a{ background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }
#hoover1 a:hover{ background-color:#0000FF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#FF0000; font-size:large }<!--slut för kod--> för den första med förändring av bakgrundsbild och färg på text. |
Vi har skrivit <!--start för kod-->#hoover5 a{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}
#hoover5 a:hover{ background-color:#FFFFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> För nästa där vi förändrar bakgrundsfärg från grått till vitt. Och <!--start för kod-->#hoover7 a{ background-color:#000000; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}
#hoover7 a:hover{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> Där vi ändrar från svart till vitt på bakgrundsfärg och tvärtom för text. |
Som du ser i vårt första kommando kan du även ändra bakgrundsbild med hover |
| Det ordnar du med <!--start för kod-->#hoover9 a{background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/bild_som_bakgrund.jpg); background-repeat:no-repeat; font:Arial, Helvetica, sans-serif; color:#000000; }<!--slut för kod--> i css filen |
| För att sedan få fram effekten när du för muspekaren över länken skriver du <!--start för kod-->#hoover9 a:hover{background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/bakgrundsbild.jpg); background-repeat:no-repeat; font:Arial, Helvetica, sans-serif; color:#FFFFFF; }<!--slut för kod-->efter första kommandot |
| Om vi använder en bild och repeterar denna med en lite annorlunda bakgrund får man denna effekt <!--start för kod-->#hoover11 a{background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }<!--slut för kod--> |
|
För att sedan få fram effekten när du för muspekaren över har vi efter det första kommandot lagt en #hoover11 a:hover sä här<!--start för kod-->#hoover11 a:hover{background-color:#000000; background-image:url(http://www.webbgbg.se/webbdesign/blue/bla_rund.gif); font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large }<!--slut kod-->
|
| | |
användbara länkar där du kan läsa mer |
cssdrive.com
tips på stylesheets med exempel på slutliga resultatet |
cssimport.com
En sida som ger inspiration |
alistapart.com
Här hittar du mycket att sätta händerna i |
codeproject.com
har många sidor med stylesheets och exempel. |
|
Ett visitkort med adressen till din hemsida är aldrig fel att lämna till vänner, nya bekanta, på en intervju eller bara som tips. På detta stället får du hem 150 stycken för kanske 50 :- om du kan tänka dig att vänta ett par veckor och ha lite producentreklam på baksidan. Vill du ha dem snabbt får du betala en hundralapp mer. Du har massor med mallar med design att välja på och du kan även ladda upp en egen bild som bakgrund. Tänk på att hålla bakgrunden ljus om du skall använda mörk text och mörk bakgrund vid ljus text. Tycker du de flyter ihop så använd layers eller skuggor på texten.
Och glöm nu inte att lägga till din url eller hemsida på sökmotorerna.
Klicka här>>>
Du skall se till att ha ett visitkort till hands när du pratar om hemsidan eller din verksamhet. En kalender är inte heller fel. Ge bort en kalender till din frisör, kiosk, butik eller arbetsplats. Ger gratis reklam för verksamhet och hemsida. Även här har du flera hundra mallar med olika design, bara att välja. Sedan kan du även ladda upp en egen bakgrundsbild och designa dina alldeles egna kalendrar. Tänk dock på att använda en ljus bakgrund vid mörk text och tvärtom vid mörk bakgrund. Du kan oftast få texten synlig om du använder ljus text som vit på en röd bakgrund genom att använda layers eller skuggor på texten. Du har flera gratis program för att designa din egen design på vår sida om photoshop, klicka här>>> | 
på
one.com kan du bara lägga en domän men har, å andra sidan, 3000MB
plats. Ett billigt konto för dig som bara vill ha upp en hemsida snabbt.
Med ett program och ca 500 mallar sätter du upp din hemsida på en halvtimma.
Här har du tillgång till en MySQL. Du sätter upp hur många bloggar du vill med tre klick i kontrollpanelen. Du betalar 260:- i första avgift och får då med en domän på köpet. De nya Finesserna på detta webbhotell är en blog som du sätter upp med tre klick. Behöver du sedan tips angående design på blog kan du ju alltid ta en titt på länkarna hos html-skolan . |
Här har du annars sveriges idag billigaste webbhotell där du betalar 1 krona per månad. 100 Mb plats och ett email konto. Kan vara något för dig som vill experimentera lite innan du sätter upp din riktiga hemsida. Du lär dig detta med ftp, css och hur du sätter ihop sidan. Du har faktiskt även gratis email samt telefon support. |
| med telefonsupport |
utan telefonsupport |
 Jumpline erbjuder 12 månader gratis webbhotell
med 10 MySQL databaser, plats för 10 domäner, 10 Gb plats och 100 emailkonton om du redan har domän. Annars köper du en domän hos dem eller på webbgbg.se>>> Domäner handlar du från 20:- idag. Här får du alltså 10 gratis MySQL databaser i ett helt år du kan installera forum, bloggar cms:er, som drupal, mambo, e-butiker eller 140 andra förinställda typer av tjänster. Du använder ett program kallat plesk för att sätta upp din applikation på två minuter. |
Gratis e-butik med några klick , ja det kan väl kallas gratis. Du får med ett förinstallerat opencart med alla funktioner inlagda som betalning via visa, mastercard och paypal. Du tar sedan och laddar upp bilder, skriver priser, byter loggan och du är igång. Vi har lagt ett enkelt exempel på www.fjernsyn.se se mer här>>> |
|
