Tip:
Highlight text to annotate it
X
In this demo, we�ll take a look at the main areas of Site.com Studio to show you how easy
it is to build a custom website.
In our example, our designer has provided the site design, images, and CSS we need to
build our site.
Let�s start with a blank site called �BitsWest," which our site administrator has already created.
On the Overview tab, you can access the site�s pages, page templates, style sheets, imported
assets, and widgets.
First we'll import the site�s image assets by simply dragging them onto the Studio interface.
And in the All Site Content view, you can organize assets by creating folders.
Let's add the CSS to the site�s style sheet by double-clicking it, clicking Edit Style
Sheet Code, and pasting in our CSS.
Now, on to the pages! Our design has a header area that contains a menu and a logo, a main
content area, and a footer area.
Because all of our site pages use this layout, we can save time by creating a page template
that includes these common elements, and using it to create the site pages.
In the Page Templates view, click New Page Template, and enter a name. In this case,
a one-column layout with a fixed width of 750 pixels suits our needs.
The new template has three panels or containers for the header, the content, and the footer.
You can also see this page element hierarchy in the Page Structure pane.
For the header, we need to add two more panels to contain the logo and the menu. So let's
start by dragging a Panel from the Page Elements pane onto the header.
In the Style pane, we can select the appropriate style, which we added previously. But you
can also create and edit your styles as you work using this visual CSS editor.
Let�s quickly drag an Image page element onto the logo panel and select our logo.
As you can see, we�ve added some content blocks for the page text, and a menu, but
we don�t yet have any site pages.
Although we want the header and the footer to look the same on every page, we'll need
to modify the text of each site page, so let's make each content block editable.
Now that our page template is complete, we're ready to create our site pages! Simply click
Page Actions � Create Page from Template and enter a page name.
As we add site pages by quickly duplicating them, the menu automatically updates to reflect
our changes.
We've added all of our site pages, so now let�s add some content to the Home page
by double-clicking the text area to open the content editor.
Notice how the changes are reflected immediately on the page. And by previewing the page, you
can ensure it appears as expected.
Our site adminstrator has already configured the domain information, so now we're ready
to go live.
Click Publish Changes and select Site-wide changes to publish the entire site.
Everything looks in order, so now let's add a note to track our publishing history and
go live with just one click.
For more information, check out these topics in the online help.