Hvordan lage en CSS Header Image Klikkbart

Du kan bruke gripende stilark, eller CSS, for å hjelpe deg å sette styling attributter for en klikkbar overskrift bilde på websiden. Dette er nyttig når du vil at brukeren skal kunne klikke på bildet for å ta dem til en annen webside. HTML header koder "h1" til "h6" er reservert for bruk i HTML. Du kan angi attributter for dette hodet, legge til et bilde til det og deretter gjøre det klikkbare ved hjelp av en kombinasjon av CSS og HTML.

Bruksanvisning

1 Åpne et tekstredigeringsprogram, for eksempel Windows Notepad, og åpne HTML-kildefilen.

2 Legg en divisjon (div) tag med en klasse ID for den nye klikkbare header image, i kroppen av HTML-kildefilen. For eksempel "<div class =" myheaderimage ">".

3 Legg en header (H1) tag. For eksempel "<div class =" myheaderimage "> <h1>".

4 Legg en "a href" tag for å gi bildet en link. For eksempel "<div class =" myheaderimage "> <h1> <a href="http://www.mysite.com">".

5 Legg en "img" tag å angi hvilke bildefil som skal brukes. For eksempel "<div class =" myheaderimage "> <h1> <a href="&lt;img"> http://www.mysite.com"> & lt; img tag, overskriften koden og divisjonen tag. For eksempel "<div class =" myheaderimage "> <h1> <a href="&lt;img"> http://www.mysite.com"> & lt; img src = "myimage.jpg"> </ a > </ h1> </ div> ".

7 Lagre HTML-fil, og lukke den.

8 Åpne din CSS fil.

9 Legg CSS stil seksjoner som tilsvarer divisjonen klasse ID som brukes i HTML-kildefilen. Du kan lage så mange deler som ønsket for divisjonen, overskriften, bildet og koblingen stiler. For eksempel "#myheaderimage {width: 800px;} #myheaderimage h1 {color: #bfffff;}".

10 Lagre CSS-filen, og last opp dine oppdaterte kildefiler til webserveren. Web siden vil nå vise et linkable header image når det åpnes.

Hint

  • Hvis CSS-filen ikke allerede er koblet i HTML-kildefilen, legge det i "<HEAD>" del av din webside ved hjelp av formatet "<LINK href =" mycssfile.css "rel =" stylesheet "type =" text / css ">".