Transcript Week 6
ITEC 745
Instructional Web Authoring I
Instructor: Ray Cole
Week 6
Recall What You Have Learned:
• Tags:
– Open: <tag>
– Close: </tag>
– Empty (no separate open and close tags): <tag />
• Attributes
– Specify additional features of tags
– Always of the form: attribute_name=“attribute_value”
– Example: <img src=“myphoto.jpg” />
tag is img
attribute is src=“myphoto.jpg”
CSS for Anchor (<a>) Tags
• Recall that any XHTML tag’s look can be
redefined by giving it an entry in your CSS
file
• In particular, the anchor tag can be given,
say, a new color by giving it a CSS entry:
a{
color: #0000ff;
}
• However, links (anchors) have different states
(e.g., “visited” or not). What to do about them?
CSS for Anchor (<a>) Tags
• Pseudo-classes let us individually address each
of the possible states of a link:
a:link {
color: #0000ff;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #00ff00;
}
a:active {
color: #cccc00;
}
CSS for Anchor (<a>) Tags
• You’re not limited to just changing the color:
a:link {
color: #0000ff;
text-decoration: none;
}
a:visited {
color: #ff0000;
text-decoration: none;
}
a:hover {
color: #00ff00;
text-transform: uppercase;
font-weight: bold;
background-color: #cc0099;
}
a:active {
color: #cccc00;
text-decoration: none;
}
CSS for Anchor (<a>) Tags
• a:link and a:visited must come before a:hover
in the CSS definition in order to be effective!!
• a:hover must come before a:active in the CSS
definition in order to be effective!!
• This means there are only 2 correct orders:
OK:
OK:
a:link { color: #0000ff; }
a:visited { color: #ff0000; }
a:hover { color: #00ff00; }
a:active { color: #cccc00; }
a:visited { color: #ff0000; }
a:link { color: #0000ff; }
a:hover { color: #00ff00; }
a:active { color: #cccc00; }
Tables
XHTML/XHTML Tables
Displaying Tabular Data (cont.)
<html>
<head>
<link href="itec745.css" rel="stylesheet" type="text/css" />
<title>Tables for Displaying Tabular Data</title>
</head>
<body>
<h1>Tables for Displaying Tabular Data</h1>
<p>Here's an example of a table used for displaying tabular
data:</p>
<table>
<tr>
<th>State</th>
<th>July 2005 Population*</th>
</tr>
<tr>
<td>Alabama</td>
<td>4,557,808</td>
</tr>
<tr>
<td>Alaska</td>
<td>663,661</td>
</tr>
</table>
<p>*Source: <a
href="http://www.factmonster.com/ipka/A0004986.html">
http://www.factmonster.com/ipka/A0004986.html</a></p
>
</body>
</html>
table {
width: 300px;
border-style: solid;
border-color: #000000;
border-width: 2px;
}
th {
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #0066ff;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-style: italic;
}
td {
border-style: solid;
border-color: #000000;
border-width: 1px;
}
a:visited {
color: #ff0000;
text-decoration: none;
}
Displaying Tabular Data (cont.)
• Tables consist of 4 main tags:
– <table> and </table> mark the beginning and end of
the table, respectively
– <tr> and </tr> mark the beginning and end of each
table row of the table, respectively
– <th> and </th> mark the beginning and end of each
table header cell, respectively
– <td> and </td> mark the beginning and end of each
table data cell, respectively
More CSS
CSS Classes
CSS Classes
• In your CSS file, create an entry that
begins with a dot (“.”), e.g.,
.wide {
width: 500px;
}
.narrow {
width: 300px;
}
CSS Classes
• CSS:
.wide {
width: 500px;
}
.narrow {
width: 300px;
}
.red-on-blue {
background-color: #0000cc;
color: #cc0000;
}
.white-on-green {
background-color: #006600;
color: #ffffff;
}
• HTML:
<table class=“wide”>
<tr>
<th class=“red-on-blue”>col heading 1</th>
<th class=“red-on-blue”>col heading 2</th>
</tr>
<tr>
<td class=“white-on-green”>r 1, c 1</td>
<td class=“white-on-green”>r 1, c 2</td>
</td>
</table>
More CSS
CSS Colors
CSS Colors
• Colors can always be specified using the
hexidecimal notation we’ve already
learned:
#ff003a = max red, no green, small amount of blue
• There are also 16 pre-defined color
names that you can use directly: aqua,
black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and
yellow
CSS Colors
• CSS:
.wide {
width: 500px;
}
.narrow {
width: 300px;
}
.red-on-blue {
background-color: blue;
color: red;
}
.white-on-green {
background-color: green;
color: white;
}
• HTML:
<table class=“wide”>
<tr>
<th class=“red-on-blue”>col heading 1</th>
<th class=“red-on-blue”>col heading 2</th>
</tr>
<tr>
<td class=“white-on-green”>r 1, c 1</td>
<td class=“white-on-green”>r 1, c 2</td>
</td>
</table>
This Week
More on Tables,
Dreamweaver Site Setup
More on Tables
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
In-Class Exercise
• Create the following
table in an XHTML
page. You will need
to use rowspan
and colspan
attributes to
recreate this
particular
arrangement of
cells.
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 view 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 its
filename to select it, 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 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.
For Next Week
• Set up your Dreamweaver site at home:
– Make sure you know your SFSU web space account name
(same as your sfsu email account name, which is the part before
the “@sfsu.edu”)
– You also need to know your SFSU email account password,
because that is also your SFSU web space account password
– Finally, make sure you can correctly configure a Dreamweaver
site that can log in to your SFSU web space account, and can
upload and download pages to and from it from within
Dreamweaver. We’ll be using the SFSU web space and
Dreamweaver for the rest of the semester, so you need to make
sure it’s working for you now or you will risk falling behind