Landing Page construction

I think what Gary may be asking is what to do with the CSS once you have the look your after. (sorry if I'm wrong Gary)

This has been something that confuses me a bit also, as I'm sure I don't use CSS to it's full potential.

Is one supposed to put a CSS file in with the local files (web pages) so that all changes to this one individual CSS file will effect the entire site?

After creating many pages from a basic template, on what I call my experimental site, I realized, that although a simple change to the CSS in the source code would effect the entire page, if I wanted this change to effect the entire site, I had to make that same change to every page.

That can't be the proper way to do things.

Barry

$%$%$%$%$%$%$%$

Go'in Deep This Time Up!!

"Like how to construct the css folder and the code that goes in it."

You can give the folder any name you want. You can also give the css files any name you want as long as they have a .css file extension.

"Is one supposed to put a CSS file in with the local files (web pages) so that all changes to this one individual CSS file will effect the entire site?"

The css file doesn't have to go with the local files. You can put it pretty much anywhere you want as long as you reference it in the head of the html document. One way of doing that is like so:

< link rel="stylesheet" href="ThePathToTheStyleSheet.css" type="text/css" / >

N.B In all code examples in this post, there's an extra space after the less than and before the greater than symbols in order for the forum software to correctly display the code.

The idea is that making changes to the css file(s) will alter the whole site, yes.

Also, you can use more than one css file. Many designers use one file for structure and another for color and style etc. One file optimized for viewing the web page on a monitor and another optimized for when the web page is printed out.

If you look at the source of this page, you'll see it references 16 stylesheets.

< link rel="stylesheet" href="/sites/all/themes/zen/qydj/print.css" type="text/css" media="print" / >
< style type="text/css" media="all" >@import "/modules/book/book.css";< /style >
< style type="text/css" media="all" >@import "/modules/node/node.css";< /style >
< style type="text/css" media="all" >@import "/modules/poll/poll.css";< /style>
< style type="text/css" media="all" >@import "/modules/system/defaults.css";< /style >
< style type="text/css" media="all" >@import "/modules/system/system.css";< /style >
< style type="text/css" media="all" >@import "/modules/user/user.css";< /style >
< style type="text/css" media="all">@import "/sites/all/modules/cck/content.css";< /style >
< style type="text/css" media="all">@import "/sites/all/modules/cck/fieldgroup.css";< /style >
< style type="text/css" media="all">@import "/modules/forum/forum.css";< /style >
< style type="text/css" media="all">@import "/modules/comment/comment.css";< /style >
< style type="text/css" media="all">@import "/sites/all/themes/zen/qydj/style.css";< /style >
< style type="text/css" media="all">@import "/sites/all/themes/zen/html-elements.css";< /style >
< style type="text/css" media="all">@import "/sites/all/themes/zen/tabs.css";< /style>
< style type="text/css" media="all">@import "/sites/all/themes/zen/qydj/layout.css";< /style >
< style type="text/css" media="all">@import "/sites/all/themes/zen/qydj/qydj.css";< /style >

"After creating many pages from a basic template, on what I call my experimental site, I realized, that although a simple change to the CSS in the source code would effect the entire page, if I wanted this change to effect the entire site, I had to make that same change to every page."

You need to ensure the page elements are being correctly referenced by the css file. First, make sure the page in question has the link declaration above so the page knows where to 'look' for the css file. Then ensure the page element is tagged correctly to use the appropriate style from the style sheet. If, for example, your stylesheet has < h1 > tags set to be bold and use a 18px font size then ensure the elements you'd like to be bold and 18px font size are enclosed in < h1 > tags.

"What I am wondering about is if Jeremy discussed how to do the css folder in dreamweaver or by hand. I know there is reference material and links to sites that have instruction, I was just wondering if he went over the specifics in one of the videos. I remember him slicing a design in Fireworks."

He didn't cover any material specifically about css in DW but it was mentioned that FW can export as css so the slices are correctly referenced.

"How the div tag structure is set up determines if the css folder effects the whole site or a specific region... I hope I remember this correctly otherwise someone please correct me."

The effect and scope of the css code is determined by the modifiers to the tags in the css code and how they are referenced in the xhtml. The < h1 > tag example above is one example of this. Here's one using div tags.

Lets say you wanted to set some header characteristics:

/* header */ The slash & star are comments so you can add notes to the code

#header
{
height: 90px;
width: 950px;
}

Then, in the xhtml file you write:

< div id="header" >

Your content goes here

< /div >

In this situation, the division (div) of the page would be 90 pixels high and 950 pixels wide. Any changes you made to those px values would affect only the div with the id of "header".