Craft Web Project

Here is an article the explains character encoding very nicely.

http://www.sitepoint.com/article/guide-web-character-encoding/

…Bill

No Comments »
Filed under: Uncategorized

Many people think that Opera is one of the best web browsers ever made. Opera doesn’t have a huge market share, but they do have a very good and very stable browser.  They have made web standards a way of life!

Recently Opera posted an excellent web-based resource that may be very helpful to you as you take CBTE-162 and after as you continue to progress in web design.

http://www.opera.com/wsc/

I think this will be a great place to find state-of-the-art info that is explained clearly.   You can count on Opera to only recommend techniques that are best practices.  

This is from the website:

Learn to build a better Web with Opera

Learning Web Standards just got easier. Opera’s new Web Standards Curriculum, released in association with the Yahoo! Developer Network, is a complete course to teach you standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics. It already has support from many organizations (including Yahoo! and the Web Standards Project) and universities. The first 23 articles are currently available, with about 30 more to be published between now and late September.

…Bill

No Comments »
Filed under: Uncategorized

I have had a few people ask me how I get the effect of changing my picture into “Snydley” on this page:

http://www.craftwebproject.com/unit4/index.html

Here is the code that makes it work:

XHTML

<div id=”pix”>
<a href=”index.html” title=”Put Your Title Here” class=”rollover”><br /></a>
</div>

CSS

a.rollover:link,a.rollover:active,a.rollover:visited
{
background-color:#000;
background-image:url(../images/image1.jpg);
display:block;
height:136px;
width:181px;
}

a.rollover:hover
{
background-color:#000;
background-image:url(../images/image2.jpg);
display:block;
height:136px;
width:181px;
}

(In the code above, I have changed the names of the actual image.jpg files to make them generic.)

…Bill

No Comments »
Filed under: Uncategorized

How annoying!  You just made the perfect web page and it looks great in Firefox 3, but it looks broken in IE 7.

You are not alone.  Even though Microsoft has improved IE 7, there are still areas where it is not standards compliant.

What can you do?  Well the easiest thing to do is to use Conditional Comments in the header of your pages to fix the broken code.  Take a look at the source code for this page:

http://craftwebproject.com/unit1/index.html

In the header area you will see a “Conditional Comment.”  That’s what you need.

The CC calls an additional style sheet that is applied after the normal style sheet.  In this extra style sheet you can address IE’s special needs.

Here is some decent info on how to make all this work for your own pages:

http://reference.sitepoint.com/css/conditionalcomments

Of course even after you know how to do a Conditional Comment you still have to figure out what you have to do with the standards compliant styles you have in your style sheet to change them (make them non-standard) in the additional style sheet that is called by the Conditional Comment.  You can always figure out something eventually, but it’s extra work.

Why bother?  On the Mesa College website we see the following browser breakdowns:

• Firefox 30%
• Safari 7%
• IE 62%
• Other 1%

Internet Explorer users are moving more and more to IE 7, but there are still some IE 6 users out there.  If you want to take the time you can have more than one Conditional Comment. In that case your code could say, “If this is IE7 call this extra style sheet. If this is IE6 call this different extra style sheet. If this is IE 5 call this also different extra style sheet.”

Even though it’s possible, I don’t bother to do Conditional Comments for IE6 or 5 because they are not worth my time in a web design class. If my students are still on those old browsers, I want them to upgrade to IE7.  However, if your company has lots of IE 6 installed, you may have to compensate for the older browser as well.

All this has an impact on your work flow.  You should start in FireFox and use all the web design tools that are available for that browser such as the Web Developer’s Toolbar and FireBug.  When your code works in Firefox, your code will probably work perfectly in Safari and Opera as well.  Then you need to look at the code using IE and see if everything still works.  Many times everything is fine; however, sometimes things are messy.

Since Conditional Comments only work on IE, you have to do them last.  If you make your pages work for IE from the start, your code may be incompatible with FF and Safari — and there is no such thing as Conditional Comments for them. They don’t respond to Conditional Comments.  Why should they?  They are supposed to ignore comments because the standards say comments should be ignored (grin).  So Conditional Comments are only for IE, and you do them last.

I am looking forward to IE8.  MS promises to come much closer to the standards on their next version of IE.  We’ll see…

…Bill

No Comments »
Filed under: CSS, Web Design Links

No Comments »
Filed under: Web Design Links