Main Window

The main window used to build your website consists of a Web Pages List on the left and a Content pane on the right of the window.

You manage the pages of your website by using the ‘add’ [+] and ‘delete’ [-] buttons, located at the bottom of the Page List. The ‘add’ [+] button opens the Page Type Selection sheet. Simply double-click the page type you want to add and it will appear in the Web Pages List below the currently-selected page.

You can also add multiple page types at once by selecting any number of different page types in the Page Selection sheet.

Once the new page has been added, you can drag it to another position in the list as described earlier in this section. You can also delete a page that is no longer needed by selecting the intended page in the list and click- ing the ‘delete’ [-] button at the bottom of the list.

Tip: You can quickly add another page to your site by Ctrl-Clicking (Right- Clicking) the [+] Add Page button to show a list of available page types and add a page with a single click.

Figure 1: The Quick-Add Menu

Edit and Preview

RapidWeaver uses two ‘modes’ to create your site: Edit and Preview. To edit and preview a page, first click on the desired page in the Page List to the left of the window to select it. Once a page is selected you can edit and preview its content by clicking the ‘Edit’ or ‘Preview’ buttons located on the main toolbar. You can also use keyboard shortcut Command-R to toggle between Edit and Preview modes.

View Source

Whilst a knowledge of HTML is not necessary to use RapidWeaver, you can view the HTML code view the code that RapidWeaver will output. To enter Code view mode, use keyboard shortcut Command-Option-U or choose View -> View Source. The upper portion of the view shows the HTML code as rendered by RapidWeaver. Any errors and warnings are displayed in the lower portion of the screen for your inspection and review. If you want to tidy your code when viewing the source, click the ‘Tidy Source’ button at the bottom of the code window.

Note: The code view is not editable.

Contextual / Action Menu

RapidWeaver provides a number of options for pages via a contextual menu for quick and easy access. Right-clicking, or Ctrl-clicking, a page in the Page List brings up the menu and allows you to:

• Open the Page Inspector,
• Duplicate, Replace or Delete the page,
• Make the page the site Home Page,
• Mark the page Changed or Unchanged for RapidWeaver’s smart publishing,
• Export and Preview the page locally in a web browser,
• Publish the individual page to your webserver,
• Re-publish the entire site (and all its supporting files).

Working with Themes

Themes are website page templates that include the basic layout and architecture of each page into which you insert your content within RapidWeaver. In most cases, you will select just one theme and implement it throughout your website. However, RapidWeaver also allows you to apply themes on a page-by-page basis using the Page Inspector.

Figure 2: The Theme Browser

Selecting which theme you want to use is simple. Click the Themes button on the main toolbar, or use keyboard shortcut Cmd + Option + T to show and hide the Theme Browser. Scroll through the theme thumbnails and click on the one you want to use. The selected theme will be applied to all the pages in your site.

Themes typically have several variations that can be applied in order to easily change a particular aspect of the site’s layout or design. Variations such as sidebar placement, page styles, text colour, font face, page width, page header images, and background colour are all potential options. Variations are accessible via the Theme Styles tab of the Page Inspector, selectable from the Window menu or by typing keyboard shortcut Cmd + Shift + i.

Right-clicking/Ctrl-clicking on a theme in the Themes Browser shows a contextual menu allowing you to duplicate a theme (for subsequent customization), show the theme’s contents (for in-place editing), or to show the Theme Styles tab of the Page Inspector. If the theme is one you have duplicated or downloaded from a third party, there is also an option to Delete the theme.

Page Inspector

Figure 3: Page Inspector Tabs

When it comes to customising the structure of your site, changing page titles and almost all other page-related settings, you’re going to be working with the Page Inspector. To access the Page Inspector select ‘Show Page Inspector’ from the View menu, or use keyboard shortcut Cmd + Shift + i.

The Page Inspector is organized into five sections:

• General Settings: Edit the page’s title, file and folder names, display options, image format and page output.
• Page Sidebar: Edit sidebar title (if used), and add content to the page’s sidebar.
• Page Header: Allows you to add page assets and Meta tags, or apply the current page’s properties to other pages. You are also able to add custom Javascript or CSS to the selected page, or insert code above the tag.
• Theme Styles: Customise the design of the page.
• Plugin Settings: Any plugin options are shown in this tab - for example, the Blog setup, Contact Form, and Photo Album setup are all controlled from within this tab.

These options will be applied to the page you have selected in the Pages List. To apply these options to other pages in your project, use the ‘Apply Properties to All Pages’ option found on the Advanced tab. You may also pre-set many of these options in the Site Setup for pages you subsequently add to your project.

General Settings

Figure 4: Page Inspector General Settings TabWhen you first open the Page Inspector, you are brought to the ‘General’ tab view. Within this tab, you can edit the selected page’s file and folder names, display options (including whether or not to show the page in the navigation menu), image format and page output, and title, slogan and copyright information. You may also specify encoding and set output options.

Enabled (Checked by default):

This options dictates whether the page will be published or exported as part of your website. Unchecking this box will tell RapidWeaver to treat the page as a draft, and prevent the page from being published or exported.

Show in menu (Checked by default):

This option sets whether the page appears in the site navigation menu or not. To hide the page from the navigation menu, simply uncheck the box.

Open in new Window (Unchecked by default):

If you want this page to open in a new browser window when clicked on in the navigation menu tick this option. N.B. It is generally recommended that you do not use this option on pages
in your own site.

Page Title (Automatically filled from Page List):

This title is used for the navigation menu in the site. This is also editable by double-clicking the page in the Page List.

Browser Title (Blank by default):

RapidWeaver will use whatever name the page has in the navigation bar as the browser window title. If you want to customise this (e.g. you want the browser to display ‘Realmac Software - Blog’ instead of simply ‘Blog’) simply enter the full title you want to appear in this area.

Folder:

Not every page needs to be at the same structural level in your site, so you will want to place different pages in relevant folders.

If you want your page to be in the root directory of your site (e.g. http://www.realmacsoftware.com/my_page.php), set the page to simply / (a forward slash). Otherwise set the folder name as desired - and remember that you can place more than one page in a folder.

Filename:

Sets the file name and extension for the selected page, such as ‘photos.html’ or ‘downloads.php’. The site home page should always be ‘index.html’ (or a variant such as ‘index.php’).

Image Format:

When you add images to your site, RapidWeaver will convert them into the format specified here: Original, JPEG or PNG. Specifying ‘Original’ will leave the images in their original format, untouched and unchanged. If you wish to use transparent images anywhere on your site, you should leave this option set to ‘Original’ as images will otherwise lose their transparency on conversion.

Encoding:

Choose how you want the browser to interpret your code. Choose between Western (ISO Latin 1), Unicode (UTF-8) and Japanese (Shift-JS). RapidWeaver defaults to ‘Unicode (UTF-8)’

Output:

Depending on your needs, RapidWeaver can ‘tidy’ the code it produces (to make it more readable) and also apply a different document type to pages. RapidWeaver exports XHTML Strict code by default, and this option allows you to set it to ‘XHTML Transitional’ or ‘Optimised XHTML’ (White-space removed).

Title (Unchecked by default):

By default, the page will use the site title chosen in Site Setup. By checking this box and typing a different title, the default site title of this page will be replaced with the one you provide here.

Slogan (Unchecked by default):

By default, the page will use the site slogan set in Site Setup. By checking this box and typing a different slogan, the default site slogan of this page will be replaced with the one you provide here.

Footer (Unchecked by default):

By default, the page will use the site footer set in Site Setup. By checking this box and typing a different footer, the default site footer will be replaced on this page.

Apply to All Pages:

This option allows you to apply any of the current settings in the Page Inspector from the active page to all other pages in the site file.

Page Sidebar

Figure 5: Page Inspector Sidebar Settings TabAll RapidWeaver themes contain a ‘sidebar’ area (shown in Figure 22). You may want to add web badges, include a search tool for your website, or indicate your chat status in this sidebar, and you can place virtually anything in the sidebar to enhance a page. The sidebar has both rich-text editing and pure HTML view options available when editing it in the Page Inspector.

The Sidebar pane of the Page Inspector consists of two areas, the Sidebar Title field and the Sidebar Content box. To add an optional title to your website’s sidebar, type the title into the Sidebar Title field (you can use HTML code too for images). You can select the type of sidebar through the menu in the bottom right of the Page Inspe-c tor (shown in Figure 22) and Add and Remove Links via the buttons in the bottom left of the window.

Page Header

The Page Header tab of the Page Inspector (shown in Figure 23) is where you will find the more advanced options for configuring your page for Search Engine Optimisation, Code Customisation and more.

Meta Tags Explained

You will probably want to ensure that your site is fully optimised for Search Engine Indexing and RapidWeaver allows you to Search Engine Optimise your site with meta-tags.

To add a Meta tag to a page, click the [+] button below the meta-tags table. On the selected line, double-click the area immediately below the ‘Name’ heading. In the selected text area, type a Meta tag name (a list of which can be found at w3 Schools). Once you have entered the Meta tag name, press the tab key or double-click the area to the right of the Meta tag name you created and type the Meta tag content, (again without quotes). Keywords should be separated by commas.

You may also like to take a look at our mini video tutorial on Adding Meta Tags.

Expires In:

Figure 6: Page Inspector Header Settings TabTo specify an expiry date (so if the page is time-sensitive and should be removed from a search-engines database after a period of time), click ‘Expires in’ checkbox and select the timeframe (minutes, hours, days, weeks, or months) using the popup timeframe menu. Lastly, type a value in the number field. Search Indexing Robots may delete expired documents from a search engine, or schedule a revisit. If the ‘Expires in’ box is left unchecked, your page will not include an expiry date.

Credit RapidWeaver:

To identify your website as one that was created by RapidWeaver, select the ‘Credit RapidWeaver’ checkbox. If this option is selected, RapidWeaver will add the ‘Generator’ Meta tag to the head section of your site. It lets browsers and visitors know that your site was made with RapidWeaver.

Note: The ‘Credit RapidWeaver’ option does not add a visible credit or RapidWeaver badge to the site. It merely adds tag, that are only visible in the source code, to your pages identifying the site as being made with RapidWeaver.

Custom CSS:

RapidWeaver uses CSS to style all its pages, and if you’re confident enough to add styles without editing the theme’s stylesheets then you might want to use the Custom CSS box. By adding CSS styles to the Custom CSS box, you can over-ride the look and feel of a page, or add additional styles and customise how your page looks. Simply add the CSS exactly as you would in any other CSS editor, then link to those styles with standard HTML. For those who might be interested, the Custom CSS is entered into the page as inline styles between style tags:

<style type=”text/css” media=”all”> // Your Styles Here </style>

Custom Javascript:

Just like the Custom CSS area, this allows you to add your own Javascript and RapidWeaver will place it inside the relevant script tags.

<script type=”text/javascript”> // Your Code Here </script>

Prefix:

Any custom code entered into the ‘Page Prefix’ box will be placed before the

tag of the page when rendered. For example, you may need to initiate a PHP session so that certain variables (such as names, passwords, email addresses, etc.) will be passed between pages. Because a PHP session has to be started before any other document information is loaded, you should place the PHP code in this box.

Theme Variations

This tab is used to set theme styles such as site width, font, colour schemes and sidebar alignment. Variations are built into a theme by the theme’s designer, so some themes may have more variations while others may have fewer or, perhaps, none at all. The list of available variations depends on the theme you select, and each group is preceded by a black triangle. Clicking the triangle will expand the variation group, and allow you to choose a variation for that particular option.

For example, clicking the triangle preceding ‘Sidebar Location’ presents the options of ‘Right’, ‘Left’ or ‘Hide’. By clicking the appropriate radio button, RapidWeaver will position (or remove) the sidebar as you require.

Tip: You may like to take a look at our mini video tutorial on Using Theme Variations.

Page Settings

This pane displays settings for the plugin used in the active page, and will vary depending on the plugin chosen.

In RapidWeaver 4, you can quickly open the Page Settings tab by using the keyboard shortcut Cmd + Option + i or by clicking the wrench icon beneath the Page List in RapidWeaver’s main window.

Site Setup

The Site Setup sheet allows you to configure certain site-wide options.

Figure 7: Site Setup - General Settings tab

General Settings

Title:

This is the site-wide title you wish to apply to your pages. By default, this is set to ‘My Website’.

Slogan:

Just as you can add a site-wide Title, you can also define a site-wide Slogan (or Sub-Title). By default this is set to ‘Changing the world, one site at a time...’

Footer:

If you want to place a copyright notice at the bottom of the page, or some links to other pages, simply enter them here.

Email: Address

A link that people can click to send you an email, this is inserted into the Footer area of the page. By default, the option of protecting you email address from ‘Spam-bots’ is enabled to ensure your address is hidden from them. If you wish to turn it off, please be aware that your email address may be at risk from Spamming. You can turn off Email Protection from the Advanced tab.

What is a Spam Bot?
Spam Bots are pieces of malicious software that scour the internet for unprotected email addresses to add to Spam-email lists.

Web Address:

This is where you should enter the full website address of your site. It’s required to set up RSS feeds and other settings. Be sure to start it with http:// - it should be in the form http://www.mydomain.com/

Site Logo:

Specify a site-wide logo to apply to your pages by checking the box, and then dragging in a logo to use. The size of the available logo area varies from theme to theme.

WebClip Icon:

If you wish to add a custom WebClip1 icon to display when a user bookmarks your site on an iPhone or iPod touch, check the box and drag in a 57 x 57 pixel PNG image to use as your WebClip icon.

Favicon:

A ‘Favicon’ is dislayed next to your site’s URL in most modern browsers. To add a Favicon to your RapidWeaver site, check the Favicon box and drag a ICO icon file into the Site Setup sheet.

Advanced Settings

Figure 8: Site Setup - Advanced Settings tab

File Links Are:

Allows you to customise how RapidWeaver displays the code that links to your site resources (such as the theme files). It doesn’t affect the display of your site, however should you choose the ‘Relative to Website Address’ option, be sure that a Website Address is entered in the General tab.

Display Breadcrumb Trail:

If you wish to display a breadcrumb trail to allow users to figure out where in the site structure they are, enable this option.

Protect Email Address:

When RapidWeaver includes a ‘Contact Me’ link in the Footer of each page, the email address is Spam-protected by default. If you wish your email address to be displayed in plain view via your website’s code, untick this box.

Enable Cruftless Links:

When building links to your pages, RapidWeaver uses the full URL to point to specific files. However, you can tidy these URLs by enabling cruftless links. When a page is in a folder and is named either index.html, index. php or index.htm RapidWeaver will remove the filename from URLs:

http://www.california-roadtrip.com/journal/index.html is linked as http://www.california-roadtrip.com/journal/

You may also like to take a look at our mini video tutorial on Tidy URLs for more on Cruftless Links

Google Analytics:

If you wish to track website visitors using the free Google Analytics service, enter the Analytics-supplied code here. RapidWeaver will apply it to all pages in your site. After adding Google Analytics to your site, you will need to re-upload all the pages in your site in order to receive statistics for all pages: RapidWeaver will do this by default, as all pages are marked as changed after adding Google Analytics code.

See how this is done by taking a look at our mini video tutorial on inserting Google Analytics code.

Template Settings

The Template tab allows you to pre-configure settings for any pages you add in the future. The settings are exactly like those found in the Page Inspector, except for the ‘Extension’ setting which defines what file exten- sion new pages are given.

Tip: You may like to take a look at our mini video tutorial on Using the Template Settings .

Figure 9: Template Settings Tab

Media Inspector

The Media Inspector enables you to edit and modify the dimensions and attributes of images used in Styled- Text pages, Blog pages and third-party page types that support styled text. You can even flip and rotate your images directly within RapidWeaver.

You can access the Media Inspector by double-clicking an image you have placed in your Styled Text area or by selecting from the View menu. The options available in the Media Inspector are summarised in the following table.

Option:

Filename	Sets the name of the actual file (e.g., ‘myimage. jpg’).
Alt tag	Sets the alt tag of the image, which is displayed while the image is loading and when you hover your cursor over the image.
Scale	Using the arrows scales the highlighted image to a % of the original size, whilst retaining the aspect- ratio of the picture.
Width and Height	Un-checking the ‘Scale Image’ check box allows you to set the ‘Width’ and ‘Height’ values inde- pendently. N.B. Changing these values will affect the aspect-ratio of the image, and may distort the image.
Rotation	Allows you to rotate the selected image.
Crop	Ticking the ‘crop’ option will mean that the image stays within its initial dimensions.
Flip	Flips the selected image horizontally and / or vertically.
Shadow	Check the Shadow box for RapidWeaver to render a shadow for the image; specify the shadow’s off- set and blurring by editing the respective values, and choose the shadow’s colour.
Border	Check the Border box to add a border around your image and specify its width and colour.
Fill Colour	Specify the fill colour if necessary; used when an image is rotated or when a drop-shadow is added.

Because image source files can be quite large (some measuring several mega), they can dramatically increase the size of your RapidWeaver project file. It is generally recommended that large files be down-sized to the approximate size to be used in your website whenever possible, and adjust the final size and orientation using the Media Inspector.

Snippets

Figure 10: Snippets Window

Snippets are code fragments that you may use regularly or simply wish to store for future use. To open the snippets window go the ‘View’ menu and select ‘Show Snippets’ or use the keyboard shortcut, Cmd + 5.

View Menu > Show Snippets

To add a snippet press the plus button located at the bottom left hand corner of the Snippets Window. To use a snippet, drag it into any styled or html text area in your website. Snippets can also be shared with others, via email, the web or the Addons section on the Realmac Software Website. To share them you will need to locate them - RapidWeaver stores them here:

~/Library/Application Support/RapidWeaver/Snippets/

Find more Snippets:
If you would like to add some more snippets to your copy of RapidWeaver, why not visit our add-ons page at:
http://www.realmacsoftware.com/ addons

Tip: You might like to take a look at our mini video tutorial on Using Snippets.

Page Types

RapidWeaver 4 ships with 10 built-in page types:

Blog	Publish your blog using RapidWeaver’s fully-featured blog page type.
Contact Form	Receive visitor feedback and enquiries.
File Sharing	Share files, photos and documents with friends, family and co-workers.
HTML	If you’re happy to code individual pages in your site, you can do it with the HTML page type.
iFrame	Display any external website within your own RapidWeaver-styled page.
Movie Album	Allows you to share a gallery of QuickTime movies with visitors.
Offsite Page	The Offsite page allows you insert external links into the navigation bar, for example a link to a forum.
Photo Album	Easily build a CSS-based Gallery or a Flash Slide-show with your iPhoto albums or other images.
QuickTime	Add a single QuickTime movie to your site.
Styled Text	Create your page content in a what-you-see-is-what-you-get format. You have the ability to set font styles, change colours, drop-in images, movies and other files.

What's Next?

Now you know all the basics to getting started with RapidWeaver, maybe you'd like to know how to Publish Your Site, or get a more in-depth overview by taking a look at the RapidWeaver Application References.