http://tv.adobe.com/watch/dreamweaver-cs5-feature-tour/top-3-features-in-dreamweaver-cs5/

Making Web Design More Approachable for Graphic Designers

http://tv.adobe.com/watch/dreamweaver-cs5-feature-tour/cs5-design-premium-makes-web-design-more-approachable-for-graphic-designers/

Defining a New Site (DW CS5)

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/

New Features in Adobe Dreamweaver CS5

http://tv.adobe.com/watch/learn-dreamweaver-cs5/new-features-in-dreamweaver-cs5/

CSS Inspect

http://tv.adobe.com/watch/inside-the-dreamlabs/dreamweaver-cs5-css-inspect/

CSS Enable/Disable

http://tv.adobe.com/watch/inside-the-dreamlabs/dreamweaver-cs5-css-enabledisable/

Live View Navigation

http://tv.adobe.com/watch/inside-the-dreamlabs/dreamweaver-cs5-live-view-navigation/

Preview your Web Designs in BrowserLab

http://tv.adobe.com/watch/inside-the-dreamlabs/dreamweaver-cs5-browserlab-integration/

• Blue Host
• Chrystal Tech
• GoDaddy
• Network Solutions

Things to consider when chosing a host

• Tech Support – via email, phone or both?
• Limits on Tech Support – are there any?
• Analytics – will they offer information on traffic, visitors, pages hit, etc?
• Servers – Linux or PC? 
• Programming – what types of programming are allowed?
• Email Accounts – how many? webmail or outlook compatible?

Link for BrowserShots

http://browsershots.org/

Killer Web Content key characteristics

• customer centric is good
• organization-centric is not good

CSS Cheat Sheets

http://webdesign.about.com/od/css/l/css_cheat_sheet.pdf

http://webdesign.about.com/od/css/l/css_layout_cheat_sheet.pdf

Notes about how we REALLY use the web

from Don’t Make Me Think! A  Common Sense Approach to Web Usability

by Steve Krug

• we don’t read we scan
• we don’t make optimal choices
• we don’t figure things out, we muddle through

How to Estimate Time for a Project

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

Here are my final home page and product page for my class project.  Thanks to all of the input from the class.  The home page now has a place with text.  I know it was supposed to be the real thing but I am still working with the owner of the company on it.  The text should help with SEO when it is completed.  After seeing many in the class have their work critiqued, I felt I needed to to more work on lining up things to fit in a grid better.  I think the process helped me produce a better product.  Amanda gave me some great input on the footer text drawing too much attention and I am very happy with the adjustments I made from those comments.

Back to notes from the week 

Understanding CSS

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

tutorial on creating CSS page layouts

http://www.adobe.com/go/vid0155

three places for CSS styles

• external style sheet
• internal (embedded) style sheet (header)
• inline styles (not recommended) 

O’REILLY CSS Reference in DW – Help – Reference – Book: O’REILLY CSS Reference

3 Sources Responsible for styles you see on a web page

• the style sheet created by the page author
• the user’s customized style selections
• the default styles of the browser itself

remember inheritance

More info on rules governing the cascade, inheritance and specificity

http://www.w3.org/TR/CSS2/cascade.html

CSS Page Layout Basics

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

absolutely-positioned elements (AP elements)

Using and customizing CSS-based layouts

http://www.adobe.com/go/vid0155

CSS Zen Garden

http://www.csszengarden.com/

CSS Resource Guide

http://www.mezzoblue.com/zengarden/resources/

Zen Garden, the book

Estimating Your Time

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

• Identify Deliverables
• Break It Down
• Add It Up
• Things to Keep In Mind

Creating Templates

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

There are editable regions AND

there are optional regions

that are shown by default or dumped

Using Templates

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

optional regions and attributes can be modified by choosing template properties

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

• http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html
• http://www.adobe.com/devnet/fireworks/articles/css_templates.html
• http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
• http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
• http://www.adobe.com/devnet/dreamweaver/css.html
• http://www.adobe.com/devnet/fireworks/articles/smart_css_03.html

Creating Standards Compliant Designs

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

http://www.adobe.com/designcenter/fireworks/articles/frwcs3_richsymbol.html

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

http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

CSS Advantages

• Separation of content and presentation
• Portability to other media
• Lower page weight
• Quicker redesigns
• More possibilities

4 Simple Rules

• Only text, rectangles and images are exported
• Text rectangles and images are all treated as rectangle blocks
• The Exporter must be able to interpret where the columns and rows of objects exist
• The document layer is treated as two dimensional

Benefits of using web standards

• Simplified and lower cost of developmental and maintenance
• Continued compatibility with current and future web browser
• Improved accessibilty to more people and more Internet devices
• Opportunity for increased search engine ranking

be comfortable breaking out of the columns

consider column layouts with graphic image background

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

CSS Typography

alternatives for creative type

• font embedding
• sIFR
• image replacement
• JavaScript

CSS is the easiest, most reliable accessible and straightforward way to improve readability and visual design of your sites.

Readability

• read faster without margins
• comprehend better with margins

Caution specifying ems in nested elements.  An em of .9 em in a paragraph of .9 em becomes a .81 em.

Be comfortable with line height, but be cautious of word spacing and letter spacing.

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

Prototyping

Prototyping

•  makes your designs better
• fail early to succeed sooner
• enable user input and usability assessment
• helps assess technical and feasibility and reduce development time

Ways of prototyping

• storyboard scenarios – waycomm and Fireworks
• paper prototypes
• clickable prototypes

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

Resource – Greeking Generator

http://www.lipsum.com/

Lorem Ipsum

Videos

http://tv.adobe.com/watch/fireworks-tips-and-tricks/rapid-prototyping/

• sounds interesting but can’t get it to download
• http://tv.adobe.com/watch/digital-design/getting-started-06-exporting-css-and-images/
• use rectangles for divs
• images must be slices
• avoid overlaps
• try to plan with rows and columns in mind
• treat doc as 2 dimensional

http://tv.adobe.com/watch/digital-design/getting-started-07-creating-html-clickthroughs/

http://tv.adobe.com/watch/digital-design/creating-cssxhtml-layouts/

http://tv.adobe.com/watch/digital-design/introduction-to-css/

• TV was originally voiceovered like radio.  Web is often thought of like print.
• Adaptibility is accessability.  Make pages which are adaptable.  Think about what pages do, not what they look like.  Form follows function.
• Don’t use HTML for presentation.
• Don’t rely on stylesheet to convey information.
• Absolute units like pixels and points are to be avoided.
• Use color with caution.
• Fonts – Don’t rely on fonts being available no matter how common.  Use % for Heading size differences.
• Layout – use ems or %

http://www.alistapart.com/topic/

•           css/
•          layout/
•          typography/
•         accessability/

Blasting the Myth of the Fold     by  Milissa Tarquini

• People DO look below the fold.  Data supports this.
• However, user should be able to understand what your site is about by the information presented to them above the fold.
• Stop worrying about the fold.

Five Principles to Design By     by Joshua Porter

•      Technology serves humans, humans do not serve technology.
•      Design is not Art.
•      The Experience belongs to the User.
•      Great Design is Invisible.
•      Simplicity is the Ultimate Sophistication

The Difference Between ID and Class     by Chris Coyier

• ID’s are Unique
• Classes are Unique
• There are no browser defaults for ID or Class.
• IDs have special browser functionality.
• Elements can have both.
• CSS doesn’t care.  Javascript does care.

Imagery – The Principles of Beautiful Web Design

What to look for:

• Is it relevant
• Is it interesting
• Is it appealing

Legitimate Image Sources

• Do It Yourself
• Purchase Stock Images
• Hire a Professional

Stock Images

Free images

• http://www.sxc.hu/
• http://www.morguefile.com/

Royalty-Free Images

• http://www.istockphoto.com/
• http://www.corbis.com/
• http://www.gettyimages.com/
• http://www.jupiterimages.com/
• http://www.dreamstime.com

Royalty-Free Images – monthly services

• http://www.photos.com
• http://www.shutterstock.com

Rights-Managed Images

• Pay a fee based on the size of your business, the number of people exposed to the image and an amount of time in use.

No Google Ganking

No Hot Linking

• Block Elements – hard return above and below
• Inline Elements – displayed inline with other information
• Rules (Selector Declarations) contain a selector, a property and a value
• Multiple declarations are separated by semi-colons.

h1 {color: red; }

• h1 = selector
• declaration = {color: red;}
• property = color:
• value = red;

CSS Box Model

• margin = space outside the box
• padding = space inside the box
• border = outline around the box (inside the margin but outside the padding)
• width = specifies the interior width

Why GIF animation prevails today:

• simple format/well known standard
• no additional software/plug-ins required
• ability to add alt tag info & standard links in HTML

GIF Animation Programs for MAC and PC

• Adobe Photoshop (PC/MAC)
• Adobe Fireworks (PC/MAC)
• Adobe Imageready (PC/MAC) (often used in tandem with older Ps)
• Ulead @ GIF Animator (PC)
• GIFmation (MAC & PC)

Animation can be achieved through the following methods:

• movement of content
• adjusting of opacity and blur factors
• layer visibility

Navigation Buttons

Any rollover involves preparing at least two separate images.

Fireworks Terminology

Layers

• transparent planes where objects are created and stored
• control stacking order of objects and lock objects in place
• similar to the layers of an onion

Frames

• controls the state of your image
• used in animation and in the creation of rollover graphics
• rollover graphics generate javascript, HTML and optimized images

Guides

• divides images and are invisible outside application
• pulled down or over from rulers
• divide up the layout into a grid system or for use with slices

Web Layers

• area holds slice and hot spot info
• automatically added when you create a slice
• not editable through layers window, but appear as a listing

Slice

• individually named areas of an image
• Fireworks will crop and save based on designated optimization settings
• will not show in a browser or save in different formats
• often paired with the ability to generate HTML and CSS code in Fireworks to automatically display images in a browser

Domain Names

www.digitaljenn.com

• www = third level domain
• digitaljenn = name or second level domain
• .com = extension or top level  domain or TLD

http://www.seomoz.org/blog/how-to-choose-the-right-domain-name

Common Domain Name Registrars

• Go Daddy     http://www.godaddy.com/
• Register     http://www.register.com/
• Network Solutions     http://www.netsol.com/
• for a complete list     http://www.icann.org/registrars/accredited-list.html

Search Engine Links

• http://www.searchenginewatch.com/
• http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/
• http://www.seomoz.org/
• http://www.seroundtable.com/archives/014550.html

Search Engine Placement Tips

http://searchenginewatch.com/showPage.html?page=2168021

8 Web Design Tactics to Help You When You’re Stuck

http://www.seomoz.org/blog/web-design-tactics

Typography

http://www.typophile.com

Safe Font List

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

Text Replacement with sIFR

• http://www.mikeindustries.com/sifr/
• http://wiki.novemberborn.net/sifr/

http://typetester.maratz.com

Free and Shareware Font Galleries

• http://www.1001fonts.com/
• http://www.dafont.com/
• http://wantedfonts.com/

E-J Enterprises, Inc. -  I am currently employed as the full time Purchasing Manager at E-J.  I would get information, current marketing materials, images and content from the owner/president Eric Johnson and the vice president Harry Ottey.  There currently exists a morgue of images, logos and content that will be of some use.  I made a site for E-J in the non-credit web certification class I took over the summer.  With only 5 weeks in this class I feel like I could already make imporvements in what I have and I believe that by the end of the class I could have a product worthy of posting.  A website exists now, but it is not a very helpful website.

The Moon Flower Garden Club - One of my closest friends is an officer in this garden club and they have been talking about the need for a website for over a year.  They are a very active club, but generates very little in the way of revenue, so they are limited in their ability to pay someone.  I would get material through my friend.  I’m a bit concerned that I might run into a situation where I have to deal with a group that might not get together frequently enough to make decisions and that while they know they want a web site, it might take some time to decide what they want it to include.

LKD Case Management Services Inc. – This is a one person company owned and run by a woman (Linda Dotson) who manages workman’s compenstation claims.  The woman who owns the company is the wife of the man (Mike Dotson) who owns the sailboat that I race on.  Mike put together a website with some online tool that was available, but now it doesn’t work well.  I think I would prefer to tackle it as a first effort on my own after the class was done.

Texture

Texture is anything that gives a distinctive appearance or feel to the surface of a design or object.                                                       Jason Beaird The Principles of Beautiful Web Design

Points – Line – Shape – Volume – Depth – Pattern

Photoshop Anthology: 101 Web Design Tips, Tricks , and Techniques by Corrie Haffly

Videos: An Overview of Fireworks

• Understanding Fireworks: View the video >>
• Fireworks Interface: View the video >>
• Importing and Exporting Images: View the video >>
• Smart Guides and Tool Tips: View the video >>
• Using Kuler Color Themes: View the video >>
• Understanding Styles and Symbols: View the video >>

Color Theory

• http://www.colormatters.com/symbolism.html
• http://www.colorstrology.com/
• http://www.mariaclaudiacortes.com/
• http://tv.adobe.com/watch/learn-fireworks-cs4/using-kuler-color-themes/
• http://kuler.adobe.com/

Usability Info

• Top 10 Mistakes  http://www.useit.com/alertbox/9605.html
• Text Links   http://www.useit.com/alertbox/20040510.html