INFO 2450 Project 6 Web Site Resources and JavaScript Behaviors

Size: px

Start display at page:

Download "INFO 2450 Project 6 Web Site Resources and JavaScript Behaviors"

Rachel York
5 years ago
Views:

1 INFO 2450 Project 6 Web Site Resources and JavaScript Behaviors Project 6 Objectives: Learn how to create graphical content with specified dimensions and formats for a Web site. Incorporate the site color palette into graphics and a background image. Learn how to resize images for consistent appearance when one is swapped for another. Plan and execute graphical components for use in JavaScript button rollovers or image swaps to make use of client-side scripting and reduced load times. Design and create a background image for a fixed width two column layout. Find freely-licensed JavaScript code and adapt JavaScript behaviors on a Web page with a button rollover, a logo image rollover and image thumbnail swapping. Project Overview: This project will require you to create more graphical content for your business final web site. You will create or modify images for use in JavaScript rollovers and image swaps: a logo rollover, a print button rollover, and thumbnail image swaps. You will also need to create a two column background image for use in Project 7. This will require you to create new button images and modify your logo image, and resize some of your business images for use in a thumbnail image swap. Refer to the GIMP Slideshows and GIMP Practices for help with sizing images, layers, and using filters and effects. Refer to the Intro to JavaScript Slideshow and the JavaScript Practice 1 for help with JavaScript. Additional resources for GIMP and JavaScript are also included below. You will make use of your original logo image from Project 5 to create a new logo with variations. This new logo will be the exact same size, but will be swapped out when the user hovers the mouse over the original logo. You will also create two versions of a print button. The first image will be the default image and the second will be swapped out when the user does a mouse over of the other button. You should style your second button image so it looks different enough to provide a visual clue to the user, this is a button. A performance optimization technique can be used with repeatable background images. You can create a vertical or horizontal slice of a needed background in a very small image file and then when you use the background-image on a page, repeat the background in either the X or Y direction to get a much larger background that is just the size needed. The trick is to think ahead when designing the image so it will repeat exactly as needed. We will make use of a horizontal background image that will be repeated in the Y direction in Project 7. You will modify the needed JavaScript code to make use of the logo images and button images and execute an onmouseover and onmouseout image swap known as an image rollover for these two types of images on a Graphics.htm page.

You will place this thumbnail image swap image files and associated JavaScript code also on the Graphics.htm page.

2 You will also place image thumbnails on a page with a large version of one of the images. You will implement the JavaScript needed to provide an onmouseover image swap for each thumbnail and also a title change. You will place this thumbnail image swap image files and associated JavaScript code also on the Graphics.htm page. This will require you to size thumbnail images and large images to be consistent in their width and height. Getting Started: Step 1. Create a folder called Project6. Copy the start.htm file to your Project6 folder. Rename the file Graphics.htm. Remember to change the title of the file. This page will hold all the <img> tags for this project as well as needed JavaScript code. Step 2. Copy your SiteDesign.htm file from Project 3 to the Project6 folder. Create an Images folder in your Project6 folder. Add a Fullsize and Thumbnails subfolder in your Images folder. All other images used in this project must be inside your Images folder. Button Image Rollover: Step 3. In this project, you will create two button images for a Print Page buttons that we will use in Project 8 to open a print version of a web page. You will use a JavaScript image swap usually called a rollover. The button rollover will happen on the onmouseover event. The original image will be swapped back on the onmouseout event. GIMP has some built-in button features you can use to create a rounded button or a beveled rectangular button. See this following screencast for

3 some help with GIMP buttons. Or you may choose to create these buttons from scratch. There are many GIMP button tutorials online. A couple of GIMP button tutorials have been included below. Beveled Buttons in GIMP (.swf) Rounded Buttons in GIMP (.swf) ( Gradient Button GIMP Tutorial ( Cool GIMP Gradients for Buttons ( The width and height of the two Print Page button images should be exactly the same, about 200px in width and 50px in height. As long as you are close to these dimensions, it will be fine. Make the Print Page text on the button images very visible and in the same location on both button images. And make use of your SiteDesign color palette when choosing the colors. If you want to have the button text be different on each image you may. Provide a regular button and a pressed button look for these two images. Name your two images print1.jpg and print2.jpg. Step 4. Copy the original print1 image and the print2 button image to your Project6 Images folder. Do not put your XCF files in Project6. Step 5. Place the print1.jpg image on the Graphics.htm page in a <div> and an <a> surrounding the <img> tag. Set the href of the <a> to just be for now. Set a name attribute in the <img> tag as well as the exact width and height of your image. You can add a CSS style border:none to the image so the border of the link does not show. Add the onmouseover and onmouseout events to the <a> tag. In the <head> of the page provide a preload of the print button images and a swapimage function. See the following example of some JavaScript button rollover code. Example: <div id="button"><a href="" onmouseover="swapme('printimage','print2');" onmouseout="swapme('printimage','print1');"> <img src="images/print1.jpg" alt="printer Button" width="200" height="50" id="printimage"> </a></div> You can add a CSS style border:none to the image so the border of the link does not show. Add the onmouseover and onmouseout events to the

4 <a> tag. In the <head> of the page provide a preload of the print button images and a swapimage function. See the following example of some JavaScript button rollover code. Example: <script language="javascript" type="text/javascript"> if (document.images) { print1 = new Image; print2 = new Image; print1.src = "Images/print1.jpg"; print2.src = "Images/print2.jpg"; logo1 = new Image; logo2 = new Image; logo1.src = "Images/logo1.gif"; logo2.src = "Images/logo2.jpg"; function swapme(thisimage,newimage) { if (document.images) { document[thisimage].src = eval(newimage + ".src"); Validation Note: When using JavaScript events in your HTML code, these must be in lowercase or you may get a validation error. For example, instead of using onmouseover, name the event handler onmouseover. Logo Rollover: Step 6. Step 7. Step 8. In this project, you will use your original logo graphic from Project5 as one of the images that will be swapped in the logo rollover. Open your original Logo XCF file that preserved your layers in GIMP and save the file as logo2.xcf. Decide how you would like to modify this second logo for a different or accent variation when a rollover happens. Do not modify the logo size, but just make some changes to the new logo. Try to keep the modified logo still in line with your business theme, i.e. the honeymoon business may want a more extreme effect, the cooking business may want a more subtle effect. Your instructor must see a difference between these two images when they are rolled over. Save your changes to the logo2.xcf file. Then export the revised logo as logo2.jpg or logo2.gif, or logo2.png. Copy the original logo image and the logo2 image to your Project6 Images folder. Do not put your XCF files in Project6.

5 Step 9. Place the original logo image on the Graphics.htm page in a <div> and an <a> surrounding the <img> tag. Set the href of the <a> to just be for now. Set the exact width and height of your image. Example: <div id="logo"><a href="" onmouseover="swapme('logoimage','logo2');" onmouseout="swapme('logoimage','logo1');"> <img src="images/logo1.gif" alt="cool Logo" width="110" height="150" id="logoimage"> </a></div> You can add a CSS class border:none to the image for no border. Add the onmouseover and onmouseout events to the <a> tag. In the <head> of the page provide a preload of the print button images and a swapimage function. Thumbnail Image Swaps: Step 10. You will find a zipped file of images for your business in the Project 6 Instructions in the ASSIGNMENTS area: Honeymoon.zip, Pets.zip, Cooking.zip, and Birds.zip. These are large images you can choose from for your thumbnail image swaps. Step 11. Step 12. Choose 4 images that are either all taller horizontally or all wider vertically. Do not mix horizontal or vertical images in the 4 you choose. Using GIMP or another graphics program, size your images to be about 400px by 267px in either horizontal or vertical direction. Make sure images are 72 px/in resolution. Export images as.jpg files, but reduce the Quality to 80. (This needs to be done in GIMP using the Layers tab scale layer.) Save images as Image1Lg.jpg, Image2Lg.jpg, Image3Lg.jpg, and Image4Lg.jpg in your Fullsize Images folder in Project6. Step 13. Use your modified 4 large images to create 4 thumbnail images. Using GIMP or another graphics program, size your large images to be about 150px by 100px in either the horizontal or vertical direction. Make sure the images are 72px/in resolution. Export images as JPG files but compress at 100%.

Step 14. Save images as Image1Sm.jpg, Image2Sm.jpg, Image3Sm.jpg, and Image4Sm.jpg in your Thumbnails Images folder in Project6. Step 15. Create two <div>s on your Graphics.

6 Step 14. Save images as Image1Sm.jpg, Image2Sm.jpg, Image3Sm.jpg, and Image4Sm.jpg in your Thumbnails Images folder in Project6. Step 15. Create two <div>s on your Graphics.htm page similar to those used in the JavaScript Practice 1 ImageSwap.htm page. Use <img> tags to place the 4 thumbnails on the page. Use an <img> tag to place one large image in the second <dv>. Also place a title for the image in a heading tag in the same <div>. Example: <div id="thumbs"> <img src="images/thumbnails/image1sm.jpg" alt="cookies" onmouseover="swapimage(0);" /> <img src="images/thumbnails/image2sm.jpg" alt="steak" onmouseover="swapimage(1);" /> <img src="images/thumbnails/image3sm.jpg" alt="yummy" onmouseover="swapimage(2);" /> <img src="images/thumbnails/image4sm.jpg" alt="couple Grilling" onmouseover="swapimage(3);" /> <br/> </div> <div id="image"> <img id="theimage" src="images/fullsize/image1lg.jpg" alt="cookies" /> <h3 id="bottomtext">cookies</h3> </div> Step 16. Use needed JavaScript onmouseover event and an ImageSwap function to do an image swap when thumbnail <img>s are hovered over with the mouse. Place needed JavaScript in the <head> and also use preload for FullSize images. See JavaScript Practice 1 for help with your ImageSwap JavaScript, and needed CSS (see example on next page).

7 Example: <script language="javascript" type="text/javascript">  </script>

Repeatable Background Instructions: Step 17. In this project, you will make a two-column background image that will be used in a central container area on your Home page in Project 7.

8 Repeatable Background Instructions: Step 17. In this project, you will make a two-column background image that will be used in a central container area on your Home page in Project 7. This background image on your final web site will be repeated in the vertical, Y direction so it must be designed with this in mind. You should plan on creating two columns on this graphic. The left side of the background should have an exact width of (250px), including any edge and the right side will be a solid color (not white) with an exact width of (650px), for a total background width of (900px). Your background image should have a maximum height of (150px), depending on any pattern in the left side. Be very careful with the use of gradients. It is very difficult to make sure text is readable if a gradient varies from light to dark. For this reason, it is strongly recommended that you keep any gradients as an edge effect only. The background image must reflect the color scheme and theme you have chosen for your fictional business. The entire right side of your background image must be a solid color (this color should be the background color you chose from Project 3). The background image should be tasteful and professional. Step 18. This background image must incorporate features you have drawn such as lines or adobe brush images and large areas of flat color in the left side of the background. You may NOT use photographic images on the background. Remember any features in the left column will be repeated when we use this background image in Project 7. We will also be placing navigation buttons over the left side. So keep any images used for the left side very subtle. (Example below) Step 19. Export your background image from your graphics program as a GIP, PNG, or JPG image and save it in your Images folder: 2colback.gif or 2colback.jpg or 2colback.png and save it in your Project 6 folder. You should also save your background file as a GIMP XCF file for future modification, but this XCF file should not be placed in your Project6.

9 Step 20. Place your background image on the Graphics.htm page using an <img> tag. Just include it as a regular image for now. We will use it as a repeated background image in Project 7. Putting It All Together: Step 1. Step 2. Make sure all images used in this project are included on the Graphics.htm page using the <img> tag. Add needed CSS as embedded CSS style sheet. JavaScript should be used to preload image and for rollover and image swapping. Remember to provide alt text for each <img> tag or you will have validation errors. Also provide exact width and height attributes on each <img> tag. Validate your Graphics.htm page using the HTML 5 standards Procedure for Submission: Submit your Project6 using the following steps: Step 1. Step 2. Log into your account on the Yoda web server and upload your entire Project6 folder in the Projects folder on Yoda. View your Graphics.htm page from the Internet using a path similar to: Make sure all your images display correctly from the Internet path. Revalidate your Graphics.hm page from the Internet. Step 3. Note: Your instructor will grade your project from this Yoda web server after the due date has passed using the grading criteria below. You can see your grade form and feedback under the ASSIGNMENTS, Graded tab or from the course menu in My Grades. Make sure only.gif,.png, or.jpg images are in your Images folder. You will not upload the GIMP.xcf files to the Yoda server, while you should make sure you save these in case you need to modify these graphics in the future. The GIMP.xcf files will not display in a web browser.

10 POINTS BREAKDOWN: This project will be graded on the following criteria: Two Print Page button images were created with an original and pressed button look, buttons well done Print button images with two Print Page button images were used on the Graphics.htm page and needed JavaScript created a button image rollover A modified logo2 image was created that added variation or effect, logo2 was well done Logo and Logo2 images were used on the Graphics.htm page and needed JavaScript created an image rollover. Fullsize and Thumbnail images were sized correctly at 72px/in Thumbnails were used on the Graphics.htm page to do JavaScript image swaps with the Fullsize images. Titles were also swapped for the Fullsize images. Used SiteDesign colors on image background and added needed CSS styles for surrounding <div>s. Background image met size of 900px and color requirements with two defined sides of 250px and 650px. Background followed artistic design principles and supported business theme and made use of SiteDesign colors. Validated Graphics.htm page to HTML 5. Submission was correct, all project images placed in an Images folder, in the Project 6 folder. TOTAL 10 points 10 points 5 points 10 points 5 Points 10 Points 10 Points 5 Points 5 Points 5 Points 75 Points

Create a three column layout using CSS, divs and floating

GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.