MODULE Ten

TUTORIALS

• Tableless CSS Web Design

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

• COMPS TO CODE

http://www.adobe.com/devnet/fireworks/articles/export_css_images.html  (This is about importing css and images into fireworks.)

http://www.adobe.com/devnet/fireworks/articles/export_css_images_02.html (STEP 2A Where you export the css and images to

dreamweaver.)

http://www.adobe.com/devnet/fireworks/articles/export_css_images_03.html (STEP 2B Using the export feature in diff situations.)

TUTORIAL ON COMPS TO CODE

• http://download.macromedia.com/pub/developer/smolder_sample_fwcs4.zip
• http://download.macromedia.com/pub/developer/css_export_fwcs4_v2.zip
• http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html (INTRO)
• http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_02.html (DESIGNING WITH SEMATICS)
• http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_03.html (USING BACKGROUND IMAGES/ SLICES)
• http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_04.html (CREATING STANDARDS W COMPLIANT DESIGNS)

MODULE Eleven

ARTICLES

• UNDERSTANDING CSS

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

• LAYOUT BASICS

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

• CSS Zen Garden website:
  A fantastic site that solicits designers from around the world to take the same content area, and using CSS, create a custom, original design. Amazing example of what can be done with CSS from a design standpoint – all of the page examples are the exact same code, with only the stylesheet changing. Review CSS Zen Garden, as well as some of the examples (click on the links on the right side of the homepage).

http://www.csszengarden.com/

• ESTIMATING TIME FOR A GIVEN 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

MODULE TWELVE

ARTICLES

• ESTIMATING WHAT GOES INTO THE PRODJECT

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

• HOW WE REALLY USE THE WEB

http://www.sensible.com/chapter.html

• CSS CHEAT SHEEEEEET

http://webdesign.about.com/od/css/a/css_cheat_sheet.htm

-LAYOUT DESIGN-

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

-BASICS-

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

• CONTENT IS KILLER!

http://www.gerrymcgovern.com/nt/2007/nt-2007-10-01-killer-web-content.htm

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.

-http://browsershots.org/

WEB HOSTING

• GO DADDY

-https://www.godaddy.com/Hosting/web-hosting.aspx?ci=9009

• CRYSTAL TECH

-http://www.crystaltech.com/sharedhosting.aspx

• BLUE HOST

-http://www.bluehost.com/tell_me_more.html

THINGS TO REMEMBER WHILE TRYING TO FIND A HOSTTTT in a “shared hosting community”

* 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?

WEEK NINE

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

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

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

Greeking Generator - GOOD FOR PLACEHOLDER TEXT!!!!!

• http://www.lipsum.com/

ADOBE VIDEOS- Proto-typing, Creating Clickthroughs, and Exporting your CSS and images.

• http://tv.adobe.com/watch/digital-design/getting-started-07-creating-html-clickthroughs/
• http://tv.adobe.com/watch/digital-design/getting-started-06-exporting-css-and-images/
• http://tv.adobe.com/watch/fireworks-tips-and-tricks/rapid-prototyping/

 

WEEK EIGHT

Class Reading

• http://www.alistapart.com/articles/dao/
• http://www.boxesandarrows.com/view/blasting-the-myth-of
• http://bokardo.com/archives/five-principles-to-design-by/
• http://css-tricks.com/the-difference-between-id-and-class/

Beautiful Web Design Chapter Five

• http://zeldman.com/  -an example of a site with irrelevant images to the text.

Stock Photography Sites

• www.sxc.hu/
• http://morguefile.com/
• www.corbis.com/
• www.jupiterimages.com/
• www.dreamstime.com/
• photos.com/
• shutterstock.com
• apanational.com

 

• sitepoint.com/books/photoshop1/
• www.13strides.com/
• simplebits.com/
• http://www.naw.lib.ms.us/

FONTS

• http://articles.sitepoint.com/article/anatomy-web-fonts
• http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
• http://www.digital-web.com/articles/css_typography/
• http://ilovetypography.com/
• http://www.codestyle.org/css/font-family/Glossary.shtmlXX

 

WEEK 6

WEBSITE NAV ARTICLES

• http://www.adobe.com/devnet/dreamweaver/articles/dwmx_design_tips.html
• http://www.useit.com/alertbox/breadcrumbs.html

Banner SITES

• http://www.aacc.edu/features/bhttp://www.aacc.edu/features/banner_rules2.cf

NAV STYLES

Navigation methods:

• images: buttons or graphics are used to direct users to particular pages of the site;
• rollovers are often created to indicate the image is linked and adds interactivity to a page;
• text links: text links are organized or customized with stylesheets, to be used in place of images;
• accessibility is important, text links are more accessible than graphic links;
• dynamic (or dropdown menus) are implemented to allow for one-click access to interior sub-page content

• DROPDOWN

1. http://www.monster.com/
2. http://www.vdsys.com/

• COLUMN BASED

1. http://www.cnn.com/
2. http://www.baltimoresun.com/

• GRAPHIC NAVS w/ SUBMENU’S

1. http://www.macys.com/
2. http://www.baltimore.org/

• CSS TEXT DRIVEN WITH SUBMENUES

1. http://www.peta.com/

• BREADCRUMB MENU’S

1. http://www.peachpit.com/articles/article.aspx?p=664662

Optimizing/Creation of GIF

• http://www.webreference.com/dev/gifanim/
• http://www.tips-tricks.com/k_gifanimation.asp

WEEK 5

Beautiful Web Design Chapter Three (Texture)

1. Line

• http://www.flipflopflyin.com/

1. Shape

• http://www.sixapart.com/
• http://www.w3.org/TR/css3-backround/#the-border-radius
• Part TWO http://www.alistapart.com/customcorners2/
• Part ONE http://www.alistapart.com/articles/slidingdoors/ & http://www.alistapart.com/articles/slidingdoors2/
• http://www.html.it/articoli/nitycube/
• http://www.tools.sitepoint.com/spanky/
• http://www.fishmarketing.net/

1. Volume & Depth

• http://www.alistapart.com/articles/cssdrop2/
• http://www.1976design.com/blog/archive/2003/11/14/shadows/
• http://www.nubyonrails.com/

1. Pattern

• http://www.howtocreate.co.uk/fixedBackround.html

1. Building Texture

• http://www.winamp.com/skins/whatis/php
• http://www.tatteredfly.com/

1. Application: Grouting and Setting

• http://www.sitepoint.com/books/photoshop1/

Vincent Flaunders Talking about the Different Aspects of SHITTY Websites

• http://www.webpagesthatsuck.com/
• http://www.webpagesthatsuck.com/videos.html (Has videos on terrible WP’s and what makes them terrible)
• http://www.vincentflanders.com/videos/gnn.html (a video on terrible navigation)
• http://www.webpagesthatsuck.com/mysterymeatnavigation.html (Talks about MMN and what it is)
• http://www.webpagesthatsuck.com/worst-web-sites-of-2008-navigation.html
• http://www.webpagesthatsuck.com/2009-worst-contenders-jan-march.html

ADOBE VIDEOS

• http://tv.adobe.com/watch/learn-dreamweaver-cs4/styling-text-in-the-css-property-inspector  (Styling with CSS)

LETS TALK WD

KNKOSMIDES.COM

Home page

1. Portfolio (Possibly make portfolio open up and have different pages inside including things such as a page for photography, a page package design, poster design, branding, and etc. Ask Jen about this. I like the idea but not quite sure whether I have enough work to display for the various pages.)

• Photography
• Package Design
• Poster Design
• Branding
• Web Design

1. Sketchbook
2. Blog (Randomness…Hopefully come up with a better title the BLOG. ALSO ask Jen whether we can attach our wordpress made blog.)
3. About (Some things about Me I guess including education)
4. Contact Info (Facebook, email)

Future pages might include Experience & Skills, References, Resume OR Education.

Site Design that I ENJOY!

• http://www.worktodate.com/
• http://www.lizacorbett.com/
• http://www.lizacorbett.com/

WEEK 4

IAB

-http://www.iab.net/about_the_iab

Color Theory

• https://angel.aacc.edu/AngelUploads/Content/USER-jmschuster/CAT274/module04/screens-color.html
• http://www.colormatters.com/symbolism.html
• http://www.colorstrology.com/
• http://www.mariaclaudiacortes.com/#
• http://kuler.adobe.com/

Links from Beautiful Web Design

• http://sitepoint.com/article/color-for-coders/
• http://haveamint.com/
• http://www.blueflavor.com/
• http://www.superfluousbanter.org/
• http://www.subtraction.com
• http://www.blinksale.com (a website for making invoices and doing other business things)
• http://www.robgoodlatte.com/ (a website with ideas on design)
• http://www.wellstyled.com/tools/colorscheme2/index-en.html/
• http://www.snook.ca/technicalcolour_c0ntrast/colour.html

Jakob Nielsen is a serious writer, and speaker, who has been researching Usability issues since the web went public way back when.

• Top Ten mistakes in WEB DESIGN

1. http://www.useit.com/alertbox/9605.html

• Guidelines for visualizing links

1. http://www.useit.com/alertbox/20040510.html

STOCK PHOTOGRAPHY WEBSITES

• http://www.gettyimages.com
• http://www.comstock.com
• http://www.fotosearch.com
• http://pro.corbis.com
• http://www.shutterstock.com/
• http://www.istockphoto.com/

WEEK THREE

DREAMWEVER

1. Styling Text-  http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-05-styling-text/
2. Adding Text and Images- http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-04-adding-text-and-images

FIREWORKS

1. Managing Workspaces- http://tv.adobe.com/watch/learn-fireworks-cs4/managing-design-suite-workspaces/
2. Understanding Fireworks- http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-01-understanding-fireworks/
3. Fireworks Interface- http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/
4. Importing Files into Fireworks- http://tv.adobe.com/watch/learn-fireworks-cs4/importing-files-into-fireworks/

BEAUTIFUL WEB DESIGN

1. First Chapter For Free- https://angel.aacc.edu/AngelUploads/Content/USER-jmschuster/CAT274/module03/design1-sample.pdf