Pre-lab

None

In-lab

Coordinating with your partner

In today's lab, we will be working on your final projects. You and your partner are allowed to share the work that you do in lab even thought it helps complete your project. There are two lab activities to complete:

• First, you should complete the Activity 1 using your project files and then duplicate the work for your partner's files. This will help reinforce the activity so you can better understand it on the final exam.
• Second, you should reverse the process and complete Activity 2 using your partner's files and then duplicate the work for your files. Again, you are completing the activity twice.

While it might take some extra time, it is best to login and logout of the computer so you and your partner have direct access to the files that might be stored in your account on Siena's network drive (Z: or MyDocuments). While you can use WinSCP to remotely fetch your partner's files, be sure not to overwrite your project files with your partners and remember to copy back your partner's files (and not your files) when lab is over.

WinSCP Access to Remote Server

Use WinSCP to upload your project 4 files to the remote server.

Both you and your partner should do this separately.

Here are the connection details:

Connecting via WinSCP

• Hostname: ftp.sienasellbacks.com
• Username: lastname@sienasellbacks.com
• Password: Told to you in lab
• Settings: Use FTP (Port 21)
• Server URL: lastname.sienacs.com

Important: When uploading to the server, you should NOT upload your entire project4 folder so that it is inside public_html. Rather, you should copy all of your files directly from project4 to the root folder such that there is no project4 subfolder on the remote server.

In general, to save and test your files on the remote server you must do the following:

1. Save your file locally.
2. Use WinSCP to upload your file to the web server.
3. Use a web browser and type the URL of the web page you want to view (for example http://lastname.sienacs.com/page.html) or by refreshing the web page if it is already load.
4. If you do not see your changes, do a hard refresh (hold SHIFT key and press the refresh/reload button on the web browser).

The instructions above will ensure that your newly saved web page is being properly viewed on the server, i.e., an HTTP request is made to the server. Depending on the cache settings and how you navigate back to a web page, some web browsers (mostly IE and older versions of Safari) will fetch the cached web page and you will NOT see any new changes you made.

Activity 1

Using Exercise 17-2 as a model, decorate your image gallery index page (gallery/index.html) using CSS transitions and transforms. Instead of choosing the exact same parameters, choose different values for the scaling, rotating, and duration of the animation.

Again, complete this activity using the project 4 files of one member of the lab team and then repeat the process with the other partner's files, but again experiment with different values. Be careful, not to overwrite each other's work.

Activity 2

Using Exercise 17-1 as a model, decorate your main navigation menu using CSS transitions. Note that your navigation menu might not be decorated with a border or a box-shadow. A box-shadow and position change might not render properly for the drop-down menu items, so it is recommended that you not add a box-shadow or position animation. However, you can use CSS transitions to animate the background color and border. Animate at least one CSS properties.

Again, complete this activity using the project 4 files of one member of the lab team and then repeat the process with the other partner's files. Be careful, not to overwrite each other's work.

Deliverables

You and your partner's Project 4 should be uploaded with the two activities completed.