Hvordan lage en nettside ved hjelp Div Tags

Hvordan lage en nettside ved hjelp Div Tags


Div koder er elementer av HTML-kode som gjør det enkelt å bryte websidene dine opp i seksjoner som overskrifter, sidefelt og artikkelen områder. Div står for \ "divisjon \" og representerer en generisk divisjon av innhold. Ved hjelp av divs i forbindelse med stilark gir deg enorm fleksibilitet i webdesign, og er mye mer intuitivt enn å skape tabellbaserte oppsett.

Bruksanvisning

1 Lær grunnleggende HTML og CSS-kode. Du kan mestre det grunnleggende HTML i en ettermiddag, og CSS er en enkel, men kraftfull metode for å designe dine sider i hva du vil. Mange gratis tutorials finnes over hele nettet for å hjelpe deg ut.

2 Opprett en ny HTML-fil ved hjelp av et tekstredigeringsprogram som Notisblokk eller TextEdit. I <body> -delen, omslutte hver del av innholdet du ønsker å opprette inne ett sett med div koder (en åpning <div> tag og en avsluttende </ div> tag) som vist i dette eksemplet: <br /> <br /> <div> <br /> <h1> Website Overskrift </ h1> <br /> </ div> <br /> <br /> <div> <br /> <h2> Artikkel tittel </ h2> <br /> <p> Artikkel innhold </ p> <br /> </ div> <br /> <br /> <div> <br /> <h3> Sidebar Overskrift </ h3> <br /> < ul> <br /> <li> Sidebar listepunkt 1 </ li> <br /> <li> Sidebar listepunkt 2 </ li> <br /> </ ul> <br /> </ div>

3 Gi hver div en unik identitet ved å inkludere \ "id \" attributt i hver åpning div tag: <br /> <br /> <div id = \ "header \"> <br /> <h1> Website Overskrift </ h1> <br /> </ div> <br /> <br /> <div id = \ "body \"> <br /> <h2> Artikkel tittel </ h2> <br /> <p> Artikkel innhold </ p> <br /> </ div> <br /> <br /> <div id = \ "sidebar \"> <br /> <h3> sidebar Overskrift </ h3> <br /> <ul> <br /> <li> Sidebar listepunkt 1 </ li> <br /> <li> Sidebar listepunkt 2 </ li> <br /> </ ul> <br /> </ div>

4 Lag et stilark, ved hjelp av CSS-kode, som gir regler for hver div på siden din. For eksempel, for å skape stilregler for div med id \ "header, \" du ville skrive <br /> <br /> div # header {<br /> stil regler gå her <br />} <br /> <br /> Hvordan du style hver del er opp til deg. En grunnleggende layout kan ha overskriften eksistere som et banner på toppen av HTML-siden, og sidepanelet plassert til høyre. For det, kan det hende at stilark se slik ut: <br /> <br /> div # header {<br /> klart: både <br /> GO <br />} <br /> <br /> div # body {<br /> float: left <br /> GO <br /> bredde: 70% <br /> GO <br />} <br /> <br /> div # sidebar {<br /> float: rett <br /> GO <br /> bredde: 30% <br /> GO <br />}

5 Link til stilark i HTML-siden ved å inkludere denne koden i <head> -delen. <br /> <br /> <Link rel = \ "stylesheet \" href = \ "yourstylesheet.css \" type = \ " text / css \ "/> <br /> <br /> Endre \" yourstylesheet.css \ "til selve navnet og plasseringen av stilark.