I have been designing sites for a couple of years, using Dreamweaver and Frontpage.  I am wanting to “step up” my design skills and begin creating sites using CSS.

Now my question . . . how did they DO THAT!!?

Here is a site I really like and it looks like they used frames, but reading the code shows that they did not. 

Here is the link: http://www.sonitek.ca/index.html

I would like to incorporate this idea/technology into the new site I am creating.  Can anyone help or point me to the right direction on how to learn this?

Any info would be much appreciated.

Dianna

Dianna,

Actually, using frames is neither necessary nor a good idea - search engine robots tend not to like them. You can do nearly everything you would otherwise accomplish with a frame using divs. You need to read up on the following topics

1. CSS Divs - briefly a div is a container for other CSS elements (text, images…)
2. Positioning CSS elements - you can position divs and other elements in a variety of ways.
3. Floats - floating provides a mechanism for aligning block elements to the left or right of their container

Once you have grasped the basic concepts here you should also look at other CSS capabilities such as opacity and z-Index. The former allows you to create transparency effects and the latter allows you to control the order in which overlapping elements are drawn.

There are a number of sites on the net that discuss these issues.

blackhorsedesign - 28 December 2007 11:09 PM

I have been designing sites for a couple of years, using Dreamweaver and Frontpage.  I am wanting to “step up” my design skills and begin creating sites using CSS.

Now my question . . . how did they DO THAT!!?

Dianna

Hi Dianna,
I saw your post and wanted to reply….that site is actually using tables and a lot of javascript.  Both of which are not necessary now that CSS has come into the picture.

  The world of CSS actually frowns on tables.  Tables are acceptable for tabular data….not web designs.  At least that’s the argument.

If you have Frontpage, consider upgrading it to Expression Web.  This is microsofts replacement for frontpage, and it is a very different design software…..much more sophisticated….and yes….you will design using CSS.  It is a great way to build valid standards-based websites, very clean coding without all the excess junk, and they meet accesability standards set forth by W3.org. 

The first thing to do is start reading as much as you can about css.  Then download the free trial of Expression web.  Expression web does make coding easier, but you must understand CSS and html. (basically, css tells the html how to be displayed and is a method of separating content from style/presentation)

Start at w3schools.org (.com ?) Read the css tutorial.(focus on different types of css selectors(class, id, tag-based, etc) and different types of CSS styles…for ex:  Inline, External style sheets, etc
Also, a great site for tutorials on Expression WEb/CSS is http://www.Expression-web-designer-help.com .  They have flash tutorials or you can read them.  Also, join their forum.

Microsoft.com has added plenty of tutorials as well. 

Just google CSS and you will find plenty of css info.  Of course amazon.com has some good books on the topic.  But really, first, check out w3schools.com.  If you want a good book, when you are ready, just reply here and I will give you a few names of some good books.  I wasted a lot of money on books until I found a few good ones. \

And when you are ready, I will be happy to share some of the CSS coding I have found along my adventures in CSS. One of the neatest things is creating navigation tabs/menus without using images!
Best Regards

one more thing Diana,
The suggestions in the first reply to your post still stand!!  All those topics are important!! Understanding divs, layers, z-index..etc…are necessary to understand!!  So my post was in addition to the first reply!! 
Take Care!

Lucas1 - 03 January 2008 04:27 AM

one more thing Diana,
The suggestions in the first reply to your post still stand!!  All those topics are important!! Understanding divs, layers, z-index..etc…are necessary to understand!!  So my post was in addition to the first reply!! 
Take Care!

Just to emphasize what Lucas said - make sure you don’t fall into the table trap. Handling divs can be frustrating - quite apart from positioning, floating etc there are minor discrepancies between browsers (mainly IE) to deal with. However, in the long term you will regret tables even though they might seem to offer a neat quickfix to your current design needs.