Link HTML Web Pages Using Adobe Dreamweaver Button Hotspots and Edit HTML- Photoshop Website Design
351 بار بازدید -
3 سال پیش
-
Subscribe to our Channel to
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
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
3 سال پیش
در تاریخ 1400/06/18 منتشر شده
است.
351
بـار بازدید شده