I’ve created at least 10 different sites over the past 10 years, but none of them have been developed better than my latest Site Build It! site, flat-stomach-exercises.com.
Now, I’m not talking about the the design and look and feel of the site. I’m talking about the way in which it was coded.
The entire design is controlled by CSS (cascading style sheets) and SSI (server side includes).
I know, I know… more intimidating acronyms that could confuse the heck out of you… 
I’ll try to keep it simple so bear with me, OK?
CSS & Includes
CSS allows you to control large aspects of your site’s design and layout with one file. So if you want to change the color of your hyperlinks, you’d update your CSS file and your entire site will reflect the change.
Include files generally contain content that is repeated throughout the site (left nav, footer, etc.). So instead of updating every page when you want to change your left nav, you update the file that includes your left nav. And every page on your site references that one file.
With the combination of CSS and includes, I can update any aspect of my entire site (width of site, hyperlink colors, left navigation text, header image, font face and size, border colors, header styles, bullet styles, footer etc. by updating the corresponding files… instead of opening each page individually.
I’ve used CSS before with other sites but only for certain things like hyperlinks, font styles, colors, etc. But I’d never used it for an entire layout. Thanks to Dreamweaver I was able to really unleash the power of CSS completely without becoming inundated with confusing code.
You won’t believe this, but the entire coding layout of my Flat Stomach site is simply this…
<html>
<body>
<div id=”top”> (My header)
<div id=”leftnav”> (My left nav)
<div id=”sidebar”> (My right nav)
<div id=”content”> (My main content)
<div id=”footer”> (My footer)
</body>
</html>
That’s the coding shell for my entire site. Then I use a style sheet (CSS) to define how the layout should look in each of those 4 ID sections (The “content” section is obviously different on every page so you wouldn’t include that one).
So any time I want to update any of those sections, I don’t open the content pages, I open the one CSS file and/or the includes.
Of course, if you view the source of my site, you’ll still see all the scary-looking code, but the browser combines and displays the code from the CSS and include files. (So it really looks like I’m a big time programmer, right?)
However, when I’m updating a particular section of my site, I only open the corresponding file (leftnav, footer, etc.).
So if you give one gift to yourself this year, learn CSS. Grab a copy of Dreamweaver CS3 and go to your local bookstore and get a reference book. I bought Dreamweaver CS3 For Dummies.
No really, I did. People do actually buy those “dummy” books. 
You’ll be amazed at what CSS can do for your site. And when you realize you can update your entire site’s design and layout in about 20 minutes, you’ll understand why it’s worth it.
So What’s My Biggest Design Mistake?
Clearly it was not using CSS sooner. The thought of learning more coding overwhelmed me for so long that I kept putting it off. But it really helps to have a good Web editor to help you muddle through it.
Thanks to Dreamweaver, I didn’t have to really become more proficient as a programmer, I just had to become more proficient with using the program.
For some of you reading this, CSS is probably old news. Even though it wasn’t new to me either, I hadn’t unlocked its full potential.
But mark my words… I will never design a site without CSS again.
You shouldn’t either.
{ 9 comments… read them below or add one }
Great post, thanks.
you just need
Tables are so 1999
We’ve all been there, believe me. Once you discover the power of CSS, you wonder why you ever used tables. Here’s a Dreamweaver extension that can build your CSS layout at the click of a button:
http://www.justdreamweaver.com/webassist-css-sculptor.html
It creates valid cross-browser layouts from 41 preset layouts that are completely customizable with CSS. It’s a major time-saver for generating website prototypes.
HI- I HAVE BEEN LOOKING GOR SOMEONE AS SMART ASD GIVING OF YOU KNOWLEGE FOR YEARS. I BELIEVE I WILL MAKE IT NOW. I WILL COME BACK AND LET YOU KNOW BUT GOD BLESS YOU FOR BEING SO REAL AND GIVING TO THE NEXT PERSON. THERE ARE SO MANY SCAMS AND SUCH ON THE NET- I JUST DID NOT KNOW WHERE TO GO AND I DID STUMBLE UPON YOU. THANKS AGAIN!
Hello All.
Firstly i would just like to say a big thanks to Lisa for creating a group of sites that will help others become as succesful as you without much marketing/designing skills to create a website, 2createawebsite.com, 2planawebsite.com and websitebabble.com have encouraged me so much! I am currently planning my website and was thinking of making an information site, with site build it. Now with your website – flat-stomach – i was wondering what else you used to design it other than Site Built It, or do they have everything needed like they claim???
Regards,
Mike
Thanks Mike. Yes, they have everything you need: a website builder, brainstorming help for your topic and a ton of marketing advice to help you get traffic and promote your website. Just be prepared to do a lot of reading because there is a lot of it.
Hi Lisa
Yes, css and includes makes life so much easier. Just one thing that’s bothering me. When I design any of my includes, I link to the css so that I can visually see how it will look. All fine but when it comes to uploading the site, I’ll end up with lots of links to the css throughout a web page every time an include is displayed.
Obviously, I can get round this by taking out all the css links from the includes before I upload the site leaving just the one in the header but is there a simpler solution here, I feel I’m missing something. Now, I’m sure a pure html editor would tell me that without wysiwyg you would have to do it without being able to see the design anyway, but since I’m using DW it would be good to know if there’s a solution.
Cheers
Berryman
Follow on Twitter: @silverlunace
The “dummies” books are great! I have several of them on a variety of topics and go to them over most of the other books on my bookshelf when I need something.
And I agree – I should have learned CSS much sooner too. Sure does make things a lot simpler.
Annie Anderson´s last blog … Don’t be silent