cs.newpaltz.educs.newpaltz.edu/~phamh/awd/hw/hw5.docx · web viewthe “skills” page must have a...

9
“Web Page Design” Homework # 04 1) Create a web site in a folder named hw5 for your new homepage which is based on your hw4 (please read/check requirement for each page in hw4 again). Make the headers and images with ROUNDED corners. The width of the header and its image (for all pages) will need to be bigger by 20% to accommodate the photos in the “dreams” page. This new version must use JAVASCRIPT to add animations and user interactions to your website (similar to p20,p21,… which we did at the class) . The footer must show the CURRENT TIME (see below) on each page. a) The front page (“index” and “home”) must ask for the user name and insert the name into a running welcome message on its front page as shown below:

Upload: buinhu

Post on 14-May-2018

216 views

Category:

Documents


3 download

TRANSCRIPT

“Web Page Design” Homework # 04

1) Create a web site in a folder named hw5 for your new homepage which is based on your hw4 (please read/check requirement for each page in hw4 again). Make the headers and images with ROUNDED corners. The width of the header and its image (for all pages) will need to be bigger by 20% to accommodate the photos in the “dreams” page. This new version must use JAVASCRIPT to add animations and user interactions to your website (similar to p20,p21,… which we did at the class) . The footer must show the CURRENT TIME (see below) on each page.

a) The front page (“index” and “home”) must ask for the user name and insert the name into a running welcome message on its front page as shown below:

b) The “education” page must have a button to change the color of subtitle (from black to some other color) as shown below:

BEFORE:

AFTER (click on the button)

c) The “skills” page must have a “ON/OFF” button which would make the page contents (all “div” disappear and re-appear as shown below:

d) The “Experience” page must have a button to DADE in/out the MENU as shown below:

e) The “Dreams” page must display a gallery of YOUR OWN photos using Javascript so that when the user click or move the mouse over a thumbnail photo it will display that photo in big size as shown below:

2) Post/transfer this folder “hw5” to your web account at our CS system so that anyone can see it via Internet at the following address(TEST it via Internet): cs.newpaltz.edu/~YourUserName/hw5/

2.a) TRANSFER all files in this folder hw5 to (under WWW) your CS account) using F5[ Remember to use F9 to change properties to 755 for the folder hw2 and all files inside ]

2.b) TEST your web page via Internet: open a web browser and type in your address: cs.newpaltz.edu/~YourUserName/hw5

3) MAKE a homework report in WORD or PDF format (must include the full address of your homepage: cs.newpaltz.edu/~YourUserName/hw5/) which also has your name, homework number, the HTML code and 5 screenshots: 5 of the web site (with 5 click on each menu option) via Internet access and another of the WinSCP window which shows that you have transferred the given file into the right place (folder hw5 under WWW) and have the right permission/property (755).

4) SUBMIT the homework report at:

http://cs.newpaltz.edu/~phamh/awd/sub/