Web Studio Next

It may not look like it but there is a lot of information, tips and help on this page for you
some are just about using Web Studio in general

The menu looks like Web Studio so you can see where the task is done
When you hover over a button you'll see how to it's used and some tips
Click on the button for even more info like videos or other websites
You can close the drop down anytime by clicking anywhere inside

How to use Web Studio with the ADD ON effects


Doctype:       When you preview an effect and it doesn't look the same as the example...

In some builds of web studio when you use a built in menu, or an image under 16px high it adds a comment to the top of the document. When that happens a browser can't read the CSS styling correctly. To see if yours is doing that right click on the page and "View page source..." if this at the very top <!-- --> you paste a doctype in again above it to fix it.

In Web Studio go to the HTML tab in insert page HTML select "Before All Tags" and paste:
this new document type

jQuery Link: When you use more than one ADD ON on a page the effect doesn't work...

You can only have jQuery called once on each page, so if you place the link twice it won't work
Say if you put the link in the master page's head, then in a page's head as well, or if you are using two
add-on's on one page. Delete one of the jQuery links, they look like this:
the jQuery link

Images:        You see your picture in Web Studio but not when you TrialHost or make it live on the net...

You get the image name right and put it in the proper place but you might overlook the extension.
If your picture name is "myimage.jpg" but you put in "myimage.JPG"
(note the capital JPG) it won't work on the net.
Beginners Tip: When you select an image to attach, copy the name then and paste that into the code.

Preview:      You use Internet Explorer as your browser and you see an Active X...

When you run these from within your home computer on an IE browser
you may get an Active X "click here for options" notification.
Click on that and allow blocked content
That goes away on the interent.

How To Use Web Studio with Next

Insert an HTML Object

HTML TAB in Add HTML select HTML Object

that puts this on your page

Double Click and it opens the editor
where you can paste HTML


HTML TAB in Insert Page HTML select Before All Tags

Before all Tags

This puts code above the doctype. The only time you would use this is when Web Studio puts a

<!-- -->

comment tag at the top of the HTML page (view source)which can throw off the CSS style and page layout

see Troubleshooting below for more


HTML TAB in Insert Page HTML select Inside HEAD

Inside HEAD

You put the jQuery link and code you want to run on your page here so that it is loaded first

You also can put CSS in here, and it goes above the
jQuery. CSS is the style or look of the effect.

you only put the jQuery link once per page
see Troubleshooting below for more


HTML TAB in Insert Page HTML select Start of Body

Start of Body

This puts code above Web Studio's centering
table so we can make things screen width

Next uses it mostly for full width
background colors and images

see full screen banner for an example


Right click on the HTML Object select Properties

attach to HTML Object

First you see the menu

1. Press Attached Files

2. Press Add Files

3. Go to the image or text and select it

4. It appears in the list with a check mark

Beginners Tip: If you move a file after you attach it you'll get a notice when WS opens and a red question mark in your list

the HTML object can be an image


If an effect has an HTML attachment it'll be in a folder called "html_object"

Web Studio Tip

1. Press Place Holder...

2. Press Load Place Holder...

3. Find and select your image

Only you while working in Web Studio will see it

Attached Files in Website Properties select Add Files to list

attach to Website Properties

1. Press Website Properties


2. Press Attached Files

3. Press Add Files to list

4. Go to the file, image or text and select it

5. It appears in the list with a check mark

 Beginners Web Studio Tip

If you don't see the caption bar
with Website properties go to the
 VIEW tab in Show/Hide press Caption Bar

 Beginners Web Studio Tip

You can select multiple files (text & image)
when you attach them to Web Studio

about the Download

If there are files that need to be attached to website properties on the code page you will see this
download button

The download will have a folder called "website_properties" and be condensed or "zipped" to unzip it right click on it and follow the directions

HTML TAB in Insert Object HTML select Inside Object

Inside Object

We use this to put code inside an image object,
(it doesn't work on text).

An example would be an inline style:
style="border:1px solid black;position:fixed;bottom:0;"

That would put a black border on your picture, make it stay in place when your page scrolls and position it at the bottom of your computer screen like a fixed footer


HTML TAB in Insert Object HTML select Inside DIV

Inside DIV

This puts code inside the division tag after it's style attribute so we use it to put in a class selector


The class is controled by the CSS style when it's in the division that style attribute cascades to all the elements in the division

An example we could use this for would be if we had many images on our page and we wanted to apply a black border to
all of those pictures at once


You'd put the style in the HEAD

<style>.blackborder img {border:2px solid black;}</style>

Select all the images on the page you'd want to have the border group them and put this class inside that div


That would cascade that style to all the images.
So it could come in handy.

HTML TAB in Insert Object HTML select After Object

After Object

This puts code inside the division after the object

An example I use this for is to put captions
below images in the simple slideshow


Insert TAB in Illustrations select Arrow

Protected Graphic From File

Then select this button

If you optimize your images
this won't change them.
They will also keep the name of the image
If you use them more than once on your
website it saves download size


What web studio does with images

If you add a GIF or JPEG Web Studio will
change it into a 24 bit image
then back again when it builds the HTML
Inserting images this way
protects your image from that process.

Web studio Tip

Don't have the same image downloaded twice
Using protected graphics places the image in a special folder and every time it's used on the site it uses only the one image!

Text TAB in Clipboard select Edit HTML


Select your text object then Edit HTML and
you can work with the code used in text.

You can style the text inline or use a class
This is one place you can add the styling
for more link colors on your page

see the CSS Link Styling page for more


Text TAB in Links select Other Link

Other Links

This allows you to manually add your own links
and other website links

If you add a link to another web studio page
manually it will put about: in front so you
need to edit html and remove that


Web Studio Tip

You can add a class to a link in here as well as edit html. When you do you need to format it a little different: 
" class="yourclassname 
then web studio will build the html around it.

Create TAB in Group select Group


This puts all of the objects you have selected on your page into a single division

Hold down the SHIFT KEY as you select multiple objects, or you can just hold down the left mouse button and drag a box. You can also use both.


Web Studio Tip

Name a Group ID

Once Grouped then Double Click
in Object Info change the ID number

You need Build 22 or above see WSTV for more

Web Studio Tip

You can't have two ID's with the same name on a page or start an ID with a number in HTML.


Want to change something Un-Group then group again and rename

These effects are not officially part of Web Studio
If you have questions see the custom coding page

Every little bit helps to keep this site up and running, thank-you.