Daniel Burkhard's Blog

This will be a new portfolio blog for CAT 240

Helpful links for web design.

Here are some recommended website hosts – this is not a definitive list, but just a few suggestions:

• Blue Host
• Chrystal Tech
• GoDaddy
• Network Solutions

Browser Shots
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service. When you submit your website URL, it will be added to the job queue.

A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server and you will be notified when all testing is done, and can review the screenshots in your account.

More Info: http://browsershots.org/

^^This is a really good link, especially for beginners like myself who would like to be able to give quick rough estimates on a web design project.

More helpful links….

http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html

http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html

Cool css site

http://www.csszengarden.com/

Estimating time

http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/

If you are going to have rollovers – or images that react to the user’s mouse interacting with a button, and displaying a change – on your page, there are a few things to remember.

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

All rollover images must be the same physical size – if your OFF state is 300 by 25 pixels, your ON state must be the same physical size.

How you design your rollover images is up to you – Fireworks or Photoshop can be used to create the initial graphics, which should be saved as JPG or GIF files.

Once you’ve created the images or added them to your layout, you can insert them into the page code in two ways:

• Using Fireworks incorporate slices and layers into your final design;
• Define slices over rollover areas and export the individual image states – be careful not to overwrite images;
• Using Dreamweaver add saved and optimized GIF or JPG 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.

Tables

http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html

fireworks

http://www.adobe.com/devnet/fireworks/articles/export_css_images.html

http://www.adobe.com/devnet/fireworks/articles/export_css_images_02.html

my design for my website

http://bcts-potomac.aacc.edu/CAT/cat02/week10/home.jpg

Some helpful links.

Designing with Grids:
http://www.webdesignerwall.com/trends/grid-and-column-designs/

CSS Typography:
http://www.digital-web.com/articles/css_typography/

Prototyping
http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html