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.
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
The first thing we need to do is set up the site.
Click on new. This will be our new site.
Give the site a name
and then on the Local Root Folder, This is where your site will reside on your computer,
Find the folder on your Computer where you exported your Imageready HTML.
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"
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.
Lets do a little housework: You can safely highlight and delete the tags on the top and bottom of the page.
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.
Your page should now sit all snug in the top left corner.
Lets set the background color for the page...
Press Ctrl/Cmd+J again or, modify>page properties or, right click on the background and select page properties.
Click on the background color box and select a color. I chose black.
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.