Style Sheets, Includes, Templates, and Themes (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

Scotty -> Style Sheets, Includes, Templates, and Themes (7/22/2002 2:25:40)

I know, I usually only query about Templates and Themes. Now I' m curious about Style Sheets and Includes. The differences and similarities drive me nuts. As most pages on our site have one of two layouts and all have the same footer I' m thinking I' ll redo the templates, (and this time I' ll carefully save them where I can find them) only to wonder where includes and style sheets should be used instead. Should a common footer be a template, an include, or a style sheet? How about common background colors? Regards, Scotty



swoosh -> RE: Style Sheets, Includes, Templates, and Themes (7/22/2002 3:10:12)

Style sheets (embedded and inline) are commonly used for some type of Formatting for certain elements of a page. Using an enternal style sheet is almost synonomous with an include (although used for formatting).

Includes are commonly used for info containing some type of content such as navigational menus, text, graphics etc. That way if the content should change you would only have to change the source include page.








_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/2/2002 9:58:26)

Swoosh,

A related question.

Are there any compelling reasons at all for one to go back and add external cascading style sheets to a site where none have been used? The sites I' m thinking of have 20 or more pages, each individually formatted in the traditional manner (selecting text and using the appropriate formatting menu).

thanks, gail



EWD -> RE: Style Sheets, Includes, Templates, and Themes (8/2/2002 10:01:53)

_gail - In my opinion... I would only do that if I were interested in reducing bloat and streamlining the pages as much as possible, -or- if I planned to add a lot more pages. The benefit from CSS comes from starting the site with a style sheet so you don' t have to do all that individual formatting.



bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/2/2002 10:10:35)

Scotty -

Your footer would be an include page. That way it can be included on every page, and you only have to edit one page down the road if your footer changes... you can use the same thing for your headers and navigation...

As far as adding a CSS... Gail, I' m in the process of rebuilding a site with over 100 pages to use includes and CSS. Mainly because I want the ability to make changes to the JS nav. menu (Vince' s DD Menu), footers, headers, etc.

And I want to be able to change text, color, styles, etc. down the road without having to rebuild the site all over again (this will be my fourth rebuild in two years!)

One of the grooviest things about CSS is that you can specify the colors for you site, and down the road if you want to revamp with new or different colors you can do so at the CSS. (Same for text, fonts, HR' s, etc.)



_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/2/2002 10:28:14)

Bobby, EWD,

Ooooh, more questions:

I' m always interesting in reducing " bloat" but basically do not plan to change the colors or text style on current pages.

I do plan to add more pages. I can, can' t I, link just the new pages to an external style sheet?

Also, suppose I decide to use the external style sheet with existing pages. Must I reformat all the text?

Finally, I' ve not yet learned how to create my own style sheets but have a nifty one provided to me by someone. Can I just make a duplicate, tweak the settings, and keep reusing?

gail



bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/2/2002 10:33:58)

quote:

I can, can' t I, link just the new pages to an external style sheet?


Yup.

quote:

suppose I decide to use the external style sheet with existing pages. Must I reformat all the text?


Nope. Just remember that CSS means " Cascading" Style Sheet... any formatting in your page code will over-ride the CSS.

quote:

Can I just make a duplicate, tweak the settings, and keep reusing?


Yup.

[:D]



_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/2/2002 17:02:05)

quote:

ORIGINAL: EWD

reducing bloat and streamlining the pages as much as possible,


Been thinking about this. How does a css reduce bloat?

I think I know the answer to the following question but let me ask it anyway: how does a page get bloated in the first place?

again, my thanks, gail



EWD -> RE: Style Sheets, Includes, Templates, and Themes (8/2/2002 20:45:07)

Hey Gail- As an example, all the repetitive font tags that would be elimiated by specifying those characteristics in a style sheet instead. I like that because it make the html much easier to read when you have minimal tags.

I keep a folder on my desktop called " website generics" and in there is a styles.css file that I can grab for every website. It has the basics I always use: p, td, a:link, a:active, a:visited, a:hover, p.footer, a.footer and I add to it as needed, commenting as I go. Try it---you' ll like it!



_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/3/2002 9:06:52)

quote:

ORIGINAL: EWD

I keep a folder on my desktop called " website generics" and in there is a styles.css file that I can grab for every website. It has the basics I always use: p, td, a:link, a:active, a:visited, a:hover, p.footer, a.footer and I add to it as needed, commenting as I go. Try it---you' ll like it!


I actually have a similar folder but like your idea of placing it on the desktop.

What do you mean " commenting as (you) go?"

Also, do you use FrontPage itself to create your css? I' ve never made my own css, tried in FrontPage. To me, it seems extremely time consuming using FP but I probably have not gotten the knack of it.

Also, is there any place one can go to download ready-made style sheets, or to generate style sheets in a similar fashion to javascript generators? Or is the " cheating?" [&:]

thanks, gail



bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/3/2002 10:29:45)

Gail -

No, not cheating... lets call it time management!

I write all of my CSS in either notepad, or in the html view in FP.

A generator would be more time consuming than changing a template, in my opinion.

Once you have a template made you just have to go in and change color, size, font, etc.

There are a lot of places you can go to get examples of a style sheet... but you might be best served by taking the time to write your own first. That way you' ll have a little knowledge about how it works and can use your own " naming convention" for styles.

Commenting out a style sheet is handy the same way it is for html and asp... if you want to go change something it' s easier to look for the comment than to dig through several styles in the sheet...

Comments in CSS look like this: 

/*   This is a comment...    */


If you like I could email you a copy of one of my CSS files so you can see how I work from a template...

BTW - I keep a file on my pc called " Toolbox" - with a shortcut from my desktop.

It holds all of the JavaScripts I' ve collected, html tags, CSS notes, template files, ASP code that I re-use, a 1x1 clear .gif (for spacing)... pretty much anything I use over and over or think I might use down the road... pretty handy.



EWD -> RE: Style Sheets, Includes, Templates, and Themes (8/3/2002 10:44:48)

Gail - It' s not cheating at all! There are some nice little apps available for D/L that will generate CSS for you. I write mine by hand in notepad and insert comments so I know where a certain class will be used if it' s not apparent from the class name. For example I would know that " p.footer" is used to make a small footer font, but others I may not remember the intended use.

Here are a few links to apps I' ve learned about here over the years:
http://www.balthisar.com - Cascade is a freeware CSS editor
http://www.bradsoft.com/topstyle - TopStyle has a trial version available for download, the full version is $79.95

I know there are others but these are all I could find at the moment. Good Luck!



_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/3/2002 17:55:51)

quote:

ORIGINAL: bobby

If you like I could email you a copy of one of my CSS files so you can see how I work from a template...



Could ya? Would ya? Please do!

And THANK YOU!

gail



_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/3/2002 18:03:13)

quote:

ORIGINAL: EWD

I write mine by hand in notepad and insert comments so I know where a certain class will be used if it' s not apparent from the class name. For example I would know that " p.footer" is used to make a small footer font, but others I may not remember the intended use.


EWD,

Unfortunately, I' m still not at the point where I can write code in notepad. But I did recently learn about the " insert comment" command in FP. Cool!

What about names such as " p.footer." How relevant is such a name if, for example, one imports a css into a new web? (Hope my question is clear).

I am really intrigued by css but, (wo)man, is there a lot to learn!

g[:)]



EWD -> RE: Style Sheets, Includes, Templates, and Themes (8/3/2002 22:46:36)

Oh please, Gail! Give yourself a little credit!! using notepad to make a css file is hardly difficult, maybe a little intimidating the first time. When you get Bobby' s sheet you' ll see how simple it can be.

As for the " p.footer" thing... that' s a class I make because I like my footer text to be smaller than body text. Once you have linked in an external style sheet into your web (format>style sheet link>add), you' ll see the different classes are now available to select in the text format drop down list (mine' s to the left of the font list) so you can easily select it from there.

If you take the following and copy it into notepad and name it styles.css you have a good start.

/* generic style sheet */
p,td {font-family: verdana,arial,helvetica; font-size:10pt;}

a:link {color: blue; text-decoration: none;}
a:active {color: red; text-decoration: none;}
a:visited {color: blue; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}

/* this part makes footer text smaller */
a.foot {font-size: 8pt;}
p.foot {font-size: 8pt;}
td.foot {font-size: 8pt;}


About all it does is make " normal" text and text inside tables appear as verdana 10pt. Links are not underlined except on hover when they also turn red. Foot text and links are all 8pt.

With all this, take a good look at the information Katherine has written on this site about CSS and you' ll be well armed to experiment!

When you think of all that is accomplished by the few lines above, consider all the <font></font> tags you' re getting rid of! That' s where the bloating starts to go away.



Scotty -> RE: Style Sheets, Includes, Templates, and Themes (8/4/2002 1:56:40)

Bobby; If you' re willing, I' d also appreciate looking at a copy of one of your CSS files so I can see how you work from a template...

I haven' t checked in for a bit, (couldn' t find the username, password), to see quite a conversation going on this subject.
To bring myself up to speed, let me reiterate what I think I read:

Templates: A page template can be made and saved that is the basic layout for multiple pages. It can then be opened, renamed, and used to make a new page with the same header, footer, etc. If you later go to the template page and make a change, it won' t make any changes to pages that were created using the template page prior to the changes. This is different from saving a CSS file to use as a template. This is the " novice" method of setting up a page. Helpful, but not as efficient as using includes and CSS?

Themes: Kinda like templates, only with themes, if you change the theme it will make the change to all pages that have been made using that theme? The theme isn' t actually a " page" similar to a template, rather more like an include?

Includes: A smart way to set up header and footer information so you can make an across the site change in one location. An include would be a great way to set up the gif file at our site that is located on each page that visitors click on to return to the home page? At www.aloghomestore.com, we have a pop out menu on the left side of the page. Could this be called an include?

CSS: Style sheets would be used to format background colors, text size, fonts etc. that are common to each page. I take it this works better than using themes? So, on the aloghomestore.com site, as all pages use the same basic layout, bgcolor, these items would be best to set up using CSS?

I ask all this as I have till next spring to triple the product offering, articles, etc. I figure now is the time to clean it up and do it right. Currently I' m using templates and the changes are driving me nuts. I had thought, early on, that I create a template, later make a change to the template, and it would change all pages that had originated from the template. I thought I even " tested" the concept to make sure it worked. Made all the pages, later went to the template page to initiate a change. . . and had to make it to every page. Not fun.

Regards, Scotty



_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/4/2002 11:06:58)

quote:

ORIGINAL: EWD

Give yourself a little credit!! using notepad to make a css file is hardly difficult, maybe a little intimidating the first time


Well, EWD, I actually do give myself credit but confess to having a mental block regarding memorization of code. In fact, someone mentored me for about a year and often kindly pointed out my lack of html skills. So, I sent her this promise recently: http://www.gtbconsulting.com/html.htm

I know I can teach myself this stuff but opt to take a community college course in the fall. Besides wanting to interact and actually speak with other human beings (not to mention student discounts on software) [:)], I' m sorta burned out from self-study.

What I have done is learn enough to do such thing as fix problem code, or tweak a style sheet that another provided me. I' ve also developed a list of certain things to do and avoid to make the code generated by FrontPage less bloated and more browser compatible. And the help here, well we all know how invaluable it is!

But to hand type code into notepad from scratch is just not an option right now. [:' (]

The few times someone has been kind enough to provide me with something such as a css file, it has been an extremely useful not only for it' s intended purpose but for study and learning. Visual, rather than by rote, is sorta my best learning style.

THANKS for the generic style sheet. It' s already been placed in notepad, saved to my Web Elements file on my desktop and studied.

Gail






bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/4/2002 13:37:50)

Here' s another thread where I posted up a big CSS file (big in my experience anyway...)

Take a look and anything that doesn' t make sense just ask!

I' ll see if I can post a screenshot of the page template when I get back to the office Monday...




EWD -> RE: Style Sheets, Includes, Templates, and Themes (8/4/2002 14:08:22)

Gail - I know what you mean about self-study. I am definitely a visual person so seeing a human being writing on a blackboard helps me learn quicker than reading to get the basic introduction and understanding of something. Then after I' m comfortable with the basics, I fiddle and research to get what I want and learn even more. This probably has more to do with my age (48) and the style of learning I grew up with. [:j] Once you know what something is supposed to do logically the rest is just syntax!

If there is a WebGrrls group in your community you might find a tutor or low cost classes available, or an avenue for networking. I' ve heard great things about them in the geek community. http://www.webgrrls.com/



nwn4772 -> RE: Style Sheets, Includes, Templates, and Themes (8/4/2002 23:22:37)

I have another question about CSS. Here is a portion of mine:

p {
font-family: " Comic Sans MS" ;
color: black;
text-align: center;
font-size: 16;
}
.normal {
font-family: " Comic Sans MS" ;
color: black;
text-align: left;
font-size: 14;
}
.p2 {
font-family: " Comic Sans MS" ;
text-align: justify;
font-size: 14;
}
.p3 {
font-family: " Calisto MT" ;
font-size: 18;
text-align: left;
}
.p4 {
font-family: " default font" ;
font-weight: bold;
font-style: italic;
text-align: left;

}

H1 {
font-family: Comic Sans MS;
font-weight: bold;
color: #800000;
text-align: center;
font-size: 24;

}


Is .p4 correct with the " default-font" I want it to be the default, regular font but it takes on the characteristics of the previous class, .p3 which is Calisto. Also, I want to bold and italicize the text. Is that possible too?

Nathan



_gail -> RE: RE: Style Sheets, Includes, Templates, and Themes (8/5/2002 8:23:39)

Bobby,

Is that the 8 mb one?! Wow, I was looking for " CSS for Dummies;" this file is the equivalent of " War and Peace." [;)]

Seriously, I placed your style in my files and will give it a try and tweak with it when I have a chance. It really is an excellent example too of the effective use of comments, something I only recently learned about. I can see why using comments is extremely important when creating and using/reusing a stylesheet.

I' m sure I' ll have some questions as some of the attributes seem to be related to a specific site.


ewd,

Boy are you young!

Wow, that WebGrrls group is reeeeeeally neat! You' re not classifying me as a geek, though, are you! [:p]

Actually, I' ve been looking for something like this for a long time. Unfortunately, the closest group is a two hour drive from where I live. But, that can change.......

thanks for all the help gentlemen!!!
gail




EWD -> RE: Style Sheets, Includes, Templates, and Themes (8/5/2002 13:44:11)

quote:

Boy are you young!


BLESS YOU!!!! [:D][:D] Try to tell as many people as you can![;)]



bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/6/2002 10:33:54)

quote:

Is .p4 correct with the " default-font"


Not sure, but I think it will cascade back to the previous one (.p3) or you might check to see if your browser default is set to Calisto..?

You might be better off just setting it to Times New Roman..?

quote:

Also, I want to bold and italicize the text. Is that possible too?


Yep, just define it as you did in the other tags.

BTW - you are using .p3 and .p4 to define styles... how do you call that out in a page?

I' m used to seeing p.3 and p.4 - just curious if it worked the same way.



bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/6/2002 10:35:59)

Gail -

Let me know if you have any questions...

This will be my first " public" site using CSS for positioning instead of tables (I only use two tables so far... one for the text body so I can include a clear spacer .gif and one for the JS rollover buttons)

[:D]



bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/6/2002 10:36:59)

Scotty -

Did we ever answer all of your questions? We kind of got off on a tangent... [:j]



nwn4772 -> RE: Style Sheets, Includes, Templates, and Themes (8/6/2002 19:05:18)

Yeah, you can use it the same way: < p class = " p3" >

Is New Times Roman the default font? Or does it depend on the browser?


Thanks for the help.

Nathan



bobby -> RE: Style Sheets, Includes, Templates, and Themes (8/7/2002 10:02:17)

That' s pretty cool...

Times New Roman is always the default, default... but if someone changes their default to another, like Arial, then on their browser Arial will be the default font.

If you want it to be the default on the user' s machine, then change the original <p> tag so that it doesn' t have a font type specified. Since it' s the first in line (before p1, p2, etc.) it will select whichever font is the default.

If you specify a font in <p> and none in <p1> I' m pretty sure it cascades back to <p> to find the default font..?

Also, if you have a default set for your page in the <body> tag the browser will consider this the default.

Hope that helps!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125