Topic_4

= Learning Topic 4: = = Building a Traditional Website: The 4 Cs = = Containers, Content, Cascading Style Sheets (CSS), and Color =

Background/Rationale
This Learning Topic is all about getting content on the Internet and best-practice methods of message delivery. There is more than one way to create 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; there are several user-friendly options to bring information to a website visitor. Understanding basic HTML and XHTML behind the WYSIWYG programs—both computer and web based—and understanding the philosophy behind design choices for both text and color, are foundational understandings behind strong website communication. Exploration of various methods and tools will help you understand when a particular design approach is appropriate.

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 (@http://kompozer.net/) 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 web production program that installs to the desktop and offers beautifully designed sites.
 * 1. 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 websites and allow the focus to be on content rather than production.
 * 2. Another type of website creation - webware**

An important question to ask when directing a student web assignment is whether your goal is website 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.
 * 3. Content vs. Programming**

There are also website "content management" products, such as SchoolCenter, sold to school districts and educational clients. These allow nearly everyone to create a basic web presence, help manage documents, and create a consistent professional look for a school district. While such sites make educational content management relatively easy for the layperson, they do have drawbacks. For example, embedding an Adobe Flash video into a page on such a tool can be difficult. After some use, these sites may feel restrictive, but they may be your only choice in a school district. Having your own site hosted independently or on a district server for classroom use may be a great benefit to your teaching.
 * 4. Content management website products**

Finally, course management systems like Blackboard are yet another web presence. These are very prescribed website 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 (hypertext markup language), the basic code behind website programming, is a good thing.
 * 5. Course management website products**

Clean uses of text, style sheets and cascading style sheets (CSS), and 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 Learning Topic and work on over the next three Learning Topics. In addition to the layout covered in the previous Learning Topics, 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.
 * 6. Basic programming: Typography, color, and CSS**

Learner Outcomes:
At the end of this Learning Topic, you will be able to:
 * Compare the different website creation options available, and identify when each might be used.
 * Understand basic HTML and XHTML coding that supports the website back-end.
 * Use basic HTML and XHTML coding to create a simple web page.
 * Explore the theory of typography for screen reading and overall site design.
 * Understand topography related to the use of Cascading Style Sheets (CSS) to achieve strong communication within the website constraints.
 * Apply the knowledge of typography and CSS to evaluate websites.
 * Develop a personal philosophy for color uses based on site purpose and audience, and gain resources for making these decisions.
 * Demonstrate understanding of course content by creating a final project website for your classroom (right tool, navigation, layout and design, typography, and color).

Readings and Research:
Read all of the following:
 * A. Website design philosophies**
 * First Impressions Count in Website Design - visual appeal, beauty and aesthetics, halo effect, cognitive perception, webpage judgments of credibility. (2006, January 17). Website Optimization: Speed Up Your Site website optimization web speed optimize website performance company. Retrieved November 5, 2009, from @http://www.websiteoptimization.com/speed/tweak/blink/
 * 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 @http://www.smashingmagazine.com/2009/04/06/design-to-sell-12-tips-to-help-your-website-convert/
 * 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 @http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design


 * B. Typography resources**
 * 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 @http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
 * Gourgouri, V. (2008, July 10). Websites with Excellent CSS Typography - CSSAddict. CSSAddict - Web Design Concepts. Retrieved November 9, 2009, from @http://www.cssaddict.com/blog/websites-with-excellent-css-typography-design/
 * 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 @http://www.3point7designs.com/blog/2008/06/10-examples-of-beautiful-css-typography-and-how-they-did-it/
 * 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 @http://spyrestudios.com/20-examples-of-dark-minimalist-website-designs-with-great-typography/
 * Yehia, N. (2009, January 27). 50 Useful Design Tools For Beautiful Web Typography - Smashing Magazine. Smashing Magazine. Retrieved November 9, 2009, from @http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
 * CSS Tutorial. (n.d.). W3Schools Online Web Tutorials. Retrieved November 9, 2009, from @http://www.w3schools.com/css/


 * C. Color scheme choices and color theory**
 * Garrison, C. (2009, October 1). 3 Ways To Find The Best Website Color Scheme. Master The Art Of Tableless Web Design - Five Finger Coding. Retrieved November 9, 2009, from @http://www.fivefingercoding.com/web-design/how-to-find-the-best-website-color-scheme
 * Kuler. (n.d.). Kuler. Retrieved November 11, 2009, from http://kuler.adobe.com
 * 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 @http://www.sibagraphics.com/colour.php
 * ColorJack: Sphere (Color Theory Visualizer). (n.d.). Color Theory @ ColorJack. Retrieved November 9, 2009, from @http://www.colorjack.com/sphere/
 * 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 @http://www.colorschemer.com/schemes/

4.1: HTML Elements - Basic Website Tool Exploration
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. Other sources that might help:
 * Step 1:** Try out your skills by creating a small web page file. Work through the tutorials for HTML and XHTML from the following W3C – World Wide Web Consortium websites:
 * HTML brief tutorial - []
 * XHTML brief tutorial []
 * EchoEcho.com: @http://www.echoecho.com/html.htm
 * HTML Code Tutorial: @http://www.htmlcodetutorial.com/
 * HTML Source: @http://www.yourhtmlsource.com/fullindex/
 * [[file:HTML_QuickReference.docx]]


 * Step 2**: Create a very basic hand-coded HTML page using a text document that incorporates the following elements:
 * Colored background
 * Text styles – bold, italic, underline, and color
 * Link insertion
 * Image insertion
 * Overall page look


 * Step 3:** Post your chart to the Topic_4_Student_Page.


 * Assessment**

4.2: Discussion - Website Application Comparison

 * Step 1:** Explore both a desktop application, like Dreamweaver, and a webware site creator, like Google Sites.


 * Step 2:** Discuss the following with your colleagues.
 * How does knowing basic code and being able to insert or tweak code extend the designer’s 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.
 * 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 course.

Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
 * Assessment**

4.3: Website Elements: Using Color, Typography, and Cascading Style Sheets (CSS)
Explore the philosophy behind website color choices, CSS, and typography in your reading and web sources. Apply your new knowledge by finding both low-quality examples and high-quality examples of color use, typography use, and CSS in different websites.

Step 1: Create a graphic organizer with a group of your fellow students (or individually as directed by your facilitator) to compare color and typography between exemplary and nonexemplary websites. Award-winning websites can be found at the Webby site (@http://www.webbyawards.com/), and subpar ones can found at sites like website http://www.webpagesthatsuck.com


 * Step 2:** 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 the four best and four worst sites of your choice.


 * Step 3:** Post your chart to the Topic_4_Student_Page.


 * Assessment**

4.4: Discussion – Design Philosophies: Best and Worst Design Philosophies
Look at the different graphic organizers posted on Topic_4_Student_Page.
 * What were the most important concepts you found while comparing these sites?
 * What takeaway understanding have you gained that will guide the development of your own future website creation?

Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
 * Assessment**

4.5: Classroom Website
Begin Final Project - (due Learning Topic 8) As a final project for this course, you will develop a classroom website that incorporates all elements discussed during this course. Begin this week by choosing a website creation tool. In addition to Dreamweaver, KompoZer, and iWeb, you also can choose a webware application such as:
 * Weebly - @http://www.weebly.com/
 * Google Sites - http://sites.google.com
 * School Rack - @http://www.schoolrack.com/register/teacher/
 * Viviti - @http://viviti.com/
 * Webnode - @http://www.webnode.com/
 * Blinkweb - @http://business.blinkweb.com/
 * Doodlekit - @http://www.doodlekit.com/home
 * Yola - @http://www.yola.com/
 * Wix - @http://www.wix.com/
 * Webs - @http://www.webs.com/


 * Looking Ahead** – 4.5 Classroom Website will help you begin the design of your education-based website for the classroom due in Learning Topic 8. Choose one website format, desktop application, or webware application to use as you begin to build a final project classroom website using the concepts learned in this course, and build on the concepts you learn in each Learning Topic.

Future Learning Topics will discuss images and usability. These will also be incorporated into your classroom website.


 * Assessment - This project will be assessed after Class Session 8.**

Homework

 * **4.5 Begin Final Project – Classroom Website** Your website URL is to be submitted to Topic_8_Student_Page. // (Due the last class – Class Session8.) //
 * Be familiar with the **Required Readings for Topic 5** by the start of Class Session5.