Slik skjuler digitale bilder på Web-sider

September 24

Takket være gjennomgripende stilark (CSS), gjemmer valgte bildene på en nettside er rask og vanligvis smertefri. Bare legg en stil regel til din style sheet, knytte stilark til siden din, refererer stilen regelen, og du er klar til å gå. Denne metoden gjør det mulig å skjule et enkelt bilde, en gruppe med bilder, eller hver enkelt bilde på siden din.

Bruksanvisning

Hvor å skjule bilder på en webside

1 Åpne eller lage din stilark. Hvis websiden din allerede har et stilark, åpne den i tekstredigeringsprogram. I Notisblokk, for eksempel, velg Fil fra menyen på toppen av skjermen, og klikk deretter "Open". Som standard åpner programmet .txt formaterte filer bare, men det er i stand til å lese noen ren tekst-fil, inkludert gjennomgripende stilark. For å vise disse filene, finner du på rullegardinmenyen som leser "tekstdokumenter (* .txt)" og klikk på den, og velg Alle filer. Finn din eksisterende stilark og åpne den. For å opprette en ny stil ark, klikker du på Fil og velg deretter "Ny".

2 Legg til en regel til din stilark. Bilder på websider er vanligvis vises ved hjelp av bildekode, kodet som <img>. Stilen regelen i dette eksempelet vil påvirke denne koden, og forutsetter at Vil du unngå et enkelt bilde vises på nettsiden, ikke alle av dem. Det ser ut som dette:

img.remove {visibility: hidden}

Kopier og lim inn denne eksakte koden hvor som helst i den nye stilarket, eller i bunnen av den eksisterende stilark. Koden forteller nettleseren din for å finne et bilde tag med en (klasse) navn på "fjern", og for å gjøre det usynlige når nettleseren viser siden. Vær oppmerksom på at denne metoden vil forlate tom plass der bildet viser vanligvis. Hvis du vil ha bildet og mellomrom for å forsvinne helt, bruk følgende regel:

img.remove {display: none}

3 Lagre stilark. Hvis du arbeider fra en eksisterende CSS-fil, velger du Fil, og klikk deretter "Lagre" og din stil ark vil være klar til bruk. Hvis du har opprettet et nytt stilark, velger du Fil, klikk på "Lagre". Som standard Notepad lagrer alle filene som tekstfiler, med en .txt-fil forlengelse. Du vil ha en Css filtypen. For å gjøre dette, klikker du på rullegardinmenyen som leser "tekstdokumenter (* .txt)" og velg Alle filer. Så, i filnavnet, gi stilark et navn som "styles.css" (uten anførselstegn). Sørg for å lagre filen i hovedmappen til ditt nettsted.

4 Knytte stilark i HTML-koden. Hvis du bruker en eksisterende stilark, vil CSS-filen allerede lenker til koden din, slik at du kan hoppe over dette trinnet.

Hvis du vil koble en nyopprettet stilark, først åpne nettside ved hjelp av Notisblokk. Velg Fil-menyen øverst på skjermen, og klikk "Åpne". Husk at som standard, åpnes .txt formaterte filer bare, men det kan faktisk åpne noen ren tekstfil; dette inkluderer HTML-dokumenter. For å vise disse filene, finner du på rullegardinmenyen som leser "tekstdokumenter (* .txt)" og klikk på den, og velg Alle filer. Finn din eksisterende nettside og åpne den.

Finn linjen nær toppen av siden som starter med <title>. Flytt markøren til slutten av denne linjen og trykk Enter. På blank linje under, kopier og lim inn følgende kode:

Dette forteller din nettside for å laste stilark du nettopp opprettet. Velg fil fra menyen øverst og klikk på "Lagre" for å oppdatere siden din. Hold tekstredigeringsprogram åpne.

5 Finn bildet du ønsker å skjule i HTML-koden på siden din. Hvis du er ny til å bygge websider, den koden du ser i en teksteditor er sannsynligvis forvirrende, og du kan ikke vite hva du skal se etter. I dette tilfellet vil vi bruke redaktørens søkefunksjonen for å finne bildet du vil skjule. Klikk Rediger i menyen øverst på siden, velg deretter "Finn". Skriv inn filnavnet på bildet du ønsker å skjule (f.eks myimage.jpg) i dialogboksen som kommer opp. Hit "Enter". Dette tar deg til den første linjen med kode som inneholder den gitte filnavn.

6 Legg et stilark referanse til det bildet du ønsker å skjule. Koden for det bildet du ønsker å skjule vil trolig se slik ut:

For å skjule det, er alt du trenger å gjøre nå referere regelen du opprettet i trinn 2. Husk at du ga denne regelen et navn på "fjern" i stilarket. Legge til referansen, vil HTML-koden nå se slik ut:

Lagre HTML-siden, oppdatere nettleseren din, og bildet ikke lenger vises på nettsiden din.