itec 745 instructional web authoring i instructor: ray cole week 7
Post on 17-Jan-2016
220 Views
Preview:
TRANSCRIPT
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;
}
<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!
Dreamweaver Site Setup
STEP 1: Create New Dreamweaver Site
Dreamweaver Site Setup
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
Dreamweaver Site Setup
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…
Authoring with DreamweaverCreating a New Web Page
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.
Authoring with DreamweaverCreating a New Web Page
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
Authoring with Dreamweaver
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
Authoring with Dreamweaver
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
Authoring with Dreamweaver
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.
How is this achieved?
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.
How is this achieved?
Interactive Interview: RedoneHere’s the last page. Like the others, it has a nice border around only the outer edges of the table.
How is this achieved?
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
top related