laptop for Webmaster Pages Series logo

Valerie Coskrey's Classroom Tools and Ideas


The VCCTI Webmaster Pages 1:
Designing a Webpage in CSS and XHTML



Google
 
Web www.vforteachers.com

The Challanges of Designing the Page
A Newbie's Discussion of Writing a Web Page

I write this page because I learned a few things this week about CSS layouts.  No, I do not claim to be an expert.  In fact, I am teaching myself.  I have to date completed The Webmaster Page in XHTML and CSS--and read a few books.  I am writing this page to share with you some of the resources that I have found helpful in my page design and some of the challenges that I faced.  Naturally, solving the challenges means that I now have tips to share, too.

Tips for Designing the Page Layout
                    (OK,  I was learning.  Read the update!)

  • Tip 1: Think carefully about which div's will be absolute and which will be relative.
  • Tip 2: Think carefully about which div's will contain the other div's and the z-index for each one. Update!
  • Tip 3: Use comments to label the closing div tag at the end of each major layout section.
  • Tip 4: Learn from others by studying the code of posted CSS pages and their stylesheets.
  • Tip 5: Design a page with its css in the head;  then copy the css code to a css file for linking to other pages.
  • Tip 6: Save the xhtml page as .htm to use the transitional dtd.  (I do not know why, but any page I used as .xhtml did not work. Update!)
  • Tip 7: Use Notebook or similar program to display a  .txt copy of the code for a working page.

I quickly learned that my webpage design software (I use a 2004 versionof Dreamweaver.  I can't wait to get the new version. Alas, I have grandkids to spend money on, so...)  treated absolute divs as layers with z-indexes that allowed me to place contents of one div into and over another.  This meant that content could be lined-up with common backgrounds or borders--or not, depending.  However, getting the height of a div to accurately contain a correctly positioned embedded div is still a challenge to me.  Placing a div below another div is still a challenge to me.  I know it can easily be done, but alas, I am still trying to figure out how.  I suspect that a judicious combination of absolute and relative divs will solve the problem. 

The confused paragraphs below will show you just how confused one can get.  However, these books combined with practice and the study of some judicious examples will quickly--I hope--overcome the coding challenges.

 
 
 
 
 
 

Read this passage of confused thought with a grain of salt!

Problem:  I did figure out that attaching a div to the bottom of the containing div with a bottom value of 2 px {margin-bottom:2px;} will set the embedded div at the bottom of the containing div.  However, I had problems with making the containing div tall enough.  Part of this challenge is that my affiliate ads are not seen on the page during the design--and I seldom do the math needed to place everything.  I tried placing a break tag and a paragraph tag pair before the bottom div, but somehow I couldn't get it to work. I have a bit to learn about absolute div and relative div.  Doing the placement in Dreamweaver is not the problem, per se.  Designing the CSS div boxes in a separate style sheet and getting that div box to work on my page with content is the issue. 

"Solution: Set the height to auto {height:auto;} and set the width to a measured value {width:130px;}.  I am still testing this step.  In the css for this series of pages, the left margin and the width of the div called content is set.  The right margin is automatically set based on the width of the page.  The height becomes auto by default.  Div.content is set as position: absolute. Update!

The css for this page was originally copied from the head of the webmasterpage.htm file and pasted into a .css page.  That way I could base the css coding on the page as I wrote it.  Later attempts at css were started with a css file that was linked to the xhtml page.   Both ways work, but using a program like Dreamweaver 2004 seems to work best with the code in the head region.  Otherwise, the wysiwyg feature doesn't work as well.

An absolute div has a height that becomes part of the style sheet as the content is added to a page-- at least in my version of Dreamweaver, the two pages are so interactive that one page affects the other constantly.  This will affect the other pages that are attached to the same style sheet. This is another reason to set the height to auto.

Now we return to the more reasonable discussion...

Adjusting a css style sheet to fit the requirements of the content of one page under design will affect other pages already completed but attached to the same style sheet.  This is bad if you have no flexibility built into the div boxes.  It is great for updating the design of many pages with just a few changes in the style page.  Applying tips 1 and 2 helps. Tip 5 results in this solution:   Get a page the way you want it.  Attach other pages to the css style sheet.  Leave the first html or xhtml page with its css in the head alone.  This way when you change the css code in the css file, the first page with its own css code won't be affected with the changes until you are ready to make changes to the page itself. Changing the css file will change all pages attached to that file.  Use css code in the head of an xhtml or html file to test its appearance before using it with other pages.  Update!

A pattern I have seen among the pages of others that I have studied is that they use short css pages for special sections.  Then they link the xhtml page to several css stylesheets.  Another technique is to use many div classes or id's.  Remember: css styles allows a designer to make web pages that are similar in appearance.  Remember also that changing a file in the head of a page will affect the css stylesheet if the name and class are the same. 

Part of the problem I had with the Webmaster Page was that the center column division would not extend its background color to the end of the content written for the column. The second problem was placing the links at the bottom of the center column--and keeping it there.  Update!

What I discovered was a set of extra </div> tags.  Silly me.  They are still in the code.  But I have a solution to apply to the next pages I write.  From now on I will label each major layout </div> tag with a comment something like this:
<div id="centercolumn"></div><!-- end centercolumn" -->
This way, when I enter the content into the div box, the label for the end tag will automatically follow the end tag so that I can easily find it when I need to fix it next time.  Looking for the extra or non-existent end tag wasted lots of time when I was working on The Webmaster Page--and I still posted it with, I believe, 2 extra end tags.  I got tired of removing the wrong tag, though, and gave up.

I encourage you, too, to jump on the CSS bandwagon.  Fellow Newbies, I offer these tips and accept your consolations for the fact that my pages are not yet perfect. My references all encourage us to study the source codes of the pages we like and to use small snippets of code that work for others in our own designs.

If your screen is large enough, set the .txt page alongside the web development page.  For me that means narrow the Dreamweaver page.  In the space left, narrow the Notebook page and position it next to the Dreamweaver page.  Now I can study the .txt page of code and cut and paste code that works to my Dreamweaver file to my heart's content.  Using a Notebook file also means I can write notes to myself all over the copied file.  This is the easiest way to start a new page with the same header, etc.,--  unless you use snippets, that is.  (I have used this technique to find errors in code, too!  To think, I actually once asked my husband why he liked Notebook and .txt files so much!!!  Once, I had no idea.)

If you have never studied the source code of a webpage, this is how to access it. In Firefox, at the toolbar, go to View>>Source Code.  In Explorer, go to Pages>>Source Code. In the head section will be a link to a stylesheet.  This link is relative to the page you are viewing, so if the complete link is not present, try adding it to the home page link of the file you are viewing. Let me give you an example.
 <link rel="stylesheet" href="3col_rightNavmodwebmasters.css" type="text/css" />
the stylesheet link for this page, becomes
 <link rel="stylesheet" href="http://www.vforteachers.com/3col_rightNavmodwebmasters.css" ><type="text/css" />
for anyone that wants to read it.

Select all, copy and paste the code into a .txt file in Notebook or similar program.  Most people ask that if you use their code in your page then you reference the page and author in your web page.  Linkbacks to the Web page are a good idea as a citation.  Css style sheets are technically copyrighted, as are Web pages.  Most people do not mind if you use small snippets of code, though. 

This page now is attached to the the stylesheet  style_webmasterpages.css,which began as the css style in the head of The Webmaster Page. 

Do not judge it too harshly. I wrote it by changing parts of a Dreamweaver css stylesheet that matches a Dreamweaver template. I rewrote sections to fit The Webmaster Page, using best practices syntax for parts, and my own syntax for other parts. A third set of parts is the original stylesheet with tags that I did not use and did not bother to change. My advice: Study the Judicious Examples, not mine. Notice that I added the .code class when I wrote this page.

An Invitation to Fellow CSS Newbies

Join me in my ruminations by adding your comments to the forum. Simply write your comments in a post; watch for other comments. This forum is moderated, but I generally accept the posts (or not, usual rules of decency and legality) within 24 hours. Feel free to add a link to your site(s) or blog(s)! Just remember to comment about a topic covered in this site. Spam is not accepted.

Update!

I thought about rewriting the page to reflect what I have learned since I wrote it, but then I thought that to keep the dialog real, I would write an update. This is coming soon.  Until then, take a look at a lesson page demo and the better css stylesheet it reflects.  A skeleton page of those in the gbox series is kept and used as a template to save coding time.  I simply make changes to title and page contents, save as a new filename and go.  (And if think this simple procedure cannot be screwed up, think again.  Let me tell you how...or not and save me some embarassment.  Yep, I'm still learning by mistakes!)

More button: Keep reading on the next page.next pa ge...update


Get books on CSS and on these topics below.




Banner