Adding a Styled Text Page

You will need to add a page to your project to get started. Select 'Add Page' in the main 'Getting Started' window and a list of Page Types will appear. You can add either a single Page Type or multiple Page Types by holding the Command (Cmd) key and selecting which Page Types you would like to include.

In this Getting Started guide, we’re going to add a Styled Text page to get our website up and running.

Figure 1: Adding a Styled Text Page

Figure 2: The iMedia BrowserIn the Styled Text page you'll notice a large white text area, here you can enter text, format it and drag and drop in photos and movies.

If you want to bold, underline or italicise text, then all the usual keyboard commands work just like in other Mac applications (e.g. Cmd + B for Bold, Cmd + i for Italic, Cmd + U for underline).

Tip: To place a photo into any styled text area (such as a Styled Text page, Blog Entry or the Sidebar), simply drag and drop it in. If you want to access your iPhoto or Aperture library, use the shortcut Cmd + 4 or go to the View > Show iMedia Browser menu option to access the built-in iMedia Browser (Figure 2).

A Styled Text page is a very versatile and useful page type, in fact many users make their sites entirely from Styled Text pages - so at this point you may like to take a look at the RapidWeaver Website 101 to learn the basic of RapidWeaver's user interface or, alternatively, keep reading to discover addition page types that can be added to you project.

Creating a Photo Album

RapidWeaver has a built-in Photo Album page type, allowing you to create a CSS-based gallery, or a Flash slideshow. You can also choose whether to use iPhoto integration to build your page, or simply drag and drop images in from the Finder.

Integrating with your iPhoto Albums

If you manage your photos in iPhoto, you don’t need to export them from iPhoto before you start: RapidWeaver will read your iPhoto library and you can simply select an existing album from within RapidWeaver. After adding a Photo Album you will be presented with a screen similar to that shown in Figure 3.

Figure 3: iPhoto Integration

On the left-hand side is a list of all your iPhoto albums. Clicking on an album will select those photos for the slideshow, and they will then appear in the right-hand column.

RapidWeaver also reads the data from your iPhoto library to keep the information like a photo’s title intact. You can also apply the image’s name in iPhoto as a caption in the gallery - we will show you how to do this later on).

To remove an image from a gallery, simply uncheck the box on the left of the image, and RapidWeaver will then ignore that photo.

Note: RapidWeaver only ‘ignores ‘photos (and stores that information inside your save file). It does not affect your iPhoto library in any way.

Creating a Drag-and-Drop Gallery

If you don’t use iPhoto, or simply have the pictures you want to add in a folder elsewhere on your Mac, you can also create photo albums using drag-and-drop. To begin with, you will need to ensure that you have selected ‘Your Album (Click to change)’ option, instead of an iPhoto album, at the top of the left column. If you want the album to have a different name when displayed, simply double click the text, and edit it.

Figure 5: Photo Album Settings As well as being able to drag-and-drop images from the OS X Finder, you can use the iMedia Browser (found under the View > Show iMedia Browser menu option or keyboard shortcut Cmd + 4) to drag in files from Aperture, iPhoto, or your User Account’s ‘Pictures’ folder to add them to the Photo Album.

With the photos now added to your page, it’s time to customise the appearance of the finished album. To do this, click the ‘wrench’ button below the Page List and choose 'Show Inspector'(alternatively, select the 'Page Info' icon in the top toolbar). The Page Inspector opens to show the plugin settings tab as shown in Figure 5.

Use the 'Thumbnail Size' slider to increase or decrease the size of your thumbnails. The description area is shown directly above all the thumbnails. Simply enter your description in the text box, and you’re all set.

To get a Flash slideshow running, you will first need to check the ‘Use Flash Slideshow’ box in the ‘General’ sub-tab (shown in Figure 5) and then configure the settings though the ‘Flash Slideshow’ sub-tab.

Setting Up a Contact Form

Once you have got your site ready to publish, you might want to add a Contact form that allows you to receive emails from website visitors. A contact form plugin ships with RapidWeaver, and can be added like any other page.

Figure 6: A Basic Contact Form

Unless you want to customise the fields in the form RapidWeaver has added all the fields needed for a basic contact form as shown above. You will want to click the ‘wrench’ icon below the Page List to customise the messages shown on the form, and to which email address you want to send the completed form to.

Note: The Contact Form page type requires a host that supports PHP. Due to MobileMe not supporting PHP, the Contact Form will not work when published to MobileMe webspace.

Starting a Blog

RapidWeaver comes with a fully-featured blog page-type, featuring auto-archiving, permalinks and RSS generation. To get started, simply select ‘Blog’ from the Add Page sheet and then add an entry by choosing the [+] button in the middle-left of the Edit view.

Figure 7: The Blog Page

An entry will appear with the date and time already filled in. A post details area will slide out from the right where you can enter the title of the post and more. In this case, enter a title for your blog post, a Category or two, and perhaps some tags that you wish to associate with the entry.

Tip: Categories and Tags, whilst similar, serve different purposes. Categories are typically more sweeping areas, so a blog post with a photo in could be categorised as “Photography”, whilst the tags would define the content a little more: in this case the subject of the photo (e.g. California, Beach, Sunshine could all be considered tags).

In the ‘Body’ enter the content you wish to use as a blog entry: as it’s a styled text area, you can enter anything from a movie, picture or even HTML code, and use the Rich Text formatting tools. That is not everything RapidWeaver has to offer in the blog plugin: you can generate RSS feeds, allowing people to subscribe to your blog in a newsreader such as NetNewsWire, NewsFire or Google Reader.

Setting Up an RSS feed

Before setting up an RSS feed, you will need to tell RapidWeaver the address your site will be published to. To set that up we will need to open up the ‘Site Setup’ sheet (found either under the Site menu, or via the shortcut Cmd + 1). In the General tab, and enter the full URL of your website into the ‘Web Address’ box: Be sure to include the http:// that precedes any URL.

Now that the Site URL is set up, you can close the ‘Site Setup’ window and return to the main window. Below the Page List, select the ‘wrench’ icon and the blog settings pane will appear. On the sub-tabs choose ‘RSS’ and then simply check the ‘Enable RSS’ button. You can customise the feed’s properties in the boxes below: note, the ‘Author’ box must be an email address.

Now that the RSS options are setup, RapidWeaver will generate an RSS feed for blog entries. If you want the RSS feed to be restricted to merely the ‘front page’ entries (i.e. only those shown on the main blog page) you can do that via the RSS sub-tab.

What's Next?

Now that you've added one or more pages to your project you may like to take a look at the Website 101 to learn the basic of RapidWeaver's user interface.