Introduction to Computer Science – CSC101
Lab #8 – Photoshop III / Advanced HTML
Due: August 5, 2011 @ 5:00pm (Friday)
Points will be deducted for labs that are turned in late!
Your Name: __________________
Summer II 2011
WFU E-mail Address:_________________
Pre-Lab Reading Assignment:
-
There is no prelab reading for today’s lab; however, you may want to
become familiar with the following topics to answer the questions at the
end of this lab.
o jQuery
o CSS
o Artificial images (.gif file format)
Lab Objectives:
-
To learn how to create an artificial image in Adobe Photoshop
To understand how to use images as links by using a combination of the
<img> tag and the <a href> tag
To add effects to the images on our page by using a programming tool
called jQuery.
Grading:
-
We will be editing the page menu.html, which is the navigation page for
our CSC101 blog. The final page will display buttons for each of the links
instead of the text links that currently exist. In addition, the buttons on
menu.html will fade in and out when you hover over them with your
mouse. The grading for this lab will be as follows:
o Updated menu.html with images as buttons – 10pts
o Short Answer Questions – 10 pts
o Total – 20 pts
Lab Instructions:
This lab will cover some advanced features of both Photoshop and HTML. Because of
these advanced topics we will be stepping through some of the steps of this lab as a
class.
I.
Creating Buttons with Adobe Photoshop
1. We are first going to select a background color for our buttons. In the
tool bar, click on the “Set Background Color”. In the color picker, pick
any color that you will like to use for the background of your colors.
2. Open Adobe Photoshop, Click File -> New
3. Under Preset, Select Custom and Fill in the following settings:
i. Name: about (be sure of case)
ii. Width: 150 pixels
iii. Height: 100 pixels
iv. Resolution: 300 pixels per inch
v. Color Mode: RGB Color / 8 bit
vi. Background Contents: Background Color
vii. Leave everything else as a default option.
4. Click OK
5. We are going to now add text to our button. To do this, select the text
tool from the tool bar.
i. Before adding text, select a text color (something that you can
see on your background color) by clicking on the “Set Text
Color” on the Text menu located on the top of the screen.
ii. Set the Font to Arial and the Size to 12 pt. You may also want
to select the center text option as well.
iii. You can now click in your image using the text tool and drag to
create a text box. It will be very useful to start in the upper
left hand corner of the image, and drag down to the lower right
hand corner of the image.
iv. You can now type the word “about” in your image.
6.
7.
8.
9.
II.
A. If the word does not fit, click the bottom right hand
corner of the text box and drag it until the word
appears.
v. Click on the move tool in your tool bar. Using the arrow keys
on your keyboard, move the text until it is in a position that
looks good to you.
Once your button looks good to you, click File -> Save As.
i. Change the format to GIF (might be labeled Compuserve GIF)
ii. The File Name should be about.gif
iii. Save the file in your csc101/images folder
iv. Click Save
v. Click Yes to Flatten Layers
vi. Click OK on the Indexed Color Box
vii. Click OK on the GIF Options Box
We have now created one button for our navigation bar. Repeat Steps
2-6 to create buttons for entries, course, guestbook, lab6, lab7.
i. You may have to change some of the font sizes in the text
menu to ensure that the text fits in the space. I have included
what font sizes work for each button below.
A. entries: 10pt Font / save file as entries.gif
B. guestbook: 7pt Font / save file as guestbook.gif
C. course: 11pt Font / save file as course.gif
D. lab6: 12pt font / save file as lab6.gif
E. lab7: 12pt font / save file as lab7.gif
You should now have five GIF images, corresponding to each of the
buttons you have created.
Double check to be sure that each of these 6 images is in your
csc101/images folder.
Adding your buttons to your menu.html page
1. We now have six GIF files for each of your buttons which will be used
on your menu.html page.
2. Open menu.html in Dreamweaver.
3. Highlight and delete each of the links that you have on your page.
4. We are going to put our first button in our page. Do this by clicking
Insert -> Image from the file menu.
i. Select about.gif from your csc101/images folder
ii. Click OK to bypass the Image Tag Accessibility Options box
5. We now want this image to link to the page about.html.
i. Click the about.gif image
ii. In the image properties box, type the path to about.html in the
link box.
iii. To get this page to open in our right hand frame, be sure to
type ‘content’ in the target box.
6. Add each of the other 5 buttons to your page, be sure to set the link of
each button to the appropriate page, and to set the target to ‘content’
to ensure the linked page opens in the correct frame.
7. You should now have your six buttons on your menu.html page, each
linking to their corresponding page.
8. Open index.html in a web browser. Do your buttons appear as you
designed them? Click each button and ensure each of the links work
correctly.
III.
Adding effects to your buttons using jQuery
1. We will be adding some effects to your buttons using a javascript
package called jQuery. In order to use this, we need to change a few
things to your menu.html page.
2. Copy the files custom.js , jquery.js , and styles.css to your
csc101/images folder. These files are located on the course webpage,
right click the files and click ‘save target as’.
3. In menu.html, switch to code view.
i. Right before the </HEAD> tag, add the following three lines of
HTML code: (I have posted these three lines of code as a text
file (code.txt) on the course webpage so that you can easily
copy and paste it into your HTML document)
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="images/jquery.js"></script>
<script type="text/javascript" src="images/custom.js"></script>
4. There is one more change we need to make to add effects to our
buttons. Switch to Design View in menu.html.
i. Click on each button. In the Properties panel, change the class
to latest_img.
ii. Do this for each of your six buttons.
5. Open index.html in a web browser. Move your mouse over each of the
buttons. If you did everything correctly, you should see the buttons
fade in and out as you move your mouse over them.
IV.
Upload your files to the WFU webserver.
1. Upload the following files to the webserver using Dreamweaver:
i.
ii.
iii.
iv.
v.
vi.
vii.
viii.
ix.
x.
images/about.gif
images/course.gif
images/entries.gif
images/guestbook.gif
images/lab6.gif
images/lab7.gif
images/styles.css
images/jquery.js
images/custom.js
menu.html
2. Update your permissions by going to users.wfu.edu/update.html and
following the steps to update your permissions to your personal
homepage.
Short Answer Questions:
1) Describe what happens when you load the page index.html. What happens when
you move your mouse over each of the buttons? (2 pts)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
2) We added two scripts to our page (jquery.js and custom.js). We won’t worry
about how these scripts work to make our buttons fade in and out. Are these
scripts client-side scripts or server-side scripts? Why or why not? (3pts)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
3) Describe why we saved our buttons as GIF images. (3pts)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
4) Look up jQuery on the web. In a sentence or two, describe what jquery is and
why it is so powerful for web pages. (2 pts)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________