Web Studio

Web Studio 5.
0
User Manual
Back to the Beach Software, LLC

1949 N. Marshall, Suite 101
El Cajon, CA 92020
888-779-9229
www.webstudio.com
01.05.10
Written by Linda Mullen

Copyright © 2010
ii
Web Studio 5.0 User Manual
i
Table of Contents
Chapter 1: Introduction ___________________________________ 1

Finding System Requirements and Supported Files ______________________1
Installing Web Studio _____________________________________________1
Download for trial or purchase from our website __________________________________ 1
Install Web Studio from a CD _________________________________________________ 2
Registering Web Studio ____________________________________________2
Register Web Studio ________________________________________________________ 2
Find your Registration Number ________________________________________________ 2
Access My Account on the Web Studio website ___________________________________ 2
Reinstalling Web Studio ___________________________________________2
Uninstall Web Studio ________________________________________________________ 3
Reinstall Web Studio ________________________________________________________ 3
Getting Help with Web Studio ______________________________________4
User Manual _______________________________________________________________ 4
Web Studio TV Video Tutorials _______________________________________________ 4
Written Tutorials ___________________________________________________________ 4
E-mail tips ________________________________________________________________ 4
Online Wiki _______________________________________________________________ 4
Web Studio Forum __________________________________________________________ 5
Articles and useful information ________________________________________________ 5
Tech Support ______________________________________________________________ 5
Finding Web Studio Version Information ______________________________5
Understanding Conventions Used in This Manual _______________________5
Chapter 2: The Web Studio Workspace _______________________ 7
Ribbon _________________________________________________________8
Tabs _____________________________________________________________________ 8
Groups ___________________________________________________________________ 8
Commands ________________________________________________________________ 8
Ribbon resized _____________________________________________________________ 8
ii
Quick Access Toolbar _____________________________________________9

The Web Studio Button ____________________________________________9
Caption Bar _____________________________________________________9
Hide and show the Caption Bar ________________________________________________ 9
Page List ______________________________________________________10
Galleries _______________________________________________________10
Customizing the Workspace _______________________________________11
Show or hide the ribbon _____________________________________________________ 11
Customize the Quick Access Toolbar __________________________________________ 11
Add tools to the Quick Access Toolbar from the Customize Options Menu _____________ 11
Changing the Look of Web Studio __________________________________12
Using Shortcuts _________________________________________________12
Hot keys _________________________________________________________________ 12
Ctrl + keyboard commands __________________________________________________ 12
Using Web Studio TV to view Video Tutorials ________________________14
Open Web Studio TV Video Tutorials __________________________________________ 14
View video tutorials in the Web Studio TV window _______________________________ 15
Chapter 3: Quick Start Tutorial ____________________________ 17

Using Drag and Drop _____________________________________________17
Start a New Project _________________________________________________________ 17
Drag and drop something from a gallery ________________________________________ 17
The Cursor Hot Spot ________________________________________________________ 17
Tutorial _______________________________________________________18
Step 1. Start a New Project and Choose a Background ___________________19
Start a new Project _________________________________________________________ 19
Set up your web page _______________________________________________________ 20
Center your website in the browser ____________________________________________ 20
Choose a background _______________________________________________________ 20
iii
Table of Contents
Save the Project ___________________________________________________________ 21

Step 2. Make the Banner and Basic Page Design _______________________21
Choose a banner ___________________________________________________________ 22
Change the color of the banner _______________________________________________ 22
Make a large rectangle shape to match the banner ________________________________ 22
Make the banner and the large rectangle to be equal width __________________________ 23
Make a vertical design line __________________________________________________ 23
Step 3. Add Banner Text __________________________________________24
About Text objects _________________________________________________________ 24
Use the Text Gallery to make the “All in One Services” text ________________________ 24
Use the New Text Object command to make the “The Office Support Specialists” text ___ 25
Make the telephone number text ______________________________________________ 25
Step 4. Preview the Page __________________________________________25
Step 5. Add a Page, Rename the Pages _______________________________26
Add a duplicate page _______________________________________________________ 26
Rename the pages __________________________________________________________ 26
Rename the Home page using the ribbon Rename command ________________________ 26
Rename the Contact page using the page’s right-click menu ________________________ 27
Step 6. Add Photos to the Home Page ________________________________27
Open the Home page _______________________________________________________ 27
Use a photo from the Photo Gallery ____________________________________________ 27
Insert your own photo from a file _____________________________________________ 27
Step 7. Add Shapes and Text to the Home Page ________________________28
Make a graduated fill rectangle _______________________________________________ 28
Make solid fill rectangles to go behind the photos ________________________________ 30
Make a design line to match rectangles _________________________________________ 30
Finish the text and design on the Home page ____________________________________ 30
Step 8. Add Buttons ______________________________________________31
Put a button on the page _____________________________________________________ 31
iv
Copy the buttons ___________________________________________________________ 32

Align the buttons __________________________________________________________ 32
Put text on the buttons ______________________________________________________ 32
Step 9. Complete the Contact Page __________________________________32
Copy and paste shapes ______________________________________________________ 33
Create the text objects and other design features __________________________________ 33
Step 10. Create an E-mail Link _____________________________________33
Step 11. Link Pages ______________________________________________34
Create button links _________________________________________________________ 34
Create Footer Links ________________________________________________________ 35
Step 12. Preview the Website ______________________________________36
A final word ______________________________________________________________ 36
Chapter 4: Website Basics ________________________________ 37

Linear and non-linear pages __________________________________________________ 37
Home page _______________________________________________________________ 37
Page names _______________________________________________________________ 37
Domain name _____________________________________________________________ 37
Web servers and hosting companies ____________________________________________ 38
Steps to Getting Your Site on the Web _______________________________38
Update or change your website _______________________________________________ 38
Insert the change date on your website __________________________________________ 38
Managing Web Studio Projects and Files _____________________________39
Saving and Naming a Project ______________________________________39
Save your Project (.ows file) _________________________________________________ 40
Save your website to a disk __________________________________________________ 40
Make a backup copy of your Project ___________________________________________ 40
Manually save a backup _____________________________________________________ 40
Manually save a backup at the same time you save the Project _______________________ 40
Automatically save a backup copy of your Project ________________________________ 41
v
Table of Contents
Centering Your Website in the Browser ______________________________42

Web Site Properties Dialog ________________________________________42
General section ____________________________________________________________ 43
Home Page section _________________________________________________________ 44
File Type section __________________________________________________________ 44
Uploading section__________________________________________________________ 45
Uploading Options. ________________________________________________________ 45
Attached Files section ______________________________________________________ 46
Attach files to your website __________________________________________________ 46
Miscellaneous section ______________________________________________________ 47
Web Studio Preferences___________________________________________47
Open the Web Studio Preferences dialog________________________________________ 48
Previewing Your Website Project ___________________________________48
The Web Studio browser ____________________________________________________ 48
The Default browser ________________________________________________________ 49
Set the Preview browser that you want to use ____________________________________ 49
Web toolbar ______________________________________________________________ 50
Preview page _____________________________________________________________ 50
Preview website or links ____________________________________________________ 51
Printing and Print Preview _________________________________________51
Chapter 5: Galleries _____________________________________ 53
Showing and Hiding Galleries ______________________________________53
View the galleries using the Galleries command __________________________________ 53
View the galleries on Auto Hide ______________________________________________ 54
Use the Auto Hide pin to keep the galleries open _________________________________ 54
Make the thumbnails in the gallery small or large _________________________________ 54
Viewing Gallery Contents _________________________________________54
Using Sub-Galleries______________________________________________55
Open and close the sub-galleries ______________________________________________ 55
vi
Add a new sub-gallery ______________________________________________________ 55

Delete an entire sub-gallery __________________________________________________ 55
Using Gallery Content ____________________________________________55
Drag and drop from a gallery _________________________________________________ 55
Reorganizing Gallery Content ______________________________________56
Move a item in the gallery ___________________________________________________ 56
Using the Gallery Menus __________________________________________56
Display the gallery menu ____________________________________________________ 56
Copy an item in a gallery ____________________________________________________ 56
Cut an item from a gallery ___________________________________________________ 56
Paste an item into a gallery ___________________________________________________ 57
Delete an item from a gallery _________________________________________________ 57
Adding Content to Galleries _______________________________________57
Adding Graphic Objects to a Gallery ________________________________57
Use Copy and Paste commands to add graphic objects _____________________________ 57
Drag and drop graphic objects from your web browser _____________________________ 57
Drag and drop graphic objects from the Web Studio desktop ________________________ 58
Drag and drop a group of objects as individual objects _____________________________ 58
Add Graphic Files to a Gallery _____________________________________58
Use the gallery menu to add graphic files _______________________________________ 58
Use drag and drop to add graphic files from a folder _______________________________ 59
Add a Page to the Templates Gallery ________________________________59
Add a page to the Templates Gallery ___________________________________________ 59
Add Links to the Links Gallery _____________________________________59
Add links using the links gallery menu _________________________________________ 59
Add File Links using the links gallery menu _____________________________________ 60
Using your Content in Other Programs _______________________________60
Chapter 6: The Page List _________________________________ 61
Introducing the Page List __________________________________________61
vii
Table of Contents
The Page List window ______________________________________________________ 61

Page List menu ____________________________________________________________ 62
Show and hide the Page List _________________________________________________ 62
Turn the Auto Hide feature on and off __________________________________________ 62
View the Page List when the Auto Hide is on ____________________________________ 62
Use the Auto Hide pin to keep the Page List open or closed _________________________ 63
The Page and Page List menu ________________________________________________ 63
The Page List buttons _______________________________________________________ 64
Page List commands on the ribbon ____________________________________________ 65
Naming Pages __________________________________________________65
Naming the Home Page ___________________________________________66
Index.html and default names ________________________________________________ 66
Change the Home page file name _____________________________________________ 66
Name or rename a page _____________________________________________________ 67
Working with a Master Page _______________________________________68
Choose a Master Page ______________________________________________________ 69
Change the Master Page _____________________________________________________ 69
Stop using a Master Page ____________________________________________________ 70
Working with the Google Site Map __________________________________70
Use the Page List to include or remove pages from the Google Site Map ______________ 70
Use the Include in Google Site Map command to include or remove the page ___________ 71
Assign Google Site Map Priority to pages using the Page List _______________________ 71
Assign Google Site Map Priority to pages using the ribbon command _________________ 71
Choose the Google Change Frequency for the page _______________________________ 72
Change the Page Order in the Page List ______________________________73
Chapter 7: Working with Pages ____________________________ 75
Page Guides ____________________________________________________76
Set the Page Guides ________________________________________________________ 76
Page Margins ___________________________________________________77
viii
Set the size of the Page Margins _______________________________________________ 77

Show/Hide the Page Guides and Margins _______________________________________ 77
Splitting the Workspace to See More than One Page at a Time ____________77
Viewing Pages Side by Side (Vertical Tab Group) ______________________78
Use drag and drop to view pages side by side ____________________________________ 78
Use the right-click menu to view pages side by side _______________________________ 79
Rearrange the vertical tab groups ______________________________________________ 79
Viewing Pages Top and Bottom (Horizontal Tab Group) _________________80
Use drag and drop to view pages top and bottom _________________________________ 80
Use the right-click menu to see pages top and bottom ______________________________ 81
Rearrange horizontal tab groups _______________________________________________ 81
Scrolling to View All of the Tabs in a Group __________________________81
Browsing the Internet in a New Tab Group ___________________________81
Use the Browse command to browse the internet _________________________________ 82
Use the Preview Page command to browse the internet _____________________________ 82
Use the browse tools to navigate the internet _____________________________________ 83
The Page Properties Dialog ________________________________________83
File Type section __________________________________________________________ 84
Size and Download Times section _____________________________________________ 84
Password section __________________________________________________________ 85
HTML Build Section _______________________________________________________ 85
Notes section _____________________________________________________________ 85
Chapter 8: Backgrounds __________________________________ 87

Placing a Background on the Page __________________________________87
Add a graphic background from the gallery ______________________________________ 87
Add a solid colored background with the Background Color command ________________ 88
Colors dialog Standard tab ___________________________________________________ 89
Colors dialog Custom tab ____________________________________________________ 90
Add a graphic background from a file __________________________________________ 90
ix
Table of Contents
Copying and Pasting Backgrounds __________________________________91

Copy and Paste an existing graphic background __________________________________ 91
Copy and Paste a graphic object or text to use as a background ______________________ 91
Changing and Removing Backgrounds _______________________________91
Change the background in one of these ways ____________________________________ 91
Remove the background completely in one of these ways __________________________ 92
Backgrounds and the Page Properties Dialog __________________________92
Chapter 9: Working with Objects ___________________________ 93
Adding Objects to a Page _________________________________________93
Drag an object from a gallery_________________________________________________ 93
Insert an object using the Insert command _______________________________________ 93
Copy and Paste graphics or text from other applications ___________________________ 94
Drag a file from Windows onto the page ________________________________________ 94
Drag and drop a graphic or text from a browser __________________________________ 94
Drag and drop a graphic or text from other applications ____________________________ 94
Selecting Objects ________________________________________________95
Selection handles __________________________________________________________ 95
Select an object by clicking __________________________________________________ 95
Deselect an object _________________________________________________________ 95
Select multiple objects by clicking ____________________________________________ 95
Select multiple objects by dragging ____________________________________________ 96
Select all objects ___________________________________________________________ 96
Deselect all objects _________________________________________________________ 96
Add objects to an existing selection (extend a selection) ___________________________ 96
Remove objects from an existing selection ______________________________________ 96
Moving Objects _________________________________________________96
Move one object with the mouse ______________________________________________ 96
Move multiple objects with the mouse _________________________________________ 97
Move objects to a specific position numerically __________________________________ 97
x
Nudge objects one pixel at a time ______________________________________________ 97

Nudge objects ten pixels at a time _____________________________________________ 98
Constrain movements to horizontal or vertical ___________________________________ 98
Push objects down the page __________________________________________________ 98
Pull objects up the page _____________________________________________________ 98
Move objects to another page using Copy and Paste. ______________________________ 99
Move objects to another page using drag and drop ________________________________ 99
Split the screen to drag and drop objects from one page to another page _______________ 99
Editing an Object’s Contents ______________________________________100
Aligning Objects _______________________________________________100
Align tops, bottoms, left sides, and right sides ___________________________________ 100
Using the Grid to Align Objects ___________________________________100
Turn the grid on and off ____________________________________________________ 101
Change the grid size _______________________________________________________ 101
Centering Objects ______________________________________________102
Center objects relative to each other __________________________________________ 102
Center objects relative to the page ____________________________________________ 102
Stacking Objects _______________________________________________103
Move an object to the top or bottom of the stack _________________________________ 103
Move an object up or down through the stack ___________________________________ 103
Spacing Objects ________________________________________________103
Space objects vertically or horizontally ________________________________________ 103
Space with 1 pixel between objects ___________________________________________ 104
Space objects with edges touching ____________________________________________ 104
Resizing Objects _______________________________________________104
Objects that cannot be resized _______________________________________________ 104
Resize by dragging ________________________________________________________ 105
Resize an object numerically ________________________________________________ 105
Resize to an exact size _____________________________________________________ 105
xi
Table of Contents
Resizing Objects to Each Other ____________________________________105

Resize multiple objects to the same size _______________________________________ 105
Resampling Graphics after Resizing ________________________________106
Turn automatic resampling on and off _________________________________________ 106
Resample a graphic after resizing ____________________________________________ 106
Cropping Objects _______________________________________________107
Objects that cannot be cropped ______________________________________________ 107
Crop the top, bottom, and sides ______________________________________________ 107
Crop in two directions at the same time ________________________________________ 107
Duplicating Objects _____________________________________________108
Duplicate using Click and Drag ______________________________________________ 108
Duplicate using Copy and Paste ______________________________________________ 108
Duplicate using Copy and Paste in Place _______________________________________ 108
Grouping Objects _______________________________________________109
Group and ungroup objects _________________________________________________ 109
Merge and unmerge objects _________________________________________________ 109
Rotating Objects _______________________________________________110
Rotate, flip or reverse one object _____________________________________________ 110
Rotate, flip, or reverse multiple objects ________________________________________ 110
Highlighting Objects ____________________________________________110
Turn the Highlight commands on and off ______________________________________ 111
Working with Protected Graphics __________________________________111
Insert a Protected Graphic __________________________________________________ 112
Convert a normal graphic to a Protected Graphic ________________________________ 112
Save Protected Graphics ___________________________________________________ 112
Lost Protected Graphics ____________________________________________________ 112
Flash files and Protected Graphics ____________________________________________ 112
Allowable operations with Protected Graphics __________________________________ 113
Convert Protected Graphics to normal graphics _________________________________ 113
xii
Convert a series of Protected Graphics to normal graphics _________________________ 113

Convert all of the Protected Graphics on a page to normal graphics __________________ 113
Moving a Project that Contains Protected Graphics ____________________114
Working with the Object Properties Dialog __________________________114
General section ___________________________________________________________ 114
Link section _____________________________________________________________ 115
Graphic section ___________________________________________________________ 116
Notes section ____________________________________________________________ 117
Quick Tips for Working with Objects _______________________________118
Chapter 10: Text _______________________________________ 119
Using the Text Gallery and Font Command __________________________119
The Font command ________________________________________________________ 119
The Text Gallery__________________________________________________________ 120
Choosing Fonts ________________________________________________120
Web Safe Fonts ________________________________________________121
The Text Gallery uses color to separate the safe and unsafe fonts. ___________________ 121
Turn unsafe fonts into graphics ______________________________________________ 121
Working with Text Objects _______________________________________122
Resize a text object ________________________________________________________ 122
Adding a Text Object to a Page ____________________________________122
Add a new text object using the New Text Object command _______________________ 122
Add a new text object using the Text Gallery ___________________________________ 122
Add a new text object using alt + click ________________________________________ 123
Automatically Creating a Text Object by Inserting Text ________________123
Insert text from a file ______________________________________________________ 123
Copy and Paste text to add a text object _______________________________________ 123
Drag and drop a text file to add a text object ____________________________________ 123
Drag and drop text from another program to add a text object ______________________ 123
Limitations Importing Text _______________________________________124
xiii
Table of Contents
Selecting Text and Activating Text Objects for Editing _________________124

Activate a text object for editing _____________________________________________ 124
Change the background color of text objects when you are editing __________________ 125
Choose a background editing color for all text objects ____________________________ 125
Change the background editing color in a text object _____________________________ 126
Select text _______________________________________________________________ 126
Extend a text selection _____________________________________________________ 126
Adding and Editing Text _________________________________________126
Add text to an existing text object ____________________________________________ 126
Copy, cut, or delete text ____________________________________________________ 127
Paste text _______________________________________________________________ 127
Insert special symbols or characters ___________________________________________ 127
Formatting Text ________________________________________________127
Change the font in the whole text object _______________________________________ 127
Change the font in multiple text objects _______________________________________ 128
Change the font in selected text within a text object ______________________________ 128
Change the background color of a text object ___________________________________ 128
Give the text object a transparent background ___________________________________ 129
Aligning Text Within a Text Object ________________________________129
Justify text ______________________________________________________________ 129
Indent the first line of a paragraph ____________________________________________ 130
Indent the whole paragraph _________________________________________________ 130
Remove an indent _________________________________________________________ 130
Creating Headings ______________________________________________130
Add a heading to a paragraph________________________________________________ 130
Finding and Replacing Text ______________________________________131
Find text ________________________________________________________________ 131
Replace text _____________________________________________________________ 131
Checking the Spelling ___________________________________________132
xiv
Check spelling ___________________________________________________________ 132

Change, correct, or ignore a word ____________________________________________ 132
Fix duplicate words _______________________________________________________ 133
Add a word to the Dictionary ________________________________________________ 133
Working with the HTML in Text Objects ____________________________133
To create a text object from an HTML file _____________________________________ 133
Insert and edit your own HTML into a text object ________________________________ 133
Chapter 11: Working with Photos _________________________ 135

Resizing Photos and Graphics when Inserting Them on a Page ___________135
What are pixels? __________________________________________________________ 135
Resize Graphic dialog ______________________________________________________ 136
Putting Photos on a Page _________________________________________136
Use a photo from the gallery ________________________________________________ 136
Add your own photos to the Photos Gallery ____________________________________ 137
Insert photos from a file ____________________________________________________ 137
Add photos from digital cameras _____________________________________________ 137
Working with Photos ____________________________________________138
Crop the top, bottom and sides _______________________________________________ 138
Resize a photo using selection handles ________________________________________ 138
Resize a photo numerically _________________________________________________ 139
Changing and Enhancing Photos ___________________________________139
Use the Photo Correction Wizard _____________________________________________ 139
Use the other Special Effects commands _______________________________________ 140
Change the opacity of photos and graphics _____________________________________ 141
Apply textures and edges to photos and graphics ________________________________ 141
Using Photos to Make Rollover Buttons _____________________________141
Creating Thumbnails ____________________________________________142
Create a thumbnail ________________________________________________________ 142
Resize a thumbnail ________________________________________________________ 143
xv
Table of Contents
Copy Protecting Photos __________________________________________143

Turn Copy Protect off and on________________________________________________ 144
Using Photos to Make Rollover Buttons _____________________________144
Chapter 12: Color and Shapes ____________________________ 145
Working with Color _____________________________________________145
Using the Colors Dialog _________________________________________145
Choose basic colors in the first window _______________________________________ 146
Choose standard or custom colors from Eyedropper & More _______________________ 147
Colors dialog Custom tab ___________________________________________________ 148
Using the Change Color Command _________________________________149
Using the Transparent Color commands _____________________________150
Graphics and transparency __________________________________________________ 150
Make a color transparent ___________________________________________________ 151
Using the Shapes Tools __________________________________________151
Creating Solid Fill Shapes ________________________________________152
Create a solid fill rectangle, rounded rectangle, circle, or ellipse shape _______________ 152
Choose the color of a solid fill shape __________________________________________ 153
Creating Graduated Fill Shapes ____________________________________153
Create a graduated fill shape ________________________________________________ 153
Choose the graduated fill colors______________________________________________ 154
Use the Graduated Fill Studio _______________________________________________ 155
Placing Borders Around Shapes ___________________________________156
Choose a border style and width _____________________________________________ 156
Choose a border color _____________________________________________________ 157
Remove a border from a shape_______________________________________________ 157
Create a border with transparent fill___________________________________________ 157
Drawing Lines _________________________________________________158
Create a line _____________________________________________________________ 158
Create a graduated fill line __________________________________________________ 158
xvi
Setting the Opacity _____________________________________________158

Editing Shapes _________________________________________________159
Change the radius of the rounded rectangle _____________________________________ 159
Chapter 13: Buttons ____________________________________ 161
Buttons and Links ______________________________________________161
Types of Buttons _______________________________________________161
Normal Buttons __________________________________________________________ 161
Rollover Buttons __________________________________________________________ 161
Graphic Rollover Buttons ___________________________________________________ 161
Using a Button from the Buttons Gallery ____________________________162
Add a button to the Buttons Gallery ___________________________________________ 162
Use the Buttons Gallery to make a button with normal or rollover options_____________ 163
Make a normal button without any rollover options ______________________________ 164
Preview the button ________________________________________________________ 165
Make changes to a button ___________________________________________________ 165
Creating a Graphic Rollover Button ________________________________166
Place and resize three graphics _______________________________________________ 166
Create the rollover button ___________________________________________________ 166
Preview the rollover button _________________________________________________ 167
Editing Buttons ________________________________________________168
Adding Links to Buttons _________________________________________168
Add a link to a button from the Links Gallery ___________________________________ 168
Add a link to a button from the Page List ______________________________________ 168
Add a link to a URL using a dialog ___________________________________________ 169
Chapter 14: Links ______________________________________ 171

Types of Links _________________________________________________171
Anatomy of a Link ______________________________________________172
Working with the Links Gallery ___________________________________172
xvii
Table of Contents
Adding New Links to the Links Gallery _____________________________173

Add a link to My Links ____________________________________________________ 173
Add e-mail links to My Links _______________________________________________ 174
Add FTP links ___________________________________________________________ 175
Add file links ____________________________________________________________ 176
Add new link categories ____________________________________________________ 176
Delete link categories ______________________________________________________ 177
Edit links in the Links Gallery _______________________________________________ 177
Adding Links to Buttons and other Objects __________________________177
Find the Cursor’s Hot Spot _________________________________________________ 177
Link a page from the Page List ______________________________________________ 178
Add a link from the Links Gallery ____________________________________________ 178
Add a link to an object from the Selected Object Menu ___________________________ 178
Using the Link Commands to Add Links ____________________________179
Add a link to a file ________________________________________________________ 180
Create an e-mail link ______________________________________________________ 181
Link to a page ____________________________________________________________ 182
Add other links ___________________________________________________________ 182
Adding Links to Text____________________________________________183
Add a link to an entire text object ____________________________________________ 183
Add a link to a word _______________________________________________________ 183
Add a link to a selection of text ______________________________________________ 183
Working with Text Link Colors and Styles ___________________________184
Change the link colors on a page _____________________________________________ 184
Add or remove the underline on text links ______________________________________ 185
Apply underlines and link colors to the whole website ____________________________ 186
Opening Links in a New Browser Window ___________________________186
Removing or Editing Links on Objects or Text _______________________187
Edit or replace links _______________________________________________________ 187
xviii
Drag and drop a link from the Links Gallery to replace an existing link _______________ 187
Remove links using the right-click menu _______________________________________ 188
Remove links using the Remove Link command _________________________________ 188
Adding Footer Links ____________________________________________188
Add or remove pages from the Footer Links ____________________________________ 188
Use the Page List to add or remove a page in Footer Links _________________________ 189
Use the Include Footer Links command to add or remove a page ____________________ 189
Put Footer Links on a page __________________________________________________ 190
Change the page order for the Footer Links _____________________________________ 190
Change the page order using the right-click menu ________________________________ 190
Change the page order using keyboard shortcuts _________________________________ 190
Using Anchors _________________________________________________191
Designate an object to be an anchor ___________________________________________ 191
Linking to an Anchored Object ____________________________________192
Use the Properties dialog to link to an anchor ___________________________________ 192
Remove an anchor link _____________________________________________________ 192
Previewing Links _______________________________________________193
Highlighting Objects With Links __________________________________194
Highlight objects with links _________________________________________________ 194
Turn off the highlight on links _______________________________________________ 194
Inserting a Google Map __________________________________________194
Insert a Google Map on a page _______________________________________________ 194
Link to a Google Map ______________________________________________________ 196
Chapter 15: Multi Media ________________________________ 197

Inserting Flash Animations _______________________________________197
Insert a Flash animation from a file ___________________________________________ 197
Play a Flash animation on the page ___________________________________________ 198
Using the Flash Object Properties Dialog ____________________________198
Open the Flash Properties dialog _____________________________________________ 199
xix
Table of Contents
General section ___________________________________________________________ 199

Notes section ____________________________________________________________ 200
Flash section _____________________________________________________________ 200
Resizing Flash Animations _______________________________________201
Inserting Videos Through Links ___________________________________201
Insert a video as an embedded object from a file _________________________________ 201
Link a video to an object using the Insert Sound command ________________________ 202
Link a video to an object by dragging a Windows file ____________________________ 202
Drag to insert a video file from Windows and create a linked text object ______________ 203
Link a video to an existing text object using the Video command ___________________ 203
Link a video to an existing text object from Windows file _________________________ 203
Setting Video Properties _________________________________________204
Set the properties of an embedded video with visible controls ______________________ 204
Inserting a You Tube Video ______________________________________204
Insert a You Tube Video ___________________________________________________ 204
Inserting Sound Using Links ______________________________________205
Add embedded background sound from the Sound command ______________________ 205
Link sounds to objects using the Sound command _______________________________ 206
Drag to insert a sound file from Windows and create a linked text object _____________ 206
Link a sound to an existing text object using the Insert Sound command ______________ 207
Link a sound to an existing text object from a Windows file _______________________ 207
Setting Sound Properties _________________________________________208
Set the properties of a background sound ______________________________________ 208
Set the properties of an embedded sound with visible controls ______________________ 208
Chapter 16: Slide Shows ________________________________ 209

Creating a Web Studio Flash Slide Show ____________________________209
Create the Web Studio Flash slide show _______________________________________ 210
Edit the Web Studio Flash slide show _________________________________________ 210
Creating a SmugMug Slide Show __________________________________211
xx
Creating a Flickr Slide Show ______________________________________212

Insert a Flickr Slide Show __________________________________________________ 213
Insert a Flickr badge _______________________________________________________ 215
Creating a Picasa Slide Show _____________________________________216
Chapter 17: Animations and Text FX _______________________ 217
Creating Animations ____________________________________________217
Prepare objects for animation ________________________________________________ 217
Make an animated GIF _____________________________________________________ 218
Insert animations from a file _________________________________________________ 219
Editing Animations _____________________________________________219
Change the images in the animation ___________________________________________ 219
Change animation delay ____________________________________________________ 219
Creating Text FX _______________________________________________220
Chapter 18: Templates __________________________________ 221
Opening Templates _____________________________________________221
Use a template from the Template Gallery ______________________________________ 221
Open a saved template _____________________________________________________ 221
Working with a Template ________________________________________221
Saving Pages as Templates _______________________________________222
Add a page to the Templates Gallery __________________________________________ 222
Save a page as a template file ________________________________________________ 222
Save a template from WebStudio.com _________________________________________ 223
Purchase templates from WebStudio.com ______________________________________ 223
Changing the Template Color _____________________________________223
Notes about changing the template color _______________________________________ 224
Chapter 19: Shopping Carts ______________________________ 225

Creating a WS Shopping Cart Without an E-Commerce Site _____________225
Step for creating a PayPal shopping cart _______________________________________ 225
xxi
Table of Contents
Creating a PayPal Account _______________________________________226

Sign up for a Business Account ______________________________________________ 226
Verify your information ____________________________________________________ 227
Implement your Preferred Payment Solution ____________________________________ 227
Creating a PayPal Catalog on Your Website _________________________227
Select a button ___________________________________________________________ 227
Enter Product Information __________________________________________________ 228
Enter PayPal Properties ____________________________________________________ 228
Check the PayPal button on your site _________________________________________ 229
Adding Shipping Costs to Your PayPal Cart _________________________229
Creating an e-store with iHostStudio________________________________230
Visit iHostStudio to learn more about the e-store ________________________________ 230
Link to Web Studio _______________________________________________________ 230
Using Other Shopping Carts ______________________________________231
Add a link to your shopping cart _____________________________________________ 231
Chapter 20: Web Studio Menu Maker ______________________ 233

Menu Components______________________________________________233
Use these objects to create menus: ____________________________________________ 234
Creating a Menu _______________________________________________234
Prepare the objects for the menu _____________________________________________ 235
Make the menu ___________________________________________________________ 236
Fill in the Menu Maker Studio _______________________________________________ 237
Create Menu Items ________________________________________________________ 238
Create sub menus _________________________________________________________ 238
Edit Menu Items __________________________________________________________ 238
Add, remove, or rearrange pages in the menu ___________________________________ 238
View and design the menu in the Designing Menu tab ____________________________ 239
Using the Object Properties Dialog _________________________________240
General section ___________________________________________________________ 240
xxii
Notes section ____________________________________________________________ 240

Tips for Using Menus ___________________________________________240
Use the Master Page _______________________________________________________ 240
When you do not have a Master Page _________________________________________ 240
Hidden or disappearing Menu Items __________________________________________ 241
Make the menu to match the background _______________________________________ 241
Make a Main Menu with narrow Menu Items ___________________________________ 242
Add an icon or image to a Main Menu or Menu Item _____________________________ 242
Chapter 21: Forms Factory _______________________________ 243

Designing for the User ___________________________________________243
Steps for Using the Forms Factory _________________________________244
Form Fields ___________________________________________________244
Using Forms from the Forms Gallery _______________________________246
Use a form from the Forms Gallery ___________________________________________ 246
Notes about using forms from the gallery ______________________________________ 246
Adding a Text Field _____________________________________________247
Add a text field to the page __________________________________________________ 247
Choose options in the Form Object section for the text field ________________________ 248
Choose options in the Text Input section for the text field _________________________ 249
Edit the text field options ___________________________________________________ 250
Adding a Text Box _____________________________________________250
Add a text box to the page __________________________________________________ 250
Choose options in the Form Object section for the text box ________________________ 251
Choose options in the Text Box section for the text box ___________________________ 252
Edit the text box options ____________________________________________________ 253
Adding a Password Box _________________________________________253
Add a password box to the page ______________________________________________ 253
Choose options in the Form Object section for the text box ________________________ 254
Choose options in the Text Input section for the password box ______________________ 255
xxiii
Table of Contents
Edit the text field options ___________________________________________________ 256

About Checkboxes and Radio Buttons ______________________________256
Adding Checkboxes _____________________________________________257
Add a checkbox __________________________________________________________ 257
Choose options in the Form Object section for the checkbox _______________________ 257
Choose options in the Check Box Section ______________________________________ 258
Adding Radio Buttons ___________________________________________260
Add a radio button ________________________________________________________ 260
Choose options in the Form Object section for the radio button _____________________ 260
Choose options in the Radio Button Section ____________________________________ 261
Group the radio buttons ____________________________________________________ 262
Adding Buttons ________________________________________________263
Add a button _____________________________________________________________ 263
Choose options in the Form Button section for the button _________________________ 264
Choose options in the Button section for the button ______________________________ 265
Adding a File Upload ___________________________________________265
Add a File Upload field ____________________________________________________ 266
Choose options in the Form Object section for the file upload ______________________ 266
Choose options in the File Upload section for the File Upload ______________________ 266
Adding Menus and Lists _________________________________________267
Add a Menu or List _______________________________________________________ 268
Edit Menus and Lists ______________________________________________________ 269
Choose options for the Menu and List fields ____________________________________ 269
Form Object Section ______________________________________________________ 269
Menu List Section ________________________________________________________ 270
Adding Hidden Fields ___________________________________________271
Add a hidden field ________________________________________________________ 271
Assigning the Tab Order _________________________________________272
Assign the tab order _______________________________________________________ 272
xxiv
Check the tab order ________________________________________________________ 272

Grouping a Form _______________________________________________273
Group the form ___________________________________________________________ 273
Choose the group properties _________________________________________________ 273
Checking the Form _____________________________________________275
Trial Host the page to check the form function __________________________________ 276
Tips about Using the Forms Factory ________________________________277
5. Copying Forms _________________________________________________________ 278
Chapter 22: Working with HTML _________________________ 281

Understanding Web Studio’s Object-Oriented Approach ________________281
Modifying Web Studio’s HTML ___________________________________282
Putting HTML on a Page _________________________________________282
Putting HTML in a Certain Place __________________________________283
Using the HTML Editor _________________________________________284
Add Menu _______________________________________________________________ 284
Font Menu. Choose a font. __________________________________________________ 285
Import command _________________________________________________________ 285
Adding HTML to a Page _________________________________________285
Add HTML to a page using ribbon commands __________________________________ 285
Add HTML to a page from a file _____________________________________________ 286
Adding HTML to an Object ______________________________________286
Add HTML to an object ____________________________________________________ 286
Adding HTML with the HTML Editor ______________________________286
The HTML object _________________________________________________________ 286
Editing HTML _________________________________________________287
Edit HTML using the HTML Editor __________________________________________ 287
Edit HTML using the Properties dialog ________________________________________ 288
Build pages without HTML tags _____________________________________________ 289
xxv
Table of Contents
Setting page file types _____________________________________________________ 289

Using the Site-Wide and Page Meta Tags Groups _____________________289
Insert Site-Wide Meta Tags _________________________________________________ 290
Insert Page Meta Tags _____________________________________________________ 290
Working with HTML in Text Objects _______________________________291
Inserting and editing your own HTML into a text object __________________________ 291
Add tables to a page _______________________________________________________ 291
Chapter 23: Uploading Your Website to the Internet___________ 293

Before you upload ________________________________________________________ 293
Trial Hosting __________________________________________________293
To Trial Host your website _________________________________________________ 293
Integrated Hosting with iHostStudio ________________________________295
Open a new iHostStudio hosting account ______________________________________ 295
Make changes to your iHostStudio account _____________________________________ 296
Close your iHostStudio account ______________________________________________ 296
Information You Need for Uploading _______________________________296
Using the Uploading Publishers ___________________________________297
Indicate your hosting company ______________________________________________ 297
Uploading with iHostStudio ______________________________________297
Upload your website to iHostStudio: __________________________________________ 298
Uploading with Hosting Companies other than iHostStudio _____________300
WS 5.0 Uploading to a Host other than iHostStudio ____________________301
Select WS 5.0 Uploading ___________________________________________________ 301
Upload to the internet with the WS 5.0 Uploading Publisher _______________________ 302
Manage folders and files with WS 5.0 Uploading ________________________________ 304
Uploading for Hosts other than iHostStudio: WS 4.0 Uploading __________305
Select WS 4.0 Uploading ___________________________________________________ 305
Upload to the internet with the WS 4.0 Uploading Publisher _______________________ 305
Identification ____________________________________________________________ 306
xxvi
FTP address _____________________________________________________________ 306

Remote site folder _________________________________________________________ 306
Home page ______________________________________________________________ 306
Get help using the WS 4.0 Uploading Publisher _________________________________ 307
Saving Your Website to the Hard Drive _____________________________307
Chapter 24: Desktop Studio ______________________________ 309
Creating HTML e-mails _________________________________________309
Restrictions with HTML e-mails _____________________________________________ 309
Save a page as an HTML e-mail _____________________________________________ 310
Upload the page to your website _____________________________________________ 312
Create the HTML e-mail ___________________________________________________ 313
Creating Desktop Publishing Materials ______________________________313
Set the page size __________________________________________________________ 313
Print from the workspace ___________________________________________________ 314
Save the page as a graphic __________________________________________________ 314
Create business cards ______________________________________________________ 315
Creating a Slide Show Presentation_________________________________315
Create a slide show to give a presentation ______________________________________ 315
Website Preview __________________________________________________________ 316
Appendix A: System Requirements ________________________ 317
Minimum System Requirements _____________________________________________ 317
Recommended System Requirements _________________________________________ 317
Mac Users _______________________________________________________________ 317
Appendix B: Supported Files _____________________________ 318

HTML Type Generated ____________________________________________________ 318
Files Downloaded from Websites ____________________________________________ 318
HTML and Scripting Files Imported and Exported _______________________________ 318
Video Files Imported ______________________________________________________ 318
Sound & Music Files Imported ______________________________________________ 318
xxvii
Table of Contents
Graphics Files Imported ____________________________________________________ 319

Text Files Imported _______________________________________________________ 319
Appendix C: Ribbon Commands __________________________ 320

Appendix D: Keyboard Commands ________________________ 327
General _________________________________________________________________ 327
Edit ____________________________________________________________________ 327
Graphics ________________________________________________________________ 327
Website _________________________________________________________________ 327
Text ___________________________________________________________________ 328
Objects _________________________________________________________________ 328
Appendix E: Hot Keys __________________________________ 329

xxviii
1
Chapter 1: Introduction
Welcome to Web Studio 5.0! As you become acquainted with this program, you will be impressed
with how easy it is to create professional-looking websites in a fraction of the time it takes to use
more complicated HTML software.
Finding System Requirements and Supported Files

Appendix A. This Appendix provides you with a list of the Minimum System Requirements
and the Recommended System Requirements that you need to install Web Studio.
Appendix B. This Appendix contains a list of the files supported by Web Studio including
HTML, scripting files, video, sound, text, and graphics files.
Installing Web Studio

If you downloaded the 30 Day Free Trial, you already have the program on your computer. You
simply need to choose the Buy Now/Purchase option when you open the program. After you
purchase Web Studio, you will be prompted to register the program.
Download for trial or purchase from our website

 Close all other programs on your computer to
prevent any interference with the install process.
 Disable or turn off any anti-virus programs. License Agreement
 Go to webstudio.com and purchase the appropriate The Web Studio license
product. allows one person to register
 This will lead you to the Download page for the the program on up to two
software. computers.
 Follow the directions on that page to download the
software to your machine.
 Choose Save or Run. If you want to save the installer
to your computer, choose Save.
 Follow the prompts.
After purchasing Web Studio, you can always download the program from
our website by logging into My Account and clicking on Order History. Click
on the Download link to install Web Studio. If you are reinstalling on the
same computer, we recommend you uninstall and then reinstall.
2
Install Web Studio from a CD

 Close all other programs on your computer to prevent any interference with the install
process.
 Disable or turn off any anti-virus programs.
 Insert the program CD into your CD drive.
 Choose Install and follow the prompts.
Registering Web Studio
Register Web Studio

 Open Web Studio and see the Registration dialog box.
 Follow the prompts to Register the program.
Find your Registration Number

You can find your Registration Number in one of three ways:
1. In the receipt that you printed when you purchased Web Studio.
2. In the e-mail we sent you when you purchased Web Studio.
3. From our website in My Account.
Access My Account on the Web Studio website

 Go to webstudio.com.
 Click on My Account.
 Log in with your e-mail and password and then click the ID Log In button. This takes you to
your My Account page.
Reinstalling Web Studio

If you are updating Web Studio from a previous version, you can simply install Web Studio
without uninstalling the previous version.
If the program is crashing, try re-installing and choose Repair. If that does not work, uninstall the
program and then reinstall it.
3
Uninstall Web Studio

Using Vista:
 Go to the Start Menu
 Click Control Panel>Programs>Programs and Features.
 Select a program and then click Uninstall.
 If it asks if you really want to remove all file(s), click Yes.
Using other Windows programs:
 Go to the Start Menu.
 Choose Control Panels.
 Choose Add/Remove Programs.
 Scroll towards the bottom of the Add/Remove dialog.
 Click on Web Studio 5.0 (or other version if applicable)
 Click on Remove.
 If it asks if you really want to remove all file(s), click Yes.
 Close the Add/Remove dialog.
Reinstall Web Studio

 Go to webstudio.com.
 Click on My Account.
 Log in with your e-mail and password and then click the ID Log In button. This takes you to
your My Account page.
 Click on Order History at the top of your page.
 Click on the Download link.
 Choose Save or Run. Choose Save if you want to save the installer to your computer.
 Follow the prompts to download the program
We recommend that you save the download installer to a safe location on

your hard drive in case you need to uninstall/reinstall again. After you save it,
click the Open Folder button when the download finishes, and then double-
click on the downloaded file to install Web Studio. If you choose Run, the
download will start automatically.
4
Getting Help with Web Studio
User Manual
The complete User Manual is in the Help group of the Home tab. Click on User Manual
(Documentation) to open a PDF of the manual.
Web Studio TV Video Tutorials

Web Studio has video tutorials for all of the major commands and functions in the program. The
videos are viewed in the Web Studio TV screen that opens in the workspace. Click the Video
Tutorial Launcher in the bottom right corner of a group to see tutorials about the commands in
the group. You can also click on the Web Studio TV link in the Help group to view all of the
tutorials. See Using Web Studio TV in the Workspace chapter for more information.
Written Tutorials
User Manual. See the Quick Start Tutorial chapter for a step-by-step written tutorial that
walks you through building and linking two web pages.
Wiki. Visit the Wiki and use tutorial as the search word to find a step-by-step tutorial online.
Click on the Web Studio Wiki link in the Help group of the Home tab.
E-mail tips
These tips are sent automatically when you purchase the program. You can find a copy of all of
the tips by searching e-mail tips in the Wiki.
Online Wiki
Our online Wiki is one of your most valuable resources. It allows you to search for topics and
get answers to thousands of questions. In addition to covering all of the program basics, the
Wiki contains information about many related topics, such as good web design, where to find
free graphics and tips on getting the most out of Web Studio. Click on Home > Help > Web
Studio Wiki.
5
Web Studio Forum

Register with the Web Studio Forum to find answers to your questions, get feedback on your
website and get help with third party software. You can create a user name and password, but
Registration is free. Guest posting is allowed on the forum without Registration. Visit the forum
at webstudioforum.com. If you need help navigating the forum, go to the Wiki and key in Web
Studio Forum in the search box.
Articles and useful information

Our website has several resources and articles that you will want to access. Visit
webstudio.com.
Tech Support
Visit our website at webstudio.com for information about tech support.
Finding Web Studio Version Information

Version information is available in the About Web Studio link in the Help group. Click on Home >
Help > About Web Studio.
Understanding Conventions Used in This Manual

Words in italic type refer to user interface elements in Web Studio. Commands, text in dialog
boxes, etc., are in italic type.
Ribbon commands are shown in italic type separated by a greater-than character, “>.” For
example, Insert >Illustrations > Insert Picture means you should go to the Insert tab find the
Illustrations group and click the Picture command.
The manual covers all that you need to know for using Web Studio. However, it is impractical to
include everything you can do with our program. If you combine the manual with the other
available resources, you will get answers and instructions for everything that you need to know.
6
7
Chapter 2: The Web Studio Workspace

The Web Studio workspace is designed to help you find everything that you need quickly and
easily. A ribbon runs along the top of the program window that replaces the Menus and Toolbars
that were used in earlier versions. Each tab in the ribbon contains commands and program features
that are arranged in work groups.
A Quick Access Toolbar along the top of the ribbon allows you to put frequently used commands
along the top of the ribbon. This allows you to customize your workspace.
8
Ribbon
Most of the functions are located in the ribbons across the top of the workspace. There are three
parts to the ribbon: tabs, groups, and commands.
Tabs
There are ten basic tabs across the top. Each one represents an activity area: Home, Insert,
Create, Draw, Text, Forms, Page, Page Layout, View, and Html.
Groups
Each tab has commands that are arranged in groups. This makes it easy to find all of the
functions in the ribbon. Notice that the command icons in a group are hidden when you reduce
the size of the workspace. To see the commands, click on the arrow below the group name.
Commands
A command is a button, box, or drop down
menu that allows you to perform a task
within the group. The commands are
organized by how they are used. Appendix C
has a list of all of the ribbon command.
Ribbon resized
When the Web Studio window is collapsed,
the ribbon automatically collapses in a way
that provides you with access to all of the
command in each group. Click on the group
arrow to see the command in the group.
9
Quick Access Toolbar

This is the toolbar at the top of the workspace that contains a set of commands that are
independent of any tab. It contains tasks that you use over and over. You can personalize it to add
your favorite commands. See Customizing the Workspace later in this chapter.
The Web Studio Button

At the top, left corner of the workspace is a round WS logo. This button is located in the upper-left
corner of the window and opens the menu shown here.
Caption Bar
This area below the ribbon displays information and tips about the task that you are performing.
For instance, if you are working with a shape, the Caption Bar may display “Mouse is over
graphic object. Click to select it. Double-click to edit its properties. Right-click for menu.”
Hide and show the Caption Bar

Click on View > Show/Hide > Caption Bar to hide or show the Caption bar.
10
Page List
The Page List helps you manage your site. Each page in the list matches a page on the workspace.
It provides you with easy access to any page so that you can see it or edit it. In addition, it
performs many behind the scenes tasks for you such as automatically managing all of the files that
make up your site. See The Page List chapter to learn about the Page List.
Galleries
The galleries at the left of the workspace put Web Studio content at your fingertips. There are
Backgrounds, Templates, Buttons, Links, and other galleries that can be used when you are
building a website. You can add more content from our website or add content of your own. See
the Galleries chapter to learn about working with galleries.
11
Customizing the Workspace

Show or hide the ribbon
You may want to temporarily hide the ribbon to increase your workspace.
 Double-click on a tab to make the groups disappear.
 Double-click on a tab to bring back the groups.
Customize the Quick Access Toolbar

You can place your favorite command at the top of your workspace in the Quick Access
Toolbar.
 To add a command, right-click

over an icon in the ribbon and
choose Add to Quick Access
Toolbar. The command has
been added.
 To remove a command, right-
click over an icon on the Quick
Access Toolbar and choose
Remove from Quick Access
Toolbar.
Add tools to the Quick Access Toolbar from the Customize Options Menu
 Click on the drop down arrow on the Quick Access Toolbar.
 Choose More Commands. This opens the dialog to add and remove command.
 Choose a tab from the Choose Commands from list and select it.
 Select the command from the command list.
 Click Add to add it to the list.
 If you want to remove a command, select the command on the list and click Remove.
 When you are finished, click OK.
 The toolbar is updated with the added and removed icons.
Move the Quick Access toolbar to below the ribbon

 Click on the drop down arrow.
 Click on Show below the Ribbon.
 To move it back, click on the drop down arrow and choose Show above the Ribbon.
12
Changing the Look of Web Studio

You can change the overall look and color of the Web Studio workspace by clicking on the Theme
arrow in the upper right corner of the workspace. Choose from Obsidian Black, Silver, Aqua, or
Blue.
Using Shortcuts
Web Studio uses hot keys, ctrl+ keys, and keyboard commands as shortcuts to perform functions.
Hot keys
A hot key is a keyboard key that will execute a command when it is pressed. Web Studio hot
keys are activated when you are performing certain functions. For instance, when you select an
object, you can push the object down the page by pressing the P key. In this case, the letter P
on the keyboard becomes a hot key. Instructions in the manual tell you when a hot key is
available. Also, see Appendix E for a list of hot keys.
Ctrl + keyboard commands

You can use the common “ctrl +” commands and
keyboard commands that you always used in Web Keyboard commands and hot
Studio, such as ctrl+c for copy or ctrl+s for save. See keys are not case sensitive.
Appendix D for a list of common keyboard commands.
Create customized keyboard commands

You can create your own keyboard commands by clicking on the Customize button at the
bottom of the Quick Access Toolbar’s Customize dialog. You cannot use a command that is
already a standard keyboard short cut. For instance, ctrl+z is always the undo command and you
cannot change that. But you can choose other keyboard shortcuts of your own. You do not need
to know what the common commands are because Web Studio will not allow you to duplicate
commands.
13
 Click on the arrow at the far right end of the Quick Access Toolbar to see a menu.
 Click on More Commands near the bottom of the menu. This opens the Customize dialog.
 Click on Customize at the bottom of the dialog. This opens the Customize Keyboard dialog.
 Click to choose a Category. This causes the Commands window to display the commands in
that Category.
 Click to select the command for which you want to create a shortcut.
 Fill in the key you want to use for your new shortcut.
 Click to Assign the key to the command that is selected.
 Use the new shortcut with “ctrl+.” In the above example, ctrl+g is a shortcut for the Group
Form command.
14
Using Web Studio TV to view Video Tutorials

The video tutorials in Web Studio TV are a terrific way to learn about the features and functions of
Web Studio. These audio-visual tutorials take you step-by-step through the commands that you
will use to create and upload your website.
Web Studio TV opens in a browser right within your workspace. You can split the workspace so
that you can view the tutorial in one window while you work on your web page in another
window. One way to do this is to right-click over the Web Studio TV tab and choose New Vertical
Tab Group from the menu. This opens the Web Studio TV page next to your open page. See the
Working with Pages chapter for more ways to split the workspace.
Open Web Studio TV Video Tutorials

There are two ways to view the video tutorials: The Video Tutorial Launcher in the ribbon groups
and the Web Studio TV link in the Help group.
Video Tutorial Launcher. The

groups have a small diagonal arrow
in the lower-right corner. The
arrow is called a Video Tutorial
Launcher. When you click on the
arrow, a browser opens and you
can view a Video Tutorial related
to that group.
Web Studio TV link. Click on the

Web Studio TV link in the Help
group on the Home tab.
15
View video tutorials in the Web Studio TV window

The Web Studio TV window gives you easy access to all of the tutorials available for Web Studio.
The tutorials are organized according to the ribbon tabs and ribbon groups in your workspace. The
controls allow you to play, pause, rewind and fast forward through the videos so that you can
watch them at your own pace. At the bottom of the window is a selection of additional related
videos.
16
17
Chapter 3: Quick Start Tutorial

This chapter helps you become acquainted with the workspace, the
commands, and the features that you use to create your own website.
The step-by-step tutorial provides you with the instructions to create
two web pages and then link them together.
Each group on the ribbon has a Video Launcher that shows
videos about that group. Click on the launcher to see the video.
Using Drag and Drop

Before you start the tutorial, we want to introduce you to the drag and drop function that is
frequently used in Web Studio. With drag and drop you can move items from the galleries onto a
page, add objects to the galleries, move objects on a page, and add links. Let’s start by opening a
New Project so that you have a page to work on.
Start a New Project

 Click the Home > Project > New Project command.
 This starts a new Project and puts a blank page on the workspace.
Drag and drop something from a gallery

 Click on the Gallery tab to open a gallery.
 Scroll to the item you want to add to your page.
 Move the mouse over the item.
 Press and hold the left mouse button down over the item.
 While holding the mouse button down, drag the item to a spot on the page, then release the
mouse to drop the item on that spot. Now drag to item to a different spot.
 Now close the Project by clicking the Web Studio Button>Close Project.
 When prompted, do not save the Project. We will create a Project and save it later.
The Cursor Hot Spot

When you drag and drop an item, notice that the cursor looks like an
arrow. The cursor has a hot spot at the tip of the arrow. This spot is very
important when you drag and drop links onto objects. Make sure the hot
spot is over the object when you drop a link. If the hot spot is not over
the object, the link will not work.
18
Tutorial
This tutorial takes you through the steps to build and link the Home page and the Contact page of
our sample site. You can follow our layout or make one of your own.
This is the color scheme for the tutorial website. You can open the PDF version of the manual in
the program to see the colors. To open the PDF manual, click on the Home tab and then click on
the Documentation link in the Help group. This opens the manual in a new page on the workspace.
You can also view the tutorial in the online Wiki. Click Home > Help > Wiki. After the Wiki
opens, enter “quick start tutorial” in the WS 5.0 search field and then click on the Quick Start
Tutorial article in the article list.
This is our sample Home page

19
This is our sample Contact page:
Step 1. Start a New Project and Choose a Background

As we go through these steps, you can use our layout or create one of your own. Our layout has a
textured (graphic) background with a solid colored rectangle over the background that holds the
text and photos. When the viewers see this site, they will see the web pages centered in the
browser and the background extending on all sides around the objects on the page.
Start a new Project

 Open Web Studio.
 Click on Home > Project > New Project. This starts a new Project and puts a blank page on
your workspace.
 Look on the right side of the workspace. The Page List has an Untitled 1 page with a little
house icon next to it. This is your Home page.
 Look at the page on the workspace. Notice this page has a tab labeled Untitled 1, the same
title as the page that you see in the Page List. Every page that is listed in the Page List has a
corresponding page on the workspace. The page also has a tab at the top that is labeled
Untitled 1.
20
Set up your web page

 Click on Page Layout > Site Setup > Page Size.
 Click on the arrow to show a list of suggested page sizes. Choose 1024 x768 from the drop
down list of the Guides for Target Webpage Size. This places page guides (dotted margin
lines) on your webpage to help you know where to place your objects.
Everything between the vertical lines will be displayed on the viewer's

browser without scrolling. You can add objects outside the dotted lines, but if
they are placed too far outside the lines, the viewers will need to scroll to see
everything on the page. Viewers would rather scroll down than scroll across.
Center your website in the browser

 Click on Website Properties at the far right of the Caption Bar. This opens the Web Site
Properties dialog.
 Under the General section, check the box to Center pages of this site in browser. This centers
your site horizontally in the center of the viewer's browser. If your page is long, a scroll bar is
placed on the side so that visitors can scroll down the page.
 Click OK.
Choose a background
 Click on the Backgrounds tab to open the Backgrounds Gallery. The galleries are on the left
side of your workspace.
A page can have a solid colored background or a textured background called

a graphic background. The backgrounds in the gallery are graphic
backgrounds. We are choosing a graphic background for this tutorial.
 Scroll through the gallery to look at the backgrounds. An item with a little folder in the upper
left corner indicates the item has a sub-gallery. Double-click on an item with the open folder
to see the contents of the sub-gallery. Click on the close folder to close the sub-gallery.
21
 When you choose the background that you want, click on it, hold the mouse button down and
then drag and drop the background onto the page.
If you do not like the background or want to change it, simply find another
background, then drag and drop it onto the page. You can also undo with
ctrl+z.
Save the Project

 Click on the Web Studio Button>Save Project. The Save As dialog opens.
 Give the Project a name and save it in a folder in My Documents. It is a good idea to create a
special folder for your websites so that you can always locate them.
The Web Studio file has an .ows after the name.
Step 2. Make the Banner and Basic Page Design

The banner is on the top of the page with a large rectangle underneath. All of the information on
our website is positioned on this rectangle. The background fills the browser when the website is
on the internet.
22
Choose a banner
 Click on the Graphics tab to open the Graphics Gallery.
 Scroll through and choose a banner.
 Drag and drop it onto the page.
 Drag the banner to position it in the upper left corner of the dotted Page Guide lines.
Change the color of the banner

You can change the color of any graphic on the page by using the Change Colors command in
the Photos group of the Create tab.
 Click to select the banner.
 Click on Create > Photos > Change Colors. This opens the Hue Saturation Luminance
dialog.
 Move the sliders in the dialog and see the changes in the Preview window.
 Click Reset Colors to go back to the original colors so that you can start again. Click Cancel if
you want to keep the original colors and discard any changes.
 Click OK when you are finished. The banner is changed to the colors that you chose in the
dialog.
Make a large rectangle shape to match the banner

 Click on Draw > Shapes > Rectangle Using Fill Colors. A rectangle is placed on the page
with selection handles.
 Click on Draw > Colors > Fill Color. This opens the Color dialog.
 Click on Eyedropper & More at the bottom of the dialog. This opens the Custom Color
section. Choose a color from the banner to fill the large rectangle.
23
 Click on the Select button (the one with the eyedropper). The cursor changes to an
eyedropper.
 Move the eyedropper over a color in the banner that you want to match and then click on it.
 Look at the color in the New color. It should match the color that you chose.
 Click OK. The color fills the shape.
 To remove the border from the rectangle, click to select the rectangle and then click Draw >
Borders > Width>None.
 Using the selection handles, drag the shape to resize it and then position it under the banner.
Make the banner and the large rectangle to be equal width

 Click on the banner to select it.
 Hold down the shift key and then click on the large rectangle.
 Leave the objects selected and click on Page Layout > Make Equal > Width.
Make a vertical design line

We are using the rectangle to make a line.
 Click on Draw > Shapes > Rectangle>Using Fill Colors. This places a rectangle on the page.
 Click on Draw > Colors > Fill Color. This opens the Colors dialog
 Click on Eyedropper & More and then click on the Select button. The mouse changes to an
eye dropper.
 Click the eye dropper over a color on the banner.
 Click OK. This changes the color of the rectangle.
 Use the selection handle to resize the rectangle. Position the shape on the page.
24
Step 3. Add Banner Text

The banner text is made using Arial and Times New Roman fonts which are web-safe fonts. A
web-safe font is one that can always be viewed on every visitor’s browser. The first six fonts in
the Text Gallery are web safe fonts. See the Text chapter for a discussion about safe and unsafe
fonts.
About Text objects

Text is placed on the page in text objects. You click on a text object to select it for aligning,
resizing, and positioning. However, if you want to change the text within the object, you must
double-click to activate it for editing.
Use the Text Gallery to make the “All in One Services” text
 Open the Text Gallery.
 Drag and drop the Times font onto the page. This creates a text object.
 Type in All in One Services or other text into the object. To use two lines for the title, press
Enter to go to the next line.
 Select the text by dragging to highlight it.
 Using the Text > Font group, change the font to size 16 or larger and make it bold.
 Select the text again and click the Text >
Paragraph > Center Justification.
 Now drag the text object and position the If you want to:
text on the banner.
Change the text: Double-click
 After you position the banner, you may
to activate the text object for
decide you want to change the text. Double-
editing.
click on the text object to activate it for
editing and then use the ribbon commands Move, align or resize the
to change the text. text object itself: Click once
to select it just like other objects.
Deselect: Click on any blank
spot on the background.
25
Use the New Text Object command to make the “The Office Support Specialists”
text
This time use a command in the Text tab to create a text object.
 Click on Text > Insert > New Text Object.
 Scroll down the font list in the Font group and choose Times New Roman.
 Type in “The Office Support Specialists.”
 Select the text and then use the text commands to center, bold, and italicize the text.
 Drag the text object into position on the banner.
 If you need to change the text, first double-click on the text object to activate it for editing.
Make the telephone number text

 Drag and drop a font from the Text Gallery or click on Text > Insert > Text Box. A new text
object is placed on the page.
 Enter the phone number.
 Drag and drop the text object into position on the banner.
Go to Web Studio Button>Save Project to save your changes....

Do this often!! There are also Save commands in the Home tab and the
Quick Access Toolbar at the top of the screen.
Step 4. Preview the Page

Now that you have some text on the banner, see how it will look on the internet by Previewing the
page. Web Studio has a browser that opens right in the workspace. There is also an option to use
your default browser.
 Click on Page > Preview > Preview Page Arrow>Use Web Studio Browser. This opens the
page in a browser on the workspace.
 Note the changes to the workspace when a page is Previewed:
1. The page opens as a separate page with a tab that is labeled Preview Page.
2. Two new tabs appear on the ribbon labeled Internet and Browsing.
3. The ribbon icons are replaced by an internet address field with navigation tools.
 Look at your banner and text.
 Click the X on the Preview Page tab to close the browser.
You cannot make any changes in the browser; you can only view the page.
26
Step 5. Add a Page, Rename the Pages

Now that you have a basic design layout for the website, 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 Duplicate Page button at the bottom of the window. This places a new duplicate
page on the workspace with a name of Untitled 2.
 Note this page does not have the little house icon. There can only be one Home page in a
website.
When you are designing your website, you may want to duplicate more than
one page. Web Studio also has a Master Page feature that enables you to
make changes to all of your pages using just one page. See The Page List
chapter for how to use a Master Page.
Rename the pages

The page name is very important. You want the name to reflect what is on the page. This name
is displayed in the address field when a visitor comes to your site. It is also the name used in the
Footer Links at the bottom of your pages. Do not use Home for your Home page. Choose a
name that reflects your site instead. See the Page List chapter for information about naming
pages.
Rename the Home page using the ribbon Rename command

 Click on the Untitled 1 tab to bring that page to the top of the workspace. Clicking on the
page name in the Page List also brings the page to the top.
 Click on the Page > Page > Rename command. This opens the Rename Page dialog. The
Untitled 1 name is highlighted.
 Key in Office Support Home in the New Name field. This is a good description of our site.
 Click OK to close the dialog. See the name change in the Page List and on the tab.
27
Rename the Contact page using the page’s right-click menu

 Go to the Page List and right-click over Untitled 2.
 Choose Rename Page from the menu. This opens the Rename Page dialog.
 Change the name to Contact.
 Click OK.
Save your Project. Do this often.
Step 6. Add Photos to the Home Page

Now that you have the basic design, add the objects that are on the Office Support Home page. In
this tutorial we use a photo from the gallery and also tell you how to insert one of your own
photos. See the Working with Photos chapter for more information about photos.
Open the Home page

You can go back to the Home page one of two ways:
1. Click on the tab at the top of the Home page.
2. Click on the Home page’s name in the Page List.
Use a photo from the Photo Gallery

 Click on the Photos tab to open the Photos Gallery.
 Scroll through to find a photo and then drag and drop the photo onto the page.
 Resize the photo by dragging the selection handles. The side, top, or bottom handles resize in
one direction. Corner handles resize proportionally.
 Drag to position the photo on the page.
Insert your own photo from a file

 Click on Insert > Illustrations > Picture. This opens the Open dialog.
 Select the photo file that you want to insert and then click Open.
 If the photo is large, a dialog asks you if you want to resize the photo. Large photos can slow
the download time of your web page. Since these photos are design accents, choose 100 pixels
and click OK. This puts the photo on your page.
 Resize the photo and then drag to position the photo on the page.
If your photo does not have selection hands, simply click on the photo to
select it. To deselect it, click on any blank spot on the background.
28
Step 7. Add Shapes and Text to the Home Page

There are several shapes on this page. There is a solid rectangle behind each photo, a larger
graduated fill rectangle and a design line.
Make a graduated fill rectangle

 Click on Draw > Shapes > Rectangle Graduated Fill. This places a rectangle on the page
with selection handles.
 If the shape has a border, remove the border by clicking on Draw > Borders & Lines >
Width>No Line.
29
Choose the start color

 Click on Draw > Colors > Graduated Fills>Start color. This opens the Color dialog.
 Click on Eyedropper & More. This takes you to the Custom Color section.
 Choose a color for the start color. If you are using the Color Scheme swatch, then click on the
Select button and click the eye dropper over the color that you want to use.
 Move the eyedropper over the contrasting color line under the banner and click. This selects
that color and places it in the New window of the Colors dialog.
 Click OK.
Choose the end color

 Click on Draw > Colors > Graduated Fills>End color.
 Click on Eyedropper & More.
 Click on the Select button and use the eyedropper to click on the large rectangle shape to
match that color. This makes the graduated fill seem to disappear on the page.
 Click OK.
Choose the direction of the graduated fill

 Click on Graduated Fills>Graduated Fill dialog.
 In the Graduated Fill Studio, click the Horizontal Fill Direction.
 Click OK. The rectangle now has a horizontal graduated fill.
 Click to select the shape. Use the selection handles to resize it.
 Drag the shape to position it on the page.
30
Make solid fill rectangles to go behind the photos

Make a rectangle
 Click on Draw > Shapes > Fill shape
Rectangle. A rectangle is added to the page. See the Color and Shapes
chapter for complete instructions
 Click on Draw > Colors > Fill color.
about the Color dialog.
 Choose a color from the basic colors or click on
Eyedropper & More to choose custom colors.
 Click OK when you have a color that you like.
Make a copy of the rectangle

 Hold down the ctrl key.
 Click the rectangle and drag. A copy of the rectangle is now on the page.
Position the rectangles

 Click on a rectangle.
 Drag the rectangle over a photo.
 While the rectangle is selected, click on Page Layout > Bring To > Backward. Click on this
command until the rectangle is behind the photo.
 Resize the rectangle until it looks like a border around the photo.
 Repeat this for the other photo.
Make a design line to match rectangles

Use the rectangle shape to create the design line. One way to do this is to copy an existing
rectangle and resize it.
 Click on a rectangle and drag the mouse away. This creates a duplicate of the rectangle.
 Resize the rectangle to make the design line.
Finish the text and design on the Home page

 Create text objects and type in the information that you want to see on the Home page.
 Leave room on the left side for the buttons.
Did something disappear on your page?

Each object on the page is on a separate layer. The layers are in the order that
you create them. If an object gets hidden when you are dragging, then you
must move it up or down through the layers. Click on Page Layout > Bring to
> choose the command to move the object.
31
Step 8. Add Buttons

Buttons with links on the Home page can be copied and pasted
onto other pages. 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 your own
buttons and put them in the gallery. See the Buttons and
Galleries chapters.
Put a button on the page

 Click on the Buttons tab to open the Buttons Gallery.
 Scroll through to find a button that you like.
 Drag and drop the new button onto the page. The Rollover
Button Studio opens.
32
 Take some time to move the sliders to change colors and font position. Every button has the
ability to change color when the mouse is moved over it or when it is clicked.
 The Button’s Text field is where you key in the name you want to see on the button. Use the
Font and Color buttons to change the font and the font color that displays on the button. For
now, leave the Button’s Text blank and fill it in later.
 Make any choices that you like in this dialog.
 Click OK. The button is placed on the page.
Copy the buttons

 Click and drag the button to create a copy.
 Repeat this until you have four buttons.
 Drag the buttons to position them on the left of the page. Do not worry too much about
spacing; you will align them in the next step.
Align the buttons

 Hold down the shift key and click on each button. All buttons are now selected.
 Click to open the Page Layout tab.
 Go to the Align group and click on a command to align the buttons to the left or to the right.
 Go to the Space group and click the Vertically command. This evenly spaces the buttons.
Put text on the buttons

 Double-click the top button. This opens the Rollover Button Studio.
 Fill in Home in the Button’s Text field.
 Click OK.
 Double-click each button.
 Rename the buttons: Services, About Us, Contact.
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. You can copy the Graduated Fill and Fill shapes
from the Home page and then paste them onto the Contact page.
Do not make any buttons on this page. Later in the tutorial, you will add links
to the buttons and then copy and paste them onto each page.
33
Copy and paste shapes

 Click on the Home page tab to bring that page to the top of the workspace.
 Hold down the shift key. Click on the Graduated Fill rectangle and then click on the smaller
Solid Fill rectangle. Both shapes are now selected.
 Click on the Copy command on the Quick Access Toolbar or right-click over the selected
shapes and choose Copy from the Selected Object Menu.
 Now click on the Contact page tab to bring that page to the top of the workspace.
 Click on Paste>Paste in Place on the Quick Access Toolbar or right-click over a blank spot
on the page and choose Paste in Place from the Selected Object Menu. This puts the shapes
on the Contact page in the exact location they are positioned on the Home page.
Create the text objects and other design features

 Add text objects from the information on the Contact page. One of the text objects can be
used to name the page Contact so visitors know what page they are viewing.
 Add any other shapes or design elements that you like.
Step 10. Create an E-mail Link

An e-mail link can be placed on any graphic, button, or text on the page.
 Place a graphic or text on the page that you want to use for the e-mail link.
 Make sure the graphic or text is selected.
 Click on Insert > Links > Mail Link. This opens the E-Mail Link dialog.
 Type in an e-mail address in the field.

 Click OK.
34
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 the page and match each
of the button links. Every page is included in Footer Links unless we remove it. To remove a page
from the Footer Links, right-click over the page name in the Page List to see the menu. Click on
Include in Footer Links to uncheck the feature. See the Links chapter for information about links.
Create button links

Link the buttons
There are only two pages in our tutorial, so only put links on those two
buttons.
 Click on the Links tab to open the Links Gallery.
 Look at the Site Links and notice that each page is listed in this section.
 Click on the name of the Office Support Home page.
 Hold down the mouse, then drag and drop the link onto the Home
button. Make sure that you drop the link when the cursor Hot Spot is
over the button.
 Drag and drop the Contact Site Links onto the Contact button.
Copy and paste the linked buttons onto the Contact page
 Hold down the shift key and select each button.
 Click on the Copy command on the Quick Access Toolbar or right-click over the selected
shapes and choose Copy from the Selected Object Menu.
 Click on Paste>Paste in Place on the Quick Access Toolbar or right-click over a blank spot
on the background and choose Paste in Place from the Selected Object Menu. This puts the
buttons with their links on the Contact page in the exact location they are positioned on the
Home page.
35
Create Footer Links
Add more pages

Since Footer Links are created from the pages in your website, we are adding more pages. Even
though the pages are blank, the page names are used for the links.
 Click the Add Page button in the Page List. Repeat this until you have added two more pages.
 Rename the pages the same name as the buttons: Services, About Us. You now have four
pages with names that match the names on the buttons.
Rearrange the Page List order to prepare for Footer Links

The Footer Links are placed on the page in the order they appear on the Page List. Rearrange
the Page List so that the pages are in the same order as the buttons.
 Click on a page name in the list and drag the page to a new location.
 Repeat this until the pages are in the same order as the buttons.
Add Footer Links

 Click on the Offices Services Home page tab or the page’s name in the Page List to bring that
page to the top of the workspace.
 Click on Insert > Links > Footer Links. This places Footer Links on the page.
 Drag to position the Footer Links where you want them.

 Click on Insert > Links > Footer Links. This places Footer Links on the Contact page.
 Drag to position the Footer Links where you want them on the Contact page.
36
Step 12. Preview the Website

This time use the Preview Links or Preview Website commands to view the site and check the
links. These commands place all of the linked pages into the browser so that you can view your
entire website and check to make sure that all of the links are working. It is also a way to see your
website just like your viewers will see it when it is on the internet.
 Click on Page > Preview > Preview Page Arrow > Use Web Studio Browser.
 Click on Page > Preview > Preview Links. This opens the page in a browser within the
workspace.
Note the changes to the workspace when a page is Previewed:

1. The Preview page opens as a separate page with a tab that is labeled
Preview Site: All in One Services.
2. Two new tabs appear on the ribbon labeled Internet and Browsing.
3. The ribbon icons are replaced by an internet address field with
navigation tools.
 Click on the Contact button. This takes you to the Contact

page.
 Now click on the Home button. This takes you back to the Remember: You cannot
Home page. make any changes to
 Click on the Footer Links to go to the Contact page and back your website in the
to the Home page. browser. You can only
 Click the X on the Preview Page tab to close the browser. view the website.
A final word
You should now have a feel for the way that Web Studio builds pages
and links them together to create a website. Remember to look for
commands on the ribbon and in the right-click menus. Check the
Video Tutorial Launcher in the ribbon groups and the Quick Start
Video link in the Help group for more help. Most of all—have fun!
Web Studio is a fun program to use and makes it easy to create
professional looking websites.
37
Chapter 4: Website Basics

In its most basic form, a website is a group of files stored in folders on a hard drive that is
connected directly to the internet. These files include all of the items
that you see on your site as well as the instructions to put them
together. The instructions are written in a programming language
called HTML and are included in files with the .htm or .html file
extension. Web Studio provides you with the opportunity to use
HTML or ignore it completely.
Linear and non-linear pages

When you work with word processing programs, the content is organized in a linear fashion as
you type one page after another. Each page must be in the proper order so that the content
makes sense to the reader.
Websites are non linear because you can create the pages in any order. Each page is built
separately and it does not matter which page is made first. When you are finished building all of
the pages for your website, you connect the pages with links. These links allow your visitors to
go to any page on your website (or on the internet) in any order they desire. Web Studio has a
Links Gallery and several link commands that help you link your pages together.
Home page
The Home page is the first page people see when they visit your site. Web Studio automatically
makes the first page that you create in a Project the Home page. You can make any page in your
site the Home page, but you can only have one Home page for your website.
Page names
Each page on your site needs a name. The name is used for two things: the name of the HTML
file on the server and the title that is displayed in the title bar of the web browser when your
visitors go to that page. The page name should reflect the content of the page. New pages added
to your website Project are labeled Untitled until you rename them.
Domain name
This is the name you pick for your website. Each website has its own unique name. You obtain
a Domain Name from a Domain Name registration website on the internet. You can get one
from our hosting company iHostStudio, at ihoststudio.com.
38
Web servers and hosting companies

Web servers. These are computers that store (host) the sites on the internet. Your website is
stored securely so that visitors can view your website without connecting to your home
computer.
Hosting companies. These are the companies that own the web servers. You rent space
from the hosting company for your website. Some hosting companies offer free space, but it is
usually quite limited and they add many advertisements to your site.
Although you can use any hosting company for your website, we recommend
iHostStudio because it is designed to work hand in hand with Web Studio.
See the Uploading Your Website to the Internet chapter for more information.
ISP. Internet Service Providers are the companies that you use to connect to the internet. Your
ISP could be a dial-up service, cable company, DSL or satellite service. Many include a free
hosting service for their customers.
Steps to Getting Your Site on the Web

This is an overview of the steps that you take to create a website and save it to the internet.
1. Open Web Studio and start a New Project.
2. Create the web pages.
3. Link the pages together.
4. Preview your site with the Preview Website command.
5. Obtain a Domain Name and a Hosting Company.
6. Upload your website to the internet with the Upload Website command.
Update or change your website

After your website is on the internet, you can make changes to your Project file and upload the
changed pages to the internet. The newly uploaded pages replace the current pages on your site.
Insert the change date on your website

You can show visitors when you last updated your site. This is a great way to show that you are
actively keeping up your website.
 Click on Insert > Text > Last Changed Date. A statement is placed on the page in a text
object: This page last modified on (date).
 Drag to position the text object on the page. See the Text chapter for more information about
text objects.
39
Managing Web Studio Projects and Files

Web Studio reads its own native Project files (.ows file extension). The Project file contains all of
the pieces of your website and from there converts the information to HTML. Advanced users can
import HTML into the HTML Object as well as other objects and pages. This means that Web
Studio saves your website in two ways: an .ows Project file that can be used within the program
and a website with the HTML language that is understood by browsers.
Project file. Web Studio saves its own

record of your website called a Web Studio What do you need for a website?
Project. The Project files have a file extension  Web Studio software
of .ows and can only be read within the Web  Domain name
Studio program. This Project file contains all
 Hosting company
of the information about your Website, much
 ISP (Internet Service Provider)
the same way a blue print to your house
contains all of the information about how
your home is put together. When you add a
graphic, text, or other objects to the pages of
your site in Web Studio, they are saved in the Project file. Because a copy of the file is inserted
into Web Studio, you can modify graphics without changing the original graphic.
Website. When you are ready to create a web ready website, Web Studio takes all the
information from the Project file, generates HTML, (the standard language that Web browsers
understand) and then sends this ready-made website to the location of your choice, be it your hard
drive, a network drive, or the internet.
Saving and Naming a Project

It is important to save your Project often while you are working. The Save As dialog appears the
first time that you save so that you can name your Project. It is best to create a folder called
Websites in the My Documents folder so that all your website Projects are easy to locate. You
should also have a folder on a separate drive where you can save a backup copy of your website.
You may choose to have the backup saved automatically every time you save your project. We
cannot stress enough the importance of saving a backup copy.
Saving Hints
 Keep your Projects in a separate folder so that you can find them.
 Always save a backup copy of your website.
 Saving and backup may take a while with large projects. Be patient—a
good backup is worth it!
40
Save your Project (.ows file)

 Click on Web Studio Button>Save Project. The Save As dialog opens.
 Navigate to the folder where you want to save your
Project. The Web Studio file
 If this is the first time that you are saving the Project, give extension is .ows.
the Project a name.
 Click Save.
 The Project is automatically saved with an .ows extension.
 When you subsequently save your Project, use the Save command
in the Web Studio Button. This command automatically saves the
Project in the same location that you originally saved it.
 The path to your website Project is now something like:
C:\MyDocuments\WebSites\DogGrooming.ows.
Save your website to a disk

You can save your Website to a network or external drive.
 Click on Web Studio Button>Publish>Save Website Files to Disk. This opens the Browse for
Folder dialog.
 Navigate to the drive and folder where you want to save your website’s files.
 Click OK.
Make a backup copy of your Project

It is important to save a backup copy of your Project. This ensures that you do not lose your
Project in case of a computer crash. You can manually save or automatically save a Project.
Manually save a backup

 Click on Web Studio Button>Save Project As>Backup of the Project. This opens the Browse
for Folder window.
 Scroll to the folder in the drive where you want to save the Project.
 Click OK when you are finished.
Manually save a backup at the same time you save the Project
 Click on Web Studio Button > Save Project > Save Project and a Backup. This opens the
Browse for Folder window.
 Scroll to the folder in the drive where you want to save the Project.
 Web Studio automatically saves the Project to its original location.
41
Automatically save a backup copy of your Project

You can have Web Studio automatically save a backup of your Project through the Web Site
Properties dialog. Every time that you save the Project, the backup is automatically saved. If
you are saving to an external drive, make sure the drive is attached while you save your
Project.
Properties dialog.
 Click on the General section.

 Check the box in front of Backup my
Remember…
Project File when Saving (Save Project
If you automatically save to an
from the File menu).
external device, make sure the device
 Click on the Choose a Folder button. is in place while you work on your
This opens the Browse for Folder website.
window.
 Select the folder where you want to save
your backup.
 Click OK.
 A backup is now automatically saved every time you save your Project.
42
Centering Your Website in the Browser

When you create your site in Web Studio, it is aligned to the left of the page. When it is on the
internet, Web Studio centers it in the browser. If you want your site to be left justified in the
browser, you can turn off centering. However, depending on the size of your website and the size
of the visitor’s browser, a left justified website can look unbalanced because it can have a large
blank area of background on the right side.
 Choose Website Properties at the far right of the Caption Bar.
 Click the General section.
 Click the Center pages of this site in browser checkbox.
 Click OK.
 Click Home > Preview > Preview Website to view your pages centered in the Preview
window’s browser.
Web Site Properties Dialog

The Web Site Properties Dialog is where you can make global adjustments to your site. Each
website you construct has properties associated with it. These properties affect the way your
website is constructed, loaded, and viewed on the internet. You can edit these properties at any
time by clicking on the Website Properties button at the far right of the Caption Bar.
43
General section
Your Website Address for use with Google Site Map. Enter your website address in
this field to include your website in the Google Site Map.
Center in Browser. This causes your pages to be centered in your viewer’s browser when
they visit your website.
Project File Backup and Location. Check Backup my Project file when Saving to backup
your Project automatically. Choose a folder where you want to backup your Project.
44
Home Page section
Home Page’s Name. This is the name of the file that is used by the hosting company. Most
companies use “index” but some us “default.” Check with your hosting company.
File Type section
Page’s File Type. HTML is the normal file type on the web. Only change this if you are
making a page with another file type.
45
Uploading section
This section is for customers who are using hosting companies other than iHostStudio. New
Web Studio 5.0 customers should use Web Studio 5.0 Uploading. Customers who upgraded
from 4.0 may continue to use the familiar Web Studio 4.0 Uploading wizard or the new Web
Studio 5.0 Uploading. See the Uploading to the Internet chapter for more information.
Uploading Options. If you are using a different hosting company than iHostStudio, check
Web Studio 5.0 Uploading or Web Studio 4.0 Uploading.
46
Attached Files section
Web Studio can automatically upload any additional files when it uploads your website. This
comes in handy when you are using other programs with Web Studio. These programs typically
require you to upload some number of JavaScript files and other files in order for the program to
work. The files are uploaded when you upload your site or a page. They are uploaded in the
same location (or folder) as the HTML files in your site.
Use the three buttons in this section to add files, delete files and verify that previously added
files are still available in the same location on your computer.
Add Files to List. Choose files that you want to add from the Open dialog.
Delete Files From List. Select a file in the list and then click this button to remove a file.
Verify Files in List. Click this button to have Web Studio check to see if the files are still
available in the same location on your computer.
Attach files to your website

Properties dialog.
 Click on the Attached Files button. This opens the Open dialog.
 Choose the files that you want to add to your website. You can choose more than one file at a
time by holding down the ctrl key.
 Click Open after you select all of the files.
47
Miscellaneous section
For transparent and index-colored graphics. Select the type of graphic file.
When creating your web site’s pages. When you create an HTML e-mail, this option
automatically switches to HTML Tables.
When creating Text Objects for your web site. Check this box if you want objects with
unsafe fonts converted into graphics automatically.
Web Studio Preferences

The Web Studio Preferences dialog has a Global Preferences section with options that can be
turned on and off to save memory. The Text and Links Preferences in the dialog are covered in the
Text and Links chapters.
48
Open the Web Studio Preferences dialog

 Click on Web Studio Button>Options (at the bottom of the list). This opens the Web Studio
Preferences dialog.
 Click the box to check (on) or uncheck (off) the following Global Preferences:
Draw Offscreen. If you have problems related to memory and/or Windows resources, turn
this off. It frees memory and resources for you. It results in some flickering of the screen
when you are redrawing objects and when drawing objects are stacked on top of each other.
Open previously opened pages. Turn this off if you have problems related to memory
and/or Windows resources. When a Web Studio Project is opened, the pages that were
previously open are reopened. With this turned off, only the pages that were open during your
last session are opened again. Having just a few pages open at any time uses less memory and
Windows resources.
Resample Graphics. When graphics are resized, they lose some of their visual quality.
Resampling the graphic increases the visual quality close to the original.
Previewing Your Website Project

You can see what your website will look like on the
internet at any time through the Preview commands. These
commands allow you to view a single page or your entire The Preview Page command
website. Many items, such as animations, cannot show allows you to see a single
their actions until you Preview your page. The Preview page in the browser. The
Page command allows you to see a single page in the Preview Links or Website
browser. The Preview Website or Preview Links commands commands allow you to view
are used to check links and view multiple pages in the multiple pages and check all
browser. Previews can be viewed in the Web Studio of your links.
browser or in your Default browser.
Since the Preview window is a full featured web browser, you can text all of
the links and functions in your website. You can even use the navigation tools
to visit other websites on the internet.
The Web Studio browser

This is a fully functioning browser that opens within the workspace. When you are Previewing
a page or website, the browser opens in a new page with a highlighted Preview Page/Website
tab at the top of the page. This browser can also be opened by using the Browse command in the
View tab. See the Working with Pages chapter for more information about using this browser in
the workspace.
49
The Default browser

This setting causes the Preview commands to open your page or website in the internet browser
that you use on your computer. When you click on a Preview command, your browser
automatically opens so that you can see your website exactly as it will be seen by your visitors.
The Web Studio browser is the initial setting when the program is installed. If
you change it to the Default browser, it remembers that setting.
Set the Preview browser that you want to use

There are two types of Preview commands: Preview Page (view one page) and Preview Links or
Website (view the entire website with links). These are described later in this section. All
Preview commands give you an option to choose the browser that you want to use.
 Click on the arrow below any Preview command.
 Click to select the browser that you want to use. This opens the Preview page.
50
Web toolbar
In the Default browser, you will use your browser’s navigation tools. When you use the Web
Studio browser, the navigation tools are displayed above the Caption Bar. Since you are
connected to the internet, you can even visit other websites by using the Address field.
Back. Go back to the previously viewed web page.

Forward. Advance to the next viewed web page.
Stop. Stop the current web page from loading into the browser.
Refresh. Reload the current page into the browser.
Address. Enter the URL to visit another website.
History. Web Studio keeps track of the sites that you visit during a session. Click on the
arrow to see the history and choose a URL from the history to go to that site.
Preview page
The Preview Page command allows you to see one page in the browser. It is useful when you
have a large website and want to quickly see the changes that you made on one page. When you
Preview a page, the links do not work because only one page is in the browser. When you want
to check links or view your entire website, you must use the Preview Links or Preview Site
commands. See the instructions in the next section.
 Click on Home > Preview > Preview Page or Page > Preview > Preview Page.
 The page is displayed in the browser. Use the browser to review design, check slide shows,
animations, etc.
 Close Preview and return to the Web Studio workspace in one of two ways:
Close the Web Studio browser: Click the “X” on the Preview Page tab.
Close the Default browser: Close the browser as you normally would.
51
Preview website or links

The Preview Links and Preview Website commands allow you to Preview your entire site.
Everything in your site is fully functional during these Previews. This includes Flash
animations, rollover buttons, links, and everything else. In addition, links to other websites on
the web takes you to those sites.
 Click on Home > Preview > Preview Website or Links or Page > Preview > Preview Website
or Links.
 The entire website is loaded into the selected browser.
 Check the links and functions of your website.
 Close Preview and return to the Web Studio workspace in one of two ways:
Close the Web Studio browser: Click the “X” on the Preview Site tab.
Close the Default browser: Close the browser as you normally would.
You can also right-click over a blank spot on the page and choose Preview
Page from the menu. A blank spot on the page is any place on the
background that does not have an object covering it.
Printing and Print Preview

Printing from Web Studio allows you to print using the full resolution of your printer and includes
a full featured Print Preview. Many people use Web Studio as a graphics creation program to
create graphics for use with other programs or to print. Printing graphics from Web Studio yields
excellent results. For the highest quality printing, turn off Resample Graphics in the Options
dialog in the WS Button. Turn it back on when you are finished printing.
 Click on Web Studio Button>Print. This opens the Print Preview window.
 Move the mouse over each icon to see the function.
 Click on the icons to zoom in/out, view the page in different orientations, and turn headers
and footers on or off.
 Click the Page Setup icon to open the Page Setup window.
 Choose the printer settings and then click OK.
 Click the Print button to print the page.
52
53
Chapter 5: Galleries
The design galleries contain tools to help you build web pages. The galleries come filled with a
variety of graphics that you can use including backgrounds, buttons, templates, photos, and other
graphics. You can even add content of your own.
Web Studio Galleries

Backgrounds Contains graphic backgrounds for your page. Solid backgrounds are
made using the Background group in the Page tab.
Buttons Contains readymade buttons. Each button has a Buttons dialog that
provides you with many design choices for the button.
Links Contains links to all of your pages as well as sections for you to add
links for downloads, anchors, e-mails, and other links.
My Stuff This is a Storage section for you to keep copies of graphics that you
use in web design.
Templates This is a collection of professionally designed templates. Use one or a

combination of several to design your website.
Text This gallery displays all of the fonts that you have on your computer.
You drag and drop a font onto the page to use it for entering text.
Graphics Contains a selection of graphic objects that you can use in web design.
Photos Contains a collection of photos that can be resized, cropped, and

changed to use on your web pages.
Forms Use the readymade forms in this gallery or design your own using the
commands in the Forms tab.
Showing and Hiding Galleries

The galleries are located at the left side of the screen under the Galleries tab. You can use the
Show/Hide Galleries command in the View tab or click on the Galleries
tab to view the galleries. In addition, you can keep the galleries on Auto
Hide so that they only open when the mouse is moved over the
Galleries tab, or you can use the Auto Hide pin to keep them open.
View the galleries using the Galleries command

 Click on View > Show/Hide > Galleries. If the galleries are pinned
open, it closes them. If the galleries are closed, it temporarily
opens them so that you can use the contents.
54
View the galleries on Auto Hide

 Move the mouse over the Galleries tab to
display the galleries.
 Click on any tab to view and select the
contents.
 Move your mouse away from the
galleries and they hide again.
Use the Auto Hide pin to keep the galleries open

 Move the mouse over the
Galleries tab to display the
galleries.
 Click on the Auto Hide pin.
 The pin changes to a vertical
orientation and keeps the
galleries open.
Make the thumbnails in the gallery small or large

 Click on the View tab.
 In the Show/Hide group, click on the Small Galleries command. If the thumbnails are small,
they become large; if they are large, they become small.
Viewing Gallery Contents

Click on a gallery’s name tab to open any gallery. Scroll through the gallery to see the contents.
Some items in a gallery are grouped into sub-galleries to make them easier to find. A small yellow
folder in the upper left corner of a gallery item means that the item contains a sub-gallery with
more choices.
55
Using Sub-Galleries
Open and close the sub-galleries
 To open a sub-gallery, double-click on an item with the open folder.

 To close a sub-gallery, click on the close folder or double-click on any item in the sub-gallery
Add a new sub-gallery

 Click on a Gallery tab to open the gallery where you want to add a new sub-gallery.
 Move the mouse over an item in the gallery. This item becomes a new sub-gallery, so do not
use an existing sub-gallery.
 Right-click over the item. The Gallery Menu opens.
 Choose Add Sub-Gallery.
 Give the sub-gallery a name in the Enter New Sub Gallery Name dialog.
 Click OK.
 The item now has a sub-gallery icon. A copy of the item is automatically placed in the sub-
gallery so it can still be used.
Delete an entire sub-gallery

 Right-click over a sub-gallery.
 Choose Delete from the menu.
 A dialog asks if you really want to delete the sub-gallery.
 Click OK to delete the entire sub-gallery. Click Cancel if you do not want to delete it.
Using Gallery Content

To get content from a gallery onto your page, you simply drag and drop an item from the gallery
onto the page or object. Graphics, such as backgrounds or buttons are dropped onto the page.
Links are dropped onto objects.
Drag and drop from a gallery

 Click the gallery’s name tab to open the gallery that you want to use.
56
 Scroll to the item that you want to use.

 Left click over the item, hold down the mouse button and then drag the item to the desired
spot on the page.
 Release the mouse button to drop the item onto the page or object.
The tip of your cursor is considered the “hot spot.” This is important when
you are dragging and dropping links. The link must be dropped on the object
at the point where the hot spot is directly over the object.
Reorganizing Gallery Content

You can reorganize gallery content by dragging and dropping items within the gallery.
Move a item in the gallery

 Place the mouse over the item to be moved.
 Drag and drop the item to a new location. You cannot rearrange the Text
Gallery. It is populated from your
computer’s fonts.
Using the Gallery Menus

The Gallery Menu contains commands that allow you to add content, remove content, and create
sub-galleries. The menu options depend on which gallery you choose.
Display the gallery menu

 Right-click over any item in the gallery. This displays the menu.
Copy an item in a gallery

 Right-click over an item.
 Choose Copy from the menu.
 The item is placed on the clipboard and ready to be pasted.
Cut an item from a gallery

 Choose Cut from the menu.
 The item is removed from the gallery and placed on the clipboard.
57
Paste an item into a gallery

 Right-click over any item in the gallery.
 Choose Paste from the menu.
 The item on the clipboard is inserted into the gallery.
Delete an item from a gallery

 Right-click over an item in the gallery.
 Choose Delete from the menu.
 The item is removed from the gallery. It is not placed on the clipboard.
Adding Content to Galleries

You can add your own content to most of the galleries. Graphic objects, groups of objects, graphic
files, page templates, and links can all be added to the galleries. For instance, you may want to
design your own buttons and backgrounds or add your own photos. When you add items to the
galleries, they are always handy for you to use. If you reinstall Web Studio, the gallery content
that you added is not in the new install. Therefore, when you are adding your own graphics to the
galleries, it is a good idea to save copies in a folder or on a separate page of your website.
Adding Graphic Objects to a Gallery
Use Copy and Paste commands to add graphic objects

Any graphic you can copy onto the clipboard can be pasted into a gallery. This includes
graphics in another gallery, graphics in another program or graphics on the internet.
 Right-click over a graphic and choose Copy from the Selected Object Menu. The graphic is
placed on the clipboard.
 Click the gallery’s name tab to open a gallery. You cannot drag and drop
 Right-click over a gallery item and choose Paste. graphics that have links.
 The item is placed in the gallery. The link will drag and
drop, but not the graphic.
Drag and drop graphic objects from your web
browser
 Open your web browser to the page that has the graphic.
 Click the gallery’s name tab to open a gallery.
 Align your web browser window and Web Studio so that you can see both.
 Drag and drop the image from your browser into the gallery.
58
If you are Previewing a page using the Web Studio browser, you can arrange
the pages in a split view so that you can easily drag and drop from the
browser. See the Working with Pages chapter.
Drag and drop graphic objects from the Web Studio desktop
You can add anything from your page into a gallery. You can add individual items or a group of
objects as a single graphic.
Drag and drop a single graphic object

 Click on a Galleries tab to open a gallery.
 Select an object on the page.
 Hold down the ctrl + shift keys.
 Drag and drop the object into the gallery.
Drag and drop a group of objects as a single object

 Select a group of objects on the page.
 Drag and drop the objects into the gallery.
 They are added to the gallery as a single graphic.
Drag and drop a group of objects as individual objects

 Select a group of objects. Remember to hold down the shift key to select more than one
object.
 Drag the objects into the Gallery; do not drop them yet.
 Release one of the two keys, either ctrl or shift, and then release the mouse button.
 The items are added to the Gallery as individual items.
Add Graphic Files to a Gallery

You can add any type of graphic file to a gallery that Web Studio can read.
Use the gallery menu to add graphic files

59
 Choose Add Files.

 The Open dialog appears.
 Click to select the graphic file that you want to add.
 To select more than one file, hold down the ctrl key while you click on more than one file.
 To select an entire folder of graphics, hold down the shift key, click on the first file name and
then the last file name.
 Click Open to load the files into the gallery.
Use drag and drop to add graphic files from a folder

 Open Windows Explorer or any Windows folder and locate the file that you want to add.
 Click the gallery’s name tab to open a gallery where you want to add the files.
 Drag and drop the file from the folder to the gallery.
 The graphic is added to the gallery at that location.
You can drag and drop several files at the same time. The files are added to
the gallery starting at the point you drop them.
Add a Page to the Templates Gallery

Add a page to the Templates Gallery
You can add any page in your site to the Templates Gallery. This allows you to use the page
again for another site.
 Design a page that that you want to save as a template.
 Click on the Templates tab to open the Templates Gallery.
 Click on Page > Templates > Add to Gallery. The page is added to the gallery.
Add Links to the Links Gallery

Add links using the links gallery menu
 Click the Links tab to open the Links Gallery.
 Right-click in the My Links category.
 Choose Add Link from the menu.
 The Add Link dialog is displayed.
 Enter the Name, URL, and Description of the link that you are adding and click OK.
 The link is added to the My Links list in the Links Gallery.
60
Add File Links using the links gallery menu

 Click the Links tab to open the Links Gallery.
 Right-click in the File Links section.
 Choose Add File Link.
 The Add/Edit a Downloadable Link dialog is displayed.
 Enter the title, choose a file, enter the description of the link that you are adding, and then
click OK.
 The link is added to the File Links section in the Links Gallery.
Using your Content in Other Programs

You can save graphics from the galleries or graphics that you make in Web Studio so they can be
used in other programs.
 Create a graphic on a page or drag and drop one from a gallery.
 Right-click over the object.
 Choose Save Selected Object As from the menu. The Save dialog appears.
 Navigate to the folder where you want to save the file.
 Type in a name and choose the format.
 Click Save.
You can also Copy and Paste an object from Web Studio into other programs.
61
Chapter 6: The Page List

The Page List on the right side of the workspace helps you manage your site. It displays a list of
the pages in your site and allows you to quickly bring a page to the top of the workspace. You can
add, duplicate, and delete pages with the buttons at the bottom of the
window. Using the right-click menu, you can assign the Home page,
change the page order, and perform several other commands. In
addition, the Page List performs many tasks behind the scenes such
as managing all of the files that make up your site. When you are
building your website, you will use the pages on the workspace and
the Page List window on the right of the workspace to manage your
pages. See the Working with Pages chapter for more information
about pages.
Introducing the Page List
The Page List window

62
Page List menu

Right-click menu. The Page List button at the top of the window has a right-click menu with
a list of commands that you can do with the Page List, such as floating, docking, and hiding the
list.
Left click menu. The Page List has a left click menu that provides you with a list of
commands and active properties for the page that is selected in the Page List. This menu allows
you to access several commands quickly when the Page tab is not open on the ribbon. This
menu is the same one as the page’s right-click menu. See The Page and Page List Menu below.
Show and hide the Page List

The Page List is located on the right side of the workspace.
You can arrange to view the list all of the time or place it in Auto Hide. When the Page List is
set to Auto Hide it only opens when you move the mouse over the Page List tab or when you
click the Show/Hide Page List command.
Turn the Auto Hide feature on and off

 Right-click over a blank place in the Page List to view the Page List Menu.
 Click Auto Hide to hide the Page List. A checkmark means that Auto Hide is active.
 If the Auto Hide is checked, click it again to uncheck and turn off the Auto Hide.
View the Page List when the Auto Hide is on

There are two ways to view the Page List when the Auto Hide feature is turned on:
1. Move the mouse over the Page List tab to display the Page List. Click outside of the Page
List to hide it again.
2. Click the Page List command in the Show/Hide group in the View tab to view the Page List.
Click outside of the Page List to hide it again.
63
Use the Auto Hide pin to keep the Page List open or closed
 Move the mouse over the Page List tab to view the Page List.
 Click on the Auto Hide pin. The pin changes to a vertical orientation and keeps the Page List
open.
 Click on the vertical Auto Hide pin.
 The pin changes to a horizontal orientation and puts the Page List in Auto Hide.
The Page and Page List menu

There are two ways to view the menu for each individual page:
1. The Page List left click menu: Select a page in the list and then click on the Page List
button.
2. The Page List right-click menu: Right-click over a page name in the Page List.
The menu provides you with a list of commands that you can perform on the page and page
properties that you can set. Many of these commands and properties are also located on the
ribbon in the Page tab. To perform a function, click on the command in the menu. A check mark
in front of the command means that the checked property is active on that page.
Home Page. This makes this page the Home page.
Use as Master Page. This designated the page as the Master Page.
Insert New Page. This adds a new Untitled page.
Preview This Page. This command opens only that page in the Preview browser. If you need
to check your website links, click on the Preview Website or Preview Links commands.
Trial Host This Page. This sends the page to the internet so it can be viewed on the web by
others. See Trial Hosting in the Uploading Your Website chapter.
Save Page as Graphic. This allows you to save the page as a graphic file that can be used in
your website or other documents.
Add This Page to Templates Gallery. This adds the page as a Template in the gallery so
the design can be used for additional pages, on other websites or sent to other people. Open the
Templates Gallery first in order to use this command.
Rename Page. Opens the Rename dialog. Use this to initially name a page and later to
change the name of the page.
You can also double-click over a name and fill in the new name in the
resulting box.
64
Duplicate Page. This adds a duplicate of this page to the Project and to the Page List.
Include in Footer Links. Adds or removes this page from the Footer Links. Footer Links are
the text links at the bottom of the web page. All pages are automatically included in Footer
Links. A check mark indicates that the page is included. If you want to remove the page from
the Footer Links, click to remove the check mark. See the Links chapter for more information.
Include in Google Site Map. Web Studio automatically creates a Google Site map for your
site. When you upload, the site map is uploaded as well. Google uses the site map to determine
what pages that you want to have listed in Google. The site map is the easiest way to get listed
on Google.
Google Site Map Priority. On a scale of 1 to 10, choose how important this page is relative
to the other pages in your site. The Home page is normally a 10.
Delete Page. This command removes this page from your Project and from the Page List.
Move Up/Move Down. Moves the page up or down in the Page List. Use these commands to
reorder the pages. You can also click and drag a page name up or down the list to reorder the
pages. This is the quickest way to reorganize the Page List. Page order is important when you
are working with drop down menus and Footer Links.
Page Properties. This command opens the Object Properties dialog. This dialog has
sections for Size & Download Times, File Type, Password, HTML Build Options, and Notes for
the page.
The Page List buttons

The buttons at the bottom of the Page List give you easy access to three of the most commonly
used page commands: Add Page, Delete Page, and Duplicate Page. These commands are also
available in the page’s right-click menu and in the Page group of the Page tab on the ribbon.
Add New Page. This command adds a new, blank page to your site. The page’s Untitled
name is added to the end of the Page List. The new page is immediately opened for you. You
can also click on Home > Insert > New Page.
Duplicate Page. Pressing the Duplicate Page button immediately adds a duplicate of the
current page to your website. This is handy when you want to use the page design on another
page. There is also a Master Page feature that allows you to edit all pages automatically. See the
Working with a Master Page section later in this chapter.
Delete Page. This command deletes the page that is selected in the Page List.
65
Page List commands on the ribbon

Page Tab. The Page group in the Page tab has several of the menu and button commands
found in the Page List. Click on a command to use it. If the command is for a particular page,
such as the Rename command, click on the page tab first to bring the page to the top of the
workspace before you click on the command.
Web Studio Button. The Web Studio Button has several Save As commands for pages. Bring
the page to the top of the workspace and then click on the command to use it.
Naming Pages
Every page in your site must have a name. The name is used for two things: the file name in your
Project and the page title. The title is displayed in the title bar of the web browser when a visitor
comes to your website. The page title identifies your site in someone’s Favorites menu. The page
title is also displayed by Google and other search engines when they display a list of your page.
66
Web Studio uses Untitled 1, Untitled 2, etc. as the title when you add pages to your website. You
rename the pages using the Page tab commands or the page’s right-click menu. The name you
choose should reflect the content or purpose of the page. The untitled numbering is arbitrary and
does not affect the order of the pages in your website. The page order is determined by the way
that you link your pages together.
Naming the Home Page

The Home page is the page that visitors see first when they go to your website. From the Home
page, visitors click on buttons and other links to travel around your site. Web Studio automatically
designates the first page in the Page List as the Home page. This page has a little house icon next
to the name. Although you can choose to designate any page
as the Home page, you can only have one Home page in a
website. When you choose another page for the Home page, Do not name your Home
Web Studio changes the first Home page into a normal page page “Home” or “index.”
and the house icon moves to the new Home page.
You should name your Home page with a name that reflects
your website. For instance, if you own a dog grooming business, you could name your Home page
“Grooming.” Do not name your Home page “Home” or “index.”
Index.html and default names

Most hosting companies use index.html as your Home page’s file name. Other companies use
default for the file name. These names are different than the name you should give your Home
page. The hosting company is referring to the file name of the Home page—not the title that you
give your Home page. Web Studio automatically names the Home page’s file, index.html.
You should name your Home page with the title that you want displayed in
the browser, your visitor’s Favorites menu and the search engine listing.
Change the Home page file name

Web Studio automatically sets the file name of index.html on the page that you designate as the
Home page. If your hosting company uses default instead of index.html, you can change it in the
Web Site Properties dialog under the Home page section.
67
 Click on the Website Properties at the far right of the Caption Bar. This opens the Web Site
Properties dialog.
 Click on the Home Page section.
 Click in the radio button to choose index or default.
 Click OK.
Important Naming Note

Some hosting services do not allow you to use all of the characters on the
keyboard, so it is best to use letters or numbers when you name a page. If you
use unusual characters, your hosting company will eliminate the ones it does
not allow when you upload your website to the internet.
Some hosts limit the length of the names to 14 characters. If the name is long,
only the first 14 characters are uploaded.
Name or rename a page

You can rename any page using the right-click menu or the Rename command in the Page
group of the Page tab. Web Studio changes the page’s name in the Page List, the window’s title
bar, the Links Gallery, and in any links you’ve added to your website.
68
 Click on a page name in the Page List and then do one of the following:
1. Click on the Page > Page > Rename command or
2. Right-click and choose Rename Page from the menu.
 The Rename Page dialog opens.
 Key in the name that you want for the title of the page.
Working with a Master Page

A Master Page allows you to create quick consistent page layouts for all of the pages in your
website. This is because everything you place on the Master Page is automatically placed on the
other pages. Once you designate the Master Page, you can continue to use it for all of the changes
you want to automatically apply to the other pages.
The Master Page is especially useful when you are The Master Page allows you
working with drop down menus. It is easy to add and to place repeating text and
remove pages from your website when you want to make objects on every page in the
menu changes on only one page. same place. It is not a
separate page in your
Besides using the Master Page for layout and design, you website.
can also use it for links. When you place an object on the
Master Page and add a link, the object with the link is
placed on all of the other pages. For instance, if you want Footer
Links to appear on all of the pages, add them to the Master Page and
they are automatically placed on the other pages.
You choose which page is your Master Page. Later, you can change the Master Page or turn off
the function completely if you decide you do not want to use it. There can only be one Master
Page in a Project.
69
Choose a Master Page
Use the Set Master Page command Use the page’s right-click menu
 Design the page that you want to  Design the page that you want to
use as the Master. use as the Master.
 Click on the page’s tab to bring the  Right-click over the name of the
page to the front of the workspace. page in the Page List. This
 Click the Page > Page > Set Master displays the right-click menu.
Page command.  Click on Use as Master Page.
 The page is now the Master Page. A  The page is now the Master Page
Master Page icon appears in front of and a Master Page icon appears
the name in the Page List. in the Page List in front of the
 The page’s name changes to Master page name.
Page in the Page List.  The page’s name changes to
Master Page in the Page List.
Change the Master Page

 Click on the tab of the page that you want to make the new Master Page or click the page’s
name in the Page List.
 Click on the Set Master Page in the Page tab. This opens the Change Master Page to this
Page? dialog.
 Click Yes to change the Master Page.

 The page’s name reverts to its original name in the Page List.
 The new Master Page’s name is changed to Master Page.
You can also choose Use as Master Page from the page’s right-click menu.
70
Stop using a Master Page

You can decide at any time to turn off the Master Page function. However, when you do this it
removes all of the Master Page contents from all of the other pages. When you do not use a
Master Page, you can use the Duplicate Page button to make copies of pages.
 Click on the tab of the Master Page to bring it to When you turn off the Master
the front of the workspace. Page, it removes all of the
 Click on the Page > Page > Set Master Page Master Page contents from the
command. This opens the Do you want to stop other pages. It does not affect
using the Master Page? dialog. any of the pages that are
 Click Yes to stop using the Master Page. already on the internet.
You can also choose Use Master Page in the page’s right-click menu. This
opens the Do you want to stop using the Master Page? dialog. Click Yes.
Working with the Google Site Map

Web Studio automatically creates a Google Site map for your site. When you upload, the site map
is uploaded as well and Google uses it to determine what pages that you want to list on Google.
You can also determine the priority of your pages in the site map and tell Google the frequency to
go back and search each page.
It is easy to tell if your page is included in the Google Site Map by looking at the Google Site Map
command in the Page tab. If the command is highlighted, your current page is included. If the
command is not highlighted, the current page is not included.
Another way to see if your current page is included is to view the page’s right-click menu or the
Page List Menu. If Include in Google Site Map is not checked, then that page is not included.
Use the Page List to include or remove pages from the Google Site Map
 Go to the Page List.
 Right-click on a page’s name or left click on the Page List button.
 Look for the Include in Google Site Map item in the menu.
 Click to place or remove a check in front of this command. A checkmark means that the page
is included in the Google Site Map. If it does not have a checkmark, it is not included.
71
Use the Include in Google Site Map command to include or remove the page
 Click on Page > Include Page In > Google Site Map to highlight the command and include
the current page in the Google Site Map.
 Click on Page > Include Page In > Google Site Map to remove the highlight from the
command and remove the current page from the Google Site Map.
Assign Google Site Map Priority to pages using the Page List
 Right-click on the page’s name to view the menu.
 Click on Google Site Map Priority. A list from 0-10 is displayed.
 Click to choose the page’s priority. Ten is the highest priority. Your Home page should be a
ten. Not all pages in your website are the highest priority.
 Choose a priority for the other pages in your site.
Assign Google Site Map Priority to pages using the ribbon command
 Click on a page tab or a page name in the Page List to bring the page to the top of the
workspace.
 Click on Page > Include Page In > Google Site Map>Google Site Map Priority. A list from
0-10 is displayed.
 Click to choose the page’s priority. Ten is the highest priority. Your Home page should be a
ten.
72
Choose the Google Change Frequency for the page

This tells Google how often to search the page. The more often the information on a web page
changes, the more frequently you will want Google to search the page. Here is a chart to help
you choose a search frequency for your pages.
Web Studio Galleries

Always The information on this page is constantly changing.
Hourly The information on this page is changes hourly.
Daily The information on this page changes daily.
Weekly The information on this page changes weekly or changes frequently.
Monthly The information on this page changes monthly or changes infrequently.
Yearly The information on this page usually does not change.
Never This is a page that you never want Google to search. It can be a page
that has no links, a graphics page that is not included in your website, a
page with confidential information, or any other page that you do not
want Google to search.
 Click on Page > Include Page In > Google Site Map>Google Change Frequency.
 Choose a selection ranging from Always to Never.
73
Change the Page Order in the Page List

In some cases, the page order in the Page List is important. Page order affects the layout of drop
down menus and the order of Footer Links. There are several ways to move a page up or down the
list to rearrange the pages:
Right-click menu. Right-click over a page name and choose Move up or Move Down to
move the page one position up or down the list.
Alt + page up/down. Hold the alt key and press page up or page down repeatedly to move
the page up or down the list.
74
75
Chapter 7: Working with Pages

Your website is built from individual pages. Each page is a file that contains graphics, text, and
other objects that can be viewed in a browser. You can design web pages in any order, choose
which pages to link together, and then upload the linked pages to the internet. These linked pages
make up your website. When you are building your website, you use the pages on the workspace
and the Page List window on the right of the workspace to manage
your pages. See The Page List chapter for a complete description of
the Page List.
The pages in your Project are located in the center of the workspace.
Each page is displayed in its own window for easy editing. A
colored tab at the top of each page is labeled with the page name.
When you want to work on a page, you bring the page to the front of
the other open pages by clicking on the tab. Pages in the Project are
labeled Untitled until you give them a name.
Page margins and page guides. Pages contain page margins and page guides that give you
visual guidelines to help you design your pages and keep them all the same size. The guides are
set according to the size that you want your pages to be when they are on the internet.
76
Page Guides
Page size is measured in pixels. The size of a web page depends on the position of the objects on
that page. The page automatically expands to include all of the objects on the page. When the page
does not fit within the browser, the visitor uses scroll bars to see everything on the page. Most
visitors are comfortable scrolling down a page, but it is considered poor design to make your
visitors scroll horizontally. Even scrolling down can be
annoying if the page is too long.
Page guides help you keep your pages to a The background always fills
predetermined size. Most designers use 1024 pixels as the browser no matter how
the maximum width of the page. The page guides do large or small you make your
not stop you from placing objects anywhere on the pages.
page; they just show you where the edges of the page
size are located. The page guides are not seen on the
internet.
In addition to page sizes for websites, the Page Size command contains sizes for the Apple I
Phone and paper sizes for 8.5x11 Portrait, 8.5x11 Landscape, A 4 Portrait and A 4 Landscape.
These sizes help you use Web Studio to make flyers, signs, and other documents. See the Desktop
Studio chapter.
Set the Page Guides

 Go to the Page Layout > Site Setup group.
 Click on the drop down arrow next to Page Size
command. Most common page size:
 Set the Page Size in one of two ways 1024 x768
1. Click on the desired size (1024 x 768 is the most
common). This automatically sets the size that you choose.
2. Click on Custom Height and Width. Enter your custom Height and Width and then click OK
when you are finished to close the window and set the size.
The values entered affect how your site is centered in a browser. Experiment
with different values to see the effects. You can enable or disable centering
your website in Website Properties>General section by checking or
unchecking Center pages of this site in browser.
77
Page Margins
The page margins are different than the page guides. The page guides set the size of the page and
the page margins put a space between the page guides and the edge of the page. These margins
help you keep objects away from the edge of the page, but they are purely a visual guide and the
sizes do not affect the code that Web Studio creates. The page margins are set at 15 pixels from
the edge, but you can change the size.
Set the size of the Page Margins

 Click on Margins. This opens the Margin Sizes dialog.
 Key in the Horizontal and Vertical Margin Sizes. The size must be between 0 and 144.
Show/Hide the Page Guides and Margins

 Click Show Guides to hide the Page Guides and Page Margins.
 Click Show Guides again to show the Page Guides and Page Margins.
Splitting the Workspace to See More than One Page at a Time

In the default view, each page of your website is displayed in the full screen on the workspace.
The pages are stacked on top of each other and you can easily view a specific page by clicking the
page’s tab or clicking the page’s name in the Page List.
However, the workspace can be split so that you can see more than one page at a time. The pages
can be arranged side by side (vertical tab group) or top and bottom (horizontal tab group). This is
helpful when you want to align designs, drag and drop graphics from one page to another, or even
use one of the windows to browse the internet. You can quickly move between full screen and
split screen making this an easy feature to use.
78
Viewing Pages Side by Side (Vertical Tab Group)
Use drag and drop to view pages side by side

 Click on the page tab you want to see in a new window.
 Drag it down until the cursor changes to an icon that looks like a document.
 Release the mouse button and the page opens in a new window next to the other pages. This
creates a new vertical tab group.
If you drag the cursor down until you see a horizontal gray line, you went too
far down the page. You will get a horizontal view instead of a vertical view.
See the next section on how to arrange pages horizontally.
 Repeat this to add other pages to the tab group.

79
Use the right-click menu to view pages side by side

 Right-click over the page tab.
 Click on New Vertical Tab Group.
 The page opens in a new window next to the other pages.
Rearrange the vertical tab groups

 Click on a page tab and drag it to the left or the right until it is next to a tab in another group
and then release the mouse.
 That page is now part of the same tab group.
 Repeat this to arrange pages in different tab groups or combine all of the pages back to
original full screen view.
80
Viewing Pages Top and Bottom (Horizontal Tab Group)
Use drag and drop to view pages top and bottom

 Click on the tab of the page that you want to see in a new window.
 Drag the tab all the way down the page until you see a gray horizontal line across the page.
As you drag it, the cursor changes to an icon that looks like a document.
 Release the mouse button and the page opens below the other pages.
 Repeat this for other pages that you want to open in new windows.
81
Use the right-click menu to see pages top and bottom

 Right-click over the tab.
 Click on New Horizontal Tab Group.
 The page is now below the other pages.
Rearrange horizontal tab groups

 Click on a page tab and drag it to the top or bottom until it is next to a tab in another group
and then release the mouse.
 That page is now part of the same tab group.
 Repeat this to arrange pages in different tab groups or combine all of the pages back to
original full screen view.
Scrolling to View All of the Tabs in a Group

When you have multiple pages within a group, some of the page tabs may be hidden because there
is not enough space to see them all. A solid arrow to the side of the page tabs means that there are
some hidden page tabs. Click on the arrow to scroll through the hidden pages. These arrows appear
in both vertical and horizontal split screen views.
Browsing the Internet in a New Tab Group

The Web Studio browser enables you to browse the internet from within your workspace. When
the browser opens, it displays in a new window with a tab just like your other pages. This means
that you can browse the internet and continue to have full access to your other pages. Now you can
move objects easily from the internet onto your pages. Since there are many free graphic sites on
the web, you can create a graphic for your site and then drag and drop it onto your page. The more
that you use this feature, the more you will like it.
You open the Web Studio browser using the Preview Page command or by clicking on the Browse
the Internet command in the View > Browse Internet group. When the browser is open in the
workspace, the Internet and Browsing tabs are added to the ribbon.
82
Use the Browse command to browse the internet

 Click on View > Browse Internet > Browse the Internet command. This opens a browser
within your workspace in a new page.
 Arrange the page in a new tab group. See the previous section in this chapter about viewing
pages in a vertical or horizontal tab group.
Use the Preview Page command to browse the internet

 Click the tab of the page that you want to Preview.
 Click on Home/Page > Preview > Preview Page. This opens the page within the workspace.
The tab is labeled Preview Page: “Page Name.”
Make sure Use Web Studio Browser is selected under the Preview Page
command. If Use Default Browser is selected, then the page’s Preview does
not open within the workspace. It opens with your computer’s browser.
 Arrange the Preview Page in a new vertical or

horizontal tab group.
You can drag and drop graphics
 Click on the Browsing tab, enter the URL of a
from one page to the other. This
website in the Address field, and then press
includes graphics from the internet.
Enter. This opens the website in a new page on
the workspace. You can use the navigation tools You can also view Web Studio
and Address field to browse the internet from Wiki in the Preview page.
this page.
83
Use the browse tools to navigate the internet

When you use the Web Studio browser, the navigation tools are displayed above the Caption
Bar. Since you are connected to the internet, you can even visit other websites by using the
Address field in the browser.
Web Studio keeps track of the websites that you visit when you browse the internet from the
workspace. The history is kept during one session and is erased when you close Web Studio.
The Page Properties Dialog

Right-click over a page’s name in the Page List and choose Page Properties from the Page
Background Menu to activate the page’s Object Properties dialog. This dialog provides you with
information about the page including the size and download times. If you use iHostStudio as your
hosting company, you can create a Password protected page in this dialog. It also contains a
Section where you can place Notes about the background.
84
File Type section
Page’s File Type. The normal file type on the web is .html. Only use other file types when
you are creating a page of that type. If you use the wrong file type the page may not display
correctly.
Size and Download Times section
This section allows you to check the total memory size of your page and the approximate time it
will take your viewers to download the page to view it. This is helpful when your page contains
a lot of graphics, such as photos, that can slow the download times.
85
Password section
If you use iHostStudio as your hosting company, you can create a password protected page on
your site. The password protect does not work in Preview, but you can check it with trial
hosting.
HTML Build Section
Notes section
You can use this area to keep notes about the page or the background.
86
87
Chapter 8: Backgrounds
Backgrounds are the colors or designs that fill the space behind all of the objects on a page. Much
of the overall tone of your site is determined by the background that you choose. Backgrounds are
made by tiling little squares across the page. These tiles automatically fill the browser regardless
of the size of the browser or the website.
Most graphics that are created specifically for backgrounds are made to
look seamless so that they cover the entire web page without a break in
the pattern. Any graphic can be used as a background, but if the
graphic is not designed to be seamless, you do not see the edges of the
tiles.
Web Studio ignores the background and considers it to be a blank part
of the page. When we tell you in this manual to click on a blank
portion of the page, we mean that you should click anywhere on the
background that does not have an object covering it.
The Blank Spot on a page

When the instructions tell you to click on a blank spot on the page, you
should click on any part of the background that does not have an object over
it. Remember if you place a large shape over a background during design, you
need to move the mouse to the edge of the page to find a blank spot.
Placing a Background on the Page

There are several ways to add backgrounds to your page. You can drag and drop backgrounds
from the Backgrounds Gallery, use one of the Background commands to create colored
backgrounds or insert backgrounds from a file. The Insert Backgrounds command can bring in
backgrounds that you create in other programs and backgrounds that you obtain from the internet.
There is no end to the number of backgrounds that you can use with Web Studio.
There are two types of backgrounds: solid colored
backgrounds and backgrounds with texture or A new background automatically
design called graphic backgrounds. deletes the previous background.
Add a graphic background from the gallery

 Click on the Backgrounds Gallery tab to open the gallery.
 Scroll to the background that you want.
 Drag and drop the background onto the page.
 The background fills the page.
88
Add a solid colored background with the Background Color command

The Background group in the Page tab has a Color command that makes the page background a
solid color. Within that command is a Color dialog that allows you to choose literally any color
for your background. The Color and Shapes chapter has a complete description of the fields in
the Color dialog. This section reviews the steps to choose color.
Choose a color from the Color dialog
 Click on Page > Background > Color. This opens the Color dialog.
 If you want to use one of the colors in this window, click on it and the page background fills
with that color.
 If you want more color choices, click on Eyedropper & More. This opens the Colors Standard
and Colors Custom dialogs.
Standard. This section provides you with a wider palette range, a range of grayscale
colors, and an eye dropper feature to select colors that are on your page or anywhere on
your monitor.
Custom. This section provides you with a Colors window, a luminosity bar, an
eyedropper feature, and fields to enter RGB (Red, Green, and Blue), Lum (Luminosity), Sat
(Saturation), and Hue values.
89
Colors dialog Standard tab

This is where you can choose a Standard Color or Select a color from your page or anywhere in
your monitor.
Standard color
 Click on a color.
 View the color in the New window.
 Click OK to apply the color.
Select a color using the eye dropper

 Click the Select button. Your mouse changes from an arrow
into an eye dropper.
 Move the eye dropper until the tip of the dropper is over the
color that you desire. This can be anywhere on your page or
monitor.
 Click over this color and check the New window to see the
color.
 If you want more choices, click on the Custom tab.
90
Colors dialog Custom tab

The New and Select Color sections are the same as the ones in the Standard tab. The difference
is that the Custom tab gives you the ability to choose from a full range of colors and customize
the colors that you want to use. Choose a color from this tab and then click OK to apply the
color to the background.
Add a graphic background from a file

There are many backgrounds available on the internet or you may want to make backgrounds of
your own in a different program. Regardless of the source, you can save any graphic and then
insert that file as a background. You can even copy a text object and paste it as a background.
 Click on Page > Background > Graphic. This opens the Open dialog.
 Find and select the file that you want to use as a background.
 Click Open.
91
Copying and Pasting Backgrounds

You can copy a graphic background from one page and use it on another. Solid colored
backgrounds cannot be copied. You can also copy a graphic or text and choose to paste it on the
page as the background. When you choose to paste an object as a background, the object fills the
background on the page. The right-click menu and the ribbon both contain Paste As Background
commands.
Copy and Paste an existing graphic background

 Click on Home > Edit > Copy>Copy Background
or you can right-click over the background and
choose Copy Background from the Page You can copy any graphic
Background Menu. background. You cannot copy
solid color backgrounds. Use
 Open the page that you want to fill with the
the Background Color
background.
Command to change a solid
 Click on Home > Edit > Paste>Paste Background
color background.
or right-click over a page and choose Paste as
Background from the Page Background Menu.
Copy and Paste a graphic object or text to use as a background

 Select a graphic object or text object.
 Click on Home > Edit > Copy>Copy or right-click over the object and choose Copy.
 Open the page that you want to fill with the background.
 Click on Home > Edit > Paste>Paste Backgrounds.
Remember that a background is made by tiling a graphic across and down the
page. Depending on the graphic that you choose, you may see seams or get a
background that does not look good.
Changing and Removing Backgrounds

If you want to completely remove the background there are several ways to do it. When you
remove the background, it looks like a white background on the internet. If you only want to
change the background, you can simply add another and it automatically replaces the background.
Change the background in one of these ways

1. Click the Undo command immediately after adding a background.
92
2. Click ctrl+z to undo immediately after adding a background.

3. Add another background.
Remove the background completely in one of these ways

1. Right-click over the background and choose Remove Background from the Page Background
Menu.
2. Click on Page > Background > Color>Remove Background.
3. Click on Page > Background > Graphic>Remove Background.
4. Click on Insert > Illustrations>Background>Remove Background.
Backgrounds and the Page Properties Dialog

Right-click over the background and choose Page Properties from the Page Background Menu to
activate the page’s Object Properties dialog. One of the sections in the dialog is for Notes. You
can use this area to record information about the background. See the Working with Pages Chapter
for a complete explanation of the sections in this dialog.
93
Chapter 9: Working with Objects

Objects are the building blocks for your website’s pages. Every item on your page is an object.
This includes photos, graphics, banners, text, and other types of objects.
For many operations, Web Studio does not distinguish between different types of objects; most of
the rules for working with objects are used for all types of objects.
Objects can be resized, rearranged, combined, and much more. Each
object is on a separate layer. This means that you can easily overlap
and position them on the page. The Page Layout tab and the object’s
right-click Selected Object Menu contains commands that can help
you size and align objects on the page.
This chapter explains you how to work with objects in general.
Other chapters provide instructions for specific types of objects.
Adding Objects to a Page

There are several ways to add objects to a page. You can drag and drop objects from the galleries
onto the page or you can insert your own graphic files.
Drag an object from a gallery

 Click on a gallery’s name tab to open the gallery.
 Scroll to find the object.
 Drag and drop the object onto the page.
 Click and drag the object to position it on the page.
Insert an object using the Insert command

The Insert tab contains a large selection of objects that can be inserted into a page.
Backgrounds, text, Flash, videos, and sounds are among the objects that can be inserted. Here
are general instructions for inserting a picture or graphic. Individual chapters such as the Multi
Media and Text chapters cover specific command instructions.
 Click on Insert > Illustrations > Picture command. The Open dialog then opens.
 Navigate to the object file that you want to insert, such as a GIF file.
 Select the file.
 Click Open. The object is placed on the page.
94
Copy and Paste graphics or text from other applications

 Locate the graphic object or text in another application.
 Copy the object or text from the application.
 Go back to your Web Studio project and Paste in one of two ways:
1. Click on Home > Edit > Paste.
2. Right-click over a blank spot on the page and choose Paste from the Page Background
Menu.
Drag a file from Windows onto the page

 Locate the file that you want in any Windows folder.
 Drag and drop the file directly onto the page.
Drag and drop a graphic or text from a browser

 Open the browser and locate the graphic that you want to use.
 Select the graphic or text.
 Drag and drop the graphic or text directly onto the page.
 If you drag text from the application, a new text object containing the dragged text will be
automatically created and placed on the page.
Drag and drop a graphic or text from other applications

 You can do this if the other application supports drag and drop.
 Locate the graphic or text from the other application.
 Select the graphic or text.
 Drag and drop the graphic or text directly onto the page.
 If you dragged text from the application, a new text object containing the dragged text is
created automatically and placed on the page.
You can drag and drop any file from Windows onto a page or object. If the
file is one of the 50 files that are recognized by Web Studio, then Web Studio
manages the file appropriately. If the file is a graphic for example, it is turned
into a graphic object on the page. If it is a Word Document file, it is turned
into a text object. If the file does not translate into a native Web Studio object
type, Web Studio converts it into a download link.
95
Selecting Objects
Many functions and commands require that you select one or more objects before you can perform
the command. When you select multiple objects, it is sometimes necessary to select them in a
certain order. Instructions for individual commands tell you whether selection order is important.
Generally speaking, the selection order is important when you want to view objects together like
Slide Shows.
Selection handles
When you select an object, you see a group of
black boxes around the object. These are selection
handles. You can move, align, crop, resize, and
perform many other functions with an object after
it is selected.
Select an object by clicking

 Move the mouse over the top of an object.
 Click the left mouse button.
 The selected object now displays selection handles.
Deselect an object Sometimes, the selection order

is important. For example, the
There are two ways to deselect objects:
order in which you select
1. Click on a blank spot on the page to deselect an graphics determines the order
object. Remember that when a large graphic is a you will see them in an
backdrop on your page, then you must go to the far animation. These instructions
right or left in order to find a blank spot on the will tell you when to
page. determine a selection order.
2. Hold down the shift key and double-click over the
object.
Select multiple objects by clicking

If objects are already selected on the page, then deselect them before you begin this selection
method. If you do not do this, then the new selections will be added to the previous selections.
See the Add objects to an existing selection later in this section.
 Press and hold the shift key.
 Click on a series of objects.
96
Select multiple objects by dragging

 Move the mouse to a blank spot on the page.
 Press and hold the left mouse button.
 Drag the mouse so that a rectangle appears and touches all of the objects that you want to
select. The rectangle does not need to surround the objects.
 Release the mouse button.
 All objects are selected.
Select all objects

There are two ways to select all of the objects on the page:
1. Use the Select All commands: Text > Clipboard > Select All or
Home > Edit > Select All.
2. Press ctrl+a.
Deselect all objects

 Click on a blank spot on the page in order to deselect all objects. Remember if a large graphic
is the backdrop on your page, then you must go to the far right or left of the page to find a
blank spot.
Add objects to an existing selection (extend a selection)

 Click the other objects that you want to add to the selection.
Remove objects from an existing selection

 Double-click on each object that you want to remove from the selection.
Moving Objects
There are several ways to move objects on the page and to move them from one page to another.
Move one object with the mouse

 Press and hold the left mouse button over an object.
 Drag and drop the object to the new location.
97
Move multiple objects with the mouse

 Select the objects. Remember to hold the shift key while you select more than one object.
 Press and hold down the left mouse button over one of the objects.
 Drag and drop the objects to the new location.
Move objects to a specific position numerically

 Right-click over the object and choose Properties from the Selected Object Menu.
 This opens the Object Properties dialog. See the end of this chapter for a complete
description of all the sections in the Object Properties dialog.
 In the General section, check the Lock Object Size checkbox.
 Enter the new position in the Left and Top fields. Do not enter a Right or Bottom position.
These are determined automatically depending on the size of the object and the page.
 Now, un-check the Lock Object Size checkbox.
 Click OK to close the Object Properties dialog.
Nudge objects one pixel at a time

 Select one or more objects.
 Use the up, down, left, or right arrow keys on the keyboard to nudge the object one pixel at a
time.
 Press and hold one of the arrow keys to move the object continuously.
98
Nudge objects ten pixels at a time

 Hold down the shift key.
 Use the up, down, left, or right arrow keys on the keyboard to nudge the object ten pixels at a
time.
 Press and hold one of the arrow keys to continuously move the object.
Constrain movements to horizontal or vertical

 Press and hold down the shift key.
 Click on an object and drag it horizontally or vertically.
 To change directions, release the shift key, press again and drag the object.
Push objects down the page

This command adds space below an object which causes all of the objects below it to be pushed
down the page. This is useful for adding space
between objects on the page so you can insert
new objects. The P key (push down) and the U
key (pull up) are hot keys for
 Select the object that you want to insert space moving objects. Hot keys are not
below. case sensitive.
 Press the P key to push all of the objects below
the selected object down the page one pixel at
a time.
 Press and hold the P key to push the objects down multiple pixels at once.
 Press and hold the shift key, then press the P key to push the objects down ten pixels at a
time.
Pull objects up the page

This command removes the space below an object so that objects below it are pulled up the
page. This is useful when you delete an object and you want to move everything up or when
you want to tighten the space between objects.
 Select the object that is above the space you want to remove.
 Press the u key to delete one pixel of space at a time below the selected object and pull the
objects below it up the page.
 Press and hold the u key to move the objects up multiple pixels at once.
 Press and hold the shift key, then press the u key to pull the objects up ten pixels at a time.
99
Move objects to another page using Copy and Paste.

 Select one or more objects. Hold down the shift key if
you are selecting more than one object. Paste in Place puts
 Choose Copy or Cut from the ribbon or the right-click objects in the same
Selected Object Menu. place on the new page
 Click the page tab to go to another page. as they were on the
 Choose Paste or Paste in Place from the ribbon or previous page.
from the right-click Selected Object Menu.
Move objects to another page using drag and drop

 Select one or more objects. Hold down the shift key if you are selecting more than one object.
 Hold down the ctrl+shift keys.
 Click on the selected objects and drag them onto the page tab where you want them to go
(keep holding the ctrl+shift keys and mouse). This opens the page where you want the objects
to go.
 Now drag the objects off the tab and drop them onto the page where you want them to go.
This is the easiest way to move objects if you do not need to use Paste in
Place.
Split the screen to drag and drop objects from one page to another page
The Working with Pages chapter presents detailed instructions for working with a split screen.
This section contains an overview of the steps necessary to create a split screen in order to drag
and drop objects.
Split the screen
 Click on the tab of the page that you want to see in a new window.
 Drag it down until the cursor changes to an icon that looks like a document.
 Release the mouse and the page opens in a new window alongside the other windows.
Drag and drop objects
 Select one or more objects. Hold down the shift key if you are selecting more than one object.
 Hold down the ctrl+shift keys.
 Click on the selected objects and drag them onto the page where you want them to go.
Go from split screen back to full screen view
 Click on the page tab of the new window.
 Drag and drop it next to the other page tabs.
 The windows are now in full screen view.
100
Editing an Object’s Contents

All objects contain “stuff”, whether that stuff is text, a photo, a slide show, a video or a Flash
animation. Most objects or their properties can be edited in Web Studio.
As a general rule, double-clicking on an object opens a dialog that allows the object to be edited.
Objects that do not have a specific editor use the Properties dialog to edit properties.
Double-click. This opens the object’s editor.
Right-click. This gives you the Selected Object Menu. Choose Properties to display the dialog.
Aligning Objects
The Align commands in the Page Layout tab can help you quickly and easily align objects to the
page and to each other. You can also use the right-click menu to perform these commands.
Align tops, bottoms, left sides, and right sides

You can align a group of objects so that they are in perfect alignment with the top, bottom, left
sides or right sides. Web Studio uses the highest, lowest, left-most, and right-most of the
selected objects to bring the others into alignment. This is useful when working with buttons,
photos or any other objects.
 Select the object that is the highest, lowest, left-most, or right-most.
This is the object Web Studio uses to align the other objects.
 Hold the shift key and then click on the other objects in any order to
extend the selection.
 Click on Page Layout > Align > Tops, Bottoms, Left or Right.
 The objects are now aligned in relation to the first object selected.
Using the Grid to Align Objects

Many professional graphic designers use grids for creating page layouts. A grid helps you place
objects and align them along perfectly straight horizontal and vertical lines.
The Web Studio grid is set at 36 pixels for both the horizontal and vertical measurements. This
corresponds to ½ inch in each direction. You can change the grid size and establish strict
alignment rules when designing your pages.
If you change the location or size of an object numerically with the Object
Properties dialog, then it will not align itself to the grid. Web Studio assumes
that you want to “violate” the grid when you do this. Note that cropping does
not snap to the grid. This is because cropping is based on the visual content of
the graphic, not its size or location.
101
Turn the grid on and off

 Click on Page Layout > Grid > Show Grid. This turns on the grid.
 As you move objects on the page, they “snap” to align with the closest line in the grid.
 To turn the grid off, click on Page Layout > Grid > Show Grid again.
Whatever corner of an object is the closest to the grid is the one that is
snapped to the grid. For instance, if the upper left corner of an object is
closest to the grid, then the object’s snaps to the upper left corner to the grid.
Change the grid size

 Click on Page Layout > Grid > Grid Settings. This opens the Grid Size dialog.
 Enter a value for the horizontal size and/or the vertical size.
 Click OK.
The grid display changes as the settings get smaller.

102
Centering Objects
The Center commands in the Page Layout tab allow you to center objects to the page or to one
another. You can also use the right-click Selected Object Menus to perform these commands.
Center objects relative to each other

This is one of the situations in which the order you select the objects matters. The first selected
object is the basis for the centering of the other objects. You can center the objects horizontally
or vertically.
 Select the first object. This is the object that Web Studio uses to center the other objects.
 Hold down the shift key and then click on the other objects in any order to extend the
selection.
 Click on Page Layout>Center > Horizontal or Vertical. Objects are centered in relation to the
first selected object.
Center objects relative to the page

Web Studio uses page size as the measurement for centering objects on the page.
 Select the objects.
 Click on Page Layout > Center > To Page.
 The objects are centered on the page.
To set the page size: Click on Page Layout > Site Setup group. Click on
the drop down arrow next to the Page Size command and then click on the
desired size (1024 x 768 is the most common size).
103
Stacking Objects
Each object on a page sits on a different layer. Layers are like pieces of transparent paper that are
stacked on top of each other. You can arrange the objects so that you can see all of them through
the paper, or you can overlap them in different ways.
As an object is moved, it can overlap other objects
that are located on lower layers. You can rearrange Each object is on a separate
the stacking order to create your design and arrange layer. This means that you can
the objects for things like slide shows. easily overlap or stack them.
The Bring To commands in the Page Layout tab allow
you to bring objects forward or backward through the
layers. You can also use the right-click Selected Object Menus to perform these commands.
Move an object to the top or bottom of the stack

 Select an object.
 Click on Page Layout > Bring To > Front or Back.
 The object is moved to the front or back of the stack.
Move an object up or down through the stack

When you move an object forward or backward through the stack, you will not notice any
change unless the items are overlapping.
 Click on Page Layout > Bring To > Forward or Backward.
 This moves the object Forward or Backward one layer at a time. Repeat to continue to move
the object through the stack.
Spacing Objects
The Space group commands allow you to quickly space a series of objects evenly across or down
a page. This is especially helpful when you are working with repeating objects, such as buttons.
You can also space the objects so that their edges touch or so that there is only 1 pixel between
them. These commands ignore the Snap to Grid function in order to ensure that the spacing is
perfectly even. You can also use the right-click menus to perform these commands.
Space objects vertically or horizontally

 Put the top and bottom objects in the desired position. The other objects are spaced evenly
between these two.
 Select all of the objects.
 Click on Page Layout > Space > Vertically or Horizontally.
104
Space with 1 pixel between objects

 Select the objects that you want to space.
 Press and hold the ctrl+shift keys.
Space objects with edges touching

 Select the objects that you want to space.
 Press and hold the ctrl key.
Resizing Objects
You can resize most types of objects. The easiest way is to select an object and drag the handles to
make the object smaller or larger. If you use the corner handles, then the object will grow
proportionally larger or smaller. You can use the other handles to enlarge or reduce the object in
one direction only.
Hold down the shift key and then drag a corner handle to resize the object in
both directions.
Objects that cannot be resized

Some objects cannot be resized due to the nature of their content. For instance, you can make
text objects wider, but not longer than the text within the object. Two other types of objects that
cannot be resized are:
105
1. Backgrounds cannot be resized since the content of “size” does not apply to backgrounds.
2. HTML objects can be resized. However, the content of the HTML object will ultimately
determine the size when it is Previewed or in a browser.
Resize by dragging
 Move the mouse over a handle until you see an arrow. Use a corner handle to resize the object
and keep its proportions. Use a side or top handle to resize the object in one direction.
 Hold down the left mouse button and drag the handle in order to resize the object.
Resize an object numerically

 Right-click over an object and choose Properties from the Selected Object Menu.
 Check the Resample Graphic box prior to resampling. This helps increases the visual quality
of the object. Do this if the graphic has not previously been resampled.
 Resize non-proportionally: fill in the Height and Width fields.
 Resize proportionally: check the Proportional Resizing box and then fill in a Height or Width.
Resize to an exact size

 Right-click over an object and choose Properties from the menu.
 Resize non-proportionally, fill in a Height and Width.
 Resize proportionally, check the Proportional Resizing box and then fill in a Height or Width.
Resizing Objects to Each Other

Use the Make Equal group commands to make objects equal size, equal width, or equal height.
The objects are resized to match the size of the first object selected; therefore the selection order is
important.
Resize multiple objects to the same size Objects are resized to match the
size of the first object selected.
 Click on the Page Layout tab. Therefore, the selection order is
 Select the object that is the size that you want the important.
other objects to become.
 Press the shift key and then select the remaining
objects in any order.
 Click on the Make Equal > Size, Width or Height commands in order to resize the objects.
106
Resampling Graphics after Resizing

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.
Turn automatic resampling on and off

 Click the Web Studio Button>Options. This opens the Web Studio Preferences dialog.
Turn on automatic resampling. Click to check the box for Resample Graphics when
resizing.
Turn off automatic resampling. Click to uncheck the box for Resample Graphics when
resizing.
Resample a graphic 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.
107
Cropping Objects
Cropping removes a portion of the graphic by trimming its edges. Cropping is different from
resizing because it cuts off a portion of the object. When you resize an object, the whole object
becomes larger or smaller without losing any part of the image.
Objects that cannot be cropped

Some objects cannot be cropped due to the nature of their contents.
 Text objects cannot be cropped.
 Thumbnails cannot be cropped. However the photo or graphic that is used to create the
thumbnail can be cropped before it is turned into a thumbnail.
 Flash animations, audio and video objects, rollover buttons, animations, HTML objects, and
templates cannot be cropped.
Crop the top, bottom, and sides

 Select the object to be cropped.
 Press and hold the C key—you do not need to press the shift key
 Drag the top, bottom, or side selection handles to resize in on direction.
 Drag in order to crop. As you drag you will see a cropping rectangle that shows what portion
of the graphic will be kept.
 Release the mouse to crop the graphic.
Crop in two directions at the same time

 Select the object to be cropped.
 Press and hold the C key—you do not need to press the shift key.
 Move the mouse over a corner handle.
 Drag to crop in any direction. As you drag you will see a cropping rectangle that shows what
portion of the graphic will be cropped and deleted.
 Release the mouse to crop the graphic.
108
Duplicating Objects
There are several ways to duplicate objects. The Copy and Paste commands are located both on
the ribbon and in an object’s right-click menu. The usual keyboard shortcuts can also duplicate
objects. One of the quickest ways to duplicate an object is to hold the ctrl key, then click and drag
the duplicated object. Actually, you do not need
to drag the object to duplicate it. But if you do
not drag it, you do not see it because the If you click on an object when the
duplicate is directly underneath the object. ctrl key is pressed, you create a
duplicate. If you do not drag, the
If you are copying items that will be pasted on duplicate hides under the object so
another page, you can use Paste in Place to put you cannot see it.
the objects in the same spot on the new page.
Duplicate using Click and Drag

 Press and hold down the ctrl key.
 Click on any object and drag.
 A new, duplicate copy of the original object is dragged out from under the original.
Duplicate using Copy and Paste

 Select the object.
 Click Home > Edit > Copy.
 Click Home > Edit > Paste.
 The duplicate object is pasted onto another spot so that you can see where it is.
You can also use the right-click menu to copy and paste. If you right-click
and do not see Paste as an option on the menu, then you are right-clicking
over another object. Go to a blank spot on the page and then right-click. You
will see the Paste command.
Duplicate using Copy and Paste in Place

 Select an object on the open page.
 Click Home > Edit > Copy.
 Click on a page tab to open the new page on which you want to place the object.
 Click Home > Edit > Paste in Place.
 The duplicate object is pasted in the same location on the new page as its location on the
previous page.
109
Grouping Objects
The Group commands in the Create tab allow you to merge and group objects. You can also use
the right-click Multiple Selected Object Menus to perform these commands.
Group. You can group objects together so that can work faster. Grouping causes objects to retain
their positions in relationship to each other. After you group objects you can copy, paste, flip,
rotate, and perform other functions on the group as a whole. You can group and ungroup any
objects at any time.
Merge. You can merge objects together
Tip: When you merge two or more
to create new objects. For example, you
objects, they become one new object. This
can merge a graphic and a text object
means that they cannot be unmerged later.
together to create a photo with a caption.
Make copies of the objects before they are
Or, you can merge a colored rectangle
merged and keep them on a blank page in
with a photo to create a border. When you
case you need them later. Do not include
merge objects, you create an entirely new
that page in the Footer Links.
object. Unless you do an immediate
Undo, merged objects cannot be
unmerged later.
When using large fonts, an effect called aliasing can occur when the text is merged with a graphic.
Aliasing results in colored dots surrounding the outline of the text. This is most prominent when
light colored text is merged with a dark background. If you see aliasing on your merged graphic,
then create the graphic in a dedicated graphics program such as Photoshop or PaintShopPro.
Group and ungroup objects

 Select all objects in any order.
 Click on Create > Group.
 This groups the objects together so that when you drag one of
the objects in the group, the whole group moves as one object.
The objects retain their geometric relationship to each other.
 When you want to ungroup, click to select the group and then
click Create > >Un-group. The objects are then no longer
grouped.
Merge and unmerge objects

 Arrange the objects as you want them to appear. If you want to arrange the stacking order, go
to Page Layout > Bring to > Front, Back Forward, or Backward.
 Select the objects.
 Click on Create > >Merge. The objects are then merged.
 To immediately unmerge, click ctrl+z to Undo. The merged objects cannot be unmerged later.
110
Rotating Objects
Objects can be rotated, flipped, and reversed by using the Special Effects commands in the Photo
group of the Create tab. You can use these
commands on a single object or a selection
of objects. See the chapter on Working with Some objects cannot be rotated because
Photos for a complete list of the Special of their contents. This includes buttons,
Effects commands. HTML objects, templates, flash, sound
and video objects.
Rotate, flip or reverse one object

 Select the object.
 Click on Create > Photos > Special Effects command>Rotate, Flip, or Reverse.
Rotate, flip, or reverse multiple objects

 Select multiple objects.
 Click on Create > Photos > Special Effects>Rotate, Flip, or Reverse.
Text objects are turned into graphic objects when they are rotated. This
means that the text can no longer be edited. Make sure that your text is
correct before you rotate it.
Highlighting Objects
When you are working with multiple objects, it is almost impossible to remember all of the
applications that you used and all of the changes you applied to each object. In addition, many
functions associated with objects, such as links, are invisible. The Highlight Object commands in
the View tab provide you a quick way to check the status of the objects on your page. When you
click on a command, Web Studio places a red box around every object that applies to that
command.
111
Objects With Links. This option reveals every object on the page that has a link.
Objects That Overlap. This is important when you think that you may have “lost” an object.
One object can be hidden under another. It is also important to use this feature when you use the
Save Page As HTML E-mail command. You cannot use overlapping objects when creating these
e-mails.
Objects With Unsafe Fonts. Web Studio converts unsafe fonts into a graphic to retain the
design integrity of your pages. This option reveals all objects with unsafe fonts. See the Text
chapter for information about safe and unsafe fonts.
Objects With Added HTML. This option reveals objects that contain added HTML.
Objects With Notes. This option reveals objects that have added Notes in their Object
Properties dialog.
Turn the Highlight commands on and off

 Turn On: Click on View > Highlight Objects > Highlight
command.
 Turn Off: Click on View > Highlight Objects > Don’t Hilite.
Working with Protected Graphics

Web Studio has the ability to read more than 20 different types of graphic files and convert them
into a form that can be used on the web. For practical purposes, the web can only use two different
file types: GIF and JPEG. When you add a different type of file, Web Studio converts the file into
one of those file types.
If you add a GIF or JPEG, Web Studio will
decompress it and change it into a 24 bit image.
Web Studio adds the JPEG or GIF
This change allows you to change the graphic,
file type based on what it thinks the
crop it, add shadows, etc. Later when you build
file should be saved as. However,
your site, Web Studio will turn it into a GIF or
you can change the file type.
JPEG.
Some people, however, spend time optimizing
their graphics for the web and want to use them
on the web exactly as they created them. They do
not want Web Studio to decompress the graphics or to create new files. In this case, the GIF or
JPEG needs to be “protected” from Web Studio’s normal graphics processing.
When you add a GIF or JPEG as a Protected Graphic, that exact image will be displayed on your
website. In addition, Web Studio saves these images on the web in such a way that you can use
them repeatedly on multiple pages and the file is uploaded only once.
112
Insert a Protected Graphic

You can insert any graphic as a Protected Graphic. This is done through the Insert Protected
command.
 Click on Insert > Illustrations > Picture command>Protected Graphic from File. This opens
the Open dialog.
 Navigate to the graphic file that you want to insert.
 Select the file.
 Click Open. The graphic is placed on the page as a Protected Graphic.
Convert a normal graphic to a Protected Graphic

If you create a graphic in Web Studio, you can convert it to a Protected Graphic. You may want
to do this to protect it from changes, or to use it multiple times on different pages without
uploading multiple times.
 Right-click over the graphic.
 Click on the Selected Object Menu>Turn into Protected Graphic.
 In the Save As dialog, choose a folder in which you will place the graphic.
 Enter a name and choose a file type.
 Click Save.
Save Protected Graphics

Protected graphics are not stored in the Web Studio Project file. They are saved in a separate
folder just like other graphics and files that you add to your site. We suggest that you create a
folder in My Documents and label it Protected Graphics so that you can find protected graphics
easily.
Lost Protected Graphics

If a protected graphic is moved, deleted, or renamed, then Web Studio will not be able to find it
on your disk. When you Preview or Save your site to the internet, Web Studio will attempt to
find the file. If it cannot find it, you will see a dialog asking you to locate the file. If you cannot
locate it, then you can tell the dialog to Ignore the missing file. In this case, the file is not
uploaded. Each page that used the lost graphic will display a box with a red X in it in place of
the original graphic.
Flash files and Protected Graphics

All Flash files are treated as protected graphics. They may be used many times in a site, but they
need only to be uploaded once. They are not modified in any way by Web Studio.
113
Allowable operations with Protected Graphics

Protected Graphics can be moved, merged, and resized. No other graphics manipulations can be
applied to them. Note that merging a Protected Graphic with another object turns the Protected
Graphic into a normal graphic object. Web Studio will not allow any illegal operations on a
Protected Graphic.
Convert Protected Graphics to normal graphics

 Click on the Protected Graphic that you want to convert.
 Press and hold down the G key on the keyboard.
 Click again on the Protected Graphic that will be converted.
 A new, normal, graphic is created and placed on the page near the Protected Graphic.
 You can then delete the Protected Graphic by selecting it and then hitting the delete key.
Convert a series of Protected Graphics to normal graphics

 Select the first Protected Graphic that you want
to convert.
 Hold down the shift key, click on the remaining The G key is a hot key that
graphics and then release the shift key. converts Protected Graphics to
 Press and hold down the G key on the normal graphics. Hold the G
keyboard. key and click on the Protected
 Click on any of the Protected Graphics that will Graphic to convert it. Hot keys
be changed. are not case sensitive.
 New, normal graphics are placed on the page
near each of the Protected Graphics.
 You can delete the Protected Graphics by hitting the delete key.
Convert all of the Protected Graphics on a page to normal graphics

 Click on Text > Clipboard > Select All or press ctrl+a on the keyboard.
 Press and hold down the G key on the keyboard.
 Click on any of the Protected Graphics that will be converted.
 New, normal graphics are placed on the page near each of the Protected Graphics.
 You can delete the Protected Graphics by hitting the delete key.
114
Moving a Project that Contains Protected Graphics

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.
Working with the Object Properties Dialog
General section
Object Info. This is the numeric identifier of the object. If you choose to use custom HTML
via the HTML Object, then you can refer to these ID's to manipulate the object.
115
Position. This displays the numeric location of the object on the page. You can check the box
to Lock Object Position and you can numerically change the position by changing the number
values.
Size. This displays the pixel size of the object. You can change the size of the object
numerically and you can choose to Lock Object Size by checking the box.
Proportional Resizing. Check this box before you change the size in order to keep the
original proportions of the object.
Resample Graphic. Check this box if you want to Web Studio to resample the graphic
object when it is resized. This will help the resized graphic look better.
Link section
Link URL. This reveals the URL (or web address) of the link that has been applied to the
object.
Add/Edit Link. This option displays the Add/Edit Link dialog. You can change the link’s
name, description, and URL. You can also program the link to open in a new window when it is
clicked on.
Delete Link. Click this check box to delete the link from the object. The link is deleted when
you click OK.
116
Graphic section
Original Size. This shows the original size of the object in pixels. You can check Restore
Original Size after resizing.
Restore Original Size. Check this and then click OK in order to restore the original size after
resizing.
Color. Choose a color that you want to be transparent in an object.
JPEG (or GIF) Graphic Compression. Choose the amount of compression to apply when
the object is on the web. There are 9 quality levels. The default level is Q2, which provides
compression without loss of visual quality. Preview the page to check the quality of the
compression. Click Page > Preview > Preview Page or another Preview Page command.
The heading for this section will be GIF to JPEG depending on what type of
file Web Studio will create for this graphic.
117
Protection on Web. When Copy Protect is checked, Web Studio puts a transparent image in
front of the graphic. If someone uses right-click to copy the graphic, a blank image is copied.
Important! It is impossible to copy protect graphics on the web completely.
Web File Type. This option allows you to choose a file type for the graphic object. Graphics
that you add are set to Automatic. This setting allows Web Studio to determine what type of
graphic should be created based on the properties of the graphic itself. You can choose GIF or
JPEG, which are the two graphic formats that are supported by the web. Choosing one of these
will override Web Studio’s automatic choice. The graphic will become your chosen file type,
even if it is not the optimal format for that object. Choosing the wrong format can result in files
that are extremely big, or in which the colors look bad. If you choose a file and are not satisfied
with the result, try the other file type.
Alternate Text Message. Fill this in with a short description of the image, such as “My new
car.” The text will appear in a small pop-up window when visitors hover the mouse over the
image. In addition, search engines look at this text to help them rank various sites. If visitors
turn off images in Internet Explorer, then the text will be displayed on the page.
Notes section
This section provides you with an opportunity to record information about the object that you
may need to know later. For example, you may want to notate the fonts that you used in a
merged graphic or the precise color used for a background. The notes are saved with the Project
files and are only visible within Web Studio.
118
Quick Tips for Working with Objects
Command Action
Select one object Click on the object.
Select more than one Hold the shift key and click each object.
Move 1 pixel Select objects. Press arrow keys.
Move 10 pixels Select objects.
Hold the shift key while pressing arrow keys.
Constrain movement Hold the shift key and then drag objects.
horizontally or vertically
Push objects down the page Select an object.
to add space Press the P key.
Objects under the selected object are pushed down the page.
Pull objects up the page to Select an object.
remove space Press the U key.
Objects under the selected object are pulled up the page.
Align, center, make equal Select the first object.
Hold the shift key and then select the other objects.
Click the command.
Objects are aligned, centered, or made equal size to the first object.
Space horizontally or Position the top/bottom or left/right object.
vertically Space the other objects loosely in between.
Select the objects.
Click on the command. Objects are spaced evenly across or down.
Space with 1 pixel between Follow the directions for spacing horizontally/vertically, but hold down
the ctrl+shift keys before you click the command.
Space with edges touching Follow space horizontally/vertically directions, but hold down the shift
key before you click the command.
Crop Select the object.
Hold down the C key.
Drag a side top or bottom selection handle to crop in one direction.
Drag a corner handle to crop both horizontally and vertically.
Resize Select the object.
Drag the top, bottom, or side selection handles to resize in one
direction.
Drag the corner handle to crop proportionally.
Hold the shift key and drag the corner handle to resize in two
directions.
119
Chapter 10: Text
Chapter 10: Text

Web Studio allows you to enter, edit, and design text within the program without the need of a
word processor. The user interface tools are very similar to a word processor program, so you will
not need to relearn the features. Besides the standard formatting features such as bold and italic,
Web Studio contains commands that add animation and design
elements to text. See the Animations and Text FX chapter for
instructions.
All text is placed on the page in a text object. These rectangle
objects make page layout very easy because you can drag and drop
them to any spot on the page, align them, and edit the text within
them.
The Text Gallery and the Fonts command in the Text tab contain
the fonts that you can use to create text for your web pages. Web Studio does not download a set
of fonts with the program. The fonts that you see in the Text Gallery and in the Fonts command
are actually the ones that you already have on your computer.
Web Studio uses the fonts you have installed on your computer. It does not
add any other fonts to your system.
Using the Text Gallery and Font Command

Both the Text Gallery and Fonts command give you a list of the fonts on your computer, so both
give you identical choices.
The Font command

The Font command in the Text tab provides you with a list of available fonts similar to the list
that you see in word processing programs. You can use this list to choose fonts for a new text
object and when you want to change the font within a text object.
120
The Text Gallery

In addition to containing fonts, the Text Gallery can be used for four different but related
purposes:
Add text objects to a page. Click on the Text Gallery tab to open the gallery. Scroll through
the fonts in the gallery to find a font that you want to use. Drag and drop the font onto the page
and a new text object is automatically created. When you begin to type, the font is the one you
selected from the gallery.
You can also add a new text object using the ribbon command.
Go to Text > Insert > New Text Object.
Visually Choose Fonts. The Text Gallery

displays you a larger example of the font than is
shown in the Font command.
Change Fonts. Drag and drop a new font
from the Text Gallery onto an existing text
object and the text in the object changes to the
new font. This is the quickest way to see how a
font looks on your page. You can change the
text in several objects at once by selecting more
than one text object or change only some of the
text by selecting it before you drag and drop a
font.
Choose Web Safe Fonts. The fonts in the
gallery are color coded so that you can see
which fonts are considered safe or unsafe. See
Choosing Fonts and Web Safe Fonts below for
an explanation.
Choosing Fonts
Fonts on web pages have been a problem since the beginning of internet. When you choose a font,
the font’s name is embedded in the web page; not the actual font. When a visitor goes to your
website, his browser reads the font name and then looks on his computer to see if the font is there.
If the browser cannot find the font, it substitutes another. To make this worse, the browser often
reformats the text and causes a shift in the page layout. This means that if you choose an unusual
font, it may look totally different on a visitor’s page.
121
Chapter 10: Text
Web Safe Fonts

Web Studio uses color to indicate which fonts your viewers will always have (safe); should have,
might have, and probably do not have (unsafe). For instance, Arial and Times New Roman are
always safe. The fonts are color coded to help you distinguish safe and unsafe fonts.
The Text Gallery uses color to separate the safe and unsafe fonts.
Black. These fonts are always safe.
Blue. These fonts are probably safe. Visitors with Windows will always have them, but some
Mac and Unix machines may not.
Yellow. These fonts may be unsafe because some viewers may not have them.
Red. These are unsafe fonts because they are uncommon and are almost always substituted by
a browser.
Safe Fonts
Black: always safe Arial
Courier
Times
Blue: probably safe Arial Bold
Impact
Veranda
Turn unsafe fonts into graphics

The best way to use an unsafe font so that it looks good on the internet is to turn it into a
graphic. This eliminates the confusion with the browsers because there is no font to read. Text
always becomes a graphic when you apply special effects to it or merge it with another object.
However, there are times when you want to use an unsafe font with stand-alone text. In those
cases, the best way to change the text into a graphic is to allow Web Studio to do it
automatically.
You can turn on this function in the Web Site Properties dialog in the Miscellaneous section.
When this function is checked, Web Studio will automatically turn any unsafe font into a
graphic when it is uploaded.
 Click on Caption Bar>Website Properties or right-click over a text object and choose
Properties from the Text Object Selection Menu. This opens the Web Site Properties dialog.
 Click on the Miscellaneous section.
 Click to check the box: Convert objects with Non-Web-Safe fonts into a graphic.
 Click OK. Web Studio will now automatically convert non-web safe fonts into a graphic.
122
Working with Text Objects

Text is placed on a page in a rectangle text object. Each text object can hold as little or as much
text as you want. The text within the object can be edited and formatted as long as it is in the
object and has not been turned into a graphic object. Once text becomes a graphic, it can no longer
be edited. The text object itself can be copied, resized, aligned, and moved just like other objects.
See the Working with Objects chapter.
Resize a text object

Text objects automatically get longer as you insert text. The more text you put in a text object,
the longer the object becomes. You cannot make the text object any longer than the text within
it. However, the width of text objects can be changed.
 Click on the text object to display the selection handles. You do not need to double-click.
 Drag a side handle to make the object as wide or narrow as you want.
Adding a Text Object to a Page

There are several ways to add text objects to a page. You can add a new text object to a page or
automatically create a text object when you insert text from another source.
Add a new text object using the New Text Object command
 Click the Text > Insert > Insert Text> New Text Object command.
 A new text object is placed on the page with a blinking cursor.
 Begin to type and the text is placed in the text object at the point of the cursor.
Add a new text object using the Text Gallery

 Click on the Gallery tab to open the Text Gallery.
 Scroll through the gallery to view the fonts.
 Click on the font then drag and drop it onto the page.
 Begin to type and the text is placed in the text object at the point of the cursor.
123
Chapter 10: Text
Add a new text object using alt + click

 Hold down the alt key and then click on any blank spot on the page.
Automatically Creating a Text Object by Inserting Text

Web Studio automatically adds a new text object to the page when you add text from another text
object program or file.
Insert text from a file

 Click the Text > Insert > Insert Text> Text from File command. The Open dialog opens.
 Navigate to the file that you want, choose it, and then click Open.
 The file is placed on the page in a text object.
Copy and Paste text to add a text object

 Select the text.
Copy. Click the Copy command. You can also copy text from another program.
Paste. Click the Paste/Paste in Place command.
You can also use the right-click menu or keyboard command to copy and
paste from another text object, another program or a web browser.
Drag and drop a text file to add a text object

 Locate the file that you want in any Windows folder.
 Drag and drop the file directly onto the Web Studio page.
 A new text object is created with the text that was in the file.
If a file type is not supported by Web Studio, a link to the file is placed on the
page. Visitors can click on the link to view the file or save it.
Drag and drop text from another program to add a text object
 Select the text that you want from the other program.
 Drag and drop the text onto the Web Studio page.
 A new text object is created with the text from the other program.
124
Limitations Importing Text

Word processing programs such as Microsoft Word contain a very rich set of features. Many of
the features, such as paragraph spacing, cannot be translated into the HTML that is used for web
pages. This means that if you insert text that was created in Word, it may not look the same. If you
have a choice, we recommend that you create text in Web Studio to eliminate the need for
reformatting.
Selecting Text and Activating Text Objects for Editing

When a new text object is added to the page, it is ready for you to enter text right away. Later, you
can edit and format the text within the object. In order to edit, format, or select text within a text
object, you must double-click on the text object to activate it for editing (editing mode).
Some functions, such as aligning and
resizing a text object, require that you
select the object itself, not the text within If you want to:
it. To select a text object, you simply click Change the text: Double-click to
on it. activate the text object for editing.
Move, align or resize the text
object itself: Click once to select it
just like other objects.
Activate a text object for editing

 Double-click on a text object. This gives you editing handles and a blinking cursor.
 Edit the text within the object.
 Click a blank spot on the background to deselect the object.
125
Chapter 10: Text
Change the background color of text objects when you are editing
When you double-click to put a text object in editing mode, the background fills with white. If
you are using white or light colored text, you may not be able to see the text. You can still edit
the text, but it is more difficult to see. When that happens, you can change the text object’s
background color that is used during editing. You can use a different editing color for each text
object.
When you change the text editing color of a text object, the color is applied to
the current text object and any new text objects added to the page. It does not
change the editing color of any text objects already on the page.
Choose a background editing color for all text objects

You can use the Web Studio Preferences dialog to choose an editing color for all of the text
objects on your site. This option can save you a lot of time later if you want to use light colors
for your text. This command changes all future text objects. It does not change the
background editing color of text objects already on the page.
 Click on Web Studio Button > Options.

 Click on the Editing Color button in the Text Preferences section. This opens the Colors
dialog.
 Click OK when you are finished. Click Cancel to keep the current text editing color.
126
Change the background editing color in a text object

 Right-click over a text object.
 Choose Properties from the resulting Text Object Selection Menu.
 In the Text section, click on Select Editing Color.
 Choose the editing color for the text object.
 Click OK when you are done. Click Cancel to keep the current text editing color.
 Now double-click the text object to activate it for editing. The background color is the one
that you chose.
Select text
In order to format or edit text, you must select the text within the text object. When text is
selected, the text becomes highlighted. First double-click on a text object to activate it for
editing and then you can select the text in several different ways:
Select any text Click and drag the mouse over the text to select it.
Select a word Double-click the word.
Select a paragraph Triple-click within the paragraph.
Select several words Click on the first word, hold down the shift key and then click on the last
word.
Select all text objects Click the Select All command or press ctrl+a.
Extend a text selection

After you select some text in a text object, you can add more text to the selection without
starting again.
 Move the mouse to the last word that you want to add to the selection and click over the word.
All of the words from the selection to the point where you click the mouse are selected.
Adding and Editing Text

Before you can add or edit text, double-click on the text object to activate it for editing.
Add text to an existing text object

 Double-click the text object to activate it for editing.
 Click where you want to enter text. You will see the blinking insertion point.
 Paste or enter text into the object. Text is added to the object at the insertion point.
127
Chapter 10: Text
Copy, cut, or delete text

 Double-click to activate the text object for editing and then select the text.
 Click on Text > Clipboard > desired command or right-click over the selected text and
choose the command from the Text Menu.
Paste text
After you copy or cut text, you can paste it within the same object, paste it into a different object
or paste it to replace existing text.
Paste in the same text object Click in the new location. Click the Paste command, choose
the command from the right-click menu or press ctrl+v.
Paste in a different text object Double-click to activate the new text object for editing. Click on
the location for the text and then paste the text.
Paste to replace text If you want to replace existing text with the text on the
clipboard, select the existing text first, then paste.
Insert special symbols or characters

The Insert Special group in the Text tab has a Symbols command that allows you to insert
symbols in text objects.
 Double-click to activate a text object for editing.
 Place the cursor at the insertion point for the character.
 Click on Text > Insert Special > Symbols. This opens the Character Map dialog.
 Choose the symbol or character.
 Click Select. Close the dialog and the symbol is placed in the text object.
Formatting Text
You can format text (font, text size, text style) by using the commands in the Text tab. You can
also change fonts by using the Text Gallery. Most commands require that you activate the text
object for editing. Some only require that you select the object.
Change the font in the whole text object

Use the Font command
 Click to select the object.
 Click on Text > Font > Font. Choose a font from the drop down list.
 All the text in the object is now changed.
128
Use the Text Gallery

 Click on the Text Gallery tab to open the gallery.
 Scroll to find the font that you want to use.
 Drag and drop the font onto the text object.
 All the text in the object is now changed.
Change the font in multiple text objects

 Hold the shift key and click on all the objects you want to change.
 The text in all of the objects is now changed.
 Hold the shift key and click on all the objects that you want to change.
 Drag and drop the font from the gallery onto any one of the text objects.
 The text in all of the objects is now changed.
Change the font in selected text within a text object

 Double-click to activate the text object for editing.
 Select the text that you want to change.
 The selected text is now changed.
 Select the text that you want to change.
 Drag and drop the font from the gallery onto the selected text.
 The selected text is now changed.
Change the background color of a text object

The default background of text objects is transparent so that you can see the background
through the text. However, you can change the background color using the Text Background
command in the Font group of the Text tab. Because the size of the text object hugs the text, use
the space bar, return keys, and the Justify commands to position the text in the object.
129
Chapter 10: Text
 Select a text object.

 Click on Text > Font > Text Background command.
 Choose a color in the Color dialog.
 Click OK.
Give the text object a transparent background

There are three ways to make the background transparent on a text object. First, select the text
object and then:
1. Right-click over text object>Text Object Selection Menu>Text Background
Color>Transparent Text Background.
2. Click on Text > Font > Text Background Color>Transparent Background.
3. Click on Text > Font > Transparent Text Background.
Aligning Text Within a Text Object

You can change the alignment of text within the boundaries of its text object. Alignment is a
paragraph-level attribute, so every paragraph can be aligned independently. The actual alignment
of text can be affected by indents as well.
Another way of aligning text is to put paragraphs or sections of text in a separate text object. Then,
align the text objects in the same way you would align other objects on a page.
To align the text objects, use the commands in the Page Layout tab.
To align the text within the text object, use the commands in the Text tab.
Justify text
 Select one or more paragraphs of text.
 Click one of the Left, Center, Right, or Full Justify commands in the Paragraph group. Left is
the default justification.
130
Indent the first line of a paragraph

 Double-click to activate the text object for editing. To make a paragraph, press Enter twice.
 Select a paragraph or part of a paragraph. If you do not put space between text,
 Click the Indent First Line command in the then paragraph based commands will be
Paragraph group. The first line is indented. applied to the whole text object.
Indent the whole paragraph

 Select a paragraph or part of a paragraph.
 Click the Increase Indent command in the Paragraph group. The whole paragraph moves to
the right.
Remove an indent
 Select the paragraph or paragraphs.
 Click the Decrease Indent command in the Paragraph group. The whole paragraph moves to
the left.
Aligning the text within an object is different than aligning the text objects
themselves. See Working with Objects for aligning text objects on the page.
Creating Headings
You can increase or decrease the font size to create headings by using the Increase Heading
command in the Paragraph group of the Text tab.
Add a heading to a paragraph

 Select one or more paragraphs of text. You do not need to select the whole paragraph. If a
paragraph is part of the selection it is included in the Header.
 Click on Text > Paragraph > Increase Heading. The Heading Size 1 is applied to the text.
 Click on the command again and the Heading Size 2 is applied. Each time that you click on
the command, the Heading size increases through the seven available choices and then back to
the first size again. Continue to click on the command to roll through all of the available sizes.
131
Chapter 10: Text
Finding and Replacing Text

The Replace command in the Editing group of the Text tab allows you to find words and replace
them if you want.
Find text
 Click to select a text object.
 Click on Text > Editing > Replace. This opens the Search/Replace dialog.
 In the Search for field, type in the text that you want to locate.
 Click Find Next to find the text.
 Click Find Next repeatedly to find every instance of the text.
 Click Done when you are finished.
Replace text
 Click to select a text object
 Click on Text > Editing > Replace. This opens the Search/Replace dialog.
 In the Search for field, type in the text that you want to replace.
 In the Replace with field, type in the text that you want to use for the replacement.
 Click Find Next to find the text.
 Choose Replace to replace the text or click Find Next to ignore it and go to the next
occurrence. Choose Replace All if you want to replace all occurrences automatically.
132
Checking the Spelling

You can check spelling in one or all of the text objects on a page at the same time. Web Studio
comes with a dictionary that it uses to check the spelling in your web page. If a word is not in the
dictionary, you can add it with the Add button in the Check Spelling dialog. .
Check spelling
 Select one or more text objects.
 Click on the Text > Editing > Spelling command. This opens the Check Spelling dialog.
 Click the Start button to start the spelling check.
Change, correct, or ignore a word

The dialog displays the first questionable word in the Word Not Found in Dictionary field. You
can fix each questionable word in different ways.
Ignore. Click this button to
ignore the word for this one
time during the spell check
and move on to the next
misspelled word.
Ignore All. Click this
button to ignore this word
every time it occurs.
Change. Click this button
to replace the misspelled
word with the one showing
in the Replace With field.
The checker provides you
with a suggestion for the
replacement, but you can key
in one of your own or choose
one from the Suggested
Spellings list. The word that
is in the Replace With field is the one that is used when you click the Change button.
Change All. Click this button if you want to make the same change to all of the same
misspelled words in the selected text objects.
Add. Click on this button to add the questionable word to the dictionary so that it does not
come up in the spell check again.
 Click OK when the checker notifies you that the check is finished.
 Click Done to close the dialog window.
133
Chapter 10: Text
Fix duplicate words

In addition to spelling, the checker looks for duplicate words. If there is a duplicate word, the
dialog displays a new option so that you can remove the extra word. Simply click the Delete
Word button to remove the duplicate or click the Ignore button to leave it.
Add a word to the Dictionary

When the spell checker displays a word in the Word Not Found in Dictionary field, click on the
Add button to add the word to the dictionary.
The spell checker can only tell if a word is spelled correctly; it does not check
grammar. For instance, the words there and their are both spelled correctly,
but may be used inappropriately.
Working with the HTML in Text Objects

Web Studio’s text object uses HTML as its internal data type. This enables you to edit the HTML
to add advanced features and provides full control over the contents of Text Objects. You can
create a text object from a HTML file. See also the Working with HTML chapter.
To create a text object from an HTML file

 Click on Insert > Text > Text From File.
 Navigate to the desired HTML file.
 Select the file and click Open.
 A new text object containing the selected HTML is added to the page.
Insert and edit your own HTML into a text object

 Right-click on the text object.
 Choose Edit HTML Source from the Text Object Selection
Menu.
 The HTML Editor comes up ready for editing. You can resize
the editor to make it a more convenient size.
 Edit the HTML.
 Click OK to close the Editor.
134
135
Chapter 11: Working with Photos

Photos are one type of object that you can add to your page. There is a Photos Gallery stocked
with a variety of photos or you can easily add photos of your own to a page or to the gallery.
When you have a lot of photos on your page, you can make them into
Thumbnails. A thumbnail is a small image that enlarges when you
click on it. Instructions for thumbnails are in this chapter.
Another option is to create a slide show with all of your photos. Web
Studio has several different slide shows to choose from. See the Slide
Shows chapter.
There are several ways of putting photos on the page. Once they are
inserted, you can position, crop, resize, and align them like any
object.
The Photos group in the Create tab has many special effects that you can apply to photos. There
are commands to change the edges, texture, color, contrast, and other things. One of the most
helpful commands for photos is found in the Special Effects drop down list. This is where you will
find the Photo Correction Wizard. This dialog allows you to adjust the look of the photo and see
the results in a Preview window.
To check the download time: Double-click on a blank spot of the background

to get the Page Properties dialog. Click on the Size & Download Time tab.
Resizing Photos and Graphics when Inserting Them on a Page
What are pixels?

PPI (pixels per inch) is a measurement of image
resolution that defines the size of an image. The
Photos are a type of object. See
total pixel size of an image tells you how many
the Working with Objects
pixels the image is made of. If you have a photo
chapter for all of the things you
that is 1000x800, this means that the photo is
can do to stack, crop, resize,
1000 pixels wide and 800 pixels high.
move and align photos.
136
Resize Graphic dialog

When you insert a photo, Web Studio looks at the size of the photo. If the image is larger than
600 pixels in any direction, the Resize Graphics dialog automatically opens. The dialog provides
you with several options for resizing, including an option to leave the photo the same size. If
you plan on cropping most of the photo, you may not want to resize it. If you plan on making
thumbnails of photos, you may want to choose a large image size to display when visitors click
on the thumbnail. A reasonable size for a photo on a web page is 300 pixels.
When photos are larger than 800x600 pixels, Web Studio automatically
resizes them proportionally so they fit in a browser window on an 800x600
screen. This ensures all visitors to your site will see your photos
Putting Photos on a Page
Use a photo from the gallery

 Click on the Photos tab to open the Photos Gallery.
 Find the photo that you want to use.
 Drag and drop the photo onto the page.
137
Add your own photos to the Photos Gallery

See the Galleries chapter for all the ways that you can add objects to galleries. Here is a quick
review of some of the ways to add your own photos to the Photos Gallery:
1. Right-click over a photo in the gallery. Choose Add files. In the Open dialog, choose the file
and click Open.
If the Resize Graphics dialog appears, it is because your photo is very large.
Choose to resize the photo to 300 pixels or less.
2. Place a photo on the page. Hold down the ctrl+shift keys. Drag and drop the photo into the
gallery.
3. Place a photo on the page. Right-click over the photo; choose Copy from the Selected
Objects Menu. Right-click over a spot in the gallery. Choose Paste.
4. Drag a photo’s file from its Windows folder directly into the gallery.
Insert photos from a file

 Click on Insert > Illustrations > >Picture from File. The Open dialog appears.
 Select the photo’s file and click Open.
 If the photo is smaller than 600 pixels in both directions, the photo is added to the page.
 If the photo is larger than 600 pixels in either direction, the Resize Graphics dialog opens.
 If you want to insert the photo in its full size, choose Do not resize the graphics. If you want
the photo smaller, choose one of the other sizes. Remember, large photos can slow the
download times for visitors. A reasonable size for a photo is 300 pixels.
 Click OK and the photo is added to the page.
Add photos from digital cameras

Web Studio is compatible with virtually all digital cameras. It will accept photos directly from
cameras that act like a disk drive. Since most digital cameras appear to be like disk drives when
they connect to the computer, adding photos is like adding any image from a file. The photos on
your camera are usually quite large—too large for a web page. Web Studio automatically
identifies large photos and opens a dialog so you can resize them before you insert them onto a
page.
 Click on Insert > Illustrations > Insert Picture. The Open dialog opens.
 Choose the photo’s file and click Open.
 If the photo is smaller than 600 pixels in both directions, the photo is added to the page.
 If the photo is larger than 600 pixels in either direction, the Resize Graphics dialog opens. If
you want to insert the photo in its full size, choose Do not resize the graphics. If you want the
photo smaller, choose one of the other sizes. A reasonable size for a photo is 300 pixels.
 Click OK. The photo is added to the page.
138
Working with Photos

You can crop, select, resize, stack, align, and group photos in the same way that you work with
other objects. See Working with Objects. This is a quick review of resizing and cropping.
Crop the top, bottom and sides

When you crop, a portion of the image is trimmed off. A cropping line visually indicates where
the image will be cropped. In addition, the Caption Bar at the top of page displays the new size
of the image and the amount of change in the width and the height. This enables you to perform
precision cropping.
 Select the photo to be cropped.
 Press and hold the C key—you do not need to press the shift key
 Move the mouse over a side handle.
 Drag to crop. As you drag you will see a cropping rectangle that indicates what portion of the
graphic will be cropped and deleted.
 Release the mouse while still holding the C key to crop the graphic.
Resize a photo using selection handles

 Click to select the photo.
 Move the mouse over a handle until it turns into a two way arrow.
 Drag a corner handle to make the photo get larger or smaller proportionally.
 Drag a side, top, or bottom handle to make the object larger or smaller in one direction.
 Hold down the shift key and use the corner handle to resize in any direction.
139
Resize a photo numerically

 Double-click over the object to bring up the Object Properties dialog or right-click over an
object and choose Properties from the Selected Object Menu.
 To resize non-proportionally, fill in a Height and Width.
 To resize proportionally, check the Proportional Resizing box and then fill in a Height or
Width.
 Click OK when you are done.
Changing and Enhancing Photos

The Photos group in the Insert tab contains several Special Effect commands that you can apply to
photos. To use these effects, first select the photo or group of photos and then click on the
command. You can click on a command more than once to repeat the effect. For instance, you can
click on the Lighten command more than once to continue to lighten the photo. You can
experiment by applying more than one effect to a photo. If you do not like the way it looks, click
the Undo command or ctrl+z to undo the change. These effects work on graphic and text objects
too.
Use the Photo Correction Wizard

The Photo Correction Wizard is the most versatile way to enhance photos.
 Select a photo or group of photos you want to change. Remember to hold down the shift key
when selecting more than one photo.
 Click on Create > Photos > Special Effects>Photo Correction. The Photo Correction Wizard
opens.
140
 Click on the Next button to advance to the Automatic Correction page.

 Click the Give It A Try button. This automated enhancement attempts to correct brightness,
contrast, and color saturation for any photo. It works best with photos with low contrast and
low brightness. The Preview displays the change. Click Undo if you do not like the way it
looks.
 Click the Next button to advance to the other screens. Use the sliders to adjust the
Brightness and Contrast
Hue (color)
Saturation
Sharpness
 Click the Back button to go back and make changes.
 Click the Cancel button to discard the changes.
 Click the Finish button when you are done.
Use the other Special Effects commands

Beside the Photo Correction Wizard, there are other Special Effects commands that you can use
to change the look of photos and other graphics. You can apply more than one special effect to a
graphic and repeat the same effect to enhance the results. The following is a list of Special
Effects commands:
 Click to select a photo or group of photos.

 Click on Create > Photos > Special Hold down the shift key to
Effects>desired command to apply the effect. select more than one photo.
 If you do not like the effect, click the Undo
command or ctrl+z.
 Apply as many effects as you like to the photo.
141
Shadow Effect. If the page has a solid color background, Web Studio “anti-
aliases” the shadow to the background color. If you change the background
color, you may need to redo the shadow. If the page has a graphic
background, the shadow will look better if you make it on a closely matching
solid background first and then place it on the page.
Change the opacity of photos and graphics

 Click to select a photo or graphic.
 Click on the Create tab.
 Go to the Opacity group.
 Use the Graphic Opacity slider to increase or decrease the opacity of the photo.
Apply textures and edges to photos and graphics

The Photos group has many edges and textures that you can put on a photo.
 Select a photo or graphic.
 Click on Create > Photos > Photo Edges or Photo Textures.
 Click on the edge or texture that you want to apply to the
photo.
Using Photos to Make Rollover Buttons

You can use photos to make interesting rollover buttons. The Buttons chapter has complete
instructions for making graphic rollover buttons. This is a quick review.
 Place three graphics on the page. Use a photo for one or all of the graphics.
 Select them in the order that you want them to appear—normal, mouse over, and mouse
down. Remember to hold down the shift key while you select all three.
 Click on Create > Rollovers > Graphic Rollovers. This opens the Graphic Rollover Button
Studio.
 Fill in the Button Text.
 Click the Font and Color buttons to change the font style and font color of the text.
 To see the button in action, click Page > Preview > Preview Page.
142
Creating Thumbnails
Thumbnails are used to create a small image of a photo that has an automatic link to the full sized
photo. When the thumbnail is clicked on the web, the full size photo is displayed in a new browser
window.
Create a thumbnail
 Select a photo (or multiple photos).
 Make it the size that you want it to be when the thumbnail is clicked.
 Click on Create > Photos > Thumbnails. This opens the Thumbnail Studio.
 Fill in the following information:

Thumbnail Size and Display. This is the size of the thumbnail on the page. It is not the
size of the full image. The size of the full image is the same size as the image before it is
made into a Thumbnail.
Caption. This is what is displayed on the page when a visitor moves the mouse over the
thumbnail. It also appears below the full size image in the pop-up window. You can use the
default message or key in one of your own or delete the message entirely. Use the buttons
to choose Font, Text Color and Fill Color.
143
Copy Protect. Check the Copy Protect Full Size Image if you want to prevent someone
from copying your image from the internet. Technically, a visitor can right-click over your
image and copy it. However, when they paste it, the image is so tiny, they cannot use it.
 Click any Preview Page command on the Home tab or Page tab to see the thumbnail in
action.
 In Preview, click on the thumbnail to see the enlargement.
Resize a thumbnail
When you create a thumbnail, the size is locked unless you unlock it. Once you unlock it, you
can resize it.
 Click on the thumbnail to select it.
 Drag one of the handles and the Object is Locked dialog opens.
 Click Yes if you want to remove the lock so that you can resize the photo.
If you choose No, your thumbnail is locked to the current size. If you want to
change the size, double-click over the thumbnail to re-open the Thumbnail
Studio. Make your size change and then click OK.
Copy Protecting Photos

Web Studio automatically places copy protection on your photos. Technically, a visitor can
attempt to right-click over your image and copy it. However, when they paste it, the image is a
tiny white graphic that is of no use. If you want to allow visitors to copy your photos, turn off the
option in the Object Properties dialog. The Thumbnail dialog also has a Copy Protect field.
144
Turn Copy Protect off and on

 Right-click over the photo.
 Choose Properties from the Selected Object Menu. This opens the Object Properties dialog.
 Click on the Graphics tab.
 Uncheck the Copy Protect field in the Protection on Web section to turn off the feature.
Check the box to turn it back on.
 Click OK.
Using Photos to Make Rollover Buttons

You can use photos to make interesting rollover buttons. The Buttons chapter has complete
instructions for making graphic rollover buttons. This is a quick review.
 Place three graphics on the page. Use a photo for one or all of the graphics.
 Select them in the order that you want them to appear—normal, mouse over, and mouse
down. Remember to hold down the shift key while you select all three.
 Click on Create > Rollovers > Graphic Rollovers. This opens the Graphic Rollover Button
Studio.
 Fill in the Button Text.
 Click the Font and Color buttons to change the font style and font color of the text.
 To see the button in action, click Page > Preview > Preview Page.
145
Chapter 12: Color and Shapes

There is no limit to the number of shapes and graphics that you can use on your website. Within
Web Studio, the Graphic Gallery contains a variety of readymade graphic objects and the Draw
tab contains several shape tools for you to create your own
graphics.
Color is a very important design feature of your website. The
color often sets the tone of the site and makes the site enjoyable to
visit. The color tools enable you to use an unlimited number of
colors in your website. Since many of the lines, shapes, links,
background, and text commands contain a Colors dialog, let’s
look at color first.
Working with Color

Web Studio has two features that work with color: the Colors dialog and the Change Color
command.
Colors dialog. The Colors dialog is used to choose color for borders, shapes, links,
backgrounds, text, and any command that has a color choice. This dialog opens automatically
when you click on one of the Color commands. You can choose from some standard colors or
create customized colors of your own. The Colors dialog is always associated with a command.
Change Color command. The Change Color command in the Create tab enables you to
change the color on any graphic object that was not created using the Colors dialog. The Change
Color command uses sliders that change the Hue, Luminosity, and Saturation of the object’s color.
Together with the Colors dialog, the color commands give you the ability to customize color on
any graphic on your page. You can even use it to change the color scheme of templates. See the
Templates chapter for how to change template colors.
Using the Colors Dialog

When you click on a command that uses
color, the Colors dialog is the first
window that opens. This window has a
choice of colors that you can use. The
Eyedropper & More command provides
you with unlimited custom color choices.
Commands that have color choices use
the same Color dialog.
146
Choose basic colors in the first window

 Click on any shape, border, background, or text command that provides you with a color
choice. The Color dialog opens.
 The color bar at the bottom of an icon shows the last color chosen for that command.
 If you want to use one of the colors in this window, click on the color. The color is then
applied to the shape, border, link, background, or text.
 Click on Eyedropper & More to choose more color options. This opens the Colors Standard
and Colors Custom dialogs.
147
Choose standard or custom colors from Eyedropper & More

Colors dialog Standard tab
New and Current. This window displays the current color of the object and the new color
that will be applied if you click OK. The Current color defaults to black when you are choosing
a color for a new object. When you are changing a color, it displays object’s current color. The
New section displays the color that you are choosing in the Colors dialog. When you click OK,
this is the color that is applied to the object.
Colors. This section contains some Standard colors. At the bottom of the Colors section, there
are white, black, and several grays available. To use these colors:
 Click on a color.
 View the color in the New color window.
Select color. Your cursor changes from an arrow into an eye dropper when you click on this
button. This eye dropper allows you to capture a color that is already on the page or any color
on the monitor. To use the Select color feature:
 Click the Select button and your mouse changes from an arrow into an eye dropper.
 Move the eye dropper until the tip of the dropper is over the color that you desire.
 Click over this color and check the New color window to see the color.
148
Colors dialog Custom tab

The New color window and Select Color commands are the same as the ones in the Standard
tab. The difference is that the Custom tab gives you the ability to choose from a full range of
colors and customize the colors that you want to use. When you combine the color (hue),
brightness (luminosity), and the saturation of colors in different combinations, you have literally
hundreds of colors to choose from in this dialog box. You can find colors by clicking in the
color areas or entering the RGB (red, green, blue) values of known colors to get the exact color
that you want.
Colors. The main color section contains a rainbow of colors. Click anywhere in the Colors
area to choose a color from the full palette. The higher colors in the window are lighter and less
saturated than the colors in the bottom of the window. Click in a vertical line along one color
from top to bottom. Notice the difference in the New colors and the change in the values at the
bottom of the dialog box.
Luminosity bar. Each time a color is selected, the Luminosity bar displays a range of that
color from the lightest to the darkest. Click and drag the arrow on the side to move the bar up
and down or click on any color within the bar.
149
Hue, Saturation, and Luminosity. These values are automatically filled in for the selected
color. You can change these values to adjust the color. For instance, if you want to make the
color a little brighter (increase the luminosity), change the number value in the Lum field.
Red, Green Blue. This area displays the RGB value of a color. If you know the RGB value of
the color that you desire, fill in these fields to obtain that color.
 Click on a color or enter the RGB values.
 Adjust the color by clicking in the color selection windows or by changing the values in the
Hue, Sat, or Lum fields.
 View the color in the New color window.
 Click OK to apply the color to the object.
Using the Change Color Command

The Change Colors command in the Create tab allows you to change the Hue, Luminosity, and
Saturation of graphic objects that were not created
using the Colors dialog. You can use this
The Change Color Command does
command to change the color of one object or
not change black or white. If your
multiple objects on the page. For instance, you can
object has black/white plus another
select all of the graphic objects in a template and
change all of them at the same time. This color, the color will change.
command does not work for black or white.
 Select the object or objects that you want to
change. The first object that you select is displayed in the Preview pane of the dialog.
Remember to hold down the shift key when making multiple selections.
 Click on Create > Photos > Change Colors. The Hue Saturation Luminance dialog opens.
 The graphic that you selected is displayed in the Preview pane. If you selected more than one
graphic, the first one that you selected is in the pane.
150
 Begin to move the sliders to see the changes that you can make in Hue, Saturation, and
Luminance.
 Look at the Preview pane to see the changes.
 Use the numbers to the right of the slider to repeat the values for other graphics.
 Click Reset Colors to return to the original color. Click Cancel to cancel the change and close
the dialog.
 Click OK when you find a color that you want to use. The changes are applied to all of the
graphics that you selected.
The changes to color are made in relation to the starting color. When you use
the Change Colors command to change multiple objects, the objects will
keep their differences in relation to each other. For example, the dark colored
objects stay darker than the light colored objects. This also applies to the
colors in individual graphics. All colors change relative to each other.
Using the Transparent Color commands

All web graphics are square or rectangle shaped. Transparency is a way to create the illusion of an
irregular shape. Transparency allows one color to be set as transparent, usually the background
color of the graphic.
Graphics and transparency

Graphic images on the internet are made of tiny little squares called pixels. When a graphic is
created, regardless of the shape, it is made on a rectangular background. Some graphic
backgrounds are transparent while others have a color such as white. The edges of the shape are
made to blend in with the graphic’s background to create the appearance of smooth, curved
edges. When the background color is made transparent, the edges of the shape can appear
jagged. This is called aliasing. The best way to prevent aliasing is to create the graphic in a
dedicated graphics program such as PhotoShop or PaintShopPro.
However, you will frequently want to insert graphics that you did not make. If the graphic
background color is not an exact match to the page, you can often use the graphic on a page
with a similar color value. For instance, a graphic with a white background will look good on
white or most light colored web pages when the white background is made transparent. Here is
an example of how a graphic looks on a light colored page when the white background is made
transparent.
151
Make a color transparent

There are three Transparency commands. Select the object before you use any of the
commands.
Transparent. Click on this to make an object transparent so that things on lower layers can be
seen.
Transparent White. Click on this to make any white in the object transparent.
Transparency Color. Click on this to choose a specific color to make transparent.
 Select a graphic object
 Click on Draw > Fill Color. At the bottom of the color window there are three transparency
choices: Transparent, Transparent White, and Transparency Color.
 Click on Transparency Color. This opens the Select Transparency Color dialog.
 Click on the color that you want to make transparent. You will see the color that you choose
in the Transparent Color window.
 Click OK. The chosen color is made transparent.
Using the Shapes Tools

The Shape commands in the Draw tab allow you to draw several shapes: rectangle, rounded
rectangle, oval, and circle. The design commands in the Draw tab and Create > Opacity group can
be applied to these shapes to create solid fill, graduated fill, borders, and transparency. There is a
wide variety of shapes you can make when you use combinations of these commands.
You create a rectangle, rounded rectangle, ellipse, or circle shape by clicking on a Shapes
command. The shape is placed on the page with the color that was last used in the Color dialog.
Once it is on the page, you can begin to apply the design commands to remove borders, reduce
opacity, change color, change gradients, and much more.
152
Creating Solid Fill Shapes

All of the shapes have a fill color and a border color. You can choose to have a solid color fill or a
gradual progression of colors called a graduated fill. The border around a shape can be any color,
style, and width or removed altogether. You can select fill and border colors before you create a
shape or change them anytime after the shape is on the page.
Create a solid fill rectangle, rounded rectangle, circle, or ellipse shape

 Click on Draw > Shapes group. This opens the Shapes selection.
 Select the shape that you want in the Shapes Using Fill Colors group.
 The shape is added to the page with the Fill Color and the Line Color that is currently
selected in the Colors dialog.
You can select the Fill Color and the Border Color before you add a shape to
the page or change the color after it is added.
You can easily switch between solid fill and graduated colors on all of the
shapes.
You can make a graduated color line by making a Graduated Fill Rectangle
and resizing it to look like a line.
153
Choose the color of a solid fill shape

 If you have a shape that you want to change, select the shape first. If you are choosing the
color first, go to the next step.
 Click on Draw > Fill > Fill Color. This opens the Colors dialog.
 Choose a basic color from the first window or click Eyedropper & More. In the next window,
choose the color that you want on the Standard tab or mix your own color on the Custom tab.
 Click OK and the color fill the shape.
Creating Graduated Fill Shapes

The Graduated Fill commands give you the ability use unlimited colors for the start and end of the
fill as well as 360º angle options for the direction of the fill. The Start Color and End Color
commands open the Color dialog for color choices. The Graduated Fill Studio enables you to
change the angle of the fill, choose colors, and view the choices before you apply them to a shape.
You can set these colors before you create a Graduated Fill shape, or change the colors anytime
after. You can even choose different fill directions.
Create a graduated fill shape

Graduated Fill shapes are made exactly like Solid Fill shapes. The difference is in the color
selection. Solid Fill shapes can be changed to Graduated Fill and Graduated Fill can be
changed to Solid Fill by using the commands in the Colors group.
 Click on Draw > Shapes group. This opens the Shapes selection.
 Select the shape that you want in the Shapes Using Graduated Fill group.
 The shape is added to the page with the Graduated Fill colors currently selected in the Start
Color and End Color dialogs.
154
Choose the graduated fill colors

 If you have a shape you want to fill, select it. If you are choosing colors first, go to the next
step
Choose a Start Color
 Click on Graduated Fills>Start Color to choose a starting color for the graduated fill. This
opens the Color dialog.
 Click to choose a color from the first window or click Eyedropper & More for more options.
 In the next window, choose the color that you want on the Standard tab or mix your own
color on the Custom tab.
 Click OK to apply the color to the shape.
Choose an End Color
 Click on Graduated Fills>End Color choose an ending color for the graduated fill. This opens
the Color dialog.
 Click to choose a color from the first window or click Eyedropper & More for more options.
 In the Eyedropper & More window, choose the color that you want on the Standard tab or
mix your own color on the Custom tab.
 Click OK to apply the color to the shape.
155
Use the Graduated Fill Studio

The Graduated Fill Dialog command opens the Graduated Fill Studio. This studio provides you
with options to choose fill colors and fill direction. The Preview window allows you to see the
choices before you apply them. You can set these options before you select a shape or change
the options on a shape after it is created.
 Select a shape.
 Click on the Graduated Fills>Graduated Fills Dialog command. This opens the Graduated
Fill Studio.
 Choose options in the Studio

Preview. This window displays a sample of the choices that you make before you apply
them to a shape.
Choose Colors. Click on Starting Color or Ending Color to change the colors in the fill.
Fill Direction. Click to change the direction of the fill. Choose from Vertical, Horizontal,
Diagonal Bottom-Top or Diagonal Top-Bottom. See the Sample Fill Directions below. The
Angle field allows you to set the direction by filling in a numeric angle degree from 0-360.
156
Placing Borders Around Shapes

The Styles, Width, and Border Color commands offer you a variety of border choices for solid fill
and graduated fill shapes.
Border Styles: Solid, Dashed, Dotted, Dash Dot
Border Width: 1 pixel to 9 pixels, plus a None option to remove the border from a shape.
Border Color: The Border Color command enables you to use any color.
You can choose color, style, and width before you create a shape or anytime
after.
Choose a border style and width

 If you have a shape, select it. If not, go to the next step to choose the style and width before
you create the shape.
 Click on Draw > Borders > Styles or Width. This displays a drop down menu of choices.
 Select the Styles and Width that you want.

 The selection is applied to the border.
157
Choose a border color

 If you have a shape that you want to change, select
the shape first. If you are choosing the color first,
go to the next step.
 Click on Draw > Fill > Border Color. This opens
the Colors dialog.
 Choose a color from the first window or click
Eyedropper & More. In the next window, choose
the color that you want on the Standard tab or mix
your own color on the Custom tab.
 Click OK and the border becomes that color.
If you do not see the border, it

probably means that the Border
Width is set to None. Click on
Draw > Border > Width> choose a
width.
Remove a border from a shape

 Select the shape.
 Click on Draw > Borders > Width>None. The border is removed from the shape.
Create a border with transparent fill

Sometimes you want to use a border without a fill. This is useful when you want to outline a
text object or create a box as a design feature.
 Click on Draw > Shapes > Rectangle. This places a rectangle shape on the page with the last
used fill color. You can also use rounded rectangle, circle, or ellipse.
 Click on Draw > Borders > Width. Choose the width of the border that you want to have.
 Click on Draw > Colors > Border Color. Choose a color for the border.
 Click on Draw > Colors > Fill Color>Transparent. This removes the fill color and leaves
you with a border.
158
Drawing Lines
Lines are made from a rectangle shape that is resized to look like a line.
Create a line
 Click on Draw > Shapes > Rectangle. A rectangle is placed on the page.
 If you want to remove the border, click on Draw > Borders > Width>None.
 Use the selection handles to resize the rectangle to create a line.
 Use the Colors commands to change the color.
Create a graduated fill line
 Create a graduated fill rectangle.

 Select the rectangle.
 Drag the top, bottom, and side handles to resize it or hold down the shift key to use a corner
handle for sizing in either direction.
 You can resize any rectangle to as small as 1 pixel.
Setting the Opacity

The Set Opacity command in the Create tab allows you to make any graphic or shape more or less
transparent. This is a great design feature for your website. You can make a photo look like a
“ghost” image to use behind text or make some objects transparent to overlap with other objects
for a layered look.
 Click on the Create tab and go to the Opacity group.
 Use the slider on the Set Opacity command to increase or decrease the opacity of the object.
159
Editing Shapes
Shapes can be resized, aligned, spaced, and stacked just like any other objects. See Working with
Objects for complete instructions.
Change the radius of the rounded rectangle

The rounded rectangle shape has an extra handle called the Radius Handle. You can use this
handle to increase or decrease the amount of curve at the corners of the rectangle.
 Click to select the rounded rectangle. This causes the selection handles to be displayed. At
the bottom of the right hand corner is the radius handle.
 Move your mouse over the radius handle until it becomes a cross.
 Press the mouse button and drag the handle diagonally to increase or decrease the curve.
Color Tip
The Graphics Gallery contains a sub-gallery of color swatches. These
swatches can be used to create a color scheme for your website. Drag and
drop the graphic from the gallery onto your page. It is small enough to keep
on the page during design. Use the Select color eye dropper to choose colors
that match the colors on the color scheme graphic.
160
161
Chapter 13: Buttons
Chapter 13: Buttons

Buttons are very familiar objects on a website. When visitors click on a button, they expect to go
to another location in your site or another site on the internet. That is because buttons contain
links. These links can go to a different location on the current page
(aka “anchor”), to another page on your site, or to another website
on the internet. Buttons do have links, they are added later.
Buttons are also design elements that can enhance the visual style
of the page. They can range from simple colored objects with text
(such as a blue Home button) to buttons that change their
appearance when the mouse is moved over them or when they are
clicked (rollover buttons).
You can copy buttons, arrange them, and align them on the page just like other objects. After you
have all the buttons in place on a page, you can copy them and then use the Paste in Place
command to put them in the same location on other pages. If the buttons have links, the links are
pasted with the buttons onto the other pages.
Buttons and Links

A button is just another object on a page until it has a
link. Links are the connections that are needed in order Links can also go on text or any
for visitors to view all of the pages of your website. other graphics on your page. See
Besides adding links to buttons, you can add links to the Links chapter.
other objects, such as text or graphics.
Types of Buttons
There are three types of buttons: Normal buttons, Rollover buttons and Graphic Rollover buttons.
Normal Buttons Rollover Buttons Graphic Rollover Buttons

Normal buttons are those Rollover buttons change in Graphic Rollover buttons are
that always look the same. some way when you move the special buttons that allow you to
They do not change even mouse over them or click use graphics for one, two, or all
when the mouse is moved them. The changes are three states: Normal, Mouse
over them or when they are defined as three states: Over, and Mouse Down. This
clicked. Normal, Mouse Over, and means you can use text, photos
Mouse Down. In Web Studio, or any graphic objects to create a
you can change hue, custom look for the buttons on
saturation, and luminosity in your website.
one, two, or all three states.
162
Using a Button from the Buttons Gallery

The Buttons Gallery contains hundreds of ready to use buttons and you can also add buttons of
your own. To use a button from the Buttons Gallery, simply drag and drop it onto the page. This
opens the Rollover Button Studio that allows you to customize your button. After you make your
choices, the button is placed on the page. Later, you can always edit your choices by double-
clicking the button to reopen the Rollover Button Studio.
Add a button to the Buttons Gallery

You may want to use your own graphic to make a button. The easiest way to do this is to add it
to the Buttons Gallery. This allows you to use the features in the Rollover Button Studio for your
graphic. The Galleries chapter has detailed instructions for adding content to galleries. This is a
quick review to explain how to add a button to the gallery.
 Place a graphic on the page that you want to add to the Buttons Gallery.
 Click on tab to open the Buttons Gallery.
 Hold down the shift + ctrl keys and then drag and drop the graphic from the page onto one of
the buttons in the gallery. Do not use a button with a sub-gallery folder.
 The buttons in the gallery “move over” to make room for the new button and it is added to the
gallery.
 The original graphic remains on the page.
You can also use Right-click>Selected Object Menu>Copy and then Right-
click>Paste into the gallery.
163
Chapter 13: Buttons
Use the Buttons Gallery to make a button with normal or rollover options
When you drag and drop a button from the Buttons Gallery the Rollover Button Studio
automatically opens. This dialog provides you with several design choices for your buttons. You
can use this dialog to make changes in one or more of the states or make all of the states identical
to have a normal button.
Choose a button
 Scroll through the gallery and choose a button.
 Drag and drop the button onto the page. The Rollover Button Studio opens.
Fill in the Rollover Button Studio options

The Rollover Button Studio has three Preview windows that show what the button will look like
in the Normal, Mouse Over, and Mouse Down states. In our example above, this button will
look lighter blue when the mouse is moved over it and darker blue when it is clicked.
 Choose the options that you want for your button:

Button’s Text. Enter the name that you want displayed on the button. When you enter the
text, you can see what it will look like in the Preview pane. You can fill in this field now or
later.
164
Font Options. Click on Font and Color to select the font, font style, and font color for the
buttons.
Text Position. Use the Horizontal and Vertical sliders to move the text position on the
button up, down, left, or right. This is especially helpful when you have an icon on a button.
Color. The sliders allow you to change the Hue (color), Saturation, or Intensity for each
button state.
Text Style. Choose one of three styles for the text: Raised, Flat, or Sunken. The preferred
text for the normal state and any button that is not a rollover button is Flat.
Animate Button. This feature gives an animated look to the button. When the mouse is
moved over the button, the text moves a bit to the right. Then when it is clicked, the button
looks pressed and the text moves down a bit. Check this box if you want to animate the
button.
Link. Use the Link button to open a dialog where you can add links or anchors to the button.
See Adding Links to Buttons later in this chapter and also the Links chapter for more
information about working with links.
 A button is placed on the page. Even though the button has three states, only the normal state
is seen. To see the button in action with all three states, you must Preview the button.
Make a normal button without any rollover options

You can also use the buttons from the Buttons Gallery to create normal buttons that have no
rollover options.
 Scroll through the gallery and choose a button.
 While holding down the alt key, drag and drop the button onto the page. The Button Studio
opens. The screen shot shows the button commands in the dialog. The dialog in the program
also has a Help section.
165
Chapter 13: Buttons
 Fill in the button name in the text field, or leave it blank and fill it in later.
 Use the Font, Color, and Link buttons to make choices for the text on the button.
 Use the Link button to open a dialog where you can add links or anchors to the button. See
Adding Links to Buttons later in this chapter and also the Links chapter for more information
about working with links.
 The button is placed on the page.
Preview the button

 Click on Home > Preview > Preview Page or Create > Preview > Preview Page.
 View the button in the browser.
 If you created your button to change when the mouse moves over it or clicks it, you can see
these changes in Preview.
You can see what the button looks like and how it changes states using the
Preview Page command. However, if you want to check links on the button,
you must use the Preview Link or Preview Website commands.
Make changes to a button

 Double-click on the button.
 The Button Studio opens.
 Make changes and then click OK.
166
Creating a Graphic Rollover Button

A rollover button has the ability to look different in the normal, mouse over, or mouse down
states. A graphic rollover button is made of three graphics that look and act like buttons. To create
one of these buttons, you must add three graphics or text objects to your page. Even if you want to
use the same graphic twice, you will need three objects. The objects should be the same size or
proportions because Web Studio will resize all of the graphics to the size of the one selected for
the normal state.
Place and resize three graphics

 Place three graphic or text objects on the page.
 Select the object that you want to use for the normal state and then use the handles to make it
the size that you want for your button.
 Resize the other two graphics so that they have the same proportions.
 With the first object selected, hold down the shift key and then click on the other two objects
in the Mouse Over and Mouse Down order. Now all three objects are selected and can be
made to be equal size.
 Click on Page Layout > Make Equal > Size. This makes all of the objects the same size as the
first object.
Create the rollover button

 The objects are still selected. If they are not, then hold down the shift key and select the
objects in the normal, mouse over, and mouse down order.
 Click Create > Rollovers > Graphic Rollover. This opens the Graphic Rollover Button
Studio. This screen shot shows the commands. This dialog in the program also has a Help
section.
167
Chapter 13: Buttons
This dialog allows you to change the graphic as well as the text, font, and font color. You can
use any combination of graphics. It is not necessary to use text on graphic rollovers especially if
the graphic defines the purpose and state.
Button Text. This places text on all three states. If you want the text to be different on the
buttons, create a text box and merge it with the graphic before you make the rollover button.
Font Options. Click on Font and Color to select the font, font style, and font color for the
buttons.
Load Graphics. You can change any one of the graphics by clicking the Load New
Graphic button. This opens the Open dialog. Choose the graphic then click Open to replace
the graphic.
Preview the rollover button

 Click on Home > Preview > Preview Page or Create > Preview > Preview Page.
 To see the rollover button in action, move the mouse over the button and click on it.
You can see what the button looks like and how it changes states using the
Preview Page command. However, if you want to check links on the button,
you must use the Preview Link or Preview Website commands.
168
Editing Buttons
All buttons can be edited by double-clicking to bring up the Rollover Button Studio or Graphic
Rollover Button Studio. Each studio contains text and design choices for the button. Choose the
changes you want to make and then click OK when you are done.
You can make changes to buttons that have links without losing the link.
Adding Links to Buttons

A button is not a button until it has a link. The link tells the button what web page to go to when it
is clicked. You can add links to your buttons at any time, but it is quicker and easier to add links to
buttons once all of your pages are created. The Master Page provides you with a quick way to add
buttons to all of your pages. You can even add links to the buttons on the Master Page and the
links are automatically added to the other pages.
See the Links chapter for a full explanation of links and how to work with the Links Gallery.
Add a link to a button from the Links Gallery

The Links Gallery contains a list of all of the pages on your site in the Site Links section. You
drag and drop the page’s name from the gallery onto the
button.
Pay attention to the cursor’s
 Click on the Links tab in the Galleries pane. Hot Spot when you drop a
 Find the link to be added to the button. link. The tip of the cursor
 Drag and drop it from the Links Gallery onto the must be over the button
button. when you release the mouse
 The link is applied to the button. to drop the link.
Add a link to a button from the Page List

All of the pages of your Project are shown in the Page List. You can use the names to link to
buttons and other objects.
 Click on a page name in the Page List.
 Drag and drop the name onto the button.
 The link is applied to the button.
169
Chapter 13: Buttons
Add a link to a URL using a dialog

You can link to any page on the internet. If the link to another site is located in the Links
Gallery, you can drag and drop it onto a button just like any other link. However, if it is not in
the gallery you can add a link from two different commands using the Object Properties dialog.
Use the Add/Edit Link command

 Right-click on the button and choose Add/Edit Link from the Selected Object Menu. The
Object Properties dialog opens.
 Enter the Title, URL, and Description for the link and click OK.
 The link is applied to the button.
Use the Properties command
 Right-click on the button and choose Properties from the Selected Object Menu. The Object
Properties dialog comes up.
 Click on the Link section in the dialog.
170
 Click the Add/Edit Link button. The Link Information dialog comes up.
 Enter the Title, URL, and Description for the link and click OK. The link is applied to the
button.
171
Chapter 14: Links
Chapter 14: Links

Unlike a word processor, the pages that you create for a website do not really have any order. You
can create as many pages as you like, in any order that you like. The way your website is arranged
and organized is through links. A link is simply the web address of a
page or file. Since each page of a website has its own web address,
you can use links to send your visitors to any part of your site or to
any other website on the internet. Without links, visitors cannot go to
all of the pages on your website. Every page that you want your
visitors to see must have a link that will take them there. You decide
which pages in your Project to link together for the internet and
which pages to leave in the Project file.
The Links Gallery is an easy way to use page links, downloadable file
links, and any other links that you want to use on your website. The Site Links section in the
gallery lists all of the pages by name in your Project. Each time that you create a new page, the
link is automatically added to the Site Links list. The My
Links and File Links sections allow that you to add your Some objects cannot have
own links to the gallery. You can even add more sections links, such as Flash animations,
and organize your links to make them easy to use. sound objects and video
To use any link from the gallery, you drag and drop the objects. Web Studio knows
link onto an object. Links can be added to any text or what objects cannot have links
object on the page, but each item can have only one link. and won’t let you add them.
You can also add links to objects from the right-click
menu and the Links commands in the Insert tab.
Types of Links
Link. A connection to any page on your site or to any other page on the internet.
Page Link. A link that takes you to a page in your own website.
Footer Links. The row of text links that you see at the bottom of a webpage. The Footer Links
command in the Page tab places these links on the pages of your website. You decide which pages
to include in the Footer Links and which pages to exclude.
Anchor. This is an intra-page link. Anchors link one location on a page to another location on a
page. For instance, an anchor can take visitors back to the top of a page. They also can take
visitors to a specific spot on another page, such as a map.
File Links. File links are links that reference a file on your site. This type of link is used so that
people can download files from your site by clicking a button or text link.
172
FTP Links. FTP links are similar to file download links. However, they get the file to download
from an FTP site with an FTP address instead of from a website. You can add your own FTP links
to the Links Gallery.
Java Script with Links. Links can contain JavaScript to enable custom behaviors. The New
Window feature is accomplished with a small bit of JavaScript appended to a link. Adding
JavaScript to a link is an advanced feature.
Programmed Link. Advanced websites sometimes utilize programming languages other than
HTML, such as ASP. These types of sites often use links whose destination is determined based
on a visitor’s choice. For example, they fill out a form on a page and the contents of the form are
looked at by the ASP program to determine if the link should take the visitor to Page A or Page B.
Web Studio enables you to use any language to define your links.
Anatomy of a Link
A link consists of a few different pieces of information that when taken as a whole make a link.
Title. The title is used for two purposes. First, it identifies the link in the Links Gallery. The title
is what you see in the gallery. It also is used in the link’s HTML as the NAME tag.
URL. The URL is the address of the link. It can be a different location on the current page,
another page in your site, another of your sites, or any site or page in the world.
Description. The description is used for two reasons. First, it is used in the link dialog so that
you can refresh your memory as to the function of the link. Second, it pops up over the link when
a visitor moves the mouse over the link.
New Window. Most people want visitors to stay on their site as long as possible. If you have a
link on your site that takes visitors to another website, the New Window option will open the other
website in a new browser window. This keeps your site open while your visitors browse other
websites. You can have any link open in a new window.
Working with the Links Gallery

Site Links. This section contains a link to every page in your site. Each time you create a page,
the page is automatically added to the Site Links list. This list makes it easy to link pages within
your site.
My Links. This is the section where you can add links to other websites or to anything on the
web. It is especially useful if a link is used repeatedly on your site or in other Projects. You can
also add a link to your site without placing it in the Links Gallery first.
File Links. These links let your visitors download or view various files on your site. For
example, an Adobe PDF or Acrobat file can be put on your site using the File Links. When a
visitor clicks on the link, the Acrobat Reader plug-in is activated in their browser and the PDF file
173
Chapter 14: Links
is displayed for them. Other files such as PowerPoint, Excel, and more can be used in this manner.
If the visitor’s browser does not have a plug-in for the type of file that is in the File Links, a dialog
will open so the visitor can download the file to their computer for later use.
Internet Explorer Links. When Web Studio starts up, it scans your computer for your IE
Favorites. It then puts them all in the Links Gallery organized in accordance with the folders you
have created for them. To turn this feature on and off, go to the Web Studio Button and click on
Options at the bottom of the drop down window. Check or uncheck the box next to Link Gallery
Preferences>Add Internet Explorer Favorites to Link Gallery.
Adding New Links to the Links Gallery

The Links Gallery has two sections where you can add your own links: My Links and File Links.
After you add links, you can drag and drop them onto an object on the page just like the other
links in the Links Gallery.
My Links. Add web page links, e-mail links, and FTP links to this section.
File Links. Add file links that can be downloaded from your site. These links include files
such as PDF, ZIP, EXE, DOC, XLS, etc.
Add a link to My Links

 Right-click over a blank spot in the My Links list. The right-click menu opens.
 Choose Add Link from the menu. The dialog opens.
174
 Fill in the following fields:

Title. This is the link title that will be displayed in the My Links list in the gallery.
URL. Enter the URL of the link. The dialog already has “http://” in it so you can just type the
rest of the address, such as “www.mysite.com.”
Open this link’s page or file in a new browser window. Check this box if you want
the link to open in a new browser window. This allows your visitors to visit other sites
without leaving your site.
Description. This is the message that viewers see in a small pop-up window when the
mouse is moved over the link.
 Click OK when you are finished. The link is added to the My Links list.
Add e-mail links to My Links

 Right-click over a blank spot in the My Links
list. The right-click menu opens. To add an e-mail link, delete the
 Choose Add Link from the menu. The dialog “http://”and then key in “mailto:”
opens.
 Fill in a title for this link.
 Delete the “http://” text in the URL field
 Key in “mailto:” and then the e-mail address. It will look like this:
 Click OK.
175
Chapter 14: Links
Add FTP links

 Right-click over a blank spot in the My
Links list. The right-click menu opens. To add an FTP link, delete the
 Choose Add Link from the menu. The “http://”and then key in “ftp://”
dialog opens.
 Fill in the title.
 Delete the “http://” text
 Key in “ftp://” and then the address of the file on the FTP site. It will look like this:
 Click OK.
176
Add file links

 Right-click over a blank spot in the File Links section. The right-click menu displays.
 Choose Add File Link. The Add/Edit a Downloadable Link dialog opens.

Title. This is the link title that will be displayed in the File Links section in the gallery.
Choose a File to Download. Click on the Browse button. The Open dialog opens. Choose
the file that you want to link and then click Open. This is the file that is added to the File
Links section.
the link to open in a new browser window. This allows your visitors to visit other sites
Description. This is the message that viewers see in a small pop-up window when the
 Click OK when you are done. The link is added to the File Links section.
Add new link categories

When you have a large number of links, you can sort them into your own categories. You can
place any type of link into these categories. For example, you may want to have a category of
links for each different website that you maintain.
177
Chapter 14: Links
 Right-click on any link category except the Site Links section.

 Choose Add New Link Category from the menu. The Enter New Link Category Name dialog
comes up.
 Enter the name for the category and click OK.
 The new link category is added.
Delete link categories

 Right-click on the link category to be deleted.
 Choose Delete Link Category from the menu.
 The Delete Gallery Category dialog comes up asking if you really want to delete the category.
Click OK to delete the category.
When you delete a category, all of the links are deleted. Links that were
already added to your site will still work.
When you change a link in a category, it does not change the link that is
already added to an object.
Edit links in the Links Gallery

 Right-click on the name of the link to be edited. The right-click menu pops up.
 Choose Edit Link from the menu.
 Edit the link’s info and click OK when you are finished.
Adding Links to Buttons and other Objects
Find the Cursor’s Hot Spot

The tip of the cursor has a hot spot that is very important when you are adding links. As you
drag a link from the gallery, you will notice that a little box with a +
sign appears below the cursor. This is not the hot spot. The hot spot
is the tip of the cursor. When you drag a link from the gallery, keep
the mouse button pressed until the hot spot is over the object and
then release the mouse to drop the link. Make sure that you do not
drop the link until the hot spot is over the object or else the link may
not work. You can use the Highlight Objects With Links command
in the View tab to check the links on the objects.
178
Link a page from the Page List

 Locate the page that you want to link to an There are several ways to add
object. links:
 Drag and drop the page’s name or icon onto the  Drag and drop links from the
object. Links Gallery.
 The link to that page is now on that object.  Use the Add/Edit Link option
from the right-click Selected
Add a link from the Links Gallery Object Menu.
 Use the Links Commands in the
 Open the Links Gallery.
Insert Tab.
 Locate the link that you want to use.
 Drag and drop the link onto the button, object,
or text.
 The link is now on the object.
Add a link to an object from the Selected Object Menu

 Right-click on the object and choose Add/Edit Link from the Selected Object Menu. The
Object Properties dialog opens.
 Click on the Links section in the dialog.

179
Chapter 14: Links
Title. This is the link title that is placed in the My Links section.
URL. Enter the URL of the link. The dialog already has http:// in it so that you can just type
the rest of the address, such as www.mysite.com.
Select File. Click on this button to bring up the Open dialog. Click on the name of the file
that you want to link. Click Open.
the link to open in another browser window. This allows your visitors to visit other sites
Description. This is the message that viewers will see in a small pop-up window when the
 Click OK when you are finished. The link is added to the object.
Using the Link Commands to Add Links

The Insert tab has a Links group that contains all of the commands for links. These commands
make it possible for you to link to pages within your site, create e-mail links, links to files, links to
URLs, Footer Links, and even choose the colors that you want to use for text links. In addition, the
Home tab has some of the most commonly used links and the Text tab has all of the links that
relate to text. You can add a link to any object or text on the page.
180
Add a link to a file

 Select an object or text that you want to link to a file.
 Click on Insert > Links > File Links>the desired link. A dialog opens for the type of file you
chose. If you selected Other File, the Choose a File as a Link window opens. All dialogs give
you an option to Browse for a file.

Enter a Title for This Link. The default setting displays the file type that you chose. You
can change this to give it a specific name.
Browse to choose a file. Click the Browse button. The Open dialog opens. Choose the
file that you want to link and then click Open. This file is linked to your text or object.
Enter optional description. The text that you enter in this field will be displayed when
your visitor moves the mouse over this link.
 The file is now linked to the object.
 Go to Home > Preview > Preview Page or any other Preview Page command to see the
linked file.
 Click on the object. This opens the File Download dialog which gives your visitors a choice
to Open the file, Save the file or Cancel the action.
181
Chapter 14: Links
Create an e-mail link

An e-mail link can be added to any object on the page without adding it to the Links Gallery
first.
 Click on Insert > Links > Mail Link. This opens the E-Mail Link dialog.
 Enter the e-mail address in the e-mail field.

 Click OK.
 Click on any Preview command to check the e-mail link.
 In the Preview window, click on the object. A blank e-mail window opens.
 You may send an e-mail or close the e-mail window.
 Close the Preview page.
An e-mail link will work only if your website visitor has set up an e-mail
program on their computer.
182
Link to a page
 Click on Insert > Links > Page Link. This opens the Add Page Link dialog.
 Enter a title for the link.

 Choose a page from the drop down list.
 Enter an optional short description for your visitors that will be displayed when the mouse is
moved over the link.
Add other links

Use this command to open the Object Properties dialog that provides you with options to link to
a file, a URL, or an anchor.
 Select an object or text.
 Click on Insert > Links > Other Link. This opens the Object Properties dialog.
 Click on the Links section.
 Enter a title for the link.
 Fill in a URL or select an anchor or a file.
 Enter an optional short description for your visitors that will be displayed when the mouse is
moved over the link.
183
Chapter 14: Links
Adding Links to Text

Links can be added to any amount of text in an object. You determine what text in the text object
should have the link and then select that specific text. It can be a character, a word, several words,
a sentence, paragraph, the entire text object, or anything in between.
These directions explain how to use a link from the Links Gallery. You can
also use the Links command and the Object Properties dialog from the Text
Menu to add links to text.
Add a link to an entire text object

 Click once on the text object to select it. Do not double-click because that activates the text
object for editing.
 Click on the tab to open the Links Gallery.
 Drag and drop the link onto the text object.
 All of the text is now underlined and changed to
a different color. This indicates that a link has
been added to the text.
Add a link to a word

 Double-click on the text object to activate it for editing.
 Select the word to receive the link.
 Drag the appropriate link onto the
appropriate word and drop it.
 The word is now underlined and changed to
a different color. This indicates that a link
is added to the text.
Add a link to a selection of text

 Double-click on the text object to activate it for editing.
 Select the text that will have the link.
 Drag the appropriate link onto the
selected text and drop it.
 The selected text is now underlined and
changed to a different color. This indicates that a link is added to the text.
184
Working with Text Link Colors and Styles

There are different ways to tell your visitors that text has a link. Text links on web pages usually
have a color that is different than that of the rest of the text. This distinguishes them and identifies
them as links to the visitor. The colors can change to show that the visitor has never visited or
already visited the link. The color also can change when the visitor moves the mouse over the link.
Another web convention is to underline text that has links. Any and all of these options are
available in Web Studio.
Change the link colors on a page

 Click on Text > Links > Link Colors.
 Move the mouse over Link Color, Visited Link or Hover Color. As you move the mouse, the
Colors dialog is displayed.
 Click on one of the basic colors to apply it to the link. If you want more color choices, click
on Eyedropper & More. This opens the Colors Standard and Colors Custom dialogs.
 Choose a color from one of the dialogs or use the Select button to change your cursor to an
eye dropper. Click the eyedropper on any color in your monitor to select the color. See the
Color and Shapes chapter for a detailed description of the Colors dialog.
 Choose a color for each link state.
 Go to Home > Preview > Preview Page or any other Preview Page command to see the links.
185
Chapter 14: Links
Notes about Link Colors

Note 1. The link color changes show only in Preview and on the internet.
Note 2. If you use unsafe fonts, your link colors may not be correct. See the
Text chapter for more information about web safe fonts.
Note 3. Applying link colors and styles to all pages may take some time
since each page must be modified. If you want to use the same color and
styles on all of the pages, use the Web Studio Preferences dialog. See Apply
underlines and link colors to the whole website later in this chapter.
Add or remove the underline on text links

 Click on Web Studio Button>Options at the bottom of the menu. This opens the Web Studio
Preferences dialog.
 Check the Underline Link box to underline the Unvisited, Hover Over or Visited links.
 Uncheck the box to remove the underline from the Unvisited, Hover or Visited links.
 Go to Home > Preview > Preview Page or any other Preview Page command to see the links.
You can also change link colors in this dialog. The underline and link color
changes will be displayed only in Preview and on the internet.
186
Apply underlines and link colors to the whole website

If you are using the same color and style for the whole site, this feature can save you some time.
Even if you choose this option, you can override it by changing the colors on an individual
page.
 Click on the Web Studio Button>Options at the bottom of the menu. This opens the Web
Studio Preferences dialog.
 Check or uncheck the boxes to turn the underline style on or off for Unvisited, Hover Over or
Visited links.
 Click the Link Colors for Text buttons to change the color of the Unvisited, Hover Over, and
Visited link colors.
 Check the Apply new link color and underline settings to all pages in this website checkbox.
 Go to Home > Preview > Preview Links/Website or any other Preview Links/Website
command to see the links.
Opening Links in a New Browser Window

You may want to have a link open in a new browser window. This is important if you do not want
your viewers to navigate away from your site when they click on a link. Every link dialog has a
field to choose to open the link in a new
browser window.
When you choose to open a link in a
 Right-click over an object with a link. new browser window, it does not affect
 Click on Add/Edit Link from the Selected the other links on the page. You must
Object Menu. This opens the Object choose this option for each link that you
Properties dialog. want to open in a new browser.
187
Chapter 14: Links
 Check Open this link’s page or file in a New Browser window.

 Click OK.
 Go to Home > Preview > Preview Links/Website or any other Preview Links/Website
command to see the links.
Removing or Editing Links on Objects or Text

You can remove, edit, or replace links on objects or text. When you want to replace a link, you do
not need to remove the first link. Simply edit the link and
the new link automatically replaces the current link. Use
If you drag another link from
the Links Gallery or the right-click menu to add, edit, or
the Links Gallery onto an
remove links. In addition, the Home and 𝐼𝑛𝑠𝑒𝑟𝑡 𝑡𝑎𝑏s
object with a link, the link is
each have a Remove Link command.
automatically replaced with the
new link.
Edit or replace links
 Right-click over the object or text with the link.
 Click on Add/Edit Link from the menu. This opens the Object Properties dialog.
 Make changes in the dialog.
Drag and drop a link from the Links Gallery to replace an existing link
 Click on the Links tab to open the Links Gallery.
 Drag and drop a link onto an object or text with an existing link. The new link replaces the
existing link.
188
Remove links using the right-click menu

 Right-click over the object or text with the link.
 Choose Remove Link from the Selected Object Menu or the Text Menu.
Remove links using the Remove Link command

 Select the object or text with the link.
 Click on the Home or Insert tab.
 Click on the Links > Remove Link command.
Adding Footer Links

Footer Links are the small text-based links along the bottom of the page that are separated by
vertical bars. These usually contain a link to all of the pages on a website.
Footer Links use information from the Page List to create the links. The pages are added to the
Footer Links by name in the order they appear in the Page List. You can change the list order so
that the Footer Links appear in the order that you want them to be on the page. If you have not
renamed your pages, the links will display Untitled 1, Untitled 2, etc.
All the pages in the Page List are automatically included in Footer Links by default. Since you
probably will have more pages in your Project than you want to upload to the internet, you can
choose to remove any page from the Footer Links and then add it again if you want.
When you are ready to insert Footer Links onto your page, click on the Footer Links command in
the Insert tab. Once Footer Links are on a page, they do not update automatically when you
change the page names, page order, add new pages, or delete pages. However, it is easy to update
the links by clicking again on the Footer Links command. When you are building a website,
Footer Links may be one of the last things that you want to do.
Add or remove pages from the Footer Links

It is easy to tell which pages are included in Footer Links by looking at the Footer Links
command in the Page tab when a page is open on the workspace. If the page is included, the
Footer Links command is highlighted. If the page is not included, the Footer Links command is
not highlighted.
Another way to see if a page is included in Footer Links is to view the page’s right-click menu.
A check in front of Include in Footer Links means that the page is included. Pages that are
excluded do not have a check.
189
Chapter 14: Links
Use the Page List to add or remove a page in Footer Links

 Right-click on a page’s name to see the menu.
 Look for the Include in Footer Links item in the menu.
 Click to place or remove a check in front of this command. A checkmark indicates that the
page is included in Footer Links. If it does not have a checkmark, it is not included.
Another way to see this menu is to click on the page’s name to select it. Then
go up to the Page List button and left click on it. This displays the same menu
as the page’s right-click menu.
Use the Include Footer Links command to add or remove a page

 Add a page: Click on Page > Include Page In >
Footer Links to highlight the Footer Links command When a page is included
and include the page in the Footer Links. in Footer Links, the
 Remove a page: Click on Page > Include Page In > Footer Links Command
Footer Links to remove the highlight from the Footer in the Page Tab is
Links command and remove the page from the Footer highlighted.
Links.
190
Put Footer Links on a page

Add Footer Links with the Footer Links command in the Links group. The best way to add them
is to place them on the Master Page. This will automatically add them to all of the pages. If you
are not using a Master Page, then you must put the Footer Links on each page.
 Open the Master Page or any page by clicking on the tab.
 Click on Insert > Links > Footer Links command.
 Footer Links are added to the page.
 Drag to position the Footer Links or use any of the object commands to place them where you
want them.
 See Working with Text Link Colors and Styles earlier in this chapter to learn how to change
the color of the Footer Links.
Since Footer Links do not update automatically when you add or remove
pages, it is best to add them last when you are building your website. If you
make a change to Footer Links after they are on a page, simply click the
command to insert the Footer Links on the page again. This updates the
Footer Links.
Change the page order for the Footer Links

You can change the order of the Footer Links in the Page List window. The changes in the Page
List are not made automatically in the existing Footer Links on the pages. After making
changes, simply add the Footer Links again. The new links will replace the existing links.
Change the page order using the right-click menu

 Right-click on the name of the page you want to move.
 Choose Move Up or Move Down. The page is moved in the list.
Change the page order using keyboard shortcuts

 Click on the page name in the Page List.
 Press Alt+Page Up to move the page up the list.
 Press Alt+Page Down to move the page down the list.
191
Chapter 14: Links
Using Anchors
An anchor is a type of link that takes visitors to a specific location on any page within your
website. The anchor is placed on an object on the page. Another object is placed on a page with a
link to the anchor. When visitors click on the link to the anchor, it brings them to the spot on the
page where the anchor is located. Anchors can make navigation easier, especially in a large site.
For instance, you can use an anchor at the bottom of a long page to bring visitors back to the top
of the page, or you can also have a link on the Home page that takes you to an address at the
bottom of the Contact page.
There are two steps to use anchors:
1. Designate an object to be an anchor.
2. Link to the anchored object.
Any object can be used as an anchor. First the object is assigned anchor properties and then
placed in the Links Gallery. Once an anchor is in the gallery, it is ready to link onto any other
object or text.
Remember that the link takes your visitors to the anchor. This means that if you move the
anchor, you change the location where the visitors go when then click on the link. For example,
if you want to use an anchor to take the visitors back to the top of the page, make sure the
anchor is not at the bottom of the page.
Designate an object to be an anchor

 Open the page and locate the
object that you want to use as an
anchor.
 Drag and drop the Add Anchor
to object link onto the object.
This opens the Add Anchor
dialog.
 Enter the following information
in the dialog:
Title. Enter a title for the
anchor. This is the name that will be displayed in the Site Links list.
Description. Enter the description for the anchor. This is used on the web to display in a
small pop-up window when a visitor moves the mouse over the link to the anchor.
 Click OK. This adds the anchor to the Site Links list in the Links Gallery. The title of the
anchor is displayed in the list.
 Position the anchor on the page. Now you can link any object to the anchor.
192
Linking to an Anchored Object

Use the Links Gallery to link to an anchor
 Locate the object or text that you want to link to the anchor.
 Drag and drop the name of the anchor from the Site Links list onto the object or text. The
object or text is now linked to the anchor.
 Check the anchor using the Preview Links or Preview Website commands.
Use the Properties dialog to link to an anchor

 Right-click over an object that you want to link to the anchor.
 Choose Add/Edit Link from the menu.
 In the URL field, enter “#” followed by the name of the anchor. The name of the anchor can
contain spaces.
 Click OK to create the link.
Remove an anchor link

 Right-click over the linked object.
 Click on Add/Edit Link from the menu.
 Click on the Anchor section.
 Check the box in front of Click this checkbox to remove this anchor from this object.
 Click OK. The anchor is removed.
193
Chapter 14: Links
Previewing Links
The way to check the links on your site is through one of two Preview commands: Preview Links
or Preview Website. Both of these commands place your website in a browser window so that you
can check all of the links, including links to other websites. Because the Preview Page command
only places one page in the browser window; you cannot check your site links with this command.
The Home and Page tabs have Preview Links or Preview Website commands. Both of these
Preview commands allow you to view your entire website; not just one page.
 Click on Home/Page > Preview > Preview Links or Preview Website.
 When your website opens in the browser window, click on all of the links to make sure they
are working properly.
The Web Studio browser opens as a page on the workspace. It has a tab
labeled Preview Site: Untitled.
The Default browser opens in your internet browser window.
 Close the Web Studio browser by clicking the X on the Preview Site tab. Close your internet
browser as you normally would.
194
Highlighting Objects With Links

Since links are invisible pathways, it is impossible to see them on buttons and other objects. In
order to check how links are working, you must use the Preview Links or Preview Website
commands. However, the easiest way to simply see what objects contain links and what objects do
not have links is to use the Highlight Objects With Links command.
Highlight objects with links

 Click on View > Highlight Objects>Objects With Links.
 Every object with a link has a red box around it. If you do not see a red box, this means that
the object does not have a link.
 To turn off the highlight, click on the Don’t Hilite command.
Turn off the highlight on links

 Click on View > Highlight Objects>Don’t Hilite.
Inserting a Google Map

There are two ways to use Google Maps on your website. You can place a map on your page using
the Google Maps command or create a link that takes your visitors to Google Maps.
Insert a Google Map on a page

 Click on Insert > Google > Google Maps. This opens the Google Maps Properties dialog.
195
Chapter 14: Links
 Click on Go to Google Maps. This opens the Google Maps website in your browser.
 Choose the map that you want to use.
 Click on “Link” in the upper, right corner of the map. This opens a dialog with the link and
HTML information.
 Click to select the text in the Paste HTML field.
 Right-click over the selected text and choose Copy from the resulting menu.
 Go back to the Google Maps Properties dialog in Web Studio.
 Right-click in the Paste the Google Maps HTML field and choose Paste from the resulting
menu.
 Click OK. This places a Google Maps object on the page.
 Resize and position the object.
 Click on any Preview command to see the map on the page.
Click on Customize and preview embedded map to make changes to the map.
If you want to remove the address balloon from the map on your page, delete
the address in the Google field, refresh the screen, and then resize the map.
196
Link to a Google Map

 Place an object or text that will link your visitors to the map.
 Open your browser and go to the Google Maps website.
 Choose a map.
 Click on Link in the upper right corner of the map. This displays the link and HTML
information.
 Click on the text in the Paste Link in E-mail or IM field to select it.
 Go back to Web Studio and right-click over the object for the link.
 Choose Add/Edit Link from the Selected Object Menu. This opens the Object Properties dialog.
 In the Links section, delete the “http://” in the Enter URL field.
 Right-click over the Enter URL field and choose Paste from the resulting menu.
 Click OK. This links the object to the map on the Google website.
 Click on any Preview command to link to Google.
197
Chapter 15: Multi Media

You can add a variety of media to your website with the Media
group commands in the Insert tab. Web Studio enables you to add
Flash, MIDI, MP4, and any of 16 different sound files and any of
13 different video files.
Inserting Flash Animations

Some programs that create Flash animations create two files, the Flash file and an HTML file.
Web Studio reads the HTML file and sets the Flash animation properties according to the HTML
file. Those properties are size, background color, animation quality, and looping properties.
If the HTML file is not available, Web Studio reads the Flash .swf file and determines what size
the animation is. The other properties are set to the most frequently used values.
Insert a Flash animation from a file

 Click on Insert > Media > Insert Flash. The Open dialog appears.
 Select the Flash file and click Open. The Flash Settings dialog opens.
 Choose the following settings:

198
Flash size. The Width and Height fields are displayed in the pixel size of the inserted
Flash animation. You can adjust the size now or later.
Properties. Set the quality of the graphic.
Looping. Choose to have the animation play once or continuously.
Background. Choose a background color for the animation.
 Click OK when you are finished. The Flash animation is added to the page.
 Drag the Flash object to the location on the page where you want it to appear.
Play a Flash animation on the page

Web Studio enables you to play Flash animations without Previewing the page. This allows you
to align the animation with other objects on the page and stop the animation at a particular
frame.
Start play on the page

 Double-click on the Flash object.
 The animation plays continuously.
Stop play on the page

 Click on the page background or any other object.
 The Flash animation stops and displays the frame that was last displayed in the animation.
Using the Flash Object Properties Dialog

The Flash Object Properties dialog enables you to edit the Flash settings: size, quality, looping,
and background color options you chose when the Flash was inserted. Through the properties
dialog, you can also replace the current Flash with another and attach notes to the Flash object.
199
Open the Flash Properties dialog

 Right-click on the Flash animation and choose Properties from the Selected Object Menu. The
Object Properties dialog opens to the General section.
 Click on each section to view the options for the Flash object.
General section
Object Info. Web Studio assigns an ID Number to the object. This number can be used by
advanced users to reference the object n their HTML.
Position. Here you can use specific parameters to align the object. You can also choose to
Lock the Object Position by checking the box.
Size. The current pixel size is displayed. Check Proportional Resizing before resizing to keep
the same proportions. Check Lock Object Size to prevent resizing of the object on the page.
200
Notes section
Enter notes that you want to remember about the object. The text is saved with the object.
Flash section
Flash Movie Location on Disk. This field displays the folder location of the current
animation. Click on Browse to open the Open dialog and choose another animation to replace
the current one.
Properties. Choose the Quality and Looping Properties of the animation.
201
Background. Click the Background Color button to choose a new background color for the
animation.
Resizing Flash Animations

Flash animations are normally designed to be a specific size. You can resize an animation using
any method, but resizing may distort the appearance. If you do not know the design size, then
resize the animation until it appears correctly on the page.
Inserting Videos Through Links

There are 13 different types of video files that you can use with Web Studio and there are a few
different ways to add them to your site. A video can be added to a page with visible playback
controls. Videos can be added to objects as links, so that when the object is clicked on the video is
played.
Insert a video as an embedded object from a file

 Click on Insert > Media > Video. This launches the Open dialog.
 Select the video file and click Open.
 The Add/Edit Video dialog is displayed.
202
 Choose how many times that you want it to play.

 Choose if you want to have the video start to playing automatically.
 Click OK.
 View the video in Preview by clicking on Home > Preview > Preview Page or Page >
Preview > Preview Page. If it is set to play automatically, the video will start. If not, click the
Play button on the control on the page.
Link a video to an object using the Insert Sound command

 Select the object that you want to link to the video.
 Click on Insert > Sound. This launches the Open dialog.
 The video is added to the object as a link.
Preview > Preview Page. Click on the object to view the linked video.
Link a video to an object by dragging a Windows file

 Open the page with the object that you want to link to the video.
 Locate the video file in the any Windows folder.
 Drag the video file directly onto the object on the page.
 The video is now linked to the object.
Preview > Preview Page. Click on the object to view the linked video.
203
Drag to insert a video file from Windows and create a linked text object
 Locate the video file in any Windows folder.
 Drag the file directly onto the background of the page. This automatically creates a new text
object.
 Key in the text that you want in the object.
 The video is now linked to the text object.
Preview > Preview Page. Click on the text to view the linked video.
Notes on linking to videos:

 You can drop the video onto an inactive text object to add the link to all
of the text in the object.
 Drop the video on a single word to add the link to just that word.
 Drop the link on a selection of text, words, or paragraphs to add the link
to that text.
Link a video to an existing text object using the Video command

 Select the text that you want to link to the video.
 Click on the Video command in the Insert tab. This launches the Open dialog.
 The video is added to the text as a link.
Link a video to an existing text object from Windows file

 Select the text that you want to link to the video.
 Locate the video file in the any Windows folder.
 Drag the video file directly onto the text that you selected.
 The video is now linked to the object.
204
Setting Video Properties

Set the properties of an embedded video with visible controls
 Click on the Media section.
 Click on the Edit Media Properties button.
 You can choose how many times that you want it to play.
 You can choose to have the video start to play automatically when the page loads or to allow
the viewer of the page choose to start the video.
Inserting a You Tube Video

You can easily insert a You Tube Video to play on your website using the You Tube command in
the Insert tab. Visitors use the controls to play the video just as they would on the You Tube
website.
Insert a You Tube Video

 Click on Insert > Google > You Tube. This opens the You Tube Properties dialog.
 Click on the Go To You Tube button. This opens the You Tube website in your browser.
 Choose the video in You Tube that you want to insert.
 Look to the right side of the You Tube window and find the Embed field for the video.
205
 Click on the text in the Embed field to select it.

 Now go back to the You Tube Properties dialog in Web Studio.
 Right-click over the blank area in the Paste the You Tube HTML field.
 Choose Paste from the resulting menu.
 Click OK to close the dialog. This places a You Tube object on the page.
 Resize the object and position it.
 To view the video, click on any Preview command. The video becomes live in Preview and
on the internet.
Inserting Sound Using Links

There are 16 different types of sound files that can be used, and there are a few different ways to
add them to your site. A page can have a background sound that starts playing when its page is
displayed. A sound can be added to a page with visible playback controls. Sounds can be added to
objects as links, so that when the object is clicked on the sound is played.
Add embedded background sound from the Sound command

 Click on Insert > Sound. This launches the Open dialog.
 Select the sound file and click Open. The Add/Edit Sound dialog is displayed.
206
 Fill in the following information:

What would you like to do with the sound? Choose to make it a background sound or
a sound with a visible control on your page;
Settings. Choose how many times that you want it to play. You can choose to have the
sound start to play automatically. With background sounds, this option must be turned on
otherwise the sound will never play.
 Check the sound in Preview by clicking on Home > Preview > Preview Page or Page >
Preview > Preview Page.
Link sounds to objects using the Sound command

 Select the object or objects that you want the sound to be linked to.
 Click on Insert > Insert Sound. This launches the Open dialog.
 Select the sound file that you want to insert and click Open.
 The sound is added to the object as a link.
Preview > Preview Page. Click on the object to hear the sound.
Drag to insert a sound file from Windows and create a linked text object
 Locate the sound file in any Windows folder.
207
 Drag the file directly onto the background of the page. This automatically creates a new text
object.
 Key in the text that you want in the object.
 The sound is now linked to the text object.
 Check the Sound in Preview by clicking on Home > Preview > Preview Page or Page >
Preview > Preview Page. Click on the text to hear the linked sound.
Link a sound to an existing text object using the Insert Sound command
 Select the text that you want to link to the sound.
 Click on Insert > Insert Sound. This launches the Open dialog.
 Select the sound file and click Open.
 The sound is added to the text as a link.
 Check the Sound in Preview by clicking on Home > Preview > Preview Page or Page >
Notes on adding sounds as links to text objects:

 You can use any of the methods available to add a link text to add a
sound’s link to text.
 You can drop the sounds onto an inactive text object to add the link to all
of the text in the object.
 Drop the sound on a single word to add the link to just that word.
 Drop the link on a selection of text, words, or paragraphs to add the link
to that text.
Link a sound to an existing text object from a Windows file

 Select the text that you want to link to the sound.
 Locate the sound file in the any Windows folder.
 Drag the sound file directly onto the text that you selected.
 The sound is now linked to the object.
208
Setting Sound Properties
Set the properties of a background sound

 Right-click over a blank spot on the page and choose Page Properties from the Page
Background Menu.
 Click on the Background Sound section.
 Click on the Edit Sound Properties button.
Set the properties of an embedded sound with visible controls

 Click on the Media tab.
 Click on the Edit Sound Properties button.
 Choose if you want to have the sound start to play automatically.
209
Chapter 16: Slide Shows

The Create tab contains a Slide Show group that offers several options to have slide shows on your
website. You can create an Adobe Flash based slide show in Web Studio or link to an online slide
show using one of our online Slide Show commands.
Each group on the ribbon has a Video Launcher that shows
videos about that group. Click on the launcher to see the video.
These are the Slide Show commands in the Create tab:

Flash. This is a slide show created in Web Studio with photos,
graphics, or text.
Smug Mug. This is an internet based, commercial photo site. There is a fee to use this site.
Flickr. This is Yahoo’s internet based photo management site. The basic accounts are free or
you can purchase a Pro Account.
Flickr Badge. In addition to creating a slide show with Flickr, you can also insert a Badge on
your website.
Picasa. This is Google’s free online photo management site.
Creating a Web Studio Flash Slide Show

Web Studio creates Adobe Flash based slide shows. Since everyone has Flash on their computers,
all of your visitors can view your slide show. To create a slide show you simply add a series of
photos, graphics, or text objects to your page, select them in the order of appearance and then click
on the Flash Slide Show command.
Notes about Flash Slide Shows

Background colors are important if your slides are not all the same size. The
slide show does not resize your graphics to a uniform size since that would
distort them. If you have one that is wider, the narrower ones will have some
space around them that is filled with the color that you choose.
One way of working with disproportionate objects is to merge each one with
the same size rectangle shape. If you make the rectangles a little larger, you
can create the appearance of a frame around each object in the slide show.
210
Create the Web Studio Flash slide show

 Place two or more photos, graphics, or text objects on the page.
 Resize the images so that they are the same size or same proportions. The size of the slide
show is the size of the largest image. See the Notes about Flash Slide Shows above for more
information.
 Select the objects in the order that you want them to appear in the slide show. Do this by
holding down the shift key and clicking on the objects in order.
 Click on Create > Slide Shows > Slide Shows>Flash. The Slide Show Options dialog opens.

Change Slides. Enter the number of seconds that you want each slide displayed.
Background Color. This is the background color of the slide show. There are two options.
 Use Page’s Color. This uses the current background color. If a background graphic is
used for the page, the default color is white.
 Select Custom Color. Click this button to activate the Color dialog. Choose any color
that you want for your slide show background.
 Click on any Preview Page command to see the slide show in action.
Edit the Web Studio Flash slide show

While you are creating the slide show, click on the Undo command or ctrl+z to undo your
actions. Later, you cannot take apart the slide show. Therefore, it’s a good idea to keep copies of
the slides in case you want to remake the slide show. You can put copies in the My Stuff Gallery
or on a blank page that is not included in your website.
211
Creating a SmugMug Slide Show

SmugMug.com is a commercial photo site that helps you create professional looking slide shows,
online albums, prints, and gifts. There is a charge to use Smug Mug, so visit their site for
information and examples of slide shows.
 Create a Smug Mug album online. Note the Catalog ID and Album Key for the slide show.
 Click on Create > Slide Shows > SmugMug.
 The Smug Mug Slide Show dialog opens.
 Enter the SmugMug Catalog ID and the SmugMug Album Key for this slide show. If you do
not know these numbers:
1. Click on the Go to SmugMug button and login. Then click on Your Photos.
2. Scroll down and click on the gallery that you want in your slide show.
3. Click on the Share button and choose Get a link.
212
4. Look under the Gallery Links section for the Slideshow field.
5. In the Slideshow field, look for the Album ID and the Album Key.
6. Copy and Paste those numbers into the Album ID and Album Key fields in the Slide Show
dialog.
There is more than one way to find your Album ID and Album key in
SmugMug. Use whatever method is most familiar to you.
 Click OK.
 The Smug Mug object is inserted on the page.
 Click on any Preview Page command to see the slide show.
Creating a Flickr Slide Show

Flickr is an online photo management site. The basic accounts are free or you can purchase a Pro
Account. In order to use Flickr, you must have a Yahoo account. You can sign up for this free
account on the Flickr website. Once you sign up, there is plenty of help to get you started creating
your album.
213
Insert a Flickr Slide Show

 Create a Flickr slide show online.
 In Web Studio, click on Create > Slide Shows > Flickr. This opens the Flickr Slide Show
Properties dialog.
 Click on the Go To Flickr button. This takes you to the Flickr website.
 Login to Flickr.
 Navigate to your slide show set. You can do this in several ways:
1. Use the Search field to find the set that you want.
2. Click on Organize>Your Sets to open a list of your sets.
3. Click on Your Photostream on the Home page to open a list of your sets.
214
 Choose the Set that you want to use for the slide show.
 At the top right side of the page, click on Slideshow. This opens the Set in a slide show
window.
 Click on Share at the upper right of the slide show window. This displays the URL and
HTML information for the slide show.
 Click on Copy to Clipboard below the Grab the embed HTML field.
 Go back to Web Studio.

 Right-click in the text area of the dialog and choose Paste from the resulting menu.
 Click OK. The Flickr object is placed on the page.
215
Insert a Flickr badge

A badge is a rectangle graphic that displays photos and/or messages on your website. There are
two types of badges to choose from on the Flickr site: HTML or Flash. The Go to Flickr Badges
button in the Flickr Badge Properties dialog takes you to the Flickr website to make a badge.
 Click on Create > Slide Shows > Flickr Badge. This opens the Flickr Badge Properties
dialog.
 Click on Go to Flickr Badges. This takes you to the Badge generator.
 Select an HTML badge or a Flash badge and then click Next.
 Follow the steps to create a Badge.
 On the last step, select the code and choose Copy from the resulting menu.
 Right-click over the text field and choose Paste from the resulting menu.
 Click OK. The Flickr Badge object is placed on the page.
 Click on any Preview Page command to see the Badge.
216
Creating a Picasa Slide Show

Picasa is Goggle’s online photo management site. The basic account is free, but you can purchase
more storage space if you need it. Sign up for a free account at the Picasa website.
 Create a Picasa album online.
 In Web Studio, click on Create > Slide Shows > Picasa. This opens the Picasa Slide Show
Properties dialog.
 Go to Picasa as you normally would or click on the Go to Picasa button.
 Click on the album that you want to use for your slide show.
 Look on the right side of the Picasa window and click on Link to this album. Then click on
Embed Slideshow. This opens a dialog to choose slide show options.
 Choose the options that you want for your slide show.
 Click in the yellow window to select code and then right-click and choose Copy.
 Right-click in the text field and choose Paste from the resulting menu.
 Click OK. The Picasa object is placed on the page.
217
Chapter 17: Animations and Text FX

Animations are made with stationary GIF images that simulate motion. The effect is achieved by
repeating several slightly altered images to give the appearance of
motion. These images look stationary while you are working on the
page. The images become animated when viewed in Preview or on
the internet. Web Studio’s Ani-maker command in the Create tab
allows you to create animated signs, banner ads, presentations, and
more.
The Text FX command creates text that spins, zooms, and fades on or
across the page.
Creating Animations
When you create animations, you first prepare the objects
that you will use in the animation and then set the timing in
the Animations Studio dialog. The timing is calibrated in You cannot add sound to
tenths of a second. So 1 is one tenth, 10 is one second, and animations because sound
100 is ten seconds. The range of timing is from 1 tenth to will stop the animation
20 seconds. from working in browsers.
Prepare objects for animation

Too many animations will
Regardless of their appearance, all graphics on the web slow down the loading time
are rectangles. For instance, a cartoon is an image on a of your site.
colored rectangle background. When the background is
the same color as the page background, you only see the
cartoon image on the internet.
To keep the animation looking smooth and proportionate, the Ani-Maker makes all of the
graphic objects the same size when it creates the animation. It uses the size of the first selected
object to resize the others in the group. Therefore, make sure your objects are the same size or at
least the same size ratio or they will appear distorted in the final animation. Crop images or
resize them and then resample them to adjust sizes. Also keep in mind that depending on your
page background, you may see the rectangle backgrounds of the images.
If you use photos as the objects for animation, the animation will have the
look of a continual slide show on the page. See the Slide Show chapter for the
different slide shows that you can create with Web Studio.
218
Make an animated GIF

 Put the objects for the animation on the page.
 Resize the objects to make them the same size or size ratio.
 Select the objects in the order that you want them to appear. Remember to hold the shift key
down while you select them.
 Click on Create > Animations > Ani-Maker. The Animation Studio dialog comes up.
 Fill in the Set Delay value. The dialog contains suggested delay times.
 Click OK.
 To see the animation in action, click on Home > Preview > Preview Page or any other
Preview Page command.
219
Insert animations from a file

 Click on Insert > Media > Flash. The Windows Open dialog appears.
 Choose the animated GIF file that you want to add and click Open.
 The animation is added to the page.
 Click on the Preview Page command to see the animation in action.
Editing Animations
Change the images in the animation

The Take Apart Object command allows you to add, subtract, and reorder the graphics of an
animation that you make in Web Studio.
 Right-click over the animation.
 Choose Take Object Apart from the Selected Object Menu.
 Add, delete, or reorder the graphics.
 Select them in the order that you want them to appear and then click on the Ani-Maker
command to put the animation back together.
 Fill in the Set Delay value.
 Click OK.
 Click on the Preview Page command to see the animation in action.
Change animation delay

 Double-click to bring up the Animation Studio dialog.
 Enter a new Set Delay value and click OK.
220
Creating Text FX
The Text FX command in the Create tab enables you to apply animation effects to text such as
fade, zoom, and spin. The text that you want to animate is entered into the Text Effects dialog
instead of a text object. The effects are displayed when a visitor opens the webpage.
 Click on Create > Text Effects > Text FX. This opens the Text Effects dialog.
 Type in the text that you want to animate.

 Choose the Font & Size, Background Color and Text Color.
 Click on the arrow to display the Type of Text Effects available. Choose the effect.
 Click OK when you are done. This places a Flash object on the page.
 To see the effect in action, click on Home > Preview > Page or any other Preview Page
command.
221
Chapter 18: Templates

The Templates Gallery contains professionally designed templates
for you to use. Additional templates are available at webstudio.com.
Templates are created with graphic objects so that you can move,
resize, or replace the template parts. You can even copy graphics that
you see in a template and paste them into any of your pages. If you
want to design your own templates, the Save Page As Template
command adds the page to the Templates Gallery.
Opening Templates
Use a template from the Template Gallery

 Click on the Templates tab in the gallery to open the Templates Gallery.
 Scroll and choose a template.
 Drag and drop the template onto an existing blank page.
Open a saved template

 Click on Page > Templates > Open. This opens the Open dialog.
 Navigate to the template file that you want to use.
 Click Open.
 The template is opened as a new page.
If you choose to introduce a template after you create a Master Page, the
Master Page elements are applied to the template.
Working with a Template

Because a template is simply a collection of objects that
are arranged on a page, it is easy to use one or all of the
graphics in a template for web design. Click on Home > Help >
Things that you need to know about templates. Quick Start Videos to see a
 Every graphic in the template can be deleted and Video Tutorial about
replaced with one of your own. templates.
222
 The buttons are real, functioning buttons. If you double-click on them you will get the Button
dialog.
 Some of the templates contain color codes so that you can easily duplicate the color.
 Double-click to activate text objects for editing and replace your own text.
 Graphics can be cropped or resized.
 The color scheme can be completely changed. See Changing the Template Color section later
in this chapter.
 After you finish customizing your template, you can save the page and add it to the Templates
Gallery as another template choice. See Saving Pages as Templates below.
 Text objects that are over graphics, but not an actual part of the graphic, can be edited.
 Text that is an actual part of the graphic cannot be edited. For instance, some banners contain
text as part of the design feature. In this case, delete the graphic with the text. The same
graphic without the text is directly below the one with the text. This means that you can delete
the top one and then modify the second one.
Saving Pages as Templates
Add a page to the Templates Gallery

You can add any page in your site to the Templates Gallery. This allows you to design your own
templates and to use the page again for another site.
 Design a page that you want to keep as a template.
 Click on the Templates tab in the gallery to open the Templates Gallery.
 Click on Page > Templates > Add to Gallery.
 The page is added to the gallery.
The Templates Gallery needs to be open in order to add a page into the
gallery.
Save a page as a template file

The Save Page command in the Page tab and the Web Studio Button menu enables you to save
individual pages from a website for use in other websites and to share with other Web Studio
owners. A page is saved as an .ova file on your disk.
 Open the page that you want to save.
 Click on Page > Templates > Save As>Save Page As Template.
 The Save As dialog opens.
 Navigate to the folder that you want to put the template.
223
 Name the template and then click OK.

 The template is placed in the folder with an .ova file extension.
Save a template from WebStudio.com

Web Studio has a selection of free templates that you can use at WebStudio.com.
 Click on Home > Help > Web Studio.com. The Webstudio.com site opens.
 Click on the Resources Menu and choose the Free Template Gallery.
 Click on the links to view the templates. Each individual template has a link below the image.
 Click the text link below the image to download the template of your choice.
 When the download starts, choose Save and then save it into My Documents.
 When the download is complete, click Close.
 The template is saved in the folder.
Purchase templates from WebStudio.com

 Click on Home > Help > WebStudio.com. The WebStudio.com site opens.
 Click on the Products Menu and choose Templates>View Template thumbnails.
 Click on Buy this Collection to purchase the one that you like.
Changing the Template Color

Sometimes you may see a template design that you like, but it does not match the color scheme
that you chose for your website. Using the Change Colors command in the Create tab, you can
change the color of one or all of the graphics that make up the template.
 Choose a template from the Templates Gallery, then drag and drop it onto the page.
 Click to select one or more of the graphics in the template. Remember to hold down the shift
key when making multiple selections.
 Click on Create > Photos > Change Colors. This opens the Hue Saturation Luminance
dialog.
 The graphic that you selected is displayed in the Preview pane. If you selected more than one
graphic, the first one that you selected is in the Preview pane.
224
 Using the sliders in the dialog, adjust the range to get different colors.
 Look at the Preview pane to see the changes.
 Click Reset Colors to return to the original color. Click Cancel to cancel the change.
 Click OK when you find a color that you want to use. The color change is applied to all of the
graphics that you selected in the template.
When you select multiple graphics to make changes using the Colors
command, the graphics will maintain their differences in relation to each
other. This means that that you can select all of the graphics in a template and
have them retain their variations of value and saturation.
Notes about changing the template color

You can use Home > Edit > Select All to select all of the objects on the page. When you use the
Change Colors command, Web Studio will only color those objects that can be colored. This
makes it easier to change the color scheme on the entire page at once.
When you decide on a color change, you can use the settings to modify other graphics. You can
put these settings in the Notes section of the Object Properties dialog. To do this, right-click
over an object or over a blank spot on the page. Choose Properties from the right-click menu.
Choose the Notes section in the Object Properties dialog. Enter the color information and click
OK. Next time you need the information, you can go back to the dialog and find it saved in
Notes.
225
Chapter 19: Shopping Carts

Shopping carts are a function of hosting companies and usually require that you sign up for a
hosting plan with an e-store. A link on your website takes visitors to your store so that they can
shop and purchase your products. Since this link is just like any
other link, your e-store simply becomes part of your website.
However, Web Studio offers a PayPal shopping cart that allows
you to accept PayPal payments without paying for an e-
commerce site. The PayPal cart is excellent for small catalogs
with simple purchases. For those of you who need a larger, full-
featured e-store, our partner, iHostStudio has affordable plans that
have everything you need for e-commerce. See Creating an e-
store with iHostStudio later in this chapter. If you already have an e-commerce plan with another
hosting company, see Using other Shopping Carts at the end of this chapter.
Creating a WS Shopping Cart Without an E-Commerce Site

Because the PayPal shopping cart is part of the Web Studio program, you can use it with any
hosting plan. The PayPal Shopping Cart command is in the Create tab. The buttons in this
command cause the PayPal dialog to open when they are added to the page. You enter product
information into the dialog. Then, when a customer clicks on one of your buttons, the chosen
product is added to their cart. Then they are taken to the PayPal site to view their cart, continue to
check out or go back to your site so they can continue shopping.
To use this shopping cart, you have to have a Business Account with PayPal. If you are not a
PayPal customer, Web Studio provides you with an opportunity to create a PayPal account when
you set up your Shopping Cart. It is free to open an account, and you are only charged a fee when
you make a sale. Best of all, your customers do not need to have PayPal accounts to purchase
items on your site.
Step for creating a PayPal shopping cart

This is an overview of the steps that you take to create a PayPal shopping cart.
1. Create a page in Web Studio.
2. Add photos of your products and arrange them to suit your overall site design.
3. Add text objects to give pricing and product information.
4. Add a PayPal button.
5. Select the PayPal button and click on the Shopping Cart command.
6. Enter your PayPal information.
7. Click on Page > Preview > Preview Links to view the page.
8. Click the PayPal button to go to your PayPal Shopping Cart page.
226
Creating a PayPal Account

When you add a Shopping Cart button to your page, the PayPal Button Properties dialog
automatically opens. Click on the Sign Up For PayPal button at the bottom of the dialog box and
follow the screens to set up your account. There are three steps: Sign up for a Business Account,
Verify your information and Set up your preferred payment solution.
Sign up for a Business Account

Sign up for a Business Account with PayPal instead of one of
the others. Here are some of the features: The verification process
 You do business under your business, company, or group can take 3-5 business
name. days. Once it is done,
 24-hour fraud surveillance. you can send and receive
 PayPal Customer service availability. payments through
 All Merchant services. PayPal.
 You can accept credit and debit card payments.
 You will get a PayPal ATM/Debit Card.
 It will allow multiple people in your company to access your PayPal account, as you see fit.
227
Verify your information

This step, which takes place on the PayPal website, ensures your information is correct. This
allows you to have funds transferred from PayPal directly to your bank account. PayPal verifies
the following:
 E-mail address: the e-mail address you used to sign up.
 Bank name, account number and routing number.
 Name associated with the account.
 Deposit of funds into your PayPal account to make sure everything is working properly.
Implement your Preferred Payment Solution

This step, which takes place on the PayPal website, enables you to choose what payment
solutions that you want to use. You can do the following things:
 Accept payments using credit cards
 Accept payments using debit cards
 Accept payments using bank transfers
 Your customers will pay you instantly
 Your customers do NOT need their own PayPal account
Creating a PayPal Catalog on Your Website

Design and layout your catalog as you would any other page. After you arrange your page, you are
ready to add the PayPal buttons. These are special buttons that allow you to enter product
information and will enable your visitors to purchase products or make donations.
Web Studio has the following PayPal buttons in the Buttons Gallery: Add to Cart, Buy Now,
Donate, Gift Certificate, and Subscribe.
Select a button
 Drag and drop a button from the Buttons
Gallery or create one of your own. Do not use the buttons that
 Click on Create > Shopping Cart > PayPal PayPal offers because they
Cart. This opens the PayPal Button Properties require technical know-how.
dialog. The Web Studio buttons are
automatically set up for you.
228
Enter Product Information

Fields marked with * are required fields.
Product Name. This is the name of your product as advertized on your site.
SKU. This is an optional product number used by some businesses.
Price. Enter the price of the product.
Request Shipping Address. Check this box if you are shipping your product. PayPal will
request a shipping address from the customer.
ALT Text. This is text that is displayed on your site when anyone puts the mouse on top of the
button. Use this to tell people any information that you want about your product.
Enter PayPal Properties

E-mail Address. This is the e-mail address you
used when you registered with PayPal. It acts as
your account ID. You can include shipping in
the price and skip shipping
URL to Your Site. If you choose to use Success options in PayPal.
and Cancel pages, you will have to enter the URL to
your site. It must be the full URL. For example:
http://www.webstudio.com; not webstudio.com.
229
Success Page. This page on your site that people automatically return to after purchase.
Cancel Page. This is the page on the site that people automatically return to if they click the
Cancel button anytime during purchase.
Currency Code. Select the currency code for the purchase.
Check the PayPal button on your site

 Click on Home > Preview > Preview Links or Page > Preview > Preview Links.
 In the Preview window, click on the PayPal button to see the Shopping Cart page.
Adding Shipping Costs to Your PayPal Cart

The PayPal site has a page that lets you set various options in your Shopping Cart, such as
shipping charges. Simply login to your PayPal account online and set up your shipping
options in Merchant Services. Then when your customers purchase items on your website,
the options and shipping costs are added at checkout.
PayPal knows their system best, so if you have more questions, you should
contact them about shipping and tax options.
 Go to paypal.com
 Login to your account
 Click on the Merchant Services tab at the top of the page. This page has several tools
including shipping and tax calculators.
 Click on Shipping Calculator.
 Choose Domestic or International with the options that you want.
 Add or edit additional choices.
 When your customers buy your products, the choices that you made in PayPal will be
displayed in the checkout screen.
230
Creating an e-store with iHostStudio

Anyone can open an e-store with iHostStudio even if you are using a different hosting company.
The iHostStudio is a full-featured e-store that is affordable and easy to use, yet powerful. When
you sign up to use the shopping cart, you receive a User Name and Password to enter your store.
The step-by-step instructions and video tutorials lead you through the complete set up of your
online store. There are a variety of e-store templates or you can customize your own storefront.
Some of the features are:
 Choose from a variety of e-store templates
 Real-time order notifications to both you and your customers
 Administer your online store from any place, any time
 Accept credit cards through major payment gateways (PayPal, Authorize.net, etc.)
 SSL Security
 Customize e-mails
 Use your own logo
 Choose Shipping Providers and methods…and much more
Visit iHostStudio to learn more about the e-store

 Click on Create > Shopping Cart > iHostStudio Shopping Cart.
 This takes you to the iHostStudio site.
 Use the site links to get information about the iHostStudio e-store and view the demos.
Link to Web Studio

After you create your online store, the next step is to link the store to one or more pages so that
your visitors can shop in your store. iHostStudio supplies you with the link.
 Create a graphic or text that you can use for the link. For instance, you may want to have one
of your buttons called Visit the Store or a graphic that says Start Shopping.
 Right-click over the graphic or text and choose Add/Edit Link from the Selected Object Menu.
This opens the Object Properties dialog.
 In the Links section, enter a Title for this Link and the URL for the link. If you want the
shopping cart to open in a new window, check Open this link’s page or file in a new browser
window.
 Click OK.
 In the Preview window, click on the button or graphic that links to your shopping cart.
All of the iHostStudio Business Plans include a full-featured shopping cart.

231
Using Other Shopping Carts

You can use any shopping cart with Web Studio. Your hosting company will supply you with a
link that you put on your site. This link takes your customers to your shopping cart. Check with
your hosting company to get instructions for creating a shopping cart. The following is a review of
how to add a link. See the Links chapter for all of the ways links can be added.
Add a link to your shopping cart

 Create your shopping cart and obtain a link to the cart from your hosting company.
 Place a button or graphic object on your page that will link to your shopping cart.
 Right-click over the object and choose Add/Edit Link from the menu. This opens the Object
Properties dialog.
 In the Links section, enter a Title for this Link and the URL for the link.
 If you want the shopping cart to open in a new window, check Open this link’s page or file in
a new browser window.
 Click OK.
 In the Preview window, click on the button or graphic that links to your shopping cart.
232
233
Chapter 20: Web Studio Menu Maker

A drop down menu, sometimes called a pull down menu, is one that displays a list of options
when visitors move the cursor over one of the Main Menus. The Main Menu is the one that is
displayed on the web page. The Menu Items are hidden and only
appear to “drop down” when the Main Menu is activated.
Drop down menus are especially useful when you want to organize
a busy layout and help your visitors find what they are looking for
on your website. If you have several pages that easily fall into
categories, then drop down menus can be a great feature for your
visitors. For instance, if you sell outdoor products for the home, a
Main Menu could be Lawn Mowers with drop down Menu Items for
Push Mowers, Electric Mowers, and Gasoline Mowers.
Web Studio Menu Maker is easy to use. You can customize the look, choose horizontal or vertical
alignment, add sub menus, and edit the menus at anytime. Because menus can be made from
buttons or any other graphics, the design options are endless.
Menu Components
Each button or graphic makes a separate and individual menu. The menus can be arranged
horizontally or vertically to create a menu bar. This makes it easy to add or remove menus and
arrange the menus on the page. In our illustration below, there are three Main Menus aligned to
form a menu bar.
234
Main Menu. This is the object that is always displayed on the page. A list of Menu Items
drops down when a mouse if moved over the Main Menu.
Menu Items. These items are hidden until the mouse is moved over the Main Menu. Once
displayed, visitors can click on any Menu Item to take them to a page on your website or
another page on the internet.
Sub Menu. This is another menu within the Menu Items. When the mouse is moved over a
sub menu, then another list of items is displayed.
Sub Menu Items. These items are hidden until the mouse is moved over the sub menu. Once
displayed, visitors can click on any sub menu item to take them to a page on your website or
another page on the internet.
Use these objects to create menus:

Drop down menus use two objects to create the menu: one for the Main Menu and one for the
drop down Menu Items. If you use only one object, then Web Studio will use the same one for
both parts of the menu. You can use any of the following objects to make menus:
Rollover buttons. Menus use the normal and mouse over states to make the Main Menu and
Menu Items. You can change the colors in the Rollover Studio to make color choices.
Normal buttons. Use a normal button to have the Main Menu and Menu Items have the same
look. Click on the Change Colors command in the Create tab to change the button color.
Photo, graphic or shape objects. You can use the Shape commands, photos or graphics to
make menus. Resize the object to the size that you want the menu to be. Click on the Change
Colors command in the Create tab to change the colors in photos or graphics. Use the Colors
commands in the Draw tab to change the color of shapes.
Creating a Menu
Each Main Menu in the menu bar is a separate menu. This provides you with the flexibility to
customize your menus exactly the way that you want them to be. After using the Menus command
to create the menu, there are two other commands that help you to customize your menu choices:
Menu Studio. This dialog is where you name the menu, add the Menu Items (links to pages), add
sub menus, and even add external links to the menu.
Design Menus. In order to edit the look of your menu, Menu Studio: Add or
you can double-click on it or select it and then click on remove Menu Items.
Create > Menus > Design Selected Menu command. This
Design Menus: Make
opens the menu in Preview and displays a new Edit Menu
design choices for the menu.
tab on the ribbon. The commands in this menu give you a
variety of design choices for the Main Menu and Menu
Items. For instance, you can change the color of text when
235
the mouse is moved over a Menu Item, change the menu bar from horizontal to vertical or change
the way the Menu Items appear on the page.
Quick steps to creating drop down menus:

 Choose the graphics.
 Click on the Menus command.
 Fill in the Menu Maker Studio to add Menu Items.
 Click on Design Selected Menu command to view and design the menu.
Prepare the objects for the menu

 Place the button, buttons or graphics on the page. The chart below explains how to work with
the different objects. You can use the objects in any combination to create the menu.
 Make them the size and color that you want.
When you use a rollover button to make a menu, both the Main Menu and the
Menu Items are the same size as the original button.
If you want to make a menu with Menu Items that are narrower than the Main
Menu, use an option that uses two objects. Then you can resize the objects to
the size that you want for the Main Menu and the Menu Items.
You can use any combination of objects to make menus: buttons, graphics
and even text objects.
236
Objects Prepare the Objects

Rollover buttons  Drag and drop a button from the Buttons Gallery. This opens the
Rollover Studio dialog.
 Choose the color for the Normal and Mouse Over states. The Mouse
down state is not included in menus. Make them identical if you want
the Main Menu and the items to be the same.
 Click OK.
 The Main Menu will display the Normal button. The Menu Items will
display the Mouse Over button.
Normal buttons  Hold down the alt key while you drag and drop a button from the
Buttons Gallery. This opens the Button Studio.
 Click OK.
 Repeat to place another button on the page.
 Note: You can also use two different rollover buttons or a combination
of buttons and graphics.
Photo, graphic or shape  Place one or two objects on the page.
objects  Resize them to the size that you want for the Main Menu.
 If you use one graphic, then the Main Menu and Menu Items will
display the same graphic.
Make the menu

 Change the size or color of the objects for the menu.
 Select the object or objects for the menu. If you are using two different objects, then hold
down the shift key, select the Main Menu object first and then the Menu Item object.
 Click on Create > Menus > Menus command>Menu Dialog. This opens the Menu Studio.
Web Studio duplicates the original graphics to make the menu. This leaves
the original graphics on the page. You can delete these.
237
Fill in the Menu Maker Studio

This is where you build the Menu Items. After you enter the Main Menu Title, you can then add
the Menu Items from existing pages or any URL on the internet. This screen shot displays all of
the fields in the dialog. The actual dialog also contains directions for using the fields.
The above options make this menu

238
Create Menu Items

Enter the Menu Title
 Fill in this field with the title that you want displayed on the Main Menu.
Add website pages
 Click on the arrow to display the page names.
 Click on the page name that you want to add.
 Click on Open page in new browser window if you want this option.
 Click on Add This Page. The page is added to Current Menu Items.
Add external pages
 Fill in the Enter Item Name. This is the name that you want displayed on the Menu Item.
 Fill in Enter URL with the URL of the web page.
 Fill in Enter a Tip. This text pops up over the menu item when the mouse is moved over it.
 Click on Add this URL and fill in the link information.
 Click on Open page in new browser window if you want this option.
Create sub menus

Simply add a “|” before a page name to make it a sub menu item. When this page is added to the
Current Menu Items, it becomes a sub menu item for the page above it.
Edit Menu Items

 Click on a Menu Item’s name in the Current Menu Items window. The Menu Item Properties
are filled with the information about that Menu Item.
 Make changes to the Menu Item in the property fields.
 Click Apply Changes to update the information.
Add, remove, or rearrange pages in the menu

 Select a Main Menu on the page.
 Click on Create > Menus > Menu Dialog. This opens the Menu Studio.
 Click on a Menu Item’s name in the Current Menu Items window.
 Click on a button to choose an action for the Menu Item: Delete, Delete All, Move Up, or
Move Down.
 To add a new Menu Item, click on the Add this page list and choose a page. Then click on the
Add this Page button. Rearrange the pages if needed.
239
View and design the menu in the Designing Menu tab

The Designing Menu tab is where you make the design choices for the menu. Since the
Designing Menu tab places the page in the Web Studio browser, the design changes are “live”
and you can see how the menu looks right away. The Designing Menu tab only appears when
you are designing a menu.
When you view menus in Preview or the Designing Menu tab, you must use
the Web Studio browser. Click the arrow on any Preview command and
choose Use Web Studio Browser. Highlighting indicates which browser is
chosen.
 Select a menu.
 Open the Designing Menu tab in one of three ways:
1. If you are in the Menu Maker Studio, click on Only the menu you select
the Save then Design Menu button. can be edited in the Design
2. Double-click a menu. Menu Tab.
3. Select a menu and then click on Create >
Menus > Design Selected Menu.
 Use the ribbon commands to change the orientation and appearance of the menu. The next
two charts show you command options that are available in each group on the ribbon.
Group Orientation and Main Menu Command Options

Orientation  Menu Bar: Horizontal or Vertical Menu Bar
 Sub Menu: Horizontal or Vertical. Displays the sub Menu Items in a
horizontal list or spreads them across the page vertically.
Menu Fonts These commands change the Main Menu.
 Font style, font size, and bold option.
 Font color when the menu is in the normal state and when the mouse is over
the menu.
Menu Text Align These commands affect the Main Menu.
 Left, right, or center align the text on the menu.
Menu Colors These commands change the Main Menu. The Menu Items are changed in the
Item Borders Color group.
 Change the border color of the menu.
Menu Borders These commands change the Main Menu. The Menu Items are changed in the
Item Borders group.
 Border style, such as double, dashed, etc.
 Border width from none to 10 pixels wide.
240
Group Item Command Options

Item Groups The Item groups include commands for fonts, border colors, and borders with
two additional groups: Transitions and Opacity.
Transitions When the mouse is moved over the Main Menu, the Menu Items are displayed.
The Transitions group provides you with more than 20 choices of how you want
the Menu Items to appear on the page. For instance, you may want them to
fade in or look like vertical blinds. Experiment with the transitions to see what
looks good on your page.
Opacity Set the opacity of the Menu Items to allow the objects behind the menu to show
through.
Using the Object Properties Dialog

The Object Properties dialog for menus is similar to the Properties dialog for other objects.
General section
This section gives you the Object ID Number and displays page
position and size information. You can change these fields and/or
lock the size and position on the page.
Notes section
Use this area to keep notes about the menu.
Tips for Using Menus
Use the Master Page

The Master Page can really save you time when you are working with menus. Any changes that
you make to the menu on the Master Page are automatically updated on the other pages.
When you do not have a Master Page

If you are not using a Master Page and you make several design changes, then duplicate the
menu and edit the Menu Items. This way you do not need to re-design each menu.
241
Hidden or disappearing Menu Items

Menus are placed on the page in layers, just like all of the other objects on the page. If some of
the Menu Items seem to disappear behind another object on the page when you view them in
Preview or Designing Menu, it means they must be brought to a higher layer. Select the menu
and then click on Page Layout > Bring to > Front or Forward commands. This brings the
menu to a top layer.
Make the menu to match the background

If you have a graphic background, you can make a menu using the same design as the
background.
 Right-click over a blank spot on the page.

 Choose Copy Background from the Page Background Menu.
 Now right-click again over a blank spot on the page.
 This time, choose Paste from the Page Background Menu. This places a small graphic on the
page that matches the background. Do not choose Paste as Background.
 Crop the graphic or resize it to make the Main Menu and Menu Item.
 Make the menu.
242
Make a Main Menu with narrow Menu Items

You may like the look of menu that has narrow Menu Items. To get this look, make the graphics
for the menu the size that you want them to be and then create the menu.
Add an icon or image to a Main Menu or Menu Item
 Create the graphic for the menu.

 Add an image to the graphic.
 Select both objects.
 Click on Create > >Merge.
 Create the menu.
 Select the menu and then click on Create > Menu Maker>Design Selected Menu.
 In the Menu Maker Design Preview Page, select Alignment Right for the Menu Text and Item
Text.
243
Chapter 21: Forms
Chapter 21: Forms Factory

At some point you may want to get some information from your visitors. This is accomplished
through the use of a web form. The power to interact with visitors and get information from them
can be of great benefit to your site. Typically, visitors want to
accomplish something when they fill out a form. They may want to
take advantage of your services or just provide feedback. Whatever
the reason, it is important that a form is designed in a way that is
visually appealing and easy to use. A form that is difficult to work
with is very likely to turn visitors away, defeating your goal.
Designing for the User

This is the best thing that you can do when building your form. Actually, this is the best thing that
you can do when it comes to any aspect of your website. Always consider the user.
Make the form visually appealing and easy to read
Make sure your form looks neat and uncluttered. You want your users to have an easy to follow
path from the top of the form to the bottom. If you have a large form, you may want to divide it
into sections so it is easier to read. You may want to use a logo or other graphic to give the form a
custom look. You can also add headings to the sections that describe what is in that section.
Use what you need
Make sure that you include fields for all of the information that you need. However, it is also
important to use only the fields that you need. The two are similar, but not the same. If, for
instance, you have a form that visitors use to request information, it is important to capture their
contact information. However, if the form is used for a confidential survey, do not include contact
fields.
Another consideration is the type of fields that you place on the form. Some fields are blank and
allow the visitors to add their own text. Other fields have a drop down list that provides a list of
selections. Be sure to use the type of field that you need and indicate on the form if the field is a
required field.
Use short descriptions when needed
Most fields are common sense and easy to complete. If you need to give the visitor some help,
make it short and to the point. You also may want to give the visitor some added information. For
instance, if you ask for contact information, you may want to include a statement that you will not
share the e-mail, telephone, or other information with anyone else.
244
Be clear about the purpose of the form

Make sure your visitor knows if they are requesting information, giving information, or ordering a
product. You do not want your users to be confused and think they are placing an order instead of
requesting information.
Communicate success
After users submit the form, the first thing they want to know is if the form was actually sent. It is
a good idea to have a success page with a statement such as, “Thank you for your order. We will
e-mail you when we ship your order.” This also helps keep visitors on your website after they
submit the form.
Steps for Using the Forms Factory

The Forms Factory is easy to use in Web Studio!
1. Create custom form fields with the Forms Gallery and the Forms tab commands.
2. Use text boxes to add instructions and information about the form.
3. Add design features with Shape commands and other graphics.
4. Group the form fields and choose form options including an e-mail address where you want to
receive the form.
5. Check the form in Preview and then upload your website.
6. Visitors fill out the form on your website and then click the Submit button.
7. Receive the form information at the e-mail address of your choice.
Form Fields
Form fields are the building blocks that you use to create a form. You choose the fields that you
want to include, arrange them, add any needed information, and then maybe some design
elements. Finally, you group them together to make a form. The Forms tab has all of the fields that
you need to make your forms. In addition, you can add text objects and graphics to complete the
design.
Text Field. This is a one line box that allows users to fill in information, such as a name or
address.
Text Box. This type of text field allows users to fill in more than one line. The text box remains
the same size but uses scroll bars that give users more space to enter text.
Password Box. Use this when you are asking for the user’s password.
Checkbox. A little square checkbox is used to offer a yes/no option for something. More than
one checkbox can be selected in a category. A checkbox category may say, “Check all that apply.”
245
Chapter 21: Forms
Radio Button. This round on/off selection field is like a checkbox except that only one of these
can be selected in a category. When one is selected, the others are automatically turned off. For
instance, you may use radio buttons if you are asking users to select yes or no.
Too many checkboxes or radio buttons can be confusing on a form. Consider

using Menus and Lists when you are giving the users a lot of choices.
Submit Button. This is the button that submits the form to your website and is then sent to your
e-mail address.
Reset Button. When clicked, this button removes all of the information entered by the users
and resets all the fields back to their original state.
Buttons. Buttons are used with custom scripts to perform various functions.
File Upload. This is a Browse field that allows the user to link a file to the form.
Menu. Menus allow users to choose one item from a drop down menu.
List. Lists allow users to choose one or more items from a list box while pressing the ctrl key.
Group Form. This is the command that pulls all of the form elements together and creates the
form.
Hidden Fields. This is a way for you to add information about a form that is not seen, but is
submitted with the form. Hidden fields can be used to describe any information about the form
that is needed to help you identify the form.
Tab Order. This creates a logical order that takes visitors through the form when they hit the tab
key.
Text Objects. Use text objects for instructions and information on the form.
Graphics. Add graphics, such as a logo or background, to create a design.
246
Using Forms from the Forms Gallery

Using the commands in the Forms tab, you can create custom forms for your website. However,
one of the easiest ways to create a form is to use a pre-made form from the Forms Gallery. You
can still add, edit, delete, and rearrange the fields on the form.
Use a form from the Forms Gallery

 Click on the tab to open the Forms Gallery.
 Drag and drop a form onto the page. The form objects are placed on the page in two kinds of
groups: an object group and a forms group
The form is placed on the page in two kinds of groups:

Form Group: Every form must be grouped in order for the form to work
correctly. The forms in the gallery are already in a form group. See Grouping
Forms later in the chapter.
Object Group: The forms in the gallery are also in an object group to make it
easier to bring them from the gallery and position them on the page. Before you
can use any of the form fields, you must first ungroup the objects. See the
Working with Objects chapter for more information about grouping.
 Right-click over any part of the form and choose Ungroup from the menu. You can also select
the form group and then click Create > Group > Ungroup.
 Add, edit, or delete the fields that you want on the form.
 Choose options for the fields.
 Complete the design features as needed.
See the rest of the chapter for detailed instructions for using each type of field.
Notes about using forms from the gallery

1. The first form object in the gallery is not a form; it is a selection of labeled form fields
that you can copy and paste to use in other forms. None of these fields are marked as
required fields, and you will need to customize the field options in the Object Properties
dialog.
2. Some of the menu fields are populated for you, such as State and Country. You can edit
this list to meet your needs.
247
Chapter 21: Forms
3. All of the design features in the forms were made using the Shape commands. This
means that you can resize, add borders, change color, and edit them in the same way you
change any shape.
4. Always check the options in each field to ensure the selected options are what you want
on the form.
Adding a Text Field

The text field is a one line box that allows users to fill in information, such as a name or address.
When you click on the Text Field command, a text field is added to the page and the Object
Properties dialog automatically opens.
Add a text field to the page

 Click on Forms > Text Item > Text Field. This adds a text field to the page and opens the
 Choose options for the text field in the Object Properties dialog. See and explanation of
options below.
 Click OK.
248
Choose options in the Form Object section for the text field
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. This could be used when there are check boxes
that are not relevant unless another checkbox is checked.
Label Properties for Form Control

Label. Fill in the name of the field. Use the space bar to distance the text from the field.
Position. Position the label on the left of the field, the right 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.
249
Chapter 21: Forms
Choose options in the Text Input section for the text field
Text Input Properties

Name. Fill in a name that identifies this specific text field. This is different than the field
Label that displays on the form.
Initial Value. Fill this in if you want default text in the field.
Width in Characters. Use this to set the size of the text field on the page. You can also use
the selection handles to resize the field after it is on the page.
Maximum number of Characters. You can set the maximum number of characters that
visitors can enter. Fill in 0 to allow them an unlimited number of characters.
Data Entry Validation

Data Type. You can have the field information validated when visitors submit the form. If
you want to use this option, choose the kind of validation that you want to perform on the
field. For instance, if you are asking for an e-mail address, then choose E-Mail to make sure
the information in the field is in the correct e-mail format.
Required Field. Check this box if you want this to be a required field.
250
Error Message. This is a message that is

displayed if the validation indicates that the field
Make the sure the error
needs correction. Use the default message or
message for a required field
choose one of your own.
is clear so the user knows
Text Field Colors which field still needs to be
completed.
Text. This is the color of the text when the user
fills in the form.
Background. This is the color of the field where the user enters the text.
Edit the text field options

 Double-click on the text field to open the Object Properties dialog.
 Make changes to the text field options.
 Click OK.
Click on any Preview Page command to see what the field will look like on
the internet.
Adding a Text Box

This type of text field allows users to fill in more than one line. The text box remains the same size
but uses scroll bars that give users more space to enter text. When you click on the Text Box
command, a text box is added to the page and the Object Properties dialog automatically opens.
Add a text box to the page

 Click on Forms > Text Item > Text Box. This adds a text box to the page and opens the Object
Properties dialog.
 Choose options for the text box in the Object Properties dialog. See an explanation of options
below.
 Click OK.
251
Chapter 21: Forms
Choose options in the Form Object section for the text box
Object Info
Position

Position. Choose to position the label on the left of the field, the right of the field or have
no label at all.

252
Choose options in the Text Box section for the text box
Text Box Properties

Name. Fill in a name that identifies this specific text box. This is different than the Label
that displays on the form.
Initial Value. Fill this in if you want default text in the box. For instance, you may say, “Use
up to 4 lines to enter your message.”
Width in characters. Use this to set the width of the text box on the page. You can also
use the selection handles to resize the field after it is on the page.
Number of Lines. Fill in the maximum number of lines that you want in the text box.

field. For instance, if you are asking for an e-mail address, then choose E-Mail to make sure
the information in the field is in the correct e-mail format.
Error Message. This is a message that is displayed if the validation indicates that the field
needs correction. Use the default message or choose one of your own.
253
Chapter 21: Forms
Text Field Colors

Text. This is the color of the text when the user fills in the form.
Edit the text box options

 Click OK.
Adding a Password Box

Use this field when you are asking users for their password.
Add a password box to the page

 Click on Forms > Text Item > Password. A Password box is added to the page and the Object
Properties dialog opens.
 Choose options for the Password in the Object Properties dialog. See an explanation of
options in the next section.
 Click OK.
254
Choose options in the Form Object section for the text box
Object Info
Position

no label at all.

255
Chapter 21: Forms
Choose options in the Text Input section for the password box
Text Input Properties

Name. Fill in a name that identifies this specific password box. This is different than the
Initial Value. Any initial value in this box displays only bullets. Use a text object to give
users instructions to use this field. For instance, you may say, “Use 4-6 letters and numbers.”
Width in characters. Use this to set the width of the text box on the page. You can also
use the selection handles to resize the field after it is on the page.
Maximum number of Characters. Fill in the maximum number of characters that you
want for a password.

field. For instance, if you asked users to choose a password with letters and numbers, then use
alphanumeric as the validation type.
256
Text Field Colors

Edit the text field options

 Click OK.
About Checkboxes and Radio Buttons

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 Click on any Preview Page
as, “Check all that apply.” Commands to see how the form
Radio buttons are little round boxes that are like fields will look on the web.
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.
257
Chapter 21: Forms
Adding Checkboxes
Add a checkbox
 Click on Forms > Check Box > Check Box. This places a checkbox on the page and opens the
 Choose options for the checkbox in the Object Properties dialog. See an explanation of
options below.
 Click OK.
To reopen the Properties dialog, double click on the checkbox.
Choose options in the Form Object section for the checkbox
Object Info
Position
Disable. This disables this form element.
258

Label. Fill in the text that will be displayed on the form next to the checkbox. The label
should match the Value field (see next section).
Position. Choose to position the label on the left of the field, the top of the field or have no
label at all.

Choose options in the Check Box Section
Check Box Properties

Name. Fill in a name that identifies this specific field or category. Each checkbox must have
a different name. In our 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.
Value. This is information that is sent in the e-mail that defines the field. For instance, this
field could be Art if the Name field is Hobby 3. Make sure the Value matches the Label. The
Label is what you see on the form. The Value is what is sent in the email. If the customer
checks “art” you want to see “art” in your email.
259
Chapter 21: Forms
Name and Value information is sent to you in an email. You will not get all
of the information if the checkboxes have the same name.
You will only get the information that the customers check.
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.
Check Box Background Color

Background. Choose a background color for the label of the checkbox.
260
Adding Radio Buttons
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.
To reopen the Properties dialog, double click on the checkbox.
Choose options in the Form Object section for the radio button
Object Info
261
Chapter 21: Forms
Position
Disable. This disables this form element.

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.

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.
262
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
The 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.
263
Chapter 21: Forms
 Enter a name for the group and then click OK.
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.
Adding Buttons
There are three types of buttons you can add to the form: Reset button, Submit button, and other
buttons.
Submit Button. This is the button that submits the form. Every form must have a Submit
button if you want to receive the information. If your form does not have a Submit button, you
will receive an error message when you group the form. You can ignore the error message if
you want to create a form without a Submit button.
Reset Button. When clicked, this button removes all of the information entered by the users
and resets all the fields back to their original state.
Other Buttons. Buttons are used with custom scripts to perform various functions.
Add a button
 Click on Forms > Buttons > Button command. This places a button on the page and opens the
264
 Choose options for the button in the Object Properties dialog. See an explanation of options
below.
 Click OK.
The options in the Object Properties dialog are the same for all buttons. If
you choose to the Custom Script field in the dialog, it will replace what Web
Studio would have had for the buttons.
Choose options in the Form Button section for the button
Object Info
Position
Disable. This disables or grays out this form element. This could be used when there are
check boxes that are not relevant unless another checkbox is checked.
265
Chapter 21: Forms
Font for Button’s Text

Font. Click to choose the font for the button.

Choose options in the Button section for the button
Button Properties
Name. Fill in a name that identifies this specific button.
Text in Button. Keep the default text or enter new text.
Button Colors
Text. Choose the text color.
Button. Choose the button color.
Adding a File Upload

A File Upload field allows visitors to link a file to the form. It places a Browse button and browse
field on the page. Visitors click on the Browse button and choose a file. The file is linked to the
form and is attached to the e-mail that is sent to you. Customers can attach as many upload objects
as they want. For instance, you can ask your customers to attach an MP3 file, a PDF file, and a
text file to the same form.
266
Add a File Upload field

 Click on Forms > File Upload. This places a browse field on the page and opens the Object
Properties dialog.
 Choose options for the field in the Object Properties dialog. See an explanation of options
below.
 Click OK.
Choose options in the Form Object section for the file upload
Object Info
Position

Label. This field comes with a Browse button. However, if you also want to label the field,
enter the text here.
no label at all. The default choice is No Label.

Choose options in the File Upload section for the File Upload
File Upload Properties
Name. Fill in a name that identifies this specific File Upload field. This is different than the
Width in characters. Use this to set the width of the Browse box on the page. You can
also use the selection handles to resize the field after it is on the page.
267
Chapter 21: Forms

Text Field Colors

Adding Menus and Lists

Menus allow users to choose one item from a drop down menu. Lists allow users to choose one or
more items while holding the ctrl key.
These commands have an Enter Select List Data dialog where the choices are listed. You can add,
order, edit, and delete the choices in the list.
The Menu and List commands have two different types of dialogs:
Enter Select List Data dialog. This dialog is where you populate the
choices in the Menu/List and assign a value to the choices. It opens when you
click on the command and also when you double-click over the field on the
page.
Object Properties dialog. This dialog provides you with similar field
options for the Menus/List that you have for the other form fields, such as
Label, Position, Color, etc. Right-click over the field and choose Properties
from the Selected Object Menu.
268
Add a Menu or List

 Click on Forms > Lists and Menus > Menu or List command. This adds a field to the page and
opens the Enter Select List Data dialog.
 Click on the Add button to add a choice to the list.
 Fill in the List & Menu Item Properties
Item Choice and Value

Choice. This text is displayed on the list or menu.
Value. This field provides you with information about the Choice. It comes to you in the
e-mail when a visitor submits the forms. For instance, this field could be Blue if the Choice
is Color.
Initial Selection State. Choose Selected or Not Selected for the item that you are
adding. Remember that only one item on the list can be selected as an initial state.
 Click OK. This closes the Properties dialog and adds the choice to this list.
 Click the Add button and fill in the Properties for each choice.
269
Chapter 21: Forms
Edit Menus and Lists

 Double-click over the field to open the Enter Select List
Data.
 Click to select an item in the list.
 Click Edit, Delete, Up, or Down.
Choose options for the Menu and List fields

 Right-click over the menu or list field and select Properties from the Selected Object Menu.
This opens the Object Properties dialog.
 Choose the options in the Form Object section.
 Click on the Menu/List section to choose additional options.
 Click on the Notes section to add notes about the field.
Form Object Section
Object Info
Tab Order. This displays the tab order assigned to the field. See Assigning the Tab Order in
this chapter.
270
Position
Disable. This disables or grays out this form element. Use this when there are check boxes

Label. This field comes with a Browse button. However, if you also want to label the field,
enter the text here.
Position. Choose to position the label on the left of the field, the right of the field or have no
label at all. The default choice is No Label.

Menu List Section
Select Box Properties

Name. Fill in a name that identifies this specific menu or list.
Add/Edit Items. Click this to open the Enter Select List Data dialog.
271
Chapter 21: Forms
Select Box Style

Style. Indicate if this field is a menu or a list. When you choose List, the List Options are
activated.
List Options. Enter the number of selections that you want visible on the form. Check
Allow Multiple Selections to activate this option.

Required Field. Check this box if you want the menu or list to be a required field.
Menu/List Colors
Adding Hidden Fields

This is a way for you to add information about a form that is not seen, but is submitted with the
form. Hidden fields can be used to describe any information about the form that is needed to help
you identify the form. For example, you can add the type of products the form represents, the
colors or other properties that are necessary for you to know about the form. You can use this to
submit the name of the form.
You must group the form before you can use hidden fields because the field information is stored
in the Form Group object.
Add a hidden field

 Create form fields.
 Select the form fields and click on Forms > Create Form > Group Form.
 Click on the Form Group object to select it.
 Click Forms > Create Form > Hidden Fields. This opens the Hidden Field dialog.
 Click the Add button to open the List and Menu Item Properties dialog.
 Enter the information for the hidden field.
Choice (Name). Fill in a name that identifies this specific field. .
Value. This is information that is sent in the e-mail that defines the field.
 You can create as many Hidden Fields as you want.
272
Assigning the Tab Order

Tab order creates a logical order that takes visitors through the form when they hit the tab key.
Only the fields that you select are included in the tab order. You do not need to include fields that
do not request text, such as radio buttons or checkboxes.
Assign the tab order

 Hold down the shift key and select the fields in the order that you want the tab key to follow.
 Click on Forms > Create Form > Tab Order. The tab order is automatically applied.
Check the tab order

 Double-click on a field. This opens the Object Properties dialog.
 Look at the Tab Order field in the Form Object section to see the assigned tab order.
You cannot change the tab order in this dialog.

273
Chapter 21: Forms
Grouping a Form
The fields become a form when they are grouped together. Grouping creates a form object with
stored information about the form and the fields within the form.
The Group Form command places a gray box with a red border around the fields in the group.
This object must always be in the back of all form fields in order for the form to work.
You can select the box and resize it at any time. Once the fields are grouped, you can continue to
add, delete, and arrange the fields on the form. In addition to the form fields, you can also add text
objects, graphics, shapes, flash, or any other object to the form.
Group the form

 Select the fields for the form.
 Click Forms > Create Form > Group Form. This places the fields in the group box.
If your form does not have a Submit button, you will receive an error message
when you group the form. You can ignore the error message if you want to
create a form without a Submit button.
Choose the group properties

 Double-click over a blank spot on the group box. This opens the Object Properties dialog.
 Choose options for the group. See an explanation of options below.
 Click OK.
274
Object Info
Form Properties
Your E-mail. This is the e-mail where you want to receive the form.
Your Name. This is the name displayed in the submission e-mail.
Subject. This text is displayed on the subject line of the submission e-mail.
From E-mail Address. This is the e-mail displayed in the return address field of the
submitted email.
Form Name. This is a name for the form.
Go to Page. This is the redirect page, sometimes known as the success page. If you do not
choose a specific page, Web Studio will send your customers back to your Home page.
Invalid Data Error Hilite. Choose a color that will highlight any invalid fields when a
form is submitted.
275
Chapter 21: Forms
Form Handler Info

Action. In order for forms to work, they must communicate with a program provided by
your hosting server, sometimes called a CGI Script. Web Studio provides a CGI Script that
eliminates all of the work you’d normally have to do with your hosting company to get forms
to work. The default Action is the “formtoemail.php” script. This script should work with the
majority of hosting companies. If it doesn’t, choose the other CGI Script offered named
“http://www.mail.webstudio.com/php/formtoemail.” If this one doesn’t work, contact your
hosting company for instructions on using their CGI Script.
Method. Post is the normal selection here. The Get selection is an advanced feature and
advanced users will know when to use this.
Encode. Multipart/for-data is the normal selection. Other selections are advanced features
and advanced users will know when to use them.
Custom Code (Advanced)

Edit on Submit, Edit on Reset, and Add Custom Code. These are advanced features
and advanced users will know when to use them.
You can add logos, borders, and any other design features to the form. Use
text objects to include user instructions and information. These objects will
not affect the way the form works, but may give the form more visual appeal.
Checking the Form

Use any of the Preview Page commands to check the form design. Many of the field design
choices are not seen until viewed in Preview or the internet.
You must Trial Host the page in order to see how the form functions. When you Trial Host the
page, you can complete the form yourself and then submit it. When you receive the e-mail, review
the contents to make sure names and values are correct and that you have all of the information
that you need from the form. Since the Tab Order may not work in some browsers, also check this
when you Trial Host.
Important Note! If your form is not working, the problem may be that the
Form Group object (looks like a gray rectangle) is not behind all of the form
fields. To check this, click on the form and move it. Everything on the form
should move together: fields, background, and graphics. If everything does
not move, the hold down the “b” key and click on the gray group object. This
sends the object to the back of all the form objects. You can also use the Page
Layout > Bring To Group > Back command.
276
Trial Host the page to check the form function

 Click Page > Upload > Trial Host Page.
 Complete the fields in the iHostStudio Instant Publisher.
 Click on the View Site Now button when it is activated in the last window. This takes you to
the iHostStudio website.
 Click on the View Your Trial Site link.
 Fill in the form and submit it.
 You will also receive an e-mail from iHostStudio that allows you to view the page for 24
hours.
When you Trial Host one page to check the form, you will not be able to test
the Go To page if it is on different page.
If you do not get all of the information from the checkboxes, make sure each
checkbox has a unique name.
277
Chapter 21: Forms
Tips about Using the Forms Factory

1. Label and field colors
The Object Properties dialog has color choices for the label and the text field. When you choose
a color, you can click on Eyedropper & More and then use the Select color eyedropper to choose
a custom color.
Label colors
The Label Background Color option is in the Form Object section of the Object Properties.
To open the Object Properties, double-click over the field.
Text field colors

The Text Field Colors option is in the Text Input section of the Object Properties. To open the
Object Properties, double-click over the field.
2. Error messages
This is the message that is displayed when a required You can choose the
field or validated field is not filled in correctly. The field highlighted error color of the
is highlighted with an error color and the message is form in the Form Properties
displayed to the right of the field. section of the form’s Object
properties dialog.
3. Checking the form
Use any of the Preview commands to see the form
design in a browser. To fill out the form and submit it, you need to Trial Host the form or host
the form on your hosting.
278
4. Required and validated fields

The tab key takes the users through the form from one field to the next. If they skip a required
field, the error message appears next to the field immediately. This eliminates the frustration of
getting error messages after the users click the Submit button. It is a good idea to use text objects
to tell users which are the required fields.
Validation is done when the form is submitted. If a field does not meet the validation criteria, it
is highlighted with the color that you chose in the Form Properties section of the form’s Object
Properties dialog.
5. Copying Forms
You can copy a form and paste it onto another page or into the Forms Gallery. Right-click over
any field in the form. Choose Copy Form from the menu. The Copy Form command only
works if you right-click over a form field. It will not work if you right-click over a graphic
object, such as your logo.
279
Chapter 21: Forms
281
Chapter 22: Working with HTML

Web Studio is an HTML generator, not an HTML editor. This means
that it does not have any HTML until you request it. You request it to
create HTML by choosing to Preview a page or site, Upload a page or
site, to View Source for a page, to edit HTML in a text object, or to
edit the HTML in an HTML object.
Understanding Web Studio’s Object-Oriented Approach

Web Studio uses an object-oriented approach for adding HTML to pages. You can add specific
HTML to a page or to an individual object instead of just writing a sequence of HTML that is part
of a larger sequence of HTML (which is the case for just about all HTML editors). With Web
Studio, the HTML in the object stays with the object when you move it or copy and paste it to
another page or website.
This method has many advantages. When you copy the HTML object, the entire HTML within the
object is copied. This simplifies things for the advanced website designer.
Here are some examples
Web Studio. If you have HTML that opens a database and retrieves a specific record set, you
can add that HTML to an object on a page. When you use that HTML in a different location, you
simply copy and paste it into the new page or site. The entire HTML is pasted.
Other Products. Joey has the task of taking some HTML from a previously created website and
putting that HTML (or functionality) into the new site he is working on. He goes to the page in the
old site that has the HTML with a text based HTML editor and copies the HTML. He then pastes
it into his new webpage and Previews it. It does not work. Joey spends hours or days trying to
determine why it does not work.
Eventually Joey asks Harry, who wrote the original code, and is informed that there is a bunch of
Javascript and ASP code that has to go with the HTML. The missing code is in the header.
Joey copies the header’s code and pastes it into his page and everything works.
The same scenario with Web Studio would go something like this…
Joey opens the old website in Web Studio. He copies the object that contains Harry’s code and
pastes it into his new site. He Previews the site and everything works! Why? Because Web
Studio’s object-oriented way of dealing with HTML places all of the HTML (and other files) in
one object. The object includes everything necessary for that object to function. You can put
HTML that is required to be in the HEADER into the HEADER, and to put HTML that is required
to be in the BODY into the BODY, or anywhere else it needs to be. You can add any requisite
files to the object as well. This is what object-oriented programming is all about, a self contained
module, fully functional no matter where it came from or where it is going.
282
Modifying Web Studio’s HTML

The majority of Web Studio’s HTML is dedicated to positioning objects on the page, sizing them
correctly, and maintaining their links, and other properties. So, modifying this HTML is not really
necessary since you can “modify” the positioning HTML, for example, by simply moving the
object in question. You can modify the link by
editing it in the Add/Edit Link dialog and so on.
What most people really want when they ask to You can add HTML to any object
“modify the HTML” is to add their own HTML to on a page, to the page itself, to a
add customized features or features that are not text object and to an HTML object.
directly available through Web Studio’s galleries
and tools.
You can add any HTML you like. In addition, you can add any other scripting language that can
be used on the web! Languages such as ASP, Visual Basic, Javascript, PHP, PERL, and many
others can be used with Web Studio. In the following sections you will see how.
You can modify the HTML in the text object by choosing the Edit>Edit HTML Source command
in the right-click menu. You can add just about anything you like.
For the remainder of this chapter, when the word HTML is used, it is
referring to any and all of the scripting languages that are compatible with the
web.
Putting HTML on a Page

Several commands allow you to add HTML to an HTML page in a location necessary to fulfill the
HTML’s function. Here’s a list:
Before any of the page’s tags In the HEAD section of the page
Between the HEAD and BODY tags Inside the BODY tag
In the BODY section of the page Before an Object’s HTML
Inside the Object Tag of an object Inside the DIV tag of an object
After an Object’s HTML Inside the HTML object for complete,
customized page objects
283
Putting HTML in a Certain Place

The source of your HTML will usually tell you where to put the HTML. The typical places are in
the HEAD section of a page and in the BODY section of a page. If you write your own HTML,
you will know where it should go.
If you are adding an object, like a calendar, that is visible on the page and there is no graphic
associated with it, add the HTML to an HTML object. If you are adding an object and it has a
graphic that goes with it, add the graphic to the page and then add the HTML to the graphic.
The Insert Page HTML and Insert Object HTML groups in the HTML tab contain a variety of
commands that automatically put HTML where you want it. The commands match the locations
where you want to put HTML:
Before any of the page’s tags. This location is often used for scripting code that opens and
accesses databases. It is not required to be in any specific location since it never really makes it
into the resulting HTML page. So it is placed prior to any tags to insure it is not confused with
other code that may be required to be in a specific part of the HTML page.
In the HEAD section of the page. This location is typically used for Javascript, cascading
style sheets, and other scripts that are used by objects in the BODY of the page. It is also used to
preload graphics and perform other similar operations.
Between the HEAD and BODY tags. This used like the “Before any of the page’s tags.” .
Inside the BODY tag. This location is used to add various settings that are used by the page as
a whole. For example, background colors or graphics, to add a non-scrolling background, or a
background graphic that does not tile, to customize the look of the page’s scrollbars, etc.
In the BODY section of the page. This is where the objects and text on a page normally
reside. HTML that is added here is added to the page and is usually visible. It can be used to add
HTML Forms, code for counters, shopping cart components, just about anything that is to be
shown on a page is added here.
Before an object’s HTML. This is used to provide some customized behavior or visual
property to the object the HTML is added to.
Inside the object tag of an object. This is used to provide some customized behavior or
visual property to the object the HTML is added to.
Inside a DIV tag. This is used to provide some customized behavior or visual property to the
object the HTML is added to.
After an object’s HTML. This is used to provide some customized behavior or visual property
to the object the HTML is added to.
Inside the HTML object for complete customized page objects. This is where you add
HTML for custom objects. It can be used to add code for shopping cart components or just about
anything that is to be shown on a page is added here.
284
Using the HTML Editor

The HTML Editor contains four menus and an Import command that allow you to import HTML.
This editor opens when you double click on the HTML Object and when you click on any of the
HTML commands.
File Menu
 Open
 Save As
 Save HTML to
object
 Print
 Exit without
saving
Edit Menu
 Undo
 Redo
 Cut
 Copy
 Paste
 Select All
Add Menu
$thisfolderurl$ Web Studio has a special meta tag that when entered into HTML is replaced
by the location of its page on the web. If the page that you are working on is named “Page 1”,
and your html has a reference or link to anything on the page, like a graphic for example, you
must enter the folder name into the HTML in order for the HTML to find the graphic.
Since the location of the file is not known to you when you enter the HTML, enter
$thisfolderurl$ instead of the location.
For example, if you may add HTML to your page that you obtained from another source. The
HTML is used to refer to a graphic on your site. In a situation like this, you must use
$thisfolderurl$:
Src= “horse.gif”
In order for your HTML to actually find the graphic file, it will need to know the folder the
graphic is stored in. Adding $thisfolderurl$ to the HTML will tell Web Studio to add the folder
name that contains the graphic to the HTML. The resulting HTML would look like this:
Src = “$thisfolderurl$horse.gif”
285
How do I know when to use $thisfolderurl$?

Anytime you are adding HTML that you’ve written or that comes from a third party, and that
HTML refers to a graphic, or file that is part of your page, you must use $thisfolderurl$.
Font Menu. Choose a font.
Import command
The Import command makes it possible for you to import an entire file of HTML or other
scripting language from disk.
 Choose File>Open or click the Import button and the Open dialog comes up. Select the file
that you want to import and click Open. The file is opened in the HTML Editor.
 Note that you can import multiple files without deleting the contents of the HTML Editor.
Adding HTML to a Page

The Insert Page HTML commands in the HTML tab allow you to add HTML to a page. You can
also insert HTML from files.
Add HTML to a page using ribbon commands

 Click on HTML > Insert Page HTML>the appropriate command.
 The HTML Editor opens.
 Enter your HTML into the text entry field by typing, pasting, or importing HTML from a file
by clicking the Import button. Click OK when you are finished.
286
Add HTML to a page from a file

 Click on HTML > Add HTML>HTML File. Web Studio can open more than
This opens the Open dialog. 20 different types of HTML,
 Navigate to the file that you want to add, click markup and scripting file types.
on it, and then click the Open button.
 An HTML object containing the contents of
the file is added to the page.
 Click on Home > Preview > Preview Page to view your HTML in a browser.
Adding HTML to an Object

The Insert Object HTML commands in the HTML tab allow you to add HTML to an object.
Add HTML to an object

 Click on the object.
 Click on HTML > Insert Object HTML > the appropriate command.
 The HTML Editor opens.
 Enter your HTML by typing, pasting, or importing HTML from a file by clicking the Import
button.
Adding HTML with the HTML Editor

Adding a large amount of HTML to add is easy using the HTML Editor. This editor has standard,
basic editing features that will speed the task of adding HTML to the object. Once you’ve
completed your editing with the HTML Editor, click the Save button.
The HTML object

The HTML Object is an object similar to the others you use with Web Studio except that it is
completely programmable. The HTML Object command is found in the Add HTML group in the
287
HTML tab. Unless you put something in the object, HTML for example, it will do absolutely
nothing on your website.
The HTML Object command allows you to add HTML or other scripting languages to it. It also
lets you add HTML to the HEAD of the page, the BODY of the
page, and all of the other places HTML can be added.
The HTML Object command allows you to attach files to it as
well. These files are usually files that the HTML in the object
needs to operate, graphics files for example. They can be any
file type; however, there are pretty strict file name rules for
attached files. The attached files feature can also be used to
upload other files that have nothing to do with the function of
the HTML object as well.
Editing HTML
You can edit HTML through the HTML Editor.
Edit HTML using the HTML Editor

 Double-click on the HTML Object to open the Editor.
 Edit the HTML.
288
Edit HTML using the Properties dialog

 Right-click over the HTML Object.
 Choose Properties from the Selected Object Menu. This opens the Object Properties dialog.
 Click on the HTML Content section.
If you just need to make a few changes to the HTML in the HTML Object, you can do it in the
HTML Content section of the Object Properties dialog.
 There is a series of radio buttons in the Add your own HTML section. Click on the appropriate
button for the section that you need to add your HTML.
 Using the text entry field at the bottom of the dialog, enter your HTML by typing, Copying
and Pasting, or Importing from a file using the Import button.
 If you then have to add HTML to another section of the object, click the appropriate radio
button and follow the procedure described above.
If you want to use the HTML Editor to edit the HTML, click on the Show
Editor button. This will open the Editor.
289
Build pages without HTML tags

There are cases where you have added HTML or other scripting language code to a page that is
completely self-contained. It has its own HEAD and BODY tags and everything else. There are
also times when the self contained code is ASP code that accesses databases or validates data
from another page and should have no HTML in it. In cases such as this, you can choose to
build the pages with no HTML Tags.
To build a page without HTML tags
 Right-click on the HTML Object and choose Properties from the Selected Object Menu.
 Click on the HTML Content section.
 Click the Build this HTML Object without any additional Tags Radio button.
 Click OK.
Setting page file types

When you have a page that contains code other than HTML it is sometimes necessary to set its
file type correctly so the web server will interpret and execute the code correctly. Web Studio
enables you to set the file type of any page’s file.
Set a page’s file type
 Right-click on the page’s background and choose Page Properties from the Page Background
Menu.
 Click on the File Type section.
 Select a file type from the Choose a File Type drop down menu.
 Click OK.
Using the Site-Wide and Page Meta Tags Groups

The HTML tab has two groups that enable you to easily add information to the entire site or to a
page: Site-Wide Meta Tags and Page Meta Tags.
Site-Wide Meta Tags. These commands put the Author, Description and/or Keywords on all of
the pages whether or not you are using a Master Page. After you enter information into these
dialogs, you can view the page’s HTML to see that the information was automatically inserted.
Page Meta Tags. These commands put the Page Title, Description, Keywords and/or User
Meta Tags on a page. When you are using Site-Wide Meta Tags or a Master Page, the Page Meta
Tag commands will override the information on only that the page without changing the
information on the other pages.
Page Meta Tag information always replaces Site-Wide Meta Tag information
on the page without changing the site-wide information on the other pages.
290
Insert Site-Wide Meta Tags

 Click the HTML tab.
 Go to the Site-Wide Meta Tags group.
 Click the appropriate command.
 A dialog appears enabling you to enter the desired information. Each dialog contains
directions for entering information.
Insert Page Meta Tags

 Click the HTML tab.
 Go to the Page Meta Tags group.
 Click the appropriate command.
 A dialog appears enabling you to enter the desired information.
291
Working with HTML in Text Objects

Web Studio’s text object uses HTML as its basic data type. This enables you to edit the HTML to
add advanced features and provides full control over the contents of text objects. You can create a
text object from an HTML file.
Inserting and editing your own HTML into a text object

 Right-click on the text object.
 Choose Edit HTML Source from the right-click menu.
 The HTML Editor comes up ready for editing. Note that you can resize the editor to make it a
more convenient size.
Add tables to a page

Since the text object uses HTML as its native data type, just about any HTML can be added to
it.
 Create a table in Microsoft Word or another program. Select the table and Copy it.
 Paste the table to a Web Studio page.
 The table is added to the page as a text object.
292
293
Chapter 23: Uploading Your Website to the Internet

After you complete your website, you must upload (save) your site to
the internet. Before you upload, Web Studio provides you with
options to view your website so that it looks and acts exactly the way
that you want it to be on the internet. When you are ready to publish
your website, you can use our integrated hosting with iHostStudio or
host with another company.
Before you upload

Before you save your site to the internet, make sure you have Previewed it and checked the
functionality of slide shows, links, etc. The
Preview commands use a browser so that you are
able to see your site exactly as it is viewed after it You do not need an iHostStudio
is uploaded to the internet. account to use Trial Hosting.
Trial Hosting does not affect your
After you have your site exactly the way that you website if it is already on the web.
want it, we recommend that you Trial Host. Trial
Hosting allows you to see the website on the
internet and show it to friends and clients before you publish on the web. This is a free service
offered by our partner hosting company, iHostStudio.
Trial Hosting
Trial Hosting is a way of temporarily placing your website on the internet for 24 hours. It allows
others to view your site on the internet before you upload it to your hosting company. When you
choose to Trial Host your site, iHostStudio sends you an e-mail with a link that takes you to your
trial site. You can forward this e-mail to friends or clients so they can see the website on the
internet. There is no limit to the number of times that you can use Trial Hosting.
To Trial Host your website

The Trial Host commands are located in the Upload groups of the Home tab and Page tab as
well as the Publish section of the Web Studio Button.
 Click on Home > Upload > Trial Host or one of the other Trial Host commands.
 The iHostStudio Instant Publisher appears.
294
 Follow the instructions in the publisher.

 In the last window, your trail site is displayed. iHostStudio also sends you an e-mail with a
link to the site. You can forward the e-mail to friends and clients for review.
 Wait to see the View Site Now button become active. Click View Site Now to immediately see
your site on the internet.
 Click Finish to close the publisher. Finish does not take you to your website.
295
Integrated Hosting with iHostStudio

Although you can use any hosting company for your website,
iHostStudio is the preferred site hosting service because it is
designed to work hand in hand with Web Studio. The Using iHostStudio as your
iHostStudio Upload Publisher is used with our very own hosting service is the
iHostStudio website hosting. This hosting is the easiest to use easiest way to save your
anywhere. You only need to know your name and website site to the internet.
address to use it. It is also twice as fast as other methods of
getting your site to the internet and will enable you to upload
just the changes you make to your site. iHostStudio has hosting plans that meet all of your hosting
needs. Visit ihoststudio.com for a full description of features.
Basic Plan. This plan is designed for small business, organizations, clubs, schools, and anyone
who does not need e-commerce on their site. The plan includes a large amount of storage space,
multiple e-mail accounts, domain support, counters, e-mail web forms, and much more.
Business Plans. There are three different types of Business Plans to meet all of your e-
commerce needs. All of the plans include an e-store with a full featured shopping cart.
Open a new iHostStudio hosting account

You can easily open a new iHostStudio account from within Web Studio or you can visit
ihoststudio.com.
 Open the iHostStudio Account Manager in one of two ways
1. Page > Upload > Choose Hosting>iHostStudio Account Manager
2. Web Studio Button Menu>Publish>Open an iHostStudio Hosting Account
 Click the Open button to open a new hosting account
 Follow the directions in the publisher to choose the type of hosting that you want, search for
and acquire a domain name, transfer your existing domain name, etc.
 When you are done, your web hosting account is ready for use.
 Your account is now tied to the website Project that was open when you created your account.
Each time you save your website to the internet, your hosting information is remembered.
The iHostStudio account is tied to the website Project that you create. You
must create an account for each website that you upload to the internet.
If you use Web Studio’s PayPal shopping cart, you can use the Basic Plan;
you do not need a Business Plan. See the Shopping Carts chapter to help you
decide which plan to choose.
You can use the iHostStudio shopping cart even if you have another hosting
company. See the Shopping Carts chapter.
296
Make changes to your iHostStudio account

You can make changes to information such as address, hosting options, contact, or payments
from within Web Studio. These changes are made through the iHostStudio Account Manager.
 Go to Page > Upload > Choose Hosting>iHostStudio Account Manager.
 Click the Modify button.
 Make any necessary changes.
 Click OK.
Close your iHostStudio account

You will need to close your account if you change hosting services or if you remove your
website from the internet. Use the iHostStudio Account Manager to close your account.
 Go to Page > Upload > Choose Hosting>iHostStudio Account Manager.
 Click the Close button.
 Follow the directions and please tell us why you are closing your account.
 Click OK.
Information You Need for Uploading

If have an iHostStudio account, you only need your website name and password. The iHostStudio
Instant Publisher does the rest.
If you are using another hosting company, you will need some additional information. Just like
you need a postal address to receive mail from the Post Office, you need some basic web address
information so viewers can find you on the web. When you sign up for your web space with your
hosting company or ISP, you receive space on one of their computers. This space has an address
just like your street address at home. Your hosting company gives you the following web address
information:
User name. This is your login so you can gain access to the company’s computer.
Password. This provides you with some security by making it difficult for anyone else to
access your web space.
Remote Site Folder. This is the exact location of where your website files reside on the
hosting company’s computer. This is similar to your street address. Not all companies require
this or give you this information.
FTP Address. This is the unique web address for the company that is providing the web
space for you. This is similar to the city you live in.
297
Using the Uploading Publishers

Web Studio has two different dialog publishers to upload your website to the internet. One is
designed specifically for iHostStudio hosting and the other is designed to work for all other
hosting companies. Since the uploading publisher depends on the hosting you are using, the first
thing you must do is indicate your hosting company. Web Studio will remember your hosting
choice for your website.
You can change the hosting choice for each website you are creating. Web
Studio will remember the choice for each site.
Indicate your hosting company

Before you can upload the site to the internet, you must tell Web Studio if you are using
iHostStudio as your hosting company or if you are using another hosting company. There are
two places that you can do this: The Choose Hosting command in the Page tab or the
Publishing section in the Web Studio Button.
To indicate hosting
 Click on Page > Upload > Choose Hosting or Web Studio
Button>Publish section.
 Click Use iHostStudio or Use Another Host.
 A checkmark indicates the hosting company.
Uploading with iHostStudio

Before you use this publisher, make sure you open an iHostStudio account and indicate Use
iHostStudio as your hosting company. If iHostStudio is not your host, see Uploading with other
Hosting Companies in this chapter.
To indicate hosting
 Click on Page > Upload > Choose Hosting or Web Studio
Button>Publish section.
 Click Use iHostStudio or Use Another Host.
 A checkmark indicates the hosting company.
298
Upload your website to iHostStudio:

 Click on Page or Home > Upload > Website. The Site Info dialog displays.
 Click Upload to open the iHostStudio Instant Publisher.
 All of your websites are listed in the Website drop down menu. Choose the appropriate
website from the list.
299
 Key in the Password for the website. The publisher automatically remembers the Password
for each site.
 Click Next to advance to the next window.
 Choose to Upload your entire website or Upload only changes to your website. Always
upload your entire website the first time. Afterwards, you may choose to upload only the
changes.
 Click Next to advance to the uploading window. This will take some time while your website
is uploaded to the internet.
 When the site is completely uploaded, the last window in the publisher provides you with an
opportunity to connect to the internet and see your website by clicking the View Site Now
button. Make sure that you wait for the View Site Now button to be activated before you
close the publisher.
300
 Click Finish when you are done.

 Your website is now on the internet.
Before you upload your website to the internet, you should check it using the
Preview Website command. However, if you find errors on your website,
simply upload again. This takes only a couple of minutes.
Uploading with Hosting Companies other than iHostStudio

Before you use this publisher, make sure that you open a hosting account and indicate Use
Another Host as your hosting company. If iHostStudio is your hosting company, then see the
Uploading with iHostStudio in the previous section.
Special note to customers who upgraded from Web Studio 4.0.

Web Studio 5.0 has a new uploading publisher and we recommend that you use it. If you
still want to use the familiar Web Studio 4.0 publisher, you will find the directions at the
end of the chapter in the Uploading to a Host other than iHostStudio using WS 4.0
Publisher
Using the new Web Studio 5.0 publisher will not affect links to your Home page that
customers placed in their Favorites. Links to other pages in your website may be lost and
customers may need to update their Favorites.
301
WS 5.0 Uploading to a Host other than iHostStudio

With the WS 5.0 Uploading publisher, you can upload all of the pages of your website or just
some of the pages. In addition, you can choose to upload all of the files on the selected pages or
just the changes that you made since the last upload.
Before you open the publisher, you must choose WS 5.0 Uploading as your uploading option.
Once you choose it, Web Studio remembers the setting.
Select WS 5.0 Uploading
 Click on Caption Bar>Website Properties. This opens the Web Site Properties dialog.
 Click on the Uploading section.
 Click on WS 5.0 Uploading.
 Click OK. Web Studio will remember the setting.
302
Upload to the internet with the WS 5.0 Uploading Publisher

 Click on Page or Home > Upload > Website. The Save Web Site to Internet publisher opens.
 The left side of the publisher lists all of the pages in your website. From here, you can choose
to upload some or all of the pages and you can choose to upload only the changes you made
from the last time you uploaded.
 Select the pages you want to upload. You can upload all of the pages or just the ones that you
select. To select multiple pages, hold down the ctrl key while you click on the pages that you
want to upload.
Upload Selected Pages. Click this button to upload all of the pages that you selected in
the list.
Upload All Pages. Click on the Upload All Pages button.
Upload Only Changed Files. Check this box if you only want to update the changes that
you made to the selected pages.
303
 Click on the Upload all Pages button or the Upload Selected Pages button. This opens the
Connect dialog to connect to your host.
 This dialog contains the Profile information that enables you to connect to and upload to a
hosting company. It includes the following information:
Profile Name. A Profile Name is the name associated with the information that connects
you to your hosting company. You can have more than one Destination Profile so you can
upload to many different hosts. You can have one Profile for this site, another Profile for
another site.
New. Click the New button to create a new profile. Fill in the information that is provided by
your hosting company.
FTP Address. This is the FTP address your hosting company gave you. Do not include the
“ftp://” portion of the address.
User Login Name. This is the user name that you set up with your hosting company.
Password. This is the password that you set up with your hosting company.
Root Directory. This is the name of the folder that your hosting company told you to
upload into. You can enter that folder in this profile or double-click on it once you are
connected.
Website Address. This is your website’s URL including the http//.
Use Passive FTP/Use Active FTP. Your hosting company will tell you which to use. If
you have problems uploading, then switch the setting and try to upload again.
304
 If the information is correct, click OK to upload. Your directory on the hosting server
containing your website’s files is now displayed on the right side of the publisher.
 If you did not enter a root directory in the Connect to Hosting Destination dialog, find the
folder that matches the folder name your host told you to use for uploading. Double-click on
that folder. If there is no root directory, ignore this step.
If you are not sure if you have a root directory, find the file labeled
index.html, index.htm, default.html, or default.htm and upload it into that
folder.
 Click on the Upload all Pages button or the Upload Selected Pages button.
 When your files are all uploaded, a dialog will come up to tell you it is done.
 You can continue working with the files if you want to manage your site’s files and
directories.
Manage folders and files with WS 5.0 Uploading

You can click on the Connect button to do maintenance on your hosting account, such as
deleting obsolete files, adding new folders etc. When you are done with maintenance, you can
also click on Disconnect to stop working on your files.
 Click the Connect button.
 Click OK.
 Use the options on the right side of the publisher to manage your files.
View folders and files. Double-click on a folder to open it and see the files in the folder.
To go back, press the UP button to move up out of the folder. To quickly go back to the
original folder, click Home.
Rename a file. Select the file and then click the Rename button. Fill in the new name.
Delete a file. Select the file and click the Delete button.
Refresh the list. Click on the Refresh button to make sure you are seeing the files as they
currently exist. Some hosting servers do not automatically refresh once you modify the
contents of the hosting folder.
Create a new folder. Click the New Folder button and give it a name in the dialog.
305
Uploading for Hosts other than iHostStudio: WS 4.0 Uploading

This is for customers who upgraded from Web Studio 4.0 only.
We recommend that you use the WS 5.0 Uploading publisher described in the previous section.
However, if you want to use the familiar uploading publisher from Web Studio 4.0, follow the
instructions in this section. Before you open the publisher, you must choose WS 4.0 Uploading as
your uploading option. Once you choose it, Web Studio will remember the setting.
Select WS 4.0 Uploading

 Click on Caption Bar>Website Properties. This opens the Web Site Properties dialog.
 Click on the Uploading section. Click on WS 4.0 Uploading. Click OK.
Upload to the internet with the WS 4.0 Uploading Publisher

 Click on Page > Upload > Website. The Site Info dialog opens.
 Click Upload to open the Web Studio Publisher.
 Click New. This opens Create/Edit a Destination.
Click New the first time you upload. When you upload again, click on the
website in the list and then click Upload or Edit if you want to make changes.
 Review the Create/Edit Destination information. You can find your User ID, Password,
Remote Site Folder and FTP Address information in the confirmation e-mail you received
when you signed up with your hosting company.
 Click Next. This opens the Name Your Destination dialog.
 Choose a name for your destination. The name will identify the settings to you as your web
space provider. This name will appear in the Available Destinations box on the Upload page.
 Choose the Destination. This is the name of your web space provider. If you do not see the
company that provides you with web space, choose Other.
 Do not click Next until you read the following note:
Important Destination Note
What happens next depends on what you enter as your Destination. Some destinations require more
information than others. The remaining pages in the publisher are:
Identification FTP Address Remote Site Folder Home Page
If you choose a provider in the Destination list, Web Studio takes you to only the pages needed for
that provider. Some Destinations do not require any additional information, in which case you are
done! If you choose Other, Web Studio takes you to each of these pages.
As you go through the remaining pages in the Publisher, look at the title of the page. Then refer to the
instructions in the following sections.
306
 Now click Next.

 Look at the title of the window and fill in the information.
Identification
 Enter your web space account’s User Name and Password. Check the Save Password box to
have Web Studio remember the password.
 Click the Next or Finish button.
FTP address
 Enter the FTP address provided by your web space provider. If you do not know this, please
contact your provider and ask them for your FTP Address. The FTP address will look
something like this:
“ftp.mysite.com” or “mysite.com” or “123.23.44.12”
Remote site folder

 Enter the Remote Site Folder required to upload your website using FTP. Some hosts do not
require a Remote Site Folder, some do.
Home page
 Enter the complete URL or address for your Home page. This may be used later to Preview
your uploaded site.
 Once you upload your site you can Preview it instantly if you have provided this information.
 Click the Next or Finish button
. Important Tips
The FTP Address, Remote Site Folder, and Home Page are the places that some people have
problems. Remember that these are like your home address. They specify the exact location
or folder that your website is placed on the host computer. You must know this address and
you must enter it exactly! Make sure you follow these rules.
 Type the FTP Address and/or Remote Site Folder in case sensitive manner. (e.g. My Site
is different from my site)
 Make sure your slashes are in the right places, that there are enough of them and they
are going the right direction.
307
Get help using the WS 4.0 Uploading Publisher

Click the Help button at the bottom of each page in the Publisher. For specific help about the
information that you will need to enter into a field, contact your website hosting provider. They
have the information that you need. Back to the Beach is not able to help you because we do not
have this information.
Saving Your Website to the Hard Drive

When you save your Project, all of the files that
make up your website are saved in one .ows file.
However, sometimes you may want to save all of the Important!
files of your site separately so that you can run your When you Save Website Files to
site from your computer for presentations, put it on a Disk it is not the same thing as
CD, etc. The Save Website Files to Disk command saving your Project files. Do not use
in the Web Studio Button allows you to do this. this Command to save your Project.
Use the Save or Save Project
 Click on Web Studio Button > Publish > Save Commands to save your Project.
Website Files to Disk. This opens the Browse
for Folder dialog.
 Choose the folder to use.
 Click OK. The files are placed in that folder.
308
309
Chapter 24: Desktop Studio

Because it is so easy to design and layout pages in Web Studio, you can use the program for other
projects such as desktop publishing, HTML e-mails, and Power Point
presentations. You can create flyers, newsletters, note cards, business
cards or just about anything that a desktop publishing program can do.
Even if you create graphics in another program, it is easy to insert
graphics into Web Studio. See the Working with Objects chapter. Now
you can easily place your logo and website design on printed materials
to create a line of products that all carry your business identity. If you
are doing websites for customers, you can offer coordinating business
cards, letter head, and other items to expand your service.
You can use Web Studio for other projects.

Newsletters HTML e-mails
Letterhead and Envelopes Logo design
Flyers Marketing Materials
Business Cards Postcards
Cards Calendars
Visit http://webstudiotv.com or http://wiki.webstudio.com for more Tips!
Creating HTML e-mails

An HTML e-mail is nothing more than a web page that is sent via e-mail. You can use Web
Studio to design a page for the e-mail and then save that page as an HTML e-mail. It does not
need to be uploaded to the internet because it is independent of your website. If you are using a
Master Page, turn off the Master Page first and then you can make your HTML e-mail. After, you
can turn it on again.
Anything you create with Web Studio can be included in the HTML e-mail such as text, links,
graphics, movies, music, Flash, and rollover buttons. HTML e-mails are great to use for
advertisements, announcements, and newsletters.
Restrictions with HTML e-mails

The only restriction is that an HTML e-mail has to be one page. However, you may also want to
consider some practical restrictions like the width of the page and the size of the files.
310
Page Size. Page width is important because most e-mails are viewed at the default width of
the e-mail program of the person who receives it. Open an e-mail in your e-mail program and
see how wide it is.
File Size. The reason the size of the files matters, is that the person who receives the e-mail
will have to wait for all of the files to download from your website. Treat your e-mails the same
as you would your website pages. It is best to keep them below 100k. To check the download
time of your page, right-click over the page and then choose Page Properties from the Page
Background Menu. In the Object Properties dialog, click on the Size & Download section.
Attention iHostStudio customers

To upload an HTML e-mail page, you must use the WS 5.0 Uploading wizard:
 Click on Website Properties at the far right of the Caption Bar.
 Click on the Uploading Section in the Web Site Properties dialog.
 Click on the radio button to choose Web Studio 5.0 Uploading (preferred).
 Click OK.
 Now go to the Page > Upload group. Click on Choose Hosting>Use Another
Host.
Save a page as an HTML e-mail
Web Studio automates every step except adding the HTML to your e-mail.
 Create a page in Web Studio.

 Click on Page > Templates > Save As>Save
Page As HTML E-mail.
 This opens the HTML E-mail Help window
that reviews the steps for creating the HTML
e-mail.
311
 Click OK when you are finished and the Enter Your Website’s Home Page Address dialog
automatically opens.
 Enter the complete URL to your Home page.

 Click OK when you are done. This opens the Save As dialog.
 Name your HTML file and click Save. This is the file you actually use in your e-mail.
312
Upload the page to your website

 When you save the page, the Save Web Site to Internet dialog automatically opens.
 Click Upload All Pages. This opens the Connect to Hosting Destination dialog.
 Complete the Destination Profile and then click OK. For more information about this dialog,
see the Uploading to the Internet chapter.
Attention iHostStudio customers

Use the following information for your Destination Profile:
User Name and Password: the same as you use for iHostStudio
FTP Address: your website address
Remote site folder: HTTPDOCS
313
Create the HTML e-mail

 From My Documents, open the HTML file in Notepad.
 Click the Select All command and then copy and paste the HTML into your e-mail or you can
follow your e-mail program’s instructions for creating an HTML e-mail.
 Send the e-mail.
See our online Wiki to see specific instructions for different e-mail accounts
such as Outlook or Gmail.
Creating Desktop Publishing Materials

It is a good idea to create a Project that can be used to design flyers, newsletters, and other
documents. After you make the document, you can print it from the desktop or prepare it for a
printing service.
Set the page size

 Click on Page Layout>Site Setup>Page Size.
Choose a pre-set page size

 Click on a page size from the list. The page size is applied and the page guides define the
design area for the page size.
Choose a custom page size

 Click on Custom Height and Width. This opens the Custom Page Width and Height dialog.
 Fill in the Page Width and the Page Height. The width and height are measured in pixels.
 Click OK.
314
Print from the workspace

 Set the page size and design the page. When you want to print a page or
 Click on Web Studio Button>Print. This opens the Print graphic, turn off the Resample
Preview window. Graphics when resizing option in
the Web Studio Preferences
 Use the tools in the window to set up the page, turn off
dialog. Go to Web Studio Button
the headers/footers and view the page before you print.
> Options > Web Studio
 Click the Print icon. Preferences. Uncheck the box in
the Global Preferences section.
Save the page as a graphic

If you are using a printing service to create documents, you may want to save the page as a
graphic. This graphic can be uploaded, e-mail or delivered to the printing service. Web Studio
saves the graphic as a .bmp file.
 Set the page size and design the page.
 Click on Web Studio Button>Save Page As>Save Page As a Graphic. You can also right-
click over a page name in the Page List and choose Save Page As a Graphic from the menu.
This opens the Save As window.
 Choose a folder and File name for the graphic.
 Click Save. The page is now saved as a graphic.
315
Create business cards

You can easily create business cards that match your website, especially if you use an online
printing company.
 Create the design for your business card without the text. You can add the text online later
when you create the business card. Make the design with a large bleed area to make it easier
to position when you upload it to the online printing service.
 Merge the objects of your design.
 Right-click over the merged objects and choose Save Selected Object As from the Selected
Object Menu. This opens the Save As dialog.
 Fill in the name, choose the file type and then click Save.
 Go to the online printer and choose a blank business card.
 Follow the instructions on the website to upload the business card graphic.
 Position the graphic and then add text.
How to use your website background for your business card:

 Right-click over the background and choose Copy Background from the
Page Background Menu.
 Right-click again over the background and choose Paste. Do not choose
Paste as Background.
 This gives you a little graphic of the background. Duplicate it, arrange it
and merge it with your other design objects.
Creating a Slide Show Presentation

You can use Web Studio to give a presentation instead of using Power Point. There are two ways
to do this:
Create a slide show to give a presentation

 Create each slide on a separate page.
 Click on Page > Templates > Save As>Save Page as a Graphic. This opens the Save As
dialog.
 Name the page and click Save or OK. Do this for each page.
 Click on Insert > Illustrations > Picture. This opens the Open dialog.
 Choose all of the pages and click Open.
 Select the pages and create a slide show. See the Slide Shows chapter for the available slide
shows.
 To give the presentation, open Web Studio, click any Preview Page command and play the
slide show.
316
Website Preview
 Create each slide on a separate page.
 Create buttons on each page for Next and Back.
 To give the presentation, open Web Studio, click on any Preview Website command and use
the buttons to go forward and backward through the presentation.
317
Appendix A
Appendix A: System Requirements
Minimum System Requirements

Windows XP, 2003, Vista, Windows 7
CD-ROM or DVD Drive
500 MB hard disk space for program installation
Windows-compatible sound card
Pentium 4 microprocessor or better
768 MB Ram, 1GB with Vista
32-bit color display
Microsoft Internet Explorer 5.5 or later
Recommended System Requirements

Windows XP, 2003, Vista, Windows 7
CD-ROM or DVD Drive
500 MB hard disk space for program installation
Windows-compatible sound card
Intel Core Duo microprocessor or better
2GB Ram
32-bit color display
Microsoft Internet Explorer 6.0 or later
Mac Users
Intel Macs: Use either parallels or Boot Camp
Non-Intel Macs: Use Virtual PC
318
Appendix B: Supported Files
HTML Type Generated Files Downloaded from Websites

HTML 4.01 Transitional Any file; no limits
HTML 4.0 Frameset
HTML and Scripting Files Imported and Exported

Text (.txt) Hypertext (.htm)
Hypertext (.html) Hypertext (.shtml)
Hypertext (.xhtml) Hypertext Template (.htt)
Javascript (.js) Javascript (.scpt)
Cascading Style Sheet (.css) Server side include (.ssi)
Internet Database HTML Ext (.htx) Active Server Page (.asp) (.aspx)
Active Server Application (.asa) PHP Server Page (.php)
PHP Server Page (.php3) Common Gateway Script (.cgi)
Perl Script (.perl) Perl Script (.pl)
Perl Module (.pm) Extended Markup Language (.xml)
Document Type Definition (.dtd) Wireless Hypertext (.wml)
SMIL (.smil)
Video Files Imported Sound & Music Files Imported

Flash (.swf), (.flv) (Best for all Videos) MP4 File (.mp4) (Best for sound &music)
Windows Media Video(.wmv) MIDI (.mid), (.midi)
Audio Video Interleave (.avi) Windows Media Player (.wma)
MPEG video (.mpe), (.mpg) Real Player (.ram), (.rm), (.ra) Wave (.wav)
Real Media (.rm), (.ram) AIFF (.aif), (.aiff), (.aifc)
MS NetShow Player (.asf), (.asx) Sun Audio (.au)
Quicktime Movie (.moov). (.mov). (.movie). (.qt) MPEG-1 (.m1a)
MP2 (.mp2)
Windows Media Playlist (.w3u)
319
Appendix B: Supported Files
Graphics Files Imported Text Files Imported

Graphic Interchange Format (.gif) Text (.txt)
JPEG (.jpg) Rich Text Format (.rtf)
Windows Bitmaps (.bmp;.dib) Microsoft Word (.doc and .docx)
Photoshop (.psd) HTML (.html) (.htm)
PCX (.pcx;.dcx) HTML Document (.htx, .otm)
Kodak Photo CD (.pcd;.fpx) Text With Layout (.ans)
Portable Network Graphics (.png) MS-DOS Text with Layout (.asc)
Encapsulated Postscript or EPS (.eps) Files from the MS Office Converter Pack:
Lead Tools (.cmp) Power Point
Tagged Image File Format or TIFF (.tif) Excel
Icons & Cursors (.ico;.cur) Works
DICOM (.dic) Word (includes Word for Mac)
Windows Metafile (.wmf) Lotus Ami Pro
Truevision TARGA (.tga) Word Perfect
SUN Raster (.ras) Word Star
WordPerfect (.wpg)
Macintosh PICT (.pct)
320
Appendix C: Ribbon Commands
Web Studio Button

New Project Save Page As
Save Page as a Template
Open Save Page as a HTML Email
Open Project Save Page as a Graphic
Open Template
Print
Close Project
Publish
Save Project Upload website files to your hosting
Save Project Trial Host your website with iHostStudio
Save Project and a Backup Save Website files to disk
Open an iHost Hosting Account
Save Project As Use iHostStudio
Web Studio Project Use Another Host
Backup of the Project
321
Home Tab
Undo Group Links Group
Undo Page
Redo Mail
File Link
Project Group Adobe PDF
New Project Microsoft Word
Open Microsoft PowerPoint
Close Other Files
Save Remove
Save As
Print Preview Group
Exit Page
Links
Edit Group Website
Cut Use WebStudio Browser
Copy Use Default Browser
Copy Background Upload Group
Paste Website
Paste in Place Trial host Website
Paste Background
Clear Help Group
Select All Web Studio.com
Web Studio TV
Insert Group About Web Studio
New Page Documentation
Text File Web Studio Wiki
Picture Getting Started
Flash
Draw Tab
Undo Group Colors Group
Undo Fill Color
Redo Border Color
Graduated Fills
Shapes Group Start Color
Shapes End Color
Shapes Using Fill Colors Graduated Fill Dialog
Shapes Using Graduated Fill
Borders Group
Styles
Width
322
Insert Tab
Undo Group Google Group
Undo YouTube
Redo Google Maps
Pages Group Links Group

Insert Page Page Link
Mail Link
Illustrations Group File Links
Picture Adobe PDF
Picture from File Microsoft Word
Protected Graphic from File Microsoft Excel
Background MicrosoftPowerPoint
Graphic Background from File Other Files
Remove Background Other Link
Remove Link
Text Group Footer Links
New Text Object Link Colors
Text From File Link Color
Last Changed Date Visited Link
Special Text Symbols Hover Color
Media Group
Flash
Video
Sound
View Tab
Show/Hide Group Highlight Objects Group Browse Internet Group
Galleries Don’t Hilite Browse the Internet
Small Galleries Objects With Links
Page List Objects That Overlap Windows Group
Caption Bar Objects With Unsafe Fonts Windows
Objects With Added HTML
Objects With Notes
323
Create Tab
Undo Group Shopping Cart Group
Undo PayPal Cart
Redo Add to Cart
Buy Now
Menu Maker Donate
Menu Maker Studio Gift Certificate
Design Selected Menu Subscribe
Object Properties iHostStudio Cart
Photos Group
Insert Photo
Animations Group Insert Photo from File
Ani-maker Insert Protected Photo from File
Special Effects
Rollovers Change Colors
Graphic Rollovers Thumbnails
Photo Edges
Text Effects Group Photo Textures
Text FX
Opacity Group
Slide Shows Group Graphic Opacity
Slide Shows
Flash Group
SmugMug Group
Flickr Un-Group
Flickr Badge Merge
Picasa Take Apart
Html Tab
Add HTML Group Insert Page HTML Group
HTML Object Before All Tags
HTML File Inside HEAD
Between HEAD and BODY
Site-Wide Meta Tags Group Inside BODY tag
Author Start of BODY
Description
Keywords Insert Object HTML Group
Before All Tags
Page Meta Tags Group Inside HEAD
Page Title Before Object
Description Inside Object
Keywords Inside DIV
User Meta Tags After Object
324
Text Tab
Undo Group Paragraph Group Links Group
Undo Left Justify Page Link
Redo Center Justify Mail Link
Right Justify File Links
Clipboard Group Full Justify Adobe PDF
Cut Increase Heading Style Word
Copy Increase Indent Excel
Copy Background Decrease Indentation PowerPoint
Paste First Line Indent Other Files
Paste in Place Paragraph Indent Other Link
Paste Background Remove
Clear Editing Group Link Colors
Select All Spelling Link Color
Replace Visited Link
Insert Group Hover Color
New Text Object
Text From File Insert Special Group
Symbols
Font Group Changed Date
Font Style
Font Size
Bold
Italic
Underline
Text Color
Text Background Color
Transparent Text Background
325
Forms Tab
Create Form Group Buttons Group
Group Form Submit Button
Group Form Properties Submit Button Properties
Hidden Fields Reset Button
Tab Order Reset Button Properties
Button
Text Items Group Button Properties
Text Field
Text Field Properties File Upload Group
Text Box File Upload
Text Box Properties File Upload Properties
Password Box
Password Box Properties Lists and Menus Group
Menu
Check Box Group Menu Items
Check Box Menu Properties
Check Box Properties List
List Properties
Radio Buttons Group
Radio Button
Group Radio Button
Page Layout Tab

Undo Group Center Group
Undo Horizontal
Redo Vertical
To Page
Site Setup Group
Margins Space Group
Show Guides Horizontally
Page Size Vertically
Grid Group Bring To Group

Show Grid Front
Grid Settings Back
Forward
Align Group Backward
Left
Right Make Equal Group
Tops Size
Bottoms Width
Height
326
Page Tab
Undo Group Upload Group
Undo Upload Page
Redo Website
Trial Host Page
Page Group Choose Hosting
New iHostStudio Account Manager
Duplicate Use iHostStudio
Rename Use Another Host
Delete
Home page Templates Group
Set Master Page Open
Save As
Background Group Save Page as a Template
Color Save Page as HTML EMail
Graphic Save Page as a Graphic
Remove Background Add to Gallery
Preview Group Include Page In… Group

Preview Page Footer Links
Use WebStudio Browser Google Site Map
Use Default Browser Google Change Frequency
Preview Links Google Site Map Priority
Use WebStudio Browser
Use Default Browser
327
Appendix D: Keyboard Commands
Appendix D: Keyboard Commands

Keyboard commands. These are the commonly used commands that can be used at anytime.
In addition, you can add customized keyboard commands of your own. See Using Shortcuts in the
Web Studio Workspace chapter.
General Edit
ctrl + n Opens a new web site ctrl + z Undo last command
ctrl + o Opens an existing web site ctrl + y Redo
ctrl + w Closes the active (or currently ctrl + c Copy
viewed) window
ctrl + s Saves the web site to your hard ctrl + x Cuts
drive
ctrl + p Prints the web page ctrl + b Bold
ctrl + q Quits or exits Web Studio ctrl + v Paste

ctrl + alt + v Paste in Place
Delete Removes object
ctrl + a Select All
ctrl + click Creates a duplicate of an object
directly underneath the object.
shift + click Select multiple objects
Graphics Website
“c” + click on Cropping: hold the c key,click and ctrl + double- Launches an internet browser
selection drag the handle to crop the graphic. click on a link and goes to the link that was
handle double-clicked on. Useful for
testing links
ctrl + click on Performs a resample or high quality
selection interpolation on the graphic that
handle was resized.
ctrl + click on Creates a duplicate of an object
graphic directly underneath the object.
shift + click Allows the object to be resized in
on corner two directions at once
selection
handle
328
Text Objects
ctrl + b Turns Bold on and off alt + down Aligns bottoms of selected
arrow objects
ctrl + i Turns Italic on and off alt + left arrow Aligns left sides of selected
objects
ctrl + u Underlines or removes underline alt + right arrow Aligns right sides of selected
objects
ctrl + d Brings up the Font dialog if text or alt + up arrow Aligns tops of selected objects
a text object is selected
ctrl + e Opens the Edit HTML Source alt + = Moves objects forwards
dialog
ctrl + f Opens the Search and Replace alt + [ Moves object to the back
dialog
ctrl + down Moves the text cursor to the next alt + ] Moves object to the front
arrow paragraph
ctrl + up Moves the text cursor to the e + click on 1st Makes all objects equal to size
arrow previous paragraph selected object of first object selected
Home Moves the text cursor to the start arrow keys Moves selected objects up,
of the current line of text down, left, right one pixel at a
time
End Moves the text cursor to the end of arrow keys Holding an arrow key moves
the current line of text objects continuously
shift + left Selects text to the left of the cursor arrow keys + Moves selected objects up,
arrow shift key down, left, right 10 pixels at a
time
shift + right Selects text to the right of the p Pushes the objects under a
arrow cursor selected object down the page.
ctrl + end Moves the text cursor to the end of p + shift key Pushes 10 pixels at a time.
the text in the object
ctrl + home Moves the text cursor to the u Pulls the objects under a
beginning of the text object selected object up the page.
ctrl + space Changes selected text to plain u + shift key Pulls 10 pixels at a time
ctrl + click on Creates a clone of object beneath ctrl + space Spaces objects so that they
selected text the original. Drag the new object commands touch with no space in between
object from beneath after clicking and them.
before releasing the mouse button
ctrl + shift + Spaces objects so that there is
space only one pixel of space between
commands them
l + click on Aligns selected objects left
selected
objects
r + click on Aligns selected objects right
selected
objects
f + click on an Brings object to the front
object
b + click on an Sends object to the back
object
329
Index
Appendix E: Hot Keys

These keys are described in the manual when performing certain functions.
Key Use Explanation

c Cropping Select an object, hold down the c key and then drag a
handle to crop.
p Push objects down the page Select an object. Press the p key. The objects under the
selection are pushed down the page.
u Pull objects up the page Select an object. Press the u key. The objects under the
selection are pulled up the page.
b Send to back Select an object. Press the b key and the object is sent to
the back of the layers.
f Bring to front Select an object. Press the f key and the object is
brought to the front of the layers.
g Change a Protected Graphic to a Select the Protected Graphic. Press and hold the g key.
normal graphic Click on the Protected Graphic again to change it.

Web Studio

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Studio

Uploaded by

Copyright:

Available Formats

Web Studio 5.

Back to the Beach Software, LLC

Written by Linda Mullen

Chapter 1: Introduction ___________________________________ 1

Quick Access Toolbar _____________________________________________9

Chapter 3: Quick Start Tutorial ____________________________ 17

Save the Project ___________________________________________________________ 21

Copy the buttons ___________________________________________________________ 32

Chapter 4: Website Basics ________________________________ 37

Centering Your Website in the Browser ______________________________42

Add a new sub-gallery ______________________________________________________ 55

The Page List window ______________________________________________________ 61

Set the size of the Page Margins _______________________________________________ 77

Chapter 8: Backgrounds __________________________________ 87

Copying and Pasting Backgrounds __________________________________91

Nudge objects one pixel at a time ______________________________________________ 97

Resizing Objects to Each Other ____________________________________105

Convert a series of Protected Graphics to normal graphics _________________________ 113

Selecting Text and Activating Text Objects for Editing _________________124

Check spelling ___________________________________________________________ 132

Chapter 11: Working with Photos _________________________ 135

Copy Protecting Photos __________________________________________143

Setting the Opacity _____________________________________________158

Chapter 14: Links ______________________________________ 171

Adding New Links to the Links Gallery _____________________________173

Chapter 15: Multi Media ________________________________ 197

General section ___________________________________________________________ 199

Chapter 16: Slide Shows ________________________________ 209

Creating a Flickr Slide Show ______________________________________212

Chapter 19: Shopping Carts ______________________________ 225

Creating a PayPal Account _______________________________________226

Chapter 20: Web Studio Menu Maker ______________________ 233

Notes section ____________________________________________________________ 240

Chapter 21: Forms Factory _______________________________ 243

Edit the text field options ___________________________________________________ 256

Check the tab order ________________________________________________________ 272

Chapter 22: Working with HTML _________________________ 281

Setting page file types _____________________________________________________ 289

Chapter 23: Uploading Your Website to the Internet___________ 293

FTP address _____________________________________________________________ 306

Appendix B: Supported Files _____________________________ 318

Graphics Files Imported ____________________________________________________ 319

Appendix C: Ribbon Commands __________________________ 320

Appendix E: Hot Keys __________________________________ 329

Finding System Requirements and Supported Files

Installing Web Studio

Download for trial or purchase from our website

Install Web Studio from a CD

Registering Web Studio

Register Web Studio

Find your Registration Number

Access My Account on the Web Studio website

Reinstalling Web Studio

Uninstall Web Studio

Reinstall Web Studio

We recommend that you save the download installer to a safe location on

Getting Help with Web Studio

Web Studio TV Video Tutorials

Web Studio Forum

Articles and useful information

Finding Web Studio Version Information

Understanding Conventions Used in This Manual

Chapter 2: The Web Studio Workspace

Quick Access Toolbar