Series

Introduction | Podcast | Quickstart Tutorial

Webstudio 5.0 Video Tour

Here is the video tour for Web Studio 5.0. Take a few minutes to watch and become familiar with the user interface and features. We’ve highlighted a few of what we think are the most important features, but that’s just the beginning. Web Studio

Introduction | Quickstart Tutorial

Tutorial Step 12

Step 12. Preview the Website.
This time we will use the Preview Links or Preview Website Commands to view the site and check the links.
The Preview Page Command only displays one page.
Preview the Website

Click on Page Tab>Preview Group>Preview Page Arrow>Use Web Studio Browser.
Click on Page Tab>Preview Group>Preview Links. This

Introduction | Quickstart Tutorial

Tutorial Step 11

Step 11. Link Pages
There are two kinds of links on this site:
Page Links: These are the links that are put on the buttons so that the viewers can go from page to page.
Footer Links: These are the row of text links that go on the bottom of

Introduction | Quickstart Tutorial

Tutorial Step 10

Step 10. Create an Email Link
An email link can be placed on any graphic, button, or text on the page.
Create an email link

Place a graphic or text on the page that you want to use for the email link.
Make sure the graphic or text is selected
Click on Insert Tab>Links Group>Mail

Introduction | Quickstart Tutorial

Tutorial Step 9

Step 9. Complete the Contact page
The Contact page has the basic design with the banner and large rectangle. Add text objects, photos and design shapes to layout the page. If you want to use the Graduated Fill and Fill shapes from the Home page, you can Copy them and Paste

Introduction | Quickstart Tutorial

Tutorial Step 8

Step 8. Add Buttons
Buttons can be placed and linked on the Home page and then copied and pasted onto each page. Since the links remain on the pasted buttons, this saves time with web design. You can drag and drop a button from the Buttons Gallery. You can also make

Introduction | Quickstart Tutorial

Tutorial Step 7

Step 7: Add shapes and text to the Home page
There are several shapes on this page. There are is a solid rectangle behind each photo, a larger graduated fill rectangle and a design line.

Make a Graduated Fill rectangle

Click on Draw Tab>Shapes Group> Rectangle Graduated Fill. This places a rectangle

Introduction | Quickstart Tutorial

Tutorial Step 6

Step 6. Add photos to the Home page
Now that we have the basic design, we will add the objects that are on the Office Support (Home) page. You can use photos from the Photos Gallery or insert a photo of your own.

Use a photo from the Photo Gallery

Click on the

Introduction | Quickstart Tutorial

Tutorial Step 5

Step 5. Add a page, rename the pages
Now that we have a basic design layout for the website, we will make a duplicate of the page. This saves you the time of redoing the design.
Add a Duplicate Page

Look at the Page List at the right of the workspace.
Click on the

Introduction | Quickstart Tutorial

Tutorial Step 4

Step 4. Preview the Page
Now that you have some text on the banner, let’s see how it will look on the internet by Previewing the page. We will Preview the page using the Web Studio browser which opens right in the workspace.

Click on Page Tab>Preview Group>Preview Page Arrow>Use Web Studio