Session 1: Now that your designs have been approved it is time to continue working on the template for the World Project. Today’s demonstrations will be based on getting the markup started and some of the rudimentary styles in place.
World Project Milestone #2
Due: Week 5, Session 2 (before class starts)
1. Be prepared to show your work-in-progress on the template
2. Your markup must include areas for a header, navigation, aside, content, and footer
3. Have some rudimentary styles in place to illustrate how your design is developing
Session 2: Today I will be looking at your Markup Exercises and Milestone #2. We will also discuss the requirements for Technical Exercise 3: Styles. In-class demos that apply to the World project are also scheduled for today.
Relevant Resources:
Fluid Width Equal Height Columns
Best Practices for Modern Web Navigation
Technical Exercise 3: Styles
Due: Session 2, Week 6 (4 points)
Description:
Style the markup on the single page that you created for the Markup Exercise. Use CSS to adjust the layout, float the aside, float content images, place and adjust background images, choose and format type, build a navigation system, specify hover behaviors, and create a color scheme.
Requirements:
1. Use CSS to style your markup exercise
2. Float the aside and content areas to the left or right of each other
3. Design a navigation system with hover behaviors
4. Choose a distinct typeface and use the typesetting properties
5. Create an attractive color scheme
6. Add the files and folders to your environment and upload to your student webspace
7. Test that your exercise loads from your portal before class on session 2, week 6
Points Breakdown:
2 points will be awarded for designing an effective navigation system
1 point will be awarded for producing an inviting layout and color scheme
1 point will be awarded for capably handling the type setting
Explains the differences between markups and styles and how to accomplish the best website by working the two together. It also highlights the why markups and styles should be separate html and css files.
Breaking down the tags and other marks of a markup this website. Shows different heading markups, body markups, audiovisual and interactive content markups. It also helped me with asides.
Users want to be able to navigate their way throughout a website without any problems. This makes web design navigation is extremely important to the success of a website. Here are a few good websites that will help us understand how to make out World Projects user friendly.
http://www.smashingmagazine.com/web-design-navigation-showcases/
http://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
http://thrivehive.com/navigation-menu-best-practices
http://www.pinscreative.com/articles/website_navigation.htm
The first article contains 10 ideas related to web design layouts, and features that have proven to be beneficial in a design:
http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
This CSS Beginner tutorial provides great insight on how to use CSS style sheets in html:
http://www.htmldog.com/guides/css/beginner/
For those who haven’t taken color theory and want some knowledge on how to build the best color scheme for a web design layout:
http://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers–webdesign-1437
Here is some code for layout templates to play with for the world project.
http://foundation.zurb.com/templates.html
Here are some more examples for page layouts
http://www.html.am/templates/
Here are some good examples of what to put in your footer
http://designshack.net/articles/layouts/15-tips-for-creating-a-great-website-footer/