http://bcts-potomac.aacc.edu/CAT/cat12/Final%20Project/site/index.htm

Final project screen shots coming soon…

Meta description tags:

- describe the content of the page
- create short text ads so that people will click on your page from a search engine page
- display targeted keywords to indicate content

Rules to follow when writing meta descriptions:

1. Always describe your content honestly
2. Character limit of 160
3. Write compelling and informative details
4. Test meta description performance in the search results by buying the keyword through PPC
5. Don’t assume that a successful PPC ad will transition into a good meta description (or the reverse).
6. Your keywords must be in the meta tag.
7. You shouldn’t always write a meta description. It can sometimes be wiser to let the engines themselves extract the relevant text.

*  LAYERS TV: Creating and Using Templates
NOTE – start the video at the 5:45 time stamp (skip the Illustrator portion)

http://tv.adobe.com/watch/layers-tv/episode-62

* Rapidly building layouts (using prebuilt HTML pages)

http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-03-rapidly-building-layouts

* Creating Templates
NOTE – this video is based in CS3, but the same concepts still apply

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0157

* Using Templates
NOTE – this video is based in CS3, but the same concepts still apply

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0158

When creating templates, you pick which areas will be the same on each child page and which will be different by creating editable and optional regions.  Repeating regions can also be created to give more flexibility, such as for the navigation entries.

I viewed a review of the box model, with its five parts:

width of content
height of content
padding (between content and border)
border
margin (between the border and other elements)

Video links have been added to my link section.

http://bcts-potomac.aacc.edu/CAT/cat12/week9/cejonasson_final_comp2.jpg

When exporting from fireworks to photoshop, keep in mind that you must ungroup anything you want to be editable in photoshop.  Fireworks will flatten any groups.  Also, symbols will be flattened as well.  Symbols should be broken apart and ungrouped before exporting to photoshop if they need to remain editable.  Anything created in fireworks using the common library will export as a flattened bitmap.

Write web pages for web standards and then fix for IE using IE comments.

Further research should be done on media = “print” and 301 redirecting.

http://www.w3conversions.com/ has lots of resources that should be explored as does http://www.communitymx.com/.

Common mistakes print designers make on the web:

1. You don’t have to wear all the hats.

2. Thinking inside the box.

3. Being a control freak.

4. Putting all the images directly into the page.

5. A picture is worth a thousand words, isn’t it?

6. Misunderstanding linking, naming and server codes.

7. Believing the tool is smart.

8. Naming and styling elements based on their appearance.

9. Designing for  a specific browser.

10. Putting the design before the content.

I like the idea of saving your grid as a gif and then setting it as a background for your page during the coding process.  I’ll have to be careful about setting up my grid to be an odd number of columns since grids based on an even number can be too symmetrical if text and graphics are confined to individual or double grid columns consistently.

I’ve added a ton more links to my link section and am seriously looking forward to spring break!

Safe fonts list (installed by default on both Windows and MAC OS):

• Arial, Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Generic Font Families:

• serif
• sans-serif
• cursive
• fantasy (or Novelty)
• monospace

Letter-spacing CSS Property: adjusts the font’s tracking.

Word-spacing CSS Property: adjusts the amount of whitespace between words.

Line-height CSS Property: adjusts leading.