Karelia Software

Hello and welcome to this screencast Introduction to Sandvox, the new powerful, playful and intuitive website creation application from Karelia Software.

In this screencast I’ll be showcasing many of Sandvox's creative features. To get started, I’ll show what it's like in the "day in the life" of a Sandvox website.

Here on the Desktop is my Sandvox document. Let’s open it. This is a website I’ll build from scratch later, one that recounts my family’s summer trip to Ireland. For now, to get an overview of how Sandvox works, let's add a new page, make some simple edits, and publish those changes.

This main document window is how you'll work with most aspects of your site. At the top we have a standard Mac OS X toolbar with icons to help us add pages, create links, and so on. Here on the left hand side we have our Site Outline, which shows all the pages of my site; the home page is at the top. The rest of the window is the WebView, which shows us the content of whatever page we have selected in the Site Outline, just as it would look in the Safari web browser.

The first thing I’ll do is edit the content of the “about” page, which explains the purpose of this site. I’ll select “About” in the Site Outline. Now it displays that page in the WebView. 

To start editing, I click on the area of the text I want to change. For this page I’ll just remove a paragraph, and add another in its place.

Then I’ll work in some basic styling. I’ll select some text and make it bold by selecting “bold” from the style menu And then I’ll select this line and make it italic; this time I’ll use the keyboard shortcut and hit command-I.

Next, I'll add some hyperlinks. I want to link the word “pictures” to the photo album I created, so I highlight that text and click on "Create link" in the toolbar. A little panel opens up. If you want to link to another website, you would type or paste in a URL . But since I need this link to go to another page on my own site, I drag this target icon to the site outline, and connect it to the page I want to link to. To close the link panel I click in some other part of the window. Notice when I hover over that link, I see where it’s linked to, down on the status bar at the bottom of the window, just like in Safari.

For my last edit, I’ll add an entry about my day trip to Blarney Castle to the weblog.

A weblog can be thought of as an online journal; a collection of articles with the most recent entries at the top.

Adding a new entry to an existing weblog is very easy to do. I’ll add a text page from the popup menu in the toolbar, and then type the entry directly into Sandvox. 

Now, with all of my editing done, I’m ready to publish, so I click on the publish icon in the toolbar. 

From Sandvox you can publish to any web host, or even your own computer. This site is already setup to upload to an FTP site. If you’re curious about publication settings, they will be reviewed in detail toward the end of this screencast.

When uploading is finished, I can visit the site. There it is in Safari; and there are my changes.

This covers what “a day in the life” of a Sandvox website is like. Over the next few chapters of this screencast we'll recreate this website in Sandvox from scratch, demonstrating how to:

We went through Sandvox’s basic workflow in Chapter one. Now let's take a step-by-step tour. To do this I will recreate from scratch, the website you saw in chapter one, the site that documents my family's summer vacation to Ireland. My site will contain text pages, photos, a weblog, and even QuickTime movies.

To get started, I’ll choose “New Site” from the File menu. I’ll call it Irish Summer and save it on the Desktop.

There’s the new site, with the initial home page and some example content. 

Notice the area that appears directly underneath the toolbar; this is called the Design Chooser. 

Sandvox comes with over two dozen professionally made designs. At any time you can open the Design Chooser and pick a new design. Sandvox will refit all of your existing pages with the newly chosen design. Sandvox makes these kinds of changes a breeze.

For this site I’ll stick with the default Aqua design and close the Design Chooser from the toolbar to give myself a little more room.

Let’s look at the structure of our home page. At the top we have a header section with both a title and subtitle. Sandvox has filled in the title with “Irish Summer”, and that’s fine with me. For the subtitle let’s replace it with: "A website documenting our family’s summer vacation to Ireland."

Down in the footer area, I’ll type in my email address should anyone have any questions. 

I want to make it really easy for my visitors to reach me, so I’ll turn the email address into a hyperlink. I highlight it and use the Create Link command via the toolbar. Sandvox has automatically made it into the right type of link, so I’ll click elsewhere in my window to dismiss the link panel. Now my header and footer are complete, and they will appear on every page of my site.

Next I’m going to replace the placeholder text on my home page with a small introduction, welcoming people to the site. 

To finish up, I’ll highlight the name of the site and make it bold.

Now I will add a new page that explains the purpose of the site. I just drag in a text file from the Finder and drop it into the Site Outline. Sandvox creates a new page from the file’s content.

To finish this chapter, let’s talk about Pagelets. In Sandvox, pagelets are small sections of content you can add to pages on your site. For example, when we created a new site Sandvox automatically added a Sandvox badge pagelet to the home page.

I can add a new pagelet from the toolbar; Sandvox comes with a long list of pagelet types containing text, photos, contact forms, movies, RSS feeds, and so forth. Let’s add a new pagelet to the home page, a photo pagelet of our group, to give the site a human touch. I grab the group photo from the desktop and simply drag it here to replace the placeholder photo. Then, I change the title to “The Vacation Crew”. 

This group photo, like the Sandvox badge, will now be seen on all of the pages.

The next thing I want to add to my site is a weblog. To get started, I’ll use the collections pull down from the toolbar and choose "Weblog". Let's add a short introduction: “A journal of memories.”

Next, let’s add some entries. For this demo, I’ll drag and drop some pre-made documents, in this case a few Word files. I make sure to drop them into the weblog, not just anywhere in the site outline, so they are a part of the weblog. 

Weblog pages are usually text pages, but there are other options. For example, let’s say I found a website that I wanted to share with my readers. I’ll switch to Safari, then drag the URL icon from the location bar into the main weblog. There’s the new page in the site outline that references that website, and it has loaded that site right here into Sandvox. Clicking back to the weblog page, there’s the new entry for that link. I want to insert a description for that link, so I click on the editing marker, this little green “plus” icon. Now I can type in my description. 

Let’s also add a new page to the weblog, a photo page. I’ll drag a photo from my desktop onto this placeholder. Then I’ll edit the title, calling it “From the top of Blarney Castle,” and add a small description. 

Notice on the main page of the weblog how this new entry is represented with a thumbnail image, along with our title and description.

The weblog I just created is one of several types of Collections that are available in Sandvox. A collection is powerful: it’s like a folder on your hard disk; it is a page that contains other pages. Each entry in my weblog is a web page, and the collection indexes those entries, ordering them by date. Over the course of this screencast we’ll create more collections and no doubt you’ll find creative uses for them in your own sites as well.

The next item I want to add to my site is a photo album. I’ll create another collection via the toolbar, a Photo Album. 

First I’ll rename this album to simply “Photos” with the description “Some of our favorite photos.”

Then I want to add some photos, but before I do that I want to introduce something new. Instead of dragging in photos via the Finder, let’s use the Media Browser by clicking on the Media icon in the toolbar. Now I have access to my entire iPhoto library. 

I already have an iPhoto album called “Best of Ireland”. To import these pictures, I’ll select all photos from that album and drag and drop them into my new photo album in the Site Outline. Sandvox creates a page for each photo, and generates thumbnails for the photo index. 

Beyond the photos themselves Sandvox has imported additional information about the photos, including titles, dates, and descriptions that I had previously given them in iPhoto. 

You can use a Photo Album to organize many media types beyond photos. For example, in Ireland I used the movie feature of my still camera to grab a few panoramic movies of some famous sites. To showcase these I create a new Photo Album called “Movies” with a small description: “Some short movies I took in Ireland on my still camera.”

Next I open “Movies” from the media browser, and choose an album from my iPhoto collection. I then drag a few of my favorites into my album.

Sandvox will import each movie, as it did with the photos, and create a page for each one. The advantage of using a Photo Album to contain movies like this is the index it creates; showing the thumbnail images for those movies.

Over the last few chapters I’ve created an impressive website with relative ease. It’s time to show off the site and publish it. Let’s click on “Setup Host” to open the assistant that will guide us.

The initial display indicates that I have not yet set up the site. Clicking “edit” and moving along, it asks me if I want to publish to the local computer or to a remote host. Let’s choose Remote Host and publish to a server on the Internet.

On the next page we find a list of providers. Sandvox comes with profiles for a growing number of popular hosting providers, only requiring your username and password to connect. If you don’t see your provider here, you can check “Create New Host” and then manually enter the connection information you received from your provider. I’ll enter my hosting information here.

Sandvox will then test my connection to ensure that it can put files on the remote host and retrieve them over the web. That works, so I move on. Finally, Sandvox shows me a review of my setup, and I click “Done.” 

Now I just need to hit publish in the toolbar to transfer the pages to my provider. The transfer may take a few minutes to complete; that depends on the speed of your Internet connection and the size of your website. When it is finished, I can view the final website in Safari. 

It looks great!

A lot of functionality has been covered in this screencast, and so far I haven’t yet shown the Inspector, which gives you finer grained control over the site.

To open the inspector I click on the blue “I” icon in the toolbar. From these segments in the top of the window, I can edit settings for the entire site, the currently selected page, and if I have an individual item like a pagelet selected, I would adjust it using the third segment. 

To start, let’s explore some of the Site settings: 

Under the “Properties” tab, you can change the Author’s name, pick a different date format, set up comments on your weblog, and so forth. I’ll adjust the date format here.

Under “Media,” I can add a graphical banner to the header.

I start to drag my image file, then I hit command-Tab to switch back into Sandvox, then I drop it into the image well in the inspector.

Next, I select the “Page” segment of the inspector with the home page selected. I check the option to “Include in site menu” which then will add a link to the home page, which is titled “Welcome,” to site menu, which shows up at the top of all my pages. Also notice how you can turn the sidebar on and off for any page. 

Now, I’ll select one of my movie pages. Notice the bottom of the page segment; there are some options specific to the type of page I have selected. I’ll hide the QuickTime controller on this movie and set the movie to automatically play when the page loads.

Finally, back on the home page, I select the Sandvox badge, to activate the last segment of the inspector. It turns out that I can choose from a number of images to proudly show that my site was built with Sandvox. Most pagelets have several useful options available in the inspector; so don’t hesitate to explore.

All of the features I have shown so far are available in all versions of Sandvox but for this final chapter I’ll review some of the more advanced tasks you can accomplish with the Pro version. 

The main distinction of Sandvox Pro is that it empowers you to edit and insert Raw HTML in and around an existing Sandvox site. Notice in the toolbar the addition of a Raw HTML page and a Raw HTML pagelet.

One use of Raw HTML is to display content from another site. For example, there is a service from Weather.com that will allow you to display a local weather forecast on your own site. Let’s create a Raw HTML pagelet to display our local weather in the sidebar. From the pagelet pulldown I’ll choose Raw HTML Pagelet. Then I’ll bring up the inspector, and paste in the code I got from Weather.com. 

Once I publish, visitors to my site will always have an up-to-date forecast.

Next, I’m going to create a new HTML page that is going to feature a survey for my visitors. It will hook up to a back-end script that I have installed on my web server. Remember, this is an advanced feature so you would need to know about HTML and server-side features to do something similar. I’ll drag in this file with a snippet of HTML to create the page. 

To make sure that this page is valid HTML, I’ll go to the View menu and choose Web View and then Validate HTML. Sandvox will take the current page’s source and validate it using the W3C validator. Good, this is valid HTML code.

While simple, these Pro features open up a world of possibilities for you to expand and shape your Sandvox site.

And with that we are finished with this screencast. I thank you for your attention and I hope you give Sandvox a try by downloading the free demo. And if you have any comments or suggestions please let us know. Thanks for watching.