Click on the Add box, where you see the small + sign. This displays the following options,

Transcription

1 Building a Web Site with Rapid Weaver 7 & the Foundation Theme Part 01 New Project. Open Rapid Weaver and you will see this opening page, 1. Start a new project, Since this is going to be the very first project, you must first create it. Click on Create a new RapidWeaver project You will now see something like this, An Untitled project will now be created and you will see some options in the top left corner, Click on the Add box, where you see the small + sign. This displays the following options, Click on the Stacks icon. Written by Ronnie West on 30 th June 2016 Page 1 of 10

2 The first page Untitled Page will now be displayed in the pages section at the top left side of the screen. This, by default, is going to be the Home Page in your website, Now, double click on the name Untitled Page you will then be able to rename the page, by overtyping the current text with Home Page and then pressing the enter key on your keyboard. You will now see that the name has changed, At this point, I suggest that you change the default title of My Website to the name that you are going to give your own site. To do this, go to the Settings section and click on General Written by Ronnie West on 30 th June 2016 Page 2 of 10

3 You will now see that there are a number options displayed on the right side of the dialog box, At this stage, I won t be using all of these options (that comes later) for now, just change those items that appear at the top of the page to whatever you want to appear on your website, i.e. Title, Slogan (if you want add one to your site), Footer, Address and Web Address. All of this can be done at a later stage but, it will be much easier to do it now. You should finish up with something similar to this next screenshot, So far, so good, you are on the way to creating your first web site! Before proceeding any further, save the work that you have done so far, as a Rapid Weaver project. Written by Ronnie West on 30 th June 2016 Page 3 of 10

4 Go the top menu bar and select, File>Save As, You will see this, Overtype the name Untitled with the name that you want to give your project, e.g. RW Site Tutorial-Part 1-New Project then decide where you want to save it, I suggest that you keep it on your desktop for now because you can always save it somewhere more permanent later. Then click on the Save Button in the bottom right corner, Written by Ronnie West on 30 th June 2016 Page 4 of 10

5 3. Adding data to the Home Page. Now let s move on and add some data to the home page but, before you begin, it will be helpful if you already have some idea of just how you want the page to look and I suggest that you make a rough drawing of what you want to finish up with. RapidWeaver is a program that does not require you to know anything about programing code but instead uses Partials, Themes and Stacks. This tutorial will give you a reasonable basic knowledge of how to use these to create your website. In this tutorial I want the following layout for my site, All pages to have a banner at the top, across the entire width of the page with some form of Navigation Bar underneath it, e.g. the TopBar in the Foundation Theme. At the bottom of the page, I want to have a footer that will house my copyright information e.g. using the Panel Stack in the Foundation Theme. The middle section, between the Top Bar and the Footer, will be the Main working area where all page content will be added. I guess that you will agree that this is a simple plan so let s begin by adding some data to the Home Page (later, in part 3 of this tutorial) we will use the Partials option to add the same structure layout to all other pages on the website) The first task is to make sure that you have the correct theme selected, you can choose from many different ready made themes that are included with RapidWeaver but, I am going to use the Foundation theme that is made available, free of charge, from the Joe Workman Website. However, although this theme is free, in order to make it work, you will also need to purchase the Stacks3 package available from Yourhead software and, you will also need to be running RapidWeaver 6 or 7, both available from the Realmac website. Once you have the Foundation theme installed on your computer, it will be available for you to select as follows, In the top left corner of the screen, click on the small Themes icon, All themes that are available, will now be visible at the bottom of the screen, Scroll up/down through this themes drawer until you find the Foundation theme and then click on it, Written by Ronnie West on 30 th June 2016 Page 5 of 10

6 Make sure that you see a blue outline bordering the theme, Now close the Themes Drawer by clicking on that themes icon in the top left corner, When you have done that, you are ready to begin adding content to the home page and you do this by using Site Styles, and Stacks. (i) Adding the Site Styles. Site Styles determine the overall look of your site and the default styles will create a very good looking web site but, you are able to make changes to these styles and I will deal with those as and when necessary as we progress through this tutorial. Every page that you create in your web site, must have Site Styles added at the top of the page. Open the Foundation Stacks Library and drag Site Styles across into the Drop Stacks Here box, Close the Library, by clicking on the library button once more, Written by Ronnie West on 30 th June 2016 Page 6 of 10

7 The Site Styles will now be displayed at the top of the page and should look like this, (ii) Although the default Site Styles will control how your website will normally provide a very good looking site, there are a couple of settings that you should adjust right now, e.g. the maximum width of the site page and the background colour of your site. These two adjustments are made as follows, Click on the blue Site Styles button at the top of the stack and this will open the Site Styles Inspector options, The Site Styles Inspector (shown on the right side of the above screenshot, is where you can make changes and there are a whole load of options that are not visible in this screenshot. You will need to scroll down to see them all. Scroll down until you see the Site Background and Site Sizing options. Change the 3 options shown in the following screenshot, Written by Ronnie West on 30 th June 2016 Page 7 of 10

8 Re-Save the work you have done so far, press the shortcut keyboard keys of cmd+s. Here s how to make those change that I suggested above: (i) In the Site Background section click on the those arrows displayed on the right side of the Type box, You will now see the choices available, Choose Solid Color Now click on the Color box, The Colour Picker is now displayed. Those 5 items across the top are just different versions of the colour picker but, for now, just select the third one (arrowed) Written by Ronnie West on 30 th June 2016 Page 8 of 10

9 You will now see the following, You can select whichever shade you prefer but, I chose to click on the Light grey (CCCCCC) The selected colour will now be previewed like this, (ii) In the Foundation Site Sizing section, you will see this, Change those default settings by overtyping the existing values, as shown in the screenshot below, Written by Ronnie West on 30 th June 2016 Page 9 of 10

10 So far, no data (stacks) have been added to the site so there is no point in attempting to Preview it in either the RapidWeaver program or, in a Web Browser. However, in Edit Mode within RapidWeaver, it should be looking like this, Re-Save the work you have done so far, press the shortcut keyboard keys of cmd+s. Now proceed to Part 02 Adding Stacks Written by Ronnie West on 30 th June 2016 Page 10 of 10