How to Build a Web Page in ImageReady and Export to Dreamweaver
Dreamweaver is the premier webpage editing program on the market. It has tools and functions that make it a favorite among professional webpage designers. But it is a very complex program with a steep learning curve. For this reason, if you have to use Dreamweaver to publish a webpage, it might be wise to create as much of the web page as possible in another program. If you have access to ImageReady (and Photoshop, which comes with it), you can easily create a simple web page that you can then export in a form usable by Dreamweaver.
Other People Are Reading
Instructions
-
-
1
Decide what you want your website to look like and how it should function. For example, choose whether you want your navigation bar at the top or on the left side of the screen. You should also pick a color theme. As with most graphics projects, it is better to use only a few colors and to consistently use this same set of colors throughout your site.
-
2
Load any images you want to use in your web page design onto your computer by transferring them from the digital source they are stored on or by scanning them in. If you scan, make sure you used a resolution of at least 600 DPI in your scanner software.
-
-
3
Open Photoshop. Select "File" and click "New." In the dialog box that opens make the document the same width and height you want your web page to be. A good choice here is 1024x768. Make the resolution 72 pixels and click "OK."
-
4
Select either the "PaintBucket" tool or the "Gradient" tool from the toolbar and fill the canvas with the color or gradient of your choice. Then click on either the "Rectangular" or "Elliptical" shape tool and set it to "Fill." Now use it to draw the navigation buttons and other shapes you need for your page.
-
5
Select the "Text" tool and use it to add the text you need for your web page, including any text on the navigation buttons.
-
6
Select "File" and click "Open." Browse to the images you loaded in step 2 and open them. Use the "Copy" and "Paste" functions to place the images in the web page document. Use the "Scale" function under "Edit" to resize and position the images where you want them in your design.
-
7
Click the "Jump to ImageReady" icon at the bottom of the toolbar. This will open the current Photoshop file in ImageReady. In ImageReady, select the "Slice" tool and use it to create selections around the buttons and any other clickable sections. Name each slice, even the ones that have nothing in them.
-
8
Select "File" and click "Save as Optimized." Make sure the file type is HTML and save your file. You now have an HTML document that can be opened in Dreamweaver for adding hyperlinks and publishing.
-
9
Open Dreamweaver. Select "File" and click "Open." In the dialog box that opens, browse to the HTML file you exported out of ImageReady in Step 8 and open it in Dreamweaver.
-
1
