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/.
Before I add the rounded corners to the HTML, I will first create the graphics. So let's go back to Photoshop.
Create a new canvas 30 pixels by 30 pixels (Hold Ctr>New). Magnify the canvas several times so that it will be easier to see and work with. Create 2 new layers and select layer 2. In the toolbar, hold down the 'rectangular marquee tool' and select the 'eliptical marquee tool' from the tool options. Make sure that anti-alias is checked in the options. Click the most upper left part of the canvas and drag a circular section region down to the bottom right:
Double click on 'set foreground color' in the toolbar and select the color that you want the rounded corner to be. You can also use the eye dropper tool to click on the design file (assuming it's open) to select the color you want. Fill the circle with the foreground color (Hold>Alt>Delete).
Pick the color for the negative space of the rounded rectangle. Select layer 1 and fill the layer with the foreground color (Hold>Alt>Delete). I made it much lighter so that you can see it in the graphic below. Select both layer 1 and 2 and merge them together (Hold Ctr>E). Drag the guides so that you divide the canvas into 4 equal parts, each 15 pixels by 15 pixels (use the info palette to get the right measurement). Select each quadrant seperately, copy them and paste them all into new canvases and save for web. Name the tl.gif, tr.gif, bl.gif and br.gif (top-left, top-right, bottom-left, bottom-right).
Adam Kalsey's rounded rectangles code is fairly straight forward, but since I wanted to create nested rounded rectangles, I had to modify the code quite a bit. Since I'm a designer and not a programmer, the code is probably not too pretty, but it seems to work. There are seperate sets of rounded corner graphics so that the inner rounded rectangle is a different color. I had to go back into photoshop to create the other set (mtl.gif, mtr.gif, mbl.gif and mbr.gif ).
Here's the code in the HTML file which will create rounded corners around the main div and the righcol div:
And here is the code in the CSS:
Now let's add some dummy code to the HTML to test and see how well the rounded corners code is working:
'Save All' in Dreamweaver and double click on the HTML file wherever you saved it to on your computer. The web page should open in a browser and you should be able to see your progress. The rounded rectangles seem to be working...
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. You can use an FTP program or Dreamweaver to upload your files to the site.
I hope that by showing you how I created this site, you have a better understanding of web design. Just Email me if you have any questions...
You can download a .pdf version of this tutorial (4MB) by clicking here
Carlos
 |
