Hvordan bygge nettsteder med en splash-side



En splash-side vises før hjemmesiden til et nettsted. Splash-side bruk kan være en ren estetisk beslutning, begrense tilgangen til visse krav er oppfylt, gi seerne alternativer om nettsiden, eller vise en lessing skjermen mens hovednettstedets innhold laster. Denne artikkelen forutsetter grunnleggende kjennskap til XHTML og CSS, og at splash-side bruk er et estetisk valg.

Bruksanvisning

1 Ordne nettstedet dokumenter slik at de er alle i en hovedmappe, inne som er en mappe som heter bilder hvor alle dine bilder vil bli holdt, mens HTML og CSS sidene ligger i hovedmappen.

2 Opprett en ny HTML-dokument og lagre det som index.html.

3 Skriv XHTML bekreftelsesinformasjon for å styrke din XHTML og HTML på toppen av siden.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>

<Html xmlns = "http://www.w3.org/1999/xhtml&quot; lang =" no "xml: lang =" no ">

4 Sett ønsket splash-side tekst eller bilde i riktig HTML-format mellom body-taggene. Følgende eksempel inneholder både tekst og bilde element.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>

<Html xmlns = "http://www.w3.org/1999/xhtml&quot; lang =" no "xml: lang =" no ">
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
<Title> Tittel Goes Her </ title>
</ Head>
<Body>

<Img src = "images / splashimage.gif" alt = "alternativ bildetekst her" />
<P> Det er ingenting her, med mindre du legger til tekst mellom disse kodene. </ P>

</ Body>
</ Html>

** Bildet element i dette eksempelet forutsetter at bildet er i bilder mappen og lagres som splashimage.gif.

5 Fest CSS stilark under tittelen koder.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>

<Html xmlns = "http://www.w3.org/1999/xhtml&quot; lang =" no "xml: lang =" no ">

<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
<Title> Tittel Goes Her </ title>
<Link type = "text / css" rel = "stylesheet" href = "index.css" />

</ Head>
<Body>

<Img src = "images / splashimage.gif" alt = "alternativ bildetekst her" />
<P> Det er ingenting her, med mindre du legger til tekst mellom disse kodene. </ P>

</ Body>
</ Html>

I dette eksemplet er CSS stilark heter index.css å matche splash-side reddet navnet index.html.

6 Plasser ønskede linker til å føre til hovedinnhold i riktig HTML-format. Denne koblingen er festet til hovedsiden lagret som about.html.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>

<Html xmlns = "http://www.w3.org/1999/xhtml&quot; lang =" no "xml: lang =" no ">

<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
<Title> Tittel Goes Her </ title>
<Link type = "text / css" rel = "stylesheet" href = "index.css" />

</ Head>
<Body>

<Img src = "images / splashimage.gif" alt = "alternativ bildetekst her" />
<P> Det er ingenting her, med mindre du legger til tekst mellom disse kodene. </ P>

<a href="about.html"> om </a>

</ Body>
</ Html>

7 Test alt for å gå tilbake samme vei hvis noe ikke fungerer, og deretter laste opp på ditt domene.

Hint

  • Bruk div koder eller andre midler for å fikse opp justering for å gjøre siden mer behagelig for øyet.
  • JavaScipt brukes ofte med XHTML, HTML og CSS for å legge automatiske tidsur som eliminerer behovet for en direkte kobling fra splash-side til hovedsiden.
  • Splash-side bruk har blandede anmeldelser blant nettsamfunn. Noen reagerer negativt på inkludering av en forstyrrende, og ofte unødvendig siden. Dette bør tas i betraktning når man vurderer målgruppen.