Building a website
Part 7 Bringing it into Dreamweaver
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, (Check out my book and DVD) but it will show you what you need to know to get started.
INGREDIENTS
by Colin Smith
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 7
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. 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
The first thing we need to do is set up the site.
Open Dreamweaver
Site>Define Sites
2
Click on new. This will be our new site.
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..
4
Find the folder on your Computer where you exported your Imageready HTML.
Click select.
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"
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.
7
Lets do a little housework: You can safely highlight and delete the tags on the top and bottom of the page.
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 dont have the extension (very probable) Press Ctrl/Cmd+J and enter
"0" in each of the margin boxes.
9
Your page should now sit all snug in the top left corner.
Lets set the background color for the page...
10
Press Ctrl/Cmd+J again or, modify>page properties or, right click on the background and select page properties.
11
Click on the background color box and select a color. I chose black.
12
Here is our page in Dreamweaver. Press F12 to view it in your web browser.
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.
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!
