Skapa en samling av kartor med flikar för webbplatsen (4 / 7 steg)
Steg 4: HTML-uppdelning 2: kroppen
Den <!--Start flytande huvuddel -> bara sätter upp det funky sätt sidan centrerar sig. Dess inte riktigt nödvändigt, bara en design estetik.<!--startmenyn--> detta är "intressant" lite om du gillar denna typ av grejer. Nu, innan alla high-end web developer börjar hälla över denna kod och klagade på att det är ingen strikt formatering för knapparna, ja... Jag vet.
Viktigt, om du kommer att återanvända detta sedan få huvudet runt detta nästa uttalande:
I huvudsak plonked jag bara varje knapp i menyn div sekventiellt. Logotypen är första, det finns inget avstånd, knappen shop kommer härnäst. När du läser koden, notera där en bild börjar och de andra slutar. När du går att byta grejer ut för dina egna bilder vara försiktig med att formatera om för mycket, kanske du wonky saker upp lite. Du har blivit varnad.
Med andra ord, när du läser koden för knappen placering, titta bara på det som en rak, oavbruten mening. Du vill byta ut någon av mina ord för era ord, göra det utan att oroa om formatering.
Observera att denna kod är tagen från tillverkarens platser sida. Det innebär två saker
1. det måste finnas vältning bilder och koden för alla andra sidor. Rulle-overs = länkar = kod
2. du behöver inte att länka till sidan som du är på. Detta är sidan maker platser så du behöver bara visa bilden av knappen utan att behöva koppla den till något, behöver inte rulla över magicry, dvs.
< img src="Images/makers_tall.png" alt = "maker platser" width = "94" höjd = "33" / >
Slutligen finns MapKit. Du behöver inte göra någonting mer än dumpa koden du fick från guiden MapKit i en div och du är klar.
< body onload="imagePreload('Images/shops_rollover.png')" >
<!--starta flytande huvuddel-->< div stil = "vänster marginal: auto; marginal-
rätt: auto; position: släkting; bakgrund: #ffffff; text-align:
vänster; bredd: 700px; "id ="body_content">
<!--startmenyn-->< div id = "meny" >
< img src="Images/make.png" alt = "" bredd = "130" höjd = "33" / >< en
href="makershops.html" onmouseout="imageRestore()"
onMouseOver = "imageSwap ("affärer","Images/shops_rollover.png",
1) ">< img src="Images/shops_normal.png "alt ="maker shops"width ="93"
höjd = "28" border = "0" id = "butiker" / >< / a >< img src = "bilder /
makers_tall.png"alt ="maker platser"width ="94"höjd ="33"/ >< en
href="cool_places.html" onmouseout="imageRestore()"
onMouseOver = "imageSwap ("förlägger","Images/places_rollover.png",
1) ">< img src="Images/places_normal.png "alt ="platser"width ="94"
höjd = "28" border = "0" id = "platser" / >< / a >
<!--slutet menyn-->< / div >
<!--start karta-->< div id = "platial_mapKit" >
Du anger platial mapKit koden här!!!
< / div ><!--slut karta-->
< / div ><!--slut flytande huvuddel-->
< / body >