Slicing Pages In Web Sites

Let Us Help You Succeed! - Call (800)770-0492, email david@naaip.org or daily conference call.

Slicing Pages

Once you have designed the Web page or opened up a page saved as a Photoshop or Fireworks document, you are ready to begin slicing. The slice tool in Fireworks allows you to slice a graphical screen design into an HTML page. When using the slicing process to create a Web page, the first step is designing the page.

Then, using the slice tool (located below the main tools on the toolbar Sample Web page design in Macromedia Fireworks (You can design entire Web pages in Macromedia Fireworks.) in Fireworks), the page is sliced into rectangular boxes that have a green overlay.

Sliced elements should include any item that needs to work as a link and any element that is a separate graphic on the page. When the slices are exported, all the graphics are optimized and converted to either a GIF or JPG file and assigned a sequential name. Each slice is placed within an HTML table and the resulting output is an HTML file and all the supporting graphics. The HTML file is a Web page.

Although Fireworks has some tools for adding functionality to the Web page, Dreamweaver is far better suited to perform the Web authoring functions needed. The HTML page you generate from Fire- works can be opened in Dreamweaver and all the Web functionality can be added.

Optimizing and Exporting Pages and Graphics

Optimizing graphics means choosing a color palette for the slice. We stated before that all photos and full color images need to be JPG files and that all flat color logos and icons need to be GIF files.

In Fireworks, you can click on each slice and use the properties inspector to change the file optimization format used upon export. This means that some slices are exported as GIF and some are exported as JPG. This is all based on your decisions when slicing. Upon exporting, Fireworks will ask you where to place the new graphic files and the HTML file that supports them. You’ll need to refer back to the folder structure you previously created.

The most important thing to remember when exporting is to put the files in the correct folders.Be consistent and place files in their proper locations. For this site we are using this structure: All HTML pages are exported to the root folder: jdimarco (first initial, last name).

Name the .htm pages descriptively. Bio.htm, .portfolio_menu_page.htm, cases_1.htm, cases_2.htm, are all good name conventions.

Don’t use spaces or odd characters in file names. Underscores are good for separating words in file name s. Do not use extra periods in filenames - except at the end before the .htm file extension. The files will not work if they are named incorrectly. All images are exported to the images folder: jdimarco/ images. Your home page or “first page” of the site is always named index.htm.

After export and optimization, you will save a native Fireworks file complete with slices, layers, and text. The file may be used for editing and exporting later on. Optimization in Macromedia Fireworks (Graphic files can be optimized for GIF or JPG exporting.) How to Export individual JPG and GIF graphics in Macromedia Fire- works MX 2004: You can create your content and artwork in Adobe Photoshop, Corel Draw, Photopaint, Adobe Illustrator, or any other graphic art application. However, we know that all Web graphics need to be converted to the proper format so that they can be viewed on the Web.

To do this exercise, find an image on your computer or the Internet that you can use. Open Macromedia Fireworks and immediately go to Window>Properties and Window>Tools to show the tool bar and property inspector. Both palettes might be open on start up.

Open a graphic file in any format (TIFF, EPS, PSD, PNG, JPG). Scale, crop, add to it, and then use the slice tool to slice all the parts of the image in Fireworks. Click each slice and then using the properties inspector, set the Default Export Options file type to GIF Web snap 216 or JPG (better quality).

Remember that GIF is best for flat line art and logos while JPG is best for photos and full color images. Go to FILE> EXPORT. Export the graphic files only into your images folder. Save the file as native Fireworks PNG file for use later. The exported graphics can be placed into layers and tables on your Web pages in Dreamweaver by going to Insert> Image. Saving files for editing and archive: Once you have a basic screen layout, you can experiment with placement and color.

After screens are complete, you can save the file as a PNG (Portable Network Graphics) file in Fireworks. PNG is the native format for Fireworks. Portable Network Graphics are full color files that support transparency, unlike JPEG which does not. The great thing about PNG in Fireworks is that all images and text remain editable and on layers.

It is very important that you save a PNG file for every screen and Fireworks file that you make. If the page elements need editing, the Fireworks PNG can be opened, edited, and re-exported. This is an important step in the production process. If you have native Photoshop files, you can save a PSD file in layers as your editable document.

There is one simple rule for color: no CMYK color files. CMYK graphics are built for printing, not Web output, as they will not show up in your Web pages. Let’s review what we have covered in the Web portfolio design process so far. Overall, we stated that the Web portfolio needs to be content driven, easy to navigate, persuasive, and dynamic.

Stand-alone Quoters for those that already own a website! Signup to Free Insurance Agent Website.

Join our 6 day per week conference call to learn how to get to the top of Google.

NAAIP - Incentive based marketing specialists. Use free luxury vacations, wills and websites to get in front of prospects. Let's start by sending you to Hawaii, Las Vegas or Orlando.

$8

Live Transfer Leads

Click Here

Sell Life Insurance in 4 Minutes

Click Here

Daily Conference Call

Monday to Thursday Noon & Weekends 2pm ET
Dial

1-888-532-9320

Learn how NAAIP's free client-facing websites and quoters helps you earn more.
There are no Catches!

NAAIP's YouTube Spokesman

Add a quote engine to your website for Free! We'll even create the website for you for Free!

There are No Catches! It's free and always will be

Life Insurance Quote Engine

Medicare Supplement Quote Engine

*We've built 16 quote engines for you.

"Best system in industry for insurance agents and carriers - "Technology that works and impresses."

NAAIP's start in the insurance industry began by creating dynamic systems for insurers. Excellent results caused one project to lead to another.

Currently, NAAIP provides websites & quoters for thousands of agents and technological wizardry for multiple leading insurance companies. A commitment to excellence is the key to the synergy that powers our growth."

Aaron Levy - CEO, NAAIP.org
David Gordon - Digital Marketing Evangelist, NAAIP.org

Offer a Free "Stripped Down" NAAIP Website to Your Clients

Sales Tools & Information

What are you waiting for?

Insurance agency websites with quote engines. Free forever! There is no catch. Your website will be active within 30 seconds.

Signup For Free Insurance Website

Forgot Password


Back