We will spend this week in the graphic arts shop working with their students on a webpage project. It’s now your turn to show these students what you know about web design since they’ve shared with you their graphic design skills.

You will work on a simple webpage project that will review HTML and CSS skills you already have as well as introduce you to a couple new ones. The graphic arts students will be learning more HTML and will be introduced to CSS.

Assignment

Using the new website I showed you last week, movieclips.com, you will create a webpage of a top 5 list for movie scenes of your choice. For example, top five funniest movie scenes ever, top five saddest movie scenes, top five inspirational scenes, top five typical high school scenes, etc. Of course this needs to stay appropriate and maybe no more than PG-13 rated!

Instructions:

Follow the steps below. You must include 5 movie clips and they all must be embedded in the page. There is one example movie clip already in a the file you will download to work with and you will be replacing that with your own content.

To begin:

A. Go to movieclips.com and decide what your theme is and choose your movie scenes. You must clear your theme and movie with an instructor.

B. Once you have your movie scenes planned you will begin working on your webpage by following the steps below.

1. Download webpage practice file by clicking here

2. Save the webpage on your computer

3. Open the webpage in Safari by clicking and dragging it onto the Safari icon at the bottom of the computer screen

4. Now go to View, and View Source Code

5. Go to Edit and Select All to highlight all of the code. Then go to Edit and Copy to copy the code

6. Open TextEdit from dock at bottom of page. Copy and paste the code into the new, blank TextEdit.  Before SAVING the file as an html file, you have to change some settings in TextEdit.  Please await instructions from me or Mr. Licausi.  Then you will save the file as movieclips.html.

7. Change the page title from “Put your website title here” to a title that makes sense for your webpage. For example, “Top five funniest movie scenes of all time.”

8. Change the font in the body section of your internal style sheet by choosing a font combination under sans-serif fonts on this page: http://w3schools.com/cssref/css_websafe_fonts.asp

9. Change the font color from white to another color. Color choices (can use name or hex value): http://w3schools.com/cssref/css_colornames.asp

10. Change the font size to 1.5em (24 point font)

11. Change the font-weight from bold to normal

12. Change the background color from green to a color of your choice

13. In your paragraphs and tables section of your style sheet, under td and p, make the same changes to font-family, font-color, font-size, and font-weight that you did in your body section so they are consistent. So if you made the font color black, do the same here, and change the font size to 1.5em, etc.

14. Change the color of your headline h1 and make it the same font combination as above

15. Change the text-decoration from none to underline when hovering over a link

16. Change your link color from white to another color

17. In the body section, under div id=menu, add your movie scenes and movie names in the list. Keep the code and just get rid of scene 1, scene 2, etc. You will also need to change “Top 5 Funniest Movie Scenes” unless you’re doing funny scenes.

18. Under div id=content, change the headline to whatever your topic is.

19. Now it’s time to start embedding your video. You’re going to replace the example video that’s already there. Click on your movie clip from movieclips.com and in the bottom right hand corner you will see “embed code/short url.” Click that and copy the code under “embed.” Paste the embed code under your headline.

20. You’re going to continue doing this until you’ve embedded all five of your movie clips.

21.  Last thing- create a favicon for your page.  First, you must design your favicon in some kind of image editor such as Photoshop.  You might also be able to find free favicon generators online. Try this website: http://www.favicongenerator.com/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width).

Your favicon must be 16 pixels by 16 pixels.

You will insert the following code into the <head></head> section of your HTML file:

<link rel=”icon”
type=”image/jpg”
href=”Jfavicon.jpg”>