Solved

How to use Cascading Style Sheets for total page design.

Posted on 2006-10-24
4
154 Views
Last Modified: 2013-11-19
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
Comment
Question by:ODATech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 10

Expert Comment

by:KenAdney
ID: 17797120
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
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 17800545
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
 

Author Comment

by:ODATech
ID: 17810757
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17814452
>> 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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question