Hvordan bruke HTML Layers

Lag i HTML tilby en mer fleksibel måte å presentere og organisere informasjon på en webside enn de gamle stil tabeller. Bruke lag i Web-programvare som Dreamweaver CS3 eller uttrykk Web kan høres enkelt ut, men kan bli vanskelig. Forstå strukturen i laget koding i HTML kan unngå møysommelig reparasjoner i mer avanserte web design programmer. En påminnelse: HTML-kode er satt inn mellom venstre (<) og høyre (>) vinkelparenteser. I den korte opplæringen nedenfor, fordi den virkelige koden vil oppføre seg som HTML, enkle brak erstatning for vinkelparenteser. I praksis erstatte venstre ([) og høyre (]) parentes nedenfor med venstre og høyre vinkelparenteser.

Bruksanvisning

1 Hvordan bruke HTML Layers

Lag en enkel HTML-dokument ved hjelp av et ord editor som Microsoft Notepad eller lignende, ikke et tekstbehandlingsprogram. Skriv inn følgende tekst nøyaktig slik det vises på egne linjer. Lagre den på skrivebordet for enkel gjenfinning med filtypen ".html» i stedet for standard [html] [style type = "text / css"] [- # apDiv1 {posisjon ".txt.": Absolutt; width: 200px; height: 115px; z-index. 1;} -] [/ style] [kroppen] [div id = "apDiv1"] Her er min første lag skapelse [/ div] [/ body] [/ html]

2 Hvordan bruke HTML Layers


Åpne en nettleser, og velg "File / Open". Finn dokumentet fra det stedet du lagret den i vinduet som vises. Hvis ordene "Her er min første lag skapelse" ikke vises, gå tilbake og sjekke at alt er angitt nøyaktig som ovenfor.

3 Hvordan bruke HTML Layers


Endre plasseringen og størrelsen av laget på websiden, legge til en andre lag og fancy opp på siden med bakgrunnsfarge. Gjør følgende endringer i koden ovenfor. [Html] [style type = "text / css"] [- # apDiv1! {Position: absolute; height: 44px; venstre: 350 piksler; Top: 185px; z-index: 1; background-color: # FFFF00;} # apDiv2 {position: absolute; width: 200px; height: 80px; z-index: 1; venstre: 271px; top: 65px; background-color: # 00FF00;} body {background-color: # 0066FF;} -] [/ style] [div id = "apDiv1"] Her er min første lag skapelsen. [/ div] [div id = "apDiv2"] [h1 align = "center"] nå er jeg får lyst [/ h1] [ / div] [/ body] [/ html]

4 Hvordan bruke HTML Layers


Sjekk koden som i trinn 2, oppdatere siden første ved å trykke "F5" eller "Vis / Refresh" i nettleseren.

5 Hvordan bruke HTML Layers


Sette inn bilder i lag ved hjelp av HTML-koden [img src] etterfulgt av navnet på bildefilen (jpg) i anførselstegn i [div id] linje. Endre kode som begynner med den første "#apDiv" linjer å lese som nedenfor. Legg merke til sideoppsettet - høyde, bredde, venstre og topp - informasjon i "#apDiv" definisjoner er endret for å vise både objekter klart. Sjekk bildet for å se resultatet <html> <style type = "text / css"> <! - # ApDiv1 {posisjon:.! Absolutt; bredde: 175 piksler; height: 44px; z-index: 1; venstre: 50 piksler; top: 400px; background-color: # FFFF00;} # apDiv2 {position: absolute; width: 150px; height: 100px; z-index: 1; venstre: 400px; top: 25px; background-color: # 00FF00;} body {background-color: # 0066FF;} -> </ style> <div id = "apDiv1"> <img src = "wheres_dinner.jpg"> <h2> Hvor er min middag? </ h2> </ div> <div id = "apDiv2"> <img src = "relaxation.jpg"> <h2> Hvordan å slappe av. </ t </ div> </ body> </ html>

6 Legg handlingen til lag. Sjekk Ytterligere ressurser for et eksempel. Vis koden bak denne siden ved å velge Vis / Kilde i nettleseren.

Hint

  • Endre navn på lag - det apDiv1, apDiv2 - til noe mer meningsfylt som MyDiv1, MyDiv2. Bare sørg for at navnene passer i begge deler.
  • Innrykkene i det første laget teksten eksempel er ikke nødvendig, men de gjør koden lettere å forstå.
  • Kreative lag kan forbedre grafisk webdesign. Linken i avsnittet Andre ressurser sammen statiske tabeller til dynamiske lag.
  • Hver enkelt merke av tegnsetting i koden er kritisk. La ut en semikolon eller brakett og resultatet sannsynligvis vil være et rot.
  • Husk når du skriver koden for å endre [og] brak til <og>.
  • Dette er helt grunnleggende HTML-koding. Imidlertid er de fleste av elementene i kompliserte lagstrukturen er her.
  • Full websider har mange flere HTML-elementer, for eksempel metatags og CSS-stiler.
  • Eldre nettleserversjoner kan ikke være i stand til å vise lag.