Readings

HTML For the World Wide Web

Page 32, 55; chapter 2, 3.

The Unusually Useful Web Book

June Cohen. New Riders. 2003.

Pages 191 to 192.

Creating Web Pages with Dreamweaver

Pages 82 to 91.

It is the linking of separate, single web pages that turns them into a web site. How the pages and directories are named, organized, and linked helps determine the quality of the visitor experience.

File naming standards

• File names are lowercase.
• File names are descriptive but not too abbreviated.
• File names use – instead of spaces or underscores (preferred by Google).

Directory naming standards

• Each main topic area gets a directory.
• If subcategories will have more than a few pages, add a subdirectory.
• All directories have an index/default file.
  • This file hold content for the first subtopic in a directory.
• Decide what kind of media files you’ll be using and consider separating them into directories and/or subdirectories
  • images (graphical elements related to the page design)
  • audio
  • movies
  • photos
  • illustrations
  • downloads
• Main template graphics go in the main images directory and each topic’s images often reside in the corresponding section images directory.

Organizing

Many variations exist for organizing the directory and file structure of web pages on a web server. For example:

• Database-driven sites pull page content from a database but use many script and function files to do the work. Complete pages are not actually built until the visitor requests a topic from the menu. The server builds the page on the fly.
• Masterpage-driven sites allow content pages to inherit a masterpage/template. Complete pages are not actually built until the visitor requests a topic from the menu. The server builds the pages on the fly.
• Traditional sites hard-coded all code, content, and styles on each page and therefore took a lot of tedious, redundant editing to make global changes. Pages were built before loading to the server.

Linking

Depending on the site’s structure, paths from menu items to their pages will either be absolute or relative:

Absolute path

• http://domain.com/folder/file.php
• http://oregonstate.edu/~vanlondp/cs195
• http://oregonstate.edu/instruct/cs195/demos/site/folder/filename.php

Relative path

• ../folder/file.php or ../folder/subfolder/file.php
• ../../../instruct/cs195/demos/site/folder/filename.php
• ../cs195
• Within any content pages, use a relative path to the masterpage.php file—an absolute path will not work.

In order for web authors to provide that positive experience for visitors, and to keep from spending too many hours making redundant changes to the code or layout, efficiencies are built into the site’s design from the start.

Recommendations for efficiencies:

• Include the following components in a masterpage (sometimes called a template), which is then called by each page, rather than hard-coded into each page:
  • headers (site name, logo, contact info)
  • footers (copyright, legal, contact info)
  • navigation sets (menus for audience, topics, locations, etc.)
  • dynamic content (rotating articles, news feeds, staff highlights, advertising, product highlights, etc.)
• Within those components are often graphical elements that can be handled by the style sheet and masterpage files.
  • logos
  • icons
  • buttons

Navigation Sets
Adding Style to Navigation Lists

This tutorial will teach you to set up a General Access PIN (GAP), ONID User Name and Password, and login to the Blackboard course management system.

If you have already set up your GAP through infOSU, skip to #2.

1. InfOSU

1. If you have not previously logged in to infOSU, go to the infOSU Electronic Services Homepage.
2. Click Faculty/Staff/Employee Information.
   • Enter your OSU ID (probably your SSN)
   • Enter your GAP (probably your birthday – mmddyy)
3. If you have trouble, enter your OSU ID and click Forgot GAP?
• You will be instructed how to configure your new GAP.

2. ONID

1. Once you are successfully logged in to infOSU, continue to the ONID site.
   • If you have already set up your ONID account, skip to #3.
     • You will not have to login to infOSU to access your classes in Blackboard once you have set up your new GAP.
2. On the ONID login page click Sign up for ONID.
   • Enter your OSU ID
   • Enter your GAP
   • Click Submit.
   • More information about ONID can be found under Getting Started.
3. Follow the instructions on the screen for setting up your ONID User Name and Password.
4. Click Change Email Forward to designate where you would like to have the email from you Blackboard courses sent.

3. BlackBoard

1. Once you have set up your ONID account, verify that you have access to Blackboard: click my.oregonstate.edu under Quick Links.
• Don’t click the link above if you’re looking at this page inside Blackboard.
2. Click the Login button on the Blackboard home screen.
   • Enter your ONID User Name and Password.
     • Click Login.
     • From your "My Oregon State" page you will see a list of courses you are enrolled in.
   • Click a course title to view that course.
     • The selected course will open. You can view materials already entered in the course by selecting from the menu on the left.

4. ONID FTP

1. Login to ONID again if necessary.
2. Copy the FTP link address: ftp://ftp.onid.orst.edu
   
   • This is one address that allows you to transfer files from your hard drive to the web server space.
   • Use it public_html directory for web pages only.
     • If you store large files there, which aren’t meant to be viewed online, then you’ll use up valuable space for course projects.
   • Memorize this address so you don’t have to login to ONID each time you need it.
3. While in Windows, open an Explorer Window (not an Interent Explorer window).
   • Paste the FTP address you copied in step 2 into the addres bar of the new file exploring window. Click Return.
   • You will be asked to login to this window with your ONID userID and password.
   • Open the public_html folder to view and add/delete public web files.
     • Drag and drop files right into this transfer window.
   • Settings you may need to update to get this working:
     • In an Explorer window, click Tools->Internet Options->Advanced->Enable FTP folder…
       • Also find this here: Start->Control Panel->Internet OptionsAdvanced->Enable FTP folder…
   • If using a Mac OSX, then in the Finder, Go->Connect to Server.
   • Type afp://onid-fs.onid.orst.edu instead of the ftp address above.
     • This will mount the web server file directory on your Finder.
     • Open the public_html folder to view and add/delete public web files.
       • Drag and drop files right into this transfer window.
4. Back up.
   
   • Think of one of these copies, either the local or the remote, as your backup.
   • But you must (you must) back up your files to disk or USB drive each session you work. Why? If you haven’t lost important files yet in your life, you will; please don’t let it be while in my class!
     • Copy your files to a disk.
5. Logout and view the site in a browser.
   
   • oregonstate.edu/~oniduserid

5. ONID Database (CS 295 only)

1. Login to ONID and click Web Database.
   • Print or carefully write down your database name and password.
     • They are different from your regular ONID login.
   • Add a table.
     • For example, if you want to track the books you’ve read, name it books.
     • Define fields and their properties, such as:
       • Title text null
       • Author text null
       • Date date null
   • Add another table.
     • For example, a list of visitors who want to receive your monthly newsletter; name it newsletter.
     • Define fields and their properties, such as:
       • name text null
       • email text null
   • Add data to your tables.
   • Browse.
   • Query.
   • Logout.

Readings

HTML for the World Wide Web, 5th Ed.

Page 408.

Troubleshooting FTP issues

Macromedia Technote updated Sept 2002.

Dreamweaver Setup

Secure FTP (SFTP) or Shell are more secure than FTP, but either are acceptable for the course.

1. Launch Dreamweaver
2. Site->Define Sites… or Site->Manage
   Sites
   • In the Local tab:
     • Name the site.
     • Locate the site’s directory on the local hard drive.
     • For OSU ONID useres, type the URL for the site:
       • http://people.oregonstate.edu/~oniduserid
       • Replace oniduserid with your ONID user id.
   • In the Remote tab:
     • Choose FTP from the dropdown menu.
     • Host: shell.onid.oregonstate.edu
     • Directory: public_html
       
       • If you have already added a directory for the site you’re building, then add that name in the directory field:
         • publich_html/sitedirectory
     • UserID: type your ONID userID
     • Password: type your ONID password
     • Click the SFTP button.
3. Once you’ve set up this FTP information, you don’t have to
   do it again.
   • Any files you add to your local site will be ready to upload to
     the remote site via the Put buttons.
4. Back up.
   • Think of the local site files on the hard drive as your working copy and the remote files on the web server as your backup.
   • But you must (you must) back up your files to
     disk each session you work. Why? If you haven’t lost important files
   • yet in your life, you will; please don’t let it be while in my class!
5. Logout and view the site in a browser.
   • http://people.oregonstate.edu/~oniduserid

Resources

ONID Frequently Asked Questions

About policies, setup, email, FTP.

OSU Engineering Web Publishing Tutorials

Use the breadcrumbs to find out more about computing in the Engineering dept.

By Loren Paulsen 2007

This page explains how to specify the language used in your web pages.

Setting Up the Page

This page will use the XHTML 1.1 standard. Start with the following template. The most important attributes are the encoding, charset, which must be set to UTF-8 as shown.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

</head>
<body>
...
</body>
</html>

Specifying UTF-8 ensures that non-roman characters will display correctly. The page will now work properly for any language, but it is best to specify which language will be used. This is explained in the next section.

Setting The Page Language (xml:lang)

To set the language of the page change the xml:lang attribute value. Here are some examples of language codes:

• en-us (English – United States)
• en-gb (English – United Kingdom)
• fr (French – Standard)
• ru (Russian)
• es (Spanish – Spain)
• es-mx (Spanish – Mexico)
• ja (Japanese)
• zh-cn (Chinese – PRC)

For the complete list, please see the full list of language
codes.

Setting Input Language

If your computer is already set up to enter characters in your target language,
then you do not need to do anything else. Otherwise, please see this article
on how to enable
multilingual support on your computer.

Download and install (one time set up)

1. Download the version you need (Windows, MacOSX, or Linux) onto the hard drive of your computer.
   • Save it to the desktop so you can find it again.
   • Consider saving both the Mac and Windows versions so you can use it on either if necessary.
2. Copy the program files to the USB drive.
   • For MacOSX, you may need to unarchive the files and follow installation instructions.
   • For Windows, drag the .exe file to the USB drive.
3. Open the program.
4. Close the Password screen.
5. On the remaining blank window, File->New.
6. Type a master password.
   • Read the Help information provided by the software developer.
   • Note however, that the password you choose must be committed to memory. Other passwords you add do not; they should not be memorable.
7. File->Save As.
8. Name the password database file something you can remember so you can find it on the USB drive.
9. Update Manage->Database Preferences to auto save after each entry.
10. The program will close in 5 minutes.
11. Quit when you are done working.

Passwords
When you setup a new account or launch a piece of software for the first time, a serial number or password is often required. Some programs will generate a password for you; some let you choose. If you are setting up an account and…

• If no password is provided or generated, then use Password Gorilla’s Generate Password button.
• If a password is provided, then copy that password into Password Gorilla’s Password field.

Add a new account entry

1. Open Password Gorilla and choose your new password database file from the list.
2. Type your Master Password.
3. Edit->Add Entry.
   • Fill in the fields with all the information you know about the account and write notes in the larger field.
     • If you need a password, click the Generate Password button.
     • Add special characters to it if you want.
   • Click OK.

Use a new password.

1. Open Password Gorilla.
2. Type your Master password.
3. Edit->Edit Entry.
   • Copy the password field contents.
   • If you want to see the password first, click the Show Password button.
4. Paste the password into your online account login screen.