With the clone still selected, go to the Property inspector and make the following changes:
- Set the color fill to None.
- Change the stroke color to #FFFFFF.
- Change the Width to 394 pixels.
- Change the Height to 193 pixels.
- Change X Coordinate to 35.
- Change the Y Coordinate to 12
- Click the Effects + symbol and choose Blur > Gaussian Blur and set the Blur Radius to 1.0
- Click OK.
- Go to the main menu and select Modify > Arrange > Send Backward.
Right Column Content Area
- Select the Right Column content area.
- Go to the main menu and select Edit > Clone.
- With the clone still selected, go to the Property inspector and make the following changes:
- Set the color fill to None.
- Change the stroke color to #FFFFFF.
- Change the Width to 162 pixels.
- Change the Height to 193 pixels.
- Change X Coordinates to 433.
- Change the Y Coordinates to 122.
- Click the Effects "+" symbol and choose Blur > Gaussian Blur and set the Blur Radius to 1.0.
- Click OK.
- Go to the main menu and select Modify > Arrange > Send Backward.
The final result on all content areas will look like Figure 19 below.
Figure 19. The final content areas
Adding the Glass Effects
You create glass effects by using light colors and transparencies. Let's start at the top of the interface and work your way down.
In the Figure 20 below, the selected object is the shape/effect we will create next.
Figure 20. The selected the object for the Glass Effect you will create
I created the irregular shape with the Pen tool. Essentially, you play connect the dots only without the dots. To demonstrate, Figure 21 below shows anchor points in the order I created them.
Figure 21. The ordered anchor points for creating the irregular shape
Note: It may take a couple of tries to get the hang of using the Pen tool but once you do, you will probably start using the Pen tool more often. It is very handy.
- Go to the Toolbar and select the Pen tool. Place the first anchor at the top left as illustrated in step one in Figure 21 above by clicking and releasing the mouse button.
- Place the second anchor point at the top and in the center of the interface. Before releasing the mouse button, drag the mouse to the right so that the guideline of the Pen tool follows the top left curve of the interface like the image below.
Figure 22. Setting the first two anchor points at the top of the interface
- Place the third anchor at the top right, as shown below by clicking and releasing the mouse button.
Figure 23. Setting the third anchor point at the top of the interface
- Place the fourth anchor at the top right but just to the lower left of the third anchor as shown in Figure 24 below by clicking and releasing the mouse button.
Figure 24. Setting the fourth anchor point at the top of the interface
- Place the fifth anchor in the location as shown in figure 25 below, but this time drag the mouse to create handles.
Figure 25. Setting the fifth anchor point at the top of the interface
- When all five anchors are in place, simply click the very first anchor point you created. This will close the path so you can add a fill color to the new shape you created.
- With the new shape selected, go to the Property inspector and set the following properties.
- Remove the stroke by selecting None in the stroke's pop-up menu.
- Set the fill to Linear Gradient with a color of #FFFFFF and #5176BB. Then, set the opacity of the fill color #5176BB to 0 as shown in Figure 26 below.
Figure 26. Setting the fill color, gradient, and opacity
Similar to when you added the Linear Gradient to the shape outline of the interface earlier in this article, you will adjust the fill with the new shape.
- With the shape still selected, go to the Toolbar and select the Paint Bucket tool.
- Adjust the Paint Bucket Fill handles so that it looks similar to Figure 27 below.
Figure 27. Adjusting the Paint Bucket Fill handles
Adjust it as necessary to get the desired effect. The new shape should be slightly lighter in color then the interface itself.
This completes the first glass effect.
Start on the left side of the Ultraweaver.com interface and create the effect along its side. But first, take a look at the two selected shapes you will create in Figure 28 below.
Figure 28. The completed shapes you will create on the left side of the interface
- Select the Rectangle tool from the Toolbar.
- Draw a rectangle so that it is roughly the width of the side of the interface and a height of 100 pixels. This does not need to be exact. You will be editing its size and shape.
- Move the rectangle so that it covers two-thirds of the top left side of the interface. It should look similar to Figure 29 below.
Figure 29. Moving the rectangle so it covers two-thirds of the top left side
- With the rectangle still selected, use the Subselection tool and click any of the anchor points to ungroup the rectangle.
- In the Toolbar, select the Pen tool and edit the bottom left anchor point so that the left edge of the rectangle follows the contour of the left edge of the interface, as shown in Figure 30 below.
Figure 30. Modifying the bottom left anchor point
For now, leave the edited rectangle as is. You will now add another rectangle that you will put below the top left object you just created.
- Select the Rectangle tool from the Tools panel.
- Draw a rectangle so that it is roughly the width of the side of the interface and a height of about 70 pixels. This does not need to be exact. You will edit its size and shape.
- Move the rectangle so that it sits below the first edited rectangle. It should look similar to Figure 31 below.
Figure 31. Moving the second rectangle below the first one
- With the rectangle still selected, use the Subselection tool and click any of the anchor points to ungroup the rectangle.
- Move the bottom left anchor point to the right so that it sits at the edge of the interface.
- Select the Pen tool and select the bottom left anchor again. This time, adjust the left edge of the rectangle so that it follows the contour of the left edge of the interface as shown below.
Figure 32. Adjusting the left side of the second rectangle to follow the contour of the left edge of the interface
Because there is no precise method of translating exact movements that I make when using the Pen tool, you will need to edit the two shapes so that they look like Figure 33 below.
Figure 33. The final shape of the two rectangles on the left side of the interface
Once you have edited the two shapes, add a gradient to each shape
- Select the top left edited rectangle.
- Go to the Property inspector and set the following properties.
- Fill: Linear Gradient with a color of #C7CFE0 and #5176BB.
- Set the color #5176BB opacity to 0 as shown in Figure 34 below.
Figure 34. Setting the Fill properties of the top rectangle in the left side of the interface
- With the edited rectangle still selected, go to the Toolbar and select the Paint Bucket tool. Move the Paint Bucket handle so that it is positioned like Figure 35 below.
Figure 35. Positioning the Paint Bucket handle
- Select the bottom left rectangle
- Go to the Property inspector and set the following properties.
- Fill: Linear Gradient with a color of #91A0C7 and #FFFFFF.
- With the edited rectangle still selected, go to the Toolbar and select the Paint Bucket tool. Move the Paint Bucket handle so that it is positioned like figure 36 below.
Figure 36. Positioning the Paint Bucket handle
That completes the left side of the interface.
You do not need to repeat the steps on the left side of the interface for the right side. Instead, you can clone the shapes and reuse them for placement on the right side of the interface.
- Select the top and bottom edited rectangles you just made. The easiest way to do this is to press and hold down the Shift key on your keyboard and select each object.
- With both objects selected, go to the main menu and select Edit > Clone.
- Go to the main menu again and select Modify > Transform > Flip Horizontally.
- Move the selected items and position them on the right side of the interface. Ensure that the Y coordinate of the objects is the same for both sides.
You should now have a complete layout of the Ultraweaver.com interface similar to Figure 37 below.
Figure 37. The complete layout of the Ultraweaver.com interface
This concludes, the Creating the Ultraweaver Design section. You can experiment with what you have done so far by adding additional effects.
Slicing
In the beginning of the previous section, Creating the Ultraweaver Design, I talked about some things that you want to keep in mind when designing layouts in Fireworks. One of those items was being flexible enough in your design that you are not creating huge graphic files or a design that limits you on how much content you can place within it.
To give you an example, if you were to export the Ultraweaver design as one graphic file and import it into a web page, you would run into several problems: the graphic would be fairly large in file size and you would also have to include your content in the graphic itself. This would bring up even more issues, such as accessibility, content management, search engine ranking, and so forth.
With slicing, you can eliminate all the problems mentioned above as long as you stay flexible in your design. To better help understand what I mean, let's look at the layout created in the previous section with slices in place, as shown in Figure 38 below.
Figure 38. Slices for the completed interface
I placed key slices so that I do not limit myself when it comes time to export the Fireworks HTML. The Navbar, Main Content, and Right Column slices are where I will place my content when it comes time to edit the layout in Dreamweaver. I will use the left and right tiles so that as I add content, the interface expands vertically.
Note: I have presliced the interface.png. In real life it may take several attempts at slicing a layout. The only way to get the slicing right is by planning ahead the best you can and then exporting the Fireworks HTML for editing. I generally edit the HTML in Dreamweaver so that the HTML will allow me to add content and tile predefined images (left, middle, and right tiled slices in Figure 38 above). Sometimes I may need to go back and reslice, export, and edit them in Dreamweaver until the slicing helps me edit the HTML and maintain my layout.
Let's skip the wordy explanations and actually see what is happening. Instead of using the layout, you created in the previous section, you will use the file I have supplied in the source downloads named interface.png. This file is already sliced.
Exporting Fireworks HTML
- Open the file interface.png.
- Go to the main menu and select File > Export
- The Export dialog box appears. Create a new folder (in any directory you wish) and name it site.
- Create another folder inside the site folder and name it assets.
Figure 39. The Export dialog box
As you can see from Figure 39 above, you have several options to choose from.
In the Export dialog box, set the following properties.
- Filename: layout.htm
- Save as type: HTML and Images.
- HTML: Export HTML File
- Slices: Export Slices
- Check the box to Include areas without slices.
- Check the box to Put images in subfolder.
Click the Options button. The HTML Setup dialog box appears.
- Select the Table tab.
- Change the Space with pop-up menu to Nested tables, no spacers.
- Click OK.
Figure 40. The HTML Setup dialog box
The HTML Setup will export the Fireworks HTML as nested tables with no spacers. I find that using this option when exporting layouts as nested tables makes editing in Dreamweaver much easier. The "Editing in Dreamweaver" section later in this article will explain this a bit further. For now, go ahead and save the Fireworks HTML in the assets folder you created and save the interface.png file.
In this section, you sliced and exported the interface.png file as Fireworks HTML. I probably posed more questions then answers, but you need not worry. The next section, Importing and Editing Fireworks HTML in Dreamweaver, will hopefully answer the questions you may have about slicing.
Importing and Editing Fireworks HTML in Dreamweaver
In the previous section, I had sliced the interface.png for you, and then you exported the file as Fireworks HTML. You will now edit the Fireworks HTML using Dreamweaver.
Create a New Site Definition
- Open Dreamweaver MX 2004.
- On the startup screen under the Create New column, select Dreamweaver Site..
- Select the Basic tab on the Site Definition dialog box.
- Name the site Interface and click Next.
- Select the radio button No, I do not want to use server technology and click Next.
- Select the radio button Edit local copies on my machine, then upload to server when ready. Browse to the folder where you created the folder called site and click Next.
- Set the How do you want to connect to your remote server? to Local/Network. Then, browse to the same site folder as you did in step 6 and click Next.
- Select the radio button No, do not enable check in and check out and click Next.
- You can review your site definition. If all looks well, click Done.
Your directory structure in Dreamweaver should look like Figure 41 below.
Figure 41. The Files panel showing the directory structure for the Dreamweaver site
Warning!-Fireworks MX 2004 Only There is an issue in Fireworks MX 2004 that may export incomplete HTML tags when exporting with the option of "Nested Tables - No Spacers" as we have done in this article. If this happens to you, it will be necessary to perform the following steps to fix the error. The symptoms are borders around tables when previewing the HTML file, as well as, Table cell padding and borders show as "undefined" rather then "
0" when viewing the code. See Figures 41a and 41b below.
Figure 41a. When previewing in a browser the Fireworks MX 2004 HTML shows borders around tables due to the incomplete HTML.
Figure 41b. Code view of the incomplete HTML
To fix the invalid HTML, you will need to remove the "undefined" value from all related tags and replace with "
0" (zero).
- In Dreamweaver go to the main menu and select Edit>Find and Replace
- In the Find and Replace dialogue box set the following properties as shown in figure 41c.
Figure 41c. Use these settings to remove the "undefined" text and replace with "
0"
- Once you have entered the settings go ahead click the Replace All button.
The above 3 steps will fix the code that was exported from Fireworks MX 2004.
Creating a New HTML Page and Importing the Fireworks HTML
From here, you could edit the layout.htm page that Fireworks had exported but I do not recommend it. Instead, I recommend creating a new file and then importing the Fireworks HTML into the new document. The reason for this is if you edit your layout.htm file and then you decide that you need to go back to Fireworks to make a change to a gradient or you want to add a logo at the top, you will end up undoing any editing that you have done to the HTML in the layout.htm file when you export the Fireworks HTML again. By creating a new file and importing the Fireworks HTML, you will not overwrite any edits you make to the HTML.
Note: You can make changes to the interface in Fireworks such as adding a logo or changing a color of a gradient, but if you change the slicing at all, you will need to change all pages you have edited. Fireworks creates the HTML based on how it is sliced, which is by table rows and columns. If you change the slicing of the Fireworks file and export again, you will end up with slices that do not match the correct rows and columns of the edited HTML pages.
- On the start up screen under the Create New column, select HTML. This will create a new HTML document.
- Save the document (File > Save). Name the file index.htm and save it in the root directory of your site.
- Go to the main menu and select Insert > Image Object > Fireworks HTML.
- The Insert Fireworks HTML dialog box appears. Browse to the layout.htm page and select OK. The interface should now be in your new index.htm page.
- Go to the main menu and select Modify > Page Properties.
- In the Page Properties dialog box, set the background color to #ECE9D8 and click OK.
Now that you have imported your interface into your new page, you can start editing the HTML Fireworks created for you.
Removing Sliced Images
You need to remove some of the sliced images, namely the Navbar, Main Content, and the Right Column sliced images. Once you remove these, you can use these areas for your content, but before you do, you need to prepare the tables that will be affected by removing the sliced images.
- Select the sliced image Navbar as shown in Figure 42 below.
Figure 42. The selected Navbar sliced image
- With the Navbar sliced image selected, look at the bottom of the document where you see that the image tag is selected. To the left of this, there is a <table> tag. Select it as shown in Figure 43 below.
Figure 43. Selecting the table tag in the Tag selector
You should now see the table selected in Design view.
Figure 44. The table selected in Design view
- Now that the <table> tag is selected, go to the Property inspector and select Convert Widths to Pixels as shown in Figure 45 below.
Figure 45. Converting widths to pixels in the Property inspector
This adds width tags to the table cells: <td width="41">. This will ensure that when you remove the Navbar sliced image, the table that holds the image stay correctly formatted.
Note: Widths in <td> tags are a deprecated property of the <td> tag. However, it will still validate as valid HTML per www.w3.org. If you wish, you can use spacer images instead of specifying widths in table cells. You just need to ensure that your table does not fall apart once you remove the Navbar sliced image.
- Select the Navbar image again and press the Delete key on your keyboard.
Figure 46. The Navbar with the Navbar image removed
- Place the cursor inside the table cell of the Navbar image you just deleted, go to the Property inspector, and change the background color to #FFFFFF.
Perform the same steps to remove the Main Content and Right Column sliced images. In this case, both the Main Content and Right Column sliced images reside in the same table.
- Select the Main Content sliced image.
- With the Main Content sliced image selected, look at the bottom of the document where you see that the image tag is selected. To the left of this, there is a <table> tag. Select it.
- Now that you have selected the <table> tag, go to the Property inspector and select Convert Widths to Pixels as shown in Figure 47 below.
Figure 47. Converting widths to pixels in the Property inspector
- Select the Main Content image again and press the Delete key on your keyboard.
- Select the Right Column image again and press the Delete key on your keyboard.
Figure 48. The interface with the main and right content images removed
- Place the cursor inside the table cell of the Main Content, go to the Property inspector, and change the background color to #FFFFFF.
- Place the cursor inside the table cell of the Right Column, go to the Property inspector, and change the background color to #FFFFFF.
So far, you have set up the interface so that you could add content to the Navbar, Main Content, and Right Column table cells. But, you have two problems you must deal with. The first problem is that you have nested tables three deep. This is completely unnecessary. The second problem is you still need to set up your layout so that you have tiled images. We'll address the first problem of nested tables.
Removing Nested Tables
You do not need to perform this next task of removing nested tables, although it is recommended. If you prefer, you can skip this section and continue to the next section Tiling Images.
I try to use the rule of: Don't use nested tables unnecessarily. In fact, I will try not to use nested tables when possible. But sometimes you need to use them; don't sweat it if you have to use them. Because you chose to have Fireworks export it's HTML as nested tables, you need to clean up a bit.
Note: I chose to use nested tables as it is much easier to edit the HTML rather the exporting with spacers, single table, so forth . I recommend exporting the Fireworks HTML, as Nested tables-no spacers. However, you can experiment. You may find that doing it another way works better for you, it's your preference. There is no right way or wrong way.
To remove the unwanted nested tables, select the nested tables, and cut and paste them outside of the original Fireworks generated table.
- Select the very first image at the top left of the interface as sown in Figure 49 below.
Figure 49. Selecting the top left image
Go to the bottom of the document window and select the <table> tag furthest to the right as shown in Figure 50 below. This is the nested table you will to cut and paste.
Figure 50. Selecting the table tag to copy and paste
- In the Property inspector and set Align to Default.
- Go to the main menu and select Edit > Cut.
- Place your cursor outside and to the left of the Fireworks HTML generated table.
- Go to the main menu and select Edit > Paste.
The pasted table should sit above the main table as shown in Figure 51 below.
Figure 51. Pasting the nested table in the main table
- Select the table that holds the Navbar as shown in Figure 52 below.
Figure 52. Selecting the table that holds the Navbar
- In the Property inspector, set Align to Default.
- Go to the main menu and select Edit > Cut.
- Place your cursor outside and to the left of the Fireworks HTML generated table.
- Paste the Navbar table so that it is pasted above the Fireworks HTML generated table as shown in Figure 53 below.
Figure 53. Pasting the Navbar table
- Select the table that holds the Main Content table as shown in Figure 54 below.
Figure 54. Selecting the table that holds the Main Content table
- In the Property inspector, set Align to Default.
- Go to the main menu and select Edit > Cut.
- Place your cursor outside and to the left of the Fireworks HTML generated table
- Paste the Navbar table so that it is pasted above the Fireworks HTML generated table as shown in Figure 55 below.
Figure 55. Pasting the Navbar table
That takes care of the nested tables. However, you left two sliced images in the original Fireworks-generated table.
You can fix this by adding table rows to a couple of the pasted tables.
- Select the table that holds the Navbar as shown in Figure 56 below.
Figure 56. Selecting the table that holds the Navbar
- Go to the Property inspector and change the Rows text box from 1 to 2. This will add an additional row to the table.
Figure 57. Changing the rows text box from 1 to 2 to add an additional row to the table
- Click inside any of the cells of the new row
- Go to the bottom of the document window and select the <tr> tag.
- In the Property inspector, click the icon shown in Figure 58 below. This will convert the cells in the row to one column span.
Figure 58. Converting the cells in the row to one column span
- Select the image that divides the Navbar and the Main Content area as shown in Figure 59 below.
Figure 59. Selecting the image that divides the Navbar and the Main Content areas
- Go to the main menu and select Edit > Cut.
- Place your cursor inside the row that you merged into a column span.
- Go to the main menu and select Edit > Paste.
Your tables should look like Figure 60 below.
Figure 60. The completed tables
You now need to do the same with the remaining sliced images.
- Select the Main Content table.
- In the Property inspector, change the Rows value from 1 to 2. This adds a new row to the table.
- Click inside any of the cells of the new row.
- Go to the bottom of the document window and select the <tr> tag.
- In the Property inspector, click the icon shown in Figure 61 below. This will convert the cells in the row to one column span.
Figure 61. Converting the cells in the row to one column span
- Select the remaining image (footer) in the original Fireworks table.
- Go to the main menu and select Edit > Cut.
- Place your cursor inside the row that you just merged into a column span.
- Go to the main menu and select Edit > Paste.
That takes care of most of the nested tables. You can delete the empty table below the interface by selecting it and pressing the Delete key on your keyboard.
You are almost done. Hang in there!
Tiling Images
To illustrate what you still need to do, go ahead and add several paragraph tags to the main content table cell.
Figure 62. Adding paragraph tags to show the broken tiles
As you can see from Figure 62 above, the interface falls apart when you add several paragraph tags to expand the tables vertically. You can correct this by further editing. Tile the predefined sliced images created in the Slicing and Exporting section. I created three slices named lefttile.jpg, middletile.jpg, and righttile.jpg. Use these images in a vertical tile, and this will eliminate the gaps created when you added the paragraph tags. For now, leave those paragraph tags. This will help you to see where are gaps are while you edit a bit more.
Before you start, I want to mention that you have two methods to choose from when tiling images in table cells. One is embedding the tiled images in a table cell (Example: <td background="assets/images/lefttile.jpg">) and the other is using CSS.
Embedding the image in a table cell has one drawback. It is not valid HTML. However, even though this method is not valid, it does render on all 4.0 version browsers and above. You lose nothing other than validation. To me, there is nothing wrong with this method. I still use images embedded in table cells when I need to support Netscape 4x. If you don't care about supporting Netscape 4x and you want valid HTML, then you will want to use CSS for tiled images. For this article, you will use CSS.
- Select the left image as shown in Figure 63 below.
Figure 63. Selecting the left image
- Go to the bottom of the document window and select the <table> tag furthest to the right as shown in Figure 64 below.
Figure 64. Selecting the table tag
- Press the Delete key on your keyboard. This will remove the nested table and the images.
- Go to the Design panel and select the CSS tab. If the deign panel is not open, go to the main menu and select Window > CSS Styles.
Figure 65. Creating a new CSS style in the CSS Styles panel
- In the lower right corner of the CSS Styles tab, click on the plus (+) symbol. This will create a new style that you can define.
- In the name field, name the style lefttile.
- For the Selector type select, Class (can apply to any tag).
- For Define in, select This document only and select OK.
Figure 66. Setting the attributes for the new CSS style
- The CSS Style definition dialog box appears. From the Category column to the left, select Background.
- In the Background Image field, browse to the file lefttile.jpg as shown below. The lefttile.jpg file is included in the sample files you downloaded at the beginning of this article.
Figure 67. Setting the background images for the CSS style
- Click OK.
You have just added a new Style definition to your CSS style panel you named lefttile.jpg. This style gets added to the document and can be viewed in code view between the <head> tags
- Place your cursor inside the empty cell on the left side of our interface.
- Go to the Property inspector, click the Style pop-up menu, select lefttile.jpg, select the Vert pop-up menu, and choose Top.
Figure 68. Applying the lefttile style in the Property inspector
- With your cursor still inside the cell, go to the main menu and select Insert > Image.
- Browse to the image named maincontentleft.jpg and click OK. Note: Dreamweaver MX 2004 will ask you to set the Alternate Text. From the pop-up menu, select Empty and click OK.
That completes setting up the tiling for the left side.
Figure 69. The completed CSS settings for the left side tiling
Next, complete the middle graphic tile by defining the CSS style.
- In the lower right corner of the CSS Styles tab, click the plus (+) symbol.
- In the name field, name the style middletile.
- For the Selector type, select Class (can apply to any tag).
- For the Define in, select This document only and click OK.
- The CSS Style definition dialog box appears. From the Category column to the left, select Background.
- In the Background Image field, browse to the file middletile.jpg and click OK.
- Place your cursor inside the cell where the middletile.jpg image currently sits.
- Go to the Property inspector and click the Style pop-up menu and select middletile.
That completes the middle divider tiling.
- In the lower right corner of the CSS Styles tab, click the plus (+) symbol.
- In the name field, name the style righttile.
- For the Selector type, select Class (can apply to any tag).
- For the Define in, select This document only and click OK.
- The CSS Style definition dialog box appears. From the Category column to the left, select Background.
- In the Background Image field, browse to the file righttile.jpg.
- Click OK.
- Place your cursor inside the empty cell on the right side of the interface.
- Go to the Property inspector and click the Style pop-up menu, select righttile, select the Vert pop-up menu, and choose Top.
- With your cursor still inside the cell, go to the main menu and select Insert > Image.
- Browse to the image named maincontentright.jpg and select OK.
Guess what? You are done! All that is left to do is add content.
Summary
As you can see, both Fireworks MX 2004 and Dreamweaver MX 2004 can be valuable tools in creating complex designs with ease and speed. It is my hope that what you have learned here will be helpful to you in your projects.
