The code that gives your buttons a dynamic appearance is found in the CSS file.
It is accomplished by changes in border color and background-color of the anchor tag attributes. Try to get a little experience with CSS before you start messing with your buttons. They are easy to foul up.
The button headings can be changed simply by changing the text between the <h3></h3> header tags in the links division.
Note: If you'll notice we don't include the page that we are on in the links. This practice pleases the usability people.
The 2 images on this page are the logo in the heading division and the winter scene in the right division. Their behavior on the page is controlled in the CSS file. Their actual page placement is in the code on the page.
The code for the logo: <img src="your-heading.gif" height="52" width="292" alt="You can order a logo to replace this one from our free graphics gallery." border="0" class="logo">
It's a good idea to place images in a separate folder when building your actual website. If you do, you need to supply the path information so that the browser can find the image file.
The portion of code that supplies this information is: src="your-heading.gif".
If we placed the image in its own separate folder within the parent folder the path might look like this: src="images/your-heading.gif".
To set its actual position within the division the code is defined in the CSS file as img.logo. If you replace the logo with a different size image, it might be necessary to adjust the left and top properties.
img.logo{
position:absolute;
left : 25px;
top : 10px;
margin : 5px }
Including the proper dimensions (height and width) of the image speeds browser loading. These properties are added automatically if your HTML editor includes an image placement tool.
The winter scene image is treated a little differently because it is placed within a paragraph.
The code on the page is: <p><img class="right" src="thumbnail-724-tree-barn.jpg" height="145" width="200" alt="" border="0">The code that gives your......
In the CSS file:
img.right{
float : right;
margin : 5px }
The float right property forces the image to the right side of the page and allows the text to flow down the left side of the picture.
Place a <br clear="all"> at the point after the image and after the flowing text that you want the page to break. If you don't add this tag, you could have things coming up next to the image that you don't want there. You'll see what we mean if you leave one out.
Note: Optimize your images. Have you ever gotten an image from someone in an email that took 10 minutes to load into your browser? You don't want this to happen on your web page. Most scanners and digital cameras include software for optimizing your pics. Learn to use it. Next: What You Need
When you complete your website, check our website at www.createafreewebsite.net for free web hosting or paid hosting as low as $4.25 per month.