Part 4

As I mentioned earlier, rounded corners are attractive and play a significant role in web site design. Creating rounded corners in CSS is a bit tricky. There are many different techniques, most of them being very complicated, however I found one technique by Adam Kalsey which seems to be the holy grail of rounded corner. You can learn more about it on his website/blog http://kalsey.com/2003/07/rounded_corners_in_css/.

There are many other rounded corner scripts just search Google.

Once you've added rounded corners to the content area it should look something like this:



After you've given a great deal of thought about 'information design' (how the user will navigate the site, will the user have a sense of ownership and know where they are at all times? -what kind of content will the site feature? -will information flow in the most intelligent way possible?), add some links to the navigation menu with anchor tags
( <a href="somewhere.html">somewhere</a>).

If you're not sure what your landing pages will be, just use place holder links, but be consistant with your naming conventions to avoid confusion. Try to give web landing pages and images similar names.

Since there will be more than one color for the links that the user will mouse over, we will create some classes for the anchor tagss (<a class="menu" href="...)

<div id="menu">
<a class="menu" href="index.html">Home</a>
<a class="menu" href="gallery.html">Gallery</a>
<a class="menu" href="prodigalpup.html">Kidz</a>
<a class="menu" href="artlog/">Artlog</a>
<a class="menu" href="vlog/">Vlog</a>
<a class="menu" href="mailto:brotherkarloz@yahoo.com">Contact</a>
</div>

In the CSS add the anchor style for the nav text. The a.link style is the color and properties of the menu links as they appear before you mouse over or click them. The a.visited style is the color and properties of a link that a user has recently clicked on and the a.hover style determines how the link will behave as the user mouses over it. In the example below, the link will change colors and become underlined becuase of the text-decoration operator and value. The class 'menu' is inserted in the style (a.menu.link) to distinguish it from other anchor styles.



Since the text on the page will have links that are a different color from the menu links, let's create another class of achor tags for the text links:

a.text:link {
color: #d2d2d2;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
}
a.text:visited {color: #d2d2d2;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
a.text:hover {color: #9ba6ab;
text-decoration: none;
}

Save All and open the file in your browser and you should see links that change as you mouse over them.



Now you're ready to add content to the page. You can insert graphics by using the image tag:
<img src-"nice-picture.jpg" border ="0">

and text links by adding anchor tags:
<a href ="somewhere.html">click here</a>

and image links by a combination of both:
<a href ="somewhere.html"><img src-"nice-picture.jpg" border ="0"></a>

There is much, much more to learn about HTML and CSS. You can learn it all for free at W3Schools.com. Also, get into the habit of viewing the source code for web pages. In Firefox, just Hold>Ctr>U.

Once you create a web site, you will have to purchase your own domain (www.somedomain.com) and find someone to host it (Yahoo, GoDaddy, Network Solutions, or someone like that). You can use an FTP program or Dreamweaver to upload your files to the site, or you can simply admire what you've done on your own computer.

I hope that by showing you how I created this site, you have a better understanding of web design.