Print PDF
Favorite
Email
Step 4HTML Breakdown 2: The body
The <!--Start main floating body--> just sets up the funky way the page centers itself. Its not really necessary, just a design aesthetic.
<!--Start menu--> This is the 'interesting' bit if you like this sort of stuff. Now, before any high-end web developer starts pouring over this code and lamenting at the fact that there's no strict formating for the buttons, yeah.. I knows.
Important, if you're going to re-use this then get your head around this next statement:
Essentially I just plonked each button into the menu div sequentially. The logo is first, there is no spacing, the shop button comes next. As you read the code, note where one image starts and the other ends. When you go to swap stuff out for your own images be careful not to reformat too much, you might wonky things up a little. You have been warned.
In other words, when you read the code for the button placement, just look at it as a straight, uninterrupted sentence. You want to swap out any of my words for your words, do so without worrying about formating.
Note that this code is taken from the Maker's locations page. That means two things
1. There needs to be roll-over images and code for all other pages. Roll-overs = links = code
2. You do not need to link to the page that you are on. This is the maker locations page, so you only need to display the button image, no need to link it to something, no need for roll over magicry, i.e.
<img src="Images/makers_tall.png" alt="maker locations" width="94" height="33" />
Finally there is the MapKit. You need do nothing more than dump the code you got from the MapKit wizard in to a div and you are done.
<body onload="imagePreload('Images/shops_rollover.png')">
<!--Start main floating body--> <div style="margin-left: auto; margin-
right: auto; position: relative; background: #ffffff; text-align:
left; width: 700px; " id="body_content">
<!--Start menu--> <div id="menu">
<img src="Images/make.png" alt="" width="130" height="33" /><a
href="makershops.html" onmouseout="imageRestore()"
onmouseover="imageSwap('shops',,'Images/shops_rollover.png',
1)"><img src="Images/shops_normal.png" alt="maker shops" width="93"
height="28" border="0" id="shops" /></a><img src="Images/
makers_tall.png" alt="maker locations" width="94" height="33" /><a
href="cool_places.html" onmouseout="imageRestore()"
onmouseover="imageSwap('places',,'Images/places_rollover.png',
1)"><img src="Images/places_normal.png" alt="places" width="94"
height="28" border="0" id="places" /></a>
<!--End menu--> </div>
<!--Start map--> <div id="platial_mapKit">
You enter the platial mapKit code here!!!
</div><!-- End Map -->
</div><!--End main floating body-->
</body>
<!--Start menu--> This is the 'interesting' bit if you like this sort of stuff. Now, before any high-end web developer starts pouring over this code and lamenting at the fact that there's no strict formating for the buttons, yeah.. I knows.
Important, if you're going to re-use this then get your head around this next statement:
Essentially I just plonked each button into the menu div sequentially. The logo is first, there is no spacing, the shop button comes next. As you read the code, note where one image starts and the other ends. When you go to swap stuff out for your own images be careful not to reformat too much, you might wonky things up a little. You have been warned.
In other words, when you read the code for the button placement, just look at it as a straight, uninterrupted sentence. You want to swap out any of my words for your words, do so without worrying about formating.
Note that this code is taken from the Maker's locations page. That means two things
1. There needs to be roll-over images and code for all other pages. Roll-overs = links = code
2. You do not need to link to the page that you are on. This is the maker locations page, so you only need to display the button image, no need to link it to something, no need for roll over magicry, i.e.
<img src="Images/makers_tall.png" alt="maker locations" width="94" height="33" />
Finally there is the MapKit. You need do nothing more than dump the code you got from the MapKit wizard in to a div and you are done.
<body onload="imagePreload('Images/shops_rollover.png')">
<!--Start main floating body--> <div style="margin-left: auto; margin-
right: auto; position: relative; background: #ffffff; text-align:
left; width: 700px; " id="body_content">
<!--Start menu--> <div id="menu">
<img src="Images/make.png" alt="" width="130" height="33" /><a
href="makershops.html" onmouseout="imageRestore()"
onmouseover="imageSwap('shops',,'Images/shops_rollover.png',
1)"><img src="Images/shops_normal.png" alt="maker shops" width="93"
height="28" border="0" id="shops" /></a><img src="Images/
makers_tall.png" alt="maker locations" width="94" height="33" /><a
href="cool_places.html" onmouseout="imageRestore()"
onmouseover="imageSwap('places',,'Images/places_rollover.png',
1)"><img src="Images/places_normal.png" alt="places" width="94"
height="28" border="0" id="places" /></a>
<!--End menu--> </div>
<!--Start map--> <div id="platial_mapKit">
You enter the platial mapKit code here!!!
</div><!-- End Map -->
</div><!--End main floating body-->
</body>
| « Previous Step | Download PDFView All Steps | Next Step » |
 |
Add Comment
|
