Session 1: After a brief presentation of the Project Portal assignments we will discuss the requirements for the Technical Exercise #1 Image Optimization. If time permits I will also demonstrate the techniques required to complete the exercise.
Technical Exercise 1: Image Optimization
Due: Session 1, Week 4 (3 points)
Download the Exercise Assets
Use Photoshop to optimize the provided raw images as JPEGs and display them within a single web document. Next, in the same document display some type converted to graphics using the transparent GIF format and the transparent PNG-24 format. Use a background color other than white and a typeface with plenty of curves to illustrate the advantage of alpha over index transparencies. Finally, experiment with an image of your own to create a 2 by 2 grid of 4 images that are manipulated by experimenting with the GIF color table in the “Save for Web” dialog box.
1. Create a single web page that documents the tasks listed below
2. Optimize the provided raw images into an appropriate web format
3. Display any type converted to graphics using both GIF and PNG-24 formats
4. Produce a grid of your own images manipulated via the GIF color table
5. Add the files and folders to your environment and upload to your student webspace
6. Upload your exercise and test your portal before class starts on session 1 week 4.
1 point awarded for effectively optimizing the raw images into an appropriate web format
1 point awarded for using type converted to graphics to illustrate the advantage of alpha transparency
1 point awarded for creating a grid of experimental images by manipulating the GIF color table
Session 2: Today we will begin discussing the “World” CSS Positioning Project. This project is designed to allow students to focus on color, design, layout, type treatments, syntax, markup, and styles while learning about a country other than the one we live in.
Assignment 3: “World” CSS Position Project
Due: Session 2, Week 7 (25 points)
Design a web application featuring six content areas that are topics about the country you have selected. Create a consistent and appropriate design scheme that incorporates images, navigation and type treatments using HTML and CSS. Pay special attention to type, colors, layout, styles and positioning. In addition to developing your skills as a front-end web designer, this project will encourage students to discover new information another country.
1. Organize your content into six content areas or pages
2. Create a consistent design scheme and apply it to your template
3. Include universal navigation on each page to get to every content area
4. Incorporate optimized images appropriate for the content into each page
5. Format type, images, and the positioning of the content with CSS
6. Upload to the student webspace and test the link in your project portal
7. Due before class on session 2 of week 7 for presentations
6 points will be awarded for designing an effective layout for the content and interface items
5 points will be awarded for a consistent and distinct universal navigation system
4 points will be awarded for placement, optimization, preparation, and choice of images
5 points will be awarded for carefully selected typefaces and type treatment
5 points will be awarded for the clarity of your presentation
Speaking in Styles – Chapters 7 and 8 (pages 176 – 223)