You will create another folder that will be titled “Web Design Final”. This folder will be located in your original root folder. In this folder you will include your index document used to create this site, as well as any photos and artwork.

POINTS: Each item is worth 20 points!

Very Important:

You must email all of the contents in your “Web Design Final” folder to me at jedge@scappoose.k12.or.us by December 3rd.

The following items are mandatory items to include on your final web site:

1. Home page, 20 pts
2. Two additional pages with like minded content, 20 pts
3. Title, 20 pts
4. Head, 20 pts
5. One paragraph of info about your site, 20 pts
6. Background Color, 20 pts
7. Contact Info (linked to an actual email address), 20 pts
8. Jump-to link (jumps to middle or bottom of page), 20 pts
9. Links (3) additional to contact, to other (actual) websites, 20 pts
10. Three different types of fonts, 20 pts
11. Three different font sizes, 20 pts
12. Three different font colors, 20 pts
13. Something bold, 20 pts
14. Two photos (at least), 20 pts

Pick two (2) items to include from the list below to include on your final site! 20 pts EACH

1. Something Blinking
2. Scroll Bar
3. Scrolling text
4. Data Table
5. Drop Down Menu
6. Banner (across top or side)

A better tutorial…

file:///C:/Documents%20and%20Settings/jedge/Mrs.%20Edge/Web%20Design/WD1/dreamweaver_tutorial/section1.html

WYSIWYG (pronounced /ˈwɪziˌwɪg/^[1]), is an acronym for What You See Is What You Get. The term is used in computing to describe a system in which content displayed during editing appears very similar to the final output,^[2] which might be a printed document, web page, slide presentation or even the lighting for a theatrical event.

WYSIWYG implies a user interface that allows the user to view something very similar to the end result while the document is being created. In general WYSIWYG implies the ability to directly manipulate the layout of a document without having to type or remember names of layout commands.

Dreamweaver is a WYSIWYG… Find Dreamweaver on your computer (look in the Adobe suite) and take the tutorial. Here’s how:

1. Open Dreamweaver
2. Go to the bottom of the info box that opens
3. Click on Resources. This will open a web page
4. Find ‘Tutorials’ on that page
5. Click on the following link:

Creating your first website (series)

Lesson 2: Layout With Tables

Overview

In the previous lesson, you learned some basics of controlling the layout of a web page using CSS. Prior to CSS, web developers typically used HTML tables to control the layout of a page. This was not what tables were designed for: They were designed specifically for displaying data (as you learned in the earlier lesson on Data Tables). However, web designers soon learned that web content could be inserted into table cells, allowing for the creation of complex layouts with multiple columns and rows. This was used so widely that many, if not most, web pages today still use tables for layout.

However, tables are rapidly becoming obsolete for layout, in favor of CSS. CSS layout has important advantages over table layout. It requires relatively little code, which translates to smaller file sizes and faster downloads. Less code also makes the page easier to update and maintain. Also, pages that use CSS for layout can adjust better to the size of the user’s display; tables don’t wrap, so viewing a table-based layout on a small screen can require lots of horizontal scrolling: Not good.

Also, CSS is more accessible for blind users. Imagine how distracting it would be to navigate on a page where the screen reader keeps announcing which table row and column you’re in. This is irrelevant information, and can be extremely distracting. A CSS-based layout eliminates these distractions.

However, tables for layout haven’t completely gone away. CSS layout can be challenging, and browsers historically have varied in how they interpret CSS, which sometimes means that for more complex layouts, developers have to work very hard to get their designs to look good across all browsers and operating systems. This situation is improving as new browsers are released with better support for CSS positioning.

Since both CSS and tables are still widely used, this courses teaches both. In the current lesson, we will focus our attention on table layout. This exercise is for practice only, and will not be part of your portfolio.

Learner Outcomes

At the completion of this exercise:

• you will be able to layout content within a table.

Activities

1. In this lesson you will perform the same exercise that you did in Lesson 1, but instead of using CSS to create the two column list, you will use tables.
2. Make a copy of your index.htm file (the file you organized into columns in Lesson 1). Name the file index_tables.htm
3. Open the new file. Rather than surrounding each section of content with <div></div> tags, you will be surrounding each section of content with <td></td> tags. To position content side by side, it simply needs to be inside table data cells that are part of the same table row.
4. Replace each of the two <div> tags with <td>. If your <div> tags have class and id attributes, delete these.
5. Similarly, replace each of the two </div> tags with </td>
6. Now you have content contained within two table data cells, but they’re not yet part of a larger table. Now you need to surround these two table cells with the tags necessary to comnplete the table (the <table></table> and <tr></tr> tags).
7. When finished, your layout table will look something like this:
   <table>
   <tr>
   <td>Content of column 1 </td>
   <td>Content of column 2 </td>
   </tr>
   </table>
8. Save your work, and check it out in your web browser. The content should be positioned in two columns, but might not look quite right just yet.
9. Modify the table attributes. Add the following attibutes and values tothe <table> tag:
   • border=”0″
   • width=”80%”
   • cellpadding=”3″
   • cellspacing=”2″
10. You can also add attributes to the <td> tag, such as the following attribute, which forces text to align vertically to the top of the table cell:
    • valign=”top”
11. Each time you add or change an attribute, save your file and refresh your browser to see the effect of the change you’ve made.
12. Try using CSS to change the background color of your table. Play with other styles too, repeatedly checking to see the effect of your changes. How would you go about using CSS to style your two columns differently from one another?

Handouts/Online Documents

• Common XHTML Tags
• W3C HTML 4.01 Specification
• WDG Guide to HTML

All done?

Save your changes, and show your final table-based layout to me before starting the next unit.

Overview

In this module, you will begin to explore two strategies for page layout. First, you will use CSS to create columns on your page. Then, for comparison sake, you will use tables to accomplish a similar task.

Lesson 1: Layout With CSS

Overview

In this module, you will learn two techniques for controlling the layout of content on your web page: using CSS and HTML tables. So far in this course, your content has been displayed in a single column, and most content has been aligned on the left side of the page. So far in this unit, you have mostly been using CSS to decorate text. In the current lesson, we will explore some additional techniques using CSS to arrange content into multiple columns.

Using CSS you will arrange the two list (Required Projects and Client Sites) to be side by side in two columns.

Learner Outcomes

At the completion of this exercise:

• you will be able to apply CSS positioning to align content on a web page.

Activities

1. Open the index.html file with your text editor.
2. The <div> tag, short for “division”, is a special tag that is particularly useful for applying styles to blocks of text within an HTML document. It is often used to divide a web page into multiple sections. Then each section (or <div>) can be assigned its own unique styles. Some <div> sections might be assigned a particular background or border, or have special formatting that sets their text apart. Some may appear on the left side of the page, while others appear on the right.
3. Your page currently has two lists, a Required Projects list and a Client Sites list. Each list has a heading immediately above it. Let’s say we want to add a border around each list, and include the heading inside the border. First, you must surround each list with an opening and closing <div></div> tag. Since we want each of these lists to have a similar look, we’ll assign a class to each list, and will later define the style that class using CSS. Your opening div tag should looks something like this:<div class=“list“>
   We chose the name “list” for our class, but any word would serve this purpose.
4. Now that we’ve created two divs, and assigned them to the “list&quot class, we can stylize them using CSS. Add the following style definition to your style sheet (in the <style> section of your document. Note that in CSS, each class is preceded by a period (.) :
   .list {
   border: thin solid green;
   margin: 2%;
   padding: 2%;
   width: 45%;
   overflow: hidden;
   }
5. Save, refresh, and check your web page. Try manipulating the style definition that you just entered to see what changes result.
6. Now, let’s position these two divs beside one another in two columns. In order to do this, we’ll be defining a style for one div that’s different than the style of the other div. So, we’re going to have to assign a unique id to each div. The opening tag for each div will then look something like this: <div class=“list” id=”leftlist“>
   <div class=“list” id=”rightlist“>
   Again, the id’s we chose are just labels – they can be anything, as long as we remember them so we can stylize them in the next step.
7. To display the lists side by side instead of on top of one another, all you need to do is ” float” one of the div’s to the left or right of the other one. See below for how to accomplish this using CSS. Note that in CSS, each id is preceded by a # symbol. Can you guess what your page will look like before you save, refresh, and look?
   #leftlist {
   float: left
   }
   #rightlist {
   background: #ff9;
   }
8. Experiment with other CSS properties to the class and both id’s that you created. Get creative and explore the power of CSS!
9. When finished, save you new improved index.htm file.

Exploring Further

The topic of using CSS for positiong is a huge subject and there is much more to learn than is covered in this lesson. For students who want to take this a step further, there are many resources and tutorials available online.

As a starting point, we have provided a Boring Looking CSS Resource List. As the title implies, this is a boring looking page with plenty of good resources for learning more about CSS. To learn about CSS, follow the links on the page, then apply what you learn to the boring-looking resource list to see if you can make it look more attractive.

If you get stuck, we have also provided Better Looking CSS Resource List. Feel free to study our source code to see how we’ve attained the new and improved look and feel.

Handouts/Online documents

• CSS2 Specification
• WDG Guide to Cascading Style Sheets
• CSS Zen Garden

All done?

Show me!

Applying Styles to Data Tables

Overview

In the previous two lessons you have learned how to use CSS to stylize HTML documents. Practically any HTML element can be stylized. In this example, you will continue to practice applying CSS, by stylizing the various elements of the data table you created in an earlier lesson.

Learner Outcomes

At the completion of this exercise:

• you will be able to apply CSS to the various tags that make up an XHTML data table.

Activities

1. Open the file table.htm, which you created in the earlier exercise on Creating a Data Table.
2. Review your table’s source code. At a minimum, it should include the following HTML elements: <table>
   <caption>
   <tr>
   <th>
   <td>
   
3. If you haven’t already done so, add a <style></style> section to the top of the web page.
4. Add style declaractions for each of the above HTML elements. Try applying different styles, colors, borders, backgrounds, etc. Be creative, but try to maintain a professional look.
5. Each time you apply a new style, save the page and view it in your browser.

Handouts/Online Documents

• The earlier exercise on Creating a Data Table
• CSS2 Specification
• CSS2 Properties Index
• WDG Guide to Cascading Style Sheets
• WDG List of CSS Properties
• CSS Zen Garden
• Wellstyled Color Scheme Generator
• VisiBone Webmaster’s Color Lab

All done?

Show me!

Lesson 2: Applying Styles

Overview

In the previous lesson you learned the basic anatomy of a CSS style, and applied this knowledge by stylizing the h1 tag in your portfolio home page. In the current lesson, you will learn more about CSS and will apply style to your entire web page.

Learner Outcomes

At the completion of this exercise:

• you will be able to apply CSS to a variety of XHTML elements.

Activities

1. Visit www.csszengarden.com to see the creative potential of CSS.
2. Open your portfolio’s index.htm file with your text editor.
3. For at least five of the HTML elements that appear within the body of your document create a CSS style declaration within the STYLE section of your page. The five elements do not include body and h1, which you’ve already done. For each of the five elements (known in the STYLE section as “selectors”), apply at least one property, but preferably more than one where it makes sense to do so. Note: By now, the body of your web page should contain the following elements: body, h1, h2, h3, a, hr, p, ul, ol, and li. Follow these guidelines:
   • Use the Web Design Group CSS Properties website for an organized list of available properties.
   • Additional resources are listed in the Resources section below
   • One of the properties you may define for most elements is color. Use a consistent color scheme. Remember you can use a web based tool for that task such as the Wellstyled Color Scheme Generator or the VisiBone Webmaster’s Color Lab.
   • Whenever you have the choice between absolute or relative values choose relative values.
   • Save and check your work often.
   • Experiment with different styles to see how they effect your document. Have fun!

Handouts/Online documents

• CSS2 Specification
• CSS2 Properties Index
• WDG Guide to Cascading Style Sheets
• WDG List of CSS Properties
• CSS Zen Garden
• Wellstyled Color Scheme Generator
• VisiBone Webmaster’s Color Lab

All done?

After you have saved the changes to index.htm, open the file in your browser. Refresh your browser and study each of the changes. Show Mrs. Edge..

Overview

This unit is the sequel to the proceeding unit, in which you learned the basics of XHTML code, but focused solely on the content and structure of web documents. In this unit, you learn how to control the visual presentation of web documents using Cascading Style Sheets (CSS). This unit can be done entirely with a web browser and simple text editor.

Lesson 1: Anatomy of a Style

Overview

In the previous unit you used HTML to structure the portfolio home page. In this unit you will use Cascading Style Sheets (CSS) to make the page presentable. CSS is a markup language as is HTML. It is used to define the style of the page (such things as font type, size and many other attributes) as well as to control the overall page layout.

Learner Outcomes

At the completion of this exercise:

• you will be able to identify the components of a style in CSS.

Activities

1. Open your portfolio’s index.htm file with your text editor.
2. In order for CSS to control the entire page, the CSS code should be contained within the head section of the document. Start by typing <style> and </style> within the head section. These tags mark the beginning and end of the style section. It should look like this:
   <head>
   <title>Joe Helling’s Portfolio </title>
   <style>
   </style>
   </head>
3. The opening tag of the style section (<style>) needs one more thing before it’s complete: An attribute, telling the browser what type of style you’re defining. When using CSS, the type is always “text/css”. So, after adding this attribute, your opening style tag will look like this:
   <style type=”text/css” >
4. Now that you have created the beginning and end of a style section, you can begin to add style declarations to that section for controling the style of various HTML elements. Start with the <body> tag. Since all other web page content is contained within the body, the style you apply to the body will be inherited by all other elements. If you want a particular element to have a different style than everything else in the body (for example, to change the color, size, and weight of an <h1> tag), you’ll need to add a style declaration for that element. Write the following code between the STYLE tags in your document:
   body {
   font-size: 1em;
   font-weight: normal;
   font-family: Arial, Sans-serif;
   color: #000000;
   text-align: left;
   }
   h1 {
   font-size: 1.4em;
   font-weight: bold;
   color: #0000ff;
   text-align: center;
   }
5. Save and view in your browser.
6. There are three parts to the style:
   • Selector – the selector is usually the HTML element that you are attempting to control. In this example it is the <h1> tag.
   • Property – the property defines the selector in some manner, usually by size or variety. In this example font-weight and font-family are properties that describe the <h1> selector.
   • Value-the value declares how much, how far, what color, etc. The value of the font-size in the above example is 140%. Values can be expressed in absolute terms. For instance something can be declared to be an exact number of pixels wide (px) or inches wide (in) or points (pt). Values can also be declared in relative terms just as the example shows. 140% declares that h1 font is 140% larger than the default font size. It’s relative because the default font varies from computer to computer. Relative value units are percentages (%) and Ems (em). One “em” is the size of the letter “M” in the user’s current font . Relative values are generally better to use because they are “scalable”, they grow and shrink as needed to best fit given the user’s screen resolution, window size, and default browser font size.
7. Notice the use of punctuation in the example above. Describe to your instructor the function of the brackets, the colons, the semi-colons, and the commas.

Handouts/Online Documents

• CSS2 Specification http://www.w3.org/TR/CSS2/
• WDG Guide to Cascading Style Sheets http://www.htmlhelp.com/reference/css/
• CSS Zen Garden http://www.csszengarden.com/

All done?

After you have saved the changes to index.htm, open the file in your browser, and refresh. If you did everything correctly, you should notice some stylistic changes to your text. Show Mrs. Edge

1. Open a document and save it in your personal file as “HTML Code Cheat Sheet”,
2. By researching online, find as many HTML code reference site and cut and paste them into your document,
3. Make sure your document is formatted in an easy-to-read manner, use tables or alphabetize – whatever looks best and is easy to use.

Hint: The w3schools website is a great place to start!

Lesson 1: Creating a Data Table

Overview

Tables were introduced to the web with the original purpose of displaying data in rows and columns. In time they came to be used for an additional purpose: page layout. This lesson will focus on their original purpose. Page layout will be explored later in this course.

In this lesson you’ll add a simple data table to your portfolio.

Learner Outcomes

At the completion of this exercise:

• you will be able create a simple data table.

Activities

1. Earlier in this course, in the lesson titled How People with Disabilities Access the Web, you learned how certain web design strategies and techniques can create barries for people with disabilities and others. In the current lesson, you will use an HTML table to create a web accessibility checklist that you can refer to later as you design websites, to assist you in ensuring that your web content doesn’t needlessly exclude anyone. Before you begin to code your table, review the following section How to Create an HTML Table.
2. Create a sketch of how your table will be organized, referring to the section below titled Instructions for Creating Your Table.
3. Create a new web page consisting of all the essential tags.
4. Save the new web page as table.htm.
5. Using XHTML, create the table you have sketched. The final table should have two columns and seven rows (including the top row, which contains the column headers).
6. Be sure to include a summary and caption with your table, as described below.
7. Save your work, and check it in your web browser to be sure it looks like you expect it to. Don’t worry about spacing between and within cells: We’ll be addressing that in a future lesson.

How to Create an HTML Table

1. HTML tables begin and end with table elements: <table></table>.
2. The opening table element should include a summary attribute, which is read by screen readers in order to give blind users an overview of what the table contains and how it’s organized. Being informed of this information up front helps blind users to more easily navigate the table and understand what they’re hearing. Example: <table summary=”Your brief table description here”>
3. A table’s caption (brief descriptive text, usually displayed above the table) begins and ends with caption elements: <caption>
4. Each row in a table begins and ends with table row (tr) elements: <tr></tr>
5. Each cell in the table begins and ends with either table header (th) elements or table data (td) elements, depending on what type of information the cell contains.
   • If a cell contains headers, it begins and ends with th elements: <th></th>
   • If a cell contains data (not headers), it begins and ends with td elements: <td></td>
6. Table header elements (th) should also include a scope attribute, which is either scope=”row” or scope=”col”. This instructs screen readers as to which headers apply to which cells. Screen readers read tables row by row from left to right, and without this extra markup blind users would have a difficult time the header applies to the column

Compare the following table with the code that was used to create it (To see the table go to the AccessIT site at the link below).

http://www.washington.edu/accessit/webdesign/student/unit2/module5/lesson1.htm

Be sure you understand the above markup before proceeding to the next section.

Instructions for Creating Your Table

The table should have two columns, with the following headers:

1. User characteristic
2. Accessible design tip

In the first column (the column with header “User characteristic”), list the following user characteristics related to web accessibility, in the order in which they’re presented below.

1. Unable to see
2. Unable to perceive colors
3. Unable to use mouse
4. Unable to hear
5. Prone to having seizures
6. Distractable

In the second column (the column with header “Accessible design tip”), the following web design issues correspond with the same-numbered user characteristic from the first column.

1. Code all images with ALT text
2. Avoid using color alone to convey information
3. Be sure all website features can be accessed using keyboard
4. Add captions to multimedia
5. Avoid content that “flashes”
6. Keep the design simple