Transcript Week 7
ITEC 745
Instructional Web Authoring I
Instructor: Ray Cole
Week 7
Recall from Last Week
Spanning Rows and Columns
with HTML/XHTML Tables
Displaying Tabular Data (cont.)
th {
<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>
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;
}
Displaying Tabular Data (cont.)
th {
<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>
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;
}
Displaying Tabular Data (cont.)
• 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.
Dreamweaver!
Dreamweaver Site Setup
Dreamweaver Site Setup
STEP 1: Create New
Dreamweaver Site
Dreamweaver Site Setup
STEP 2a: Site Name and URL
STEP 2b: Site Name and URL
Name your site
Your URL is http://userwww.sfsu.edu/~[your account name]
Since my account name is “rayc”, my URL ends with “~rayc”
Before
After: Click Next > to continue
Dreamweaver Site Setup
STEP 3: No Server Technology
In this class, you
won’t be using
server technology,
so leave this radio
button set to “No.”
Click Next > to continue
STEP 4: Edit Locally, In Specified Folder
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
Click Next > to continue
Dreamweaver Site Setup
STEP 5a: Select FTP
STEP 5b: Hostname, Folder, Login Info
Hostname is:
apollo.sfsu.edu
Folder is:
public_html
Use FTP (the
File Transfer
Protocol) to
connect to the
web server
FTP login is your
SFSU email account
name (not including
“@sfsu.edu”)
Your FTP password is
the same as your SFSU
email password
Do not click Next > yet!
Dreamweaver Site Setup
STEP 5c: Click the Advanced Tab
STEP 5d: Hostname, Folder, Login Info
Click the
Advanced
tab
Click Use passive
FTP to avoid
possible problems
with your home
network’s firewall,
then click Test
Do not click Next > yet!
Dreamweaver Site Setup
STEP 5e: Can Dreamweaver Connect?
After clicking
Test, you
should see this
dialog if
Dreamweaver
is able to
connect to the
web server
STEP 5f: Click Basic
Click Basic to
return to the Basic
tab
Click OK on the dialog, but do not click OK on the Advanced tab!
Dreamweaver Site Setup
STEP 5g: Click Next
STEP 6: Disable Check In/Out
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.”
Click Next > to continue
Click Next > to continue
Dreamweaver Site Setup
STEP 7: Validate Settings
Congratulations, your Dreamweaver
site is now set up and ready to use.
It should appear now in the Files
panel on the right:
There’s nothing to
do here except
validate that your
settings are
correct. Look
them over, then
click Done
Click Done to complete your site setup
Authoring with Dreamweaver
Creating Web Pages with
Dreamweaver
Authoring with Dreamweaver
Creating 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 Dreamweaver
Creating 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 Dreamweaver
Creating a New Web Page
Whichever method you use,
you will end up with a barebones XHTML 1.0
Transitional web page ready
to go in your edit window.
Authoring with Dreamweaver
Dreamweaver Views:
Code, Split, and Design
Dreamweaver Views
Intro 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 Views
Code 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 Views
Design 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 Views
Split 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.
Authoring with Dreamweaver
Uploading and Downloading
Web Pages To and From
the Web Server
Uploading to the Web Server
Uploading 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 Server
Uploading 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 Server
Downloading 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.
Authoring with Dreamweaver
Viewing Your Uploaded Files
Downloading from the Server
Your 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.
This Week:
XHTML Validation, CSS
Terminology and Scope
Graphic Hyperlinks, Nested
Tables
XHTML Validation
• 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.
Things the Validator Will
Complain About
Headings Can’t Be Inside Paragraphs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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>
Lists Can’t Be Inside Paragraphs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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>
Open1 Open2 Close2 Close1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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>
Other Validator Complaints
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.
CSS Terminology and Scope
CSS Terminology
The various elements of a CSS rule have names:
blockquote { font-style: italic; }
Selector
Property
Value
CSS Scope
Each CSS rule has “scope” that the browser uses
when two rules specify different values for the
same property. Example:
i {
<i><b>Will this font be rendered in aqua or red?</b></i>
color: aqua;
}
b {
color: red;
}
<b><i>How about this font?</i></b>
CSS Scope
Each CSS rule has “scope” that the browser uses
when two rules specify different values for the
same property. Example:
i {
<i><b>Will this font be rendered in aqua or red?</b></i>
color: aqua;
}
Answer: red
b {
color: red;
}
<b><i>How about this font?</i></b>
Answer: aqua
The CSS rule associated with the tag closest
to the content “wins.”
Page Types and Reserving
Screen Areas with Tables
Interactive Interview: Redone
Most professionally-created elearning 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: Redone
In 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: Redone
After the learner clicks the first
question, the answer appears in the
right column.
How is this implemented?
Interactive Interview: Redone
After 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: Redone
Here’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: Redone
Here’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: Redone
Here’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: Redone
Here’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;
}
Links, Nested Tables
Graphic Hyperlinks
and 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.
For Next Week
• Midterm Exam next week in class.