William P. Craft

This Unit:

Reading Assignment:

This is a big chapter, it's packed with info and it's all very valuable.

Ok, I admit it. Every time I write anything in this section of a unit lesson, I say that the content of the textbook is really important and that you should pay close attention. Well, actually that statement is always true... But for this unit it is very true!

In Units 11 and 12 we will cover the things that Dreamweaver and other WYSIWYG editors sometimes goof up. In a way, you could say that all that comes before these two chapters was just preparation for the way modern web design is done. Chapters 11 and 12 get to the very meat of the issue.

I will certainly admit that Dreamweaver is getting very good; version CS4 is better than ever. But, Dreamweaver and all the other programs still make maddening errors occasionally—and what we will cover in this chapter and the next one will give you the background to correct any automated errors that may happen on your pages.

If you can manage to do so, you should always check your work in Firefox, IE 8, IE 7, IE 6, Safari and Opera. (IE 6 will drive you crazy, so you may want to just let it go for that one. Hopefully most people are upgrading by now.)

Sadly, there are display variations between all the browsers. Usually you can find a work-around, but that comes later with more experience. For the purposes of this class, I suggest you design in Firefox 3.5 and then check it on IE8.

Note: Opera and Safari actually follow the W3C standards the best.

If that's the case, then why do I tell you to design to Firefox and then correct for IE 8?

  1. Most pro's design using Firefox, because there are so many cool extensions like the Pederick Web Developer Extension discussed in the assignment section below.
  2. Then they apply conditional corrections or "hacks" to fix what IE 6 and IE 7 breaks.
  3. Usually, if your code works in Firefox it will work in Opera and Safari too. Also, IE 8 is getting very close to standards so it usually works well with code done on Firefox.

How to do these hacks/fixes is more than what we can cover in this introductory course, but I have provided the information for you to use in our class blog at this address:

http://craftwebproject.com/blog/?p=91

Even if you don't know how to make these corrections, you can usually find a way to make your content look good in both popular browsers. It may not look exactly the same, but it won't look stupid either. Several years ago the differences between browsers were HUGE. Today they are mostly small issues.

The best news is that IE 8 is much better than IE6 and IE 7, and people are moving to IE8 very quickly. Microsoft claims IE 8 will fully meet the W3C standards. That is very good news!

Discussion:

None this unit.

Quiz:

Take the quiz.

Assignment: (10 pts total)

Part 1: (5 pts)

Try out Chris Pederick's Web Developer Extension for FireFox. It is free and it is used by almost every serious web designer I have ever met. It is very powerful, but it is easy to learn a little at a time.

To get credit, just notify me in the comments section of the assignment page that you installed the Pederick Extension on your copy of Firefox on your local machine and you will earn 5 points.

If all you ever use this extension for is the "Outline" feature, you will be very happy you installed it. If you go further with it, you will find it can do many very cool things. Most of the students in my earlier classes thought this tool was EXCELLENT!

Part 2 (5 pts)

Take one of your pervious assignments and modify it for this exercise, or make up a new page that has the following items:

  1. a division with the id="header"
  2. inside "header" put a <h1> heading
  3. a division with the id="content"
  4. inside "content" put another division with the id="subject1"
  5. inside "subject1" put a <h2> heading and also a paragraph.
  6. inside "content" put another division with the id="subject2"
  7. inside "subject2" put a <h2> heading and also a paragraph
  8. after the division "content" put a paragraph with some text.
  9. after the paragraph put a division with the id="footer"
  10. inside "footer" put the W3C links to allow the page to be checked automatically by W3C.

The above is all that is required. You get 5 points for the above.

(HINT: Everything above is like the example on page 436.)

MAKE SURE you get the nesting right. "subject 1" and "subject 2" are inside "content". Here is an example.

However,

Just MAKE SURE everything "works" and validates at XHTML-strict level.

Post the webpage that you made above to your Internet site and tell me the exact address in the comments section of the assignment tool in WebCT for Unit 11.

So there should be TWO things in the comments section of the assignment tool:

  1. a statement that you installed the Web Developer Extension in Firefox.
  2. the address of your web page for Unit 11.

The due date for the Quiz and the assignment is listed on the homepage of the course.

Final Note:

It is very important that you do all the exercises in Chapter 11 of the book. You already have the answers to all these exercises, so it is silly for me to ask you to send them to me. But trust me, if you skim them, you will regret it later.

...Bill