ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.
-
Upload
buddy-sharp -
Category
Documents
-
view
219 -
download
0
Transcript of ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.
![Page 1: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/1.jpg)
ITEC 745
Instructional Web Authoring I
Instructor: Ray Cole
Week 7
![Page 2: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/2.jpg)
Spanning Rows and Columns with HTML/XHTML Tables
Recall from Last Week
![Page 3: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/3.jpg)
<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;
}
![Page 4: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/4.jpg)
<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;
}
![Page 5: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/5.jpg)
• 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.)
![Page 6: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/6.jpg)
Dreamweaver Site Setup
Dreamweaver!
![Page 7: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/7.jpg)
Dreamweaver Site Setup
STEP 1: Create New Dreamweaver Site
![Page 8: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/8.jpg)
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
![Page 9: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/9.jpg)
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
![Page 10: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/10.jpg)
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
![Page 11: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/11.jpg)
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
![Page 12: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/12.jpg)
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
![Page 13: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/13.jpg)
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.”
![Page 14: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/14.jpg)
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:
![Page 15: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/15.jpg)
Creating Web Pages with Dreamweaver
Authoring with Dreamweaver
![Page 16: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/16.jpg)
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…
![Page 17: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/17.jpg)
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.
![Page 18: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/18.jpg)
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.
![Page 19: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/19.jpg)
Dreamweaver Views: Code, Split, and Design
Authoring with Dreamweaver
![Page 20: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/20.jpg)
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.
![Page 21: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/21.jpg)
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.
![Page 22: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/22.jpg)
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.
![Page 23: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/23.jpg)
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.
![Page 24: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/24.jpg)
Uploading and Downloading Web Pages To and From
the Web Server
Authoring with Dreamweaver
![Page 25: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/25.jpg)
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.
![Page 26: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/26.jpg)
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.
![Page 27: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/27.jpg)
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.
![Page 28: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/28.jpg)
Viewing Your Uploaded Files
Authoring with Dreamweaver
![Page 29: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/29.jpg)
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.
![Page 30: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/30.jpg)
XHTML Validation, CSS Terminology and Scope
Graphic Hyperlinks, Nested Tables
This Week:
![Page 31: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/31.jpg)
• 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
![Page 32: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/32.jpg)
Things the Validator Will Complain About
![Page 33: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/33.jpg)
<!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
![Page 34: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/34.jpg)
<!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
![Page 35: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/35.jpg)
<!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
![Page 36: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/36.jpg)
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
![Page 37: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/37.jpg)
CSS Terminology and Scope
![Page 38: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/38.jpg)
The various elements of a CSS rule have names:
blockquote { font-style: italic; }
Selector Property Value
CSS Terminology
![Page 39: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/39.jpg)
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>
![Page 40: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/40.jpg)
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 41: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/41.jpg)
Page Types and Reserving Screen Areas with Tables
![Page 42: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/42.jpg)
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.
![Page 43: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/43.jpg)
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.
![Page 44: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/44.jpg)
Interactive Interview: RedoneAfter the learner clicks the first question, the answer appears in the right column.
How is this implemented?
![Page 45: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/45.jpg)
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.
![Page 46: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/46.jpg)
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?
![Page 47: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/47.jpg)
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;
}
![Page 48: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/48.jpg)
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?
![Page 49: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/49.jpg)
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;
}
![Page 50: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/50.jpg)
Graphic Hyperlinksand Nested Tables
Links, Nested Tables
![Page 51: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/51.jpg)
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.
![Page 52: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649f1d5503460f94c34b2b/html5/thumbnails/52.jpg)
• Midterm Exam next week in class.
For Next Week