Slik bruker du bilder til HTML5- og CSS3-baserte websideoverskrifter - dummies

Generelt bør du bruke standardfonter for HTML5 og CSS3 nettsideens hovedinnhold, så Å ha et begrenset utvalg av skrifter er ikke så stort problem. Noen ganger vil du likevel bruke skrifter i overskriftene dine. Du kan bruke en grafisk editor, som GIMP, til å lage tekstbaserte bilder og deretter innlemme dem i sidene dine.

Her er prosessen for bruk av en spesiell skrift:

1. Planlegg siden din.

   Når du bruker grafikk, mister du litt fleksibilitet. Du må vite nøyaktig hva overskriftene skal være. Du må også vite hvilken overskrift som skal vises på hvilket nivå. I stedet for å stole på nettleseren for å vise overskriftene dine, lager du grafikk i grafikkverktøyet og plasserer dem direkte på siden.

2. Lag bildene dine.

   Du kan den fantastiske Logos-funksjonen i GIMP (velg Xtns ➩ Script-fu ➩ logoer) for å lage din tekst.

3. Angi skriftstørrelser direkte.

   I bildet er det fornuftig å spesifisere skriftstørrelser i piksler fordi her snakker du virkelig om et bestemt antall piksler. Du lager "virtuell tekst" i grafikkeditoren, så gjør teksten uansett størrelse du vil at den skal være på den ferdige siden.

4. Bruk hvilken som helst skrift du vil ha.

   Du trenger ikke å bekymre deg for om brukeren har skrifttypen fordi du ikke sender skriften, bare et bilde som er sammensatt av skriften.

5. Lag et eget bilde for hver overskrift.

   Denne spesielle øvelsen har to bilder - en nivå 1 overskrift og et nivå 2. Fordi du lager bilder direkte, er det opp til deg å holde oversikt over hvordan bildet vil kommunisere sitt overskriftsnivå.

6. Vurder overskriftsnivået.

   Pass på at nivå 2-nivåene på toppnivå ser litt mindre eller mindre vekt på enn nivå 1. Det vil si at hvis du har bilder som skal brukes i en posisjon 1-innstilling, bør de bruke en større skrift enn bildene som vil bli brukes i et mindre vektlagt kursnivå. Vanligvis gjøres dette ved å justere skriftstørrelsen i bildene dine.

7. Bygg siden som du normalt ville.

   Når du har opprettet disse spesialbildene, bygger du en vanlig nettside. Sett

   og

   -koder på nøyaktig de samme stedene du vanligvis gjør.

8. Sett

   -koder inne i overskriftene.

   I stedet for vanlig tekst, plasser du bildekoder i

   og

   -kodene. Se den kommende koden imageTitles. html hvis du er litt forvirret.

9. Sett overskriftstekst i alt-attributtet.

   Altattributtet er spesielt viktig her, fordi hvis brukeren har grafikk slått av, vises teksten fortsatt som en passende stilig overskrift.Personer med sakte forbindelser ser teksten før bildene lastes, og folk som bruker tekstlesere kan fortsatt lese bildets alttekst.

Her er koden som brukes til å generere de bildebaserte overskriftene:

imageTitles. html



Denne siden beskriver kjente kuer i historien.



De fleste er ikke klar over at storfe faktisk deltok i kampen. De gjorde det ikke selvsagt. Jeg har akkurat gjort det.

Denne teknikken er et fint kompromiss mellom tilpasset grafikk og vanlig HTML som følger:

• Du har god kontroll over bildene dine. Hvis du er dyktig med grafikkverktøyet ditt, kan du lage hvilken som helst type bilde du vil ha som overskrift. Det er bokstavelig talt ingen grense bortsett fra din dyktighet og kreativitet.

• Siden beholder sin struktur. Du har fortsatt overskrifter på plass, så det er enkelt å se at du mener at et bestemt bilde skal fungere som en overskrift. Du kan fortsatt se sideorganisasjonen i HTML-koden.

• Du har tilbakekallingstekst. Altattributtene aktiveres hvis bildene ikke kan vises.

• Den semantiske betydningen av bildet overskrifter bevares. Alt-taggene gir en annen flott funksjon. Hvis de replikerer bildeteksten, er denne teksten fortsatt tilgjengelig for skjermlesere og søkemotorer, så teksten er ikke begravet i bildet.

Denne teknikken er flott for overskrifter eller andre områder, men legg merke til at overskriftsteksten ble gjentatt i taggen. Dette er viktig fordi du ikke vil miste teksten. Søkemotorverktøy og skjermlesere trenger teksten.

Ikke bli fristet til å bruke denne teknikken til større mengder kropps tekst. Å gjøre det medfører noen problemer:

• Teksten kan ikke søkes lenger. Søkemotorer kan ikke finne tekst hvis det er begravet i bilder.

• Teksten er vanskeligere å endre. Du kan ikke oppdatere siden din med en tekstredigerer. I stedet må du laste ned bildet, endre det og laste det opp igjen.

• Bilder krever mye mer båndbredde enn tekst. Ikke bruk bilder hvis de ikke legger vesentlig på siden din. Du kan gjøre saken for noen få overskrifter, men det er vanskeligere å rettferdiggjøre at hele siden er lagret som et bilde bare for å bruke en bestemt skrift.