The caffeinated blog- Unlock the Full Potential of Your LinkedIn Profile: http://thecaffeinatedblog.typepad.com/the_caffeinated_blog/2008/08/unlock-the-full-potential-of-your-linkedin-profile.html

Web Video Resources
Rich Harrington’s book How to Produce Video Podcasts
Infomania’s Viral Video Film School and VC2 training: http://current.com/make/training/section/broadband.htm

Flash users:
output the AVI (or MOV) from Premiere,
import it into Flash
adjust the Canvas size of the flash file to fit your movie
Flash will step you through the process of setting up the video
Publish your flash file as a SWF

Izzy video: http://www.izzyvideo.com/ DreamweaverAdd the SWF file to a page in

Rotating Images with Dreamweaver and JavaScript: http://www.communitymx.com/content/article.cfm?cid=651FF

Website Hosting & Domain Names
Blue Host: http://www.bluehost.com/tell_me_more.html
Chrystal Tech: http://www.crystaltech.com/sharedhosting.aspx
GoDaddy: http://www.godaddy.com/default.aspx?ci=13333
Network Solutions: http://www.networksolutions.com/
Check to see what is included!

Browser Shots: http://browsershots.org/

Articles:
Killer Web Content: http://www.gerrymcgovern.com/nt/2007/nt-2007-10-01-killer-web-content.htm
Content that works on the web is customer-centric
Short, sharp, second person and active; that’s web content

CSS Cheat Sheet: http://webdesign.about.com/od/css/a/css_cheat_sheet.htm
Basic CSS Cheat Sheet and CSS Layout Cheat Sheet

How we really use the web: http://www.sensible.com/chapter.html
Fact #1: We don’t read web pages, we scan them
Fact #2: We don’t make optimal choices, we make satisfies
Fact #3: We don’t figure out how things work, we muddle through

Estimating time for a project: http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/
Identify the main project then pinpoint the specific deliverables
Break the project down into simple steps
Estimate time for each step
Remember to allocate for project management time, time to review work of subcontractors, holidays or days off that occur during the project, client turnaround time, and debugging

In a means to make the logo seem larger I reduced the height of the navigational bar. I noted that the logo was 70px high so I reduced the navigational bar from 40px to 35px- 1/2 the height of the logo- in hopes to create a more visually prominent logo.

I checked and all my padding was consistent. At the bottom of the page before the footer I increased the padding from 6px to 12px. When I placed the images only 6px away from the footer they seemed to be squeezed into the page. I think allowing some extra negative space helps the images stand out a bit better. I know everything should be the same distance apart but I don’t mind this spacing because it is a proportional number.

I toyed around with the alignment of my footer text. In trying to center two items by grid block (from the navigational buttons) I had three separate text items and additional “|” to space things. I assumed these could be messy to export so I finally got all the text and spacers on one line.

Lastly, I created an orginal image for the bottom left corner of my pages; it’s a paisley motif. I am not in love with it but it is growing on me. I’ll keep looking for more inspiration and see if I can create something that wows me, but for now it will do. After I created it and inserted it into the page I realized it looks better flipped. Flipping the image seems to lead one’s eye in opposed to pulling the eye away as the original image does.

Here are my final design comps and the new motif:

Build out process, CSS design
Identify your original grid- helps organize slicing and dividing
Identify animated images- save as separate files, animate later
Identify solid hex #’s
Identify areas that are HTML text
Identify static images and pattern backgrounds
Identify navigation for rollovers- save as separate PNG or PSD files

All rollovers require TWO images:

• an “OFF” state, or image that displays when the mouse is NOT on the graphic
• an “ON” state, or image that displays when the mouse is ON or OVER the graphic

Things to remember with rollovers
All rollovers require two images- an ON and OFF state
All rollover images must be the same physical size
Fireworks or Photoshop can be used, save as JPG or GIF files

Insert images into the code in 2 ways:
In Fireworks use slices and layers, Define slices over rollover areas and export the individual image states – be careful not to overwrite images;
In Dreamweaver add images to your page using the Insert > Image Objects… > Image Rollover feature- be sure to give each rollover a name, ALT tag that describes it, and define two images.

Articles
Understanding CSS: http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html
CSS page layout basics: http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
CSS Zen Garden: http://www.csszengarden.com/
How to Estimate time for a project: http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/

Videos
Creating templates http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0157
Using templates: http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0158

From table based to tableless web design with CSS :  http://www.adobe.com/ class=”hiddenSpellError” pre=”">devnet/dreamweaver/articles/table_to_css_pt1.html

Introduction: http://www.adobe.com/devnet/fireworks/articles/export_css_images.html
New Options: http://www.adobe.com/devnet/fireworks/articles/export_css_images_02.html
Using the Export Features: http://www.adobe.com/devnet/fireworks/articles/export_css_images_03.html

http://download.macromedia.com/pub/developer/smolder_sample_fwcs4.zip
http://download.macromedia.com/pub/developer/css_export_fwcs4_v2.zip
Introduction: http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html
Design with Semantics: http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_02.html
Using background images & slices: http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_03.html
Creating standards compliant designs: 
http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_04.html

Some benefits from using web standards:
Simplified and lower cost of development and maintenance
Continued compatibility with current and future web browsers
Improved accessibility to more people and more Internet devices
Opportunity for increased search engine rankings

Here is round 2 of my design comps for my portfolio site:
http://bcts-potomac.aacc.edu/CAT/cat10/FinalProject/comps/jhaspert_homepg.jpg
http://bcts-potomac.aacc.edu/CAT/cat10/FinalProject/comps/jhaspert_portfolio.jpg

Videos
Tips & Tricks, Rapid Protyping: http://tv.adobe.com/watch/fireworks-tips-and-tricks/rapid-prototyping/
Exporting CSS and Images: http://tv.adobe.com/watch/digital-design/getting-started-06-exporting-css-and-images/
Creating HTML Clickthroughs: http://tv.adobe.com/watch/digital-design/getting-started-07-creating-html-clickthroughs/
Creating CSS, HTML layouts: http://tv.adobe.com/watch/digital-design/creating-cssxhtml-layouts/
Introduction to CSS: http://tv.adobe.com/watch/digital-design/introduction-to-css/

Websites
Dao of web design: http://www.alistapart.com/articles/dao/
Blasting the Myth of the Fold: http://www.boxesandarrows.com/view/blasting-the-myth-of
5 Principles to design by: http://bokardo.com/archives/five-principles-to-design-by/
The Difference between ID & Class: http://css-tricks.com/the-difference-between-id-and-class/
“Information that is reuseable should be kept in a class and information that is totally unique should be kept in an ID.”

Typography resource: www.ilovetypography.com
Anatomy of Web fonts: http://articles.sitepoint.com/article/anatomy-web-fonts
Characteristics of good screen font
-Low contrast and simple strokes with a consistent weight and thickness
- Generous x-height
- Generous width and letter spacing
- Generous punch width (space within letters)
Verdana, Trebuchet MS, Helvetica, san serif are good font options for the webCode Style’s

Combined font survey results: http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
It’s best to use one of the 40 recognized system fonts (see article above) in your stack, to ensure some control over the look and feel of a font
CSS Font Family Glossary: http://www.codestyle.org/css/font-family/Glossary.shtml
CSS Typography: http://www.digital-web.com/articles/css_typography/

Videos
Adobe- The Complete Design Process: http://tv.adobe.com/watch/fireworks-tips-and-tricks/the-complete-design-process/
Adobe- Information & Interaction Design: http://tv.adobe.com/watch/fireworks-tips-and-tricks/information-and-interaction-design/
Adobe- Quickly Transform Photoshop layouts: http://tv.adobe.com/watch/everyday-timesavers-web/quickly-transform-photoshop-layouts/
Adobe- Dreamweaver Integration: http://tv.adobe.com/watch/digital-design/getting-started-06-dreamweaver-integration/

Links of Stock Image sites from  The Principles of Beautiful Web Design
Stock.XCHNG (Free Images): http://www.sxc.hu/
Morgue File (Free Stock Images): http://morguefile.com/
iStock Photo (Royalty-free Images): http://www.istockphoto.com/
Corbis (Royalty-free Images): http://www.corbis.com/
Getty Images (Royalty-free Images): http://www.gettyimages.com/
Jupiter Images (Royalty-free Images): http://www.jupiterimages.com/
Dreamstime (Royalty-free Images): http://www.dreamstime.com/
Photos(Royalty-free Images): http://www.photos.com/
Shutterstock (Royalty-free Images):http://www.shutterstock.com/
Advertising Photographers of America: http://www.apanational.com/
Zen Photo(open-source PHP and MySQL based image gallery application): http://zenphoto.org/

12 Rules for choosing the right domain name: http://www.seomoz.org/blog/how-to-choose-the-right-domain-name
Check Copyright to avoid copyright infringement: www.Copyright.

Common Domain Name Registrar’s Today
Network Solutions: http://www.networksolutions.com/
GoDaddy: http://www.godaddy.com
Register: http://www.register.com
Network Solutions: http://www.netsol.com
For a full list of accredited registrars, visit ICANN: http://www.icann.org/

Designing for Search Engines
Search Engine Watch: http://www.searchenginewatch.com
Free SEO Tools: http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/
Search Engine Optimization: http://www.seomoz.org/
Search Engine Roundtable: http://www.seroundtable.com/archives/014550.html

Readings
Search Engine Placement Tips: http://searchenginewatch.com/2168021
8 Web Design Tactics to help you when you’re stuck: http://www.seomoz.org/blog/web-design-tactics

Sites from The Principles of Beautiful Web Design
Online community for learning about/discussing typography: http://www.typophile.com
Marko Dugonji’s Typetester (see how different HTML text will look w/ different leading, tracking,etc): http://typetester.maratz.com/

Free & Shareware Font Galleries
1001 Fonts: http://www.1001fonts.com/
DaFont: http://www.dafont.com/
Wanted Fonts: http://www.wantedfonts.com
Fonts for Sale
Font Shop: http://www.fontshop.com/
AGFA Monotpye: http://www.fonts.com/
Veer: http://www.veer.com/products/type/
MyFonts: http://www.myfonts.com/
International Typeface Corporation: http://www.itcfonts.com/
Individual Artists & Foundries
AEnigma Fonts: http://cooltext.com/Fonts-Aenigma+Fonts
The Astigmatic One Eye Typographic Institute: http://www.astigmatic.com/
Blue Vinyl Fonts: http://www.bvfonts.com/
Fountain: http://www.fountain.nu/
Larbie Fonts: http://www.larabiefonts.com/
Misprinted Type: http://www.misprintedtype.com/
Pizzadude: http://www.pizzadude.dk/

Complete List of Codes & their alternative entity numbers: http://www.w3schools.com/tags/ref_entities.asp

Traditional Navigation Styles
News/Column based navigation:
http://www.cnn.com/ 
http://www.baltimoresun.com/
Dynamic Drop down:
http://www.monster.com/
http://www.vdsys.com/web-design.htm
Basic Graphic Navigation:
http://www.macys.com/
http://baltimore.org/
CSS driven text Navigation:
http://www.peta.org/
Breadcrumb Navigation:
http://www.peachpit.com/articles/article.aspx?p=664662

Optimizing Animated GIF’s: http://www.webreference.com/dev/gifanim/
GIF Animation Shareware Programs: http://www.tips-tricks.com/k_gifanimation.asp
Presentation on GIF Animation: https://angel.aacc.edu/AngelUploads/Content/USER-jmschuster/CAT274/module06/gif-anim-present.html

Matt Brown (Adobe) Keys to good web design: http://www.adobe.com/devnet/dreamweaver/articles/dwmx_design_tips.html
Breadcrumb Navigation  increasly useful: http://www.useit.com/alertbox/breadcrumbs.html