Building a website
Part 8 Turning the page into a website

1. Preparing the background
2. Adding the design elements
3. Preparing rollovers with Layer Styles
4. Slicing in *Imageready
5. Rollovers in *Imageready
6. Optimizing and publishing
7. Bringing it into *Dreamweaver
8. Turning the page into a website

PART 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. Preparing the background *Photoshop 6
2. Adding the design elements to the page *Photoshop 6
3. Preparing rollovers with Layer Styles *Photoshop 6
4. Slicing in *Imageready 3
5. Rollovers in *Imageready 3
6. Optimizing and publishing *Imageready 3
7. Bringing it into *Dreamweaver 4
8. Turning the page into a website *Dreamweaver 4

---

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.

 

2

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

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

4

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

Click Select.

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.

6

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

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.

8

Now save as:

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

 

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.

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.

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

For any questions regarding this tutorial please visit the cafe, where there are lots of people willing to help you. I hate to say it, but please don't e-mail me question regarding the tutorial because I just don't have the time to answer all the questions. You will receive an answer quickly at the forum.

Enjoying this Tutorial?

Photoshop and Dreamweaver Integration
Learn how to build stunning web pages using Photoshop and Dreamweaver together. This step-by-step approach makes it so easy, that even beginners can produce great webpages. Covers the latest version of Photoshop (CS) and Dreamweaver (MX 2004).

Check out the DVD for easy to follow video, watch over Colin's shoulder as he builds a complete web site from scratch, explaining every step along the way. Ever wished you could sit in a professional design studio for a day and learn all the trick? This is your chance, only better!
For a more detailed approach See the book includes iframes, design theory, drop downs, liquid sites and no programming commerce. Perfect companion for the DVD!

 

Thanks for visiting PhotoshopCAFE come back for more great tutorials
Discuss this tutorial in our forums