CTN 161 Web Production 2

Please read the lecture below and create your own learning plan as detailed in Exercise 19.  This exercise is due on 12/11.

Lecture [ pdf ]

Exercise 19 [ pdf ]

Exercise 18: Creating Optional StyleSheets

We have explored two different reasons to create alternative stylesheets. Choose one of the following below:

• Create a print stylesheet for the page your created for Exercise 3 ( http://enyasi.com/ctn161/?p=44 )
• Create a mobile stylesheet for  for the page your created for Exercise 3 ( http://enyasi.com/ctn161/?p=44 )
• Create a print stylesheet for your portfolio site

Exercise 17(pdf)

When it comes to web design, footers are one of the most overlooked parts of a web site.  A site user will often not bother to scroll, but if they can’t find something a footer is one of the first places they go.  Don’t waste the opportunity or the space, create a useful footer for your site.

Example 1 |  http://socialsnack.com/

Example 2 |  http://www.starbucks.com/

Example 3 | http://seattletimes.nwsource.com/html/home/index.html

Example 4 |  http://www.cnet.com/

Resources:

Footers in Modern Web Design
http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/

CSS Based Footers: Modern Solutions
http://www.smashingmagazine.com/2007/01/09/css-based-footers-modern-solutions/

Informative and Useful Footers in Web Design
http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-web-design/

Is your navigation killing your site traffic, confusing your user and sabotaging your goals?  Could your navigation be more effective at guiding people through your site?

Exercise 16

Exercise 15 ( pdf )

Dreamweaver CS4

http://www.adobe.com/products/dreamweaver/

Coffee Cup

http://www.coffeecup.com/html-editor/

BBEdit

http://barebones.com/

Crimson Editor

http://www.crimsoneditor.com/

Microsoft Expressions

http://www.microsoft.com/expression/

Not sure what to choose, check out these articles for more suggestions:

25 WYSIWYG Editors Reviewed
http://www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed/

35 Useful Source Editors Reviewed
http://www.smashingmagazine.com/2008/05/07/35-useful-source-code-editors-reviewed/

Exercise 14 ( pdf )

Although there are many ways to organize and design forms, by far CSS is your most powerful tool. A well designed form can gain trust, drive traffic and increase sales. A poorly designed form can actually drive people away.

Exercise 13: Portfolio Project Plan

A Project Plan is essentially your roadmap for completing your project. In a working environment the project plan can act as a central communication document between you and the client. It tells both parties what is expected both in deliverables and timelines.

You will be creating a Project Plan for your portfolio.  The more detailed the easier it will be to build.  Your project plan should include the following.

• Project overview (What and why)
• Schedule (schedule how many hours, what are the milestones)
• Flow chart(detailing how pages and links will work)
• Site Sketches (in PowerPoint, hand drawn, or in Photoshop) should include color palette

Exercise 12: Expand Your Comfort Zone ( pdf )

Resources

W3c Tips and Tricks
http://www.w3.org/Style/Examples/007/

53 CSS Techniques You Couldn’t Live Without
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

Listomatic
http://css.maxdesign.com.au/listamatic/

Smashing Magazine CSS Based Navigation
http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/

Simple CSS Rollover
http://css.maxdesign.com.au/listutorial/roll_master.htm

Curves in CSS
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Exercise 11 |  PDF

1. Select 5 images and save them for use in an HTML document.
2. Using CSS techniques change the style of these images to fit 5 of the 10 scenarios below.  You will be using CSS, none of the images should be physically altered in any way.

• A new image style for the National Geographic Web Site
• Style for the cover image for a Children’s Birthday Site
• Style for the Biography photos on an insurance site
• A title image with legible text written over it
• Style for images on a professional photographer’s site.
• An image with a captions
• Style for Food photography images on the Martha Stewart Site
• A style for images on your soon to be created portfolio
• A style that changes when you mouseover it
• A style for a newspaper site

Resources:

Using CSS for Image Borders
http://css-tricks.com/using-css-for-image-borders/

Adding Watermarks to Images
http://www.tutorial5.com/content/view/129/52/

CSS Image Transparency and Opacity
http://www.w3schools.com/css/css_image_transparency.asp

Cool CSS Image Border Style
http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/

Highlight Image on Mouseover
http://www.cssdrive.com/index.php/examples/exampleitem/highlight_image_border/

Image Captions on the Web
http://www.cs.tut.fi/~jkorpela/www/captions.html

Finding creative ways to use images can be an asset when budgets and usable images are in short supply.

• Lecture ( pdf )
• Exercise 10 ( pdf )