Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Building a Website with Photoshop and Dreamweaver (Part 1)

Building a Website with Photoshop and Dreamweaver (Part 1)

Browse Pages: << < 4  5  6  7  8 

Finally after 7 weeks we are the last installment of Super Tutorial 2. In this part we are going to turn your layered out page into a fully functional website.

Hopefully I will be able to wrap this up here and show you the things you need to know to continue creating sites on your own.

1. Select the image in the main part of your page. You will see its name in the "Src" box. Take a note of the image name and path.

Click to enlarge
Click to enlarge

2. Press the delete key and you will see you webpage looking something like this, with the main image deleted and the nav complete.

image 2

3. On the tool bar you will see a field called "Bg" this is where you choose the background color. You can also choose an image, which is what we are going to do. We will use the image we just deleted.

Click the folder icon to the right of the "Bg" field

image 3

4. Navigate to our image. The same one that we took note of in step 1.

Click Select.

image 4

5. The page will look exactly the same as it did in the beginning except the image will be attached as a background meaning that we can insert text on the main layer in the table cell.

image 5

6. Click inside the cell and insert your text. You can also insert images if you wish.

image 6

7. When you preview the page in a web browser, it should all look good with no edges where the images don't quite match. If you have this problem, chances are you have too much text for the page.

When you have previewed the page save it.

image 7

8. Now save as:

Rename the page as the name of the first link. Here it is "link2.htm"

image 8

9. Keep saving the pages as different names until you have a page for each link.

Now all you need to do is open each page and place custom content and you should have a fully functional website.

image 9

10. Publishing your site to the web

I mentioned last week I would help you publish your site to the web.

You will need an account at an Web host to do this. This account must have FTP access enabled.

Then you will need to know 3 things:

  1. FTP name: either a domain name or a IP address (Please consult with your web host for this information)
  2. Username
  3. Password

Once you have this information go to "Define sites" in Dreamweaver. Choose "remote info" For access choose FTP and then enter the information above in the appropriate places.

When you are done, just press the connect button and then "put files" Put the entire site and you are in business.

Congratulations you are now ready to put up your web page.



About the Author:

Click to Visit Author's Website

Colin Smith is a best-selling author, trainer, and award-winning new-media designer who has caused a stir in the design community with his stunning photorealistic illustrations composed entirely in Photoshop. He is founder of the world's most popular Photoshop resource site, PhotoshopCAFE.com, which boasts more than two million visitors.

With over 10 years of experience in the design industry, Colin was formerly Senior Editor and Art Director for VOICE magazine. He is a regular columnist for Photoshop User magazine, PlanetPhotoshop.com, and the official site of the National Association for Photoshop Professionals. He also contributes to a number of other graphic art publications and Web sites, such as Mac Design magazine, Web Designer magazine and Computer Arts Magazine.

Colin's graphic design work has been recognized with numerous awards, including the Guru awards at Photoshop World 2001 and 2002, for his work in both Illustration and Web Design. He's authored or co-authored more than ten books on Photoshop, including the best-selling How to Do Everything with Photoshop CS (McGraw-Hill/Osborne, 2003) and award-winning Photoshop Most Wanted: Effects and Design Tips (A Press/Friends Of Ed, 2002). Colin is also creator of the Photoshop Secrets Video training series (PhotoshopCD.com). He is in high demand across the United States as a lecturer, presenting his Photoshop techniques to Web designers and other graphics professionals across the nation.

Author's URL: Colin Smith
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 4  5  6  7  8 
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Building a Website with Photoshop and Dreamweaver (Part 1)"

Only registered users can write comment

No comments yet...