Web Studio V5

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 Web Studio 5.0 User Manual
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 pages 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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual 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 Objects 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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual
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 Cursors 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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual
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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual 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 Studios Object-Oriented Approach ________________281 Modifying Web Studios 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 Web Studio 5.0 User Manual 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 Web Studio 5.0 User Manual
1 Chapter 1: Introduction
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. Appendix B. This Appendix provides you with a list of the Minimum System Requirements and the Recommended System Requirements that you need to install Web Studio. 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. Go to webstudio.com and purchase the appropriate product. This will lead you to the Download page for the software. 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.
License Agreement
The Web Studio license allows one person to register the program on up to two computers.
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 Web Studio 5.0 User Manual 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 Chapter 1: Introduction 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. 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.
Using other Windows programs:
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 doubleclick on the downloaded file to install Web Studio. If you choose Run, the download will start automatically.
4 Web Studio 5.0 User Manual
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 Chapter 1: Introduction 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.
7 Chapter 2: The Web Studio Workspace
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.
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.
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.
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.
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, rightclick 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.
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 Studio, such as ctrl+c for copy or ctrl+s for save. See Appendix D for a list of common keyboard commands.
Keyboard commands and hot keys are not case sensitive.
Create customized keyboard commands You can create your own keyboard commands by clicking on the Customize button at the bottom of the Quick Access Toolbars 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 Chapter 2: The Web Studio Workspace 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.
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 Chapter 2: The Web Studio Workspace 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.
17 Chapter 3: Quick Start Tutorial
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. Lets 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.
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 Chapter 3: Quick Start Tutorial 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 Web Studio 5.0 User Manual 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 Chapter 3: Quick Start Tutorial 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 Web Studio 5.0 User Manual 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.
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.
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 visitors 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. Doubleediting. 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 Chapter 3: Quick Start Tutorial 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.
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 Chapter 3: Quick Start Tutorial Rename the Contact page using the pages 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 pages 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.
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 Chapter 3: Quick Start Tutorial 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 Web Studio 5.0 User Manual 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. Click on Draw > Colors > Fill color. 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. Hold down the ctrl key. Click on a rectangle and drag the mouse away. This creates a duplicate of the rectangle. Resize the rectangle to make the design line. See the Color and Shapes chapter for complete instructions about the Color dialog.
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.
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 Web Studio 5.0 User Manual 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 Buttons 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 Buttons 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 Hold down the ctrl key. 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 Buttons 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 Chapter 3: Quick Start Tutorial 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.
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. 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 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 Chapter 3: Quick Start Tutorial 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 pages 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. Now click on the Contact page tab to bring that page to the top of the workspace. 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.
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 Home page. Click on the Footer Links to go to the Contact page and back to the Home page. Click the X on the Preview Page tab to close the browser. 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 allhave fun! Web Studio is a fun program to use and makes it easy to create professional looking websites.
Remember: You cannot make any changes to your website in the browser. You can only view the website.
37 Chapter 4: Website Basics
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 Studio 5.0 User Manual 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.
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 What do you need for a website? record of your website called a Web Studio 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 patienta good backup is worth it!
40 Web Studio 5.0 User Manual 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 extension is .ows. If this is the first time that you are saving the Project, give 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 websites 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. Click OK when you are finished. Web Studio automatically saves the Project to its original location.
41 Chapter 4: Website Basics 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. Click on Website Properties at the far right of the Caption Bar. This opens the Web Site 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.
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 visitors 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 windows 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.
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 viewers 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 Web Studio 5.0 User Manual Home Page section
Home Pages 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
Pages 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 Chapter 4: Website Basics 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 Web Studio 5.0 User Manual 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 Click on Website Properties at the far right of the Caption Bar. This opens the Web Site 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 Chapter 4: Website Basics Miscellaneous section
For transparent and index-colored graphics. Select the type of graphic file. When creating your web sites 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 Web Studio 5.0 User Manual 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 website. Many items, such as animations, cannot show their actions until you Preview your page. The Preview Page command allows you to see a single page in the browser. The Preview Website or Preview Links commands are used to check links and view multiple pages in the browser. Previews can be viewed in the Web Studio browser or in your Default browser. The Preview Page command allows you to see a single page in the browser. The Preview Links or Website commands allow you to view multiple pages and check all of your links.
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.
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 Studio 5.0 User Manual Web toolbar In the Default browser, you will use your browsers 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. Forward. Stop. Refresh. Address. History.
Go back to the previously viewed web page. Advance to the next viewed web page. Stop the current web page from loading into the browser. Reload the current page into the browser. Enter the URL to visit another website. 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 Chapter 4: Website Basics 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.
53 Chapter 5: Galleries
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 Buttons Links My Stuff Templates Text Graphics Photos Forms
Contains graphic backgrounds for your page. Solid backgrounds are made using the Background group in the Page tab. Contains readymade buttons. Each button has a Buttons dialog that provides you with many design choices for the button. Contains links to all of your pages as well as sections for you to add links for downloads, anchors, e-mails, and other links. This is a Storage section for you to keep copies of graphics that you use in web design. This is a collection of professionally designed templates. Use one or a combination of several to design your website. 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. Contains a selection of graphic objects that you can use in web design. Contains a collection of photos that can be resized, cropped, and changed to use on your web pages. 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 Web Studio 5.0 User Manual 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 gallerys 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 Chapter 5: Galleries
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 subgallery 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 gallerys name tab to open the gallery that you want to use.
56 Web Studio 5.0 User Manual 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 computers 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 Right-click over an item. Choose Cut from the menu. The item is removed from the gallery and placed on the clipboard.
57 Chapter 5: Galleries 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 gallerys 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 gallerys 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 Web Studio 5.0 User Manual 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 Click on a Galleries tab to open a gallery. Select a group of objects on the page. Hold down the ctrl + shift keys. 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. Hold down the ctrl + shift keys. 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 Click on a Galleries tab to open a gallery. Right-click over an item.
59 Chapter 5: Galleries 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 gallerys 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 Web Studio 5.0 User Manual 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
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 Web Studio 5.0 User Manual 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 pages 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 Chapter 6: The Page List 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 Web Studio 5.0 User Manual 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 pages 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 pages 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 Chapter 6: The Page List 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 someones Favorites menu. The page title is also displayed by Google and other search engines when they display a list of your page.
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 pages 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 pages 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 pagenot the title that you give your Home page. Web Studio automatically names the Home pages file, index.html.
You should name your Home page with the title that you want displayed in the browser, your visitors 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.
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 pages name in the Page List, the windows title bar, the Links Gallery, and in any links youve added to your website.
68 Web Studio 5.0 User Manual 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. Click OK when you are finished.
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 allows you The Master Page is especially useful when you are to place repeating text and working with drop down menus. It is easy to add and objects on every page in the remove pages from your website when you want to make same place. It is not a menu changes on only one page. 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 Chapter 6: The Page List Choose a Master Page Use the Set Master Page command Design the page that you want to use as the Master. Click on the pages tab to bring the page to the front of the workspace. Click the Page > Page > Set Master Page command. The page is now the Master Page. A Master Page icon appears in front of the name in the Page List. The pages name changes to Master Page in the Page List. Use the pages right-click menu Design the page that you want to use as the Master. Right-click over the name of the page in the Page List. This displays the right-click menu. Click on Use as Master Page. The page is now the Master Page and a Master Page icon appears in the Page List in front of the page name. The pages 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 pages 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 pages name reverts to its original name in the Page List. The new Master Pages name is changed to Master Page. You can also choose Use as Master Page from the pages right-click menu.
70 Web Studio 5.0 User Manual 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 the front of the workspace. Click on the Page > Page > Set Master Page command. This opens the Do you want to stop using the Master Page? dialog. Click Yes to stop using the Master Page. When you turn off the Master Page, it removes all of the Master Page contents from the other pages. It does not affect any of the pages that are already on the internet.
You can also choose Use Master Page in the pages 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 pages 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 pages 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 Chapter 6: The Page List 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 Go to the Page List. Right-click on the pages name to view the menu. Click on Google Site Map Priority. A list from 0-10 is displayed. Click to choose the pages 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 pages priority. Ten is the highest priority. Your Home page should be a ten.
72 Web Studio 5.0 User Manual 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 Hourly Daily Weekly Monthly Yearly Never
The information on this page is constantly changing. The information on this page is changes hourly. The information on this page changes daily. The information on this page changes weekly or changes frequently. The information on this page changes monthly or changes infrequently. The information on this page usually does not change. 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.
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.
75 Chapter 7: Working with Pages
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.
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. The background always fills Page guides help you keep your pages to a the browser no matter how predetermined size. Most designers use 1024 pixels as large or small you make your the maximum width of the page. The page guides do pages. not stop you from placing objects anywhere on the 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 Most common page size: command. 1024 x768 Set the Page Size in one of two ways 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 Chapter 7: Working with Pages
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 Go to the Page Layout > Site Setup group. 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. Click OK when you are finished.
Show/Hide the Page Guides and Margins Go to the Page Layout > Site Setup group. 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 pages tab or clicking the pages 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.
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 Chapter 7: Working with Pages 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.
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 Chapter 7: Working with Pages 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 Web Studio 5.0 User Manual 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 pages Preview does not open within the workspace. It opens with your computers browser. Arrange the Preview Page in a new vertical or horizontal tab group. Click on the Browsing tab, enter the URL of a website in the Address field, and then press Enter. This opens the website in a new page on the workspace. You can use the navigation tools and Address field to browse the internet from this page.
You can drag and drop graphics from one page to the other. This includes graphics from the internet. You can also view Web Studio Wiki in the Preview page.
83 Chapter 7: Working with Pages 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 pages name in the Page List and choose Page Properties from the Page Background Menu to activate the pages 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 Web Studio 5.0 User Manual File Type section
Pages 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 Chapter 7: Working with Pages 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.
87 Chapter 8: Backgrounds
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 A new background automatically backgrounds and backgrounds with texture or deletes the previous background. design called graphic backgrounds. 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 Web Studio 5.0 User Manual 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 Chapter 8: Backgrounds 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. Click OK to apply the color. If you want more choices, click on the Custom tab.
90 Web Studio 5.0 User Manual 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. The background fills the page.
91 Chapter 8: Backgrounds
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 Background Menu. Open the page that you want to fill with the background. Click on Home > Edit > Paste>Paste Background or right-click over a page and choose Paste as Background from the Page Background Menu. The background fills the page. You can copy any graphic background. You cannot copy solid color backgrounds. Use the Background Color Command to change a solid color background.
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. The background fills the page.
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 Web Studio 5.0 User Manual 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 pages 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
Chapter 9: Working with Objects

Objects are the building blocks for your websites 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 objects 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 gallerys 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. Click and drag the object to position it on the page.
94 Web Studio 5.0 User Manual 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. Click and drag the object to position it on the page. 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. Click and drag the object to position it on 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.
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 There are two ways to deselect objects: 1. Click on a blank spot on the page to deselect an object. Remember that when a large graphic is a backdrop on your page, then you must go to the far right or left in order to find a blank spot on the page. 2. Hold down the shift key and double-click over the object. Sometimes, the selection order is important. For example, the order in which you select graphics determines the order you will see them in an animation. These instructions will tell you when to determine a selection order.
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 Web Studio 5.0 User Manual 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) Press and hold the shift key. Click the other objects that you want to add to the selection. Remove objects from an existing selection Press and hold the shift key. 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 Chapter 9: Working with Objects 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 Web Studio 5.0 User Manual Nudge objects ten pixels at a time Select one or more objects. 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 Select one or more objects. 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 The P key (push down) and the U new objects. 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 Chapter 9: Working with Objects 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. Choose Copy or Cut from the ribbon or the right-click Selected Object Menu. Click the page tab to go to another page. Choose Paste or Paste in Place from the ribbon or 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. Paste in Place puts objects in the same place on the new page as they were on the previous page.
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.
Editing an Objects 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 objects 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 Chapter 9: Working with Objects 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 objects 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.
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).
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 Each object is on a separate that are located on lower layers. You can rearrange layer. This means that you can the stacking order to create your design and arrange easily overlap or stack them. the objects for things like slide shows. 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. Select an object. 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 Web Studio 5.0 User Manual Space with 1 pixel between objects Select the objects that you want to space. Press and hold the ctrl+shift keys. Click on Page Layout > Space > Vertically or Horizontally. Space objects with edges touching Select the objects that you want to space. Press and hold the ctrl key. Click on Page Layout > Space > Vertically or Horizontally.
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 Chapter 9: Working with Objects 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 Select an object. 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. Therefore, the selection order is important.
Click on the Page Layout tab. Select the object that is the size that you want the 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.
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. Click OK when you are finished. 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.
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 keyyou 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 keyyou 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.
Duplicating Objects
There are several ways to duplicate objects. The Copy and Paste commands are located both on the ribbon and in an objects 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 If you click on an object when the not drag it, you do not see it because the ctrl key is pressed, you create a duplicate is directly underneath the object. 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.
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.
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 Some objects cannot be rotated because of objects. See the chapter on Working with of their contents. This includes buttons, Photos for a complete list of the Special HTML objects, templates, flash, sound Effects commands. 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 Chapter 9: Working with Objects 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 > Dont 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 Studios 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 Web Studio 5.0 User Manual 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 Chapter 9: Working with Objects 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. The G key is a hot key that Hold down the shift key, click on the remaining converts Protected Graphics to graphics and then release the shift key. normal graphics. Hold the G Press and hold down the G key on the key and click on the Protected keyboard. Graphic to convert it. Hot keys Click on any of the Protected Graphics that will are not case sensitive. be changed. 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.
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 Graphics 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 Graphics files in a folder for each site so that you can simply move the Project file and the Protected Graphics 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 Chapter 9: Working with Objects 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 links 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 Web Studio 5.0 User Manual 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 Chapter 9: Working with Objects 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 Studios 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.
Quick Tips for Working with Objects

Command
Select one object Select more than one Move 1 pixel Move 10 pixels Constrain movement horizontally or vertically Push objects down the page to add space Pull objects up the page to remove space Align, center, make equal Click on the object. Hold the shift key and click each object. Select objects. Press arrow keys. Select objects. Hold the shift key while pressing arrow keys. Hold the shift key and then drag objects. Select an object. Press the P key. Objects under the selected object are pushed down the page. Select an object. Press the U key. Objects under the selected object are pulled up the page. 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. Position the top/bottom or left/right object. Space the other objects loosely in between. Select the objects. Click on the command. Objects are spaced evenly across or down. Follow the directions for spacing horizontally/vertically, but hold down the ctrl+shift keys before you click the command. Follow space horizontally/vertically directions, but hold down the shift key before you click the command. 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. 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.
Action
Space horizontally or vertically
Space with 1 pixel between Space with edges touching Crop
Resize
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 Web Studio 5.0 User Manual 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 fonts 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 visitors page.
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 Arial Bold Impact Veranda
Blue: probably safe
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.
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. 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.
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. A new text object is placed on the page with a blinking cursor.
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.
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 If you want to: select the object itself, not the text within 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 objects 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 Web Studio 5.0 User Manual 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 Select a word Select a paragraph Select several words Select all text objects Click and drag the mouse over the text to select it. Double-click the word. Triple-click within the paragraph. Click on the first word, hold down the shift key and then click on the last word. 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. Press and hold the shift key. 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. Double-click to activate the new text object for editing. Click on the location for the text and then paste the text. If you want to replace existing text with the text on the clipboard, select the existing text first, then paste.
Paste in a different text object
Paste to replace text
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 Web Studio 5.0 User Manual 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 Use the Font command Hold the shift key and click on all the objects you want to change. Click on Text > Font > Font. Choose a font from the drop down list. The text in all of the objects is now changed. Use the Text Gallery Click on the Text Gallery tab to open the gallery. Scroll to find the font that you want to use. 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 Use the Font command Double-click to activate the text object for editing. Select the text that you want to change. Click on Text > Font > Font. Choose a font from the drop down list. The selected text is now changed. Double-click to activate the text object for editing. Select the text that you want to change. 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 from the gallery onto the selected text. The selected text is now changed.
Use the Text Gallery
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 Double-click to activate the text object for editing. 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 Web Studio 5.0 User Manual Indent the first line of a paragraph Double-click to activate the text object for editing. Select a paragraph or part of a paragraph. Click the Indent First Line command in the Paragraph group. The first line is indented. Indent the whole paragraph Double-click to activate the text object for editing. 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 Double-click to activate the text object for editing. Select the paragraph or paragraphs. Click the Decrease Indent command in the Paragraph group. The whole paragraph moves to the left. To make a paragraph, press Enter twice. If you do not put space between text, then paragraph based commands will be applied to the whole text object.
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.
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. Click Done when you are finished.
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 Studios 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.
135 Chapter 11: Working with Photos
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 total pixel size of an image tells you how many pixels the image is made of. If you have a photo that is 1000x800, this means that the photo is 1000 pixels wide and 800 pixels high.
Photos are a type of object. See the Working with Objects chapter for all of the things you can do to stack, crop, resize, move and align photos.
136 Web Studio 5.0 User Manual 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 Chapter 11: Working with Photos 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 photos 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 photos 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 largetoo 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 photos 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.
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 keyyou 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 Chapter 11: Working with Photos 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 Web Studio 5.0 User Manual 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 Effects>desired command to apply the effect. If you do not like the effect, click the Undo command or ctrl+z. Apply as many effects as you like to the photo.
Hold down the shift key to select more than one photo.
141 Chapter 11: Working with Photos Shadow Effect. If the page has a solid color background, Web Studio antialiases 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 appearnormal, 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. Click OK when you are finished. To see the button in action, click Page > Preview > Preview Page.
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 Chapter 11: Working with Photos 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 OK when you are done. 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 Web Studio 5.0 User Manual 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 appearnormal, 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. Click OK when you are finished. To see the button in action, click Page > Preview > Preview Page.
145 Chapter 12: Color and Shapes
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, lets 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 objects 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 Web Studio 5.0 User Manual 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 Chapter 12: Color and Shapes 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 objects 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. Click OK to apply the color. 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. Click OK to apply the color.
148 Web Studio 5.0 User Manual 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 Chapter 12: Color and Shapes 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 color, the color will change. change all of them at the same time. This 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.
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 graphics 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.
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.
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 Chapter 12: Color and Shapes 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 Web Studio 5.0 User Manual 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 Chapter 12: Color and Shapes 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. Click OK when you are finished.
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 Chapter 12: Color and Shapes 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.
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. Select an object. 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.
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.
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 for visitors to view all of the pages of your website. Besides adding links to buttons, you can add links to other objects, such as text or graphics. Links can also go on text or any other graphics on your page. See the Links chapter.
Types of Buttons
There are three types of buttons: Normal buttons, Rollover buttons and Graphic Rollover buttons. Normal Buttons
Normal buttons are those that always look the same. They do not change even when the mouse is moved over them or when they are clicked.
Rollover Buttons
Rollover buttons change in some way when you move the mouse over them or click them. The changes are defined as three states: Normal, Mouse Over, and Mouse Down. In Web Studio, you can change hue, saturation, and luminosity in one, two, or all three states.
Graphic Rollover Buttons

Graphic Rollover buttons are special buttons that allow you to use graphics for one, two, or all three states: Normal, Mouse Over, and Mouse Down. This means you can use text, photos or any graphic objects to create a custom look for the buttons on your website.
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 doubleclicking 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 Rightclick>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 Click on the Buttons tab to open the Buttons Gallery. 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: Buttons 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 Web Studio 5.0 User Manual 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. Click OK when you are done. 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. Click on the Buttons tab to open the Buttons Gallery. 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.
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. Click OK when you are done. 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.
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.
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. Click OK when you are finished. 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.
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 pages name from the gallery onto the button. Pay attention to the cursors 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.
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 objects. Web Studio knows To use any link from the gallery, you drag and drop the what objects cannot have links link onto an object. Links can be added to any text or and wont let you add them. object on the page, but each item can have only one link. 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 Web Studio 5.0 User Manual 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 visitors 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 links 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 visitors 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 Web Studio 5.0 User Manual 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 links 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 Web Studio 5.0 User Manual 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.
Fill in the following fields: 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. Open this links 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 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 links info and click OK when you are finished.
Adding Links to Buttons and other Objects

Find the Cursors 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 Web Studio 5.0 User Manual Link a page from the Page List Locate the page that you want to link to an object. Drag and drop the pages name or icon onto the object. The link to that page is now on that object. Add a link from the Links Gallery Open the Links Gallery. 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. There are several ways to add links: Drag and drop links from the Links Gallery. Use the Add/Edit Link option from the right-click Selected Object Menu. Use the Links Commands in the Insert Tab.
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. Fill in the following fields:
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. Open this links page or file in a new browser window. Check this box if you want the link to open in another browser window. This allows your visitors to visit other sites without leaving your site. Description. This is the message that viewers will 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 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 Web Studio 5.0 User Manual 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.
Fill in the following fields: 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. Click OK when you are finished. 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. Select an object. 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 Web Studio 5.0 User Manual Link to a page Select an object. 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. Click OK when you are finished. 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. Click OK when you are finished.
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. Open the Links Gallery. 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. Open the Links Gallery. 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.
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. Click OK when you are finished. 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. Click OK when you are finished. 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 Web Studio 5.0 User Manual 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. Click OK when you are done. 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.
Check Open this links 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. Click OK when you are finished.
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 Web Studio 5.0 User Manual 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 pages 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.
Use the Page List to add or remove a page in Footer Links Go to the Page List. Right-click on a pages 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 pages name to select it. Then go up to the Page List button and left click on it. This displays the same menu as the pages 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 and include the page in the Footer Links. Remove a page: Click on Page > Include Page In > Footer Links to remove the highlight from the Footer Links command and remove the page from the Footer Links. When a page is included in Footer Links, the Footer Links Command in the Page Tab is highlighted.
190 Web Studio 5.0 User Manual 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.
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. Open the Links Gallery. 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.
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. Open the Links Gallery. 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.
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.
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 Dont Hilite command. Turn off the highlight on links Click on View > Highlight Objects>Dont 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.
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 Web Studio 5.0 User Manual 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. Right-click over the selected text and choose Copy from the resulting menu. 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
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 Web Studio 5.0 User Manual 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 Chapter 15: Multi Media 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 Web Studio 5.0 User Manual 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 Chapter 15: Multi Media 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.
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. Select the video file and click Open. The video is added to the object as a link. View the video in Preview by clicking on Home > Preview > Preview Page or Page > 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. View the video in Preview by clicking on Home > Preview > Preview Page or Page > Preview > Preview Page. Click on the object to view the linked video.
203 Chapter 15: Multi Media 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. View the video in Preview by clicking on Home > Preview > Preview Page or Page > 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 Double-click to activate the text object for editing. 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. Select the video file and click Open. The video is added to the text as a link. View the video in Preview by clicking on Home > Preview > Preview Page or Page > Preview > Preview Page. Click on the text to view the linked video.
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. View the video in Preview by clicking on Home > Preview > Preview Page or Page > Preview > Preview Page. Click on the text to view the linked video.
Setting Video Properties

Set the properties of an embedded video with visible controls Right-click over the object and choose Properties from the Selected Object Menu. 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 Chapter 15: Multi Media
Click on the text in the Embed field to select it. Right-click over the selected text and choose Copy from the resulting menu. 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.
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. Check the sound in Preview by clicking on Home > Preview > Preview Page or Page > 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 Chapter 15: Multi Media 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 > Preview > Preview Page. Click on the text to hear the linked sound.
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 sounds 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 Double-click to activate the text object for editing. 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. 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.
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. Choose how many times that you want it to play. Set the properties of an embedded sound with visible controls Right-click over the object and choose Properties from the Selected Object Menu. Click on the Media tab. Click on the Edit Sound Properties button. Choose how many times that you want it to play. Choose if you want to have the sound start to play automatically.
209 Chapter 16: Slide Shows
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 Yahoos 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 Googles 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 Web Studio 5.0 User Manual 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.
Fill in the following fields: 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 Pages 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 OK when you are finished. 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, its 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 Chapter 16: Slide Shows
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.
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. Resize and position the object. 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 Chapter 16: Slide Shows 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 Web Studio 5.0 User Manual 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. Resize and position the object. Click on any Preview Page command to see the slide show in action.
215 Chapter 16: Slide Shows 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. Go back to Web Studio. Right-click over the text field and choose Paste from the resulting menu. Click OK. The Flickr Badge object is placed on the page. Resize and position the object. Click on any Preview Page command to see the Badge.
Creating a Picasa Slide Show

Picasa is Goggles 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. Go back to Web Studio. Right-click in the text field and choose Paste from the resulting menu. Click OK. The Picasa object is placed on the page. Click on any Preview Page command to see the slide show in action.
217 Chapter 17: Animations and Text FX
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 Studios 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 tenths of a second. So 1 is one tenth, 10 is one second, and 100 is ten seconds. The range of timing is from 1 tenth to 20 seconds. You cannot add sound to animations because sound will stop the animation 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 Web Studio 5.0 User Manual 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 Chapter 17: Animations and Text FX 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.
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
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. Things that you need to know about templates. Every graphic in the template can be deleted and replaced with one of your own. Click on Home > Help > Quick Start Videos to see a Video Tutorial about templates.
222 Web Studio 5.0 User Manual 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 Chapter 18: Templates 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.
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
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 ecommerce site. The PayPal cart is excellent for small catalogs with simple purchases. For those of you who need a larger, fullfeatured e-store, our partner, iHostStudio has affordable plans that have everything you need for e-commerce. See Creating an estore 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.
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, you can send and receive 24-hour fraud surveillance. payments through PayPal Customer service availability. PayPal. All Merchant services. 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 Chapter 19: Shopping Carts 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. Click on Create > Shopping Cart > PayPal Cart. This opens the PayPal Button Properties dialog. Do not use the buttons that PayPal offers because they require technical know-how. The Web Studio buttons are automatically set up for you.
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. URL to Your Site. If you choose to use Success 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.
You can include shipping in the price and skip shipping options in PayPal.
229 Chapter 19: Shopping Carts 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. Click OK when you are finished. 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. Click OK when you are finished. When your customers buy your products, the choices that you made in PayPal will be displayed in the checkout screen.
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 methodsand 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 links page or file in a new browser window. Click OK. Click on Home > Preview > Preview Links or Page > Preview > Preview Links. 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 Chapter 19: Shopping Carts
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 links page or file in a new browser window. Click OK. Click on Home > Preview > Preview Links or Page > Preview > Preview Links. In the Preview window, click on the button or graphic that links to your shopping cart.
233 Chapter 20: Web Studio Menu Maker
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 Web Studio 5.0 User Manual 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, you can double-click on it or select it and then click on Create > Menus > Design Selected Menu command. This opens the menu in Preview and displays a new Edit 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 Menu Studio: Add or remove Menu Items. Design Menus: Make design choices for the menu.
235 Chapter 20: Web Studio Menu Maker 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.
Objects
Rollover buttons
Prepare the Objects

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. 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. Place one or two objects on the page. 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.
Normal buttons
Photo, graphic or shape objects
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 Chapter 20: Web Studio Menu Maker 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 Web Studio 5.0 User Manual 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. 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.
Add external pages
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 Items 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 Items 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 Chapter 20: Web Studio Menu Maker 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 the Save then Design Menu button. 2. Double-click a menu. 3. Select a menu and then click on Create > Menus > Design Selected Menu.
Only the menu you select can be edited in the Design Menu Tab.
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
Orientation and Main Menu Command Options

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. 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. These commands affect the Main Menu. Left, right, or center align the text on the menu.
Menu Fonts
Menu Text Align
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 Web Studio 5.0 User Manual Group

Item Groups Transitions
Item Command Options

The Item groups include commands for fonts, border colors, and borders with two additional groups: Transitions and Opacity. 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. Set the opacity of the Menu Items to allow the objects behind the menu to show through.
Opacity
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 Chapter 20: Web Studio Menu Maker 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 Web Studio 5.0 User Manual 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.
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 users 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.
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. Always check the options in each field to ensure the selected options are what you want on the form.
4.
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 Object Properties dialog. Choose options for the text field in the Object Properties dialog. See and explanation of options below. Click OK.
248 Web Studio 5.0 User Manual 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 forms 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 Web Studio 5.0 User Manual 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. Text Field Colors 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.
Make the sure the error message for a required field is clear so the user knows which field still needs to be completed.
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 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. Choose to 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 forms look or behavior.
252 Web Studio 5.0 User Manual 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. 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. 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. Background. This is the color of the field where the user enters the text. Edit the text box options Double-click on the text field to open the Object Properties dialog. Make changes to the text field 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 Web Studio 5.0 User Manual Choose options in the Form Object section for the text box
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. Choose to 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 forms look or behavior.
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 Label that displays on the form. 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. 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 asked users to choose a password with letters and numbers, then use alphanumeric as the validation type. Required Field. Check this box if you want this to be a required field. 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.
256 Web Studio 5.0 User Manual Text Field Colors 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.
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 Click on any Preview Page checkbox, you may want to include instruction such Commands to see how the form as, Check all that apply. fields will look on the web. Radio buttons are little round boxes that are like checkboxes except that only one can be selected in a group. When one is selected, the others are automatically turned off.
Important info about naming Checkboxes and Radio Buttons! Each Checkbox gets its own name. The name must be different from the other checkboxes so that customers can select as many as they want. If you give the same name to all of the checkboxes, you will only get information from one checkbox regardless of how many are selected. Radio Buttons belong in a group and therefore, each group gets a name-- not the individual button.
Adding Checkboxes
Add a checkbox Click on Forms > Check Box > Check Box. This places a checkbox on the page and opens the Object Properties dialog. 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 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.
258 Web Studio 5.0 User Manual Label Properties for Form Control 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. 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 forms look or behavior. 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.
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 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.
261 Chapter 21: Forms Position Position. The field position from the left and top margins is measured in pixels. Disable. This disables this form element. Label Properties for Form Control Label. Fill in the text that will be displayed on the form next to the radio button. Position. Choose to position the label on the left of the field, the top of the field or have no label at all. Background Color. This is the background color of the field label. Font. Choose a font style. Text Color. Choose a text style. Custom Script (Advanced) Use this for any scripting that is necessary to customize the forms look or behavior. Choose options in the Radio Button Section
Radio Button Properties Group Name. Fill in a name that identifies this specific field. Every radio button in a group must have the same group name.
262 Web Studio 5.0 User Manual 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.
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 Object Properties dialog.
264 Web Studio 5.0 User Manual 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 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 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 Buttons Text Font. Click to choose the font for the button. Custom Script (Advanced) Use this for any scripting that is necessary to customize the forms look or behavior. 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 Web Studio 5.0 User Manual 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 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. 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. 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 forms look or behavior. 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 Label that displays on the form. 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 Data Entry Validation Required Field. Check this box if you want this to be a required field. 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. Text Field Colors 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.
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 Web Studio 5.0 User Manual 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. Click OK when you are finished.
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. Click OK when you are finished. 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 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 in this chapter.
270 Web Studio 5.0 User Manual Position Position. The field position from the left and top margins is measured in pixels. Disable. This disables or grays out this form element. Use this when there are check boxes that are not relevant unless another checkbox is checked. Label Properties for Form Control 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. 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 forms look or behavior. 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. Data Entry Validation Required Field. Check this box if you want the menu or list to be a required field. 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. Menu/List Colors 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.
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.
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.
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.
Object Info ID Number. Web Studio assigns an object ID number to the field. 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 youd 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 doesnt, choose the other CGI Script offered named http://www.mail.webstudio.com/php/formtoemail. If this one doesnt 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 Web Studio 5.0 User Manual 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.
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 field or validated field is not filled in correctly. The field is highlighted with an error color and the message is displayed to the right of the field.
You can choose the highlighted error color of the form in the Form Properties section of the forms 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.
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 forms 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.
281 Chapter 22: Working with HTML
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 Studios 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 headers 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 Harrys code and pastes it into his new site. He Previews the site and everything works! Why? Because Web Studios 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.
Modifying Web Studios HTML

The majority of Web Studios 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. You can add HTML to any object What most people really want when they ask to on a page, to the page itself, to a modify the HTML is to add their own HTML to text object and to an HTML object. add customized features or features that are not directly available through Web Studios 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 HTMLs function. Heres a list: Before any of the pages tags Between the HEAD and BODY tags In the BODY section of the page Inside the Object Tag of an object After an Objects HTML In the HEAD section of the page Inside the BODY tag Before an Objects HTML Inside the DIV tag of an object Inside the HTML object for complete, customized page objects
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 pages 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 pages 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 pages 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 objects 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 objects 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.
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 Chapter 22: Working with HTML How do I know when to use $thisfolderurl$? Anytime you are adding HTML that youve 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 Web Studio 5.0 User Manual Add HTML to a page from a file Web Studio can open more than Click on HTML > Add HTML>HTML File. 20 different types of HTML, This opens the Open dialog. markup and scripting file types. Navigate to the file that you want to add, click 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. Click OK when you are finished.
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 youve 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 Chapter 22: Working with HTML 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. Click OK when you are finished.
288 Web Studio 5.0 User Manual 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 Chapter 22: Working with HTML 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 pages file. Set a pages file type Right-click on the pages 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 pages 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 Web Studio 5.0 User Manual 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.
Working with HTML in Text Objects

Web Studios 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.
293 Chapter 23: Uploading Your Website to the Internet
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 You do not need an iHostStudio able to see your site exactly as it is viewed after it account to use Trial Hosting. is uploaded to the internet. 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.
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.
Integrated Hosting with iHostStudio

Although you can use any hosting company for your website, iHostStudio is the preferred site hosting service because it is Using iHostStudio as your designed to work hand in hand with Web Studio. The hosting service is the iHostStudio Upload Publisher is used with our very own easiest way to save your iHostStudio website hosting. This hosting is the easiest to use site to the internet. anywhere. You only need to know your name and website 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 ecommerce 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 Studios 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 Web Studio 5.0 User Manual 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 companys 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 companys 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.
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.
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 Chapter 23: Uploading Your Website to the Internet 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.
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.
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 Web Studio 5.0 User Manual 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 Chapter 23: Uploading Your Website to the Internet 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 websites 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 Web Studio 5.0 User Manual If the information is correct, click OK to upload. Your directory on the hosting server containing your websites 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 sites files and directories. Click Done when you are finished. 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.
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 Web Studio 5.0 User Manual Now click Next. Look at the title of the window and fill in the information. Identification Enter your web space accounts 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 Click the Next or Finish button. 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. Click the Next or Finish button. 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 Chapter 23: Uploading Your Website to the Internet 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 files of your site separately so that you can run your site from your computer for presentations, put it on a CD, etc. The Save Website Files to Disk command in the Web Studio Button allows you to do this. Click on Web Studio Button > Publish > Save 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. Important! When you Save Website Files to Disk it is not the same thing as saving your Project files. Do not use this Command to save your Project. Use the Save or Save Project Commands to save your Project.
309 Chapter 24: Desktop Studio
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 Letterhead and Envelopes Flyers Business Cards HTML e-mails Logo design Marketing Materials 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 Web Studio 5.0 User Manual 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.
Click OK when you are finished and the Enter Your Websites 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 Web Studio 5.0 User Manual 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
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 programs 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 Web Studio 5.0 User Manual Print from the workspace Set the page size and design the page. Click on Web Studio Button>Print. This opens the Print Preview window. Use the tools in the window to set up the page, turn off the headers/footers and view the page before you print. Click the Print icon. When you want to print a page or graphic, turn off the Resample Graphics when resizing option in the Web Studio Preferences dialog. Go to Web Studio Button > Options > Web Studio 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 rightclick 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 Chapter 24: Desktop Studio 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 Web Studio 5.0 User Manual 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
Appendix B: Supported Files

HTML Type Generated
HTML 4.01 Transitional HTML 4.0 Frameset
Files Downloaded from Websites

Any file; no limits
HTML and Scripting Files Imported and Exported

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

Flash (.swf), (.flv) (Best for all Videos) Windows Media Video(.wmv) Audio Video Interleave (.avi) MPEG video (.mpe), (.mpg) Real Media (.rm), (.ram) MS NetShow Player (.asf), (.asx) Quicktime Movie (.moov). (.mov). (.movie). (.qt)
Sound & Music Files Imported

MP4 File (.mp4) (Best for sound &music) MIDI (.mid), (.midi) Windows Media Player (.wma) Real Player (.ram), (.rm), (.ra) Wave (.wav) AIFF (.aif), (.aiff), (.aifc) Sun Audio (.au) MPEG-1 (.m1a) MP2 (.mp2) Windows Media Playlist (.w3u)
319 Appendix B: Supported Files
Graphics Files Imported

Graphic Interchange Format (.gif) JPEG (.jpg) Windows Bitmaps (.bmp;.dib) Photoshop (.psd) PCX (.pcx;.dcx) Kodak Photo CD (.pcd;.fpx) Portable Network Graphics (.png) Encapsulated Postscript or EPS (.eps) Lead Tools (.cmp) Tagged Image File Format or TIFF (.tif) Icons & Cursors (.ico;.cur) DICOM (.dic) Windows Metafile (.wmf) Truevision TARGA (.tga) SUN Raster (.ras) WordPerfect (.wpg) Macintosh PICT (.pct)
Text Files Imported

Text (.txt) Rich Text Format (.rtf) Microsoft Word (.doc and .docx) HTML (.html) (.htm) HTML Document (.htx, .otm) Text With Layout (.ans) MS-DOS Text with Layout (.asc) Files from the MS Office Converter Pack: Power Point Excel Works Word (includes Word for Mac) Lotus Ami Pro Word Perfect Word Star
Appendix C: Ribbon Commands
Web Studio Button

New Project Open Open Project Open Template Close Project Save Project Save Project Save Project and a Backup Save Project As Web Studio Project Backup of the Project Publish Upload website files to your hosting Trial Host your website with iHostStudio Save Website files to disk Open an iHost Hosting Account Use iHostStudio Use Another Host Save Page As Save Page as a Template Save Page as a HTML Email Save Page as a Graphic Print
321 Appendix C: Ribbon Commands Home Tab

Undo Group Undo Redo Project Group New Project Open Close Save Save As Print Exit Edit Group Cut Copy Copy Background Paste Paste in Place Paste Background Clear Select All Insert Group New Page Text File Picture Flash Links Group Page Mail File Link Adobe PDF Microsoft Word Microsoft PowerPoint Other Files Remove Preview Group Page Links Website Use WebStudio Browser Use Default Browser Upload Group Website Trial host Website Help Group Web Studio.com Web Studio TV About Web Studio Documentation Web Studio Wiki Getting Started
Draw Tab
Undo Group Undo Redo Shapes Group Shapes Shapes Using Fill Colors Shapes Using Graduated Fill Colors Group Fill Color Border Color Graduated Fills Start Color End Color Graduated Fill Dialog Borders Group Styles Width
Insert Tab
Undo Group Undo Redo Pages Group Insert Page Illustrations Group Picture Picture from File Protected Graphic from File Background Graphic Background from File Remove Background Text Group New Text Object Text From File Last Changed Date Special Text Symbols Media Group Flash Video Sound Google Group YouTube Google Maps Links Group Page Link Mail Link File Links Adobe PDF Microsoft Word Microsoft Excel MicrosoftPowerPoint Other Files Other Link Remove Link Footer Links Link Colors Link Color Visited Link Hover Color
View Tab
Show/Hide Group Galleries Small Galleries Page List Caption Bar Highlight Objects Group Dont Hilite Objects With Links Objects That Overlap Objects With Unsafe Fonts Objects With Added HTML Objects With Notes Browse Internet Group Browse the Internet Windows Group Windows
323 Appendix C: Ribbon Commands
Create Tab
Undo Group Undo Redo Menu Maker Menu Maker Studio Design Selected Menu Object Properties Shopping Cart Group PayPal Cart Add to Cart Buy Now Donate Gift Certificate Subscribe iHostStudio Cart Photos Group Insert Photo Insert Photo from File Insert Protected Photo from File Special Effects Change Colors Thumbnails Photo Edges Photo Textures Opacity Group Graphic Opacity Group Group Un-Group Merge Take Apart
Animations Group Ani-maker Rollovers Graphic Rollovers Text Effects Group Text FX Slide Shows Group Slide Shows Flash SmugMug Flickr Flickr Badge Picasa
Html Tab
Add HTML Group HTML Object HTML File Site-Wide Meta Tags Group Author Description Keywords Page Meta Tags Group Page Title Description Keywords User Meta Tags Insert Page HTML Group Before All Tags Inside HEAD Between HEAD and BODY Inside BODY tag Start of BODY Insert Object HTML Group Before All Tags Inside HEAD Before Object Inside Object Inside DIV After Object
324 Web Studio 5.0 User Manual Text Tab

Undo Group Undo Redo Clipboard Group Cut Copy Copy Background Paste Paste in Place Paste Background Clear Select All Insert Group New Text Object Text From File Font Group Font Style Font Size Bold Italic Underline Text Color Text Background Color Transparent Text Background Paragraph Group Left Justify Center Justify Right Justify Full Justify Increase Heading Style Increase Indent Decrease Indentation First Line Indent Paragraph Indent Editing Group Spelling Replace Links Group Page Link Mail Link File Links Adobe PDF Word Excel PowerPoint Other Files Other Link Remove Link Colors Link Color Visited Link Hover Color Insert Special Group Symbols Changed Date
325 Appendix C: Ribbon Commands Forms Tab

Create Form Group Group Form Group Form Properties Hidden Fields Tab Order Text Items Group Text Field Text Field Properties Text Box Text Box Properties Password Box Password Box Properties Check Box Group Check Box Check Box Properties Radio Buttons Group Radio Button Radio Button Properties Group Radio Button Radio Button Properties Buttons Group Submit Button Submit Button Properties Reset Button Reset Button Properties Button Button Properties File Upload Group File Upload File Upload Properties Lists and Menus Group Menu Menu Items Menu Properties List List Properties
Page Layout Tab

Undo Group Undo Redo Site Setup Group Margins Show Guides Page Size Grid Group Show Grid Grid Settings Align Group Left Right Tops Bottoms Center Group Horizontal Vertical To Page Space Group Horizontally Vertically Bring To Group Front Back Forward Backward Make Equal Group Size Width Height
326 Web Studio 5.0 User Manual Page Tab

Undo Group Undo Redo Page Group New Duplicate Rename Delete Home page Set Master Page Background Group Color Graphic Remove Background Preview Group Preview Page Use WebStudio Browser Use Default Browser Preview Links Use WebStudio Browser Use Default Browser Upload Group Upload Page Website Trial Host Page Choose Hosting iHostStudio Account Manager Use iHostStudio Use Another Host Templates Group Open Save As Save Page as a Template Save Page as HTML EMail Save Page as a Graphic Add to Gallery Include Page In Group Footer Links Google Site Map Google Change Frequency Google Site Map Priority
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
ctrl + n ctrl + o ctrl + w ctrl + s ctrl + p ctrl + q Opens a new web site Opens an existing web site Closes the active (or currently viewed) window Saves the web site to your hard drive Prints the web page Quits or exits Web Studio
Edit
ctrl + z ctrl + y ctrl + c ctrl + x ctrl + b ctrl + v ctrl + alt + v Delete ctrl + a ctrl + click shift + click Undo last command Redo Copy Cuts Bold Paste Paste in Place Removes object Select All Creates a duplicate of an object directly underneath the object. Select multiple objects
Graphics
c + click on selection handle ctrl + click on selection handle ctrl + click on graphic shift + click on corner selection handle Cropping: hold the c key,click and drag the handle to crop the graphic.
Website
ctrl + doubleclick on a link Launches an internet browser and goes to the link that was double-clicked on. Useful for testing links
Performs a resample or high quality interpolation on the graphic that was resized. Creates a duplicate of an object directly underneath the object. Allows the object to be resized in two directions at once
Text
ctrl + b ctrl + i ctrl + u ctrl + d ctrl + e ctrl + f ctrl + down arrow ctrl + up arrow Home Turns Bold on and off Turns Italic on and off Underlines or removes underline Brings up the Font dialog if text or a text object is selected Opens the Edit HTML Source dialog Opens the Search and Replace dialog Moves the text cursor to the next paragraph Moves the text cursor to the previous paragraph Moves the text cursor to the start of the current line of text Moves the text cursor to the end of the current line of text Selects text to the left of the cursor
Objects
alt + down arrow alt + left arrow alt + right arrow alt + up arrow alt + = alt + [ alt + ] e + click on 1st selected object arrow keys Aligns bottoms of selected objects Aligns left sides of selected objects Aligns right sides of selected objects Aligns tops of selected objects Moves objects forwards Moves object to the back Moves object to the front Makes all objects equal to size of first object selected Moves selected objects up, down, left, right one pixel at a time Holding an arrow key moves objects continuously Moves selected objects up, down, left, right 10 pixels at a time Pushes the objects under a selected object down the page. Pushes 10 pixels at a time. Pulls the objects under a selected object up the page. Pulls 10 pixels at a time Spaces objects so that they touch with no space in between them. Spaces objects so that there is only one pixel of space between them Aligns selected objects left
End shift + left arrow shift + right arrow ctrl + end ctrl + home ctrl + space ctrl + click on selected text object
arrow keys arrow keys + shift key p p + shift key u u + shift key ctrl + space commands
Selects text to the right of the cursor Moves the text cursor to the end of the text in the object Moves the text cursor to the beginning of the text object Changes selected text to plain Creates a clone of object beneath the original. Drag the new object from beneath after clicking and before releasing the mouse button
ctrl + shift + space commands l + click on selected objects r + click on selected objects f + click on an object b + click on an object
Aligns selected objects right
Brings object to the front Sends object to the back
329 Index
Appendix E: Hot Keys

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

Web Studio V5

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 V5

Uploaded by

Copyright:

Available Formats

Web Studio 5.

ii Web Studio 5.0 User Manual

Chapter 1: Introduction ___________________________________ 1

Registering Web Studio ____________________________________________2

Reinstalling Web Studio ___________________________________________2

Getting Help with Web Studio ______________________________________4

Chapter 2: The Web Studio Workspace _______________________ 7

ii Web Studio 5.0 User Manual

Page List ______________________________________________________10 Galleries _______________________________________________________10 Customizing the Workspace _______________________________________11

Changing the Look of Web Studio __________________________________12 Using Shortcuts _________________________________________________12

Using Web Studio TV to view Video Tutorials ________________________14

Chapter 3: Quick Start Tutorial ____________________________ 17

iii Table of Contents Save the Project ___________________________________________________________ 21

Step 2. Make the Banner and Basic Page Design _______________________21

Step 3. Add Banner Text __________________________________________24

Step 6. Add Photos to the Home Page ________________________________27

Step 7. Add Shapes and Text to the Home Page ________________________28

Step 8. Add Buttons ______________________________________________31

Step 9. Complete the Contact Page __________________________________32

Step 12. Preview the Website ______________________________________36

Chapter 4: Website Basics ________________________________ 37

Steps to Getting Your Site on the Web _______________________________38

Web Studio Preferences___________________________________________47

Previewing Your Website Project ___________________________________48

Printing and Print Preview _________________________________________51

Chapter 5: Galleries _____________________________________ 53

Viewing Gallery Contents _________________________________________54 Using Sub-Galleries______________________________________________55

Using Gallery Content ____________________________________________55

Reorganizing Gallery Content ______________________________________56

Using the Gallery Menus __________________________________________56

Adding Content to Galleries _______________________________________57 Adding Graphic Objects to a Gallery ________________________________57

Add Graphic Files to a Gallery _____________________________________58

Add a Page to the Templates Gallery ________________________________59

Add Links to the Links Gallery _____________________________________59

Using your Content in Other Programs _______________________________60

Chapter 6: The Page List _________________________________ 61

Naming Pages __________________________________________________65 Naming the Home Page ___________________________________________66

Working with a Master Page _______________________________________68

Working with the Google Site Map __________________________________70

Change the Page Order in the Page List ______________________________73

Chapter 7: Working with Pages ____________________________ 75

Page Margins ___________________________________________________77

Viewing Pages Top and Bottom (Horizontal Tab Group) _________________80

The Page Properties Dialog ________________________________________83

Chapter 8: Backgrounds __________________________________ 87

Copying and Pasting Backgrounds __________________________________91

Changing and Removing Backgrounds _______________________________91

Backgrounds and the Page Properties Dialog __________________________92

Chapter 9: Working with Objects ___________________________ 93

Selecting Objects ________________________________________________95

Moving Objects _________________________________________________96

Editing an Objects Contents ______________________________________100 Aligning Objects _______________________________________________100

Using the Grid to Align Objects ___________________________________100

Centering Objects ______________________________________________102

Stacking Objects _______________________________________________103

Spacing Objects ________________________________________________103

Resizing Objects _______________________________________________104

Resizing Objects to Each Other ____________________________________105

Resampling Graphics after Resizing ________________________________106

Cropping Objects _______________________________________________107

Duplicating Objects _____________________________________________108

Grouping Objects _______________________________________________109

Rotating Objects _______________________________________________110

Highlighting Objects ____________________________________________110

Page List __________________________10 Galleries _10 Customizing the Workspace _____________11

Changing the Look of Web Studio 12 Using Shortcuts _______________12

Viewing Gallery Contents _54 Using Sub-Galleries______55

Adding Content to Galleries _______57 Adding Graphic Objects to a Gallery 57

Naming Pages ________65 Naming the Home Page _66

Editing an Objects Contents 100 Aligning Objects _________100

Choosing Fonts 120 Web Safe Fonts 121

Using Photos to Make Rollover Buttons _141 Creating Thumbnails ________________142

Setting the Opacity _158 Editing Shapes _____159

Editing Buttons ________168 Adding Links to Buttons _168

Previewing Links _____________193 Highlighting Objects With Links 194

Resizing Flash Animations _____201 Inserting Videos Through Links _201

Working with a Template __221 Saving Pages as Templates _222