CTN 161 Web Production 2

Your Portfolio must include:

Posted in Portfolio, Week 5 on October 30th, 2009 by admin – Be the first to comment

Main page (attention getting)
Biography Type Page/Hire Me (something that talks about you)
Experimental Page (blog, social media, Links, tutorials)
Portfolio content category 1 (graphics, photography, music, knitting)*
Portfolio content category 2 (html, css)*
Contact me (form)

* You must least have two portfolio content categories, but you may have more…. depending on your design.

Exercise 13/ Assignment 3: Portfolio Project Plan

Posted in Assignments, Exercises, Portfolio, Week 5 on October 30th, 2009 by admin – 2 Comments

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

Posted in Exercises, Week 5 on October 30th, 2009 by admin – 2 Comments

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/

Finding Solutions in Web Design

Posted in Week 5 on October 30th, 2009 by admin – Be the first to comment

Finding Solutions in Web Design ( pdf )

Common HTML and CSS Errors

Misspellings
Wrong file names
Wrong extension
Missed punctuation
Failure to close tags

Exercise 11: Styling Images with CSS

Posted in Exercises, Week 5 on October 28th, 2009 by admin – 4 Comments

Exercise 11 | PDF

Select 5 images and save them for use in an HTML document.
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

CSS Background Images

Posted in Week 5 on October 28th, 2009 by admin – Be the first to comment

Creating Background Images with CSS | PDF

Create a basic HTML doc with some text
Using your favorite search engine, find several images to use as background
During the lecture, watch the example and then try on your own.

CREATING PROFESSIONAL QUALITY WEB GRAPHICS… (FOR MERE MORTALS)

Posted in Week 5 on October 28th, 2009 by admin – Be the first to comment

Not a Photoshop expert? Not a problem! Creating quality graphics is not as hard as you think.

The saying goes, “a picture is worth a thousand words” and on the web this quote is a reality. Every picture you use adds to the size of the file and hence the download time for your users’ experience. Add to many large images and you may lose visitors who don’t want to wait for your site to load.

Images are a very powerful tool for conveying a message and because this is the main reason for creating a site, using the correct image can make or break your message.

5 Things to know to master any graphics program

Posted in Week 5 on October 28th, 2009 by admin – Be the first to comment

There are literally hundreds of graphics programs out there… With Adobe Photoshop as the undisputed pack leader. If you plan to do any type of web design, learning Photoshop is a definite to do. However, one can’t always guarantee that they will have access to Photoshop, so learning basic skills you can apply to any graphics program is your second to do.