This is a tutorial showing how to use Photoshop
Automated Web Gallery and Dreamweaver to create web pages. Click
Portfolio
to see completed web page.
Preparation
1. 1. Put images in a directory
2. Number images in the order you want them to appear
3. Create a directory for web graphics, name it ‘Key’.
Return to Top of Page
PhotoShop Gallery
1. Choose File, Automate, Web Photo Gallery
2. In Options Section:
a. Banner: Enter info
Site Name: My Key Web Site
Photographer: Portfolio
Remove Date
b. Large Image: Image Size Custom: 400 pixels.
c. Thumbnails: Image Size Custom: 75 pixels.
d. Columns: 5
e. Custom Colors: Background and Banner: white
3. In Folders Section:
a. Click Browse – move to directory where images are
b. Click Destination - move to directory for web graphics
4. Click OK.
Photoshop will create a large image, a thumbnail and a page with
navigation links for each image, and an index.htm page.
5. When your web browser opens the new page, close it.
Return to Top of Page
Dreamweaver
Create Template
(This is a mock template; to create a true template, see Dreamweaver
Help)
(This is a mock template; to create a true template, see Dreamweaver
Help)
Open new web page
1. Open Dreamweaver
2. Browse to ‘Key’ directory.
3. Open index.htm (This is the file that was that was just created
by Photoshop.)
Format top banner & add navigation links
1. Click on top banner, in Properties panel, change W to 700 Pixels,
Align: Center
2. Type in and create links for Home | Tutorials | Portfolio
3. Change ‘Home | Tutorials | Portfolio’ to Size: 3
Create table inside of top banner
1. Move to the right of ‘Home | Tutorials | Portfolio’,
press [Enter]
2. Click Insert Table: 3 Rows, 2 Columns, 700 Pixels, OK
3. Align Table = Center
Format left cells
1. Cut and paste ‘Portfolio’ into top left cell
2. Adjust width of cell to width of ‘Portfolio’.
3. Make Bg Color for top 2 left cells pale blue: # E7E7E7
Move graphics table into main table
1. Cut and paste table with thumbnails into middle cell
2. Click on border of image table
Align: Center,
Border: 2,
W: 700 Pixels
Add labels & make them bold.
1. With Dreamweaver set to ‘Show Code and Design View’:
2. Click on the first image of each row of graphics
a. Replace <TR> just above: <TD width="79" align="center">
With: <TR><Td><strong>5D</strong></Td>
</TR>
b. Click [Refresh]
c. Replace 5D with actual titles, ‘Mandalas’, Photoshop’,
Fairies’ & Kat’
Return to Top of Page
Create a backup
1. 1. Save index.htm file
2. Save a backup called index1.htm
3. Upload directory
Return to Top of Page
Update using new images
1. 1. Create new Photoshop automated gallery, see: PhotoShop Gallery
above.
2. Open Key directory, open index.htm file
3. Copy and paste thumbnails from index.htm file to index1.htm file.
4. Save as index.htm and index1.htm
4. Upload directory
Return to Top of Page
|