Make Web Page Slide Show in Dreameaver with HTML CSS Javascript to Make a Website Photo Slideshow

Subscribe to our Channel to get regular Video Lessons on Adobe and Micorsoft Applications.

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 are going to make a Gallery Slideshow Page for our Website using Dreamweaver HTML, CSS, and Javascript.

We will then link in this new Slideshow Web Page as a replacement to the existing Gallery Page.


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/3at699t9

- PDF of Step By Step Instructions
https://tinyurl.com/cwdnc97j

- Text File of HTML CSS Javascript for Slideshow
https://tinyurl.com/3h328b6y

- Photoshop Design for Gallery Page
https://tinyurl.com/79drydbm

- Photoshop Home Button Template
https://tinyurl.com/rmnxyh5v


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 00:54 - Introduction
00:54 to 01:34 - Preview of Finished Lesson
01:34 to 02:26 - Required Prior Learning
02:26 to 04:34 - Lesson Downloads
04:34 to 07:01 - Lesson Steps Summary


STEP 1 MAKE THE PHOTOSHOP DESIGN FOR THE SLIDESHOW PAGE
07:01 to 16:10 - Modify Gallery Page Design for Slideshow

STEP 2 MAKE THE EXIT SLIDE SHOW BUTTON
16:10 to 20:30 - Use Download Template to Make Exit Slideshow Button

STEP 3 GET IMAGES FOR THE SLIDE SHOW PLACED INTO A FOLDER
20:30 to 22:30 - Get Images for Slideshow from Google Images

STEP 4 MAKE THE SLIDE SHOW PAGE IN DREAMWEAVER CC
22:30 to 26:00 - Set Up New Page in Dreamweaver

STEP 5 IMPORTING AND SETTING THE PAGE BACKGROUND IMAGE
26:00 to 27:05 - Insert Design as Background Image

STEP 6 PREVIEW THE SLIDE SHOW PAGE IN A WEB BROWSER
This was done as part of Step 5 above.

STEP 7 PUT A BROWSER TITLE ONTO OUR SLIDE SHOW PAGE
27:05 to 28:10 - Check Page has a Document Title

STEP 8 ADD THE EXIT SLIDE SHOW BUTTON
28:10 to 30:47 - Insert Exit Button Image onto Page

STEP 9 LINK THE EXIT SLIDE SHOW BUTTON TO OUR HOME PAGE
30:47 to 32:37 - Link Exit Button to the Home Page

STEP 10 MAKE THE SLIDE SHOW WEB PAGE CENTRED ON SCREEN
32:37 to 36:00 - Centre Web Page and Exit Button on Screen

STEP 11 ADD THE SLIDESHOW CSS AND JAVASCRIPT CODE
36:00 to 45:00 - Copy in Download Code and Add Slide JPG Names

STEP 12 TEST AND ADJUST THE SLIDE SHOW
45:00 to 46:00 - Identify the Problems
46:00 to 46:34 - Fix Position of End Button Problem
46:34 to 48:09 - Fix some Incorrect Caption Text
48:09 to 49:12 - Fix Height of One Slide
49:12 to 50:10 - Fix Horizontal Position of Slideshow

STEP 13 LINK THE OTHER WEBSITE PAGES TO THE NEW "SLIDE SHOW" PAGE
50:10 to 51:05 - Identify the Links Needing Fixing
51:05 to 54:43 - Directly Editing HTML to Change the Links
54:43 to 55:08 - Alternative Link Change Method Using Design View

CHALLENGE TASK AND VIDEO WRAP UP

55:08 to 56:15 - Challenge Task - Photo Album Slideshow
56:15 to 56:53 - Video Wrap Up and Outro


This video will be useful for anyone learning how to use Dreamweaver and Write HTML CSS and Javascript.

You can check out our full Photoshop and Web Page Making 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