Sådan bruges billeder til dine HTML5- og CSS3-baserede websideoverskrifter - dummier

Generelt skal du bruge standard skrifttyper til HTML5 og CSS3 websideens hovedindhold, så at have et begrænset antal skrifttyper er ikke så stort problem. Nogle gange vil du dog bruge skrifttyper i dine overskrifter. Du kan bruge en grafisk editor, som GIMP, til at oprette tekstbaserede billeder og derefter indarbejde dem i dine sider.

Her er processen for at bruge en special skrifttype:

1. Planlæg din side.

   Når du bruger grafik, taber du lidt fleksibilitet. Du skal vide præcis, hvad overskrifterne skal være. Du skal også vide, hvilken overskrift der vises på hvilket niveau. I stedet for at stole på browseren for at vise dine overskrifter, skaber du grafik i dit grafiske værktøj og placerer dem direkte på siden.

2. Opret dine billeder.

   Du kan de fantastiske Logos-funktioner i GIMP (vælg Xtns ➩ Script-fu ➩ logoer) for at oprette din tekst.

3. Angiv skriftstørrelser direkte.

   I billedet er det fornuftigt at angive skrifttypestørrelser i pixels, fordi her taler du virkelig om et bestemt antal pixels. Du opretter "virtuel tekst" i din grafiske editor, så skriv teksten uanset størrelse, du vil have den på den færdige side.

4. Brug en hvilken som helst skrifttype, du vil have.

   Du behøver ikke bekymre dig om, hvorvidt brugeren har skrifttypen, fordi du ikke sender skrifttypen, bare et billede, der er sammensat af skrifttypen.

5. Opret et separat billede for hver overskrift.

   Denne særlige øvelse har to billeder - et niveau 1 overskrift og et niveau 2. Fordi du skaber billeder direkte, er det op til dig at holde øje med, hvordan billedet vil kommunikere sit overskriftsniveau.

6. Overvej overskriftsniveauet.

   Sørg for at gøre overskriftsniveau 2-værdier ser lidt mindre eller mindre fremhævet end niveau 1. Det vil sige, at hvis du har billeder, der skal bruges i en overskrift 1-indstilling, skal de bruge en større skrifttype end billeder, der vil blive anvendes i et mindre understreget overskriftsniveau. Normalt gøres dette ved at justere skriftstørrelsen i dine billeder.

7. Bygg siden som du normalt ville.

   Når du har oprettet disse specialbilleder, skal du opbygge en almindelig webside. Sæt

   og

   tags på nøjagtigt de samme steder, som du normalt gør.

8. Sæt

   tags inde i overskrifterne.

   Placer billedkoder inden for

   og

   tags i stedet for almindelig tekst. Se den kommende kode imageTitles. html hvis du er lidt forvirret.

9. Sæt overskriftstekst i altattributten.

   Altattributten er særligt vigtig her, fordi hvis brugeren har grafik slukket, vises teksten stadig som en passende stylet overskrift.Personer med langsomme forbindelser kan se teksten, før billederne indlæses, og folk, der bruger tekstlæsere, kan stadig læse billedets alttekst.

Her bruges koden til at generere de billedbaserede overskrifter:

imageTitles. html



Denne side beskriver kendte køer i historien.



De fleste mennesker er ikke klar over, at kvæg faktisk deltog i kampen. De gjorde det ikke selvfølgelig. Jeg har lige gjort det.

Denne teknik er et godt kompromis mellem brugerdefineret grafik og almindelig HTML som følger:

• Du har god kontrol over dine billeder. Hvis du er dygtig med dit grafikværktøj, kan du lave en hvilken som helst type billede, du vil fungere som overskrift. Der er bogstaveligt talt ingen grænse bortset fra din dygtighed og kreativitet.

• Siden bevarer sin struktur. Du har stadig overskriftskoder på plads, så det er nemt at se, at du mener, at et bestemt billede skal fungere som en overskrift. Du kan stadig se sideorganisationen i HTML-koden.

• Du har tilbagekaldtekst. Altattributterne aktiveres, hvis billederne ikke kan vises.

• Den semantiske betydning af billedoverskrifter er bevaret. Alt-tags giver en anden stor funktion. Hvis de replikerer billedteksten, er denne tekst stadig tilgængelig for skærmlæsere og søgemaskiner, så teksten er ikke begravet i billedet.

Denne teknik er god til overskrifter eller andre områder, men bemærk at overskriftsteksten gentages i taggen. Dette er vigtigt, fordi du ikke vil tabe teksten. Søgemaskine værktøjer og skærmlæsere har brug for teksten.

Lad være med at friste til at bruge denne teknik til større mængder krops tekst. Det gør nogle problemer:

• Teksten kan ikke søges længere. Søgemaskiner kan ikke finde tekst, hvis det er begravet i billeder.

• Teksten er sværere at ændre. Du kan ikke opdatere din side med en teksteditor. I stedet skal du downloade billedet, ændre det og uploade det igen.

• Billeder kræver meget mere båndbredde end tekst. Brug ikke billeder, hvis de ikke væsentligt tilføjer til din side. Du kan gøre sagen for et par overskrifter billeder, men det er sværere at retfærdiggøre at have hele din side gemt som et billede bare for at bruge en bestemt skrifttype.