Multifacet Services is now *Coskrey Biz

Freelance, informatics, opinions, networks and stores -- enter our sites through these many doors.
The websites of Valerie Coskrey

*Read about the change to Coskrey Biz. This page is retained so it can be used in future articles comparing xhtml to html5. The index of articles mentioned below is also still valid.

Articles: An Index--under construction/constant update--
Links to Various Articles, Essays, Lessons, and Webposts by Valerie of Multifacet Services

Some of our articles are written specifically for this site. Some are posted elsewhere. Some are part of an established series. Some will be set into a series here. The list grows. Currently, most articles and lessons are listed in the primary site and the blog. Look for frequent revisions of this page...

A Sample How-to Article: Using This Webpage as a Template or Get this Template for Free!!

Just a few items to whet the appetite

A How-to Sample I am leaving this reference to the 2- and 3-column format of the template of this webpage. Why? If you read the Services page, then you know that we provide website development services. We also provide forum thread for those teaching themselves to write webpages. This is an example of coding with CSS and XHTML traditional that can be referred to in writings for the group.

How do you use the example? In your browser toolbar, choose View>>Page Source and compare the code to the page. View the style page by opening the appended style page referenced in the link to the URL for this website. If you are new to building webpages, let me remind you that the text and images are labeled in the webpage source code, while how the text and images are presented is defiined by the CSS style rules. These style rules are located in the stylesheet, although some are in the page head (See the <head>at top of source code and look for the <style> tag.), and a few are in the inline position within a tag.

Wierd Display What you see below is not exactly what you will see in the finished page. It is what is on the template of a page for this website. What you see below is the markings that I can place my cursor on to go to the divs that set up my page section I want to use. Once I have located one div, I can study the surrounding divs to locate the ones that control the entire section. I select these as a group, copy them and paste them where I want to use them on the page.

Alternatively, I just cut the other divs out of the picture, but this method often cuts more divs out than I need to-- and messes up the page. So I write my page using cut and paste. When the page is finished, from the design view I simply select the unwanted text in the unused paragraphs below and cut them, thereby cutting unused divs. Then I save the page.

Why not use snippets? I like the visual image of the sections placed on the page. Seeing them laid out, I can make the adjustments I want to make more easily. And who says each section isn't already a snippet?

How do I go from template to page? I remember when I first started coding pages, I was totally confused by templates. Then I started making my own. What I do--this is what worked for me, although the software that I use allows for a template file type--is design a page as I write it. Then I re-save it with a name such as temp.htm or something_newpg.htm. Then in the design view of the Dreamweaver software (what I use and luv, luv, luv!) I get rid of all but samples of different types of paragraphs and sections on the page. This process preserves the column positions and other neat stuff like title, footer, etc. Then I replace the text in the paragraphs with something short, like a label to what the section is for. By keeping the Title and logo intact, I know what the header will look like. Also by keeping the header, the footer and side columns intact, and other divs that remain the same from page to page, I do not have to redo them for each page I write.

To start a new page in a series using the same basic design, I open the template, Save As with a new name for the page (DO NOT FORGET THIS STEP OR YOU WILL OVERWRITE AND CHANGE YOUR TEMPLATE), and start writing. Cutting old text and sections is a breeze. I surround the sections I want to remove with a <div class="old"></div> tags. Then I select that div and cut it.

Since my template was already attached to a stylesheet(s), I open the stylesheet(s), too. I can make new style rules as I go, just being sure to use a name not previously used. (REMEMBER THAT ALL PAGES THAT USE THE SAME STYLESHEET WILL BE AFFECTED BY A STYLE RULE CHANGE. USE NEW CLASSES FOR NEW RULES THAT YOU DO NOT WANT TO AFFECT OLD PAGES.) A trick that helps me guarantee that the new rules will have original names is to begin (or end) each name with a unique set of letters. I use this trick from one stylesheet to another, too. For instance, new items added to the ms.css stylesheet or used with another stylesheet on the same webpage might begin dc so that a <p> class from the second style sheet would be .dc and a new class for the ms stylesheet might be dcpw or dcwide.

Why not just save it as a template file? I found that a template filetype controlled too much of what I wanted to do. My way provides me more freedom to make variations in the page. If you like the template filetype and use the Dreamweaver library filetype a lot, by all means go that route. Or merge both techniques. Me, I use the snippets a lot.

Do you like my template? It is copyrighted. You may use it --by downloading the page (Go to File..Save AS and choose Filetype webpage complete)-- only for practice and a classroom exercise. Contact us for permissions to use any image or template online or for commercial enterprises. Some templates and images will be sold in our estores, including Template Artistry.

The Column Sections Template

3 columns

1
2
3

two equal columns

1
2

unequal 2 col wide on left

x
y

this covers 1 wide col