Modularity
Assets and Code
Content and UI elements can all be created with code. Code is simply the instructions that specify or define how something looks or behaves. Content assets such as images, animation, applets and video can also be created externally. For example, image assets are commonly created in Photoshop. Assets are inserted or embedded into a page using code.
Assignments
Exercise 1: Web Page Elements
Create the Asset
Scan thumb prints or other personal objects
Live trace image in Illustrator to create vector image
Create a .gif with a coloured background - make the image a square in units of 100px (i.e. 400x400)
Code the Page
Create an html file and assign attributes (hex value for background)
Embed .gif into a web page template using an image tag
Advanced: Basic state changes
Make a 100x100 pixel thumbnail representing your image asset.
Create an alternate version to use as a rollover state - the version of the image when the cursor hovers over it.
Concepts & Skills
Content conceptualization and asset creation
Image processing - scanning, converting bitmap to vector, formatting for web (.gif and/or .jpg), web colour (hex values)
Web production workflow
Page structure, properties and basic html tags
Folder structures, labeling and paths