This video is going to show you how to add Map Design image maps to Rapidweaver web sites. First, you are going to export your image map, and then choose the Effects based image map, and then choose a location to save the files to. You can see here in the finder where my files are. Now I will switch over to Rapidweaver, and the first thing I’m going to do is add a new webpage. When I do this, I want to make sure I select the HTML Code web page, and then I’ll hit the Add button.

Next, open up the Inspector window. Click on the Assets tab if it’s not currently highlited in blue, and now drag and drop all of the images that you just saved into the Assets listbox. So now all images have been imported, and we’ll now go back to the index.html page. The first thing we’ll want to do is fix the file path. Right now the folder is pointing to images, but Rapidweaver uses the assets folder, so we’ll want to replace all of the code pointing to the images folder. To do this, highlight the text, and then press command F, and in the Find field, type in images, and in the Replace with field, type in assets. Then, click the Replace All button.

Now we’ll just copy all of the CSS code in this document, which is all the code within the Style tags. The first one is closer to the top and then we’ll scroll down until we find the ending Style tag. Then we’ll copy all of this highlighted code.

Now we’ll go back to the Inspector window, and  we’ll locate the CSS tab, and then paste what we just copied into the Custom CSS field box. We’re done with the page inspector so we can close that window.

Now we’ll copy just the HTML code in that previous html document, which is just the little snippet right here, and simply paste it into this Rapidweaver HTML field, and now we’re done. You can preview your image map in Rapidweaver by just clicking this preview tab here.

In this video, I’m going to show you how to integrate RAGE Software’s Button Design with Rapidweaver. First, I’m going to export my buttons, so I’m going to choose CSS button. Then I’m going to select a location to save my button to. And now I’ll click the save button. I’m done with Button Design, so I’ll hide it for now. Now I’ll open up the folder that I saved my buttons to in the finder. I’m going to open up the stylesheet.

The file path that points to the image has to be adjusted. So I’m gonna type in assets with a forward slash, so Rapidweaver will know where to look when its building my website.

Now I’m going to highlight all the code, and copy it. I’m going to close the document, and I don’t need to save it.

I’m going to open up Rapidweaver and add my webpage. Remember to add the HTML Code page because we’re going to be adding custom HTML. And then click on the Add button. Now I’ll click on the inspector button, and then the third tab in, and then click on the CSS tab, and then I’ll paste in the custom CSS code that I just copied.

The next thing I have to do is copy over the image file created with RAGE Button Design. I’ll locate that in the finder, and then switch back to Rapidweaver and the inspector window again. I’ll click on the Assets tab, and then drag the image into the Assets list, so it will now be available to Rapidweaver.

I’m done with the inspector so I can close that window. The last thing I have to do is open up my index.html file and find the HTML code to display the actual button. I’ll highlight the code, and then copy it. I’ll switch back to Rapidweaver, and place it into the HTML field right here. And then if I press the preview tab, I can see the button on my website.