How to Create a Web Page in Fireworks

Create web pages using Adobe Fireworks for attractive graphics and CSS compatible HTML.

Adobe Fireworks is a useful tool and fully capable for development, graphics and website prototyping. You can build your web page, construct graphics, make banners and create hyperlinks all within Fireworks. Most file types that are produced in other graphic applications packages can be imported converted and exported using this package. If you want to open or produce a Photoshop file (.PSD), GIF, JPEG, TIFF, EPS or BMP, this would be the one to do it. Fireworks will also produce Portable Network Graphics (PNG) files by default and also gives you the option to re-size any file for specific output as you need.

Instructions

1. Launch Adobe Fireworks and create a new file ("Ctrl+N"). Choose the size of the page which you wish to start. 800 pixels wide by 600 pixels high is a basic standard but you can change it later. Choose a background color of white; again, you can change it later. Click "OK."

2. Choose a graphic to be used as a header for your site either by importing it from a file you have created or simply create one by clicking the Rectangle tool on the Tools menu ("Shift+U") and creating your graphic there. You can use the Text tool ("Shift+T") on the tools menu to add heading content. Use the same Text tool to add content and verbiage to your site by selecting the Text tool, placing your cursor in the position on the page where you want the text and begin typing. As an alternative, you can paste directly in the same position any text you have previously copied.

3. Create hyperlinks by selecting the "Rectangle Hotspot tool " on the Web panel of the Tools menu and using it to highlight your intended text URL. A green rectangular square will appear over the text. Type the link URL address in the "Link" text entry field and fill in an alternate text name for this link. The target drop-down selection should be "_blank."

4. Click "File > Export" from the file menu or hit "Ctrl+Shift+R." The "Export" dialogue box will appear.

5. Choose where you want your website to reside by navigating to the target directory in the "Save in" drop-down box. Optionally, you may choose to keep this file in the same directory as your websites.

6. Type in the name of your file in the "File name" text entry field or you can let the "File name" field default to the name Fireworks has chosen.

7. Choose "CSS and Images (.htm)" from the "Save as type" drop-down box. Choosing this option will create an HTML web page and the accompanying Cascading Style Sheet (CSS) for that particular page. You also can choose to create just the HTML and associated images by selecting "HTML and Images" in the Export drop-down entry field. Selecting this option will open more entry fields: in the HTML field select "Export HTML File," in Slices, select "None" and select "Current Page" in the Pages menu. Make sure you choose either of these options. Any other type will not create the website and its associated images.

8. Click the "Put Images in Subfolder" check box.This will place all of your graphic images in a separate subfolder in your target directory.

9. Click "save." The HTML files and associated images have been created.

10. Test the new web page by navigating to the directory you created and clicking the HTML file.

References

• Lynda: Fireworks CS5 Essential Training
• Entheos: Design a Layout in Fireworks CS4

Resources

• Lynda: Tutorial Fireworks CS4 New Features