Slik viser HTML Text Under en Thumbnail i en CSS Gallery

Ved hjelp av Cascading Style Sheets (CSS) er nå en akseptert måte å utforme og sette opp en nettside. Hvis du ønsker å lage et bildegalleri, er Hypertext Markup Language (HTML) som brukes til å plassere bildene på siden, og CSS gir dem en bestemt størrelse og plassering. Som bilder, er en tekst bildetekst plassert ved hjelp av HTML og stylet ved hjelp av CSS. Dette kan gjøres fra samme sted i HTML-dokumentet.

Bruksanvisning

1 Finn riktig del av HTML-koden. Hvis miniatyrbilde galleri inneholder fotografier, koden for hvert bilde sannsynlig starter med "img src" og slutter med en fil i ".jpg" format. Det bør være flere linjer med samme kode, en for hvert bilde i galleriet.

2 Finne slutten av koden for bildefilen. Dette bør være etter der det står ".jpg". Sett markøren der, og slo tilbake, slik at du har en blank linje for å jobbe med, direkte under koden for bildet. Skriv inn teksten du vil skal vises under bildet i denne situasjonen her.

3 Plasser teksten i to div koder, og gi div beskrivelse. Dette er hva som vil tillate deg å gå inn i CSS delen av dokumentet i en fremtidig trinn og endre design. Teksten skal se slik ut: <div class = "desc"> Tekst du ønsker under bildet </ div>. Dette div vil bli plassert inne i større div, for hele bildet. På den måten har du fleksibilitet til å bestemme hvor endringer er nødvendig.

4 Finn CSS delen av dokumentet. Dette vil være under kode som sier <style type = "text / css">. Plasser markøren på slutten av koden og trykke retur, slik at du har en tom linje for å sette inn din egen tekst.

5 Skriv inn koden som gjør at CSS for å finne den delen av HTML-dokumentet som du ønsker å gjøre endringer stil til. Denne delen av koden som kalles velgeren. Det vil se slik ut: div.desc

Dette betyr at du ønsker å gjøre endringer i div at du heter "synkende", som er en forkortelse for beskrivelse.

6 Lag stil endringer i bildeteksten, hvis du ønsker det. For eksempel ved hjelp av CSS, kan du justere teksten slik at den er sentrert med bildet, og du kan bestemme hvor stort rommet er at bildeteksten vises på. Du må legge til disse kodene under velgeren din:

div.desc {

text-align: center;

bredde: 120px}

Hint

• Sjekk nøyaktigheten av arbeidet ved å lagre HTML-koden og deretter åpne filen for fotogalleriet. Hvis filen er allerede åpen, traff oppdatere og endringene skal vises.
• Du kan også bla gjennom CSS tutorials (se Ressurser) for å finne flere måter å stilisere bildeteksten.
• Sørg for at eventuelle endringer i HTML og CSS er nøyaktige. Hvis du har skrivefeil, eller hvis koden ikke er riktig, kan resultatene være uforutsigbar.