Creating a Web Photo Gallery/Album in Dreamweaver
In this video I’m gonna show you how to create a photo gallery in Dreamweaver...
Download everything we made in this video (ZIP)
Hey everybody, Greg Davis here. In this video I'm gonna show you how to create a photo gallery in Dreamweaver.
I have got a blank html page HERE, I have already saved it as gallery.html
First, let's create a table to layout the gallery.
Let's GO to the Insert panel, Common tab, and SELECT Table.
Let's DO 4 rows, 5 columns, 500px wide, 0 border, 0 cell padding, and 0 cell spacing. No header, no caption, and no summary.
I HIT Ok.
And HERE is my table.
I wanna ALIGN center.
And I have already created my images, they are inside of THIS images folder.
I just GRAB the first one, and DRAG it into THIS cell.
The alternate text will BE 1, because this is image 1, I HIT Ok.
And my images are 500px wide, and 500px tall.
But in my gallery I want them to show up as being 150px wide, and 150px tall.
So I keep the original 1:1 aspect ratio. And I haven't touched the image itself, it's still 500px wide, and 500px tall. I just want it to show up as being 150px wide, and 150px tall.
Now, if you place a lot of large images in one gallery, you may wanna create reduced-size thumbnail images, so your page will load faster. I'm not gonna do that right now.
I just insert all of THESE images, just like that.
I GRAB my second image, and I just DRAG it into this cell.
The alternate text will BE 2, I HIT Ok.
And I REDUCE the size to 150px wide, and 150px tall.
I GRAB my third image, and I DRAG it into this cell.
The alternate text will BE 3, I HIT Ok.
And I REDUCE the size to 150px wide, and 150px tall.
I GRAB my fourth image, and I DRAG it into this cell.
The alternate text will BE 4, I HIT Ok.
And I REDUCE the size to 150px wide, and 150px tall.
I GRAB my fifth image, and I DRAG it into this cell.
The alternate text will BE 5, I HIT Ok.
And I REDUCE the size to 150px wide, and 150px tall.
I GRAB my last image, and I DRAG it into this cell.
The alternate text will BE 6, I HIT Ok.
And I REDUCE the size to 150px wide, and 150px tall.
And here we go!
Now, I left an empty column, and an empty row between my images to position them. So let's do that real quick.
I SELECT the first column, and it's gonna BE 150px wide, just like the images.
I SELECT the second column, and it's gonna BE 25px wide.
I SELECT the third column, it's gonna BE 150px wide.
I SELECT the fourth column, it's gonna BE 25px wide.
I SELECT the last one, and of course, it's gonna BE 150px wide.
And I have a table cell below my images for some text.
So in the FIRST one, I just TYPE in "image 1".
Just type in whatever you want, I just TYPE in "image 2" in the next one
"image 3" in the third one, "image 4" "image 5" and "image 6"
Alright, I SELECT this row.
And I want it to BE 40px tall, and I ALIGN my text center, to the top.
Same thing with THIS row, I SELECT it.
I want it to BE 40px tall, and I ALIGN center, to the top.
Alright, now you could link your images to the images themselves, so if users click one of your images, the actual image will open in the browser. Let me just show you.
I SELECT the first image, and I just LINK it to the image itself.
And by default, there is a border on the linked images, but I wanna get rid of it, so I just CHANGE the border to 0. I HIT my enter key, and it's gone.
Now, if you want your image to open in a new tab, just change the target to blank. I'm not gonna do that.
Let's PREVIEW our gallery in a browser.
YES, save changes.
And HERE is our gallery.
I CLICK the image, and the image shows up in the browser.
Now, this is just the original PNG file. But you could also create pages that hold one image per page, with a next and a previous link on them linking to the next and the previous page. Let me show you what I mean.
I GO back to Dreamweaver.
Let's GO under File, and New.
And let's CREATE a new HTML page, NO layout, just CLICK Create.
And let's SAVE this page real quick.
The file name will BE 1.html, for image 1, CLICK Save.
And HERE is the page.
Let's GO to the Insert panel, Common tab, and SELECT Table.
And this time, let's DO 2 rows, and 1 column. 500px wide, just like the images. 0 border, 0 cell padding, and 0 cell spacing. No header, no caption, and no summary.
I HIT Ok.
And HERE is the table.
I just ALIGN center.
And in the first row, I TYPE in: << Previous - Gallery - Next >>
And this table cell will BE 40px tall, and I ALIGN my text center.
And now I just DROP my first image into THIS cell.
The alternate text will BE 1, I HIT Ok.
And here we go!
I just LINK "Gallery" back to the gallery page.
And before we do anything else, let's SAVE this page.
And now, let's create all 6 pages out of this page.
I just SELECT it, and I PRESS ctr,d (or cmd,d on the mac) to create a copy of this page.
I NEED 4 more copies.
Alright, let's name these pages.
THIS one will BE 2.html
THIS one will BE 3.html
THIS will BE 4.html
5.html
And THIS will BE 6.html
I HIT Refresh, and here we go! Now I just have to link my pages.
I OPEN UP page 1.
And I LINK Next>> to my next page, which is page 2.
And since this is page 1, there is no previous page, so I just leave that unlinked.
I OPEN UP page 2.
And first off, I SELECT the image, and I SWITCH it to the second image, the alternate text will BE 2.
And now I just LINK Previous>> to page 1, and Next>> to page 3.
I OPEN UP page 3.
I SWITCH the image to image 3, the alternate text will BE 3.
And I LINK Previous>> to page 2, and Next>> to page 4.
I OPEN UP page 4.
I SWITCH the image to image 4, the alternate text will BE 4.
And I LINK Previous>> to page 3, and Next>> to page 5.
I OPEN UP page 5.
I SWITCH the image to image 5, the alternate text will BE 5.
And I LINK Previous>> to page 4, and Next>> to page 6.
I OPEN UP page 6.
I SWITCH the image to image 6, the alternate text will BE 6.
And I LINK Previous>> to page 5, and there is no next page, so I just leave that unlinked.
I GO BACK to my gallery page
And I just link the images to the actual pages
I SELECT the first image, and I LINK it to page 1, border will BE 0.
I SELECT the second image, and I LINK it to page 2, border will BE 0.
I SELECT the third image, I LINK it to page 3, border will BE 0.
I SELECT the fourth image, I LINK it to page 4, border will BE 0.
I SELECT the fifth image, I LINK it to page 5, border will BE 0.
I SELECT the sixth image, I LINK it to page 6, border will BE 0.
Alright, now I just CLOSE and SAVE these pages.
And let's PREVIEW our gallery in a browser.
YES, save changes.
And HERE is our gallery.
I just CLICK the first image, and I can go back and forth, and it's working. Awesome!
So, this is how you do it. I hope you learned something. I hope you enjoyed it. If you want more videos from me go to my website EasyWebDesignSystem.com, and join my list. Thanks a lot for watching, and see you in the next video. Bye!
Next video:
Adding JavaScript in Dreamweaver>>>All videos in recommended learning order:
How to design a website using Adobe Fireworks>>>
Building a Website Start To Finish With Dreamweaver>>>
How To Embed a YouTube Video On Your Website>>>
Floating Div Tags in Dreamweaver>>>
How To Create a Table in Dreamweaver>>>
Building a Web From in Dreamweaver>>>
Dreamweaver CSS Website Layouts>>>
Creating a CSS Drop Down Menu in Dreamweaver>>>
Creating a Spry Menu Bar in Dreamweaver>>>
Creating Spry Tabbed Panels in Dreamweaver>>>
Creating a Spry Collapsible Panel in Dreamweaver>>>
Working with the Spry Tooltip Widget in Dreamweaver>>>
Creating a Web Photo Gallery/Album in Dreamweaver>>>