Ordered and Unordered Lists
Lists are great! Any time that you have a number of ideas to present it is best to compile them into a list rather than a paragraph. This method is easier for the viewer to read, helps users scan for the info they’re seeking, and adds interest to a page- allowing the reader to pause for a list between paragraph reading.
Cascading Style Sheets!
This is a need-to-know and practice technology. All web pages should have CSS, all CSS should be named meaningfully! We will use CSS throughout the semester and I encourage you to use and practice it as much as you can. A great tool to help is the Developer Toolbar for Firefox. This will help you spot your CSS and see what its doing. Today we will cover:
- Creating
- Applying
- Editing (renaming, moving, exporting- these easy features are only in CS3 other versions require more handy work)
- Troubleshooting
Insert & Align Images
In the properties bar you can set an image to go to the right or left of a body of text. You can position it more accurately by clicking and dragging the image to different places in the paragraph. Be sure that your images are sized IN A GRAPHICS PROGRAM!!! Never resize images with HTML dimensions- it looks like poop (and you will make the user wait to download a larger file than necessary). You may batch resize photos with Photoshop, Fireworks, Picasa and many other programs.
Alternate Text
Alternate text is a description of a photo or graphic that a web designer adds into the HTML. This text shows up while the image is loading, if the image is missing and is read aloud by screen-readers to disabled users. When choosing alternate text imagine that you are describing the photo/graphic to someone over the phone. Ask yourself, “What is the photo of?” Such as:
- A maple tree
- kitten on fire
- boy eating dirt
- Bono of U2
- About Us
- Pie chart: 35% love chocolate, 45% love vanilla, 20% love other
NOT
- image 1
- photo of Jamie
- cat65
- img_9876
- header_1
- Pie chart
Background Images
The book has you entering background images to a page via the page properties panel, but I suggest using the CSS panel. By creating a rule redefining the body tag you can add a background where you have a lot more control. We will cover this in class (choose the body tag and add a background to it in the CSS dialog). Be sure that your text can be read over your background. And, please, don’t try to cause seizures with animate backgrounds. Keep it simple.
{ 2 comments… read them below or add one }
Hi Heather,
I read your blog above on CSS. In HTML class I remember the power of CSS and I also remember that it is tricky for me to hand code it…From your blog above, and from class notes, you mention that the developer tool for firefox is good to have. When I read the license agreement for the Web Dev 1.1.8, the Driver Detective for Firefox, I read that I had to accept “grant license upon payment of fees”. I could find nothing about fees, and I’m leery about accepting fees sight unseen. I want the tool–will I have to pay fees?
Hmmm. I don’t know what they are referring to about fees, Ive never paid any. The developer asks for a donation for use: https://addons.mozilla.org/en-US/firefox/addon/60 but that’s it. This is a very popular and widely used plug-in, Ive never heard of any issues about fees.
In fact its licensed under the GNU Lesser General Public License, version 3.0 which begins: ” Copyright (C) 2007 Free Software Foundation, Inc.