This screencast Introduction to Sandvox [play] walks you through building a simple, yet sophisticated, website about a family's vacation to Maui, Hawaii. It is an excellent introduction to Sandvox and is worth reviewing again once you have more experience with Sandvox.
Transcript
Chapter 1 – A Day in the Life
Hello, and Welcome to this screencast introduction to Sandvox: The powerful playful and intuitive website creation application from Karelia software.
In this screencast, I will 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 Maui.
For now, to get an overview of how Sandvox works, let’s add a new page, make some simple edits and then, publish those changes.
This main document window is how you work with most aspects of your site.
At the top is the standard Mac OS X toolbar with icons to help me add Pages, Objects, Create links, and so on.
Here on the left-hand side is the “Site outline”, which shows all of the pages of my site. The homepage is at the top.
The rest of the window is the “Web view”, which shows the content of whatever page I’ve 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 “Web view”. 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 format menu.
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. The Link panel opens for the highlighted text. The Link Panel is part of the Inspector and I’ll cover the Inspector later in this screencast.
Use the ‘Link to’ menu to determine where the link will take the visitor. If I want to link to an External URL, I just 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. Where the item is linked is shown here. Now I can close this panel.
For my last edit, I’ll add an entry about my day trip to the Bamboo Forest to my ‘blog’, which is just a collection of pages with the most recent entries at the top. Adding a new entry to an existing blog is very easy to do. I’ll add a text page from the pop-up menu in the toolbar and then type the entry directly into Sandvox.
Now, with all 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’. 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 the Sandvox website is like. Over the next few chapters of this screencast, I’ll recreate this website in Sandvox from scratch demonstrating how to: create a site, manage content with New pages and Objects on each page, add and manage a Blog as well as albums of Photos and movies, set up Publishing, and look at some advanced features.
Chapter 2 - A New Site From Scratch
I went through Sandvox’s basic workflow in Chapter 1. Now let’s take a step-by-step tour. To do this, I will re-create from scratch the website you saw in Chapter 1, the site that documents my family’s summer vacation in Maui. My site will contain pages with text and photos, a blog, and even movies.
To get started, I’ll choose “Create a New Site” from the Launch screen. The next step is to choose a design from the ‘Design Chooser’. I can choose designs by category: Minimal, Basic, Glossy, and so on. I’ll go back to All. Sandvox comes with over 50 professionally made designs and some of those come in several variations like Appleseed or Aurora Palace.
For now, I’ll choose Aurora Palace Blue.
After I choose the design, I can see my site.
Open the ‘Design Chooser’ at any time to pick a new design. Sandvox will refit all existing pages with the newly chosen design. Sandvox makes these kinds of changes a breeze. For this site, I’ll use the Clockwork Maroon design.
I’ll save my document, and call it Exploring Maui.
Let’s look at the structure of the homepage. The header section is at the top and it contains both the title and tagline. I’ll click in the header area and change the name to Exploring Maui. For the subtitle, I will replace it with: “A website dedicated to vacationing in Maui”.
Down in the footer area, I’ll type in my e-mail address should anyone want to ask any questions. I want to make it really easy for my visitors to reach me, so I’ll turn my e-mail address into 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 here to dismiss the ‘Link Editor’. Now my header and footer are complete and they will appear on every page of my 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 go to “New” and choose ‘Empty/Text’ to add it to the site. I will call this page About, and add some text. I can do this simply by copying and pasting from a TextEdit or Word file like this. There!
To finish this chapter, I’ll talk about “Objects”. In Sandvox, an object is a block of content. It can appear in the main body area of your text, or in the sidebar. For example, when I created a new site, Sandvox automatically added a Sandvox badge “object” to the home page.
So, now I’ll add a new Photo to the sidebar of the homepage. I grab the photo from the Documents and simply drag it here. And then I’ll change the title. And now, when I click on the tab for the About page, like the Sandvox badge, the photo will be seen on all of the pages.
Chapter 3 - Blogs
The next thing I want to add to my site is a Blog. To get started, I’ll go to the “New ” drop down menu on the “Toolbar” and choose ‘Blog’.
Let’s add a short introduction then, let’s add some entries.
I’ll add an entry to the Blog by selecting the “First Post” page in the Site Outline. I’ll add some text for my visitors.
Next, I’ll add another entry. I do this by selecting the Blog in the Site Outline. I’ll go to “New” and choose an ‘Empty/text’ page—then change the title—and add some content. I’m pasting this in from my Word document.
Blog pages are usually contain content text, but can also contain a photo. For example, if I want to add a photo or pdf document as a blog page, I’ll make sure to drop it into the blog in the Site Outline.
Let’s say I found a website that I wanted to share with my readers. Switch to Safari then drag the URL icon from the location bar into the main Blog. There’s the new page in the site outline that references the website, and that site is loaded right here into Sandvox.
Next, I want to add a photo to this particular Blog. I’ll drag a photo from Documents into the ‘Sidebar’ and change the title. I’ll add a small description about the photo by clicking here.
Notice on the main page of the Blog how the entries are represented with a title and description and the titles of the entries provide hyperlinks to the specific page.
You can see the hierarchy of pages nestled under the main page. This is called a “Collection”. A C ollection is a page that contains other pages, much like a folder that holds all the pages and objects belonging to this particular Blog. Each entry in my Blog is a Webpage and the Collection indexes those entries, ordering them by date. Over the course of this screencast, I’ll create more Collections and no doubt, you’ll find creative uses for them in your own sites as well.
Chapter 4 - Photos and Movies
The next item I want to add to my site is a Photo Album. I’ll create another Collection via the toolbar. I’ll select ‘Photo Album’.
First, I’ll rename this album to simply, “Photos” with the description, “Some of my Favorite Photos”. Then I’m going 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 Maui”.
To import these pictures, I’ll select all the photos from that album and drag and drop them into my new Photo Album in the site outline or directly onto the index itself. Sandvox automatically creates a page for each photo and generates thumbnails for the photo index.
You can use a photo album to organize many media types beyond photos. For example, I used the movie feature in my digital 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 Maui”.
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 the “Photo Album” to contain movies like this is the index it creates showing the thumbnail images for those movies. So, let’s play a movie!
Chapter 5 - Publishing
Over the last few chapters, I created an impressive website with relative ease. It’s time to show off the site and Publish it.
To do this, I’ll click on “Setup Host” to open the assistant that will guide me. 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, I can enter the connection information I received from my provider. I’ll enter my hosting information here.
Sandvox will then test my connection to ensure that I can put files on the remote host and retrieve them over the web. That works so, I’ll 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. How long it takes for you, 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!
Chapter 6 - Inspector
A lot of functionality has been covered in this screencast. And so far, I haven’t used the “Inspector” very much. The Inspector gives me some finer grained control over the site. To open the “Inspector”, I click on the blue ‘I’ icon in the toolbar.
From these six segments in the top of the window, I can fine-tune the settings for the whole document, the currently selected page, and then other aspects of a selected object on the page.
To start, I’m going to explore some of the site settings. Under the ‘Document’ segment, the ‘Site’ tab, I can change the author’s name, the language, and so forth. Here, I’ll adjust the ‘Date Format’ from Short to Full.
Under the ‘Appearance’ tab, I can pick and choose which site elements are displayed, such as the Site Title, Tagline, Logo, and Footer.
If I want to add a graphical Banner to the header, I can either use the “Design-supplied” or my own. I want to select my own, so I’ll select Image Fill, pick one and simply drag the image file and drop it into the image well in the “Inspector”.
Next, with the Homepage selected, I select the ‘Page’ segment of the “Inspector”. I have what I need here to keep a draft that I’m working on from being Published. I can determine what pages I want to be displayed on my Site Menu, the Meta tags or Keywords to describe the page, and so on.
I’ll select one of the Movies in the Movies blog. Then I’ll select the ‘Media’ segment in the “Inspector”. Here’s my ‘File Info’ for this Object. The dropdown let’s me choose a Media file or enter a url. I can loop the film and adjust the Controller. I’ll hide the playing controller on this movie and set it to Automatically Load and Play when the page loads.
I’ll click the Wrap segment. Choices for Object placement are displayed. For this demonstration, I’ll paste in a few words here and then go back to the “Inspector” to change the Placement selections. See how it changes? I’ll leave it as a Callout because I like the way this looks!
Finally, I’ll go back to the Homepage and select the Sandvox badge. This activates the ‘Plug-in’ 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 Pages and Objects have several useful options available in the “Inspector”. So don’t hesitate to explore.
Chapter 7 – Advanced Features
For this final chapter, I’ll review some of the more advanced tasks you can accomplish with Sandvox. It empowers you to edit and insert raw HTML in and around an existing Sandvox site. Under “New” on the toolbar, I can add a ‘Raw HTML’ page, and under “Objects”, I can add a ‘Raw HTML’ object to any page.
One use of raw HTML is to display content from another site. For example, Vimeo.com is a video file sharing service that is similar to YouTube. I use Vimeo to upload and share high quality video with visitors to my site.
I’ll go back to Sandvox because now, I want to create a ‘Raw HTML Object’ to display a video I uploaded to my Vimeo.com account. From the “Object” drop down menu, I’ll choose ‘Raw HTML’. Now, I’ll go to the video I want in Vimeo and choose the Embed option. Here’s the HTML code, so next, I select it, and copy.
I’ll go back to Sandvox, and paste in the code I got from Vimeo here. Then hit ‘Update Preview’. The video is displayed with the title.
While simple, these Advanced Features open up a world of possibilities for you to expand and shape your Sandvox site.
And with that, I’m finished with this screencast. I thank you for your attention and hope you give Sandvox a try. And if you have any comments or suggestions, please let us know!
Thanks for watching.