user guide · © 2001-2006 voloper creations inc. ii site content editor v6.0 user guide this...

U S E R G U I D E

T H E N E X T S T E P F O RWA R D I N W E B C O N T E N T E D I T I N G

© 2001-2006 Voloper Creations Inc. ii

Site Content Editor v6.0 User Guide

This document was produced by Voloper Creations Inc.

© 2000 – 2006 Voloper Creations Inc., All Rights Reserved

SCE™ (SCE) is a trademark of Voloper Creations Inc. Other brands or product names are trademarks or registered trademarks of their respective holders.

The information contained herein is the property of Voloper Creations Inc. Except as specifically authorized in writing by Voloper Creations Inc., the holder of this document shall: i) keep all information contained herein confidential, and ii) protect the information, in whole or in part, from disclosure and dissemination to all third parties except where otherwise authorized.

This document, as well as the software described in it, is furnished under licence and may only be used or copied in accordance with the terms of such licence. The information in this document is provided for informational purposes only, is subject to change without notice, and should not be construed as a commitment by Voloper Creations Inc.

Voloper Creations Inc., is an authorized supplier of products and services to the global WSI Internet Consulting and Education e-Marketplace.

© 2001-2006 Voloper Creations Inc. Site Content Editor v6.0 User Guideiii

Welcome to Site Content Editor (SCE) 6.0

Thank you for choosing the Site Content Editor!The Site Content Editor (SCE) is a fully extensible web-authoring system that allows you to create high-quality and stunning websites to provide information about your products and services online. It is easy to learn and use, and it offers one of the most streamlined project-building solutions available on the market today.

The SCE has everything you need to get your business up and running online - you can use the SCE to create, edit, validate, preview and publish web pages and scripts for your website project, providing you with the opportunity to create and maintain an online presence that builds your brand and your online identity.

The SCE allows you to work within two distinct modes, allowing for easy validation and previews, as well as full-editing capabilities.

Design ViewDesign View allows you to create and manage your Web page projects within a document-processing environment, requiring no programming knowledge. The familiar interface allows you to build and deploy your projects in no time!

HTML ViewFor more experienced users, HTML View provides you with valid mark-up fully compliant with HTML specifications. You also can go back and forth between Design View and HTML View to create remarkable Web sites in a snap!

Not only is the SCE easy to learn and use, it is also packed with the following useful features:

Frames creation/editing

Tables creation/editing

HTML lists creation/editing

Image maps creation/editing

Font definitions

And More....

The SCE has been designed to offer a configurable, feature-rich solution for various audiences, designed to be easy to use and geared towards achieving an enhanced site experience.

Use the SCE to its full potential with the different modules available within our suite of products:

•

•

•

•

•

•

•

•

Spell Checker

Extended Seach and Replace

Integrated Viewer

Images Insertion/editing

Hypertext link insertion/editing

•

•

•

•

•

Complete Solutions Practical Tools & Modules Market Research Tools Marketing ToolsOpen Learning Environment Dynamic Calendar Quick Poll e-MarketerOnline Business Solution lite Event Scheduler Survey Manager lite & pro Web DirectorOnline Business Solution pro Document Manager Picture Gallery Postcard MailerOnline Business Solution Basic 7 FAQ Manager Scrolling MarqueesOnline Business Solution Basic Virtual Catalogue e-commerce Image Scrollers

Unlimited Online Career Agency Voloper Global Merchant Banner SystemNews Manager Shopping CartOnline Career Manager Download-on Demand

© 2001-2006 Voloper Creations Inc. iv


Welcome to Site Content Editor (SCE) 6.0

We Have Removed the Barriers of Content Editors

SCE anytime, anywhere! The SCE can be installed on a new website or it can be added to any existing website regardless of the site’s programming language or website hosting environment! (some additional programming charge might apply depending on the site language.) Can any other Web content editing tool do that?

Licensing Issue resolved!The SCE licence is URL-controll ed. Licences have always been a problem with ”off-the-shelf” Web-editing tools because often FTP access cannot be granted due to the licensing policies that restrict the free distribution of source code. Because the SCE licence is URL-controlled, no such problems arise.

Automatic Upgrades are freeAny SCE upgrades are automatically distributed to all licensed users at no additional cost. In contrast, upgrades to ”off-the-shelf” JavaScript and/orASP based Web-editing tools require chargeable programming time, as each Web site must be updated manually. This is a common problem with sites which are supported by Web content editors embedded in the site’s source code. Only a small percentage of them are ever upgraded with new functionality, which might be offered over time with these tools, due to high cost.

It’s more Efficienct with greater SecurityThe execution time is much faster because our SCE code is compiled. Unlike other programming languages which are interpreted and embedded in the source files, the compiled code provides a smaller file size, increased download efficiency, and greater security.

You don’t have to do anything to always have the Latest and Greatest Features! We can easily upgrade the SCE : our “in-house developed” tool. For your benefit, you will always have the “latest and greatest” features and will never miss out on any important, valuable, and new additions. All of these are distributed to you at no additional cost. In our experience, the best support is most likely to come from tool creators, not integrators.

Note: Our new Site Content Editor supports all leading Internet Browsers and Operating System platforms. However, due to the change in SCE technology, there will be no standard free upgrades from SCE version 5.5 to version 6.0. If requested, this upgade will be performed manually at an additional nomincal cost. Only after its intial release as version 6.0 will all consecutive SCE upgrades will again be distributed to all users automatically and at no cost to them as it was previously.

© 2001-2006 Voloper Creations Inc. Site Content Editor v6.0 User Guidev

Site Content Editor 6.0 : New and Improved Features

Accessibility: Version 6.0 is Fully WCAG and WAI CompliantWe are concentrating our major efforts on Web Accessibility, to allow those with disabilities to effectively receive information from websites. Our Web Accessibility Initiative involves converting the SCE front-end interface to be fully compliant with priority Level 1 and 2 of W3C Web Accessibility1 Guidelines. SCE 6.0 has been fully rearchitected to ensure compliance with these guidelines. You can download our Accessibility White Paper from our Client Intranet or ask your Internet Consultant for a copy.

Completely compatible with all leading Web BrowsersSCE 6.0 has now been improved to be accessible with all major Web browsers. As of this printing, SCE 6.0 is fully compatible with Internet Explorer, Opera, Safari, and Mozilla Firefox. All users need is a copy of the Java Runtime Environment (JRE) 5.0 (available at www.java.com) downloaded to their local computer, and the SCE is up and running!

Multi-language supportWe have standardized SCE 6.0 to display its menu names and toolbars in three different languages - the SCE automatically loads in English, French, or Spanish, based on the language of your computer’s operating system.

Streamlined Menus and Sub-menusModule navigation has never been easier within the SCE - menus and sub-menus are uncomplicated and straight-forward, creating a smoother site-building process, with a very easy learning curve.

Unlimited Style and Formatting OptionsThe SCE now incorporates a new Java-based color palette, allowing you to choose your project’s element colors by its hexadecimal, RGB or HSB values - it even has provided you with the full spectrum of Web-safe colors for maximum readability and rendering of all your Website projects.

Enhanced Search CapabilitiesThe SCE’s Find function has been expanded to include Find and Replace capabilities, providing you with more control over your content and other text elements. .

Fully Compliant HTML Viewer Version 6.0 provides you with a fully-compliant HTML viewer, adhering to the specifications of the HTML 4.01 Standards released in 2001. HTML code is displayed in an indented layout and color-coded, for easier reading and revisions.

New Spellchecker FunctionThe SCE’s new spellchecker function does all the spell checking for you! Simply click the Spellcheck command from the tools menu and the built-in Spellcheck wizard checks your project for spelling accuracy and consistency in four different languages. SCE version 6.0 also has a background spellchecker function that runs in the background, marking spelling inconsistencies within your text content as you work.

Site Content Editor: What’s New in Version 6.0

1Content and images you may add within Site Content Editor 6.0 may or may not be compliant to Web Content Accessibility Guidelines (WCAG) 2.0. To ensure compliance, please refer to Checklist of Checkpoints for WCAG 2.0 at http://www.w3.org/TR/WCAG20/. We will be glad to provide you assistance on any Web accessibility compliance and validation issues you may have. Please contact us for details and pricing information.

© 2002-2006 Voloper Creations Inc. Site Content Editor v6.0 User Guidevii

Site Content Editor: Table of Contents

Section One: The SCE Front-End Interface 3

Section Two: SCE Basics 5Accessing the SCE 5Adding a New Page 5Deleting a Page 5Saving Page Contents 6Opening a Web Page from your Local Computer 6The Site Content Editor Workspace 7The SCE Menu Bar 7The SCE Button Toolbar 7

Section Three: Using Site Content Editor Tools 9Using the SCE Button Toolbars 9Cut, Copy and Paste 9Redo and Undo 9Bold, Italics and Underline 10Text Alignment 10Ordered and Unordered Lists 11Increase and Decrease Indents 11Font, Color and Background Color 12Find 15Insert and Remove Hyperlinks 16Insert Break, Insert Horizontal Rule, and Insert Symbol 18Tables 19Insert Image, Object, Thumbnail and Rollover 21Paragraph Marks 25Sub-script, Superscript and Strikethrough 25Spellcheck 25

Section Four: Working with Style Sheets 27Creating a New Style 27Specifying Font Styles 27Specifying Background Styles 28Specifying Border Styles 28Specifying Box Styles 29Specifying List Styles 29Specifying Positioning Styles 30Editing Styles 30Deleting a Style 31Uploading a Style 31Applying a Style 31

Talk to Us 33

Appendix A: The SCE Toolbar Page 37

Appendix B: Frequently Asked Questions 40

Appendix C: Glossary 43

Index 45

© 2001-2006 Voloper Creations Inc. Site Content Editor v6.0 User Guide3

Section One: The SCE Front-End Interface

The Site Content Editor v6.0 is a universal authoring tool providing the best possible HTML Web content-editing solution in a truly WYSIWYG (What You See Is What You Get) fashion. It does not require technical expertise, HTML knowledge, and the use of FTP or a database.

SCE 6.0 is fast and robust. It offers a lot of powerful features and context-sensitive buttons. Its intuitive and easy to use interface can simplify the authoring process through site management, design view editing, tag view scripting, CSS editing, DHTML support, asset storage, to template creation.

The SCE Design View feels a lot like working with Microsoft® Word. If you are familiar with a document processing interface, you will feel right at home. On the other hand, the SCE’s HTML View can be used for inserting scripts and tags, and is best suited for experienced authors.

The SCE has a lot of capabilities. Beside formatting and styling content, SCE offers you the flexibility to write scripts and you can also do the following:

• create hyperlinks, image/file downloads

• extend commands with a right-mouse click

• open and save Web page content files on your local computer

• retain the formatting of Microsoft® Word documents

• support special characters

• support Cascading Styles Sheets (CSS) editing

• support Dynamic HTML (DHTML) scripting

Create your websites easily and effortlessly with the SCE’s easy to use Administration Panel, which gives you access to the module’s back-end interface (covered in Section Two, SCE Basics).

Figure 1-1: The Site Content Editor Front-end Interface


SCE BasicsThe SCE is automatically loaded for you when you first access the Back-end Administration Panel if you are using Internet Explorer as your Web browser. If you are using a different browser and the SCE does not load automatically, please visit http://www.java.com to download a copy of the Java Runtime Environement (JRE). The SCE loads based on the language of your operating systems. If your Operating System is in French, for example, all SCE menus and toolbars will be displayed in French as well. The default SCE language is English.

The SCE currently supports the following languages: English, Spanish and French. Please contact us if you would like the SCE to be displayed in a different language of your choice. (Please note that additional charges may apply).

Accessing the SCEThe Site Content Editor (SCE) is an integral element in each of our product modules. Once you have successfully logged in to a product module’s back-end interface (Administration Panel), you can access the SCE through the Pages Menu (Figure 2-1):

Select the Pages Menu link from the left-hand navigation pane of the Administration Panel. The Pages List will be displayed.

Click on a page name from the list - the SCE for that page will be displayed (Figure 2-2).

Adding a New PageSelect the Pages Menu link from the left-hand navigation pane of the Administration Panel. The Pages List will be displayed.

Click the Add New Page link. A blank SCE page will be displayed.

Enter a name for the new Web page in the Page Name field.

Enter the content for the page in the description field. (Please see Using SCE Tools for more information on adding different types of content).

Click the Add button. The message Page is Added will be displayed.

Deleting a PageSelect the Pages Menu link from the left-hand navigation pane of the Administration Panel. The Pages List will be displayed.

Find the page name of the Web page you would like to delete.

Click the Delete icon assigned to it. A confirmation window will appear. Click the OK button. The selected page will be deleted from the list.

1)

2)

1)

2)

3)

4)

5)

1)

2)

3)

Figure 2-1: The Pages Menu

Figure 2-2: The Site Content Editor

Section Two: SCE Basics

6Site Content Editor v6.0 User Guide


© 2002-2006 Voloper Creations Inc. 647 201 1934

Saving Page ContentsIt is a good idea to save your Web pages as you work. All files are saved automatically on the Web server when you update them. It is also a good idea to save a back-up copy of your Web page on your local computer. Once you have a few HTML Web pages created for your Web site project, you can organize them into folders to make it easy to maintain your files.

Open the SCE of the Web page you would like to save.

On the File Menu, click Save (or enter CTRL+ S). The Save Dialog Box will be displayed. (Figure 2-3).

In the File Name box, enter a new name for the file.

Click the Save button. The file will be saved in your local computer as an HTML file, e.g. hompepage.html.

Opening a Web Page from your Local ComputerOpen a new SCE page from the Pages Menu.

On the File Menu, click Open (or enter CTRL+ O). The Open Dialog Box will be displayed. (Figure 2-4).

Browse to the folder where the HTML file is located. Select the file and click the Open button. The Web page will be loaded automatically within the SCE.

1)

2)

3)

4)

1)

2)

3)

Figure 2-3: The Save Dialog Box

Note: Opening an HTML file within an existing SCE page loads the HTML file and overwrites the existing page’s contents.

Figure 2-4: The Open Dialog Box



The Site Content Editor WorkspaceThe SCE Workspace (Figure 2-5) is intuitive and easy to use. Working within the SCE allows you to view your Web page content in two ways:

Design View

Displays a close approximation of what the finished Web page will look like in a Web browser.

Allows you to add, edit and manage content through a Microsoft Word-like interface, simplifying the Web authoring process.

Click the Design tab on the lower-left corner of the SCE window to access the SCE Design View (Figure 2-7, #1).

HTML View

Displays HTML code. HTML stands for Hypertext Markup Language, the authoring software language used to build Web pages.

Allows you to add and HTML and Javascript manually.

Click the HTML tab on the lower-left corner of the SCE window to access the SCE HTML View (Figure 2-7, #1).

The SCE Menu Bar

The SCE Menu Bar gives you access to the SCE’s eight main menus: File, Edit, View, Insert, Format, Tool, Table, and Help (Figure 2-7,#2). Each Main Menu displays a list of Menu Commands (Figure 2-7,#4).

Menu Commands allow you to perform specific tasks, such as opening a file or inserting an image. Menu commands are automatically enabled or disabled (grayed out), depending on the SCE View you have chosen (Design View or HTML View), as well as the type of page element you are working with. Some menu commands have a designated shortcut keys assigned to them, e.g., CTRL+S for the Save command. Use these shortcuts by pressing the Ctrl key in conjunction with a letter key.

The SCE Button Toolbar

The SCE Button Toolbar (Figure 2-7,#3) gives you easy access to the SCE’s button commands for common tasks (Figure 2-7,#5). Each button contains an icon depicting its function. Clicking a button executes a command or performs a certain function, such as inserting a table or creating a numbered list.

•

•Figure 2-5: The SCE Workspace - Design View

Figure 2-6: The SCE Workspace - HTML View

Figure 2-7: The SCE Workspace


Section Three: Using Site Content Editor Tools

Using the SCE Button ToolbarsThe SCE Button Toolbar contains toolbar icons for frequently used functions. These icons are similar to the button icons found in word processing applications such as Microsoft Word®.

Cut, Copy and PasteUse the Cut, Copy and Paste icons to manipulate text, images, and objects within the SCE (Figure 3-1). These icons are available in both Design and HTML Views.

Figure 3-1: The SCE Workspace - Cut, Copy & Paste

Figure 3-2: The SCE Workspace - Redo & Undo

Cut

Use the Cut icon to temporarily remove content from the SCE and store it in the SCE clipboard. This command can also be accessed through the Edit Menu or by using the shortcut CTRL + X.

Copy Use the Copy icon to duplicate highlighted content within the SCE. The duplicate copy is stored in the SCE clipboard. This command can also be accessed through the Edit Menu or by using the shortcut CTRL + C.

Paste Use the Paste icon to insert content (previously copied or cut to the clipboard) into the SCE page. This command can also be accessed through the Edit Menu or by using the shortcut CTRL + V.

Redo and UndoUse the Redo and Undo icons to correct your mistakes or to try out different aspects of the SCE without permanent consequences (Figure 3-2). These commands are available in both Design and HTML Views.

Undo Use the Undo icon to erase the last change done within the SCE. Undo reverses your last command and is often used with the Redo command. Undo can also be accessed through the Edit Menu or by using the shortcut CTRL + Z.

Redo

Use the Redo icon to reverse the Undo command, This command can also be accessed through the Edit Menu or by using the shortcut CTRL + Y.




Figure 3-3: The SCE Workspace - Bold, Italics, Underline,

Figure 3-4: The SCE Workspace - Alignment

Text AlignmentUse the Alignment icons (Figure 3-4) to line up text to create different effects. These commands are available in both Design and HTML Views.

Align Left

Use the Align Left icon to give a block of text a stright left edge. Align Left can also be accessed through the Format Menu or by using the shortcut CTRL + L..

Align Center

Use the Align Center icon to give a block of text a stright center edge. This command can also be accessed through the Format Menu or by using the shortcut CTRL + E.

Align Right

Use the Align Right icon to give a block of text a stright right edge. Align Right can also be accessed through the Format Menu or by using the shortcut CTRL + R..

Use the SCE tools to give your website projects the best accessibility and manageability features. Technically experienced Web authors should take advantage of the Style Manager function to create custom styles for their Web pages.

Bold, Italics and UnderlineUse the Bold, Italics, and Underline icons to create different text effects within the SCE (Figure 3-3). These icons are not available in HTML View.

Bold

Use the Bold icon to make text characters appear darker and heavier, i.e., Bold. Click the Bold icon to toggle the effect on highlighted text. This command can also be accessed through the Format Menu or by using the shortcut CTRL + B.

Italics Use the Italics icon to create emphasis by slanting making text characters slant forward, i.e, Italics. Click the Italics icon to toggle the effect on highlighted text. This command can also be accessed through the Format Menu or by using the shortcut CTRL + I.

Under- Use the Underline icon to create emphasis by placing a horizontal line under a portion of text, i.e, Underline. Click the Underline icon to toggle the effect on highlighted text. This command can also be accessed through the Format Menu or by using the shortcut CTRL + U. (The <U> tag is deprecated in HTML 4 specifications and ideally should not be used.)

line


Figure 3-5: The SCE Workspace - Lists

Figure 3-6: The SCE Workspace - Indents


Ordered and Unordered ListsUse the List icons (Figure 3-5) to add bulleted and numbered texts within your Web page to achieve a categorized look. These commands are not available in HTML View.

Unor- Use the Unordered List icon to create a bulleted list within your Web page. This command can also be accessed through the Format Menu by selecting the Unordered List menu command.

ListUse the Ordered List icon to created a numbered list within your Web page. This command can also be accessed through the Format Menu by selecting the Ordered List menu command.

deredList

Ordered

Increase and Decrease IndentsUse the Indent icons (Figure 3-6) to add white text within paragraphs and to create emphasis on certain texts. These commands are not available in HTML View.

Use the Increase Indent icon to shift text to the right of a paragraph and to increase the paragraph indent level. This command can also be accessed through the Format Menu by selecting the Increase Indent menu command.

Use the Decrease Indent icon to shift text to the left of a paragraph and to decrease the paragraph indent level. This command can also be accessed through the Format Menu by selecting the Decrease Indent menu command.

IndentIncrease

IndentDecrease

Align Justify

Use the Align Justify icon to give a block of text parallel left and right edges. Align Justify can also be accessed through the Format Menu or by using the shortcut CTRL + J.




Figure 3-7: The SCE Workspace - Font, Text Color, & Background Color

Font

Use the Font icon to change text size and style.

Click the Font icon within the SCE toolbar. This opens the Font dialog box (Figure 3-9).

Select the font name by highlighting an option from the Font List.

Select the font size by entering a numeric value in the Size field or by highlighting an option from the Size List.

Select the font unit of measurement (choose from pixels, points, ems, or percentages) by entering a unit abbreviation in the Unit field or by highlighting an option from the Unit List. The Preview Text pane displays how the text will be displayed on the Web page. (Pixel units are not accessible and cannot be resized in Internet Explorer).

Click the OK button once you have selected your desired text effects. Click the Cancel button to return to the main SCE workspace.

This command can also be accessed through the Format Menu by selecting the Fontmenu command.

1)

2)

3)

4)

5)

Font, Color and Background ColorUse the Font, Color and Background Color icons to create different text and graphic effects within the SCE (Figure 3-7). These icons are not available in HTML View.

Figure 3-9: The SCE Workspace - Font Dialog Box



TextColor

Use the Text Color icon to change text color.

Click the Text Color icon within the SCE toolbar. This opens the Text Color dialog box - Swatches tab (Figure 3-10).

Click on a color swatch within the Color Table. A preliminary view of the colored text will be displayed in the Preview section.

Alternatively, you can enter a color’s hexa-decimal equivalent (a set of six numbers or letters that make a color) in the Value field.

Alternatively, you can also choose a text color based on Hue, Saturation, or Brightness by clicking the HSB tab (Figure 3-11).

You can do one of two things:

Enter a numeric value between 0 to 359 in the H (Hue) field and enter a numeric value between 0 to 100 in the S (Saturation) and in the B (Brightness) field.

or

Click on any area within the Color Map.

Alternatively, you can also choose a text color based on a color’s RGB (Red, Green and Blue) values by opening the RGB tab (Figure 3-12).

You can do one of two things:

Move the RGB fields’ sliders to increase or decrease the color’s RGB values.

or

Enter the color’s RGB values in their corresponding fields.

Click the OK button once you have selected your desired text color. Click the Cancel button to return to the main SCE workspace. Click the Reset button to reset the Color Map and the color fields to their default values.

This command can also be accessed through the Format Menu by selecting the Text Color menu command.

1)

2)

3)

4)

5)

Figure 3-10: The Text Color Dialog Box - Swatches Tab

Figure 3-11: The Text Color Dialog Box - HSB Tab

Figure 3-12: The Text Color Dialog Box - RGB Tab



Back-

Color

Use the Background Color icon to change the text background color.

Click the Background Color icon within the SCE toolbar. This opens the Background Color dialog box - Swatches tab (Figure 3-13).

Click on a color swatch within the Color Table. A preliminary view of the colored background will be displayed in the Preview section.

Alternatively, you can enter a color’s hexadecimal equivalent (a set of six numbers or letters that make a color) in the Value field.

Alternatively, you can also choose abackground color based on Hue, Saturation, or Brightness by clicking the HSB tab (Figure 3-14). You can do one of two things:

Enter a numeric value between 0 to 359 in the H (Hue) field and enter a numeric value between 0 to 100 in the S (Saturation) and in the B (Brightness) field.

or

Click on any area within the Color Map.

Alternatively, you can also choose a background color based on a color’s RGB (Red, Green and Blue) values by opening the RGB tab. (Figure 3-15). You can do one of two things:

Move the RGB fields’ sliders to increase or decrease the color’s RGB values.

or

Enter the color’s RGB values in their corresponding fields.

Click the OK button once you have selected your desired background color. Click the Cancel button to return to the main SCE workspace. Click the Reset button to reset the Color Map and the color fields to their default values.

This command can also be accessed through the Format Menu by selecting the Background Color menu command.

1)

2)

3)

4)

5)

ground

Figure 3-13: The Background Color Dialog Box - Swatches Tab

Figure 3-14: The Background Color Dialog Box - HSB Tab

Figure 3-15: The Background Color Dialog Box - RGB Tab




FindUse the Find icon to search for text within the SCE (Figure 3-16). The Find icon is also available in HTML View.

Figure 3-16: The SCE Workspace - Find, Insert & Remove Hyperlinks

Figure 3-17: The SCE Workspace - The Find Dialog

Find

Click the Find icon within the SCE toolbar. This opens the Find dialog box (Figure 2-17).

Enter the text you would like to search for in the Find What field.

Click the Find Next button to search for the text. The first search result will be highlighted. If no results are found, the message SCE has finished searching the document. The search item was not found will be displayed.

You can customize text searches by the following:

Enter text you would like to replace the search item with in the Replace With field. Click the Replace button to replace the search item found. Click the Replace All button to replace all instances of the search item.

Check the Match Case checkbox to narrow your search to items within the same lettercase.

Check the Whole Word Only checkbox to exclude letters.

Click the Find Next button to search for the next instance of the search item. Click the Cancel button to return to the main SCE workspace.

This command can also be accessed through the Edit Menu by selecting the Findmenu command.

1)

2)

3)

4)

1)



Figure 3-19: The SCE Workspace - Insert Hyperlink Dialog Box - Existing Page or File


Insert and Remove HyperlinksUse the Insert and Remove Hyperlink icons to create links from your Web page to another existing file or Web page another place within the document, or an E-Mail address (Figure 3-18).

Figure 3-18: The SCE Workspace - Find, Insert & Remove Hyperlinks

InsertHyper-

link

Select the text or graphic you would like to create a hyperlink for by highlighting or double-clicking it.

Click the Insert Hyperlink icon within the SCE toolbar. This opens the Hyperlink dialog box (Figure 3-19).

Select the type of hyperlink you would like to create (Existing File or Web Page, E-Mail Address, or Other Places in Document).

If you have selected Existing File or Web Page, the Text to Display field displays the text you have highlighted. If you have selected a graphic, this field is grayed out.

Enter Alternate Text for the hyperlink in the Title field. (Alternate Text is text that is displayed when the mouse cursor is held over a hyperlink and helps make your pages more accessible.).

Assign a unique name for the element in the ID field. This field is optional.

Select a class from the Class drop-down menu. You can create a classes in the Style Manager. This field is optional.

Select an option from the Target drop-down menu. Choose from None, Same Frame, Whole Page, New Window, or Parent Frame.

If you are linking to another page in yourproject, click on the page name in the Page List. If you are linking to an external page, enter the Web address in the Address field in the following format: http://www.webaddress.com.

If you have selected E-Mail Address, the Text to Display field displays the text you have highlighted. If you have selected a graphic, this field is grayed out.

1)

2)

3)

4)

5)



InsertHyper-

link

Enter Alternate Text for the hyperlink in the Title field.



Select a option from the Target drop-down menu. Choose from None, Same Frame, Whole Page, New Window, or Parent Frame.

Enter a valid E-Mail address in the E-MailAddress field. The E-Mail address will automatically be displayed in the Address field.

If you have selected Places in Document, you must identify the place in the document you would like to link to by creating a bookmark.

The Text to Display field displays the text you have highlighted. If you have selected a graphic, this field is grayed out.

Enter Alternate Text for the hyperlink in the Title field. (Alternate Text is text that is displayed when the mouse cursor is held over a hyperlink)



Select an option from the Target drop-down menu. Choose from None, Same Frame, Whole Page, New Window, or Parent Frame.

Select a place in the document by clicking on a bookmark in the Bookmark List. The Bookmark Name will automatically be displayed in the Address field.

Click the OK button to save your changes. The selected text or graphic will be hyperlinked. Click the Cancel button to return to the main SCE workspace.

6)

7)

Figure 3-20: The SCE Workspace - Insert Hyperlink Dialog Box - E-Mail Address

Figure 3-19: The SCE Workspace - Insert Hyperlink Dialog Box - Places in Document

You also can access Insert Hyperlink through the Insert Menu by selecting the Insert Hyperlink menu command.




Figure 3-20: The SCE Workspace - Insert Break, Insert Horizontal Rule, and Insert Symbol

Hyper-link

Select the text or graphic you would like to remove the hyperlink Click the Remove Hyperlink icon within the SCE toolbar. The text or graphic will be unhyperlinked.

Remove

Insert Break, Insert Horizontal Rule, and Insert SymbolUse the Insert Break, Insert Horizontal Rule, and Insert Symbol icons to create different text effects within the SCE (Figure 3-20). These icons are not available in HTML View.

InsertBreak

Click the Insert Break icon to insert a mark showing the end of a section. The Insert Break command can also be accessed through the Insert Menu by selecting the Insert Break menu command.

InsertHori-zontalRule

Click the Insert Horizontal Rule icon to insert a horizontal line within your Web page. The Insert Horizontal Rule command can also be accessed through the Insert Menu by selecting the Insert Horizontal Rule menu command.

InsertSymbol

Click the Insert Symbol icon to insert a special symbol within your Web page. The Insert Symbol dialog box will be displayed. Find and click the symbol you would like to use and click the OK button. The symbol will appear in the main SCE window. Clicking the Reset button clears the Symbol field. Clicking the Cancel button returns you to the main SCE window. The Insert Symbol command can also be accessed through the Insert Menu by selecting the Insert Symbol menu command.

Figure 3-21: The SCE Workspace - Insert Symbol Dialog Box



Figure 3-22: The SCE Workspace - Tables

TablesTables have traditionally been used to position text and images on a Web page, however, Web Accessibility Guidelines recommend against this. If you are concerned to meet best standards of accessibilities, do not use tables for layout. Contact us for further information about accessible development services.Use the Insert Table, Insert and Remove Rows, Insert and Remove Columns, Merge and Split Cells, and Show/Hide Gridlines icons to create different text effects within the SCE (Figure 3-22). These icons are not available in HTML View.

InsertTable

Click the Insert Table icon to insert a table where your cursor is positioned within the SCE. Select the number of table cells by positioning your cursor over the Table drop-down menu.

The Insert Table command can also be accessed through the Table Menu by selecting the Insert Table menu command., which displays the Table Dialog Box (Figure 3-23).

Enter the number of rows and columns in the Rows and Columns fields.

Select from Default, Left, Right, or Center alignment in the Alignment drop-down menu.

Check the Specify Width box to define table width. Enter a numeric value in the Width field and select between Pixels or Percent as the unit of measurement.

Enter numeric values in the Border Size, Cell Padding, and Cell Spacing fields, using the same unit of measurement defined in Step 3.

Click the Choose Color button. The Select Color dialog box will be displayed. Click a color swatch to add a background color to the table. (Please see the Background Color section for more details on how to choose custom colors)..

To use a background image, check the Use Background Image option and click the Browse button to open the image file to be displayed. Once you have selected the image file, the full file path and name will be displayed in the Background Image field.

Click the OK button. The newly created table will be displayed in the main SCE window. Click the Cancel button to return to the main SCE workspace.

1)

2)

3)

4)

5)

6)

7)

Figure 3-23: The SCE Workspace - Table Dialog Box




InsertRow

Position your cursor where you would like a table row to be inserted. Click the Insert Row icon. A new table row will be automatically added. The Insert Row command can also be accessed through the Table Menu by selecting the Insert Row menu command.

DeleteRow

Position your cursor where you would like a table row to be deleted. Click the Delete Row icon. The table row will be automatically deleted. The Delete Row command can also be accessed through the Table Menu by selecting the Delete Row menu command.

Insert Position your cursor where you would like a table column to be inserted. Click the Insert Column icon. A new table column will be automatically added. The Insert Column command can also be accessed through the Table Menu by selecting the Insert Column menu command.

Delete Position your cursor where you would like a table column to be deleted. Click the Delete Column icon. The table column will be automatically deleted. The Delete Column command can also be accessed through the Table Menu by selecting the Delete Column menu command.

SplitCell

Position your cursor within a table cell that you would like to divide into two. Click the Split Cell icon. The table cell will be automatically divided. The Split Cell command can also be accessed through the Table Menu by selecting the Split Cell menu command.

MergeCell

Highlight the table cells to be merged and click the Merge Cell icon. The table cells will be automatically joined. The Merge Cell command can also be accessed through the Table Menu by selecting the Merge Cell menu command.

If you have set Table Border at 0, displaying gridlines is a way to view the dimensions of the table without displaying table borders. Click the Show/Hide Gridlines icon to toggle gridlines on or off. The Show/Hide Gridlines command can also be accessed through the Table Menu by selecting the Show/Hide Gridlines menu command.

Column

Column

Figure 3-24: The SCE Workspace - Tables

Show/HideGrid-lines



Insert Image, Object, Thumbnail and RolloverUse the Insert Image, Object, Thumbnail and Rollover icons to create add different elements and effects within the SCE (Figure 3-25). These icons are not available in HTML View.

InsertImage

Click the Insert Image icon to insert an image within your Web page.

Position your cursor where you would like the image to be placed within the main SCE window. Click the Insert Image icon. The Insert Image Dialog Box will be displayed (Figure 3-26).

Click the Browse button to open the My Documents folder. Locate the image file you would like to use. Select the file and click the Insert Image button. The file path and name will be displayed in the Browse field.

Click the Upload button. The image file will automatically be uploaded to the server and the File Name and File Size will be displayed in the Current Directory List

In the Current Directory List, highlight the file name of the newly uploaded image file and click the Preview section to see a preview version of the image.

Click the OK button to insert the image file into the SCE. Click Cancel to return to the main SCE window.

The Insert Image command can also be accessed through the Insert Menu by selecting the Insert Image menu command.

1)

2)

3)

4)

5)

Figure 3-25: The SCE Workspace - Insert Image, Object, Thumbnail and Rollover and Show/Hide Paragraph Marks

Figure 3-26: The SCE Workspace - Insert Image Dialog Box

Resizing ImagesYou can resize images to fit your design specifications:

Right-click on the image and click on Image Properties.

Enter alt text in the Alternative Text field.

Select a layout alignment and enter a numeric value in the Border Size field.

Enter horizontal and vertical spacing values in their respective fields.

Check the Specify Size and Keep Aspect Ratio checkboxes and enter your desired image size in the Width and Height fields.

Click OK to save your changes.

1)

2)

3)

4)

5)

6)




InsertObject

Click the Insert Object icon to insert a document file, a Macromedia Flash file, a Quicktime movie file, a Windows Media file, a WAV or MP3 audio file, or a AVI video file within your Web page.

Position your cursor where you would like the object to be placed within the main SCE window. Click the Insert Object icon. The Insert Object Dialog Box (Source Tab) will be displayed (Figure 3-27).

Select the type of object you would like to place from the File Type drop-down menu.

Click the Browse button to open the My Documents folder. Locate the file you would like to use. Highlight the file name and click the Insert Object button. The file path and name will be displayed in the Browse field.

Click the Upload button. The object file will automatically be uploaded to the server and the File Name and File Size will be displayed in the Current Directory List

Click the Insert Object Properties Tab (Figure 3-28). Check the Specify Width and Specify Height checkboxes and enter a numeric value in each field. Select between Pixels and Percent for a unit of measurement.

Click the Insert Object Parameters Tab (Figure 3-29). Click the Name drop-down window and select a parameter name to be defined. Enter a parameter value in the corresponding field.

You can also add new parameters to the object by clicking the Add button and entering the parameter name in the Name field. Enter the parameter’s corresponding value in the Value field.

1)

2)

3)

4)

5)

6)

7)

Figure 3-27: The SCE Workspace - Insert Object Dialog Box - Source Tab

Figure 3-28: The SCE Workspace - Insert Image Dialog Box Properties Tab



InsertObject

Go to the Source tab and in the Current Directory List, highlight the file name of the newly uploaded object file. Click the OK button to insert the object file into the SCE. Click Cancel to return to the main SCE window.

The Insert Object command can also be accessed through the Insert Menu by selecting the Insert Object menu command.

8)

Insert

nail

Click the Insert Thumbnail icon to add a thumbnail and a large picture image for images within your Web page.

Position your cursor where you would like the thumbnail image to be placed within the main SCE window. Click the Insert Thumbnail icon. The Insert Thumbnail Dialog Box will be displayed (Figure 3-30).

Click the Thumbnail Browse button to open the Insert Image Dialog Box (Figure 3-26). Locate the image file you would like to use. Select the file and click the Insert Image button. The file path and name will be displayed in the Browse field.



Click the OK button. The full file path and name will be displayed in the Thumbnail field. Click Cancel to return to the main SCE window.

Repeat Steps 2-5 to insert a Large Picture.

Click the OK button to insert the thumbnail picture in your Web page, creating a clickable thumbnail image that displays the large picture when clicked. Click Cancel to return to the main SCE window.

1)

2)

3)

4)

5)

6)

7)

Figure 3-29: The SCE Workspace - Insert Object Dialog Box - Parameters Tab

Figure 3-30: The SCE Workspace - Insert Object Dialog Box - Insert Thumbnail Tab

Thumb-




InsertRoll-over

Click the Insert Rollover icon to insert a rollover effect within your Web page. A rollover is an action or event that takes place when the cursor passes over a specific image or section of text on a Web page.

Position your cursor where you would like the rollover to be placed within the main SCE window. Click the Insert Rollover icon. The Insert Rollover Dialog Box will be displayed (Figure 3-31).

An Image ID name is automatically created in the Image ID field. You can rename the Image ID name at anytime..

Select a page you would like to be displayed when the rollover is clicked in the Link drop-down menu. You can assign an external Web page to be displayed by entering the Web address in the Link field using the http://www.webaddress.com format.

Click the Choose Picture button to open the Insert Image dialog box (Figure 3-26).Locate the image file you would like to use. Select the file and click the OK button. The file path and name will be displayed in the Browse field.



Click the OK button. The full file path and name will be displayed in the Original Image field.

Repeat Steps 4-6 to insert a Rollover Image.

Click the OK button to insert the rollover image in your Web page. Click Cancel to return to the main SCE window.

1)

2)

3)

4)

5)

6)

7)

8)

9)

Figure 3-31: The SCE Workspace - Insert Rollover Dialog



Paragraph MarksUse the Paragraph Marks icon to display and hide paragraph markers within the SCE (Figure 3-32). This icon is not available in HTML View.

Marks

Click the Paragraph Marks icon to display paragraph marks within the SCE. Click the icon again to hide paragraph marks. The Paragraph Marks command can also be accessed through the View Menu by selecting the Paragraph Marks menu command.

Figure 3-32: The SCE Workspace - Paragraph Marks

Paragraph

Sub-script, Superscript and StrikethroughUse the Sub-script, Superscript and Strikethrough icons to add text effects within your Web page. These icons are not available in HTML View.

Sub-script

Select the Sub-script command to force text characters to display partly below the base line of the text. The Sub-script menu command can be accessed through the Format Menu by clicking Sub-script.

Superscript

Select the Super-script command to force text characters to display partly above the base line of the text. The Super-script menu command can be accessed through the Format Menu by clicking Super-script.

Strikethrough

Select the Strikethough command draw a line through a range of selected text. The Strikethrough menu command can be accessed through the Format Menu by clicking Strikethrough.

SpellcheckGo the Tools Menu and click on the Spellcheck command to run the text spellchecker. The Spellcheck is equipped with dictionaries in the following languages: English, French, Spanish, and German. We can customize the Spellcheck if the language you need is not in the list. Please contact us to discuss customization options. (Please note that additional charges may apply).

Select the Enable Background Spellcheck option to run a spellcheck while text is being typed within the SCE.


Figure 4-1: The Style Manager: Font Tab

By using a style sheet, you can streamline HTML Web pages formatting and layout. You can control text color, typeface, point size, layout, and other content and style specific attributes.

Using Cascading Style Sheets (CSS), you do not have to manually change settings for separate tags every Web page. It allows you to specify attributes for the properties of any Web page.

In SCE, all HTML Web pages in your project use the same style sheet (called styles.css). This style sheet (*.CSS file) is external and is attached to any number of Web pages.

The style sheet can be one that you define during the build phase of your project, one that you are given, one that you redefine or one that you import into the project. (In some cases, you may want to use more than one style sheet.)

Creating a New Style

Specify any or all attributes within the Style Manager types to create a new style for your Web page.

Specifying Font StylesOpen an existing Web page from the Pages Menu (Figure 2-1):

Go to the Tool Menu and select Style Manager. The Style Manager dialog box will be displayed (Figure 4-1).

Select Create New Style from the left hand section. Enter a name in the Style Name field.

Open the Font tab and select a font from the Font field (choose from Arial, Courier New, Comic Sans MS, Georgia, Helvetica, sans-serif, or Verdana).

Select or enter a font size in the Size field and choose a font unit of measurement.

Select Normal, Italic, or Oblique from the Style field.

Select a line height and unit of measurement in the Line Height field.

Select a font weight in the Weight drop-down menu.

Select Underline, Overline, Line-through or None in the Decoration field.

Select Left, Right, Center, or Justified in the Text Alignment field.

Click the Choose Color button to open the Color Palette. Click on a color swatch. The color’s hexadecimal value will be displayed in the Color field.

Click on the Background, Border, Box, List and Positioning tabs to continue specifying styles or click the OK button to save the style.

1)

2)

3)

4)

5)

6)

7)

8)

9)

10)

11)

12)

Section Four: Working with Style Sheets




Specifying Background StylesClick on the Background tab (Figure 4-2) to specify background settings for the new style.

Click the Choose Color button the open the Color Palette. Click on a color swatch. The color’s hexadecimal value will be displayed in the Color field.

Click the Choose Picture button to open the Insert Image dialog box (Figure 3-26). Locate the image file you would like to use. Select the file and click the OK button. The file path and name will be displayed in the Browse field.



Click the OK button. The full file path and name will be displayed in the Background Image field.

Select Repeat, No Repeat, Repeat-X, or Repeat-Y from the Repeat field.

Click on the Font, Border, Box, List and Positioning tabs to continue specifying styles or click the OK button to save the style.

Specifying Border StylesClick on the Borders tab to specify border settings for the new style.

In the Width section, enter a numeric value or select Thin, Thick or Medium from the Top drop-down menu. Select a unit of measurement in this field as well.

Repeat Step 2 and uncheck the Same for All box to specify different values for the Right, Bottom and Left fields. To specify the same values for all fields, check the Same for All box and enter the width value and unit of measurement in the Top field.

In the Color section, click the button the open the Color Palette. Click on a color swatch. The color’s hexadecimal value will be displayed in the Color field.

Repeat Step 4 and uncheck the Same for All box to specify different values for the Right, Bottom and Left fields. To specify the same values for all fields, check the Same for All box and select a color for all fields in the Top field.

Select a border (line) style in the Style field.

Click on the Font, Background, Box, List and Positioning tabs to continue specifying styles or click the OK button to save the style.

1)

2)

3)

4)

5)

6)

7)

8)

1)

2)

3)

4)

5)

6)

7)

Figure 4-2 The Style Manager: Background Tab

Figure 4-2 The Style Manager: Border Tab


Specifying Box StylesClick on the Box tab (Figure 4-4) to specify box settings for the new style.

Select or enter a box size in the box Width and Height fields and choose a box unit of measurement for each field.

Select Left, Right, or None from the Float field.

Select Left, Right, Both or None from the Clear field.

In the Padding section, enter a numeric value in the Top drop-down menu. Select a unit of measurement in this field as well.

Repeat Step 5 and uncheck the Same for All box to specify different values for the Right, Bottom and Left fields. To specify the same values for all fields, check the Same for All box and enter the padding value and unit of measurement in the Top field.

In the Margin section, enter a numeric value in the Top drop-down menu. Select a unit of measurement in this field as well.

Repeat Step 7 and uncheck the Same for All box to specify different values for the Right, Bottom and Left fields. To specify the same values for all fields, check the Same for All box and enter the margin value and unit of measurement in the Top field.

Click on the Font, Background, Border, List and Positioning tabs to continue specifying styles or click the OK button to save the style.

Specifying List StylesClick on the List tab (Figure 4-5) to specify list settings for the new style.

Select a list type from the Type field. Choose from Disc, Circle, Square, Decimal, Lower roman, Upper Roman, Lower Alpha, Upper Alpha or None.

Select Inside or Outside from the Position field.

Click on the Font, Border, Box, Background and Positioning tabs to continue specifying styles or click the OK button to save the style.

1)

2)

3)

4)

5)

6)

7)

8)

9)

1)

2)

3)

4)


Figure 4-4: The Style Manager: Box Tab

Figure 4-5 The Style Manager: List Tab



Specifying Positioning StylesClick on the Positioning tab (Figure 4-6) to specify positioning settings for the new style.

Select from Absolute, Fixed, Relative or Static in the Type field.

Select Inherit, Visible or Hidden from the Visibility field.

Select a value from the Z-index drop-down field.

Select Visible, Hidden, Scroll or Auto from the Overflow field.

In the Placement section, select Auto or enter a numeric value in the Top drop-down menu. Select a unit of measurement in this field as well.

Repeat Step 6 for the Right, Bottom and Left fields.

Click on the Font, Background, Box, List and Border tabs to continue specifying styles or click the OK button to save the style.

Editing Styles

Open an existing Web page from the Pages Menu (Figure 2-1):


Click Edit Style from the left-hand section of the dialog box. The Edit Style tab will be displayed (Figure 4-7).

Highlight the Style Name you would like to edit and click the Edit button. The Font, Background, Box, List, Positioning and Border tabs for that style will be displayed.

Click any of the tabs and make the necessary changes to the style. Click the OK button to save or click the Cancel button to return to the main SCE window.

1)

2)

3)

4)

5)

6)

7)

8)

1)

2)

3)

4)

5)

Figure 4-6 The Style Manager: Positioning Tab

Figure 4-7: The Style Manager: Edit Style Tab




Deleting a Style



Click Delete Style from the left-hand section of the dialog box. The Delete Style tab will be displayed (Figure 4-8).

Highlight the Style Name you would like to edit and click the Delete Style button. A confirmation window will appear.

Click Yes to delete the style. Click the OK button to close the Style Manager dialog box.

Uploading a Style

Use the Upload Style tab to upload existing style sheets from your local computer to the Web server.



Click Upload Style from the left-hand section of the dialog box. The Upload Style tab will be displayed (Figure 4-9).

Click the Browse button to located the .css file you would like to upload from your computer.

Highlight the file you would like upload and click the Upload button. The full name and path of the file will be displayed.

Click the Upload button to upload the file. The message Upload Complete will be displayed once the file is completely uploaded. To view existing uploaded files, click the drop-down window beside the Upload button.

Click the OK button to save your changes or click the Cancel button to return to the main SCE window.

Applying a Style

Select an element you would like the style to be applied to.

Go to the Format Menu and select Apply Style. The Apply Style dialog box will be displayed.

Select the Style class from the Class drop-down menu.

Click the OK button. The selected style will be applied.

1)

2)

3)

4)

5)

1)

2)

3)

4)

5)

6)

7)

1)

2)

3)

4)

Figure 4-8: The Style Manager: Delete Style Tab

Figure 4-9: The Style Manager: Upload Style Tab


Your feedback is important to us. Whether you'd like to share your opinion about a product, ask a question about one of our services, or comment on our website, we want to hear from you. Send your feedback and valuable suggestions to us. We look forward to hearing from you.

Site Content Editor: Talk to Us


Appendix A: The SCE Toolbar Page 37

Appendix B: Frequently Asked Questions 39

Appendix C: Glossary 43

Site Content Editor: Appendices


Appendix A: The SCE Toolbar Page

Cut

Copy

Paste

Insert Break

Insert Horizontal Rule

Insert Symbol

Undo

Redo

Find Text

Insert Table

Hide Gridlines

Insert Row

Delete Row

Insert Column

Delete Column

Merge Cell

Split Cell

Hyperlink

Unlink

Hide Paragraph Marks

Insert File

Insert Image

Insert Rollover

Insert Thumbnail

Background Color

Font

Bold

Italic

Underline

Font Color

Align Left

Align Center

Align Right

Align Justify

Number List

Bullet List

Decrease Indent

Increase Indent


What does Site Content Editor (SCE) do?

Our Site Content Editor (SCE) has gained recognition and popularity over time and is in-corporated into every Web page. The SCE is a WYSIWYG (What You See Is What You Get) interface. If you are familiar with the Miscrosoft Word® interface, you will feel right at home. All the buttons have context-sensitive descriptions which will guide you through every single task. If you wish, you can also easily manipulate the content of the Web page in an HTML cod-ing format.

Can 360 Panoramic imaging be added to the OpenSites system? On any im-plementation of 360 Panoramic imaging, can the images be changed/updated by the client without additional charges?

360 Panoramic imaging can be accomplished using the OpenSites system.

When changes/updates are made after the site becomes live, you would have to acquire Voloper services and provide details as to what needs to be done. In such event, you may bear an additional charges incurred where applicable.

For pricing information, please go visit our website at http://www.voloper.com

Can a site hold multiple photographs/images per page?

Use the image capabilities of our Site Content Editor (SCE) to suit your needs. GIF and JPG are the most common file formats on the Web. These formats compress images to create smaller files. Knowing which file format to use for which type of image is important. GIF supports 8-bit color and JPG supports 24-bit color. The file format’s color depth controls the number of colors the image can display. The greater the bit depth, the greater the number of colors that can be displayed.

Every time I go to SCE in the back end and choose any page, an error message popup appears (in English translation): “An error has occurred in execution time. Do you want to eliminate it? (Yes/No). Line 114. Error ‘editor’ is blank or is not an object.”

You have an older version of an SCE (pre November 02) and you need to update it. If you have installed patches for I.E. 6.0 recently. These patches will work fine with the post November version of the SCE. Follow the following steps:

Locate ‘Windows’ directory on your C drive.

Proceed to ‘Downloaded Program Files’ folder.

Locate ‘SCE Control’ there and right click on it.

Select ‘Remove’.

Close your browser and restart it.

Once the above is finished, the SCE will proceed to update itself automatically.

How can I add page colors or wallpaper to any page?

You can apply the Cascading Style Sheets (CSS) - style rules in the document.

1)

2)

3)

4)

5)

6)

Appendix C: Frequently Asked Questions



How does Stylesheet Manager work in the Site Content Editor (SCE)?

Cascading Style Sheets (CSS) includes formatting in style sheet, rather than in the HTML file. The style sheet then applies the formatting to the HTML file. The Stylesheet Manager is recommended for the use of advanced SCE features. Only users with HTML familiarity and the basic concepts of CSS will be able to manage the element attributes provided in the Site Content Editor (SCE).

How do I accelerate the download speed of the photos? Is there any software program available to do this?

Use the image capabilities of HTML to suit your needs. Test your work at a range of connection speeds to make sure downloading your photographs does not discourage your readers.

The Joint Photographics Experts Group (JPG, sometimes called JPEG) format is best for photographs or continuous tone images. JPGs are 24-bit images that allow millions of colors, unlike GIFs, JPGs do not use a palette to display color images. JPGs use a lossy compression routine specially designed for photographic images. When the image is compressed, some color information is discarded, resulting in a loss of quality from the original image. Since the display device is the low-resolution computer monitor, the loss of quality usually is not noticeable. Furthermore, the resulting faster download time compensates for the loss of image quality.

How do I add panoramic images?

Click the “Insert File” icon in the menu bar and complete the required events such as insert, delete, upload, cancel, or browse, and then apply the following attributes:

File Type: select Document, Flash, Quick Time Movie, Audio, Media Player, or iPIX

Width: adjust the cell width in a fixed pixel amount

Height: adjust the cell height in a fixed pixel amount

How do I check the source code in the Admin Panel?

You can view the source code in HTML View.

How to create a line break? You should see in the SCE that I had to shift down three or four times to get a single shift down to show up on the website. If I want page breaks should I insert the “break” command.

The <br> tag is a line break. Using the <p> tag will produce a paragraph break. You can do all these in the source mode and insert either one of the above to get the best effect. However, familiarity with our SCE would help you with editing. The simplified use of SCE, such as the Break icon, can be helpful to you in this sort of things. Click once and continue typing, you will produce a line break. Click twice and continue typing, you will see a paragraph break giving 2 line breaks/spaces and so on. You will definitely want to use the SCE fully and will endeavor to find the information that you need. The SCE works extremely well and you will learn some of the tricks to make it work to its full potential in a reasonably short time.

How do I establish table columns as fixed widths? The columns move back and forth as content is added, why?



Table attributes let you further define a number of table characteristics. You determine the table width in pixels in the table properties pop-up window. Note that whether you choose to use relative or fixed tables depends on your content and the amount of control you want over the result.

You then apply attributes at the row-level or cell-level. You place the cursor inside each cell in the first row only and right click; select property in the dropdown menu - define cell width. If there are 3 columns, you would need to repeat 3 times. In addition, you press the space bar to create a space between words while you type. In doing so, you would also scroll down one line

How do I link names on one main page with text on separate sub-menu pages?

To link to an external document, you can hyperlink each of the names on the main page by inserting an anchor and then point to the specific sub-menu page name or page_id.

How to link to E-Mail address (E-Mail link) using SCE?

Highlight the text (or click on the image) that you want to make as a link and click the Insert Anchor icon (chain link)

Make sure that the type is set to E-Mail

In the URL field enter mailto:[email protected] where [email protected] is the E-mail address you want to use

Is it possible to go back in and change the buttons after deployment? (i.e. can we download the site and go back into the website system and make changes? If so, how is this done?)

Generally speaking, you can perform all these tasks independently. Having said that, it is pos-sible to make modifications to your website through the SCE. You need to log into the Admin Panel using your authorized administrative username/password.

Screen errors occur when you try to scroll down when using SCE. Perhaps, the developers can use a third-party software toolkit to replace the current one. Is it right?

This is not a SCE error but rather a screen resolution problem on your or your customer’s computer. Please increase the resolution and the ghost effect will disappear.

The photos go where they are placed in the admin section, but then the posi-tions shift/change when the website is reviewed. Why?

After you have already uploaded/inserted an image, right click on the image and select the properties link from the drop-down menu. Follow the steps and take advantage of its image property settings.



BorderBorder refers to the boundary line at the edge of the Web page or module

EmAn em is a unit of measurement that refers to the font size of the parent element in a Web page2.

Graphical User Interface (GUI)A computer interface that uses pictures and icons instead of text. Pronounced “gooey”.

HexadecimalA numbering system which uses a base of 16. The first ten digits are 0-9 and the next six are AF. Hexadecimal numbers are used to color Web pages. For example, the hexadecimal equivalent for the color white is #FFFFFF1.

HyperlinkHighlighted graphics or text in a Web page which jumps to a new page or location in the page when clicked. Hyperlinks can also be used to download files.

Navigation MenuA list of hyperlinks found at the top, bottom, or left of a Web page that allow users to view the major topic pages of a Web site.

Radio ButtonAn element in the user interface that allows a user to select an option. Each button represents a mutually exclusive selection.

RolloverA rollover occurs when the mouse pointer moves over a graphical element and displays a change in appearance.

TPCCPThird-party Credit Card Processor. A company that accepts credit card transactions for other online businesses who usually charge a small fee for the service.

URLUniform Resource Locator. A Web address, such as http://www.google.com.

World Wide Web Consortium (W3C)The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards2.

1Zacs Design.Multimedia Glossary. 2002.<http://www.zacsdesign.com/edu/basic_multimedia_glossary.htm.>

2 World Wide Web Consortium. About the World Wide Web Consortium.http://www.w3.org/Consortium/Overview.1999

3 World Wide Web Consortium. About WAI - Links to Documents. http://www.w3.org/WAI/about-links.html. 2006

Appendix C: Glossary



Index

AAccessing the SCE 5Adding a New Page 5Administration Panel 3, 5Align Center icon 10Align Justify icon 11Align Left icon 10Alignment icons 10Align Right icon 10Alternate Text 17Applying a Style 31

B

Background Color icon 14Bold, Italics and Underline 10Bold icon 10Brightness 13

C

Creating a New Style 27Cut, Copy and Paste 9

D

Decrease Indent icon 11Delete Column icon 20Delete Row icon 20Deleting a Page 5Deleting a Style 31Design and HTML View 9Design View 7DHTML 3

E

Editing Styles 30Edit Menu 9

F

Find icon 15Font, Color and Background Color icons 12Font icon 12Format Menu 13

H

HTML View 7Hue 13

I

Increase Indent icon 11Indent icon 11Insert Break 18Insert Column icon 20Insert Horizontal Rule 18Insert Hyperlink icon 16Insert Image 21Insert Object 23Insert Object icon 22Insert Rollover icon 24Insert Row icon 20Insert Table icon 19Insert Thumbnail icon 23Italics icon 10

L

List icon 11

M

Menu Commands 7Merge Cell icon 20

O

Opening a Web Page 6Ordered and Unordered Lists 11

P

Pages List 5Pages Menu 5Paragraph Marks 25R

Radio Button 43Redo and Undo 9Remove Hyperlink icon 16Resizing Images 21RGB 13


Index

S

Saturation 13Saving Page Contents 6SCE Button Toolba 7SCE Button Toolbar 9SCE Workspace 7Show/Hide Gridlines 20Specifying Background Styles 28Specifying Border Styles 28Specifying Box Styles 29Specifying Font Styles 27Specifying List Styles 29Specifying Positioning Styles 30Spellcheck 25Split Cell icon 20Strikethough 25Style Manager 17, 27Style Sheets 27Sub-script 25Super-script 25Swatches 13

T

Table Menu 19Tables 19Text Alignment 10Text Color icon 13The SCE Menu Bar 7

U

Underline icon 10Uploading a Style 31W

What’s New Page 4, 89Web Accessibility Guidelines 19Worldwide Accessibility Initiative WYSIWYG 3Wonderpay 38Worldwide Accessibility Initiative 153Write-in Details Page 57Write-in Menu 57