Video Transcript:

This tutorial is going to show you how you can re-create an iWeb made site in EverWeb. iWeb users are wondering how they will be able to import their iWeb made sites into EverWeb. Because iWeb creates a website in such a unique way, there is really no program out there that will allow you to import an iWeb site into a different website builder.

This means that the user will need to re-create their website in EverWeb. This is what most iWeb users will want to do, and even though EverWeb is very similar to iWeb, this is unique task for users, so this tutorial will definitely help you get started and show you how you can easily re-create your iWeb site in EverWeb.

Let's take a look at an example. Remember, in this example, we are assuming that you want to have pretty much the exact same website in EverWeb as you do in iWeb. Feel free to modify your site as you please.

On the left, we have an iWeb site. This is a fairly basic website . Yours might have more items on yours, but the same principles will still apply. Because we are going to be rebuilding our sites, we will want to start with the blank template in EverWeb. So first click on the Create a new website button, and then select the Plain White, or Blank template.

The first thing you will want to do is setup the page in EverWeb so that it is the same as the page in iWeb.  So in iWeb, click on the Inspector button, and then click on the Page tab, and then the Layout tab. There are two numbers that you will want to take from iWeb and use in EverWeb. The first number comes from the top and bottom padding. So in this case, since this number says 10px, I am going to put the number 10 in the Top Margin field in EverWeb. If it said zero, I would leave it as is. In case you are wondering, the px is for pixels, but since EverWeb's values are already in pixels, you do not need to type in px next to your number. The second number I am going to take is Content Width. This one says 684, so that is the number I will put in the Content Width field in EverWeb. The other Page Layout fields I am going to leave as is. If you want to change any of them, you can do so, but for the most part, you will not need to.

The next thing we'll want to do is set our page background and our browser background. If your page background in iWeb is white, you can leave this as is, but if it is a different colour, you can change it in EverWeb by clicking on the colour image under the Page Background heading, and selecting the colour you want. The same thing can be done for the browser background. Click under Browser Background to change the colour. Some of you may have an image tiled for your browser background. If that is the case, you can add the image to the assets section in EverWeb, and then select Image Fill, and select the image by clicking on the Choose button. Now, this method does require that you have the image file on hand. If you do not have the image file, what you can do is publish the site from iWeb to a local folder on your hard drive. Then open the website folder, and go to one of the web pages folders, and locate the background image. Once located, drag this image onto the Assets section in EverWeb. Now you can go back to the Inspector and choose this image for your Browser Background.

Now we'll copy and paste our website over. You will want to copy and paste items one at a time. This will ensure that everything gets copied over correctly and will save you time when formatting the elements in EverWeb so that the site appears the same way, or similar as it did in iWeb. I will start at the top of this website and work my way down. The first thing I notice is that the header on this site is an orangish background. This is not something I will want to copy from iWeb but rather create the shape itself in EverWeb. So for this header background, I will add a rectangle, and move it into my header by holding down command as I drag it. Then I will adjust it so it looks the way I want it to. Now since you will want all the colours to match up properly, here is a trick you can do if you are not sure what colour to give to the shape.

Open the application called DigitalColor Meter. This is an app that comes with all Macs. Make sure to select Display in Generic RGB from the drop down menu. Then hover your mouse over the shape. You will notice there are three values shown for the colour. You will see an R, a G, and B. These stand for Red, Green, and Blue. Now, in EverWeb, select the shape, and click on the shapes colour. Make sure you are on the Color Sliders tab, and that RGB is selected. Then input the R G B values for their respective colours. If you think you will need to re-use this colour again on your site, just bookmark this colour by dragging it the large colour preview into one of the colour bookmark squares.

Now since the header background is all set, I will just select the text box in iWeb and copy it and now paste it in EverWeb, and move it on top of the header background. Remember, if you want to move objects from the main body of the page into either the header or footer, you will need to hold down the Command key on your keyboard as you drag the object.

Below the header is the navigation menu. This is not something I will copy and paste as EverWeb has its own navigation menu, so I will just drag and drop the navigation menu widget onto my EverWeb page. We are not going to discuss editing the navigation menu in this video, so be sure to check out our video tutorial that covers everything you need to know about the navigation menu. If you prefer to use a text based navigation menu, you can go ahead and copy it from iWeb and paste it in EverWeb.

Next, I'm going to copy and paste all of the images that are on this page. This page in particular has 4 images that I will copy and paste over. Then I will just set up these images so they are in the same place that they were on my iWeb site. You will notice that I had skipped over a couple of shapes here. Just like we did with the header, these objects I will want to add manually in EverWeb. So I will go ahead and do that, and then when that is done, I will copy and paste the text from each of these shapes and place them on their respective shape.

Now I will just copy and paste the final text that I have on my iWeb page. I also have this Google map here on my page. Since EverWeb has a Google Maps widget built-in, I will just drag and drop the widget onto my page, type in the address that I want displayed and then just arrange the map so that it looks the way I want it to.

One last thing I need to do is add this vertical shape the separates the main content from the side bar content. I will just add a line shape, rotate it so that it is vertical, change the colour, and then extend the shape so it is the length I want it to be.

My iWeb site has now been transferred over to EverWeb. Most people will not just have a one page website, but hopefully your multiple page website uses a consistent design across most or all pages. Now what you will want to do is just Duplicate this page in EverWeb by doing a secondary click on the page, and selecting Duplicate. Now you can open your next page in iWeb and repeat this exact same process.

Depending on how large your site is, this can take you a decent bit of time, but following this process will definitely help speed things up for you. Remember to copy and paste only text and photos. Any shape should just be re-created in EverWeb. If you have widgets on your site in which there is a widget offered by EverWeb, just re-add the widget to your EverWeb site by dragging it onto the page.

If you use HTML Snippets for various objects on your site, just copy and paste the code from the HTML snippet into an HTML Snippet in EverWeb.