Week+4


 * Learning Topic 4: Containers, Content, Cascading Style Sheet (CSS) and Color **

This Learning Topic is all about getting your content onto the Internet and methods of getting your message to your audience. There are many different approaches to developing a web presence. You will learn about the different website creation tools and when to use each. With today's tools, it is no longer necessary to learn coding to produce a great looking site.
 * Background/Rationale: **

Professional and higher end "amateur" sites can be created by an application called Dreamweaver. This is a WYSIWYG (What You See Is What You Get) program that allows very advanced code insertion as well as design programming. If you want to pursue web design in a serious way or teach at a high school web development level, this is the best program to use. Kompozer [] is an open-source (free) tool that is very similar to Dreamweaver and also installs to your hard drive. iWeb from Apple is an easier "desktop" installed web production program that offers beautifully designed sites.
 * Website creation software **

There are also "webware" (software that works through your browser window with much of the functionality of a desktop installed software) web creation programs like Weebly, Webs, Google Sites and several others that are easier to manage and give great results. These offer a bit less functionality and choice options but serve well for basic web sites and allow the focus to be on content rather than production.
 * Another type of web site creation - webware **

 An important question to ask when directing a student web assignment is whether your goal is web site production (technical website skills) or presentation of learning on a website. For instance, don't let a project become bogged down with learning web coding skills if your focus is presenting knowledge of World War II.
 * Content vs Programming **

There are also web site "content management" systems products sold to school districts like "School Center". These allow nearly everyone to create a basic web presence, help manage documents and create a consistent professional look for a school district. Wanting to embed an Adobe Flash video into a page on such a tool can be a nightmare though. After some use, these sites feel restrictive at best but they may be your only choice in a school district. Having your own site hosted off site or on a district server for your classroom use is a great benefit to your teaching.
 * Content management website products **

**Course management website products** Finally, course management systems like Blackboard are yet another web presence. These are very prescribed web site containers developed primarily for online coursework. They offer a variety of extra functions like quizzes, attendance, or discussion boards. These course management systems will be covered in more depth in the advanced web development course. The actual pages on course management products are created with the same basic HTML used for all other web program areas. Tweaking the code on any of these programs is a way to add a bit more interactivity and personalization so knowing a bit of HTML (hyper text mark-up language), the basic code behind a website programming, is a good thing.

Understanding basic HTML and XHTML behind the WYSIWYG programs - both computer and web-based and the philosophy behind design choices for both text and color are critical, base understandings behind strong website communication.
 * Basic programming **

Clean uses of text, style sheets and Cascading Style Sheet (CSS), as well as color choices lay a strong base for beginning website design. Each of these elements will be explored and applied to a classroom website that you will begin in this unit and work on over the next three units. In addition to the layout covered in the previous units, typography and color scheme are critical elements to plan for in the creation of a web presence that is communicated well to a specific audience.
 * Typography, color and CSS **

The student will:
 * Learner Outcomes:**
 * Compare the different website creations options available and when each might be used. (Discussion 1)


 * Understand basic HTML and XHTML coding that supports all website back-end. (Project 1) Use basic HTML and XHTML coding to create a simple web page.


 * Explore the theory of typography for screen reading and overall site design. (Project 2)

> >
 * Understand topography related to the use of Cascading Style Sheets (CSS) to achieve strong communication within the website constraints. (Project 2) Apply the knowledge of typography and CSS to evaluate websites.
 * Explore and develop a personal philosophy for color uses based on site purpose and audience and gain resources for making these decisions. (Discussion 2)


 * Demonstrate a working knowledge of CSS by completing a stylesheet for the csszengarden page (Project 3)

** Readings and Research ** :


 * Web site design philosophies**
 * First Impressions Count in Website Design - visual appeal, beauty and aesthetics, halo effect, cognitive perception, webpage judgments of credibility. (2006, January 17). //Web Site Optimization: Speed Up Your Site website optimization web speed optimize web site performance company//. Retrieved November 5, 2009, from []
 * Fadeyev, D. (2009, April 6). Design To Sell: 8 Useful Tips To Help Your Website Convert - Smashing Magazine. //Smashing Magazine//. Retrieved November 5, 2009, from []
 * Smith, M. (2009, October 25). 20 Do’s and Don’ts of Effective Web Design | Web Design Ledger. //Web Design Ledger | A Publication for Web Designers//. Retrieved November 11, 2009, from []

>
 * Typography resources**
 * CSS Tutorial. (n.d.). //W3Schools Online Web Tutorials//. Retrieved November 9, 2009, from http://www.w3schools.com/css/
 * Boardley, J. (2007, September 19). 15 Excellent Examples of Web Typography. Part 1 | i love typography, the typography and fonts blog. //fonts, typefaces and all things typographical — I love Typography (ILT)//. Retrieved November 9, 2009, from []
 * Phillips, J. (2009, April 1). 20 Examples Of Dark & Minimalist Website Designs With Great Typography | Spyre Studios. //Spyre Studios - Web-Design And Inspiration Blog//. Retrieved November 9, 2009, from []
 * Johnson, R. (2008, June 2). 10 Examples of Beautiful CSS Typography and how they did it… » - Web Design Marketing Podcast & Blog. //Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive//. Retrieved November 9, 2009, from []
 * Gourgouri, V. (2008, July 10). Websites with Excellent CSS Typography - CSSAddict. //CSSAddict - Web Design Concepts//. Retrieved November 9, 2009, from []
 * Yehia, N. (2009, January 27). 50 Useful Design Tools For Beautiful Web Typography - Smashing Magazine. //Smashing Magazine//. Retrieved November 9, 2009, from []


 * Color scheme choices and color theory **
 * ColorJack: Sphere (Color Theory Visualizer). (n.d.). //Color Theory @ ColorJack//. Retrieved November 9, 2009, from []
 * kuler. (n.d.). //kuler//. Retrieved November 11, 2009, from [|http://kuler.adobe.com]
 * Color Combinations | Color Schemes | Color Palettes. (n.d.). //Color Combinations | Color Schemes | Color Palettes//. Retrieved November 11, 2009, from [|http://www.colorcombos.com/> >]
 * ColorSchemer Gallery | Website-ready color schemes for ColorSchemer. //ColorSchemer | Instant Color Schemes//. Retrieved November 11, 2009, from []
 * Posadas, S. (2009, March 29). The Meaning of Colour in Web Design. //Sibagraphics : Noosa Web Design and Graphics, Sunshine Coast//. Retrieved November 11, 2009, from []


 * Learning Activities **

From your reading about website creation you should have a basic understanding of how HTML code works. This knowledge will help you understand how web creation software works. Try out your skills by creating a small web page file. Work through the tutorials for HTML and XHTML from the following WC3 websites: o HTML brief tutorial - [] o XHTML brief tutorial [] Create a very basic hand-coded HTML page using a text document.
 * Project 1- Basic web site tool exploration**

Assessment Criteria Exemplary: Student adds color theory information to the skills listed in the chart below to design an aesthetically pleasing web page Proficient: Student produces a basic hand coded website that contains the following based on the WC3 tutorial information:
 * Assessment - Project 1 **
 * **HTML element** || **1 absent ••••••••••••••••••••• 10 advanced** ||
 * Colored background ||  ||
 * Text styles – bold, italic, underline, and color ||  ||
 * Link insertion ||  ||
 * Image insertion ||  ||
 * Overall page look ||  ||

After exploring both a desktop application like Dreamweaver, and a webware site creator like Google sites discuss the following with your classmates: -How does knowing basic code and being able to insert or tweak code extend the designers control in a site? -Evaluate each tool type on the tool’s ability to allow users to make choices in text, color, layout and design. -Support why you would recommend each tool for both ease of use and its ability to allow code tweaking – hand code insertion.
 * Discussion 1 - Web site application comparison**

-Recommend and support your reasoning for which tool you would recommend for 1) a primary school student website on insects and, 2) a high school computer science class.

Regis general discussion rubric: Student actively and thoughtfully participated in the discussion – sharing his/her learning and challenges learning about visual literacy. Student was respectful of classmates’ points of view. Exemplary: Students assist each other to learn and problem solve in their basic HTML learning.
 * Assessments - Discussion 1 **

Explore the philosophy behind website color choices, CSS and Typography in your reading and web sources. Apply your new knowledge by finding both non-examples and high quality examples of color use, typography use and CSS in different websites. · Create a graphic organizer with your group (or individually depending on class size, or guided study) to compare color and typography between exemplary and non-exemplary websites. Award winning websites can be found at the Webby award winning web site [] and non-exemplary websites can found at sites like [|http://www.webpagesthatsuck.com]
 * Project 2 Using Color, Typography and Cascading Style Sheets (CSS) **

· Choose most recent worst case and best-case award winners and create a chart that compares the elements of color and typography as well as general audience appeal and communication value for four best and four worst sites of your choice.

**Assessment - Project 2** Proficient: Student works with their group to produce a graphic organizer that compares good and bad uses of color choices, typography, audience appeal, and communication values.

Share your project 2 graphic organizer with the class. Discuss the most important concepts you found while comparing these sites. What take-away understanding have you gained that will guide the development of your own future web site creation?
 * Discussion 2 - Best and Worst design philosophies **

Regis general discussion rubric: Student actively and thoughtfully participated in the discussion – sharing his/her understanding of the concepts of best practice web design. Student was respectful of classmates’ points of view. Students create a checklist for class
 * Assessment - Discussion 2 **

Based on your knowledge of CSS, complete a style sheet for the csszengarden site and post your finished style.css document on the Week 4 Projects page. Use the sample files posted on the Week 4 Projects page.
 * Project 3 Applying Understanding of Cascading Style Sheets (CSS) **

**Assessment - Project 3 ** Assessment Criteria Exemplary: Student adds color theory information to the skills listed in the chart below to design an aesthetically pleasing web page Proficient: Student produces a basic website that contains basic styling:
 * **HTML element** || **1 absent ••••••••••••••••••••• 10 advanced** ||
 * Background colors ||  ||
 * Text styles ||  ||
 * Link styles ||  ||
 * Section Layout ||  ||
 * Overall page look ||  ||