Design & Maintain A Website For Newbie Series

[deanavail]

Hi.....Allow me to use this thread as a guide for step by step building of a website for all those non-programmers like myself. see this post Sample newbie website

 

If you are like me, you are likely on a vertical learning curve...seeing results as you gain knowhow will ease the challenge.

 

here is item 1:

 

I have designed a template made up of overlays in Dreamwaever to use across site pages.

 

here is the main page or site index template main site page and here is the template for the site pages Sub pages

 

The question now is how do you call up these templates across the site pages?

 

The main site page is already as you see it. All other site pages are to retain main site page header, navigation bar, footer, left side overlays, namely: sign in, search, and below box. Content overlay displays unique content within each page.

 

Kindest Regards, Dean

[deanavail]

Continuing on as I/we await your valuable responses

 

item 2: Preparing your Site wide CSS style sheet

 

How do you (in Dreamwaever MX preferrably) define in a CSS style sheet the:

 

-default font family: verdana

-default size: 10px

 

so one can use relative font sizing for other tags such as

 

-P, paragraph

-headings, h1 thru h6

-a, links

 

other CSS style questions?

 

-how do you define a global navigation font size and type?

-footer font size and type?

 

Kindest Regards, Dean

[tblankenbeck]

Dean,

 

I can't answer your first question, but will take a stab at the second.

 

How do you (in Dreamwaever MX preferrably) define in a CSS style sheet the:

 

-default font family: verdana

-default size: 10px

To define a new CSS style sheet press Ctrl+Shift+E to bring up the Edit Style Sheet dialog window. From here you can create a new external style sheet or edit an existing one.

 

To set default properties for all text on the page you would want to modify the body element (tag) by setting properties for font-family and font-size. I would strongly caution against using absolute sizing for anything in your webpage whenever it can be avoided. Your style for the body, based on what you wanted would be:

>body
     {
      font-family:verdana,sans-serif;
      font-size:10px;
      }

 

You could then override your default setting using embedded (document level) or inline styles as well as setting up generic classes for your relative size changes in your external CSS.

 

 

other CSS style questions?

 

-how do you define a global navigation font size and type?

-footer font size and type?

 

To control your global navigation font size and type you could do any number of things. You could create a generic class called ".global" that would contain all of your font settings and then apply it to whichever container you are using for your global navigation (div or table in your case). Same would hold true for your footer. A sample using the same properties as above would be:

>.global
     {
      font-family:verdana,sans-serif;
      font-size:10px;
      }

 

Hope that helps. Let me know if I need to explain further.

 

Todd :Nerd:

[criosa]

with regards to the templates question...

are you trying to use Dreamweaver's Template function? if so, save the file as a template. anything you want to edit from page to page will need to be set as an 'editable' region - under the 'Modify' menu towards the bottom is the Templates commands/functions ... in it's sub-menu is something about editable regions.

 

Then, to make a file based off of it, choose 'New...' from the File menu. There's a tab for Templates - you can pick your template from there, and then you can put page-specific info into your editable regions.

 

I'm using Dreamweaver MX, though that shouldn't make too much of a difference. There's quite a bit of info in DW's Help files as well - that's how I started learning about them.

 

Also, point of note that if your site is HUGE, then the template function can be a pain - it'll have to update every individual page, and then you'll need to upload all those pages.

 

For things like headers & footers, maybe menus, PHP can be nice. Just change one file, and all the pages that reference it will update.

[deanavail]

Thanks for the replies..here is what I have defined in what is supposed to be a site wide CSS style sheet with the hope of following recommended design practices..

 

>p {
font-size: 9px;
padding-left: 2px;
font-family: Verdana;
}
a {
color: #0000FF;
font-size: 80%;
}
.italic {
font-style: italic;
color: #0000FF;
}
basefont {
font-family: Verdana;
font-size: 10px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

 

Now..question is, if you want the base or default font to be 10px Verdana for all text, then you wish to define other text tags relative to the base default font,

 

1. Do u use the basefont tag selector or the body tag selector to define the default type and size?

2. How would you define relative sizing for text, do u define it in CSS style sheet and for which tags, or do u keep it page specific and use say the paragraph tag with + or - sizing?

3. if u associate this style sheet with a default page say template page, can you set this up as a template simply by resaving the page as .dwt to use as a template or do I follow a different procedure.

 

Kindest Regards

[tblankenbeck]

The Basefont tag was never part of the W3C specifications for HTML. The proper way to acheive the same effect is to use a style sheet. That being said, basefont is not a valid CSS element, so the proper way to apply default font settings would be to set the font properties in the body element (see my previous post).

 

Will answer the other questions a little later. Have to get back to work.

 

Todd