Creating Editing & Uploading Web Pages

1.Prerequisites
2. Objectives
3. Topic Highlights

4. Topic A- Client and Server

• 4.1Setting up the Server Directories
  • 4.1.1 What is the Mason Cluster
  • 4.1.2 Mason Cluster and it password
  • 4.1.3 Setting up the Mason Cluster web directory
  • 4.1.4 Using WS_FTP to set up a course web directory
  • 4.1.5 Launch, setup, and connect with WS_FTP
  • 4.1.6 Make a directory on the server
• 4.2 Setting up the Client Folders
  • 4.2.1 Create a client web folder

5. Topic B- Websites and Webpages

• 5.1 Our course website plan
• 5.2 Our course homepage plan
• 5.3 Authoring tools

6. Topic C- Building a Webpage

• 6.1 Grab a graphic from the web
• 6.2 Opening Composer
• 6.3 Create a page
• 6.4 Create links
• 6.5 Format some text
• 6.6 Add a graphic

7. Topic D- Link Multiple Pages

• 7.1 Grab pages from the web
• 7.2 Link homepage to new pages

8. Topic E- Publishing a website

• 8.1 Launch WS_FTP and course web directory
• 8.2 Locate and open web folder and transfer
• 8.3 View website

9. Topic F- Edit a Webpage

• 9.1 Open an existing page
• 9.2 Create links internal to a page
• 9.3 Link the menu and format

1. Prerequisites

In order to fully participate in this workshop, you must be able to:

• Windows Prereq's (LRO-WIND-101 Fundamentals of Windows 95):
  • Save a file to a specific directory/folder using the "file/save as ..." process
  • Create a directory/folder during the file save as process
  • Comfortably move between multiple application windows using the task bar at the bottom of your screen
  • Find files on your computer using the Find tool
  • Open a program using the start menu
• Workshop Specific Prereq's
  • use a web browser (Netscape Navigator)
  • telnet into your mason cluster account OR have a 4-digit PIN to activate your mason cluster account

If you do not know something listed above, we strongly suggest that you sign up for the prerequisite workshops before taking this workshop.

<back to top>

2. Objectives

At the end of this workshop, the participant should:

1. Have a basic understanding of file/folder management for their Mason root web directory
2. Be able to create a basic course website loaded in their Mason root web directory
3. Be able to upload webfiles to their Mason web directory
4. Be able to use composer to link pages, insert images, and format text.

3. Topic Highlights

Topic B- Websites and Webpages

Topic C- Building a Webpage

Topic D- Link Multiple Pages

Topic E- Publishing a website

Topic F- Edit a Webpage

<back to top>

4. Topic A- Client and Server

Understanding the difference between the client and server will enable you to successfully manage your website development processes

• Client -
  • This is you on your computer using your browser.
  • Where copies of webpages, sent from a web server, viewed via a browser
  • Where you create and store your original website and its files
• Server -
  • This is where copies of webpages are stored so they can be sent a person's browser upon request
  • Where you place a copy of your website so people can view it over the web

4.1 Setting up the Server Directories

Before setting up server directories, know this:

Folder versus Directory - For illustration purposes, we will refer to directories on a server and folders on a client. In actuality, folder and directory mean the same thing.

Client versus Server - Server directories and client folders need to be set up the same (mirror images of each other) to ensure that a website built on a client will work the same when it is ported to the server

The following exercises will Set up Server Directories for a Website

1. Look at what the Mason Cluster is
2. Mason Cluster account and password
3. Configuring the Mason Cluster account to have a web directory
4. Creating directories to hold a website

4.1.1 What is the Mason Cluster

Mason Cluster - Has many functions. The most common are email and websites.

Access to Mason Cluster - There are two basic "doors" or "windows" that we use to log into the Mason Cluster - Telnet and WS_FTP

Mason Cluster as an Entrance to other Servers - If you have a website on the Mason Web or on Classweb, you log into the Mason Cluster and then change directories (ChDir) to the other servers

<back to top>

4.1.2 Mason Cluster and its password

The first step is to ensure that you have access to you Mason Cluster Account. Let's investigate:

• Do you have an active account on the Mason Cluster and/or do you know your password for this account?
• If no, get your username and/or password by using your usernumber and 4-digit PIN by using the following link:
  • https://mason.gmu.edu/ISO/SysEng/Mason/account.html

Don't know the answers to these questions, take these "Tests"

• The Email Test - If you use GroupWise email or the New Netscape Memo email and have never used Pine to view your email, you may not know your Mason Cluster password. The password for the Mason Cluster is not be default the same as these other mail systems.
• The Website Test - Do you remember ever uploading a webpage to your Mason Cluster Account? One way to check is to go to the URL that would be your web address:

  http://mason.gmu.edu/~your_mason_username

• The Telnet Test - Have you ever used Telnet to login into a Mason Server? If no, you may not know your password.
• The Username Test - Do you have a George Mason email address? If no, you need to activate your account to get you password and username. If yes, you know your username (e.g., jdoe@gmu.edu - jdoe is the username)

4.1.3 Setting up the Mason Cluster Web Directory

The following process will set the permissions and create a folder so that your Mason account can be seen as a Web site. If you already have your account set up, please wait patiently. (You will only have to complete this process once).

Step 1 - Launch Telnet

1. Click on Start (bottom left of your screen)
2. Click on Run
3. Type Telnet
4. From the Telnet window, click on Connect (assume this is the first time you have done this)
5. Click on Remote system
6. Enter mason.gmu.edu for the host name. Leave the other options as they are.

Step 2 - Login

1. Enter your masonusername and hit enter
2. Enter your mason password and hit enter (remember, we just confirmed what these are)
3. For those who use Telnet for email - DO NOT type Pine

Step 3 - Set up your root web directory. Type each line then press enter. You should see another prompt if you have typed it correctly.

1. Create your website folder:
   • mkdir public_html
2. This gives everyone permissions so they can see your pages:
   • chmod 755 public_html
3. Move back to the top of your directory root:
   • cd
4. Enable your account to web accessible by typing the following (don't forget the space and period after 711):
   • chmod 711 .

4.1.4 Using WS_FTP to set up Course Web Directory

• The public_html web directory is considered your root web directory.
• This is where you can store multiple websites.
• Example website URLs would look like:

  http://mason.gmu.edu/~username/coursedirectory1
  http://mason.gmu.edu/~username/coursedirectory2
  http://mason.gmu.edu/~username/coursedirectory3

• You can also have a homepage at the URL http://mason.gmu.edu/~username. It can be used to act as a table of contents that points to the various course websites you have created. See the illustration below to see how a you can have a group of websites and an index.html file to bring them together.

<back to top>

4.1.5 Launch, Setup and Connect with WS_FTP

Remember, this is just like using a different door or window (Telnet being the other one) to see and access the Mason Cluster

Step 1 - Launch WS_FTP

Step 2 - Click on the New button to pretend you are setting up WS_FTP for the first time

Step 3 - Enter the following information, replacing myname gmu connection with your actual name gmu connection. Also replace myusername with your actual Mason username. This is the same username and password you use when logging into Telnet.

Step 4 - Click apply to save the profile settings

Step 5 - Click okay to connect. If you are asked for your password again, enter it.

For additional information and direction on using this tool, please review this help page

<back to top>

4.1.6 Make a directory on the server

Remember, we are creating a web directory directly inside the public_html directory. It will hold our course website. This process can be performed for each website that you want to reside in your root web directory (public_html).

Step 1 - Double-click public_html to open it.

Step 2 - Click on the remote system MkDir and enter french101 in the Input box shown below. Click OK.

Step 3 - Click the Close button on the left-bottom of the window

<back to top>

4.2 Setting up the Client Folders

Finished - We have just set up the directories on the Server.

Next - Now we need to set up a mirror image on the client side. The following exercise shows you how to set up folders on a client (local system)

Note: Once this is done, future web sites can be added to the local folder prior to setting them up on the server. Once the web site is complete, you can create a matching directory on the server and upload the files.

<back to top>

4.2.1 Create the client web folder

Remember, we are going to say Folder when talking about the client storage area.

• We are going to do this because Windows Explorer calls these storage areas Folders.
• This process will setup a Folder structure similar to the one on the server.
• This is a recommended setup for your websites when you leave this workshop and will help ensure that what you build on the client will work on the server

Our goal for this exercise --->

Step 1 - Open Windows Explorer by right clicking on the Start button and then on Explore. If this doesn't work, right click on mycomputer and then on Explore

Step 2 - Locate the C:\ drive in the left window and click on the +

Step 3 - Locate the temp folder and click on it. Click on File/New/Folder from the menu bar. Name the new folder your username (no spaces) and hit enter

Step 4 - Click on the new folder in the left window. Click on File/New/Folder from the menu bar. Name the new folder public_html (no spaces) and hit enter.

Step 5 - Click on the new folder in the left window. Click on File/New/Folder from the menu bar. Name the new folder french101 (no spaces) and hit enter.

<back to top>

5. Topic B- Websites and Webpages

To help you visualize what we are going to do next, we will now look at:

• A flowchart that illustrates the structure of the 3 page site we will build
• A storyboard that will show you how your homepage could look (just an option for this workshop)
• A set of web development tools (briefly) and how Netscape Composer compares to the others.

5.1 Our course website plan

<back to top>

5.2 Our course homepage plan

<back to top>

5.3 Web authoring tools

• Text - this environment provides no assistance for writing HTML tags. "What you type is what you get"
  • Notepad - Windows tool
  • Pico - UNIX tool
• HTML - supports author in preparing tags
  • Homesite by Allaire
• WYSIWYG - makes tags for you
  • Dreamweaver by Macromedia
  • Frontpage by Microsoft
  • Composer by Netscape
    • Navigator - Icon is the Nautical steering wheel
    • Messenger - Icon is a letter
    • Composer - Icon is the pen on paper

Additional Notes:

We will be using Netscape Composer to make the pages in our exercises. To learn more about using Notepad or Dreamweaver, please take either the Beginning HTML workshop or one of the Dreamweaver workshops.

<back to top>

6. Topic C - Building a Webpage

Using our storyboard shown earlier as a reference, we are going to perform the following steps in creating our homepage:

1. Grab a graphic from the web to use on our page
2. Type some text and do some basic formating
3. Create links to other websites
4. Create a link to for email
5. Preview our page in a browser

6.1 Grab a Graphic

You can use the method below to save almost any graphic on the web. However, we caution you to be respectful of copyright law. There are also many free clipart sites on the Web you can use to find graphics. For this exercise, we are going to use George Mason's logo.

Step 1 - Open a browser and go to http://www.pubs.gmu.edu/resources.html

Step 2 - Select a graphic that you want to include in your page and click on either "Enlarge" or the link of the graphic (depending on the screen showing)

Step 3 - Save the graphic file in your french101 folder that you just created. You can save a graphic in one of two ways (assumes Netscape):

1. Click on the image with your right mouse button. You will get a menu, including the option to "save images as." This is the way most people save images.
2. If the URL for the file you are looking at ends in .jpg or.gif, you can save it by clicking on "file" and then "save."

<back to top>

6.2 Opening Composer

There are several ways to launch Netscape Composer. We will use the Window menu in Navigator. You could also launch it from Start/Programs/Netscape 7.1/Composer

<back to top>

6.3 Create a Page

Step 1 - Type some text

1. Type French 101 at the top of the page
2. Insert a horizontal line
3. Type a menu that looks like: home | syllabus | schedule
4. Type some information about yourself (e.g., offices hours and location, email address, phone, etc.)
5. Type a heading called Relevant Links, then type two headings underneath it, one titled George Mason the other your department name.

Step 2 - Enter a title for the page

1. Right click on the page and then click on Page Properties.
2. Enter the title of the page. The title is what appears at the top of the browser and the small "button" at the bottom of the window when a browser is open with your page in it

Step 3 - Save the file

Save the file as index.html. This is the file name (not a title). Since this is the homepage, it must have a file name of index.html

Note: When you save a file before you assign a title to it (like you did above), a window will pop up and ask you for a title during the save process.

Step 4 - Preview the file

There are a couple ways to preview a file.

The long way (you will need to know this in the future):

1. Return to the Netscape window where these workshop material are shown.
2. Open a new browser window so you don't loose your place in the workshop - click on File/New/Navigator Window
3. Open the file you just saved by clicking on File/Open Page/ and then using Choose File to locate the file in your local web directory.
4. Once the file is located, click Open from the Open Page window.

The short way:

1. From the Composer window where you have the file open, at the botton of the page, click on the Preview button on the menu button bar.
2. Netscape 7.1 launches and you see the page. Confirm the result is the same by looking at the location window at the top and notice the path to the local drive.

<back to top>

6.4 Create links

Step 1 - External Link

• Highlight the text that you want to make into a link and link it to an external web site (i.e., absolute link). For this example, we'll make the words George Mason University into a link.
• Click on the link button on the menu bar (it looks like chain-links ).
• You will get a dialogue box that will ask you to type in the link address. Where it says "link to a page location or local file," type the URL for your file (http:// . . .)
• Add another link to your list

  Hint: Don't forget to type "http://"

Step 2 - Email Link - You can add an e-mail link the same way you add other links.

• In the contact area of your homepage, type your email address.
• Highlight the email address
• Click on the
• Type "mailto:youremail@email" where you typed the link to the external site.

Step 3 - Save your work

Step 4 - Preview

<back to top>

6.5 Format some text

Web Friendly Fonts

1. Hit Ctrl-A on your keyboard to select all the text
2. Select a font set from the properties box
3. Save

Set a Font Size

1. Highlight the title on your page
2. Select a font size of 5 from the properties box to make it larger
3. Highlight the text that looks like a menu
4. Select a font size of 2 from the properties box to make it smaller
5. Save

Change Color

1. Highlight the title on your page
2. Click on the color icon (next to the size dropdown menu) in the properties box and select a color
3. Save

6.6 Add a Graphic

Step 1 - Return to Composer and index.html

Step 2 - Insert your new image to your page. To do this, position your cursor where you want to insert the file. Then click on the graphic button on your menu bar ( ). You will then see a box like this:

If you click on "Choose File" , you will be able to choose the graphic you saved in the previous exercise. Note: Make sure that you click on "Actual Size." Sometimes, Composer will make your image really small if you do not click "Actual Size." Notice you can also choose various text alignment and if you want space or a border around your image.

Step 3 - Save the file

Step 4 - Preview the page

Step 5 - Upload index.html and graphic to your account

Let's practice this one more time!

1. Go to the IRC homepage (http://www.irc.gmu.edu/) and save the IRC logo onto your local computer.
2. Add the IRC logo to your index.html page.
3. Save the file.
4. Preview the page.
5. You probably don't want the IRC logo on your homepage on the web, so don't bother to upload it. In fact, once you've gotten it to work, you can delete the image by going back to your composer window, clicking on the image, and then hitting the "delete" key on your keyboard.

7. Topic C - Link Multiple Pages

In this next set of exercises,

1. We are going to download two files to practice with. These files have content ready for your editing
2. We are going to then link the homepage to each of these files

<back to top>

7.1 Grab webpages from the web

Step 1 - Right-click on the links below

• syllabus.htm
• schedule_fall01.htm

Step 2 - Click Save link as - This is a Netscape command. If you are using IE, try Save target as

Step 3 - Locate your french101 folder on the local computer and save it inside this folder c:\temp\username\public_html\french101

<back to top>

7.2 Link homepage to new pages

Step 1 - Return to index.html in Composer

Step 2 - Link to an internal page (i.e., relative link)

1. Highlight the word syllabus
2. Click on the link icon
3. Click on browse and locate the syllabus.htm file
4. Click on syllabus.htm, then click on Open

Step 3 - Highlight the word schedule and link to schedule_fall01.htm

Step 4 - Save index.html

Step 5 - Preview and test your links

<back to top>

8. Topic E - Publishing a website

This is going to be a 3 step process

1. Launch WS_FTP
2. Open public_html and french101 on both the client and server side
3. Upload the files

Note: Remember, we have already set up a directory on the server to hold our french101 site. If you create a new site, you would want to login via WS_FTP, create the new web site directory and then upload your new site.

<back to top>

8.1 Open web course directory

Step 1 - Launch WS_FTP (see section 4.1.5 for a quick reference)

Step 2 - Double-click on public_html to open this directory

Step 3 - Double-click on french101 to open this directory

Note: A directory must be "open" in order to put files in it

<back to top>

8.2 Open web course folder and Transfer

This step can be a little confusing. The steps presented here are just one way to do this process.

Step 1 - Click on ChDir on the local system side of WS_FTP. Enter c:\ and click OK. This is the fastest way to the temp folder on the client side

Step 2 - Scroll down and double-click on the temp folder

Step 3 - Scroll down and double-click on the your username folder

Step 4 - Scroll down and double-click on the public_html folder

Step 5 - Scroll down and double-click on the french101 folder

Step 6 - Highlight the contents of the french101 folder (hold the ctrl key and click on each file)

Step 7 - Click the arrow that points towards the remote system side on the screen

Note: When the transfer is complete, you will see that the server side of the FTP tool displays a copy of the files you just transfered from the Temp folder on the client side.

<back to top>

8.3 View your website

Let's look at your new course web site

Step 1 - Open a browser window. Remember, you can open a new window for testing or you can you an existing window.

Step 2 - In the location window, enter your URL using the sample URL below as a guide:

http://mason.gmu.edu/~yourusername/french101

Note: Remember, there are no spaces in french101.

Step 3 - Troubleshooting

1. Directory Permissions - The permissions may not be set correctly. Sometime this happens. Ask for assistance
2. File Permissions - The permissions may not be set correctly. Sometime this happens. Ask for assistance
3. Homepage File Name - You did not name your homepage index.html. Maybe you used myindex.html or Index.html or index.htm

<back to top>

9. Topic F - Edit a webpage

This is where we get a little practice opening a file. So far, we have been working with a file that we created versus opening.

In this part you will have a chance to practice:

• Making links to files in your site by completing your menus on each page
• Uploading edited files.

9.1 Open an existing page

Step 1 - Open syllabus.htm by clicking on File/open page

Step 2 - Choose file ... - locate your local web site folder c:\temp\username\public_html\french101) and open syllabus.htm

<back to top>

9.2 Create links internal to a page

When linking to a file or a location on a file, you need something to link to. Composer calls this a Target. Technically it is called a Named Anchor.

This is a two step process:

1. Set up your Target (a location inside your page that you want to hop to)
2. Then shoot at it with a Link

Step 1 - Set up your Target

1. Highlight the word that you want as the target.
2. Click on "Insert", then "Named Anchor"
3. Notice that a name for your target appears in the box. Keep it or change it. It is up to you - Just use one word, no spaces.
4. Click OK.

Step 2 - Shoot at the target with a Link

1. Highlight the word in the menu at the top of your page that corresponds to the target you just created
2. Click on
3. Click on the applicable target listed in the target box

Step 3 - Repeat steps 1 and 2 until several targets and menu items are linked

Step 4 - Save

Step 5 - Preview

<back to top>

9.3 Link the menu, format, upload

Open syllabus and schedule_fall01 and do the following:

1. Link the menu items to the other two pages. (see section 7.2 as a reference)
2. Practice formatting (see section 6.5 as a reference)
3. Upload again. (see section 8.3 as a reference)