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  > >>

In this tutorial I will show you how to import your Imageready HTML into dreamweaver, where you can have more control over the formatting. This is not intended to be a full fledged tutorial on Dreamweaver, but it will show you what you need to know to get started. At the same time its not limited to Dreamweaver, the principles apply to most WYSIWYG editors. The reason I chose Dreamweaver is because this is the tool that I use and I'm familiar with it.

1. The first thing we need to do is set up the site.

Open Dreamweaver. Site>Define Sites

image 1

2. Click on new. This will be our new site.

image 2

3. Give the site a name and then on the Local Root Folder, This is where your site will reside on your computer, click browse..

image 3

4. Find the folder on your Computer where you exported your Imageready HTML.

Click select.

image 4

5. Your site name will now appear in your selector. Its important to always choose your site before you work on it so that your files will be saved to the correct location.

When your ready click "Done"

image 5

6. In the navigation window you will see a file which is called "your_file.htm" (your_file being the name of your document you created in Imageready)

Double click the file and your page should now be launched in Dreamweaver.

image 6

7. Lets do a little housework: You can safely highlight and delete the tags on the top and bottom of the page.

image 7

8. By default there is a slight page margin, but we will remove it.

We want to make the page sit flush to the left and top.

Here I have an extension called "Zero Page Borders" This does it easily for me.

If you don't have the extension (very probable) Press Ctrl/Cmd+J and enter "0" in each of the margin boxes.

image 8

9. Your page should now sit all snug in the top left corner.

Lets set the background color for the page...

image 9

10. Press Ctrl/Cmd+J again or, modify>page properties or, right click on the background and select page properties.

image 10

11. Click on the background color box and select a color. I chose black.

image 11

12. Here is our page in Dreamweaver. Press F12 to view it in your web browser.

image 12

Next week I will show you how to add text, Produce the linked pages and if i have time how to put it on the web. Other wise i will add a bonus lesson on putting it to the web.



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
Browse Pages: << < 4  5  6  7  8  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

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

Captcha