| 1. |
First we will set up your workspace and web project using Eclipse:
- Start Eclipse.
- Go to the File menu and select Switch workspace , then Other....
- Make sure your jump drive is plugged in, then type E:\workspace and click OK
- Go to the File menu and select New , then Project....
- In the Project dialog select Aptana Projects, then Default Web Project.
- Press the Next button.
- For Project Name: type CS 1 Lab.
- Click Next 3 times.
- Click Finish.
|
| 2. |
Next you will create an HTML file that you will use as your homepage.
- From the File menu select New, then File.
- Select the CS 1 Lab project, and for File Name: type index.html, and click Finish
- Create a homepage for yourself. Make sure to include a list, a table, and some links. Be as creative as you like
|
| 3. |
When you want to view your webpage, you need to set up FileZilla to upload it to the CS server.
- To view your web page press the green button with the white triangle in it.
- To upload your web page to the CS web site you will need to start up Filezilla.
- Type in the following:
| Host: | cs.wvutech.edu |
|---|
| Username: | your username here |
|---|
| Password: | your password here |
|---|
| Port: | 22 |
|---|
- Click Quickconnect.
Several files should pop up in the right panel, including a folder called html.
This is your web site.
- For Local Site type E:\workspace\CS 1 Lab\ and hit Enter.
- Several files should pop up in the left panel, including one called index.html.
This is your web page.
- Drag the index.html file from the left panel to the html folder in the right panel.
You have now copied your web page to your web site
- Now you can open up your favorite web browser and view your webpage at http://cs.wvutech.edu/cs1/username/
where username is replaced by your username.
|
| 4. |
Next you will design a web page that uses JavaScript to promt the user for input for several types of words, then substitutes
those words into the text of the web page. For example:
It was a adjective kind of day when person's name walked out into the street.
The sky was a deep color, and same name was walking his new pet animal...
The following substitutions are made:
- adjective = smarmy
- person's name = Chris
- color = mauve
- animal = gnu
After the substitutions we get:
It was a smarmy kind of day when Chris walked out into the street.
The sky was a deep mauve, and Chris was walking his new pet gnu...
|
| 5. |
Create an HTML file for your interactive story page
- From the File menu select New, then File.
- Select the CS 1 Lab project, and for File Name: type lab1.html, and click Finish
- Create a web page that prompts the user for input and displays it to the screen as described above.
The words that you prompt for should be stored in variables, which are then used to display the completed story.
The content of the story can be anything you like. Be creative! However your story must satisfy the following conditions:
- It must be at least two paragraphs long
- It must have at least six missing words
- At least one of the missing words must be used multiple times in the story.
For example, the person's name was used twice in the sample story above.
- The page should have a title, centered at the top, which includes your name.
|
| 6. |
When you want to test your web page you can upload it to your website by following the instructions from step 3 above.
Rember the file you are uploading this time is lab1.html.
|