Tips, web design book reviews, resources and observations for teaching and learning web development.
I wrote an article for Digital Web Magazine called Web Design 101: Floats which appeared today. It explains the basics of float. The article gives several methods for containing floats and also some example layouts based on floats.
Technorati Tags: web design, CSS, Web Design 101: Floats
My latest Web Teacher Tip is a test drive of the new slideshow creator in Fireworks CS3. The article is on a separate page so as to accomodate the completed slide show. Read about slideshows here.
If you don’t own Fireworks, I suggest other slideshow creators you can try.
If you have any comments to add, return to this post to leave them here.
I’m just getting my feet wet as an eHow Expert. I’ll be writing how to articles about Internet topics there. They will be simplified step by step instruction on a single idea. My Web Teacher Tips are usually more complicated that the step by step style of eHow. I haven’t done much there yet, but I invite you to keep an eye on it. If you need a simple set of instructions for how to do something, eHow provides a way to request it.
I have a Web Teacher Tips style article called Dreamweaver Property Inspector Cautions on BlogHer today. Read it there. If you aren’t a BlogHer member, feel free to leave any comments about it here.
One of the most important and least noticed facts about CSS layouts for sites meant for mobile users relates to source order. The elements of a web page—header, main content, sidebar, footer, and other such divisions—can be written in the the HTML in any order and laid out anywhere on the page using CSS. This means the main content div can be first in the HTML source in many layouts.
For mobile users who may be viewing a page without the help of CSS, seeing the main content first can save considerable time and many clicks to get to the relevant part of a page. If you look at this page with CSS turned off, you will note that the links at the top of the page are first in the source order. One of my goals in adapting this page for mobile users would be to either 1) use CSS to put the links last in the source order while still displaying them on the page under the title graphic, or 2) put a skip navigation link at the beginning of the list of links that would let a mobile user jump right to the first blog entry.
Check out my article called Make Your Site Mobile Friendly published at Vitamin today.
If you have my book Mastering Integrated HTML and CSS, you know there’s a chapter about CSS for handhelds in it. This article contains material that isn’t in that chapter, so even if you are one of my faithful readers, do take a look.
If you have any comments about the article, please leave them at Vitamin.
Technorati Tags: web design, accessibility, Dreamweaver, Web Standards, Mobiles, CSS
A nice new feature coming in Dreamweaver CS 3 (out in April from Adobe) is the ability to drag and drop styles in the CSS styles panel to change the order of the styles in the style sheet. It works in the same way moving a layer up or down in a Photoshop document works. Just grab the style you want to move. As you drag it a black bar appear that indicates where it will drop.
In my latest book, Mastering Integrated HTML and CSS I have a chapter that explains how to use CSS with Dreamweaver. At the time I wrote the chapter, the only way to reorder styles in a Dreamweaver style sheet was to open the style sheet up and cut and paste to achieve the order you wanted. If you own that book, take note of this new feature, because it makes keeping styles in a particular order for cascade purposes much easier.
Technorati Tags: CSS, Dreamweaver