CSE 610 Computers in Education

Western Oregon University

Home
Syllabus

Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5

Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10

Summer
Schedule

email Denvy

Reading Resources | Assignments | Links

Creating a WebSite

Website Language

Our approach to webpage design has been gentle in that we have been saving our Word, Excel and Powerpoint document as webpages. In that process we've discovered some difficulties where we didn't seem to have control.

 We have also saved the webpages directly into a folder called public_html while on the WOU campus. This is unique to WOU. Often another program that moves the webpage document from your computer to the server is necessary. This process is transparent at WOU. Remember that your webpages can be accessed from any computer connected to the Internet with an URL (Uniform Resource Locator) address similar to http://www.wou.edu/~jsmith/grades.htm. The server in this case is wou.edu; the primary folder is ~jsmith which was called public_html when you logged on as jsmith. The name of the document is grades.htm.

 Webpage authoring programs function must like MS Word when the document was saved as a webpage, except that true webpage authoring programs can do more, are more flexible and are designed to create webpages as a primary function, not a secondary function. In this class, two authoring programs will be considered: Dreamweaver, a very high quality authoring program and quite expensive, and Netscape Browser which has fine features at the basic level and is free to be downloaded from the Internet.

HTML

 The coding to create a webpage is HTML which stands for HyperText Mark-up Language. HTML is not a computer programming language. It's a processing of placing special codes within text so all browsers will interpret the code the same. These codes have been called "tags" and take the form <head>. Most tags require a beginning tag (when a feature is to start, eg bold) and an ending tag (when the feature is to end). The tags around the word bold would make that word bold in a browser, that is, on the Internet. The beginning and ending tags cannot overlap with the beginning and ending of another set of tags.

 Through the sophisticated evolution of designing webpage many other coding options are now available besides tags. With this introductory website, we will primarily use tags. Other coding processes are beyond the scope of this class. For some of you, coding in tags may be beneath your skills.

 Even in the most sophisticated webpage coding certain basics remain. They are as follows:
<html>
 <head>
 <title>Title of Webpage</title>
 </head>
 <body>
--This is where the bulk of the coding for the webpage will go.--
 </body>
</html>

 If you search diligently you will find these tags in all webpages.

Basic HTML Elements

 While the authoring programs will offer us numerous high level options that are visually appealing, we will focus of three elements. With these three elements and a little coding we can generate a very attractive functional webpage. We'll add a fourth feature to bring our skills up a notch.

Text
 Text is created on a webpage by merely typing some text. The appearance of the text can be modified by many tags. Here are a few:

for bold; may do the same
for italic
does great effects such as smaller or
larger
see the additional features in the authoring program

Images
Images are included on the webpage with the tag <img src="picture.jpg">. There is no ending tag in this case. Images do not become a part of the webpage. This tag merely tells the browser where to find the image, so the image must be "sent" to the server along with the webpage HTML document. A good management process is to put all images into one folder and make certain that the folder and the HTML document are together in the server. You should place the images or pictures into the images folder first and then code the HTML document. This is particularly true when working with authoring programs.

Create a new folder in your public_html and name it images. Place your pictures and images in that folder. When adding an image to your webpage, select the image from that folder. The authoring program will remember where it found the image. This assumes you will save the webpage in the appropriate folder. Your tag will now look like this: <img src="images/picture.jpg"> indicating that the picture is in the folder images.

Note: It is advisable if a folder named cse610website be created on the desktop first. Then create a folder named images in that folder next. Finally save all webpage documents in the cse610website folder and all pictures in the images folder. The cse610website folder will be dragged directly into your PUBLIC_HTML folder when you're finished.

The .jpg or .gif indicates what type of formating is used to save the picture. There are many different formating types but the two most dependable are .jpg and .gif. The format .jpg must be rectangular and it's quality decreases with each modification and save. The format .gif can be irregular in shape and can be animated, but it requires more storage space and can have poorer color quality.

 Several other parameters in the <img> tag will affect its size and location. For example, <img src="images/picture.jpg width=100 align="right">.

Hyperlinks
 The true value of webpage and hypertext is that you can jump from one part of a page or the Internet to another by merely clicking on links, which could either be text or a picture. The tag is an anchor: <a> </a>. In its useful expanded form it looks like this
<a href="http://www.wou.edu">WOU </a> to link to a specific site
or
<a href="page2.html">Go to page 2 </a> to link to another webpage in the same website
or
<a href="page2.html"><img src="images/picture.jpg"></a> when a picture serves as the link.

 Another very special link is to open and start an email with a preset email address. It may look like this: <a href="mailto:denvys@yahoo.com"> where denvys@yahoo.com is the email address of the person to receive the email.

Tables
 Webpages can be very unfriendly when it originally comes to placing pictures and text randomly on the page. One aid is the tag <table> which allows the author to divide the page into cells, much like in Excel, except in various sizes, and then placing the text and pictures in the different cells. This is most easily done using the authoring program by inserting a table. Preplanning the layout is very important when creating a webpage.

Authoring Programs

 When creating a new webpage, open the authoring program (Dreamweaver or Netscape in our case) and create a new document. [File/New/Create Basic HTML in Dreamweaver, select View/Design; File/New/Composer Page for Netscape]. If you're going to use a table, and I recommend it, Insert/Table or click on table icon. Choose the number of rows and columns and click OK. Type text as you want it. In Dreamweaver the features for fonts are in the Property at the bottom of the page (click on Window/Properties, if they don't show). In Netscape most font features are above the textbox.

 Before inserting pictures you must gather pictures from the Internet or many other sources, and place them in a folder called images in your cse610website folder. The click on the image icon or Insert/Image and find the picutre you want. Resize the picture as desired.

 When creating a hyperlink, highlight the text or picture. In Dreamweaver, go to the properties at the bottom of the page and insert the link address. In Netscape, click on Link and insert the address. If you are linking to another webpage document that you are creating, you may Choose File in Netscape or click on the blue folder by the link textbox in Dreamweaver.

 When creating more than one webpage for a website, plan to have a "first" homepage which links to the other webpages. Each webpage should link back to the homepage and it's best if all pages are similar in design. All webpages may also link to each other. A useful strategy to easily expedite this plan is to create one well designed webpage with all its working hyperlinks, and then save it multiple times under different names for each of the consequent webpages. Remember to use short names, include the .htm or .html extension, not use spaces, use consistent format, and consider not using capitals. After all webpages are saved with a similar format and all the hyperlinks working, return to each page and edit it as you planned. All webpages must be saved in the cse610website folder.

Web Design Assignment

 Using Dreamweaver or Netscape Composer, create an educational website with an interactive lesson appropriate for the authorization and content you plan to teach. Your website should include:

A homepage to grab attention and introduce your topic
Links on your homepage to all other pages
At least five additional pages with supporting information
Home buttons/links on every page
At least two images
Links to at least two websites that students can access for more information

Before you start building your website:

Create a new folder on your desktop (File / NewFolder)
Give your folder a short name, use cse610website (all small letters) for this class
Name your homepage: index.html
Save your homepage to your website folder
Save all pages, as you work on them, to your website folder
Inside your website folder, create another new folder to hold your images
Give this folder the name images (all small letters)
Put all images you plan to use into the folder before you add them to your website

When your website is complete:

Drag your entire website folder into the PUBLIC_HTML folder in your network folder
Open your web browser and type your personal URL into the address bar to check your website using the following format:
www.wou.edu/~your_login_name/cse610website

When editing your website:

Drag your entire website folder from the public_html folder onto your desktop
Make your change and modifications to your website
Repeat the process of dragging your folder back into the PUBLIC_HTML folder.

Other helpful links are on the Links page.

This assignment is due by the end of the term, August 3.