Styled Text

The Styled Text page type is the most widely-used page style in RapidWeaver. A Styled Text page allows you to quickly create a page with styled text, images and movies without requiring any knowledge of HTML. However, you may also use HTML to extend the capabilities of the page, if desired. Use the Format menu to apply font and style changes to your selected text, or to apply commonly-used HTML options. To add an image, file or movie, simply drag it from the Finder into the content area.

The content area of of the Styled Text page type supports the following:

Styling text

You can style your text by using the Format menu located in the menu bar. If you have used a word processor or TextEdit, then styling text in RapidWeaver should already be familiar to you. Type or paste your content into your page under the Edit tab, select the desired text with your mouse, and choose the appropriate formatting options from the Format menu.

Using the options found under the Format menu, you are able to control the appearance of the content on your pages. RapidWeaver offers only those fonts considered to be ‘web safe’ to ensure that your website’s appear- ance is consistent in all common browsers.

Tip: RapidWeaver actually applies a list of fonts to the text you are styling, so you can be sure that if a visitor doesn’t have the same font installed, the next most-similar font available in the list will be used. For example, should you use Arial for your text, RapidWeaver will apply the following font list: “Arial, Verdana, Helvetica, Sans-serif”. If the visitor doesn’t have the primary font installed (Arial, in this case), then the list tells the visitor’s browser to use the next available font.

Adding images

To add an image to your page, drag it from the Finder into the desired location in the content area. Supported image file formats are PNG, GIF or JPEG. Other image file formats will appear as embedded links in the published page.

Images that have been added to a Styled Text page may be further refined by using the Media Inspector, allowing you to scale the image, rotate it, add a border or shadow effects and more.

Adding movies

To add a QuickTime movie to your page, drag it from the Finder to the desired location in the content area. A dialog box will appear asking ‘Do you really want to copy the contents of the dragged items into the text?’, and displaying three buttons: Alias, Copy and Cancel.

Clicking the ‘Alias’ button causes RapidWeaver to link to the QuickTime movie file externally on your hard drive. This results in a smaller project file, but if the movie is subsequently moved to another location on your hard drive - or deleted altogether - the link to the movie will be broken the next time you open your project file. If you intend to alias your QuickTime movies in your Styled Text pages, consider creating a permanent location on your hard drive for your website’s source files, and add your QuickTime movies to your Styled Text page by dragging them from that location.

There are other advantages to aliasing your QuickTime movies. For example, if you choose to edit the movie after you have published your website, you can revise the movie independently. As long as the revised version resides in the same location on your hard drive as the original and retains the same name, the new movie will be used the next time you change the page that contains it (or you have marked the page as ‘Changed’).

Clicking the ‘Copy’ button causes your QuickTime movie file to be copied directly into your Styled Text page. This will result in a larger project file, but if you move the original movie to another location, it will not affect subsequent uploads of your website.

Note: Only QuickTime-compatible may be added to Styled Text pages as described above, and will be automatically centered on the page. Other movie formats may be added manually through HTML code.

Making text flow around images

After placing an image at the beginning of the text you want flowed along its side, highlight the image and select ‘Align Image Left’ or ‘Align Image Right’ from the Format > HTML menu option. Click the Preview tab to see how the text flows around your image and adjust as necessary.

You can also use the Formatting bar at the bottom of any Styled Text area to quickly access the HTML menu.

Adding links to text and images

Figure 1: Adding a LinkTo add an email address or URL to text or an image, highlight it and press the ‘Add Link’ button at the lower part of the screen.

A dialog box will appear allowing you to either select another page in your RapidWeaver project to which the text or image should be linked, or to specify an email address or URL of a page on another site. If you have added an item in the Page Assets tab of the Page Inspector, you will also be able to link
to an asset in the list.

Once you have selected the target of the link, you may specify whether the linked item should open in the current window, or in a new window.

Tip: If you wish to link to an image, instead of showing it on the page, add as a Resource and create a link to it using the “Add Link” button.

Adding file downloads

Drag and drop a file such as a PDF, ZIP, DOC or other file type to the desired location of the content area to automatically create a link to it in your published page. Visitors will be able to click the link and download it.

Mixing HTML or Javascript with styled text

You can include HTML or Javascript code in a Styled Text page, but unless you mark the block of code properly, RapidWeaver will not render it correctly. To mark a block of code so that RapidWeaver does not affect it, select the block and choose ‘Ignore Formatting’ from the Format menu, or from the HTML menu below any Styled Text page or Blog post.

To make a portion of text stand out, select the text and choose ‘Blockquote’ from the HTML submenu. This will apply HTML tags to the code, and will be displayed as selected when Previewing the site.

Pasting text

Text copied from another text editor or word processor may be pasted directly into a Styled Text page, but such text may include fonts or formatting that aren’t web-safe. The pasted text will look fine when viewed on your computer, but when viewed by other visitors who come to your site, the pasted text may not render cleanly.

To avoid this when using text copied from another document, hold down the Option key and select ‘Paste as Plain Text’ from the Edit menu. The copied text will be inserted as plain text, which can then be formatted as needed using the formatting tools within RapidWeaver.

Note: If you’re pasting from an application such as Microsoft Word, we recommend you use the ‘Paste as Plain Text’ option. Due to the way Word places formatted text in the clipboard if you do paste content ‘as-is’ from Word it may not render accurately.