Series

Changing Your Home Page

Part 11 of 11 in series Page Tab

Every website needs a Home page. When you start a project, Web Studio automatically makes the Home page be the first page in the Page List. The Home page always has a little house icon next to the name so that it is easy to find.

You can change which page will be the Home page as many times as you like. However, there can only be one Home page in your project.

To change the Home page do this
  • Go to the Page List and click on the name of the page you want to be the Home page.
  • Do one of these two things:

1. Right click over the name and choose Home Page from the top of the list

2. Click on Page tab > Page group > Home Page

  • After you do one of the above, a window will open asking if you want to change your Home page. Click Yes.
  • Your Home page is now changed. You can change it at any time.

Note

If you are going to Trial Host just one page of your website, you must make that page your Home page. Every Trial Host must have a Home page.

Adding Options for PayPal Buttons

Part 1 of 0 in series Shopping Cart

To add options such as sizes and quantities to your PayPal shopping cart:

  • Go to paypal.com
  • Login to your account
  • Click merchant services
  • Click on the Add to Cart link under “Create Buttons”
  • Under “Customize Button”, add your options
  • Fill in the rest of the information
  • Choose “Create Button” at the bottom of the page; this will take you to a page with the HTML
  • Copy the HTML
  • Go to Web Studio
  • Click on the HTML Tab > HTML Object. This places the HTML Object on the page
  • Double click on the HTML object to bring up the HTML Editor
  • Paste the HTML from PayPal
  • Click Save
  • Use any Preview Page command to text the button.
  • Go to Preview>Preview Page to test the button

Maximum Pages and Page Length

Part 6 of 6 in series Basics

Remember that you are designing your website for your visitors. Even though the program has the capacity of allowing approximately 47 pages of text on one page, please consider how convenient that is for your visitors.

Maximum Number of Pages
  • No limit, limited by Memory
  • Practical Limit: 60 pages, split larger sites into multiple Projects
Maximum Page Length
  • Limited to 32767 pixels, or approximately 47 pages of text per page
  • Practical Limit: limited by memory, Windows swap file size, processor speed
  • Recommended Limit: 10,000 pixels, or approximately 14 pages of text per page (5,000 with Windows 98 and ME, or approximately 7 pages of text per page.

Forms, Adding Radio Buttons

Part 17 of 18 in series Forms

Checkboxes are little squares that are used to offer a yes/no option. Since users can check more than one checkbox, you may want to include instruction such as, “Check all that apply”. 

Radio buttons are little round boxes that are like checkboxes except that only one can be selected in a group. When one is selected, the others are automatically turned off.

Add a radio button
  • Click on Forms >  Radio Buttons > Radio Button. This places a radio button on the page and opens the Object Properties dialog.
  • Choose options for the checkbox or radio button in the Object Properties dialog. See an explanation of options below.
  • Click OK.
  • Repeat for each radio button you need.

info To reopen the Properties dialog, double click on the checkbox.

Choose options in the Form Object section for the radio button

 

Object Info

ID Number. Web Studio assigns an object ID number to the field.
Tab Order.  This displays the tab order assigned to the field. See Assigning the Tab Order later in this chapter.

Position

Position.  The field position from the left and top margins is measured in pixels.
Disable.  This disables this form element. Use Javascript to enable this.

Label Properties for Form Control

Label.  Fill in the text that will be displayed on the form next to the radio button.
Position.  Choose to position the label on the left of the field, the top of the field or have no label at all.
Background Color.  This is the background color of the field label.
Font.  Choose a font style.
Text Color.  Choose a text style.
Custom Script (Advanced)

Use this for any scripting that is necessary to customize the form’s look or behavior.

Choose options in the Radio Button Section

 

Radio Button Properties

Group Name.  Fill in a name that identifies this specific field. Every radio button in a group must have the same group name.
Value.  This is information that is sent in the e-mail that defines the field. For instance, this field could be Yes if the Name field is Contact

infoThe Name field is not the same as the Label field.
Label information is the text next to the field that identifies the field to the users. For instance, Address is a field label.
Name and Value information is what you receive in your e-mail.

Initial State.  Fill in whether you want the checkbox to display on the page Checked or Not Checked. By the way, this option uses a radio button.

Radio Button Background Color

Background.  Choose a background color for the label of the radio button.

Group the Radio Buttons

Radio buttons are designed to work in groups. When you group the buttons, it limits the users to one choice in the group. Order forms, for instance, may have a size group and a color group. Using radio buttons prevents users from choosing more than one size or one color for one item.

  • Hold down the shift key and click on each radio button in the group.
  • Click on Forms > Radio Buttons > Group Radio Button. This opens the Grouping Radio Buttons dialog.
  •   Enter a name for the group and then click OK.

img src=”http://webstudiotv.com/wordpress/wp-content/uploads/2009/08/infoblue.gif” alt=”info” width=”32″ height=”32″ class=”wp-image-147″ style=”border-width:0px;background:transparent;” /> Note about naming buttons and groups
The information from the form comes to as a list of data; you do not see the form itself. The name that you give buttons and groups is important because these names define the data that you receive in the e-mail.

About Form Checkboxes and Radio Buttons

Part 10 of 18 in series Forms

Checkboxes are little squares that are used to offer a yes/no option. Since users can check more than one checkbox, you may want to include instruction such as, “Check all that apply.” 

Radio buttons are little round boxes that are like checkboxes except that only one can be selected in a group. When one is selected, the others are automatically turned off.

Important info about naming Checkboxes and Radio Buttons!

Each Checkbox gets its own name. The name must be different from the other checkboxes so that customers can select as many as they want.  If you give the same name to all of the checkboxes, you will only get information from one checkbox regardless of how many are selected.

Radio Buttons belong in a group and therefore, each group gets a name– not the individual button.

Screenshot of Submitted Form

Part 9 of 9 in series Forms Tab

If you are wondering what the information looks like when you get it, here are screen shots that show you the fields.
Here is the form we are using. It is a simple contact form with two fields: Name and Email. This form is grouped with a subject of Contact Info that will be sent to Customer Service (Your Name), followed by the name of each field and the information keyed in by the customer.

Customer fills out this form

 forms2

This is a screen shot of this form after it is submitted and received in gmail.

formssubmittedinfo

Grouping Forms

Play Video Web Studio has powerful tools for creating forms, but before objects can become an active form, the objects need to be grouped. Grouping the form objects is how you tell Web Studio which form objects belong together. If you imagine a page with more than one form, you can see why the grouping of form objects is necessary. This episode shows how to group a form, and how to avoid a common problem, which occurs when an object is “behind” the form group. If you click & drag the form group (the translucent box with the red border), all the objects that move along with it are considered by Web Studio to be included in that form group. Sometimes an object seems at first glance to be part of the form group, but is actually “behind” the group. In this case, you’ll need to either bring that object forward, or bring the form group backwards, using the Page Layout Tab.

Form is not Working

Part 8 of 9 in series Forms Tab

If your form is not working, check these solutions.

Check the Group Form object

Click on the form and move it. The entire form should move together. This includes the form field, the background, the graphics, and anything else you want on the form.

If everything does not move together, you have not grouped the form correctly, or it has been modified since grouping. The gray rectangle “background” of the form must be in the back, with all the form items and fields on top.
Move the Form Group object to the back in one of these ways:

  1. Press down  “b” button of your keyboard, and then click on the gray background of the form.
  2. Right click gray background and choose “move selected object to back”.
  3. Click to select the gray rectangle, and then click Page Layout tab > Bring To group  > Back command.

Now try moving it and it should all move together.

All information from Checkboxes is not received in the email.

Each checkbox must have a different name even if it is arranged together on the form.

In the example above. this checkbox is part of a survey asking the customer to check all of their hobbies from a list. The first checkbox is Name Hobby 1, Value Sports. The next checkbox could be named Hobby 2, Value Music.

Moving a Project with Protected Graphics

Part 19 of 20 in series Objects

 
If you want to move your Project file from one disk or computer to another, that you must take special precautions if you are using Protected Graphics.

Since a Protected Graphic’s file is not embedded in the Web Studio Project file, you must be sure to move the files along with your Project file. It is best to keep your Protected Graphic’s files in a folder for each site so that you can simply move the Project file and the Protected Graphic’s folder together.

If you fail to move the graphic files to the new location of the Project file, then Web Studio will notify you when it builds your site. This occurs during a Preview or when you are saving a page or website to the internet or to a disk.

Resampling Graphics after Resizing

Part 18 of 20 in series Objects

When most graphics are resized, they lose some of their visual quality. Resampling the graphic increases the visual quality. However, when you resample a graphic or photo much of the original information is lost. This does not matter when the graphic is going to be used on the internet.

The difference between a graphic that is resampled and one that is not resampled is evident when the page is printed. If you print a Web Studio page that contains resampled graphics, then the printout will display low-quality graphics even though the text looks high-quality. If you do not resample a graphic when you resize it, then the print will be a higher quality.

Therefore, unless you are using the graphics on your page for printing, choose to resample them.

Web Studio automatically resamples graphics when you resize them. You can choose to turn off this function, but then you will need to remember to resample graphics individually after resizing them. Remember that if you repeatedly resize the same graphic, it will lose quality. In that case, it is better to insert a new graphic.

Automatically Resample Graphics
  • Click on Web Studio Button > Options (at the bottom of the list) to open the Web Studio Preferences.
  • Check Resample Graphics when resizing. Uncheck to remove automatically resampling.

resample

Manually Resample Graphics after Resizing

You can resample a graphic in two different ways:

1. Right-click on the graphic and choose Resample from the Selected Object Menu.

2. Double-click on the object and check Resample Graphic in the General section of the Object Properties dialog.

Web Studio Version Info

Current version as of 2/6/2010
Web Studio 5.0 Build 17.
What version do I have?
Download Patch (for build 15 or 16)
Download Complete Install (build 14 or lower)
Complete Revision History

Latest News

  • Build 17
    February 6, 2010 | 2:30 PM
    Part 8 of 8 in series Revision History
    • Fixed crash when uploading or previewing (when not all pages are open).
    • Fixed crash when thumbnail with caption is on a page, and when double-clicking on a menu to edit.
    • Fixed crash when menu object is locked in place, and when double-clicking on it to edit.
    • Fixed formtoemail.php to work correctly on windows servers (godaddy specifically).
    • Fixed http://mail.webstudio.com/php/formtoemail.php to include the email address again (it was removed in build 16).
    • When using any other action, it now removes any webstudio specific hidden fields. NOTE: This means you need to add any required hidden fields yourself. Refer to your script documentation for more info.
    • When updating, the FTP information will not be deleted.
  • RSSArchive for Latest News »

Tips & Tricks

HTML Corner

  • Editing HTML inside a text object
    November 4, 2009 | 2:56 PM

    Web Studio provides a full-featured text engine for editing and styling your copy. But for advanced users with knowledge of HTML, Web Studio allows you to view the HTML source of any text object in your site. To enter the HTML editor, select the text object and either key CTRL-E, or right-click the object and choose Edit HTML Source.

    Read more »

  • RSSArchive for HTML Corner »