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.