ITEC 745

1
ITEC 745

• Instructional Web Authoring I
• Instructor Ray Cole

Week 7
2
Recall from Last Week
Spanning Rows and Columns with HTML/XHTML Tables
3
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 alink
text-decoration none avisited
color FF0033 text-decoration
none ahover 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

• lthtmlgt
• ltheadgt
• lttitlegtRowspan and Colspanlt/titlegt
• ltlink href"colspan.css" rel"stylesheet"
  type"text/css" /gt
• lt/headgt
• ltbodygt
• lttablegt
• lttrgt
• ltth colspan"2"gtSpanning Table Columnslt/thgt
• lt/trgt
• lttrgt
• lttd class"navigation"gt
• ltpgtNavigation on the left...lt/pgt
• lth2gtModuleslt/h2gt
• ltolgt
• ltligtlta href"module01.html"gtModule
  1lt/agtlt/ligt
• ltli class"selected"gtModule 2lt/ligt
• ltligtlta href"module03.html"gtModule
  3lt/agtlt/ligt
• lt/olgt

4
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 alink
text-decoration none avisited
color FF0033 text-decoration
none ahover 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

• lthtmlgt
• ltheadgt
• lttitlegtRowspan and Colspanlt/titlegt
• ltlink href"colspan.css" rel"stylesheet"
  type"text/css" /gt
• lt/headgt
• ltbodygt
• lttablegt
• lttrgt
• ltth colspan"2"gtSpanning Table Columnslt/thgt
• lt/trgt
• lttrgt
• lttd class"navigation"gt
• ltpgtNavigation on the left...lt/pgt
• lth2gtModuleslt/h2gt
• ltolgt
• ltligtlta href"module01.html"gtModule
  1lt/agtlt/ligt
• ltli class"selected"gtModule 2lt/ligt
• ltligtlta href"module03.html"gtModule
  3lt/agtlt/ligt
• lt/olgt

5
Displaying Tabular Data (cont.)

• Use colspann when you want a table cell to
  span n columns (see example on previous slide).
• Use rowspann when you want a table cell to
  span n rows.

6
Dreamweaver!
Dreamweaver Site Setup
7
Dreamweaver Site Setup
STEP 1 Create New Dreamweaver Site
8
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 gt to
continue
9
Dreamweaver Site Setup
STEP 3 No Server Technology
STEP 4 Edit Locally, In Specified Folder
You want to Edit local copies
In this class, you wont be using server
technology, so leave this radio button set to
No.
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 gt to continue
Click Next gt to continue
10
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 _at_sfsu.edu)
Your FTP password is the same as your SFSU email
password
Do not click Next gt yet!
11
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 networks firewall, then click Test
Do not click Next gt yet!
12
Dreamweaver Site Setup
STEP 5e Can Dreamweaver Connect? STEP
5f Click Basic
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
Click OK on the dialog, but do not click OK on
the Advanced tab!
13
Dreamweaver Site Setup
STEP 5g Click Next
STEP 6 Disable Check In/Out
Dreamweavers check in and check out features are
designed to prevent two people from editing the
same file at the same time. Since youll be
working by yourself on your project, you wont
need to enable this feature. Leave this set to
No.
Click Next gt to continue
Click Next gt to continue
14
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
Theres nothing to do here except validate that
your settings are correct. Look them over, then
click Done
Click Done to complete your site setup
15
Authoring with Dreamweaver
Creating Web Pages with Dreamweaver
16
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

17
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, ltnonegt in the third,
and a DocType of XHTML 1.0 Transitional, which is
the specific XHTML standard youll be validating
your pages against in this class.
Most of these values are the default values.
Click Create to complete your selection.
18
Authoring with Dreamweaver
Creating 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.
19
Authoring with Dreamweaver
Dreamweaver Views Code, Split, and Design
20
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.
21
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.
22
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.
23
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.
24
Authoring with Dreamweaver
Uploading and Downloading Web Pages To and From
the Web Server
25
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.
26
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 youll want to
answer Yes.
27
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.
28
Authoring with Dreamweaver
Viewing Your Uploaded Files
29
Downloading from the Server
Your Web Sites 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.
30
This Week
XHTML Validation, CSS Terminology and Scope
Graphic Hyperlinks, Nested Tables
31
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.

32
Things the Validator Will Complain About
33
Headings Cant Be Inside Paragraphs

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetutf-8" /gt
• lttitlegtDon't Put lth1gt Inside
  ltpgtlt/titlegt
• lt/headgt
• ltbodygt
• ltpgtlth1gtDon't Put headings inside
  paragraphslt/h1gtlt/pgt
• ltpgt
• It's not legal to put headings inside of
  paragraphs.
• Headings must appear outside of
  paragraphs.
• lt/pgt
• lt/bodygt
• lt/htmlgt

34
Lists Cant Be Inside Paragraphs

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetutf-8" /gt
• lttitlegtDon't Put Lists Inside Paragraphslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtDon't Put Lists Inside Paragraphslt/h1gt
• ltpgtIt's not legal to
• ltulgt
• ltligtPut lists inside of
  paragraphslt/ligt
• lt/ulgt
• Lists must appear outside of paragraphs.
• lt/pgt
• lt/bodygt

35
Open1 Open2 Close2 Close1

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetutf-8" /gt
• lttitlegtDon't Cross Different Open and Close
  Tagslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtDon't Cross Different Open and Close
  Tagslt/h1gt
• ltpgt
• If you open two or more tags in a row,
  without an intervening close tag, you
  must close the most recently opened tag
  first.
• lt/pgt
• ltpgt
• ltbgtltigtSo this is legallt/igtlt/bgt
  ltbgtltigtThis text is in bold and
  italic.ltigtltbgt
• lt/pgt
• ltpgtltbgtltigtBut this is notlt/bgtlt/igt
  ltbgtltigtThis text is in bold and
  italic.ltbgtltigt
• lt/pgt
• lt/bodygt

36
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
  ltimg /gt, lthr /gt, ltbr clearleft /gt, etc.
• Missing alt attribute in img tags
• Missing lttitlegt tag
• Unclosed non-empty tags
• And, of course, anything else that violates the
  XHTML 1.0 specification.

37
CSS Terminology and Scope
38
CSS Terminology

• The various elements of a CSS rule have names
• blockquote font-style italic
• Selector Property Value

39
CSS Scope

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

i color aqua b color red
ltigtltbgtWill this font be rendered in aqua or
red?lt/bgtlt/igt ltbgtltigtHow about this
font?lt/igtlt/bgt
40
CSS Scope

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

i color aqua b color red
ltigtltbgtWill this font be rendered in aqua or
red?lt/bgtlt/igt ltbgtltigtHow about this
font?lt/igtlt/bgt
Answer red
Answer aqua
The CSS rule associated with the tag closest to
the content wins.
41
Page Types and Reserving Screen Areas with Tables
42
Interactive Interview Redone

• Most professionally-created e-learning is
  page-oriented, meaning that it doesnt 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.

43
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.

44
Interactive Interview Redone
After the learner clicks the first question, the
answer appears in the right column. How is this
implemented?
45
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. Its just that the other parts of this
page are the same as they were on the previous
page.
46
Interactive Interview Redone
Heres 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?
47
Interactive Interview Redone
Heres 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
48
Interactive Interview Redone
Heres the last page. Like the others, it has a
nice border around only the outer edges of the
table. How is this achieved?
49
Interactive Interview Redone
Heres 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
50
Links, Nested Tables
Graphic Hyperlinksand Nested Tables
51
Links, Nested Tables
Graphics can be made into links by surrounding
the ltimg /gt tag with anchor tags (ltagt
lt/agt). 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.
52
For Next Week

• Midterm Exam next week in class.