Hvordan lage en mal med Divs

February 16

Opprette en HTML-mal hjelper deg raskt bygge fremtidige sider av et nettsted. Kopier mal koden og lim den inn i editor for å lage en ny side. Ved hjelp av divs betyr at du enkelt kan endre oppsettet av nettstedet ditt ved å redigere en fil: CSS-filen som styrer utformingen av divs over hele området.

Bruksanvisning

1 Opprett en HTML-fil i en redaktør av ditt valg.

2 Sett inn følgende HTML-kode, som skaper strukturen på siden din, og inkluderer en link til CSS-filen. (CSS-filen vil bli opprettet på et senere tidspunkt.)

<Html>

<Head>

<Title> Layout 1 </ title>

</ Head>

<Body>

</ Body>

</ Html>

Legg til en tittel du ønsker å erstatte teksten "Layout 1".

3 Legg til følgende "divs" mellom "<body>" koder.

header

</ Div>

Navigasjon

</ Div>

Innhold

</ Div>

bunn~~POS=TRUNC

</ Div>

Dette er et typisk oppsett for en webside. Den "Header" refererer til toppen av siden; menyen ligger under. Hovedinnholdet i hver enkelt side går inn i "Innhold" -delen, og "bunntekst" delen huser vanligvis bunnmenyen på en nettside. Hver seksjon har en ID som brukes av CSS-filen for å referere til hvert element og plassere det i den aktuelle delen av siden.

4 Lagre siden. (Sørg for at den er lagret som en ".html" -fil.)

5 Lag en ny "Css" fil.

6 Sett oppsettet kode for den samlede dokumentet og deretter legge til og manipulere skrift og bakgrunnsfarge ved hjelp av følgende kode:

{

margin: 0;

padding: 0;

}

kropp {

bakgrunn: #eeeeee;

font-family: sans-serif;

font-size: 12px;

}

7 Legg stilen til header div, som vil definere høyde og farge:

div # header {

høyde: 160 piksler;

bakgrunn: # 800000;

}

8 Definere stilen for de andre div elementer på siden: den "navigasjonen", "innhold" og "bunntekst":

div # navigasjon {

bakgrunn: white;

bredde: 25%;

float: left;

}

div # innhold {

margin: 0 25%;

bakgrunn: # BDBD00;

}

div # footer {

bakgrunn: # 800000;

width: 100%;

klar: left;

}

9 Lagre filen som "MyName.css".

10 Test siden i en nettleser ved å åpne HTML-siden du nettopp har opprettet. Kopier HTML-koden og legge til relevant innhold for å lage hver ny side på ditt nettsted.