About Web Pages and the Web:

Web pages and course web sites are fast replacing traditional handouts as a way for instructors to distribute information to their students. Creating and updating course web pages is easy to do and allows instructors to keep course information for their students current. There are a few differences between web pages and traditional handouts and understanding these differences from the beginning will help you make the best use of your time and the tools available.

Two of the main differences are:

• The layout of a web page is not fixed. Unlike handouts, where line breaks and what typeface is used to display it are fixed, the end viewer of a web page controls a lot of how a page looks. Keeping this in mind and taking a more flexible approach to designing pages will save you time and aggravation in the end.
• Information on web pages is dynamic. Because web pages can easily be updated as often as needed, it is very important that they include information about when they were last changed. It is a good idea to have contact information and the date the page was last updated at the bottom of every page. It is also important to let students know when information has been updated.
  

About Putting Web Pages Online at Rice:

In order for others to be able to see the web pages you create, the web pages must be located on a computer that runs a program called a "web server" and the computer must have a way of knowing that you want others to see the web pages. At Rice, the two main places users can put web pages to be viewed by others is on Owlnet (the main student computing network) and the RUF (the main faculty and research computing network). Departments and other organizations at Rice may have their own computers where you can put files to be viewed on the web.

On Owlnet or RUF, the way that the computer knows you have pages you want others to see on the web is by you placing them in a directory called public_html in your home directory. One of the best places to put web pages for a course is in an Owlnet course account. Contact CTS or a divisional computing consultant for help in creating an account for your course.

There are different ways of working on web pages, but the easiest way is for you to have a "working" set of files located on your computer that you can change whenever you want and an "official" set of files that the students see. Once you have made changes to your local computer and you are ready for students to view them, you move those pages over to the course Owlnet or RUF account and put them in the public_html directory. This may sound complicated, but Dreamweaver (the web site editor we'll be using for this tutorial), makes this very easy to do. The most important thing for you to remember is that all of the files that are associated with your course web pages (web pages and image files mostly) must be located in a single folder or directory on your computer.

The Site window in Dreamweaver makes it easy to keep track of the files on your local computer and on the "official" pages on Owlnet. In the image below of the Site window, the local files are shown on the right side and the "offiicial" or remote files are shown on the left.

Introducing Dreamweaver:

While Dreamweaver has a lot of advanced features for those who want to use them, it is also very easy to use. Let's get familiar with the different windows you will be using.

The Document Window:

The Document window is where you will do most of your editing. You can type in this window and it will appear almost exactly the way it will appear in Netscape or Internet Explorer. (Note: There are differences between Netscape and Internet Explorer and web pages don't always look the same in both browsers. If you are doing anything very complicated, you should make sure to look at your web pages in both Netscape and Internet Explorer. Dreamweaver helps you do this easily. It is also a good idea to look at your pages on a Macintosh, Windows-based computer, and Unix.)

For Windows users, the menu for Dreamweaver will appear in the top of the Document window. For Macintosh users, the menu will appear at the top of the desktop. Dreamweaver is almost identical on the Macintosh and Windows. If you learn to use one, you will have no problems using the other!

The Objects Window:

The Objects window displays icons of some of the common items found on web pages. These items include things like Images (), Horizontal Rules (), Tables (), and Dates (). To insert any of these items, click on the icon in the Objects window.

The Properties Window:

The Properties window contains information about whatever you have highlighted in the Document window. The image above, for example, contains information about a piece of text. You can change the size, font and color of the text from this window. There are also several buttons on the right portion of the window that are probably familiar to you from other word processing programs. These buttons allow you to make the text bold and/or italic, change the alignment of the text and even turn it into a bulleted or numbered list.

The Site Window:

Defining "sites" in Dreamweaver is one of its nicest features. A "site" are all the web pages associated with one project. You generally create a different site for each set of course web pages you are working on and perhaps for your own personal web pages. As you will recall from the introduction, it's generally a good idea to have a set of "working" files that are located on your computer (the local files) and the "official" set of pages that are located on Owlnet or RUF (the remote files). This window makes it easy to see what pages have been moved to the "official" site.

Creating a Web Site in Dreamweaver:

Creating a Site is Dreamweaver is something that you will have to do very infrequently. In general, you will want to set up a Site for each course you teach and any other web projects you are developing. A web site is a collection of pages that have something in common.

To set up a Site in Dreamweaver, you will need to know where your web pages will be "officially" located. If you are using an Owlnet or RUF account, the files will be located in a directory or folder called public_html inside your account home. This directory is automatically created for course accounts. (Go to How to create a course account if you need help.) You will also need to have set up a folder or directory on your computer you will use to maintain a local copy of your web pages. The easiest way to do this is to set up a folder or directory called WebPages and locate this someplace where you can easily find it. Inside the WebPages folder, create a folder for each of your different classes (for example, SAMP101).

To create a Site in Dreamweaver, click on the Site menu and then Define Sites... . If a site has not already been created for your course, click on New. The following window will appear:

In the Site Name box, enter a name that identifies your site. (The name doesn't appear anyplace except within Dreamweaver and is only used for you to be able to identify your site.) In the Local Root Folder, you need to either type in the path to the folder on your local computer or click on the folder icon () and find the folder by browsing to it. Check the "Refresh Local File List Automatically" and "Use Cache to Speed Link Updates." In the HTTP Address field, type in the"official" URL to the web pages you are creating. If you are placing files in an Owlnet course account, the URL will be http://www.owlnet.rice.edu/~[course account]/. For example, if the course account was samp101, the URL would be http://www.owlnet.rice.edu/~samp101/.

Next click on Web Server Info in the left column of the site window. The information at the right will change to allow you to select the Server Access type. In almost all cases, you will want to select FTP as the Server Access type. For Owlnet course accounts, fill in dialog box as shown below. The FTP Host will be forest.owlnet.rice.edu, the Host Directory will be public_html, and the Login will be whatever account you are using (course account or personal Owlnet account). If you are placing files in a RUF account, replace the FTP Host with kennel.ruf.rice.edu. Once you have edited these settings, click on OK to close the window. The Site window should now be open and should show any files you have located in your local web site folder.

Designing Your Course Home Page:

Once you've set up your course Site in Dreamweaver, it's time to get started by creating a "home page" for your class. This will be the first page that your students see and should include general identifying information about your course as well as an easy way to find further information about the class.

What information should the course home page include?

• Course title and course number
• Semester and year in which the course is being taught
• Instructor name, contact information, and office hours
• Contact information about teaching assistants
• A short description of the course
• Links to other information about the course perhaps including things like:
  • a syllabus
  • reading list
  • general grading information
  • assignment information or homework keys
  • links to other relevant sites around the web.
• Information about the web page itself: when the page was created and who to contact if there are problems.

Here's a very simple home page with basic course information on it. As an exercise, try creating a similar page for your course.

Creating a Web Page in Dreamweaver:

Before you begin creating web pages in Dreamweaver, you should know where you are going to save your web pages on your computer. You need to create a single directory on your computer where you are going to save all of the files associated with your web site. If you have created a Site for your web pages, your local file directory will already be set.

Begin by opening Dreamweaver. If you have Dreamweaver installed on your PC, you can generally start Dreamweaver by clicking on the Start button in the lower left corner of your computer screen, moving the mouse up to Programs, over to Macromedia, and then over to Dreamweaver. On the Macintosh, you will have to locate where you installed Dreamweaver and double click on the Dreamweaver icon.

When you start Dreamweaver, the main window will be a blank Document window. This window will be used to create your web page. Below the Document window, the Properties window should be open. If it is not, go to the menu bar and select Properties from the Window menu.

If you have created a Site for your web pages, make sure the Site window is open and you have selected the appropriate Site. If the Site window is not visible, go to the Site menu, select Open Site..., slide your mouse to the right and select the appriopriate Site for your project.

Let's start by typing in the semester and year the course is being taught in the Document window. The text will appear in the upper left corner of the Document window. To move it to the right and change the font, we'll need to learn about editing text.

Editing text:

Changing the size, typeface and alignment of text is done using the Properties window.

Many of the icons in this window may look familiar to you.

	Align the text on the left, centered, or on the right.
	Toggle the selected text bold and italic on or off
	Change the text color by clicking on the color box

Changing the size, style and typeface of selected text in a web page is a little different than changing it in a word processing document. When you print out a document, you have total control over what the final version looks like. Because users can change the typeface used to display web pages in Netscape or Internet Explorer, it doesn't make sense to spend too much time defining the exact size or face of the text. Instead of exact sizes, text is usually defined by different styles using the first drop-down menu next to Format.

			The first drop-down menu for text formatting indicates the general style of the text. None and Paragraph indicate regular-sized text. The Paragraph style puts a blank line before and after the text. While it is possible to have an indent at the start of each line of a paragraph, it is not an easy thing to do and doens't always display correctly on all computer and browsers. Heading 1 through Heading 6 are used to indicate the importance of the text. Heading 1 produces the largest text and Heading 6 the smallest. Preformatted text sets the text to a non-proportional typeface. (That means that all of the letters and numbers are the same width.) Use Preformatted text when it is important that columns line up. (Preformatted is great for things like computer programming code.)
			Setting the font is a little different for web pages than for word processing documents. Because the pages are not printed out, you have to depend on the viewer's computer having the exact same fonts on their computer as you have on yours. This is usually very likely when you use standard fonts such as Times New Roman, Arial, Helvetica and Courier. If you choose to use a font like Comic Sans or Braggadocio, there is less of a chance that the viewer's computer will have the same fonts. In general, fonts on web pages are generally selected in font families. For instance, instead of specifying just one type face like Arial, it's better to list a few so the viewer's computer has a better chance of having it. In this case, we might specify Arial or Helvetica or any sans-serif type face.
			Font size on web pages is also not as exact as in printed word processing documents. Instead of selecting point sizes for type, it is generally better to enter fonts by more generic sizes: 1 is the smallest type size and 7 is the biggest. You can also indicate that the text should be just one size bigger or smaller than the regular size. This is called relative size (+1 or +2, -1 or -2). While it is possible to select an exact point size, that's generally a bad idea. Think about someone who is visually impaired and needs really large text in order to read the the web page. Setting an exact size of text may make it much more difficult for them to see your weg page. In general, unless you have a specific reason to change the font size, leave it as None.

Highlight the semester and year the course is being taught and edit it until you like the way it looks. In the sample home page shown above, I have selected that the text be right justified and bold. I have changed the font to Arial, Helvetica, sans-serif and I have changed the size of the text to be one smaller than the original text (-1).

Saving a Web Page in Dreamweaver:

After editing the semester and year to a format you like, let's save the document. It is always a good idea to save your document on a regular basis while you are working on it.

In the File menu, select Save. A dialog bog box like the one below will appear. First you will need to find the folder you have created to for the web project you are working on. If you followed the suggestions at the beginning of this tutorial, you probably have a folder called WebPages and then a subfolder for each particular course you are working on. Make sure the folder for the class you are working on appears in the drop-down box next to the type Save in:.

Naming web pages:

There are three important thing to know when naming web pages:

• Do not use spaces or special characters in page names:
  When naming a web page, use only the letters A-Z or a-z, the numbers 0-9, and an underscore ( _ ). Do not use diacritics or any other characters. Your computer may not care if you use upper- or lowercase letters, but the computer you will put your "official" web pages on will care. It is a good idea to write web page names in all lowercase.
  
  
• Always include a file extension in your web page name:
  Internet browsers like Netscape and Internet Explorer only know what kind of file it is looking at because of the three- or four letter file extension at the end of your web page name. The extension is always preceded by a period ( . ). Web page file names will end in .html or .htm (it doesn't matter which extension you use, but be consistent with all of your web pages. Image files and other file types will have different file extensions. (Image files will have either .gif or .jpg, which will be explained later.)
  
  
• Index.html or index.htm are special file names:
  When you name a page index.html or index.htm, it will be the first page that appears when you type in the directory but don't include a file name. (So, for instance, typing http://cts.rice.edu/ is the same as typing http://cts.rice.edu/index.html.) Sometimes you can use other file names like home.html, home.htm, default.html or default.htm, but on the main Rice web servers like Owlnet and RUF, you should always use index.html or index.htm.

Save the document you are working on as index.html or index.htm in the folder you created for your class web pages.

Working with Text on Your Web Page:

To get familiar working with text in Dreamweaver, try creating a page that looks similar to this sample course web page. Do not worry about about making any of the text blue (that indicates that the text is a link and we will work on that in just a bit).

Remember to Save your file often!

Adding a Title and setting Other Page Properties:

Notice that at in the blue bar shown at the top of the window above displays "SAMP 101 Home Page - Rice University". This is called the page title. Giving your page a title helps users know something about the page they are looking at and is used by search engines when they list pages that fit your search criteria. Every web page should have a title.

To set the title of a page (as well as the background color and several other page qualities, go to the Modify menu and select Page Properties.

Type page title in the Title text box. You will notice that you can also set a background image for your page, as well as various colors for the background, text and links, and margins for your page.

After you have made changes to the Page Properties, click on OK to make the changes and then remember to save your web page again.

Viewing Your Page in an Internet Browser:

Dreamweaver is a graphic web page editor. While the pages you create in Dreamweaver will look almost identical when viewed with an Internet browser, there are some differences in the ways that Netscape, Internet Explorer and other Internet browsers display web pages. Because of this, it is always best to preview your web pages in a browser before making them available. Ideally, web page creators should view their web pages in several browsers to make sure the pages display as desired. In reality, unless you are using very complicated web page designs, you can be fairly sure that your pages will look similar when viewed on other platforms and with different browsers.

To preview your web pages using Netscape or Internet Explorer, go to the File menu and select Preview in Browser and select the browser you wish to use to preview your page. If no browsers have been set up, select Edit Browser List.... The following window will appear.

Click on to add a new browser and then click on Browse to find the Internet browser you want to use to preview your web pages. When you have set up the browsers you want to use, click on OK to close the window.

Instead of using the Preview in Browser command, you can also preview the pages by separately opening an browser such as Netscape or Internet Explorer and then choosing to open the local file.

Adding Links to Web Pages:

When you want to be able to click on text or an image and be taken to another file or prompted to write an email, you want to create a Link. The most familiar kind of link is the kind that takes you from one web page to another, but links are also used to prompt for an email message or to open other types of programs like Telnet sessions.

Links to other files are created and edited from the Properties window. Highlight the text you want to be linked and then move to the Properties window.

You can type in the name of the file you want to link to (for instance, syllabus.html) or you can browse for the file by clicking on the folder icon and then navigating to the file. If you want to link to another site on the Internet, you can copy and paste the URL into the Link field.

Inserting an Email Link:

There are two ways to insert an email link. The first is to type in the "mailto:" and the email address in the Link box. (Make sure the text you want to link to the email address is highlighted.) A correctly filled-out Link box would look like mailto:userid@rice.edu. The other way to enter an email link is to select the Insert menu and then select E-Mail Link. When the dialog box appears, type in the text you want to have highlighted (I would recommend you use the email address) in the Text box and the email address you want to link to in the E-Mail box. Click OK to insert the email link.

Always remember to Save your web page after you have made changes to it.

Inserting Dates on Web Pages:

Moving Your Web Page to Owlnet or RUF:

Once you have created a web page, you need to move it its "official" location on the remote server (probably Owlnet or RUF) before others will be able to view your page. To move any web pages you have created, use the Site window. Remember that we set up a Site in Dreamweaver to keep track of your web pages. If the Site window is not open, choose Site menu and then choose Open Site.... Select the appropriate web site for your course.

To move the pages to their final location, the easiest way to do this is to use the Synchronize... command under the Site menu. The dialog box which appears allows you to select between several choices. To move the newer files you have created over to the "official" or remote web location, choose Put newer files to remote. The other choices are self-explanatory. If you are using FTP Access to get to the remote file location, you will be prompted to enter the password for your course or personal account.

Converting a Word Document to a Web Page:

Other Formatting Features:

How to Request a Course Account:

The easiest way to request a course account is to submit a problem to the Rice Problem Tracking System. You can do this by submitting a form at http://problem.rice.edu/ or by emailing problem@rice.edu. You should include the following information in your course account request:

• Title and number of course: (SAMP 101: Intro to Course Web Pages)
• Course account userid desired: (samp101)
• Account owner (name and userid): (John Smith (jsmith))
• Other userids to put in associated Unix group: (Include userids of grad students, dept assistants, or TAs who will be working on your course)
• Account from which to copy initial password (Owlnet or RUF): (generally your RUF account)
• Additional instructions if any (special handling of e-mail, etc.): (A public_html directory should be created by default, but it doesn't hurt to include a reminder.)
  

It will generally take at least two or three days to have a course account created. Please plan ahead.

Classroom Technology Services (cts@rice.edu)
Educational Technology Services
Rice University, Copyright 1999-2002

Last updated: