Solved

How to use Cascading Style Sheets for total page design.

Posted on 2006-10-24
4
152 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

734 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