Web Page Design: STANDARD 1The student will use commercial Web design software (for example: Adobe Dreamweaver,Microsoft Expression) to create dynamic and interactive Web sites.

Objective 1: Review basic skills learned in Business Web Page Design.

Objective 2: Use the following software features: templates, CSS, rollover images, forms, layers, div tags, frames (regular and i-frames), and tables.

Objective 3: Include music, sound, and/or video in a document.

INSTRUCTION SHEETVacation Website Demo – Key West

Lesson Objective: “I can review basic skills learned in web design and use the following software features in Dreamweaver: rollover images, forms, i-frames, and tables. I can include animation, music, and video into my website.”

Vacation Website – Key West, Florida

(1) STEP 1: Create an original side bar in Photoshop. Make a new folder called “Vacation Website_Key West” Make a new folder within “Vacation Website_Key West” named “images”

(2) Open Photoshop (or Gimp) and then File, New (or Cntrl-N). Name=SideBar, choose Width=175, Height=400, Color Mode=RGB, Background Contents=white, click OK.

(3) Select the Foreground color to be #42d2ed (light ocean blue). Fill the contents with this color.

(4) Add a new Layer. On the new Layer, select the elliptical marquee tool and create a white circle similar to the one shown below. Use the transform (Cntrl-T) tool to size and position it into place.

1

(5) Duplicate the Layer with the white circle twice (right-click on the layer and choose Duplicate Layer), then use the Move tool to position each circle below the original as shown:

(6) Right-click on the topmost Layer and Merge Down. Do this one more time so that all three circle layers are merged into one. Rename the Layer “white circles.”

2

(7) Use the Crop tool on the white circles Layer to crop the image just below the third circle.

(8) Double-click on the white circle layer and add the following layer styles: Stroke (Color = Hot Pink, Size = 2, Blend Mode = Dissolve, Opacity = 88%

3

(9) Add Noise (Filter, Noise, Add Noise). Increase the noise amount slightly.

(10) Save as: “sidebar.psd” and “sidebar.jpg” in the “images” folder in the vacation website folder. Select image quality = 12 or maximum.

(11) Create a second sidebar by using the Paint Brush tool. File, New (or Cntrl-N). Name=SideBar1, choose Width=175, Height=400, Color Mode=RGB, Background Contents=white, click OK.

(12) Select the Foreground color to be #42d2ed (light ocean blue). Fill the contents with this color.

4

(13) Add a new Layer. On the new Layer, select the paint brush tool (#192) and create varying color stars. Change the foreground color and the diameter to vary color and size. Use colors similar to the ones shown below (white, lime, hot pink):

(14) Save as: “sidebar1.psd” and “sidebar1.jpg” in the “images” folder in the vacation website folder. Select image quality = 12 or maximum.

(15) STEP 2: Create an animated top bar in Photoshop. Open “toppic.jpg” and add two text layers as shown below: On the first text layer “vacation in” use foreground color #05f6cf (light teal) and a narrow font, similar to Myriad Pro. Double-click on the text layer “vacation in” to open the Layer Style window. Add a Drop Shadow to the text “vacation in.”

On the second text layer “KEY WEST” choose a thick font, such as Poplar Std. Use white as the foreground color. Double-click on the text layer “KEY WEST” to open the Layer Style window and add a hot pink stroke of 2 pixels. Use transform (ctrl-T) on each text layer to position and size similar to the picture below.

5

(16) Double-click on the text layer “KEY WEST” to open the Layer Style window. Add an Outer Glow. Color = White, Opacity = 75%, Noise = 15%, Spread = 6%, Size = 35 pixels.

(17) Save as: “toppic.psd” and “toppic.jpg” in the “images” folder in the vacation website folder.

(18) STEP 3: Animate “toppic” in Photoshop. Select the Background layer, use the Marquee tool to select a large square of the “water picture” in the bottom right corner. Copy (press Ctrl-C).

(19) Select the KEY WEST text Layer. Use the Magic Wand tool; select each letter in KEY WEST. (*hint: click on the letter K, then hold the shift key down while you click on each additional letter) Paste (Cntrl-V) the “picture of water” into the text (Edit, Paste Special, Paste Into) Finally, change the Opacity down to 80%.

6

(20) Open the animation window (Window, Timeline). Choose “Create Frame Animation” Click on the button (in the middle) “Create Frame Animation” to open the animation frame-by-frame window.

(21) Click on the top layer (Layer 1). Duplicate the frame five (5) times (use the icon to the left of the trash can). On each frame, use the Move tool to slightly move the “picture of water” to the left, right, up, and down (each frame should have a different position of the water. Change the time to .2 sec on each frame.

7

(22) Add a new top text layer “florida” Use a script font, color = white Position as shown below (bottom right corner overlapping KEY WEST text)

(23) Choose, File, Save for Web and Devices. Save as: “toppic.gif” in the “images” folder in the vacation website folder. Also, resave as “toppic.psd”

STEP 4: Create three (3) Rollover Buttons: ACTIVITIES, LODGING, RESTAURANTS. Save in the “images” folder as activities_off.jpg, activities_on.jpg, lodging_off.jpg, lodging_on.jpg, restaurants_off.jpg, restaurants_on.jpg. Use colors from the sidebar or topbar. On and Off

8

Buttons should look similar to the following:

(24) We will start with RESTAURANTS since it has the most letters (longest text).(25) Open Photoshop, click File, New. Name = restaurant_off, width = 250, height = 60(26) Select green (#19ca06) for the foreground color. Select Edit, Fill, Foreground Color, 100% and

fill the entire rectangle with green.(27) Change the background to a layer. Open the layers window (F7), right-click on the background

and choose Layer From Background, click OK.

(28) Double-click on the layer and open the Layer Style window Blending Options.

9

(29) Check Bevel and Emboss and Contour. Then click on the words “Bevel and Emboss” and choose Size = 5 and Soften = 5. Save as a .psd file at this point (Cntrl-S). Name the file “restaurants_off.psd”

(30) Add yellow text (#f8ea03) in all CAPS to the button “RESTAURANTS.” Use a font such as Cooper Std, 24 pt. size. Use the move tool to move the text to the center of the button.

(31) Double-click on the text layer and open the Layer Style window Blending Options. Check Stroke and choose Size = 3 px, use the default black stroke color. (*hint: DO NOT move the text layer, leave it in place)

(32) Save restaurants_off.psd and Save as restaurants_off.jpg.(33) We’ll now create the restaurants_on.psd and restaurants_on.jpg. Double-click back on the text

layer and open the Layer Style window again, Blending Options. Check Stroke again but this time click on the black color and change to blue (#1706fb) choose Size = 3

(34) Now, we’ll change the position of the Bevel and Emboss so that when the button is clicked, it will “look” like it depresses. Go back to Layer 0 and double-click to open the Layer Style window again, Blending Options.

10

(35) Check Bevel and Emboss again and click on the words “Bevel and Emboss.” Change the Direction to “Down.”

(36) Now Save As “restaurants_on.psd” and Save As “restaurants_on.jpg.”(37) SECOND ROLLOVER OPTION HERE(38) We will start with RESTAURANTS since it has the most letters (longest text).(39) Open Photoshop, click File, New. Name = restaurant_off, width = 250, height = 60, choose

“white” as the background color. (40) Use the color picker to choose the dark blue ocean color from the top picture.

(41) Double-click on the Background layer to change it to Layer 0.

11

(42) Double-click to the right of Layer 0 to open the Layer Style dialog box. Click Bevel and Emboss (click on the words Bevel and Emboss), Style: Inner Bevel, Technique: Chisel Hard, Depth: 664%, Direction: Up, Size: 51px, Soften: 5px, Click the down arrow key under Gloss Contour and choose last option on the first row “Gaussian” Highlight Mode; Screen, Opacity: 92%, Shadow Mode: Multiply, Opacity: 81%

(43) When done, the button will look something like this:

(44) Type the text: “restaurants” Use a text like Freestyle Script and a light green font color like # 03fae1. Use the Transform Tool (Cntrl-T) to size the text to fill the button. When done, the button will look similar to the following:

12

(45) Add a hot pink stroke of 2px to the text layer. Change the Blend Mode to: Hard Mix

Save as “restaurants_off.psd” and Save as “restaurants_off.jpg” Quality: High or 12.

(46) Now create the “restaurants_on.psd” and “restaurants_on.jpg” Double-click on Layer 0 (background layer) and choose Bevel and Emboss, change the Direction to Down. Change the color of the text to hot pink and the stroke to lime green.

(47) Save as “restaurants_off.psd” and Save as “restaurants_off.jpg” Quality: High or 12. Repeat the process for activities and lodging.

13

(48) STEP 5: Set-up the Dreamweaver Website: Insert the sidebar, background color, table, topbar, and rollover images. Open Dreamweaver and set-up a new site called “Vacation Website_Key West” point to the Vacation Website folder.

(49) View the files window (Window, Files) or press F8. In the new Dreamweaver site, add a new file named “index.html” (right-click on the green site folder and choose New, File)

(50) Open “index.html” Add the Title: Key West Vacation Website Choose Modify, Page Properties. Select Category: Appearance (CSS), Page font = Tahoma, Size = 14 px, Text color = #F0F, Background color = #5dd5ee, Background image = “images/sidebar.jpg” Repeat = repeat-y (*or use sidebar1, whichever you prefer)

(51) STEP 6: Insert a Table. Insert, Table (5 rows, 4 columns). Merge columns 2, 3, and 4 in Row 1. Insert the top bar in the merged cells (Horz = Center, Vert = Top). In column 1, row 1, use a Heading 2 to add QUICK LINKS: Calendar, Cruise Ships, Key West City, Explore the Keys, History, Map of Key West, Real Estate, and Weddings (Horz = Left, Vert = Top).

14

(52) Choose Modify, Page Properties. Select Category: Links (CSS) Link font: (Same as page font), Size = 18 px, Link color = #104ABC , Visited links = #F0F, Rollover links = #0098CA, Active links = #FOF, Underline style = Show underline only on rollover

When we set up our Links, this will give the Links the look we want when we roll over them.(53) Link each of the quick links to the following websites (or find a similar link on the web

and copy/paste):Calendar = http://www.fla-keys.com/calendarofeventsCruise Ships = http://www.cruisecompete.com/vacations/visits/key_west/1Key West City = http://www.keywestcity.com/Explore the Keys = http://www.travelchannel.com/destinations/key-west/photos/explore-key-west-and-the-florida-keysHistory = http://www.fla-keys.com/history.cfmMap of Key West = http://www.fla-keys.com/maps/Real Estate = http://www.realtor.com/realestateandhomes-search/Key-West_FL?source=webWeddings = http://www.weddingstogokeywest.com/

15

(54) STEP 7: Insert Rollover Buttons Insert the Rollover Images into the 2nd row as shown (Insert, Image Objects, Rollovers)

16

(55) Press F12 and test the rollovers and links live on internet. Use any browser.

(56) Merge the first three rows in column 1. Add the text “CURRENT WEATHER” below “QUICK LINKS” Change to Heading 2.

(57) STEP 8: Insert the current weather into an iFrame. Press enter immediately after the text “CURRENT WEATHER” Click into the code window and insert the following iFrame code: <iframe src="http://www.wunderground.com/US/FL/Key_West.html" width="200" height="200" scrolling="yes"></iframe>

17

(58) STEP 9: Insert video. Copy the video file “JETSKI1.wmv” into the Vacation Website folder. Press shift-enter immediately after the iFrame “CURRENT WEATHER” Add the text “JET SKI THE ISLAND” Change to Heading 2. Click into the code window and insert the following embed code: <h2>JETSKI THE ISLAND</h2><br /><embed src="Assets/JETSKI1.wmv" width="200" height="200" loop="true" autostart="true" />

(59) STEP 10: Insert sound. Copy the sound file “Kokomo.mp3” into the Vacation Website folder. Press enter immediately after the Jet Ski video. Add the text “PLAY KOKOMO” Change to Heading 2. Click into the code window and insert the following embed code: <br />PLAY KOKOMO<br /><embed src="Assets/Kokomo.mp3" width="200" height="100" /><br />

18

(60) Press F12 and test the video and sound on the internet. Test with all browsers (Chrome, Internet Explorer, FireFox).

(61) STEP 11: Add Additional Content. On the next row (row 3), insert the following three pictures from the images folder immediately below each rollover (dry tortugas.jpg, hotel.jpg, sloppy joes.jpg) Width = 250, Height = 175, Border = 1, Align = Middle

(62) Press shift-enter to the right of the picture to single-space down to the next line. Add the following text below each picture: Snorkel Dry Tortugas National Park, Southernmost Hotel, and Sloppy Joe’s Bar

(63) Add three more pictures below the ones added in the step above: (sunset.jpg, condo.jpg, and margaritaville.jpg) Add the text below each picture: Sunset Sailing, Key West Golf Club, and Margaritaville)

19

(64) Below Sunset Sailing, Key West Golf Club and Margaritaville, add the following text:

(65) STEP 12: Add a CSS (Cascading Style Sheet) Class Rule. Open the Properties window, choose CSS on the left side panel. Select all the text beginning with Kayaking and ending with Fort Zachary Taylor Beach. Use the dropdown menu, Targeted Rule, to select <New CSS Rule> Select New Font: Palatino Linotype, Book Antiqua, Palatino, serif (or a font of your choosing)

(66) Selector Type= Class, Selector Name= pt16, click OK.

20

(67) Under Targeted Rule, select the new rule .pt16, then choose Edit Rule. Font-family: Palatino Linotype, Book Antiqua, Palatino (or a font-family of your choosing), Font-size: 16pt, Font-style: normal, Line-height: normal, Color: #909 Click Apply, then OK.

(68) Select the text in the middle column (hotels). Apply the Class “.pt16” from the Targeted Rule drop-down list. Repeat “Apply the Class” to the text in the third column (restaurants).

21

(69) STEP 13: Add Live Web Cam into an iFrame. Merge the three cells on the next row (row 4), immediately below the activities, lodging, and restaurants text. Add the following text as a Heading 2: LIVE WEB CAM of Duval Street, then press Enter.

(70) Click into the code window and insert the following iFrame code: <iframe src ="http://www.liveduvalstreet.com" width="850" height="450" scrolling = "Yes"></iframe>

22