iWeb 2 RapidWeaver
Hi Everyone! A special hello to those from the Realmac Software Forum.
Here we go with our first little RapidWeaver tutorial. How to get the body of iWeb generated pages into a RapidWeaver project. We are using RapidWeaver 3.6.5 (from now called RW), CSSEdit 2 and TacoHTML (the last 2 can be replaced with the free TextWrangler). We have done this with several sites, but cannot be sure it works flawlessly with all iWeb pages. It may also work as a basis for sites made with other programs too. In this we are assuming that the RW theme will be supplying the navigation.
Workflow:-
1) Choose (and maybe edit) appropriate Theme for your site. This is not covered here, as so many variations are possible! Find a theme you are happy with first, and then proceed with the rest of this tutorial.
2) Using iWeb, publish the site you wish to transfer to a folder where you wish to work. This folder will contain files used by RW, so put it somewhere you will not delete it by mistake.
3) Create page and include files used (pictures etc.) into Page assets.
4) Copy important CSS into the Custom CSS panel in the page inspector.
5) Copy the body of the old page into RW.
6) Delete some unnecessary code.
7) Fix links to file assets and other pages within the site.
8) Repeat 3) > 7) for each page.
1) Choose appropriate Theme for your site.
This as stated above is not covered in detail here, as so many variations are possible! Find a theme you are happy with first, and then proceed with the rest of this tutorial. As a brief point, choose a theme that can have the same page width and hide the sidebar. For help with this, please post on the Realmac Software Forum.
2) Publish your iWeb site to a folder.
Publish your iWeb site to a folder on your computer, and put it somewhere you can keep it. We have copies of our sites in the 'Sites' folder and have a 'WebBuilding' folder where all other used files are kept. Your 'housekeeping' of your files is important, take care with it!
3) Create Page and Include Assets
A:- In RW, add a page to your project using the '+' button in the bottom-left corner of the edit window, choosing the HTML page type. Open the Page Inspector (shift+command+1) and select the 'i' tab (leftmost one). Change the page title, browser title, folder and filename, and uncheck the 'Show In Menu' if you don'twant it in the navigation. Pay attention to the folder and filename in particular, as they will affect the links between pages in the code later. If you choose '/' as the folder setting (page in the root directory as in picture), it will complicate the links to assets slightly, and make links between pages easier. Choose the color wheel tab (4th from left) and make sure you can hide the sidebar and choose the appropriate width for the page.
B:- Now in the Page Inspector, choose the 'header' tab (3rd from left) and select the 'Assets' sub selection. Click the ' Add Files...' button. Navigate to your folder with the site from iWeb in it. If the page being transferred is called 'ThisPage' then the folder you are looking for in the site is 'ThisPage_files'. Inside that folder, select (hold command and click on) all files except .css and .js files and click 'Open'.
4) Copy the Important CSS.
In the folder with the files you have just added to the assets is a 'ThisPage'.css file. Open this with CSSEdit, TextWrangler or other appropriate editor. CSSEdit for one makes this next process particularly easy. The left hand column allows you to select the CSS for a paragraph style with one click. Select the 'Body' CSS and each paragraph style (hold command and click on the groups in the left column) and copy them (command+C). In editors like Text Edit, you will have to select the code as areas of text. It may be easier to copy and paste it an area (group) at a time. You may wish to try copying the whole of this file, but I haven't found this necessary up to now, and would avoid anything for the 'widget' (iWeb navigation).
Go to the Page Inspector in RW and click on the CSS sub tab. Click in the box and paste the copied CSS into the box.
5) Copy the Body of the Page.
Open the HTML file (eg. ThisPage.html) in an editor by right-clicking (control-clicking) and selecting the program using 'Open With'. We choose TacoHTML for this (freeware) and you can use TextWrangler (also freeware). In TacoHTML you can use the 'Batch Find' to replace the links to assets files quickly now before the copy and paste into RW (TextWrangler has a similar feature as far as we're aware, we just haven't used it for this). Open the Batch find and type 'ThisPage_files' (using our example page name again here, replace it with your page name). It should be able to find as many occurrences of that as you have assets, more if they are used more than once. If you have used a folder name for your page in RW, replace these occurrences with 'assets' to suit RW. If you have used '/' in the folder option (page in the root directory) and the page is called Filename.html I believe it should be 'Filename_assets'.
Now select all the code between and including the 'body' tags. The start body tag will have extra code inside the tag (as in the picture above), the end one usually simple, and be the second to last piece of code in our experience. Copy (command+C) and then go to RW and paste it into the edit area of the main window.
6) Delete some Unnecessary Code
With the code now in the RW edit window, we will remove some code we don't need.
A:- First, there is some script code in a block between script tags. Delete this including the tags.
B:- Next just above that is some code starting something like
div class="com-apple-iweb-widget-navbar
and ending with
/ul>.
Delete this including the tags. It is for the iWeb navbar we aren't using.
7) Fix the Links to Assets & Other Pages in The Site.
This is only for links made from text or pictures to other pages in your site, not for all items in your navbar. You may already have repaired the links to the assets files. To check, choose the preview in RW, and you will see question marks where pictures haven't had the code changed yet. Count how many question marks you have, and you will need to repair at least that many bits of code. Here is an example of what you are looking for-
img src="A._Guitar_LZ_Tuition_files/shapeimage_1.jpg"
These can also be lines etc. on your page aswell as normal images.
Where you have lines of code with links to pages, the new code will depend on the folder name for the page, or easier if you have put '/' in the folder field. Here is an example:-
href="Departments.html"
If you have used folder names (our example is 'Foldername'), these can now change to-
href="../Foldername/Filename.html"
for non-sub pages, or
href="../Foldername/SubFoldername/SubFilename.html"
for sub pages. For pages in the root directory
href="../Filename.html"
We have simplified it by using '../' at the front to refer back to the root directory each time. Going from a page to a sub-page for example can be much simpler when using folders,
href="SubFoldername/SubFilename.html"
but this may get confusing, so the first way just simplifies things.
The 'Home' page will always be 'index.html' and be in the root directory, therefore
href="index.html"
8) Repeat 3) > 7) for each page.
We hope this helps you guys who are making the jump from iWeb, but don't fancy rebuilding each and every page. When you have a lot to do, this can prove to be a lot quicker and easier, leaving you to rebuild pages from scratch as you need to in RW later. Please let us know if there are useful extras to add (we have only tried certain things that iWeb can do) or if you are having a nightmare with a page and we'll see if we can help.
For further comment, look at any posts about this tutorial in the forum HERE
WebKarnage