itec 745 instructional web authoring i instructor: ray cole week 7

ITEC 745

Instructional Web Authoring I

Instructor: Ray Cole

Week 7

Spanning Rows and Columns with HTML/XHTML Tables

Recall from Last Week

<html><head><title>Rowspan and Colspan</title><link href="colspan.css" rel="stylesheet" type="text/css" /></head><body><table><tr> <th colspan="2">Spanning Table Columns</th></tr><tr> <td class="navigation"> <p>Navigation on the left...</p> <h2>Modules:</h2> <ol> <li><a href="module01.html">Module 1</a></li> <li class="selected">Module 2</li> <li><a href="module03.html">Module 3</a></li> </ol> </td> <td> <p>Content on the right...</p> <h2>Module 2: Layout with Tables</h2> <p>Blah blah blah, content content content, blah blah blah, content

content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc.

</p> </td></tr><tr> <td colspan="2" class="bottom_nav"><-- Back | <a

href="module03.html">Next --></a></td></tr></table></body></html>

Displaying Tabular Data (cont.)th {

font-family: Arial, Helvetica, sans-serif;color: #FF0033;background-color: #FFCC00;text-align: left;padding: 10px;

}td {

vertical-align: top;padding: 10px;

}h2 { color: #FF0033;}a:link { text-decoration: none;}a:visited { color: #FF0033; text-decoration: none;}a:hover { color: green;

text-decoration: underline;}.selected {

font-weight: bold;}.navigation {

width: 200px;height: 600px;

background-color: #FFCC00;}.bottom_nav {

background-color: #FFCC00;text-align: right;font-weight: bold;

}

• Use colspan=“n” when you want a table cell to span n columns (see example on previous slide).

• Use rowspan=“n” when you want a table cell to span n rows.

Displaying Tabular Data (cont.)

Dreamweaver Site Setup

Dreamweaver!


STEP 1: Create New Dreamweaver Site


Before After: Click Next > to continue

Name your site

Your URL is http://userwww.sfsu.edu/~[your account name]

Since my account name is “rayc”, my URL ends with “~rayc”

STEP 2a: Site Name and URL STEP 2b: Site Name and URL


Click Next > to continue Click Next > to continue

In this class, you won’t be using server technology, so leave this radio button set to “No.”

You want to Edit local copies

Create a folder on your computer where you will store your web pages prior to uploading them to the web server, then specify its full path here

STEP 3: No Server Technology STEP 4: Edit Locally, In Specified Folder

Dreamweaver Site SetupSTEP 5a: Select FTP STEP 5b: Hostname, Folder, Login Info

Use FTP (the File Transfer Protocol) to connect to the web server

Hostname is: apollo.sfsu.edu

Folder is: public_html

FTP login is your SFSU email account name (not including “@sfsu.edu”)

Do not click Next > yet!

Your FTP password is the same as your SFSU email password

Dreamweaver Site SetupSTEP 5c: Click the Advanced Tab STEP 5d: Hostname, Folder, Login Info

Do not click Next > yet!

Click the Advanced tab

Click Use passive FTP to avoid possible problems with your home network’s firewall, then click Test

Dreamweaver Site SetupSTEP 5e: Can Dreamweaver Connect? STEP 5f: Click Basic

Click OK on the dialog, but do not click OK on the Advanced tab!

After clicking Test, you should see this dialog if Dreamweaver is able to connect to the web server

Click Basic to return to the Basic tab

Dreamweaver Site SetupSTEP 5g: Click Next STEP 6: Disable Check In/Out

Click Next > to continue Click Next > to continue

Dreamweaver’s check in and check out features are designed to prevent two people from editing the same file at the same time. Since you’ll be working by yourself on your project, you won’t need to enable this feature. Leave this set to “No.”

Dreamweaver Site SetupSTEP 7: Validate Settings

Click Done to complete your site setup

There’s nothing to do here except validate that your settings are correct. Look them over, then click Done

Congratulations, your Dreamweaver site is now set up and ready to use.

It should appear now in the Files panel on the right:

Creating Web Pages with Dreamweaver

Authoring with Dreamweaver

Authoring with DreamweaverCreating a New Web Page

There are a couple of ways to create a new web page in Dreamweaver, including:

• Under Create New on the Dreamweaver startup screen, click HTML, or…

• Click File New…


If you use File New…, Dreamweaver will present you with a dialog that contains a list of items similar to the list on the startup screen.

From this dialog, choose Blank Page in the first column, HTML in the second, <none> in the third, and a DocType of XHTML 1.0 Transitional, which is the specific XHTML standard you’ll be validating your pages against in this class.

Most of these values are the default values. Click Create to complete your selection.


Whichever method you use, you will end up with a bare-bones XHTML 1.0 Transitional web page ready to go in your edit window.

Dreamweaver Views: Code, Split, and Design


Dreamweaver ViewsIntro to Dreamweaver Views

Dreamweaver can show you the page you are authoring in any of 3 different “Views”:

• Code

• Split

• Design

Select a view by clicking the appropriate button.

Dreamweaver ViewsCode View

Code view lets you directly edit the XHTML code for your web page, just as if you were editing it in a simple text editor, but with the advantages of color-coding, end-tag completion, and other time-saving features.

Dreamweaver ViewsDesign View

Design view hides the XHTML tags. Instead of directly editing the code, you are able to edit the page in a WYSIWYG (What You See Is What You Get) environment. It can also act as a kind of simple preview if you want to quickly check how your code looks when rendered.

Dreamweaver ViewsSplit View

Split splits your edit window into two halves and places the code view in one half and the design view in the other. In some ways, this gives you the best of both worlds, but at the expense of being able to see only half as much code/screen at a time.

Uploading and Downloading Web Pages To and From

the Web Server


Uploading to the Web ServerUploading Your Files to the Web Server

There are a couple of ways to tell Dreamweaver to upload your XHTML page to the web server. One way is to find the page in the Files panel on the right, click on its filename, and then click the up arrow to upload it.

Uploading to the Web ServerUploading Your Files to the Web Server

When the dialog box comes up asking if you want to upload dependent files, click Yes. Dependent files are files (like the CSS file) that are associated with the file you are uploading.

If you forget to save your file before trying to upload it, Dreamweaver will ask you if you want to save before uploading. Usually you’ll want to answer Yes.

Downloading from the ServerDownloading Your Files from the Web Server

Find the page in the Files panel on the right, click on its filename, and then click the down arrow to download it.

Viewing Your Uploaded Files


Downloading from the ServerYour Web Site’s URL

You can view your web page by entering the basic URL for your web site, followed by the name of the page.

In this example, the basic URL for your SFSU web site will always be:

http://userwww.sfsu.edu/~[your account name]

My account name is “rayc”, so my base URL is http://userwww.sfsu.edu/~rayc

To reach the testing.html page, I need to enter http://userwww.sfsu.edu/~rayc/testing.html into my web browser. Doing so brings up the page.

XHTML Validation, CSS Terminology and Scope

Graphic Hyperlinks, Nested Tables

This Week:

• The XHTML 1.0 Transitional web standard is maintained by the World Wide Web Consortium, popularly known as the W3C.

• Helpfully, the W3C has an automated code-validator at its web site:– http://validator.w3.org/

• Just enter the URL of your page and click Check.

XHTML Validation

Things the Validator Will Complain About

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Don't Put <h1> Inside <p></title></head>

<body> <p><h1>Don't Put headings inside paragraphs</h1></p>

<p> It's not legal to put headings inside of paragraphs. Headings must appear outside of paragraphs. </p>

</body></html>

Headings Can’t Be Inside Paragraphs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Don't Put Lists Inside Paragraphs</title></head>

<body>

<h1>Don't Put Lists Inside Paragraphs</h1>

<p>It's not legal to: <ul> <li>Put lists inside of paragraphs</li> </ul> Lists must appear outside of paragraphs. </p>

</body></html>

Lists Can’t Be Inside Paragraphs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Don't Cross Different Open and Close Tags</title></head>

<body>

<h1>Don't Cross Different Open and Close Tags</h1> <p> If you open two or more tags in a row, without an intervening close tag, you must close the most recently opened tag first. </p> <p> <b><i>So this is legal:</i></b> <b><i>This text is in bold and italic.<i><b> </p> <p><b><i>But this is not:</b></i> <b><i>This text is in bold and italic.<b><i> </p></body></html>

Open1 Open2 Close2 Close1

The validator will also complain about:• Uppercase letters in tag or attribute names• Missing “/” at the end of empty tags such as <img />, <hr />, <br clear=“left” />, etc.• Missing alt attribute in img tags• Missing <title> tag• Unclosed non-empty tags•And, of course, anything else that violates the XHTML 1.0 specification.

Other Validator Complaints

CSS Terminology and Scope

The various elements of a CSS rule have names:

blockquote { font-style: italic; }

Selector Property Value

CSS Terminology

Each CSS rule has “scope” that the browser uses when two rules specify different values for the same property. Example:

CSS Scope

i { color: aqua;}

b { color: red;}

<i><b>Will this font be rendered in aqua or red?</b></i>

<b><i>How about this font?</i></b>

Each CSS rule has “scope” that the browser uses when two rules specify different values for the same property. Example:

CSS Scope

i { color: aqua;}

b { color: red;}

<i><b>Will this font be rendered in aqua or red?</b></i>

<b><i>How about this font?</i></b>

Answer: red

Answer: aqua

The CSS rule associated with the tag closest to the content “wins.”

Page Types and Reserving Screen Areas with Tables

Interactive Interview: RedoneMost professionally-created e-learning is “page-oriented,” meaning that it doesn’t scroll. Further, certain design principles generally hold, including:

•Course titles, navigation, and other controls appear around the edges of the screen.

•When working with the content of a single interactivity, never separate a click and its response onto different pages

Tables make adhering to these design principles easy.

Interactive Interview: RedoneIn this re-do of our Interactive Interview page-type from a few weeks ago, the page has been organized into a table:

• Top row: Course Title• Middle row: Content• Bottom row: OSD and Nav

The middle row has 2 columns. In the left column are the questions the learner can click to ask. The right column initially is blank or (in this case) contains an image that will be replaced with the answer after the learner clicks a question.

Interactive Interview: RedoneAfter the learner clicks the first question, the answer appears in the right column.

How is this implemented?

Interactive Interview: RedoneAfter the learner clicks the first question, the answer appears in the right column.

How is this implemented?

Answer: This page is a duplicate of the first page, with only the contents of the second cell of the middle row of the table changed. Everything else stays put, so it looks like only the left column of the middle row has been updated. In fact, the whole page has changed. It’s just that the other parts of this page are the same as they were on the previous page.

Interactive Interview: RedoneHere’s the answer page the learner sees after clicking the second question. Notice how the bottom edge does not leap up, but instead stays put. There is a blank space at the bottom of each cell in the middle row that keeps the bottom edge in place.

How is this achieved?

Interactive Interview: RedoneHere’s the answer page the learner sees after clicking the second question. Notice how the bottom edge does not leap up, but instead stays put. There is a blank space at the bottom of each cell in the middle row that keeps the bottom edge in place.


Answer: With a CSS class applied to the first cell in the middle row:

.content {height: 500px;

}

Interactive Interview: RedoneHere’s the last page. Like the others, it has a nice border around only the outer edges of the table.


Interactive Interview: RedoneHere’s the last page. Like the others, it has a nice border around only the outer edges of the table.


Answer: With CSS border properties:

table {border-top: solid;border-top-color: black;border-right: solid;border-right-color: black;border-left: solid;border-left-color: black;

border-bottom: solid;border-bottom-color: black;

}

Graphic Hyperlinksand Nested Tables

Links, Nested Tables

Links, Nested Tables

Graphics can be made into links by surrounding the <img /> tag with anchor tags (<a> </a>).

Also, table cells can contain nested tables.

The blue cells on the top, left, and bottom, plus the large white area are constructed of one table.

The page title (“What You Will Learn”), text, and graphic are each in a separate cell of a nested table.

• Midterm Exam next week in class.

For Next Week

itec 745 instructional web authoring i instructor: ray cole week 7

Documents