Home

eSite Builder 2.1 User Manual

1. Center Horizontally Center Vertically icon OR key binding Align Left Ctrl Align Right Ctrl gt Align Top Ctrl W Align Bottom Ctrl Note You can also use the Widget Inspector for alignment Distribution 1 Select a Widget that should be evenly spaced in relation to other Widgets 2 Hold the Shift key down and click on the remaining Widgets that should be evenly spaced in relation to each other 3 Inmenu Layout gt Distribute Horizontally Distribute Vertically OR In toolbar Distribute Horizontally Distribute Vertically icon Width and Height Matching 1 Select the Widget to which the other Widget s width or height should be matched 2 Hold the Shift key down and click on the Widgets the width or height of which should be matched to the first Widget 3 ln menu Layout gt Make Same Width Height OR In toolbar Make Same Width Height icon Note You can also use the Widget Inspector for width and height matching oe Layer Order Widgets may partially or completely obscure other Widgets e When a Widget obscures another it is said to be in front of the obscured Widget conversely the obscured Widget Is said to be behind the un obscured Widget e Send a selected Widget back as follows e Inmenu Layout gt Send Backward OR In Toolbar Send Backward icon Copyright 2006 Netopia Inc All Rights Reserved 28 o
2. default to displaying the first tab var currentTab 1 function addMenultems menultems level for var 0 lt menultems ength i var menultem menultems i if menultem nodeName MENU var item is this a top level menu or tab if level 0 numlopLevel Menus menuLevel Num item root attachMovie itemClip ttemClip numlopLlevel Menus menuLevel Num item X xpos item y ypos xpos item width create a movie to hold the submenus for this top level menu item menuLevel Num duplicateMovieClip subMenuCont ai ner MC subMenuContainer menuLevel Num menuLevel Num Submenus me this subMenuContainer menuLevel Num Submenus_ mc visible false reset the starting position for this submenu xsubpos 40 item itemButton subMenus submenus mc Copyright 2006 Netopia Inc All Rights Reserved 63 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Sample Schema 5 continued when you roll over tab show the submenus item temButton onRol l Over function make the correct tab visible and show the state for var 1 i lt numTopLevel Menus var item me root itemClip 1 var item selected item mc itemButton this item mc itemButton subMenus visible item mc itemButton this item mc gotoAndStop item selected selectedframe unselectedframe l else a
3. 3 Choose a Template Web Page Dialog Choose a page template Custom Custom Template Template 1 F 4 4 1 k N RT 7 W AI MA FN LE 20 TA K AAI N WIR J av EANA 2 0 1 se 0 E ART anti Lr AL 74 G Top Image Matrix Bonsai Tree i t E RA Win Tipe vk qt KH rA j Op ee j jugs a l j Template NSA o A ama A AA Click Libraries Fe ct IO AM A to access more Simple Graphic Templates from a y j the Shared Built In Templates Ak fw ue L i eg c oe See a Libraries Services Products Contact Us Right Image Matrix Simple Graphic Apply template to C7 Current page only O all pages currently using the Bonsai Tree template Call neg pages on my Web Site Editing the Template Layout In the Template Layout environment you can edit the Page Properties of the Template add and modify Widgets Chapter 4 and Navigation Buttons Chapter 7 anywhere on the screen Further parameters of the Templates become directly editable including Co or and Font Stylesheet Background Image and Use Browser Centering Chapter 3 Saving Templates Choose between the Save and Save As commands depending on how much control you want to have over the File Name and Nickname of the Template Layout file e ln menu File gt Save OR Key Ctrl S Note lr the Template Layout you are editing belongs to the My Templ ates category the Ed
4. Image Maps AKA Hot Spots Superimposing hyperlinked areas over an Image Box 1 Insert an Image Box with the image over which you wish to lay hyperlinked areas 2 Insert a new Color Accent Box 3 Place the Color Accent Box over the area of the Image Box to which you wish to attach a hyperlink and resize the Color Accent Box to taste 4 You may wish to make the background color attribute of the Color Accent Box transparent in the Properties dialog 5 Additionally you may wish to make the border color attribute of the Color Accent Box transparent in the Properties dialog 6 Insert a hyperlink on the Color Accent Box Link to the desired page 7 Repeat steps 2 through 6 for the remaining areas of the Image Box to which you wish to attach a hyperlink Bug Fix Inconsistent Display of Text Boxes in Mozilla Firefox In certain circumstances the browser fails to respect the padding attribute of lt div gt tags This bug affects Text Boxes causing the text in the box to exceed the designated bounds of the box You may recognize this bug as a spilling over of text past the right edge of the background and border of a text box Typically this bug occurs when you set the width of a Text Box to an area smaller than can contain the width of the longest word in the box When this happens the best approach Is to increase the width of the Text Box to a size greater than or equal to the width of the longest word in the box Copyright 2006 Net
5. if result null return result return null Navigation Menu Scripting 2 1 Revised 042106 name Navigation menu scripting is typically the most difficult programming task encountered when creating Flash movies for eSite Builder Web sites The ActionScript in Sample Schema 5 see below illustrates how a Flash menu can be built from the si tei nfo xmi lt MENU gt element hierarchy The script implements top level menu elements as itemClip movies The subltemClip movie is used for the children of top level menu elements Sample Schema 5 Dynamically create the menu items For each top level menu element an itemClip movie is attached Each top level menu element has a subMenuContainerMC created that submenus One subltemClip is for each menu is attached to its bMenuContainer The itemClip s itemButton contains a reference to its subMenuContai ner MC E ld E K contains all the L S U in the subMenus property how many tabs itemClips or Sections are across the top var numTopLevel Menus 0 start at 100 so the level number does not conflict with title letters var menuLevel Num 100 Copyright 2006 Netopia Inc All Rights Reserved 62 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Sample Schema 5 continued sample position for top level items var ypos 70 var Xpos 20 var ysubpos var xsSubpos var submenus mc null 0 0
6. The first two values in the number represent the red channel 00 for pure white FF for pure red The second two values in the number represent the green channel 00 for pure white FF for pure green The last two values in the number represent the blue channel 00 for pure white FF for pure blue The full six digit value represents the combination of the red green and blue channels respectively For example F FFF00 is the combination of pure red and pure green yielding pure yellow For each color there are also associated and buttons to the right of the value box which reduce and augment respectively the value in the box e Accent Colors These color squares represent the color scheme currently selected as set in the Color and Font Stylesheet e Grayscale These color squares give quick access to pure white pure black and three intermediate shades of gray e Selected Color This color rectangle represents the color currently set by the Color Chooser dialog Associated and buttons stand to the right of the color rectangle which darken and lighten respectively the selected color e Related Colors These color squares represent hues that the Editor computes to bear a complimentary relationship to the currently selected color by means of color theory Copyright 2006 Netopia Inc All Rights Reserved 39 of 77 eSite Builder User M
7. to exit the Wizard Your buttons appear on the page but with placeholder images Move the buttons to the appropriate place on your template or Web page 5 Right click one of your newly created buttons and select Properties From the Widget Properties dialog that appears enter the image URL you wish to use for the button Note that this must be an image with transparency if you set background and mouseover background colors 6 Select theSpecial Effects tab in the Widget Properties dialog If desired enter the mouseover and or page active images you wish to use Click OK when finished to exit the Widget Properties dialog 7 Repeat Steps 5 6 for each button in the Navigation Bar 8 Save your changes and then select Tools gt Open Browser Window to view your changes Copyright 2006 Netopia Inc All Rights Reserved 46 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Form Wizard Run the Form Wizard for a guided interface for creating Forms Chapter 6 l In menu nsert gt Form gt Run Form Wizard At any point in the Insert Form dialog you may click the Fi ni sh button 2 Click the Next button to progress through the various pages of options OR Click the name of any of the pages in the left area 3 Click the Fi nish button When you run the Form Wizard as with Custom Forms you retain the opportunity to insert particular Input Types into the existing Form Once you have
8. e Keywords This text area allows you to attach a sequence of words to the Web site in the form of Meta Meta Tags tags see box this page The words in the sequence These are words must be separated by commas Keywords and phrases e Description This text area allows you to attach full Description that search sentences in the form of Meta tags see box this engines like Google and page Yahoo catch When a e Password protect page checkbox This allows potential visitor searches the visitors to access view the page only if they have a Web for sites of a particular password type through a search engine e Password Enter your chosen password if you opt to the Meta tags help pick your password protect the page Web site out for e Hide Sign In link to this page checkbox consideration Choose words This control suppresses the appearance of the Sign In and phrases that accurately icon and hyperlink in the lower right side of the page describe your business and This feature is desirable in cases where the page is would appeal to your designed primarily to appeal visually to visitors perhaps prospective customers as an invitation to further explore the Web site often called a Splash page It is still possible to sign into the site even though the link Is hidden 3 Click OK Editing the Page lt Head gt Information The editor provides a way for advanced users to insert custom
9. eSite Builder User Manual and Training Guide 2 1 Revised 042106 How to Make a Splash Page Adapting a Template Layout to serve just one page or a selected set of pages Having a Splash page is an excellent way to welcome the visitors to the eSite It basically consists of an eye catching visual and a button that redirects the visitor to the Home page of the eSite To apply a Splash page to your eSite you will need to create a Template Layout nxt and a Page Layout nxg Creating the Template Layout First you must create the Template Layout which will be applied to the Page Layout The template layout will contain the background color and or graphic and the alignment justifications In menu Edit gt Template Layout In menu File gt New Template To align the contents of your page select Edit gt Colors amp Styling gt Use Browser Centering Change the background color or graphic a Background color Edit gt Colors amp Styling gt Color and Font Stylesheet b Click Customize and set the color of the Background Color c Background image Edit gt Colors amp Styling gt Background Image gt Set Image 5 Click Save As and name the template file so that you can apply it to the page later E WM G Creating the Page Layout Once you have the Template Layout stored in the File Manager you can then design your Splash page on your Page Layout that can include graphics and or text On the Page Layout for the Splash page y
10. unchecked by default Copyright 2006 Netopia Inc All Rights Reserved 42 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Selecting Form Widgets You may select individual Fields and Labels as you would any Widget however you may also select related Widgets which is to say Fields and Labels that soawned together as part of the same Input Type e Hold the Alt key and click OR Right click in contextual menu Select Related Items Accessing the Advanced Settings of a Form Subsequent to inserting an Input Type to a Form you may modify its specific settings These settings appear in Advanced Settings pane of Widget Properties dialog for the Input Type Access the Properties Dialog of the selected Widget e Key Alt Enter OR Right click in contextual menu Advanced Settings e n the case of the Area Box for a whole Form you may also click the Form Properties button at the upper left of the Form Manipulation of Form Widgets The placement and positioning of Forms and associated Widgets functions in the same as with standard Widgets see above e As you insert Input Types in a particular Form you may need to make room for additions To do so simply select the existing Widgets and move them down or to one side before inserting the new Input Types e You may move associated Widgets outside the bounds of the Form Area Box However such Widgets always belong to a particular Form regardless of thei
11. created a Form with the Form Wizard you cannot return to the Insert Form dialog The procedure for modifying Forms is given in Chapter 6 Picture Gallery The Picture Gallery Wizard provides a means to present an array of images in an ordered consistent and aesthetically pleasing thumbnail layout The Picture Gallery is a tool with several facets the Wizard determining thumbnail and layout settings the array of thumbnails presenting the images on a given page in the eSite and a Detail View launched from the array and presenting the images in a new window e The Picture Gallery Wizard is a guided interface that allows you to arrange images in a sequence give images titles and descriptions and set the various parameters by which the array of thumbnails is presented e The Picture Gallery thumbnail array is ensconced in an Area Box You may freely move and size the Area Box on the page e The Detail View presents the images in a dedicated non customizable window and comes in two modes Slideshow and View All Running the Picture Gallery Wizard L In menu Insert gt Picture Gallery 2 The Picture Gallery Wizard launches 3 Click the Next button to progress through the various pages of settings OR Click the name of any of the pages in the left area e Inthe Edit Pictures page you may choose images for inclusion in the Picture Gallery You must have at least one image in the Picture Gallery Additional optional set
12. eSite Builder Editor brings up the Color Chooser dialog in a number of different contexts such as setting the Background Color of a Widget or the entire site and offers a variety options for picking out colors See Screenshot 10 next page The components of the Color Chooser dialog are as follows e Color Palette This occupies the upper area of the dialog and is configured as a table of color squares although in some cases adjacent squares on a single row are the same color and are merged together into a rectangle The columns of color squares are arrayed from left to right in a spectrum The rows of color squares are arrayed from top to bottom in shades of light to dark respectively Click any of the color squares and rectangles to select the displayed color e Red Green Blue These boxes show the numerical values 0 255 of each color picked elsewhere in the dialog and also accept manually typed in entries Higher values represent a greater saturation of the given channel For example value of 0 in the Red channel in represents pure white whereas a value of 255 represents pure red For each color there are also associated and buttons to the right of the value box which reduce and augment respectively the value in the box e HTML Color This box shows the hexadecimal value 000000 FFFFFF of each color picked elsewhere in the dialog and also accepts manually typed in entries
13. is the only browser that supports Filter effects Other browsers will simply render the image normally Adding I mages to Text Boxes L Select the Text Box to which you wish to add an image see the Text Boxes section if you need additional information Click the place that you want the image to appear in the text box In menu nsert to insert Once the image appears in the Text Box right click the image to launch the Properties dialog See Image Boxes above for additional information For text wrapping options go to the Layout section of the Properties dialog as shown at right gt Picture and select the image Copyright 2006 Netopia Inc All Rights Reserved E Widget Properties Web Page Dialog Size amp Position You can change the position and size of this item ne Le from distorting when entering new values for heig width u below diede sap item e the checkbox Width px Height px E Type on ly width or height then calculate other dimension overall size you enter does not include border widths Alignment Non Right a S Whitespace Hor one Ve rtica 1 Internet Use the Layout section of the Image Box dialog to set text wrapping options 32 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Color Accent Boxes 1 Access the Properties dialog of the selected Color Accent Box see above 2 The Properti
14. location Arrow keys Left Right gt Up 4 Down Vv Enter the exact values of the desired position in Properties dialog o Inthe Layout tab enter values in the Size amp Position controls You can also use the Widget Inspector See below e There are two ways to change the dimensions of a selected Widget as follows Click and drag the Widget s handles in or out to the desired size o For any of the handles located in the center of the Widget s sides the handle only controls the position of the current side and only in the dimension perpendicular to the edge Simply put only one side may be dragged at a time and only in or out o For any of the handles located on a corner of a Widget the handle simultaneously controls the horizontal position of the horizontal side and the vertical position of the vertical side Hold the Ctr key click and drag to constrain the aspect ratio of the Widget as its dimensions change the effect obtains upon releasing the mouse button Enter the exact values of the desired width and height of the Widget in the Properties dialog Inthe Layout tab enter values in the Size amp Position controls You can also use the Widget Inspector See below Copyright 2006 Netopia Inc All Rights Reserved 25 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Using the Widget I nspector for Layout Use the Widget Inspector as
15. only modify the existing Custom settings To apply the Cust om color theme choose it inthe Color Theme list Choose the font you would like the Web site to apply globally i e to all Text Boxes on all pages both in the Page Layout and Template Layout as the default font in the Font Fami y list A preview appears in the pane below This control does not override any specific applications of a particular font to a stretch of text but only to text to which no particular font has been applied Copyright 2006 Netopia Inc All Rights Reserved 20 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 5 Choose the size of font you would like the Web site to apply globally as the default font size inthe Font Size list A preview appears in the pane below As with the Font Family list this control only applies to text that you have not specifically assigned a font size 6 The Custom Options list enables you to select default options relating to hyperlinks see below or select from your own uploaded css files in your eSite directory You can choose to include or exclude as many of these custom files as you wish in your template by selecting or deselecting the option s in the selection list e None This setting maintains the standard underlining on hyperlinks e Link Bold This setting adds bold stylization to all hyperlinks maintaining the standard underlining as w
16. pages that exist in the site m Pages Shown on Navigation Menu This pane shows the pages for which the Flash file includes buttons o The buttons in the Navigation area are as follows See Screenshot 14 in Appendix A Add This button adds the selected page to the Flash Navigation m Remove This button removes the selected page from the Flash Navigation m Move Up Move to Top Move Down Move to Bottom These buttons shift the order in which a selected page is displayed in the Flash Navigation m ndent This button shifts the button for a selected page from the category level to the page level In most cases a page Is best situated at the page level rather than the category level you should make a habit of indenting all pages m Qutdent This button shifts the button for a selected page from the page level to the category level Copyright 2006 Netopia Inc All Rights Reserved 33 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Applying Backgrounds and Borders to Widgets For Text Boxes and Color Accent Boxes if the Background Color property is set to blank the Widget has a transparent background Image Boxes possess the Background Color property but it is only apparent when the image file in use displays Note Of the image file types capable of displaying transparency only GIF image files are currently supported by eSite Builder The transparency l transparency of an image file e For a se
17. sss eee eee 53 Chapter Nine Managing your CSI nennir era tevnedecisansthacuentaaenreinlasianipiagicntiadeeanseiess 54 USNO SCORCH KV WONRCS a E A A A 54 SHG NC TIS O E nET E A E E E E E 54 USNO VISION Stat s LT 59 Chapter Ten Super User FUNCTIONS sincisirantansennapeaawercaneereeariaaseanenid areas AN OEN ENESA ENAA 56 LOCKMO TEXT gt er 56 Engaging the Security Protocol for a Specialized Form sse ee e ee ee e e e eee 56 CSCI EVO ES er tatnwtemaaistalgioh ion nnae etacinand E E E E OEO 56 Adding Page Commento sesinin a a a a R 57 Updating Ene DICHONaI Vaan e O EEN 57 Services M nU erani a E E E E E A E AE AA 5 7 Restrictions to Super USer Privileges see e eee eee 57 Appendix A eSite Bulder Flash API acrocar aE EE O 58 APRO UN oa E A E A E 58 REGUM T 58 Byna 40 TET 58 SEF OC NUEVA Zell ON ips calle etary caitate AN a etna al tae kee pe TR 61 Navigation Menu SCEOUINGia cisctivannssshcavacaacaencaatat yun vagsdeetuais te veannisshcunnts ben gisauhd teondunisedtuanadeermnnaaunte 62 Advanced CuUSTOmMIZAUON ioiai EE E A A A A 65 T S LEI rE dOr SUD OOF eena a A E E EA 66 ADDEDdIX B TRAINING Guld Earann a Aar O A A 68 What s the Best Approach to Building a RIOT ee eee ee eee 68 Adopting Ready Made Elemente sese ee ee ee ee ee ee ee ee ee ee eee 68 WADIA EMG Slate e TT 69 Creating and Placing versus Copying ANd Replacing ccceccecceceeceeeeeeceeeeeeeeeeeeeeueeeeeeeeeaeeeeaetaeeegs 70 Sedredating GOntent and DESIGI anid sinneidx
18. to type or paste in double click the lower Text Box and continue there 4 Itis unlikely that you would keep the image in the Image Box or replace it with another of the stock images that come with the site and reside in the Images folder For the time being however leave the image In as a placeholder Optionally you may add colored borders to any of the Widgets on the page Optionally you may change the background color of the Text and Color Accent Boxes Save the page as you make significant changes Once you are satisfied with the overall look of the page save the page as a new page Give the new file a name of one of the other pages in the site for example About nxg Similarly give the new file a Nickname that befits the content you intend to fill the page with for example About Us 9 You may repeat the Save As operation for the remaining pages you project you will have in the site Once you have duplicated the Home page as new pages you may open them and repeat Steps 2 and 3 above for each of them S Copyright 2006 Netopia Inc All Rights Reserved 68 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Wiping the Slate Clean If you have a clear idea of what the eSite should look like it may be a better strategy to wipe the slate clean before beginning Web Designers for example often put their greatest effort into crafting a layout and color scheme in Photoshop and t
19. what goes in a Template Information that goes into a Page is fresh and Is subject to change Include information in Templates that will not change such as the overall page layout design the header and footer information and the navigation buttons If you plan to include the same information on every single page in your eSite place this information in the Template Examples of information that goes in Pages e Information that is specific to one page e Information that might change frequently e Pictures that are specific to a particular page on your eSite e Special designs that might look good on one page but not on all pages of your eSite Examples of information that goes in Templates e Hours of operation e Business address e Copyright information e Search bar e Contact information e Link to privacy information e Company logo or slogan e Navigation bar that includes links to other pages as well as your sites in different languages e Background colors or a special picture you have uploaded In this case make sure the layout will work for all of the Pages you plan to create Note Avoid clutter when creating a Template keep the design simple and consider keeping logos images and other features on the outer edges of the Template so they will not conflict with information that will appear on individual pages Leave enough space for information that will appear on individual pages Copyright 2006 Netopia Inc All Rights Reserve
20. your text box use these settings to change the internal spacing between the edge of the text box and the edge of the actual text Use either the Widget Inspector or the Layout dialog box to move and resize images text boxes and other widgets http dtaylor nxgi ks netopia com tg editor dialogs on Internet Copyright 2006 Netopia Inc All Rights Reserved 26 of 77 eSite Builder User Manual and Training Guide Applying Hyperlinks to Widgets e You can add hyperlinks to Images Color Accent Boxes and highlighted text There are three ways to apply a hyperlink O O O Key Ctrl K In menu Insert gt Hyperlink In toolbar Hyperlink icon e The Insert Hyperlink dialog launches O O In the Location section select either a page from your eSite or an outside Web page You can also enter an e mail address In the Options section enter text in the Link Title box and it will appear over the image when visitors move their mouse over it Enter an Anchor Name if you want visitors to jump to a specific place on a page Check the Open link in new window box if necessary Visitors who click your hyperlinked image or text will view the location from a new browser window or pop up window You can control how the pop up appears on a visitor s page by accessing the Pop Up Window Set the various attributes in both the Layout and Fea
21. 7
22. As you build an eSite it is convenient and easy enough to navigate through the pages using the Open command in the File menu and view the Templates at your disposal in the Template File Chooser However to get the clearest picture of the files and folders that the eSite contains the overall structure of these resources and what is slated for deletion open up the File Manager The File Manager In menu Edit gt Manage Files or Key Ctrl M shows all of the page files nxg files and all the template files nxt in your site as well as the images folder and any folder you have created in your eSite The interface for the File Manager is simple flexible and intuitive and you can poke around as much as you like without destroying or distorting any of the assets One of the most gratifying features of the File Manager is the instant preview it gives of any file that you double click on The Deleted Files area of the File Manager serves the function of holding files that you delete while editing your eSite until you are ready for housekeeping You will breathe a sigh of relief if you mistakenly delete a file or folder and rescue it in the Deleted Files area You would do well to review the Deleted Files area periodically and get rid of items that may clutter up the area and eventually rob Space in your eSite As you browse through the File Manager keep in mind that resources are displayed by type and in alphanumeric order
23. CISCUING FOE Ee e aiiithicaahaniadaawhighes siaanind earn bantadenninmancamnladea E 43 Accessing the Advanced Settings Of a FOr ccccccecseceececeeeeeeeeeeeeeeaeeeeseeeeeeeeeeaeeaereeaetaeteesesgnres 43 Manipulation or FOr WICQCES naaa a a AAA 43 Inserting Additional Text Boxes in a FOr cccceccecseceeeeeeeeeeeeeeeeaeeeeseeeueeeeeeaeeaeeeeeeeeeseeaetaeraeseegntes 43 Cr ating Multiple ss 44 FORM T at tet anviou RET HE Ve aie E nade wiietetuatiadns waiantaansacheaioan 44 Chapter Seven VWIZal GS xa crstcrciceacdecanisacnncisinaneicancactnleasaeartineat e aauiea vssamieasi acetonide earner ions 45 Navigation BUTTON GENETTA sisnasttianciatnisaisinadtineboniankavieanihatdidamiaonbandaneuiagantaraiaadeemancirnewdanned 45 Creating TEx D TETE E S E E Vee ieee das A 45 Advanced style Creating buttons with special IM QGES cccccecseceeceeeeeeeeeeeeeeeeeeseeeeeeueesaeeaeteas 46 FOF Tes nnd E TEE E 47 PICEURC allel TTT 47 Runn tne Picture Gallen Wizard TT 47 Ssss H Picture erel Te sal s LET 48 Copyright 2006 Netopia Inc All Rights Reserved 3 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Previewing Deployment of the Picture Gallery and Detail View sese ee ee ee ee ee e ee e ee ee ee KeK 48 Chapter Erdhi Managing ESte ASSCLS T 49 WOFKING WEN G File Ma mMag er anrai aa a A a a a 49 UPOO E ora O a a a E EA A erent 50 Managing Deleted FICS asrina a a a E a a a 52 Making Use of Shared braies
24. Libraries which make available resources ranging from stock image files to Page Layouts and Template Layouts Note The eSite Builder Shared Librari es dialog is part of the File Manager modeled after the structure of the Del eted Files area above A Importing from a Shared Library 1 ln menu Tools gt Shared Libraries OR Open the File Manager a Shared Librari es button is present in the left pane 2 The eSite Builder Shared Librari es dialog launches e The upper pane contains the shared assets o Double click Libraries and folders to drill down into them o Double click files to preview them e The lower pane functions in the same manner as the main pane in the My Web Site area of the File Manager 3 In the lower pane navigate to the folder in your Web site to which you would like the assets imported 4 In the upper pane select the files you wish to add to your Web site e Shift click to select multiple continuous items e Ctrl click to select multiple discontinuous items 5 Press the Import from Li brary button to download the selected files to your Web site 6 Press the Fi ni shed button to exit the eSite Builder Shared Libraries dialog B Exporting to a Shared Library 1 Inmenu Tools gt Shared Libraries OR Open the File Manager a Shared Librari es button is present in the left pane 2 In the upper pane navigate to the particular folder on a specific Shared Library t
25. Navigation Buttons are the only key to the order that visitors view pages in Widget Properties Getting the Most out of Your Widgets It is certainly possible to design a whole site without accessing the Properties dialog of any of the Widgets on the site However you would be missing out on a number of features that are only available via the Properties dialog One that stands out is the Borders property You can add a border around every kind of Widget but you must do so from the Properties dialog Copyright 2006 Netopia Inc All Rights Reserved 73 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 If you add a border to a Text Box it Is likely you want to make use of another feature found only in the Properties dialog Padding Once you add a border to a Text Box you may very well find that the text and the borders are too close To remedy this proximity issue access the Properties dialog and add a certain amount of padding to all sides of the Text Box 3 5 pixels per side Is generally advisable In the case of Image Boxes the Filter Effects may only be previewed and applied via the Properties dialog Combining Widgets Assembling Two or More Widgets for a Singular Effect Some of the effects that you would previously only consider executing in Photoshop are now possible in the eSite Builder Editor e Place Color Accent Boxes of the same color flush next to each other to create new shapes e Give the illu
26. Select a grid spacing option 5 10 25 or 50 pixels apart Copyright 2006 Netopia Inc All Rights Reserved 37 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Using Guides Display the ruler Guides to align images text and other widgets on a page Guides are large transient indicator lines that span the entire eSite Editor page They appear when the widget you are currently moving aligns with another widget on the page Display the Guide by selecting View gt Show Gui des from the menu Guides can be used to align the edge Edge Guides or center Center Guides of widgets Deaede visaalo Ia gt g le Tr Style v Font Face v Size B Z U Ruler guides appear when the image at Ruler guides appear when the image at right is centered on the image at left right is edged onto the image at left By default the guides align widgets to other widgets on the page In cases where you wish to align widgets in the template as well select View gt Show Guides gt Edge Guides Center Guides gt Align to Template Widgets from the menu OSes Bose ae aesaaa Style v Font Face v size v H Ioeu AW y K Ruler guides appear when the image at right is centered onto the image in the template Copyright 2006 Netopia Inc All Rights Reserved 38 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Using the Color Chooser The
27. Size 62 KB 29 KB 6 KB 1 KB 61KB 1 KB 110 KB 4KB 406 KB 51KB 9 KB 10 KE 1 KE 1 KE 5 KB Type File Folder JPG File GIF File NXG File ICO File JPG File GIF File GIF File MXG File JPG File GIF File NXT File IPG File NXG File NXG File NXG File Date 07 Mar 06 09 34 29 Mar 06 11 34 29 Mar 06 11 34 06 Apr 06 13 03 06 Mar 06 14 56 29 Mar 06 11 34 03 Apr 06 13 42 23 Mar 06 11 53 10 Apr 06 16 03 07 Mar 06 09 35 03 Apr 06 11 09 07 Apr 06 09 27 07 Mar 06 09 34 06 Apr 06 13 03 06 Apr 06 13 02 04 Apr 06 14 18 2 1 Revised 042106 Uploading Files The Upload Files function of the eSite Builder Editor is primarily for the uploading of images to the site but serves to upload files of other types as well This is the only means by which you may upload files to the File Manager eSite Builder does not support FTP Upon pressing the Up oad Fi es button in the left pane of the File Manager an uploading dialog appears in the main center pane The top area of the dialog is for the uploading of single files The lower portion of the dialog is for the uploading of multiple files See Screenshot 12 next page A For a Single File 1 Press the Browse button A system file browser appears Find the desired file on the local system Press Open The system file browser disappears The Up oad Files dialog of the File Manager assumes the foreground position 6 Press Upl oad oe
28. T Copyright 2006 Netopia Inc All Rights Reserved 50 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Screenshot 12 Uploading Files eSite Builder File Manager Web Page Dialog Current Folder D Upload Files to Your Web Site My Web Site Use the area below to upload a single file or click 08 Use Java Uploader below to upload a large number of files Upload Files Deleted Files Use Java Uploader Reduce large images to web friendly sizes Uploaded files will overwrite any duplicates on the server B For Multiple Files 1 If you wish to have the Editor upload images as you saved them on your system leave the checkbox titled Reduce large mages to web friendly sizes unchecked 2 Pressthe Use ava Uploader button You may encounter a J ava console certificate notice Java Uploader Click Yes The J ava Uploader is a file 3 In the same dialog the area for uploading single and chooser dialog that allows you to multiple image files is replaced with a large folder icon upload all manner of files to the a set of instructions and a button named Fi ni shed File Manager The J ava Uploader Uploading has a slightly different look from 4 You may drag and drop image files from the desktop the Windows Explorer interface and open folders to the folder icon but Is structured to function Skip to Step 5 similarly if not with all the same OR You may click the h
29. TRAINING GUIDE What s the Best Approach to Building a Site Adopting ready made elements Page Layouts and Template Layouts versus wiping the proverbial slate Clean Adopting Ready Made Elements Starting with ready made elements is useful when you don t have a firm fixed direction and lets you work out ideas as you go In these cases you also do best focusing on the Page Layout first and then letting the flow of the content suggest the most suitable Template Layout Tweak and customize the Widgets on the Page until you maximize their usefulness for your purpose and you realize you have to create new ones 1 Sign into the site The first page you encounter is the Home page There is an Image Box with a Color Accent Box layered behind it There are two Text Boxes as well one to the right of the Image and Color Accent Box and one below these elements 2 Double click the top Text Box to edit the text content Type or paste In an introductory paragraph on your business If you are pasting text from another text editing application make sure the text is plain text Microsoft Word to name the most common culprit introduces its own set of HTML codes with the pasted text This may slip you up when you are setting global parameters of the text in the Color amp Font Stylesheet 3 Fill the top Text Box with enough text to match the height of the adjacent Accent and Image Boxes Once the top Text Box is full if you have more text you would like
30. a shortcut to the Layout dialog box The Inspector lets you view the size and position attributes for all widgets as well as padding options for Text Boxes as you resize and reposition them Enter values in the Widget Inspector as you would the Layout dialog box as shown below Web page text Widget Inspector o o Lorem Ipsum Dolor curabitur orci neque ullamcorper ut sollicitudin in ornare ut erat Nullam faucibus Curabitur ligula orci tempus non ullamcorper vitae porttitor ullamcorper purus Lorem Ipsum Dolor curabitur orci neque ullamcorper ut sollicitudin in ornare ut erat Nullam faucibus Curabitur ligula orci tempus non ullamcorper vitae porttitor ullamcorper D purus e Inspect EW Widget Type Text Box Lorem Ipsum Dolor curabitur orci neque ullamcorper ut sollicitudin in ornare ut erat Nullam faucibus Oo Oo Layout dialog for Text Box 2 Widget Properties Web Page Dialog Size amp Position You can change the position and size of this item If you want to keep the item from distorting when entering new values for height or width use the checkbox below Top P Width 430 px Top Position 361 pX Right Height 159 px Left Position 78 px C Type only width or height then calculate other dimension Bottom 7 Left For this item the overall size you specify indudes border and padding widths Padding If you have set a border or background color for
31. and the principle of What You See Is What You Get WYSIWYG The eSite Builder Editor indicates functional elements with graphic cues responds to direct user manipulation of on screen objects and follows certain conventions for the on screen positioning alignment and distribution of objects eSite Builder creates an online application interface by leaving a Host window open with all of the browser s functionality menus buttons web address field etc and launching the eSite Builder Editor interface in a new browser window adapted for the purpose The Host window maintains the URL of the eSite you should leave this window alone so as to remain signed in the eSite and displays the deployed eSite upon signing out The eSite Builder Editor appropriates its window for its interface and functionality The eSite Builder Editor comprises a set of menus and toolbars and two nominally independent editing environments the Page Layout Editor and the Template Layout Editor Upon signing in the eSite Builder Editor initially presents the Page Layout Editor with the Template Layout environment present in a faded un editable form The buttons in the toolbars are iconographic icons only no text See Screenshot 1 Hovering the mouse pointer over a button yields an identifying label Every eSite comes with at the very minimum a default Home page including a prepackaged set of content bearing objects called Widgets as part o
32. anual and Training Guide 2 1 Revised 042106 e Clear This button resets all currently selected values to null Screenshot 10 The Color Chooser Dialog Color Chooser Web Page Dialog Fill Color Color Palette SR lemme T 9 B HH oo ann 6 HH S a EEE nma o B B a 69 BII R Ww IS B Accent Colors Red 255 b RS Green 255 BB Grayscale Blue acc Hi Selected Color HTML Color FFFFFF lall Related Colors http demonstration vzdoc ks netopia com tg editor se Internet Spell Checking a Page You may check the spelling of the text in a page against the dictionary packaged into eSite Builder The Editor checks only the current page not the whole site at once e Inmenu Tools gt Check Spelling or In toolbar Check Spelling icon or Key F7 Displaying the Word Count of a Page You may tally up the number of words that a page contains The Editor counts only the words on the current page not the site as a whole e ln menu Tools gt Display Word Count or Key F9 lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 40 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER SIX FORMS A Form is a Set of interactive fields that you may use to request information from visitors who in turn use the Forms to submit the requested information to you You may take advantage of
33. appears upon signing in showing the Page Layout environment File Edt View Imet Format Took Layout Help Jd IA Ow Qe Ola lbe AT A diwad OI mie lA d Style Font Face yore B FU AY FE EB wt f i Put title or headline here Double click to edit Replace this sample text with some text of your arm lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 10 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER TWO PAGE LAYOUTS In a typical eSite there may be several pages all keeping to a consistent look but each addressing different aspects of your business like a Home page a Services page a Contact page and so on The eSite Builder Page Layout environment supports the content of the individual pages whereas the Template Layout environment addresses the overall design of the eSite see Chapter 3 Should information go into a Page or in a Template See What goes in a Page and what goes in a Template Chapter 3 for more information Creating a New Page There are two ways to create a new page You may either create a page from scratch this section or you may take an existing page and use the Save As command see the Saving versus Saving As section below l In menu File gt New Page oR Key Ctrl N OR In toolbar Click New Page icon 2 A Select Page Layout dialog launches Choose between the various predetermined Page L
34. ayouts e Following each option s description there is a Previ ew hyperlink which brings up sample of the Page Layout in a new window for previewing e f you are not sure which option to choose or would like to start a Page Layout from scratch choose the Page Layout titled Bl ank Page 3 Click OK Editing the Page Properties In the Page Properties dialog you may edit certain attributes that affect how the page appears in the File Manager how visitors can find the eSite in a Web search and whether the Sign In link is visible on the page 1 Inmenu File gt Page Properties OR In toolbar Page Properties icon 2 A dialog appears Its components are as follows e Filename not editable This field identifies the current page in the File Manager and includes a nxg extension e Page Title Here you may give the page a title which appears at the top of the browser and is distinct from the filename of the page e Automatically add business info to page title checkbox This control allows you to add your company s business name to the page title at the top of the browser e Nickname Here you may give the page a name for ease of identification in the File menu and the File Manager The Nickname also serves as the default text label when generating navigation buttons Copyright 2006 Netopia Inc All Rights Reserved 11 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106
35. between Layout EnNVIrOnMents TTT 17 Switching to the Template Layout Environment sese ee ee e e e e e e ee ee ee ee ee Ke Ke 17 Switching to the Page Layout ENViIrOnMent icici chisnienrsinuiaituniaunidsoindieauenduaad opment E i 17 Creating a NEW TEMPALE TT 17 CHOOSING Template Layou sien iticnieanicesiaaadieividaadenian ae adenine anata i 18 Editino the Template Layout mcm iiaeeatonaditacuierapauaiesed E santa ereie 19 Saving R 62 aniel s 19 Editing the Page Properties of the Template ccceccecsecseceeeceeseeeeeeeeeeeeseeeeeeeeeeteeaeteererseeaeres 20 Editing the Color and Font Stylesheet siccin a aa e aa A E Aan 20 Setting and Clearing the Background lmagde sese eee e e e ee Ke ee 22 Toggling Browser Centering ON and OT sese ee e e ee ee ee ee 22 Adding A Footer tothe Template s YET Ee Yaa VRS KE NS RE EENT EET hinted ae 22 Chapter Four Working with Widgets sssseserererersrsrsrersrnrnrnrrrnrrrrrnrnrnrnrnrnrrrrrrrrrrrrrrrerrrrrrrrrrrrrrre 23 Creating New Widgets criearcea e E 23 Tes 169 TS 14 A E EE TATE A E ARE A EPE E A T T E 23 Accessing the Properties Dialog of a Widget see eee eee 24 Basic Manloulation Or WICGGUS en a a a O ie 25 Copying Cutting and Pasting Widgets sees ee ee eee 25 Moving and Resizing Widgets sese 25 USING the Widget Inspector TOF Lay OUT is sisi dhe siassordaindnststiatede a adiaivh ea A 26 Copyright 2006 Netopia Inc All Rights Reserved 2 of 77 eSite Builder User Ma
36. ct nsert gt Navigation Buttons to activate the Navigation Button Generator Click NRT 2 IntheSelect Pages section that appears select the pages for which to generate navigation buttons Note You can change the name that appears on the button by double clicking it in the column titled Create buttons and then entering a new name Click Next when finished 3 Inthe Button Background section select from a variety of design options based on your needs a Configure Button Background Select Use a different image for each button b Button Di mensi ons Change the default Width and Height values if necessary Add a value to the Border Width only if you plan to set a Border Color c Colors and mages Modify the following settings by clicking set Note Background colors will not be visible unless the image you insert has transparency If you plan to use two non transparent images for your background and mouseover go to Step 4 e Background Color Border Color When set the background and border colors appear behind the button image e Mouseover Background Mouseover Border When set the mouseover background and border colors appear when the mouse pointer crosses over the button e Page Active Background Page Active Border When set these colors or images appear on the navigation button that corresponds with the currently viewed eSite page When done click Next to advance the Wizard 4 Click Finish
37. d e Inmenu Format gt Bulleted List or In toolbar Bulleted List icon o This creates an unordered list the default bullet is the solid circle e Inmenu Format gt Ordered List or In toolbar Ordered List icon o This creates an ordered list the default ordering is Arabic numerals 1 2 3 6 You may also add paragraph and line breaks e Deselect the text and place the cursor where you want the break to occur e Key Enter This starts a new paragraph o The cursor moves down by two lines e Key Shift Enter This creates a manual line break o The cursor moves down by one line 7 Optionally view and edit the HTML tags underlying the text a Exit text editing mode Copyright 2006 Netopia Inc All Rights Reserved 30 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Click once anywhere outside the Text Box b Select the Text Box Click once on the Text Box c ln menu Edit gt Text Box HTML OR Key Ctrl H OR Right click in the contextual menu HTML Source B Editing the Properties of the Text Box 1 Access the Properties dialog of the selected Text Box see above 2 The Properties dialog is divided into two tabs e The first tab also titled Properties offers three sets of parameters o Border o Background o Overflow Use this setting to choose how text in the Text Box is displayed The default setting is Visible which means that all text is displa
38. d 16 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Toggling between Layout Environments Switching to the Template Layout Environment The Page Layout environment is the default environment You must switch to the Template Layout environment in order to create or modify Templates Enter the Template Layout environment as follows 1 ln menu Edit gt Template Layout OR Key Ctrl L 2 The Template Layout environment becomes enabled In the Edit menu Template Layout is checked If you have the Fade Disabled Items setting checked in the Tool menu the content area turns paler and the design elements like the banner and navigation areas become brighter Switching to the Page Layout Environment You must be in the Page Layout environment in order to apply Templates to the eSite as a whole or to specific Pages in the eSite as well as to create and modify Pages see Chapter 2 Return to the Page Layout environment as follows 1 ln menu Edit gt Template Layout OR Key Ctrl 1 2 The Template Layout environment becomes enabled In the Edit menu Template Layout is unchecked The Template pales as when you entered eSite Builder Editor initially if you have the Fade Disabled Items setting checked in the Too menu Creating a New Template There are two ways to create new Templates You may either create a new Template Layout from scratch this section or choose a pre existing T
39. dd the items to the submenu and not the root so that can be shown hidden as a group menuLevel Num item submenus mc attachMovie subltemClip sSubltemClip menuLevel Num menuLevel Num item x xsubpos item y ysubpos xSubpos 92 l item label menultem attributes title item itemButton myUrl menultem attributes UT 1 item itemButton myTarget menultem attributes target item temButton onRelease function L getURL this myUrl this mwTar 06t 1 E Copyright 2006 Netopia Inc All Rights Reserved 64 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Sample Schema 5 continued is this the currently displayed page if _ root sitepage item itemButton my Uri make sure that this tab is selected currentTab numTlopLevel Menus add the sub menus directly below its parent preorder if menultem hasChildNodes NN level 0 addMenultems menultem chil dNodes level 1 add the menus addMenultems gSiteinfo firstChild childNodes 0 select the current tab _root itemClip 1l itemButton onRol Over Advanced Customization Flash programmers may also wish to support advanced customization by programming their movie to process an additional data file This data file may contain parameter values for text strings and object dimensions as well as for colors sounds and images The structure and content of this data file is
40. ded You cannot however alter the base lexicon of the built in dictionary e ln menu Tools gt Update Dictionary Services Menu This menu provides external links to various service level configuration pages depending on how your particular service is configured Restrictions to Super User Privileges e Full access to Form information retrieval is on y available to Owner level users Super users may access the Form Submissions area and prime new CSV files for downloading but may not actually download the file s or delete them lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 57 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 APPENDIX A ESITE BUILDER FLASH API API Objective The eSite Builder Flash API enables developers to leverage dynamic data using Macromedia Flash Using the Flash API Flash movies can be programmed to access and display server generated XML data This allows a Flash movie to be reused on multiple Web sites without requiring any ActionScript modifications Requirements Macromedia Flash MX or MX 2004 is required In order to use the Flash API developers must code in a version of Flash capable of importing XML Developers must also be experienced in programming Flash movies using ActionScript Dynamic XML The eSite Builder Flash API provides a server generated schema via the following special URL lt base site URL gt tg sitei nfo xml s
41. down folder selection Delete Selected Items Keying Delete also works Create New Folder Cut Files Keying Ctr X also works Copy Files Keying Ctrl C also works Paste Files Keying Ctrl V also works Change Thumbnail View This control toggles between two settings a Thumbnail View This setting displays large icons for each file or folder with its name below a Details View This setting displays the files and folders in lines each with an associated tiny icon name size type and date and time last modified 3 Select files or folders in the main pane prior to attempting Delete Copy or Paste operations e Shift click to select multiple continuous items e Ctrl click to select multiple discontinuous items 4 Double click folders to open them 5 Double click files to bring up a preview of the file in a new window not editable O O O O O O O Copyright 2006 Netopia Inc All Rights Reserved 49 of 77 eSite Builder User Manual and Training Guide eSite Builder File Manager Web Page Dialog Screenshot 11 The File Manager Current Folder AX NIA da My Web Site Upload Files g Deleted Files Name images Flowers 3303 jpa Q buffalo_sm gif lo contact nxg L favicon ico E flowers jpg jpa S help 1 gif Q home gif B home nxg Siljenalone jpg SJlogo_tag_transp gif v master nxt i ntpalogo jpg B products nxg E Services nxg o test nxg
42. e Defeating Image Scaling The eSite Builder Editor optimizes image files automatically when you reduce them in size This Image Scaling feature as it is termed lets you simultaneously benefit from the smaller size of file that comes with the reduction in size while producing a better quality image than you would obtain from the live scaling that the HTML browser based method yields The eSite Builder Editor accomplishes Image Scaling by creating new versions of the image and storing them in the background as it were you do not find these scaled down versions in the File Manager they are kept out of the way for you so as to reduce clutter and confusion However if you would like to revert a scaled down image In a particular Image Box to its original size simply edit the Image Box and re select the original image file in the File Manager Previewing Deployment of the Mortgage Calculator Getting to know the tool your visitors will use e To view and use the Mortgage Calculator as a visitor would preview the page or sign out e The Mortgage Calculator is divided into three tabs How Much Can Afford Monthly Payment My Tax Savings 1 Begin with the How Much Can Afford tab a Enter the Borrower s and Co Borrower s if any income and expenses in the corresponding fields b Click the Cal cul ate button c If you wish to start over click the CI ear button 2 Proceed to the Monthly Payment tab a E
43. e settings specific to the Input Type e All Input Types possess the following settings o Form Field Label o Required to Submit Form checkbox not checked by default o Include in E mail Notification checkbox checked by default e See below for settings specific to the Input Types 3 Click the OK button Copyright 2006 Netopia Inc All Rights Reserved 41 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Input Types and Their Specific Settings e Simple Text Input Maximum Number of Characters Initial Value Validate field as an E mail address on form submission e Paragraph Text Input Maximum Number of Characters Initial Value e Checkbox Show checkbox initially checked unchecked by default e Selection List Choices Text input field Add button Delete button Move Up button Move Down button Number of Selections Allowed Single Multiple e Radio Group Choices Text input field Add button Delete button active at insertion only subsequently simply delete the radio button in the Form proper Move Up button Move Down button Initial Arrangement Horizontal Vertical e Date Selector Begin the year range with and end with Include a time selector with the date selector checkbox checked by default active at insertion only subsequently simply delete the time selector field in the Form proper Time Interval Minutes Beginning Time Ending Time Automatically initialize to the current date for the visitor
44. eature if more than one person edits your eSite To access select View gt Change Hi story from the menu A window that shows who recently changed your eSite appears 2 Page Change History Web Page Dialog Last 10 Changes to This Page Modified by dtaylor from 10 7 1 50 on Wed Mar 29 16 25 32 CST 2006 Modified by dtaylor from 10 7 1 50 on Wed Mar 29 10 49 17 CST 2006 Modified by dtaylor from 10 7 1 50 on Thu Mar 23 14 52 30 CST 2006 Modified by manager from 10 7 2 245 on Tue Mar 7 09 52 20 CST 2006 Modified by manager from 10 7 2 225 on Tue Feb 28 13 08 32 CST 2006 Modified by manager from 10 7 2 225 on Mon Feb 27 16 00 17 CST 2006 Modified by manager from 10 7 3 31 on Mon Jan 30 15 39 58 CST 2006 Modified by manager from 10 7 3 31 on Fri Jan 27 15 36 17 CST 2006 Modified by demo from 10 7 2 234 on Mon Jan 16 09 50 04 CST 2006 Modified by manager from 10 7 2 227 on Wed Jan 11 13 35 35 CST 2006 Copyright 2006 Netopia Inc All Rights Reserved 54 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Using Visitor Statistics Use this feature to see how many people have visited your eSite during a given month To access select View gt Visitor Statistics fromthe menu G Visitor Tracking Web Page Eg Current Visitor Hits March 257 visitors If it is available with your plan consider using the advanced visitor Reports and Customer Lists that can be accessed through the Visitor Statistics
45. ell Note Link colors are set in the Col or Theme control e Link No Underline This setting strips the standard underlining on all hyperlinks Note Link colors are set in the Color Theme control Note The css files can only be viewed if you have uploaded them in the top level directory of your eSite See Uploading Files Chapter 8 for more information on uploading files to your eSite See Opening and Editing Files in a Text Editor Appendix B for more information on editing css files 7 Inthe Preview Page drop down list select what the Preview pane uses to display the variations determined in the top controls e Sample HTML Tags This setting shows the full range of effects as determined in the dialog with every effect labeled e Individual page titles and filenames in the current site These settings show how the controls in the dialog affect the respective pages of the site e None This setting shows how the current dialog settings affect a blank page Screenshot 6 Color and Font Stylesheet 3 Set Stylesheets Web Page Dialog Color Theme Font Family Font Size Custom Options 7 Select zero or more a a EE A Link Bold Bluenote 5 Times New Roman E 12px Smaller Link No Underline Bluescale Trebuchet MS 14px Small M Chinese Lacquer Verdana w 16px Medium v pport Sample Text Uploaded css files Link names will be displayed here The following samples show h
46. emplate Layout and modify it see following sections 1 Switch to the Template Layout environment if you are in the Page Layout environment 2 Inmenu File gt New Template OR Key Ctrl N 3 The Template Layout environment clears e You may wish to begin editing the new Template immediately See Editing the Template Layout 4 Inmenu File gt Save OR Key Ctrl 5S e A File Chooser dialog launches This is a version of the File Manager o The File name field is selected You may enter a file name of your choice o Inthe Nickname field under the Additional Save Options section you may enter a name of your choice it identifies the Template Layout in the Choose Template Layout dialog see next section Copyright 2006 Netopia Inc All Rights Reserved 17 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Choosing a Template Layout l Z Switch to the Page Layout environment if you are in the Template Layout environment In menu Edit gt Choose New Template See Screenshot 4 below In the Choose a Template dialog that launches click on any of the available templates in the left pane and preview them in the right pane See Screenshot 5 next page e The left pane contains two categories of Template to choose from they are as follows o My Templates These are Templates that you have created or customized Note This also includes files you upload from t
47. ently viewed eSite page When done click Next to advance the Wizard 4 IntheText Label section change the button dimensions if you did not change them in the Button Background section Set a Text Color if necessary When set the Mouseover Text color appears when the mouse pointer crosses over the button When the Page Active Text Color is set Copyright 2006 Netopia Inc All Rights Reserved 45 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 this color appears on the navigation button that corresponds with the currently viewed eSite page Set the Text Alignment Text Style and Interior Padding these are standard editing tools When done click Next to advance the Wizard 5 Click Finish to exit the Wizard Your buttons appear Move them to the appropriate place on your template or Web page 6 Save your changes and then select Tools gt Open Browser Window to view your changes Advanced style Creating buttons with special images Use these instructions if you plan to use a different image for each button Instead of using text that Is included by the Wizard your text or symbol will be an integral part of the image selected for each button Note The following instructions merely explain functions included in the Generator Plan to experiment with a variety of styles until you achieve your desired look Click Show Preview in the Wizard to view your design as you create it 1 Sele
48. es dialog is divided into two tabs e The first tab also titled Properties offers two sets of parameters o Border o Background e The Layout tab You can also use the Widget Inspector o Size amp Position Flash Objects 1 Access the Properties dialog of the selected Flash Object see above 2 The Properties dialog is divided into three tabs e The first tab also titled Macromedia Flash Properties offers three sets of parameters o Playback Options o Appearance o Flash Source m The Browse button brings up the File Manager You may upload new images to the scrapbook See Uploading Files in Chapter 8 e The Layout tab You can also use the Widget Inspector o Size amp Position e The Special Effects tab o This tab contains an area titled Navi gati on which checks for a properly coded Flash file in the site and enables a set of controls if it finds such a file a Ifthe Navigation area does not find a suitable Flash file in the site you see a message to that effect instead of the controls o See Appendix A for instructions on the script required in Flash files for the appearance of controls in the Navigation area However please note that the procedure is likely to be comprehensible to and executable by only knowledgeable and experienced Flash developers o When there are controls in the Navigation area the area is split into two panes m All Pages This pane shows the
49. f 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 OR OR e OR OR Send a selected Widget all the way back as follows In menu Layout gt Send to Back In Toolbar Bring to Front icon Key Ctri Bring a selected Widget up as follows In menu Layout gt Bring Forward OR In Toolbar Bring Forward icon Bring a selected Widget all the way up as follows In menu Layout gt Bring to Front In Toolbar Bring to Front icon Key Ctri Editing Widget Content Text Boxes A Editing the text within the Text Box L 2 3 4 Double click to enter the text area Type the desired text or paste it in from a plain text editor like Notepad Select the text See Screenshot 9 below Once the text Is selected you may modify a variety of different parameters of the text e Inmenu Format gt Style o Bold OR In toolbar Bold icon OR Key Ctrl B o ltalic OR In toolbar Italic icon OR Key Ctrl 1 o Underline OR In toolbar Underline icon OR Key Ctrl U e n toolbar Style o This is a drop down menu that offers special formatting e Intoolbar Font Face o This is a drop down menu that offers different fonts the name of each font Is given in the font face that the name offers except for the Webdings and Wingdings fonts which are for typing special symbols and icons e ln menu Format gt Text Color or In toolbar Text Color ico
50. f its Page Layout The eSite is also automatically configured with a default Template Layout which comprises Widgets of its own To make an eSite your own add to and modify these built in elements and settings Behind the scenes eSite Builder is comprised of proprietary files U nxg and nxt files rather than conventional HTML XML PHP CFM or ASP file formats One consequence of this strategy is that all Web design must take place within the interface it is not possible to design offline and upload files via FTP Note eSite Builder sometimes referred to as eSiteNXG is a next generation NXG product Thus the terms eSite Builder and eSiteNXG are used interchangeably Copyright 2006 Netopia Inc All Rights Reserved 8 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 System Requirements For Building and Editing eSite Builder In order to build or edit in the eSite Builder environment you should adhere to the following system requirements e Microsoft Windows 2000 or higher with the most current updates applied Microsoft Windows XP Service Pack 2 with the most current updates applied is preferred e Microsoft Internet Explorer 6 x or higher with the most current updates applied e Sun Java JRE 1 4 1 or higher Note eSite Builder generates standards based HTML code which conforms to HTML 4 01 specifications set by the World Wide Web Consortium W3C For Viewing eSites You ma
51. feature Enter your username and password and a Reports tab appears This tab includes the following reports to allow you to gain further insight into customer visits to your eSite Page Hits Referrer Domains Repeat Visitor and Average Time Per Visit Click the report titles to access the specific information A Customer Lists tab is also available for creating customer lists so that you can send them e mail Click the Customer Lists tab to access this feature and then follow the online instructions e Visitor Tracking Web Page Dialog Current Visitor Hits Customer Lists anza Use these advanced Last updated 03 30 2006 02 37 00 PM CST Report is updated every 15 minutes features if they are L available with your From 2006 March 1 Y plan To 2006 March 1 30 lt Records per page 5 Show Report Page hit information March 2006 March 2006 Choose Format Help Domain Name Page Page hits debjen_esiteasp com 39 debjen_ esiteasp com services nxg 14 debjen esiteasp com home nxg 10 debjen esiteasp com Bonsai_Tree Bonsai_Tree nxt 4 ebien esites master nxi lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 55 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER TEN SUPER USER FUNCTIONS In the context of working with eSite Builder Fulfillment Developers are assigned privileges beyond those of t
52. fy here appear on every page and are applied in the Template Layout environment The Color and Font Stylesheet settings allow you to define an overall color scheme and style to your site and are displayed on every page There are a few ready made color schemes available or you can define one of your own Once you have defined a color scheme the colors are available in a special palette in the Color Chooser With the Color and Font Stylesheet settings you can set the colors for different text elements within the eSite font sizes font faces and link properties Local Settings These settings are applied on a case by case basis and can appear anywhere in the eSite As you insert Text Boxes you may edit the text manually using many different features such as bold italics highlight font colors font faces font size and heading styles You can change these attributes independently from other Text Boxes found on the page layout giving you option to customize your text creatively Bearing in mind that settings you apply locally trump the global settings you specify in the Color amp Font Stylesheet it is sometimes necessary and appropriate to customize a particular span of text For example it is typical for the name of your business to be especially large in the banner and may be in a color or font not set in the global color scheme Basically apply local settings judiciously Copyright 2006 Netopia Inc All Rights Reserved 71 of 77
53. g e Keywords This text area allows you to attach a sequence of words to the Web site in the form of Meta tags see Meta Tags box above The words in the sequence must be separated by commas e Description This text area allows you to attach full sentences in the form of Meta tags see Meta Tags box above Click OK Editing the Color and Font Stylesheet The Color and Font Stylesheet allows you to define an overall color scheme and style to your eSite There are a few predefined color schemes available and you may define your own Once you have settled on a color scheme the colors occupy a designated palette in the Col or Chooser dialog l Zz In menu Edit gt Colors amp Styling gt Color and Font Stylesheet A Set Stylesheet dialog appears See Screenshot 6 next page Its components are as follows from left to right top to bottom e Color Theme list e Customize button e Font Family list e Font Size list e Custom Options list e Preview pane not editable e Preview Page drop down menu In the Color Theme list select among the preconfigured color schemes to preview them in the pane below The preconfigured color schemes only apply to Built In Templates OR Click the Customi ze button to modify the Custom color theme see below Only one L Custom color theme exists you cannot create rename or save new custom color themes
54. ghts Reserved 9 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Reading Visual Aids Certain visual aids in the Editor diverge from the WYSIWYG principle but nonetheless come in handy while laying out pages These features do not appear in the site as viewed by visitors and may also be disabled manually in the Vi ew menu of the eSite Builder Editor to obtain a truer view of how the eSite looks to visitors without previewing it see next section or signing out e Show Borders These are soft dashed borders that appear around a Widget to show that it is selected These borders are not to be confused with the user set borders that may be applied to individual Widgets See Applying Backgrounds and Borders to Widgets e Fading of Disabled Items When you are in the Page Layout editing environment the Template Layout is faded and vice versa e Startpoint This is a pointer labeled Start Content Here Its function is to maintain a consistent reference point across all pages in the site Previewing the eSite User determined links such as linked text and images including navigation buttons do not function in the Editor itself Links including button rollovers are available only when previewing the eSite and of course on the deployed eSite i e as viewed when not signed in Preview the eSite as follows e n menu Tools gt Open Browser Window OR Key F4 Screenshot 1 The eSite Builder Editor as it
55. he Shared Libraries directory which can be accessed by clicking the Libraries button at the lower right bottom of the dialog window See Making Use of Shared Libraries Chapter 8 for more information o Built in Templates These are Templates that come pre packaged with every site they cannot be overwritten Choose a template to work with Your choice does not commit you to using the template as is see Editing the Template Layout nor does it commit you to applying the template to every page in the site e Select the radio button for Current page only only if you wish to apply the template exclusively to the current page e Select the radio button for Al nxg pages on my Web Site if you have already applied multiple templates to your eSite and you wish to replace all of them with your new selection e Otherwise leave the radio button for Al pages currently using the Templ ate Name template selected This is the default setting Click the OK button Screenshot 4 Choose New Template Bin F d Cut Ctri W mo SEO W 53 Copy Col c Paste Ctrl y Widget Properties Alt Enter Text Box HTML Ctrl H Template Layout Shft HCtrl Colors amp Styling Choose New Template j Copyright 2006 Netopia Inc All Rights Reserved 18 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Screenshot 5 Choose a Template Dialog
56. he standard user with one exception see the final section of this chapter This level of access is labeled super user You must sign into the eSite with a User Name that grants super user access in order to take advantage of the features that follow If you are not sure what level of access you have to your eSite please contact your service provider Locking Text Boxes Locking a Text Box prevents the text content but not the Widget Properties of the Text Box from being edited 1 Select the Text Box you wish to lock 2 ln menu Edit gt Un Lock Text Box The Editor set borders of locked Text Boxes turn a maroon color The content of a locked Text Box Is faded to show that it is disabled Repeat the procedure above on a locked Text Box to unlock it Engaging the Security Protocol for a Specialized Form eSite Builder allows you to enforce a secure protocol for a specialized Form protecting the sensitive information visitors may submit in the Form from hackers Once you have enabled the secure protocol eSite Builder automatically hosts the page in which the Form is placed via HTTPS rather than HTTP 1 Access the Properties dialog of the selected Form see above 2 Check the Secure Form checkbox 3 Save the page and sign out of the site View the secure form Freezing Layouts Freezing a Page Layout or Template Layout locks the position and properties of existing Widgets in the document and prevents new Widgets fro
57. hen bring their designs into the framework of the Template The Page Layout then takes its cue from the Template 1 2 ce 10 Switch back to the Page Layout environment 12 13 14 Sign into the site The eSite Builder Editor presents you with the Home page Select all and key Delete and save the page Ctrl S OR Create a new blank page and overwrite the home nxg file a In menu File gt New Page OR Key Ctrl N OR In toolbar Click New Page icon b A Select Page Layout dialog launches Choose the Blank Page option and Click OK c File gt Save As d Select the home nxg file and Click OK Switch into the Template Layout environment e ln menu Edit gt Template Layout OR Key Ctrl L Create a new Template e File gt New Template OR Key Ctrl N Save the Template as a new file Give the Template a sensible file name perhaps based on your business name or myTemplate01 and a similarly sensible Nickname At this point your new Template and your Home page are totally blank Customize the Template You may change the background color for the site You may add a Color Accent Box as a backdrop for a banner You may add a Text Box with your business name in the banner You may upload images from say your Photoshop design for the site Once you are satisfied with the initial overall layout of your site move the Startpoint in relation to your Template design elements Save the Te
58. ia Inc All Rights Reserved 59 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Dynamic XML continued The top level lt NAV gt element in siteinfo xml may also optionally contain lt MENU gt child elements that represent a menu hierarchy These menu elements are only available when the schema is requested with additional parameters That is since a navigation menu hierarchy is only associated with a single flash widget in the eSite Builder editor page location and flash identifier values must be specified to locate the correct widget on the corresponding nxg page The following URL illustrates this Sample Schema 2 lt base site URL gt tg siteinfo xml smversion 20050412345 amp sitepage pageuri amp flashid flashid Before requesting the schema via the special URL the Flash movie can ascertain the correct values for pageuri and flashid from the root movie clip since these values are passed as flashvars to the Flash movie For example the HTML source for the Web page may contain a tag similar to the following see Sample Schema 3 below Sample Schema 3 lt EMBED pluginspage http www macromedia com go getflashpl ayer type application x shockwave flash wmode transparent src nxgcircletop swf flashvars amp smversion TG1234 amp flashid TG1l269 amp sitepage master nxt menu false loop false play false gt Copyright 2006 Netopia Inc All Rights Reserved 60 of 77 eSi
59. information in the lt HEAD gt portion of the document For example you may want to put custom J avaScript on a page or include additional lt META gt tags other than the ones provided by the Page Properties e File gt Page lt Head gt Info Editing the Page Layout With the WYSIWYG interface of the eSite Builder editing a page Is simply a matter of dressing it up with elements containing text image and color on the page moving them around and resizing them e You may add and modify Widgets freely anywhere on the screen See Chapter 4 e You may add and modify Custom Forms freely anywhere on the screen See Chapter D e You may run any of the Wizards freely anywhere on the screen See Chapter 7 Copyright 2006 Netopia Inc All Rights Reserved 12 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Saving versus Saving As Saving Saving your work is obviously critical You should save as often as you make significant changes e Inmenu File gt Save OR Key Ctrl 5 OR In toolbar Click Save icon Saving As The Save As operation is similar to the Save operation but differs in giving you the option to save the current Page Layout as a new page with a unique file name or overwrite a previously existing Page Layout file l ln menu File gt Save As OR Key Ctrl Shift 5 See Screenshot 2 2 A File Chooser dialog launches see Screenshot 3 e f you wish to use the c
60. ist to access the Properties dialog of any se ected Widget e n menu Edit gt Widget Properties e Right click in contextual menu Properties e Key Alt Enter e Widget Properties Web Page Dialog Properties Layout Special Effects Screenshot 8 The Properties Dialog of an Image Box ae Use these settings to change the appearance of the item s border Color Size px Style Background Use these settings to change the appearance of the item s background Color Picture Use the browse button to select a new picture from your Web Site or type ina URL to display an image from another site Image URL fimages sample 1 100 browse Alt Text Internet Copyright 2006 Netopia Inc All Rights Reserved 24 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Basic Manipulation of Widgets Copying Cutting and Pasting Widgets e There are three ways to copy a selected Widget as follows In menu Edit gt Copy Key Ctrl C Right click in the contextual menu Copy e There are three ways to cut a selected Widget as follows In menu Edit gt Cut Key Ctrl X Right click in the contextual menu Cut e There are three ways to paste a selected Widget as follows In menu Edit gt Paste Key Ctrl V Right click in the contextual menu Paste Moving and Resizing Widgets e There are three ways to move a selected Widget as follows Click and drag the Widget to the desired
61. itor overwrites the Template Layout with your changes The editor does not overwrite the Built In Templates If the Template Layout you are editing belongs to the Built In Templates category the Editor automatically creates a new Template in the My Templ ates category e ln menu File gt Save As OR Key Ctrl Shift S This is the right choice if the Template Layout you are editing belongs to the My Templates category and you want to preserve the Template Layout and save the current changes to a new Template Layout Copyright 2006 Netopia Inc All Rights Reserved 19 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 A File Chooser dialog launches This is a version of the File Manager The File name field is selected You may enter a file name of your choice In the Ni ckname field under the Additional Save Options section you may enter a name of your choice for ease of identification the Nickname appears in the My Templates chooser dialog Editing the Page Properties of the Template L 3 In menu File gt Page Properties OR In toolbar Page Properties icon A dialog appears Its components are as follows e Filename not editable This field identifies the file associated with the current page e Nickname Here you may give the page a name for ease of identification in the File menu the Nickname also appears in the My Templates chooser dialo
62. lected Widget that is not a Flash Object there are may only be set in a third three ways to change the Background Color property as party image editing follows application like Photoshop or o In menu Format gt Fill Color Fireworks o In toolbar Fill Color icon o Via the Properties dialog of the selected Widget Under Background Col or click the Set button o Inallcases a Color Chooser dialog launches See Using the Color Chooser in Chapter 5 e Fora Text Box you may assign a Background Image and tile the image i e repeat it horizontally and vertically to fill up the height and width of the box e Assigning a Background Image 1 Access the Properties dialog of the selected Widget 2 Under Background mage click the Browse button 3 A File Manager launches m You may choose from among the existing images You may upload new images to the scrapbook See Uploading Files in Chapter 8 The background image may be tiled as follows m Under Background check the Tile mage checkbox e The Border property of a selected Widget may be changed via the Widget s Properties dialog Under Border Col or click the Set button A Color Chooser dialog launches See Using the Color Chooser in Chapter 5 Copyright 2006 Netopia Inc All Rights Reserved 34 of 77 eSite Builder User Manual and Training Guide 2 1 Revi
63. les to your computer you must un zip or extract them Windows XP operating system has its own native file extraction capabilities Otherwise WinZip and WinRAR are the most common applications for compressed file extraction lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 44 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER SEVEN WIZARDS Wizards are dialogs specifically designed to lead you through a particular process In the eSite Builder Editor wizards aid in the creation of certain sets of Widgets Navigation Button Generator Use the Navigation Button Generator to easily create simple or unique buttons for your Navigation Bar To activate the Generator select nsert gt Navigation Buttons from the menu Select the option below that suits your navigation needs Creating text buttons Use these instructions if you plan to create simple text buttons that may or may not include color backgrounds or image backgrounds and or create buttons that include mouseovers Note The following instructions merely explain functions included in the Generator Plan to experiment with a variety of styles until you achieve your desired look Click Show Preview in the Wizard to view your design as you create it 1 Select nsert gt Navigation Buttons to activate the Navigation Button Generator Click Next 2 IntheSelect Pages section that appears select the pages fo
64. letely below the footer bar line to make them a part of the footer When finished select Fi e gt Save to save your work Open a new browser window to view your template Tools gt Open Browser Window Contact Info Global footer line D S Double click to edit Replace this sample text with some text of your own To toggle the footer line s appearance while editing select View gt Show Footer Line lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 22 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER FOUR WORKING WITH WIDGETS Widgets are the building blocks of eSite Builder Web pages Regardless of which editing environment Page Layout or Template Layout you are in Widgets play the role of containing content Widgets come in four fundamental forms 7ext Boxes Image Boxes Color Accent Boxes and Flash Objects Additionally there are special Widgets which are adapted to serve specific purposes Creating New Widgets 1 The eSite Builder Editor offers three ways to create a new Widget e Select the desired type of Widget from the nsert menu e n some cases you may execute the corresponding command with a shortcut key operation e Click the corresponding button in the toolbar 2 In the case of Image Boxes and Flash Objects you are prompted to choose from among the existing Images or upload new images to the scrapbook see Uploading Files in Chapte
65. ltiple discontinuous items e Delete Selected Items Del ete also works e Press the Restore tems button to rescue the items If you wish to return any rescued items back to where they were originally stored you have to manually cut them navigate to the original folder and paste them there e Press the Fi ni shed button to return to the My Web Site area Screenshot 13 Deleted Files Section of File Manager 2 eSite Builder File Manager Deleted Files Web Page Dialog Current Folder Deleted Files v al EE Name Size Type Date o fag nxg 5KB NXG File 06 Apr 06 12 36 Restore ltems Finished Name size Type Date images File Folder 07 Mar 06 09 34 Z Flowers 3303 jpa IPG File 29 Mar 06 11 34 buffslo_sm if GIF File 29 Mar 06 11 34 contact nxg B NXG File 06 Apr 06 13 03 _ favicon ico KE ICO File 06 Mar 06 14 56 El fowers jpg jpg 51KB JPG File 29 Mar 06 11 34 help i aif KB GIF File 03 Apr 06 13 42 home gif al GIF File 23 Mar 06 11 53 home nxg B NXG File 10 Apr 06 16 03 ljenalone jpg IPG File 07 Mar 06 09 35 S logo_tag_transp gif 51KB GIF File 03 Apr 06 11 09 master nxt NXT File 07 Apr 06 02 27 Lal ntpaloga jpg OKB JPG File 07 Mar 06 09 34 products nxg K NXG File 06 Apr 06 13 03 Copyright 2006 Netopia Inc All Rights Reserved 52 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Making Use of Shared Libraries eSite Builder maintains Shared
66. lue CSV format Examples of applications that open CSV formatted files are Excel and any simple text editor You may periodically sign in to check for new data and download it to your computer Providing that visitors have submitted information through the Form in the meantime eSite Builder dispenses an up to date file since your last downloading visit 1 Access the Advanced Settings of the Form 2 Click the Form Submissions button e The Form Submissions dialog contains two panes o The top pane is for New Submissions This shows the file if any of visitor submitted information that you have not yet downloaded o The lower pane is for Prior Submissions This ts an archive of any files that you have already downloaded and not deleted from the site 3 To download the most current file move the file from the New Submissions to the Pri or Submissions e Click the Retrieve New Submissions button 4 Download a file to your computer as follows e Double click the file name in the list of Prior Submissions OR Select the file name and click the Down oad button e Inthe File Downl oad dialog that appears choose the Save option 5 If you wish you may delete any of the files from the list of Pri or Submissions e Select file in list and click the Del et e button 6 To exit the Form Submissions dialog simply close the window Upon downloading the zipped CSV fi
67. ly in its acceptance of a color or image background The main differences are as follows e You cannot type text directly into the Area Box only subordinate Text Boxes and Submit buttons placed within an Area Widget may contain text e You cannot set padding attributes e You cannot view or modify the HTML source for the Widget Form Fields Custom Form Input Types are composed of Fields and Labels The Fields in Custom Forms like Area Boxes are similar to Text Boxes but again you may not type text directly into them modify the padding attributes or view the underlying HTML Source However Fields as well as Area Boxes possess additional settings over and above those for Text Boxes The Labels that accompany Fields however are simply Text Boxes and behave as such see above Submit Buttons Forms contain Submit buttons which trigger scripts that run as part of the interactive nature of Forms Submit buttons like Fields and Area Boxes are akin to Text Boxes but you may not modify the padding attributes or view their underlying HTML Source Submit buttons do accept text input but only through the Advanced Settings tab of their Widget Properties see below Mortgage Calculator The Mortgage Calculator is a tool that allows visitors to project how much they would have to pay per month to buy a new home The Mortgage Calculator makes use of an Area Box and contains many Text Boxes Fields and Submit buttons However the content of the M
68. m being added The content of Text Boxes however is still editable unless you lock each individual Text Box 1 Open the Page Layout or Template Layout you wish to freeze 2 Access the Page Properties Dialog a In menu File gt Page Properties OR In toolbar Page Properties icon b Check the Freeze page layout to prevent moving and resizing of wi dget s checkbox c Click the OK button OR Click the Toolbar Icon a In toolbar Freeze Layout icon e Frozen layouts show a thick dashed maroon border e Repeat the same procedure on a frozen Page Layout or Template Layout to unfreeze it Copyright 2006 Netopia Inc All Rights Reserved 56 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Adding Page Comments Page Comments provide a means to make notes to you or to other super users they are not visible to visitors or users with lesser privileges 1 In menu Tools gt Show Comments OR In toolbar Page Comments icon 2 Click the padlock icon to enable editing 3 Type or edit comments in the text area e Ifthe Page Comments are blank the toolbar icon shows a yellow Post It e Ifthe Page Comments are not blank the toolbar icon shows a red Post It Updating the Dictionary You may customize the Editor s built in spell check dictionary by adding words that you would like to be considered correct You may also remove any words that you or another super user have ad
69. m to create your Template See page 21 You can also directly edit the CSS files online See page 73 Widget inspector Use the widget inspector as a shortcut to altering the layout of images text boxes and other features The widget inspector opens a dialog box that enables you to change the position size and padding of these features in real time See page 26 Enhanced hyperlink options Control the design and placement of the pop up windows you create See page 27 Textbox scrolling Exercise greater control over how text in text boxes flow on your eSite pages For a given text box design you can choose to create a text box large enough for the reader to view all of the text or you can create a scrollable text box See page 31 Adding images to text boxes Utilize the ability to add images to a text box and then wrap the text around it See page 32 Tables Add tables to your eSite for a more professional and creative appearance See page 35 Sign in logo positioning Change the position of the sign in logo when its current position conflicts with your page layout See page 77 Copyright 2006 Netopia Inc All Rights Reserved 7 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER ONE INTRODUCTION TO ESITE BUILDER How eSite Builder Works eSite Builder is an online Web site design and management application that relies fundamentally on a graphical visual interface the eSite Builder Editor
70. mplate as you make significant changes Apply the template to the site a In menu Edit gt Choose New Template b Select the Template you just created c Click OK Customize your Home page You may add new Text Boxes Image Boxes and Color Accent Boxes as you see fit You may wish to repeat Step 2 or 3 with the other page that comes pre packaged with the eSite Alternatively you may simply open the File Manager and delete the page Copyright 2006 Netopia Inc All Rights Reserved 69 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Creating and Placing versus Copying and Replacing When does crafting unique elements and customization yield to assembly line tactics You may create new Widget after new Widget size them Individually and place them individually and you could end up with a perfectly consistent neatly aligned site The alignment and distribution tools Make Same Width Height tools and the Size and Layout tab of the Widget Properties dialog all serve to coordinate and match Widgets created independently of each other However another strategy for creating Widgets gives effective results and does not stifle creativity Once you have put in a certain amount of time and effort into making a Widget look a particular way and placing it in a specific spot it may be more efficient to copy it paste it and modify it than to start over from scratch Segregating Content and Design Dete
71. mversi on I1G2345 A sample schema is shown below Sample Schema 1 lt xml version 1 0 gt lt NAV title Miss first name Alyssa Surname Dennel er company name Alyssa s Flowers phone _number 785 840 5555 fax number 785 840 4555 email address alyssa hot mail com addressl 1903 Mass address2 Box 2001 city Lawrence state KS zi p 66044 country USA gt Copyright 2006 Netopia Inc All Rights Reserved 58 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Sample Schema 1 continued 1 lt MENU title Company url home nxg target _self gt lt MENU title Home url home nxg target _ self gt lt MENU gt lt MENU title About Us url aboutus nxg target self gt lt MENU gt lt MENU gt lt MENU title E Store url products nxg target lt lt MENU title Products url products nxg target lt MENU gt lt MENU title Services url services nxg target lt lt MENU gt lt MENU gt lt NAV gt 1 _self gt PSL Ds S 1 oself gt The schema is accessible to Flash movies and browsers and provides site page and flash widget specific data The schema contains a top level lt NAV gt element with attributes for site contact information Table 1 lists available attributes see below Table 1 lt Nav gt Attributes Siteinfo xml lt NAV gt Attribute Description Zip Zip Copyright 2006 Netop
72. n o A Color Chooser dialog launches e ln menu Format gt Text Highlight or In toolbar Text Highlight icon o A Color Chooser dialog launches e Inmenu nsert gt Hyperlink OR In toolbar Hyperlink icon oR Ctrl K Copyright 2006 Netopia Inc All Rights Reserved 29 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Screenshot 9 Selecting the Text in a Text Box I ELLE LEED COPEL EE EP ELEC EP EEE EET EP CEE TCE EE E cE Our service offers a wide variety of options j z 7 e S S tanner nanan nen nan ee naar edn naan nan en nan ea dame enna nan deena tee 5 You may also edit the text format at the level of paragraphs or blocks of text e You may have the text selected or deselected o If the text is deselected the effect of the given command is restricted to the paragraph in which the cursor is located e Inmenu Format gt Text Justify gt command as follows o Left OR In toolbar Justify Left icon OR Key Ctrl L o Center OR In toolbar Center Text icon OR Key Ctrl E o Right OR In toolbar Justify Right icon OR Key Ctrl R o Full OR In toolbar Justify Full icon OR Key Ctrl e ln menu Format gt Block Indent OR In toolbar Block Indent icon o This pushes the paragraph to the right e Inmenu Format gt Outdent OR In toolbar Remove Indent icon o This reverses the effect of the Block Indent comman
73. nc All Rights Reserved 13 of 77 Screenshots 2 amp 3 Saving As Edt View Inet Format Took Layout Help t title or headline here Replace this sample text with some text of your own File Edt View Inset Format Took Layout Help OF ele F soe IM aA S e e aTa aaa a TF Ble sage style i FontFece vse v 7 uA Y Ee EBM i if Fe eSite Builder User Manual and Training Guide 2 1 Revised 042106 Setting a new Home page Your eSite includes an initial pre set Home page but you can make any of your pages the new Home page l In menu Tools gt Set Home Page 2 A Set Home Page dialog launches Click the arrow to select the page you wish to make your new Home page Click OK lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 15 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER THREE TEMPLATE LAYOUTS The eSite Builder Template Layout environment governs Template design and implementation as well as the application of an overall global color scheme and font settings to an eSite Building Templates as with the pages is simply a matter of dressing them up with various Widgets in specific positions and sizes However it is the role of Template Layouts to present a uniform appearance and style across some or all of the pages in the eSite whereas Page Layouts support the content of the particular pages see Chapter 2 What goes in a Page and
74. netopia Netopia eSite Builder Version 2 1 User Manual Copyright 2006 Netopia Inc All Rights Reserved 2 1 Revised 042106 eSite Builder User Manual and Training Guide 2 1 Revised 042106 TABLE OF CONTENTS ADIGE NO OMECIILG TTT 2 QUEZ S NEW A auntaat ae ntadadadlaiGteahannte riabounincaeaubangnnntodadaa uken se bakuin TTT 6 MIVA SILOM NN 2 a E E EAE E O 7 Chapter One INtroduction e este Ea aa a tuuthaaetebls 8 How esite B lder WOKS T 8 SV SECM eT ar sre dete caw th tatvadwraate r Cetanaa tide edredrandiuns onadisudshan T 9 FOr B ilding and EGItING eSite BUNG ER incsvicssiczadds civuedvaviavaaesbahin a Ea 9 OE WCW ING CESS TETE HHT 9 SONNO MO S SIRE BONG Cli TTT 9 Reading VISUal AIG T 10 Previewing TG CSCC sac ccirnnehwsnciinnanevietadi enn canteens vaaeisesiirienenlecaua a elad E A 10 Chapter TWO Page Layouts s rs ccissnanscianesmansecarsasessanaanenanuietacemmeniannnaanssaatniensseaiaeeresers eeemaenaes 11 creatino a NCW PAG L 11 EGO ENS Pade POR RTT 11 Editing the Page lt He a d gt MORIN GUO erinan savanna tae Na AO DEN sake AOAO 12 Ss gie R NE Page Layo Ubera a E E A 12 SAVING versus SAVING AS essri a a a E eae eeawanNaah aS 13 VIC aS a a 13 SVINGAS TTT 13 Navigating DEWE Pad eS or E E A aa A EAE 13 Sewing a NEw HOME 09 OS ceara a e a N a A 15 Chapter Three Template Layouts taasewitindcmium ceramide etnies eared ate aaron 16 What goes In a Page and what goes in a Template eee eee e eee 16 Toggling
75. nter the details of your home loan in the corresponding fields b The Mortgage Calculator carries over the information from the previous tab c Click the Cal cul ate button d If you wish to start over click the CI ear button 3 Proceed to the My Tax Savings tab a The Mortgage Calculator carries over the information from the previous tab b Inthe Combined Tax Bracket drop down menu select the percentage that applies to you c Click the Cal cul ate button Copyright 2006 Netopia Inc All Rights Reserved 75 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Bugs Fixes and Work Arounds Resolving Issues with eSite Builder Work Around Offering Unsupported Files for Download eSite Builder displays and directly interfaces with only a handful of file types due to its proprietary nature However you may upload a file of any file type whatsoever into the File Manager Tools gt Manage Files or CTRL M then press the Upload button in the left pane Once the file is in the File Manager it is a simple matter to type out its location in the site and link to the file With the correct link to the file visitors may download unsupported file types such as Word doc or Acrobat pdf files e eSite URL Folder Filename File Extension where is the subfolder or subfolders if any in which the file is located Work Around Creating
76. nual and Training Guide 2 1 Revised 042106 ADDIVING HYDEFIINKS TO WIGGEES TTT 27 Advanced Manibulation of WAG CES criniera a a a EE A AA E E TGS 28 Ts Gana a A a a 28 STE E A A aa eden 28 Wiothand Height Matehihg T 28 CHG HAG Ee STOO L T 28 EOIEIG VWWIGGCE COMECIIE TTT 29 TEX BOXES E EA A EAA A a 29 Maga OX SS a e a T N RER H A E E n as 31 Adding Images to Text aT 32 COIOrACCENE eT 33 PIAS ODI CCES arer a a a a a o A 33 Applying Backgrounds and Borders to WIdQ tS cccccecseceeceeeeeeeeeeeeeeeeeeeeeeeeaeeeeeeeseeneeesantaeteeas 34 ste Tista pne E A TAEA E A TEO A EAT E AEE EE ATT TE EA E E T EE A S ATTE 35 SPECI WV IGGOUS iria a a a 36 Aroa BOXO T 36 OE FUN Field T 36 SUE Tae 36 Mortgage C al CULQLOR T 36 COMA MOE a CON aaminen cca aan taunt ae dna orauis tana satiaentecciatane a coca eemasnine 36 Chapter Five Additional Editing TOONS sss eee eee 37 USNO RUIG daria a bi E E AAA A Aa 37 Using SIVA tO GN ai alee ceases T on tsa Guar nana Shan hs a a eataco bane eet ee needa anata ee 37 USINO benr CS sineren e dan aeaaene tear i adh eannisidasntiansentaaid bene vas TNN 38 USING ENE COOK GHOOSER TTT 39 SMES GING T THT 40 Displaying Ene W Ord Count ora Page neurriei a A Montane 40 SEEE 31s E A E A E A E E AE EEA EAN E EE EE aon E E E 41 Custom FOM S cerien a ieeihus carmen Salemi ences ei emenataenees 41 Tease ai 020 alo Vien t o caer ene er ten Ter E rer err nen rer ery rere Te crn rrr 41 Input Types and Their eee n sls CT 42 S
77. o which you would like to export assets 3 In the lower pane select the files you wish to add to the Shared Library e Shift click to select multiple continuous items e Ctrl click to select multiple discontinuous items 4 Press the Export to Library button to upload the selected files to the Shared Library Press the Finished button to exit the eSite Builder Shared Libraries dialog lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 53 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER NINE MANAGING YOUR ESITE Use the following features to market and manage your eSite Using Search Keywords View this feature to learn which keywords are generating traffic to your eSite To access select Vi ew gt Search Keywords from the menu A Search Keywords window appears that shows which words visitors typed into various search engines in order to find your eSite You can view the current month and the previous month s statistics Select Print View to print and or save this information e Search Keywords Used to Discover This Sit February March Keyword Ciocurrences Keyword Occurrences Flowers orchids tropical Current Month Previous Month Hovers Keyword flowers dendrobiurn dendrobiurn hawaii hawaii orchids menehune orchids tropical tropical Thursday March 30 2006 9 34 55 AM Using Change History Use this f
78. opia Inc All Rights Reserved 76 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Changing the Position of the Sign In logo on a Page Occasionally the default position of the Sign In logo which is where you sign in to the eSite conflicts with the layout design you have in mind for the eSite To change the Sign In logo s position on the eSite pages do the following 1 Open your Template Edit gt Template Layout Note If you change only the Home page or another page as opposed to the template the Sign In logo will appear in its default position on the pages you do not change By moving the Sign In logo on the template all pages which use the template will follow the override values If changing the Sign In position on the Home page is your priority consider hiding the logo on all other pages 2 Inmenu File gt Page Properties A Page Properties dialog launches 3 Inthe Override Sign In Positioning section check the Left and or Right options and enter the new pixel px values Click OK 4 Save the page File gt Page exit the eSite Editor and then view the eSite to see the new Sign In position Note To switch back to the default position simply uncheck the Left and or Right options The Sign In logo will appear in its default position after you save the page lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 77 of 7
79. ortgage Calculator is fixed none of the component Widgets Is editable To view and use the Mortgage Calculator as a visitor would you must preview the page or view the eSite in its deployed state i e as it appears when you are not signed in Contact Information Contact Information Widgets are Text Boxes and behave as such however they are not editable If you wish the data changed you must contact your Service Provider lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 36 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER FIVE ADDITIONAL EDITING TOOLS Using Rulers Display and use the Ruler to align images text and other widgets on a page To access the ruler select View gt Show Rulers from the menu Select ruler markings that are spaced 10 25 50 or 100 pixels apart Dadast7 s a ealo e al gt Se v Fotree TE Ruler bar displayed 1090 E meer i in the eSite Editor In this example the marks are spaced 25 pixels apart START ae CONT ENTS 7 c HERE E Fa D Welcome Small carets marks show the start end B ngan and midpoints of the selected image Using Snap to Grid Use the Snap to Grid feature when placing and aligning widgets on a page When activated a widget Is automatically aligned by being snapped to an Invisible grid as you move it Access this feature by selecting View gt Snap to Grid from the menu
80. ou will also incorporate the button that will redirect the visitor to your Home page of the eSite 1 The first page of the eSite must be named home nxg You will need to create your Splash page on this file 2 In menu File gt Open gt home nxg 3 Follow the instructions above under Wiping the Slate Clean Step 2 or 3 to clear the Home page of extraneous content 4 Create your Splash page design by inserting your graphics or text Add a link to the Click here to Enter button that points to your eSite s home page 6 Apply the template file to the Splash page Edit gt Choose New Template Then select the template file nxt that you created using the steps above under Creating the Template File 7 Click Save Ga Copyright 2006 Netopia Inc All Rights Reserved 72 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Opening and Editing Files in a Text Editor Files with the extension txt html or css can be edited directly online Flash data files can also be edited 1 In menu File gt Open 2 Select the desired file A simple text editor window appears 3 Edit the file and click Save to save your changes and close the file Select Cancel to close the file without saving your changes Note See Up oading Files for more information on uploading text html and css files to your eSite Organizing Your Site Understanding the function of the File Manager
81. ow different types of HTML tags are displayed with your font and color selections lt H1 gt lt H2 gt lt SPAN gt lt BLOCKQUOTE gt v http dtaylor nxg 1 ks netopia com ta editor dialogs fontscolors selecttheme jspy D Internet Copyright 2006 Netopia Inc All Rights Reserved 21 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Setting and Clearing the Background I mage e n menu Edit gt Colors amp Styling gt Background Image gt Set Image The File Manager launches e In menu Edit gt Colors amp Styling gt Background Image gt Clear Image Toggling Browser Centering On and Off e Enable the Browser Centering feature if you would like the overall page alignment of the Template Layout to be set to the center In menu Edit gt Colors amp Styling gt Use Browser Centering e Keep the Browser Centering feature disabled this is the default setting if you would like the overall page alignment of the Template Layout to remain to the left If you have enabled the Browser Centering feature repeat the procedure above to disable it Adding A Footer to the Template A footer includes information you typically wish to display at the bottom of every page that uses a particular template such as company name address and telephone numbers To place items in the footer make certain you are in the template layout environment Edit gt Template Layout Drag text or images comp
82. r midi nxq 6 testfolder midi nxq 3 Services testfolder mp3 nxq 7 testfolder mp3 nxg Talk Time testfolder nss nxg mee Products testfolder products nxg Produit testfolder products_ca m Home testfolder thisisareallylongl S gt a Copyright 2006 Netopia Inc All Rights Reserved 66 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 eSite Builder Editor Support continued If the assets associated with the Flash movie include an additional data file you may open the file for editing using the File menu s Open command The file opens in a simple text editor window containing Save and Cancel buttons see Screenshot 15 below Screenshot 15 Text Editor for Flash Data File Text Editor Web Pape Dialog THPORTANT NOTE 1 Each line starts and ends with an s sign These T signs ALWAYS need to be there gt sbuttconcolor 3332556 aflogancoloreDbb44iis iMainceler ISsLis5se SANIMtransperency 100 lt Enter up to 30 characters for your company name gt zlinei Cenpany Nameg Enter up to 40 characters for your slogan gt amp LING2eGeL YOU oe great Flash webaives Wrap Text hittpifidemo tate ks netopie comta editorhtnlere spy node editlesAfename Aowers xt _ lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 67 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 APPENDIX B
83. r 8 3 The Editor places new Widgets in an arbitrary position toward the upper middle of the window Interacting with Widgets e Hover the mouse pointer over a Widget the pointer changes to a 4 directional arrow cross e Click once to select individual Widgets See Screenshot 7 next page Eight handles appear evenly spaced around the border of the selected item It is necessary to select a particular Widget before any editing can take place e Double click to edit Widgets In the case of Text Boxes double clicking adds a thick diagonally striped border to the box and makes the text within the box editable See Screenshot 9 In the case of Image Boxes double clicking brings up a Properties dialog box You may modify parameters of the image and containing box or choose a new image In the case of Color Accent Boxes double clicking brings up a Properties dialog box You may modify parameters of the box only e Right click to bring up a contextual menu In all cases parameters of the Properties dialog are available in the contextual menu see below e The two ways to select everything in the given environment are as follows Key Ctrl A Right click in the contextual menu Select All Copyright 2006 Netopia Inc All Rights Reserved 23 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Screenshot 7 A Selected Text Box Accessing the Properties Dialog of a Widget Three ways ex
84. r placement on the page therefore if you delete the Form all associated Widgets disappear even if they are located outside the bounds of the Form Area Box Inserting Additional Text Boxes in a Form You may superimpose a Widget of any kind over a Form however such Widgets are independent of the Form If you wish to integrate a standard Text Box in such a way as It belongs to particular Form you must do the following 1 Copy any of the existing Text Boxes in the Form 2 Paste the Text Box 3 Enter the Text Box and replace the existing text with your desired content Note This is currently the only way to add a dependent Widget to a Form Consequently you are limited to adding dependent Text Boxes only you cannot add dependent Widgets of any other kind Copyright 2006 Netopia Inc All Rights Reserved 43 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Creating Multiple Forms In contrast to inserting new Input Types to a single Form it is also possible to place other Forms supplemental to and independent from the first on a given page To do so you must run the Form Wizard see Wizards below If there are multiple Forms on a page you must first select the Area Widget of the target Form before inserting a new Input Type Form Information Retrieval Once visitors have submitted information to you by means of a Form eSite Builder prepares a current zipped file of the information in comma separated va
85. r which to generate navigation buttons Note You can change the name that will appear on the button by double clicking it in the column titled Create buttons and then entering a new name Click Next when finished 3 Inthe Button Background section select from a variety of design options based on your needs a Configure Button Background Maintain the default option of Display different text labels b Button Di mensi ons Change the default Width and Height values if necessary Add a value to the Border Width only if you plan to set a Border Color c Colors and mages If you wish to generate simple buttons with no colors or images simply click Next to advance the Wizard and go to Step 4 below Otherwise modify the following settings by clicking set e Background Color Border Color Background Image When set the background and border colors you select appear behind the button text Instead of background color you can also use a background image Note If you decide to use a background color and a background image you must use a background Image with transparency e Mouseover Background Mouseover Border Mouseover Background Image When set the mouseover background colors and or images appear when the mouse pointer crosses over the button e Page Active Background Page Active Border Page Active Image When set these colors or images appear on the navigation button that corresponds with the curr
86. re available in 2 1 Enhanced Editing Tools Use Rulers Guides and a Snap to Grid feature to simplify placement and alignment of widgets such as images and text when editing a page or template See page 37 Navigation Button Generator Enhancement Specify additional mouseover and page active properties while creating buttons in the Navigation Button Generator See page 45 Global Footers Create a global footer that includes such information as company name address and telephone numbers This information is displayed at the bottom of every page that uses a particular template See page 22 Password Protected Pages Password protect a page to prevent visitors without knowledge of the password from viewing the page See page 12 Picture Gallery Wizard Enhancement Specify Title Size when creating a look and design for the Picture Gallery See page 47 Hyperlink Properties Enhancement Include Anchor names when specifying hyperlink properties for an image See page 27 Keyword Search View a list of keywords that generate traffic to you eSite See page 54 Copyright 2006 Netopia Inc All Rights Reserved 6 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 WHAT S NEW IN 2 0 The following features are available in 2 0 Change the Home page Set any of your eSite pages to be the new Home page See page 15 Uploading editing and using Cascading Style Sheets CSS Upload CSS files to your eSite and use the
87. rmining what belongs in the Page Layout and what belongs in the Template Layout Technically it is not absolutely necessary to make use of the Template Layout environment One could incorporate navigation elements and banners into every individual page in the site Conversely one could create a unique Template for each individual page in the site However making a distinction between the Page Layout and the Template Layout comes in handy when you want certain elements to be exactly the same across the whole site or a set of pages For example you may wish to have a banner a set of navigation buttons and a global header to be in exactly the same place at the top of each page Such elements are best placed into a Template Copyright 2006 Netopia Inc All Rights Reserved 70 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Global Settings versus Local Settings Using the Color amp Font Stylesheet instead of customizing particular elements On an eSite you can either set your settings globally or locally A global setting is applied to every page on the eSite by using the Color amp Font Stylesheet A local setting is applied instance by instance by customizing particular elements on each layout Keep in mind that local settings override global settings If you are looking for a more consistent look and feel throughout the entire site then you would edit the global settings Global Settings The settings you modi
88. s RSS reading capabilities Such as Mozilla Firefox or dedicated RSS reader applications may click on the link to subscribe to your gallery The visitor is then automatically notified whenever you add new pictures to the gallery View All mode You may click the View All link to see all the images arranged top to bottom lt End of Chapter gt Copyright 2006 Netopia Inc All Rights Reserved 48 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 CHAPTER EIGHT MANAGING ESITE ASSETS Working with the File Manager The File Manager represents the files that comprise your eSite Typically the File Manager initially displays the root of the site with the individual files that make up the site and an i mages folder that contains all of the image files in use or stored for possible use on the site 1 ln menu Tools gt Manage Files OR Key Ctrl M 2 The File Manager launches See Screenshot 11 next page Its components are as follows e A left pane with three buttons o My Web Site This is the default setting whenever you open the File Manager o Upload Files o Deleted Files e A main pane showing the functional element selected in the left pane e A drop down menu titled Current Folder at the top left e A set of toolbar buttons at the top right hover the mouse pointer over the buttons to trigger an identifying label Go Up a Level This control is tied into the drop
89. sdictaaddatnmsannetiinladeoimaaaateinmaiaboiniuaominsnientmlagdamaudeabon 70 Global Settings versus Beleni 71 GIODal SENINGS aaria A a NA 71 LOC GUC na a E A A 71 HOW t Make a Splash sL 72 Creating the Template ay OU TT 72 Creating the Page EU a TTT 72 Opening and Editing Files Text s Te iiaeia A A 73 IZING VOU TTT 73 Widget PFO sa LT 73 COMDINING WIG T 74 Preferred Image File Formats and DIMENSIONS ccceccecseceececeeceeceeeeeeeeeeseeeeeeeseeeeeeeeesaueaereeseegeres 74 Reverting an Image to IES Ordinal SIZO TTT 75 Previewing Deployment of the Mortgage Calculator eee e e e e e K ee 75 Copyright 2006 Netopia Inc All Rights Reserved 4 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 BUGS FIXES and WOFK ALOUINGS iisiecididviannitblihiainite mnrieeldutiehh anaiaddabibabialadaiiatnia aa i 76 Work Around Offering Unsupported Files for DOWNI0 d cccceceeceeseseteeeeeeeeeeeeaueeeaueeeeesetass 76 Work Around Creating Image Maps AKA HOt Spots see ee e ee eee 76 Bug Fix Inconsistent Display of Text Boxes in Mozilla FirefOx ccccccecseeeeseeeeeseeeeeeeeeeeeeeeasteeenes 76 Changing the Position of the Sign In logo ON a Page cceesecseceeceeseeeeeeeseeaeeeeeessueeeseeeeeaeeeeaetaetegs 71 Copyright 2006 Netopia Inc All Rights Reserved 5 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 WHAT S NEW IN 2 1 The following features a
90. sed 042106 Adding Tables 1 In menu Insert gt Table 2 Via the Insert Table dialog set your preferred table attributes Note For additional help on creating tables click the Help button located in the top right hand corner of the Insert Table dialog and then click any attribute for a description as shown below The Insert Table dialog box z Click and drag the insert Table Web Page Dialog 00 over any attribute to learn more about its function Insert Table Overall Table Layout Table Rowe 2 ell Fading Columns 2 Spacing 2 Alignment Table width lt 20 poe ao i This toggles the table width between pixela and percentage width relative to the page Appearance Border Width 2 Showy Empty Table Cells Color Background Color BG Image Arne Cancel 9 Internet Copyright 2006 Netopia Inc All Rights Reserved 35 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Special Widgets Area Boxes The Area Box serves strictly as a container for other Widgets such as Form Widgets Submit buttons not Navigation Buttons but script triggering buttons and Text Boxes You cannot invoke an Area Box as an independent Widget they emerge only when you initiate certain other special Widgets namely Forms Picture Gallery and Mortgage Calculator The Area Box is most similar to the Text Box most notab
91. sion of a Color Accent Box with a partial border by placing a Color Accent Box of one color on top of a larger Color Accent Box of another color and aligning two sides of the two boxes e Puta black or gray Color Accent Box behind below and to one side of an image to mimic a shadow e Give an image a color tint by lower the opacity of the image and putting a colored Accent Box directly behind it Preferred Image File Formats and Dimensions JPEG versus G F Usage Whenever possible pictures should be in J PEG format J PEG images are generally higher in quality than GIF images and the Image Scaling feature of eSite Builder is currently configured only for the J PEG image file format When used at all GIFs should be used for banners navigation and generally design oriented uses If a GIF absolutely must be used for a picture it should be kept relatively small You should keep GIF images within the 775px by 575px range such that the image fits on a page without scrolling at 800X600 screen resolution and aim for even smaller sizes in practice Examples of satisfactory target dimensions for GIF images follow e 750px in width by 150px in height top navigation banner e 150px in width by 450px in height side navigation banner e 400px in width by 300px in height portrait Copyright 2006 Netopia Inc All Rights Reserved 74 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Reverting an I mage to its Original Siz
92. te Builder User Manual and Training Guide 2 1 Revised 042106 Script Initialization The following code illustrates how an ActionScript XML object can be initialized using the special eSite Builder server URL see Sample Schema 4 below Sample Schema 4 P lt i ase ie in ase ep ioe reed EE Cae a ee de see eh re rans piesa Routine to load site info into XML obj ect D ER ee De ke ee ee ea hs global nf_loadSiteinfo function stop the movie when loading info Pootass toph var siteinfo new XML ignore whitespace Ssiteinfo ignoreWhite true set global variables when XML is completely loaded using the onLoad callback function Siteinfo onLoad function Success if success global gNavNode nf _findNode this NAV global gSiteinfo this else trace error loading site info xml root play l var Siteinfopath tg siteinfo xml smversion root smversion amp flashids root flashid amp sitepage root sitepage load the siteinfo siteinfo load siteinfopath global nf_findNode function node name Copyright 2006 Netopia Inc All Rights Reserved 61 of 77 eSite Builder User Manual and Training Guide Sample Schema 4 continued utility function to find a named node in an XML object if node nodeName name return node else for var 0 lt node childNodes ength var result global nf_findNode node childNodes i
93. the Form Wizard Chapter 7 to configure the Form fields in a guided dialog or you may compose and structure individual Form components Input Types one by one according to your own designs The latter method produces Custom Forms see below All Forms regardless of the method you use to initiate them share certain common features e n addition to the standard complement of Widget settings all Input Types bear an additional array of settings specific to them e In addition to the Input Types with which you fill a Form there are three default elements Introductory paragraph a standard Text Box Legend for code indicating what is required for submission a standard Text Box Submit button not a Navigation Button but a script triggering button e As you insert Input Types to a Form eSite Builder selects the existing Form by default as the destination for the additions providing there is only one Form on the page However you may add more than one Form to a page See Creating Multiple Forms below Custom Forms If you are creating a Custom Form you may use the Tools menu or the dedicated toolbar titled Form Input Controls which is disabled by default You may enable the Form Input Controls toolbar as follows e View gt Show Toolbars gt Form Input Controls Inserting a New Input Type l Insert gt Form gt Input Type see Input Types below OR In toolbar Input Type icon 2 A dialog launches with th
94. tings include Title and Description fields e Inthe Appearance page you find settings for the visual framing of the thumbnails and labels Changing the settings from the default is optional e Inthe Display Options page you find settings for size and spacing of the thumbnails as well as for the behavior of the Area Box in the event that the Gallery is larger than the containing Area Box overflow Changing the settings from the default is optional 4 Click the Fi nish button Copyright 2006 Netopia Inc All Rights Reserved 47 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Editing Picture Gallery Settings e You may return to the Wizard and modify settings Double click the Picture Gallery Right click the Picture Gallery in the contextual menu Gallery Wizard e You may freely move and size the Area Box on the page and access and modify the properties of the Area Box Previewing Deployment of the Picture Gallery and Detail View e You must preview the eSite or view it in its deployed state to interact with the Gallery as a visitor would When you click on an image in the Gallery proper the Detail View launches Slideshow mode Detail View window launches in Slideshow mode You may manually advance through the images or engage the Play link to view the Slideshow in a timed presentation e Slideshow mode gives the option of enabling a RSS feed Visitors using browsers that posses
95. tures sections and then click Test Pop Up to view your results When finished click OK Copyright 2006 Netopia Inc All Rights Reserved 2 1 Revised 042106 e Insert Hyperlink Web Page Dialog Hyperlink Pop Up Window Location Select a page to link to Select Page v Or enter a web or e mail address here Options O Open link in new winfow pop up options Link Title Anchor Name e Insert Hyperlink Web age Dialog Width Height Top Position px Left Position px C Auto center window Features Note some browsers may ignore certain options O Directory Search Bar C Allow Scrolling C Resizable Window C Show Menus L Show Toolbar C Show Location C Show Status Bar Test Pop Up http dtaylor nxg1 ks netopia com tg editor Internet 27 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Advanced Manipulation of Widgets The eSite Builder Editor comprises features that aid in the positioning and sizing of Widgets in relation to one another These features save you time when you are satisfied with the position and size of a particular Widget and would like to simply make other Widgets conform Alignment 1 Select the Widget to which the other Widget s should be aligned 2 Hold the Shift key down and click on the Widgets that should align to the first Widget 3 ln menu Layout gt Align side OR In toolbar Align side
96. under the complete control of the Flash programmer however the eSite Builder editor supports simple text file editing via the browser to allow Fulfillment representatives to modify these parameters for a specific Web site Copyright 2006 Netopia Inc All Rights Reserved 65 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 eSite Builder Editor Support The eSite Builder editor supports Flash player settings via the Flash widget properties dialog see Table 2 below Table 2 Flash Movie Parameters Flash Movie Parameter Description Additionally the Flash widget properties dialog allows you to specify the navigation menu hierarchy for a specific Flash widget see Screenshot 14 below NOTE This feature requires a specific naming convention for the Flash movie file In order for the Navigation Menu panel to appear in the properties dialog the movie file name must begin with nxg e g nxgcircles swf Navigation Menu Screenshot 14 Select pages from your site and use the arrow buttons to arrange them on the Navigation Menu in Flash Object navigation menu Double click over page names to edit Special Effects Tab All pages on your site Pages shown on navigation menu Flowers fowers nxg 1 flowers nxg a Home hcea index nxg 2 hca index nxg Home home nxg 3 home nxg we Page page nxg 4 ipage nxg RTE rtecutpaste nxg 5 rtecutpaste nxg Services testfolde
97. urrent Page Layout as the basis of a new page in the site you must type a unique file name for the Page Layout e If you wish to overwrite a previously existing Page Layout file with the current one you must select the Page Layout file to be overwritten from among the files listed or type in its file name a The File name field is selected You may enter a file name of your choice See the description of the Filename in the Editing the Page Properties section above b Inthe Nickname field under the Additional Save Options section you may enter a name of your choice See the description of the Nickname in the Editing the Page Properties section above 3 Click the Save button OR Key Enter Navigating between Pages The eSite Builder Editor provides two ways to get to another page from the current one as follows e ln menu File gt Page Name If changes have been made to the current page since the last save a Save Changes dialog launches Choose whether to save the changes reject them or cancel back to the current page e Inmenu File gt Open OR In toolbar Open icon a A Save Changes dialog launches if you have made changes see above b The File Manager launches in the form of a File Chooser dialog c Select the file representing the page you wish to open Note that the files are given with their file names only not their Nicknames Copyright 2006 Netopia I
98. use pointer moves across the image m Border You can add a border color that appears when the mouse pointer moves across the image Copyright 2006 Netopia Inc All Rights Reserved 31 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 o Navigation This control allows you to attach a hyperlink to the image Click set to access more options for setting hyperlinks see Applying Hyperlinks to Widgets for more information o Filter Effects These controls allow you to apply special filters to the image without altering the original image file You may preview the effect in the Examp e Pi cture to the right of the controls m Grayscale Casts the image in black white and shades of gray Invert Colors Flip Horizontal Flip Vertical Opacity X Ray A combination of the Grayscale and Invert Color effects Lowering the opacity value from 100 makes the Widget more transparent Note Opacity comes in handy when you wish to allow an object that is behind via layer ordering a partially transparent Widget to show through the Widget Such posterior objects may include elements of the Template Layout as well as other Widgets in the Page Layout For example you may place a Color Accent Box with a colored background behind a partially transparent Image Box and the background color of the Color Accent Box blends with the foreground image Note that currently Internet Explorer
99. y view eSites on any operating system Windows Apple Linux etc provided you use a modern browser which is to say one that supports Cascading Style Sheets level 1 CSS 1 The following is a partial list of acceptable browsers Microsoft Internet Explorer 4 x CSS 1 support is not 100 at this level Microsoft Internet Explorer 5 x or higher Mozilla Firefox 1 x or higher Apple Safari 1 2 or higher Opera 7 or higher nternet Explorer is no longer supported for MAC users due to Microsoft s discontinued IE support for MAC Signing into eSite Builder 1 In the lower right of the page click the Sign In icon 2 In the Sign In page that launches enter your username and password and click the Submit button 3 If your login is successful the Host window launches 4 The eSite Builder Editor window launches e f the eSite Builder Editor does not launch automatically click the Start Editor button in the Host window e As the eSite Builder Editor launches you may check your version of Java to make sure it meets the system requirements for eSite Builder see section above o Inthe upper right of the page click the Check J ava Version link o A pop up window launches to inform you whether your version of J ava complies e Give the eSite Builder Editor about 30 60 seconds to load o Key commands for eSite Builder do not work until the eSite Builder Editor is fully loaded Copyright 2006 Netopia Inc All Ri
100. yed in a Text Box that Is large enough to show it If you want a smaller text area to appear on a page select Scrollbars to create a Text Box that contains scrollbars for readers to use Select Hidden if you want excess text to remain hidden e The Layout tab You can also use the Widget Inspector o Size amp Position o Padding These settings control the internal margins of the Text Box Note mages can be added to text boxes See Adding mages to Text Boxes below I mage Boxes 1 Access the Properties dialog of the selected Image Box see above 2 The Properties dialog is divided into three tabs e The first tab also titled Properties offers three sets of parameters o Border o Background o Picture m The Browse button brings up the File Manager m You may choose from among the existing images typically stored in the images folder You may upload new images to the scrapbook See Uploading Files in Chapter 8 e The Layout tab You can also use the Widget Inspector e The Special Effects tab offers three further sets of options o Mouseover This control allows you to change the image s appearance when the mouse pointer moves across it Mouseover image A Mouseover is an effect that swaps the original image with another when the mouse pointer moves across it Background If your image has transparency you can add a background color that appears when the mo
101. yperlink labeled click here amenities to choose which files you wish to You may upload any kind of file upload and visitors can download them a A Java file chooser appears although eSite Builder can only b Use Ctrl click to select multiple discontinuous display and directly interact with items within the same folder files of type JPEG GIF and SWF c Use Shi ft click to select multiple adjacent items within the same folder d Press the Open button to add the current selection of files e Optionally you may change folders browse for more local files and repeat steps b d 5 Press the Finished Uploading button Copyright 2006 Netopia Inc All Rights Reserved 51 of 77 eSite Builder User Manual and Training Guide 2 1 Revised 042106 Managing Deleted Files The Deleted Files section of the File Manager catches all of the files and folders you have deleted in the course of editing you Web site Here you can rescue files or folders you have deleted by accident or misjudgment or eliminate them for good The area Is divided into two main panes the upper for the deleted files and folders themselves and the lower to view those that are available directly for use on the site The lower pane Is in fact the same as the main pane in the My Web Site area See Screenshot 13 below e Select items in the upper pane Shi ft click to select multiple continuous items Ctr click to select mu

eSite Builder 2.1 User Manual

Contents

Download Pdf Manuals

Related Search

Related Contents