Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 156
  • Last Modified:

How to use Cascading Style Sheets for total page design.

Hi, Experts.  I am building a new site and need some solid development input.  This site will have one main site and then 10 different "sub sites" that will need to be similar, but not identical.  I have been reading about templates and nested templates in Dreamweaver, then I read about CSS as opposed to templates, and then I also read about SSI in Dreamweaver.  Do I use one of these options or all of them together?  What do most large sites do?  Is there a better way to do this and is one more accepted over the other?  I have always stayed clear of CSS due to the browser incompatabilities, but with the new advanced browsers, I don't believe this is as much an issue.  I am also confused on how CSS "builds" an entire page with all the proper page elements.  I thought CSS was only used for design elements and not for adding objects (like images, navigation bars, etc.) to a page.  Any explanations, directions or references would be appreciated!
0
ODATech
Asked:
ODATech
  • 2
1 Solution
 
KenAdneyCommented:
I can address css a little bit.  There's some workarounds for using images with css such as background-image or using an image as your h1 tag.  I highly recommend taking a look at csszengarden.com where there's hundreds of designs with the same content, each with a different css. http://alistapart.com/articles/dropdowns/ addresses drop down navigation using style sheets.  Personally, I highly recommend cascading style sheets since the look & feel of your pages is controlled from a single location (or in your case, just a few locations).
0
 
Jason C. LevineNo oneCommented:
Hi ODATech,

There are thousands of tutorials on CSS out there, Google for one that you like.   KenAdney has a good point in directing you to csszengarden, which shows how different stylesheets affect the layout of the same content.

Here's an oversimplified version of what is going on in a CSS page:

1) All of your "elements" (headers, footers, navigation, contents, etc) are contained in <div> tags.  Each div receives an identifier: an ID or a CLASS.

2) The overall page either contains a CSS section in the <head> section or a link to an external CSS file.  In the CSS, each id and class receives several properties that determine where they appear when rendered by a browser.  You can define heights, widths, locations (both relative to other divs and absolute), colors, and much much more.  By learning how the different properties interact, you can create pages with columns, floating areas, and all sorts of bells and whistles.

Here's a quick and dirty illustration of how to use divs and CSS to arrange things:

Here is a quickie sample of a centered container div with three centered "content" divs to get you started:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.container {
     width: 700px;
     margin-right: auto;
     margin-left: auto;
}
.header {
     background-color: #00FF00;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
}
.content {
     background-color: #0000FF;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
}
.footer {
     background-color: #FF0000;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
}
-->
</style>
</head>

<body>
<div class="container">
  <div class="header">
    <p>Content for  class "header" Goes Here</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div class="content">
    <p>Content for  class "content" Goes Here</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div class="footer">
    <p>Content for  class "footer" Goes Here</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
</body>
</html>
0
 
ODATechAuthor Commented:
Thanks, Jason.  That's exactly what I was looking for.  I had been to zengarden before and although they have a lot of good designs, I can't really use someone else's ideas or styles on my site ... it's a great site though to see how powerful CSS is, but the real nuts and bolts are not there; at least not on my visit.  I may have some other questions for you Jason ... I'll post them on this topic, but I am excited about using the CSS on the site.  I think it will be easier for me to maintain.

I do have one immediate question regarding concept:
1.  I create my css (I think I will use the external file method).
2.  I build my different templates and put the link to the external file in the head?
3.  Will I still implement layers then?  Or are they handled in the div tags of the CSS?
4.  How do I make them editable?  Is that also done in the CSS?

Thanks, Jason!  Again I am totally amazed at this site and how helpful it is to me personally and professionally.  You are all truly experts!

:o)
0
 
Jason C. LevineNo oneCommented:
>> I'll post them on this topic

Actually, post new questions.  If you post them here, I'll answer but there are so many people here who are so much better with CSS than I am...

>>I do have one immediate question regarding concept:
>>1.  I create my css (I think I will use the external file method).

You should use external files.  Easier.

>> 2.  I build my different templates and put the link to the external file in the head?

Yup.

>> 3.  Will I still implement layers then?  Or are they handled in the div tags of the CSS?

Not sure where you are going with this.  When you create the template (assuming we are talking DW templates), you set the layout there.  If you want to use layers, you can (I don't recommend using absolutely positioned elements for the most part).  All a CSS layer is is a div with specific properties set.

>> 4.  How do I make them editable?  Is that also done in the CSS?

Once the layout is done, select the layer or region defined by the div and Insert | Template Object | Editable Region.  When you finally save the template file and apply it to new pages, those regions are editable.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now