Hvordan lage en nettside med en topp område & Left Sidebar

Hvordan lage en nettside med en topp område & Left Sidebar


Den store utvalg av web sidelayout du ser i en uformell surfing økten er rikelig bevis på den svært konfigurerbar naturen av disse dokumentene. To programmeringsspråk som gjør at dette høye nivået av konfigurasjon er Hypertext Markup Language (HTML) og Cascading Style Sheets (CSS), som brukes i HTML. Webutviklere bruker disse språkene for å lage blant annet sideoppsett, felles en som har en øvre område og sidelinjen. Fordelen med dette oppsettet er følelsen av fortrolighet det formidler til dem som ser siden din.

Bruksanvisning

1 Klikk på "File" og deretter "Ny" i enhver tekstbehandler for å opprette et nytt dokument.

2 Lim inn (eller skriv inn) følgende tom webside i dokumentet:

<Html>

<Body>

</ Body>

</ Html>

3 Skriv inn HTML-kode på slutten av dette trinnet hvor som helst mellom "<body>" og "</ body>" koder. Denne koden skaper et rektangulært område (kalt en "divisjon", forkortet "div") med tekst øverst på siden.

<Div style = "border-style: solid">

<P>

Dette er toppen!

</ P>

</ Div>

4 Lagre dokumentet som type "Ren tekst", og med alle filnavn som slutter med ".htm", så Vindu kan åpnes dokumentet med riktig program (en nettleser).

5 Dobbeltklikk på (i Windows Explorer) filen du nettopp lagret. Nettleseren vil vise grenser tekst ( "Dette er toppen!").

6 Type, i dokumentet åpent i tekstbehandlingsprogrammet, følgende linje i stedet for linjen som begynner med "<div style":

<Div style = "position: absolute; left: 200px; top: 30px; border-style: solid">

Denne linjen posisjonerer rektangelet holde teksten på et bestemt sted i nettleseren din skjerm. Ved å opprette to divs og spesifisere sine skjermstillinger, kan du lage en side layout med en topp og en venstre side bar. De resterende instruksjonene viser deg hvordan du kan lage en slik layout.

7 Lim inn følgende HTML-kode etter "</ div>" utsagnet ovenfor. Denne koden skaper rektangelet i dokumentet kropp (nær sentrum av nettleseren skjermen).

<Div style = "position: absolute; left: 200px; top: 300px; border-style: solid">

<P> Dette er hoveddelen!

</ P>

</ Div>

8 Lim inn følgende HTML-kode, som danner venstre side bar, etter "</ div>" tag fra forrige trinn.

<Div style = "position: absolute; left: 20px; top: 300px; border-style: solid">

<P>

Dette er den venstre stolpen!

</ P>

</ Div>

9 Lagre endringer i dokumentet ved å trykke på "Control S," trykk "F5" i nettleseren for å oppdatere nettsiden med endringene. Nettleseren vil vise en side med en topp område og sidefelt.