cop3502 - spring 2010 assignment 4 working with css and...

16
COP3502 - Spring 2010 Assignment 4 Working with CSS and Javascript Due Sunday, 21th February at (23H59) February 11, 2010 1 Objective In this assignment you will be asked to show your ability to accomplish tasks with some using CSS templates and Javascript. You will be asked to upgrade and create a series of different web pages. 2 Requirements You should complete this assignment using the SSH Client to log into ww2.cs.fsu.edu. You may edit your web-pages on your local machine and then use the SSH file transfer utility to move files to the web-server. The assignment is due Sunday, 21th February at (23H59). I will be using a script on my server that will download all your created web-pages to a specific folders. It is therefore important to adhere to the naming schemes for each file. Failure to do so will result in a zero grade for that section of the assignment. Make sure that correct permissions are set for each file so that it is world accessible ie. I can direct my browser to your page and view it. Test your pages on the webserver before the due date. You can access your webpages at http://ww2.cs.fsu.edu/ ~ [username] where [username] is the username you use to log into the ww2 server. 1

Upload: others

Post on 20-Mar-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

COP3502 - Spring 2010

Assignment 4

Working with CSS and Javascript

Due Sunday, 21th February at (23H59)

February 11, 2010

1 Objective

In this assignment you will be asked to show your ability to accomplish tasks with some using CSS templatesand Javascript. You will be asked to upgrade and create a series of different web pages.

2 Requirements

You should complete this assignment using the SSH Client to log into ww2.cs.fsu.edu. You may edit yourweb-pages on your local machine and then use the SSH file transfer utility to move files to the web-server.The assignment is due Sunday, 21th February at (23H59). I will be using a script on my server that willdownload all your created web-pages to a specific folders. It is therefore important to adhere to thenaming schemes for each file. Failure to do so will result in a zero grade for that section of the assignment.Make sure that correct permissions are set for each file so that it is world accessible ie. I can direct mybrowser to your page and view it. Test your pages on the webserver before the due date. You can accessyour webpages at http://ww2.cs.fsu.edu/~[username] where [username] is the username you use to loginto the ww2 server.

1

Page 2: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

3 Part 1 - Upgrading our index

3.1 Description

1. Navigate to your public html folder under your home directory.

2. Make a copy of your old index.html and name it assgn3 index.html.

3. Set the correct permissions for index.html so that it is world readable.

4. Create a new folder called assgn4 under public html. Make sure you set the correct permissions forthis new folder.

3.2 Templates

We will be using the FSU CSS templates for the rest of the assignment. Any new webpages created will havethis template integrated. This will result in a uniform look and feel for our webpages. The templates havebeen downloaded for you. There are two seperate templates which are linked for you at http://ww2.cs.fsu.edu/~nienaber/teaching/COP3502/. Look under the menu option to the left called Templates. Youwill see two links, one to header.zip and one to frontpage.zip.

Extract the templates to your public html folder. Depending on your extraction you will have two newfolders frontpage and header or three new folders frontpage, header and MACOSX.

nienaber@ww2:~/public_html$ ls -ltotal 2108drwxr-xr-x 4 nienaber nienaber 4096 2010-02-10 14:25 frontpage-rw-r--r-- 1 nienaber nienaber 1815650 2010-02-10 14:24 frontpage.zipdrwxr-xr-x 4 nienaber nienaber 4096 2010-02-10 14:25 header-rw-r--r-- 1 nienaber nienaber 329738 2010-02-10 14:24 header.zipnienaber@ww2:~/public_html$

Two folder case: If you have the latter of two new folders frontpage and header then follow theseinstructions. Navigate into the frontpage folder. In the folder frontpage is two folders frontpage andMACOSX.

nienaber@ww2:~/public_html/frontpage$ lsfrontpage __MACOSXnienaber@ww2:~/public_html/frontpage$

Delete the folder MACOSX. Navigate into the folder frontpage. Copy the content of the folder frontpageto the public html folder:

nienaber@ww2:~/public_html/frontpage/frontpage$ lscss img index.html jsnienaber@ww2:~/public_html/frontpage/frontpage$

• Folder css.

• Folder img.

• Folder js.

• File index.html.

Your public html folder should now look as follows:

Page 3: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

nienaber@ww2:~/public_html$ lsassgn3 assgn4 frontpage header img jsassgn3_index.html css frontpage.zip header.zip index.htmlnienaber@ww2:~/public_html$

Navigate out of the frontpage folders to the header folder under public html The header folder containstwo folders frontpage and MACOSX.

nienaber@ww2:~/public_html/header$ lsheader __MACOSXnienaber@ww2:~/public_html/header$

Delete the folder MACOSX folder. Navigate into the header folder.

nienaber@ww2:~/public_html/header/header$ lscss img index.html jsnienaber@ww2:~/public_html/header/header$

Rename index.html to header.html.

nienaber@ww2:~/public_html/header/header$ lscss header.html img jsnienaber@ww2:~/public_html/header/header$

Move the file header.html to the folder public html Change into the css directory. There is a file calledmain.css.

nienaber@ww2:~/public_html/header/header/css$ lsmain.cssnienaber@ww2:~/public_html/header/header/css$

Rename this file header main.css.

nienaber@ww2:~/public_html/header/header/css$ lsheader_main.cssnienaber@ww2:~/public_html/header/header/css$

Move the header main.css to the folder public html/css. Change back to the header folder. Copy thecontext of the img folder to the public html/img. There are some duplicates just over write them.

nienaber@ww2:~/public_html/header/header$ ls imgfsuLogo.png fsuSearch.png searchBarBg.pngfsuSearch2.gif garnetBg.gif selectBg.pngnienaber@ww2:~/public_html/header/header$

nienaber@ww2:~/public_html/img$ lsbanner.png fsuLogo.png fsuSearch.png searchBarBg.pngfsuBullet.gif fsuSearch2.gif garnetBg.gif selectBg.pngnienaber@ww2:~/public_html/img$

Change the directory back to public html. Delete the folder header, frontpage and the two zip files.

Three folder case: In this case you will see three folders frontpage, header and MACOSX. Delete theMACOSX. Change to the frontpage folder.Copy the content of folders frontpage to the public html folder:

nienaber@ww2:~/public_html/frontpage$ lscss img index.html jsnienaber@ww2:~/public_html/frontpage$

Page 4: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

• Folder css.

• Folder img.

• Folder js.

• File index.html.

Your public html folder should now look as follows:

nienaber@ww2:~/public_html$ lsassgn3 assgn4 frontpage header img jsassgn3_index.html css frontpage.zip header.zip index.htmlnienaber@ww2:~/public_html$

Change to the folder header under the public html folder. Rename index.html to header.html.

nienaber@ww2:~/public_html/header$ lscss header.html img jsnienaber@ww2:~/public_html/header$

Move the file header.html to the folder public html Change into the css directory. There is a file calledmain.css.

nienaber@ww2:~/public_html/header/css$ lsmain.cssnienaber@ww2:~/public_html/header/css$

Rename this file header main.css.

nienaber@ww2:~/public_html/header/css$ lsheader_main.cssnienaber@ww2:~/public_html/header/css$

Move the header main.css to the folder public html/css. Change back to the header folder. Copy thecontext of the img folder to the public html/img. There are some duplicates just over write them.

nienaber@ww2:~/public_html/header/img$ lsfsuLogo.png fsuSearch.png searchBarBg.pngfsuSearch2.gif garnetBg.gif selectBg.pngnienaber@ww2:~/public_html/header/img$

nienaber@ww2:~/public_html/img$ lsbanner.png fsuLogo.png fsuSearch.png searchBarBg.pngfsuBullet.gif fsuSearch2.gif garnetBg.gif selectBg.pngnienaber@ww2:~/public_html/img$

Delete the folders header, frontpage and the two zip files.

Page 5: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

Everyone should have the following structure once all is said and done.

- public html

- assgn3

- assgn4

- img

- banner.png

- fsuLogo.png

- fsuSearch.png

- searchBarBg.png

- fsuBullet.gif

- fsuSearch2.gif

- garnetBg.gif

- selectBg.png

- js

- main.js

- assgn3 index.html

- css

- main.css

- header main.css

- index.html

- header.html

Navigate to http://ww2.cs.fsu.edu/~[username]/index.html and http://ww2.cs.fsu.edu/~[username]/header.html you should see two pages:

Page 6: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one
Page 7: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one
Page 8: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

The index.html needs to be updated with relevant data for your site. The title should read FloridaState University - [your full name] COP3502 Respository. The banner picture with COLLEGE OFCOLLEGE NAME needs to be replaced with your own custom picture. The dimentions of the banner doeshowever have to remain the same. Replace the heading Lorem ipsum dolor sit with [yourname] classrespository. Replace Amet, consectetur adipiscing elit with About me. Do a short write up aboutyourself and anything you wish to share. This needs to be about two paragraphs long. The Menu item 1needs to be replaced with Assignment 3. The submenu options need to link to each of the pages createdin assignment 3. The Menu item 2 needs to be replaced with Assignment 4. The submenu options need tolink to each of the pages you will create in assignment 4. The RELATED LINKS needs to have three new linksthat are related to this course or related to you.

4 Part 2 - Converting assignment 3

4.1 Description

Copy all your pages from the assgn3 folder to the assgn4 folder. Remove all depricated attributes andupdate the pages with the necessary CSS to get the correct look and feel. Use the header.html as yourtemplate and convert your pages to this new template.

Page 9: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

4.2 Example

Page 10: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one
Page 11: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one
Page 12: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one
Page 13: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

5 Part 3 - Javascript

5.1 Description

You will edit some of your existing pages and add some javascript or create some new pages.

5.2 Missing link revisited

Open your updated missing link.html page to add some javascript.

1. Create a JavaScript function that launches an “alert” popup window displaying your name.

2. Create an anchor element below The web page designer with the text Author name that when clickedexecutes the JavaScript function.

Page 14: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

5.3 The Wanderer

Create a new page called wanderer.html. Make sure to use the correct template to create it.

1. Create a form containing the following elements:

• A text type input element that allows for a single line of text to be entered.

• A textarea element.

• A Button;

2. Create a JavaScript for the web page to perform the following:

• When the button is pressed, the value in the text type input element replaces the value of thetextarea element.

• The text de gozaru is added to the end of the text in the textarea element.

Page 15: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

5.4 Checking out

Create a new page called checkout.html.

1. Create a Form containing the following elements:

• Three or more CheckBoxes, each labeled with the name of your favorite game (or movie).

• A textarea element.

• A Button.

• A Reset Button.

2. Create JavaScript for the web page to perform the following:

• When the Button is pressed, for each movie checked display in the textarea element a briefreview of the game.

• The textarea element must contain a review for all games currently checked, with a blank linebetween each review.

• When the Reset Button is pressed clear all CheckBoxes.

Page 16: COP3502 - Spring 2010 Assignment 4 Working with CSS and ...ww2.cs.fsu.edu/~nienaber/teaching/COP3502/Assignments/assignment4-cop... · will see two links, one to header.zip and one

5.5 The Calculator

Create a new page called calculator.html.

1. Create a Form containing the following elements:

• A radio group with radio buttons labeled Add, Subtract, and Multiply.

• Two text type input elements labeled Value 1 and Value 2

• A textarea element

• A Button

2. Create JavaScript for the web page to perform the following when the Button is pressed:

• Treat the values from the Value 1 and Value 2 elements as numeric values

• Compute the result of the mathematical operation indicated by the radio group, using the twonumeric values

• Display the result as text within the textarea