Link HTML Web Pages Using Adobe Dreamweaver Button Hotspots and Edit HTML- Photoshop Website Design

Subscribe to our Channel to get regular Video Lessons on Adobe Photoshop. Because we are a slow talker, we recommend you use the YouTube "Tools Cog" on the player bar to watch the video at a speed of 1.5x or even 1.75x. In this lesson we create Links onto the Buttons along the bottom of the Web Page. The resulting functionality is that People Click on a Button Name, and then they are taken to the Button’s Web Page. You need to have completed the previous lesson on converting Photoshop Page Designs into HTML Web Pages before doing this Lesson. Resources Download Links: Note: These are Automatic Downloads which start immediately Recommend to use Google Chrome as your Browser Check with your Teacher or Instructor first, as they may already have these Download materials for you. - Lesson Overview PDF https://tinyurl.com/z26davk - PDF of Step By Step Instructions https://tinyurl.com/upcmhy47 Because we are a slow talker, we recommend you use the YouTube "Tools Cog" on the player bar to watch the video at a speed of 1.5x or even 1.75x. If you are a Teacher watching this video then click the downloads links and get the lesson materials for your students. These downloads (shown above) include the detailed Step by Step set of PDF Instructions. If you have the time it will be extremely beneficial to watch the entire video to maximize learning outcomes. VIDEO TIMELINE INDEX: Click on the time number to jump to that section of the video. 00:00 to 01:07 - Introduction 01:07 to 02:00 - Required Prior Lesson 02:00 to 03:29 - Preview of Finished Lesson 03:29 to 04:16 - Lesson Downloads 04:16 to 05:15 - Lesson Overview and Steps Summary STEP 1 - PAGE PROPERTIES 05:15 to 08:00 - How to Display Page Image Properties in DW 08:00 to 10:27 - LIVE DEMO of Step 1 Page Properties STEP 2 - HOTSPOT LINK THE ABOUT PAGE 10:27 to 12:24 - How to Make the About Hotspot Link 12:24 to 13:25 - Making the Other Button Hotspots 13:25 to 16:31 - LIVE DEMO of Step 2 - Make Hotspots STEP 3 - TEST HOME PAGE BUTTON LINKS TO OTHER PAGES 16:31 to 17:52 - Button Links Testing on Home Page 17:52 to 19:18 - Using the Browser Back Button 19:18 to 22:36 - LIVE DEMO - Testing the Button Links STEP 4 - EDITING HTML CODE TO FIX HOTSPOTS 22:36 to 24:38 - Viewing the HTML Code for Hotspots 24:38 to 27:17 - Removing a Button Hotspot via Code 27:17 to 28:43 - Edit HTML to Add in a Missed Link 28:43 to 30:55 - Changing the Size of Hotspot Rectangles 30:55 to 36:36 - LIVE DEMO of Editing HTML Hotspot Code STEP 5 - MAKE HOTSPOTS FOR ALL THE OTHER PAGES 36:36 to 37:46 - How to Make Hotspots on the Other Pages 37:46 to 39:54 - How to Copy and Paste Hotspot HTML Code 39:54 to 48:10 - LIVE DEMO - Make Hotspots on All Pages STEP 6 - TEST THE COMPLETED WEBSITE 48:10 to 48:58 - Required Home Page Tests 48:58 to 49:28 - Required About Page Tests 49:28 to 49:35 - Required Menu Page Tests 49:35 to 49:54 - Testing Booking, Gallery, and Contact Pages 49:54 to 51:53 - LIVE DEMO - Testing the Final Website Pages CHALLENGE TASKS AND VIDEO WRAP UP 51:53 to 52:23 - Challenge Task 1 - Link Previous Challenge Pages 52:23 to 53:50 - Challenge Task 2 - Link Your Own Web Site 53:50 to 54:19 - Video Wrap Up and Outro This video will be useful for anyone learning how to use Photoshop. You can check out our full Photoshop Course in the Photoshop Playlist on our YouTube Channel at this Link: https://tinyurl.com/8z91lc6e Like this video if you found it helpful. Subscribe to our Channel to get notified of our weekly video updates. Enjoy, Passy