Session 1: Now that your designs have been approved it is time to continue working on the template for the Cycling Project. Today’s demonstrations will be based on getting the markup started and some of the rudimentary styles in place.
Cycling Project Milestone #2
Due: Week 6, Session 1 (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. We will also discuss the requirements for Technical Exercise 3: Styles. In-class demos that apply to the Cycling 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, zip the folder, and upload to D2L
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
http://cssmenumaker.com/blog/6-exceptional-menu-bar-navigation-designs
This site has six different designs for menu bar navigations. You can click the links for each design and download the html and css documents to see how they created it.
http://webdesign.about.com/od/advancedcss/a/aa010107.htm
This site goes into a little more depth in describing the float property. It describes what items can be floated, how to float, and how items that are floated will behave.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
We talked about keeping the navigation at the top of the window, and this blog post talks about keeping the footer at the bottom of the page using absolute and relative positioning. This can be useful for pages with a lot of content if keeping the footer accessible is important.
In the previous week and this week we have discussed side bars, and column height. So I searched for some useful links on how to create sidebars. The first site that I have found and been currently revisiting for useful tips is: CSS Tricks Sidebars
Another website I have been having fun with in the past week is: Waypoint Arts Sidebars This website has been useful for applying more tricks to sidebars.
I have to return again to: CSS Tricks: Content Folding I am finding it to be such a useful website for information regarding CSS architecture. In this page they describe Content Folding in the columns and information you post on your website.
http://www.duoconsulting.com/blog/best-practices-modern-website-design-navigation
This article does a good summary of the best navigation design practices such as limiting the amount of top menu items and even touches on mobile menus. It also suggests trying drop-down menus to hold more links and information.
http://designmodo.com/transparency-website-design/
With the discussion of transparency and how to implement it, I found this article to have a bunch of inspiring examples of using varying levels of opacity. Each webpage varies in difficulty, but it shows the amount of diversity that transparent items can add to a website.
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
This tutorial goes over how to make a drop down menu using html and css. I found that this would be incredibly useful for simplified navigation sidebars.
http://www.brainjar.com/css/positioning/
A brief overview on how CSS styling affects how your content looks on the page (particularly floats).
http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
A look at negative margins and tips for how to use them effectively (if your design calls for them at all).
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
Provides details on 30 (mostly) common CSS selectors. What they do, what they look like in code, and how to use them. The first few have been covered in class but some of the later entries might be useful as designs get more complex.