This User Guide uses screenshots taken fromthe UK version of WebPlus X7.
Contents 1. Welcome ...............................................................1 Welcome!......................................................................................................3 New features ...............................................................................................4 Installation ...................................................................................................6 2. Setting up Sites and Pages ..................................9 Startup Assistant ......
Contents 4. Navigation Items ................................................57 Inserting navigation bars .................................................................... 59 Inserting pop-up menus ..................................................................... 63 Inserting buttons.................................................................................... 65 Adding hyperlinks and actions ......................................................... 67 Adding an anchor ........................
Contents 8. Media ............................................................... 107 Inserting videos .................................................................................... 109 Inserting YouTube videos ................................................................. 113 Inserting Vimeo videos ...................................................................... 114 Inserting Flash SWF files .................................................................... 115 9. Forms .................
Contents 13. Advanced Content .......................................... 159 Understanding e-commerce ........................................................... 161 Using Smart objects ............................................................................ 164 Access control ....................................................................................... 171 CSS properties ....................................................................................... 172 Animated marquees ............
Welcome
2 Welcome
Welcome 3 Welcome! Welcome to WebPlus X7 from Serif—the easiest way to get your business, club, organization, personal interest, or household on the web! To make life so much easier, WebPlus offers you a simple way to build websites visually, without having to learn or use any traditional web programming. WebPlus comes with an impressive selection of design templates, page navigation bars, creative assets, and styles for you to use.
4 Welcome This User Guide The WebPlus X7 User Guide is provided for the new or inexperienced user to get the very best out of WebPlus. As the program is packed with a wealth of features, this User Guide doesn't cover all product functionality, but instead focuses on core and frequently used features. For comprehensive assistance, please use WebPlus Help (press your F1 key).
Welcome 5 • Improved assets available throughout your design Save more objects as assets to make videos and other media, code fragments, color schemes and more, easy to reuse. You can access all your assets in many more places, choosing buttons as controls, pictures for your rollovers, and others throughout the design process.
6 Welcome Improved Output • New HTML output options In addition to brand new HTML5 export that makes WebPlus sites more efficient and compatible than ever, new site options allow you to choose the style and efficiency of code for the editor view, when previewing, and when publishing. • Export Optimizer Save pictures from WebPlus, selecting objects, areas, or pages to export as optimized images that give you an interactive preview with file size estimate.
Welcome 7 Installation procedure (from disc) • Insert your purchased disc into your disc drive. • If AutoPlay is enabled on the drive, this automatically starts the Setup Wizard. Follow the on-screen instructions to install WebPlus. -or- • If AutoPlay is not enabled (or doesn't start the install automatically), navigate to your program disc and doubleclick autorun.exe. Installation procedure (from download) • From serif.
8 Welcome • Internet Explorer 8 • Internet connection required for publishing to web and accessing online resources * Main processor must support SSE2 instructions. Recommended: As for Minimum but: • 560MB free hard disk space. • Additional disk resources and memory are required when editing large and/or complex sites. Optional: • Internet Explorer 9 (for better HTML5 compatibility) • Windows-compatible printer • TWAIN-compatible scanner and/or digital camera • .NET 2.
Setting up Sites and Pages
10 Setting up Sites and Pages
Setting up Sites and Pages Startup Assistant Once WebPlus has been installed, you're ready to start. • For Windows Vista/7: Setup adds a Serif WebPlus X7 item to the All Programs submenu of the Windows Start menu. Use the Windows Start button to pop up the Start menu, click on All Programs and then click Serif WebPlus X7. • For Windows 8: The Setup routine during install adds a Serif WebPlus X7 entry to the desktop.
12 Setting up Sites and Pages The options are described as follows: The default home page keeps you in touch with Serif promotions and showcases articles (tutorials, etc.) You can also view the Overview and Quick Start video. To access WebPlus files; also provides recent file history. For online video/written tutorials, help, tips & tricks, and more—all via an updating feed that can be filtered by article Type. The Product Help and your electronic WebPlus X7 user guide are also provided.
Setting up Sites and Pages 13 Any new unread article arriving in the Learn or News pane will display a "new" indicator in its thumbnail. Once you've clicked on a new article the "new" indicator changes to a "read" indicator ( ). Don't forget to use the keyword Search box at the top-right of the Startup Assistant. This is an incredibly powerful tool for filtering specific website names, Learn articles, theme layout names, or news articles.
14 Setting up Sites and Pages Theme layouts These offer a choice of themes (e.g., Eco, Pop, Prospectus, and 27 more) on which to base your site. Simply add your own pictures to placeholders and personalize placeholder titles and text, then publish. Ready-to-go Pro templates These are categorized templates containing royalty-free pictures and catchy titles which can be adopted to fasttrack you to your completed website. You just need to personalize placeholder text, and then publish.
Setting up Sites and Pages 15 3. From the left-hand pane, select a desktop or mobile option from Theme Layouts or WebPlus X7 Pro Templates categories. 4. Navigate the main pane by scrolling using the right-hand scroll bar. 5. Select a thumbnail design you like from the main pane.
16 Setting up Sites and Pages 6. From the right-hand pane, decide which pages you wish to be part of your site. Check or uncheck under each page to select or deselect, respectively. 7. Pick a Color Scheme from the drop-down list at the top of the dialog (the first three schemes are designed specifically for the chosen template). With the drop-down list open, you can preview your pages as you scroll through the schemes by using your keyboard up/down arrow keys.
Setting up Sites and Pages 17 Starting a site from scratch Although design templates (p. 13) can simplify your design choices, you can just as easily start out from scratch with a new, blank site. Your site is created via the Startup Assistant which helps cover the key aspects of your site's creation. The page size and height will be identical for all pages, including a master page that also gets created and assigned to every new page. A default navigation bar is added to this master page automatically.
18 Setting up Sites and Pages 2. Select New Site. 3. Complete the details in the displayed main pane. 4. Click Start new site. Your site is created, ready for editing. At this stage and subsequently, Site Properties can be edited to fine-tune your site settings. Select Site Properties (Publishing) via the Properties menu. From the Startup Assistant, you can press the Esc key to open a blank publication using default page properties.
Setting up Sites and Pages 19 To open an existing publication (via Startup Assistant): Open WebPlus to display the initial Startup Assistant. - or - 1. Select Startup Assistant from the File menu (during your session). 2. Select Open. 3. Several options are possible: i. - or - For recently opened sites, select a thumbnail from the main pane.
20 Setting up Sites and Pages i. For other WebPlus sites, select WebPlus files from the Browse My Computer pane. ii. From the dialog, locate and select your file, then click Open. To open existing WebPlus sites (during WebPlus session): Open on the Standard toolbar. 1. Click 2. In the Open dialog, select the folder and file name(s). For multiple sites, Shift-click to select adjacent multiple files or Ctrl-click to select non-adjacent files. 3. Click the Open button.
Setting up Sites and Pages 21 Understanding site structure The "structure" of a website has nothing to do with its physical layout, or where pages are stored. Rather, it's a way of logically arranging the content on the site so that visitors have an easier time navigating through it. One of the most useful organizing principles—which WebPlus strongly reinforces—is an "inverted tree" structure that starts with the Home page and then branches out to other pages.
22 Setting up Sites and Pages Via Site tab In WebPlus, the Site Structure tree (in the Site tab) provides a visual aid that lets you organize the content on your site into sections and levels. Here's how the above structure might appear: Via Site Structure View For larger websites, Site Structure view can be used instead of the Site tab to provide a full-screen display that previews your "section and level" site structure as page thumbnails presented in a tree-based structure.
Setting up Sites and Pages 23 To view your site structure: • From the Standard toolbar, select View Site Structure. The toolbar also lets you show and preview pages, include/exclude pages in navigation, rearrange pages by drag-and-drop, and even Quick Publish the selected page(s). Setting site properties Site properties allow settings to be made which will be applied across the entire site. Generally speaking, important site properties (page width, height, etc.
24 Setting up Sites and Pages Setting page properties Your WebPlus site has its own general framework, consisting of the site itself; one or more master pages; and a number of individual pages. Each aspect of the framework has various property settings that contribute to the look and behavior or your site when it's published. Whether you start with a WebPlus template or from scratch, you can choose whether to stick with the default property settings or alter them to suit your needs.
Setting up Sites and Pages 25 Master pages provide a flexible way to store background elements that you would like to appear on more than one page—for example a logo, background, header/footer, border design, or navigation bar. The key concept here is that a particular master page is typically shared by multiple pages, as illustrated below. By placing a design element on a master page and then assigning several pages to use that master page, you ensure that all the pages incorporate that element.
26 Setting up Sites and Pages For more varied page designs across your site, you can create more than one master page (see Adding, removing, and rearranging pages on p. 27). Once you have multiple master pages, they can be attached to separate pages or in combination on the same page. Attaching different master pages By default, pages created in new sites have a master page (e.g., Master A) automatically attached to them.
Setting up Sites and Pages 27 To detach a master page: • Uncheck its entry in the Page Properties dialog (Master Page menu option). Unchecking all master pages means that the page will use the site appearance (Properties>Site Properties). For more complex page designs, you can apply multiple master pages to your page at the same time. See Attaching multiple master pages in WebPlus Help. Adding, deleting, and rearranging pages Using the Site tab, you can: • Add pages. • Delete pages.
28 Setting up Sites and Pages Use the upper Master Pages window of the Site tab to access master pages, and the Pages window to access pages. Adding pages To add a new blank page: 1. In the Pages Window of the Site tab, select a page after which you want to add the new page. 2. Click the down arrow on the Add button directly above the window. From the drop-down menu, choose New Blank Page. 3. In the Page Properties dialog, specify options for the new page from each of the menu options in turn. 4.
Setting up Sites and Pages 2. 29 Click the Add button above the Master Pages window. A new master page appears in the Site tab's Master Pages window. To reassign pages to particular master pages, see Understanding pages and master pages on p. 24. Deleting pages To delete a selected page or master page: • Click Delete selected page above the appropriate window. Creating HTML pages HTML pages can be added to any Site tab's Site Structure. See Creating HTML pages in WebPlus Help for more information.
30 Setting up Sites and Pages Adding template pages While adding a blank page gives you page design freedom, you can make life a little easier by adopting "ready to go" template pages. You can select template pages that complement your existing theme layout or choose an independent template page. This is possible by selecting New Template Page on the Site tab's Add new page or link drop-down list. Adding offsite links You can also add an offsite link to your site structure.
Layout Items
32 Layout Items
Layout Items 33 Inserting text frames Typically, text in WebPlus goes into text frames, which work equally well as containers for single words or standalone paragraphs and articles. You can also use artistic text (see p. 131) for standalone text with special effects, or table text (see Inserting tables on p. 49) for row-and-column displays. Creating text frames You add frames to a page as you would any other object. You can select, move, and resize any frame, but you cannot alter its basic shape.
34 Layout Items Putting text into a frame You can put text into a frame in one of several ways. WritePlus story editor: With a selected frame, click Frame context toolbar. WritePlus on the Importing text: Right-click on a frame and choose Insert>Text File to import text. Typing into the frame: Select the Pointer Tool, then click for an insertion point to type text straight into a frame, or edit existing text. (See Editing text on the page on p. 132.
Layout Items 35 To resize frame text once frames are sized and positioned, various text sizing and AutoFit options are available on the Frame context toolbar. You can apply a border to your text frame and adjust the padding between the text and the border by editing the text frame's CSS Properties. For more information, see WebPlus Help. Inserting pictures The Assets tab (Pictures category) acts as a "basket" for initially gathering together and then including pictures in your site.
36 Layout Items 3. Click Open. Your pictures appear as thumbnails within the Assets tab's Pictures category. To reorder pictures in the tab: • Select and drag a picture to a new position in the tab. To delete a picture from the tab: • Right-click a picture and select Delete Asset. Adding pictures to the page Pictures can be added to your site by dragging directly onto your page.
Layout Items 37 Once added, the picture thumbnail indicates the number of times the picture has been used in the site ( ). When placed, pictures are linked to your project by default and not embedded. Photos can be embedded using Insert Picture From Disk on the Basic toolbar (select Embed Picture at the bottom of the dialog) or at any time using the Resource Manager (see WebPlus Help).
38 Layout Items 3. Click Open. You can also replace a picture with those stored in the Asset Browser—click Replace Picture from Assets directly under the selected picture. Displaying pictures in lightboxes Lightboxes are a simple way of displaying pop-up larger sized versions of pictures from thumbnails you add to your web page. A great advantage of lightboxes is that bigger pictures can be displayed on demand and are superimposed over your web page after a gliding animation.
Layout Items 39 Cutting out pictures Cutout Studio offers a powerful integrated solution for cutting objects out from their backgrounds. Depending on the make up of your pictures you can separate subject of interests from their backgrounds, either by retaining the subject of interest (usually people, objects, etc.) or removing a simple uniform background (e.g., sky, studio backdrop). In both instances, the resulting "cutout" image creates an eye-catching look for your site. To launch Cutout Studio: 1.
40 Layout Items Picture adjustments and effects PhotoLab is a powerful studio for applying adjustment and effect filters to pictures, either individually or in combination! (A) main toolbar, (B) main workspace, (C) filter stack, (D) filter tabs, (E) Images tab To apply adjustments or effects in PhotoLab: 1. Select the picture that you want to apply a filter to. 2. Click 3. Select a filter from the filter tabs (Favorites, Adjustments, or Effects). 4.
Layout Items 5. Repeat for additional filters. 6. Click OK. 41 For more information, see WebPlus Help. Inserting panels Panels are information boxes superimposed over your web page, which can host pictures and text (below), as well as shapes and line art. The ability to superimpose panels means that you can increase the amount of information available to the web visitor without altering the underlying web page content.
42 Layout Items WebPlus provides a wide selection of modern backgrounds to base your panel on. Alternatively, you can customize a background preset further or create a panel background from scratch in WebPlus's Design Studio. See WebPlus Help for more information. Inserting your panel To insert a panel: 1. From the Quick Build tab (Layout Items category), click Panel. 2. Drag the cursor across your page to define the size and shape of your panel region. The Insert Panel dialog opens. 3. 4.
Layout Items 43 A panel of default size can be created by dragging from the Quick Build tab directly onto the page. Alternatively, a default basic panel (without editing via dialog) can be created by Ctrl-dragging to the page. To edit a panel: • Double-click the panel and edit the panel settings. Adding content to your panel You should treat your panel as an empty building block which can be developed using WebPlus tools and features. By creating objects within the panel area, they belong to the panel.
44 Layout Items 2. From the context toolbar, select Actions. The Edit Panel dialog opens, displaying the Actions tab. 3. Click Add and choose Visibility from the flyout. 4. Select the panel from the Object ID drop-down list. 5. Select an event from the Event drop-down list. The event relates to the behavior that occurs when you perform an action (i.e., when you click or rollover the object). 6. Click OK. Finally, the panel can be hidden with a single click once you've finished designing it.
Layout Items 45 Inserting a Photo Gallery In WebPlus you can add a Flash™- or JavaScript-based photo gallery to any web page, using one of a range of eye-catching gallery types, styles, and a choice of photo navigation methods. Gallery types Different Flash or JavaScript gallery types can be used to create your Photo Gallery.
46 Layout Items Gallery type Features Professional Flash Photo Gallery Provides a top or bottom control bar (hosting preview thumbnail rollovers) on top of your main photo display. Professional Flash Photo Gallery (Live Feed) As for Professional Flash Photo Gallery but photo content is sourced online from your Flickr photostream (as an RSS feed), another RSS 2.0compatible image host, or SlideShowPro Director.
Layout Items 2. 47 To insert the gallery at a default size, position the displayed cursor where you want the gallery to appear on the page, then simply click the mouse. - or To set the size of the inserted gallery, drag out a region and release the mouse button. 3. Select the Gallery Type as described on p. 45. 4. Click Next. To add photos to a Photo Gallery: 1.
48 Layout Items (Optional) Select any photo thumbnail(s) for manipulation. 2. • To add a caption, click the Caption column and input text, numbers and characters. • To add hyperlinks (Professional Flash Photo Gallery only) to photos, click Edit hyperlink. From the dialog, choose a Hyperlink Type—you can set no hyperlink, hyperlinks to the original image, or hyperlinks to a different link destination (e.g., Site Page or Internet Page). Click Next. To select and modify a Photo Gallery style: 1.
Layout Items 49 Inserting tables Tables are ideal for presenting text and data in a variety of easily customizable row-and-column formats, with built-in spreadsheet capabilities. Each cell in a table behaves like a mini-frame. Like frame text you can vary character and paragraph properties, apply named text styles, embed inline images, apply solid text color fills, and use proofing options such as Spell Checker and Proof Reader. Some unique features include number formatting and formula insertion.
50 Layout Items The Create Table dialog appears with a selection of preset table formats shown in the Format window. 3. Step through the list to preview the layouts and select one (use up/down keyboard arrows for a "live" preview of each). To begin with a plain table, select (Default). 4. (Optional) Click Edit if you want to further customize your chosen format. 5. Set the Table Size. This is the number of rows and columns that make up the table layout. 6. Click OK.
Layout Items 51 The calendar is created as a scalable text-based table so you can edit text using the standard text tools. The properties of a selected calendar are similar to those of a table, and can be modified identically (see Manipulating tables in WebPlus Help). The wizard lets you set up the month/year and calendar style/format, and controls the inclusion of personal events and/or public holidays. To insert a calendar: 1. From the Quick Build tab (Layout Items category), click Calendar. 2.
52 Layout Items To view and edit a selected calendar's properties: 1. Click the Edit Calendar button on the Calendar context toolbar. 2. Choose an appropriate tab (Date, Style, Events, etc.) and make your modification, then press OK.
Layout Items 53 Inserting sliders Sliders are a fun and exciting way to animate panels, and are ideal for a whole range of uses including advertising banners, news tickers and as alternative navigation bars. Each slider is made up of a series of panels, with just one panel visible at any one time. Each panel can show a mixture of pictures, text, and line/shape art. Like a slideshow, each panel can be made to appear automatically at set intervals, manually via navigation buttons, or at a set time.
54 Layout Items Pre-designed professional sliders are available from the Asset Browser, and are typically customized once on the page. Panels can be added, reordered, or deleted to create the slider of your choosing. To insert a slider: 1. From the Insert menu, select Slider from the Interactive Object flyout. 2. In the Asset Browser dialog, in the main pane, select an individual slider and click OK. 3. Click once to place the slider on the page.
Layout Items 55 Editing your slider Your slider comes with a set of panels by default. It's likely that you'll want to: • Add, copy, or delete a panel within the slider. • Add content to any currently visible panel. Remember that, like standalone panels, each panel in the slider can have any content added to it. • Swap a picture for one of your own by clicking under the panel's picture. • Add hyperlinks from a panel's pictures, buttons, or other objects to another destination (e.g.
56 Layout Items To navigate between panels: • Click the slider. navigation buttons directly under the selected Every slider also has a Foreground panel that displays its contents permanently. The panel is perfect for adding contact details, sale buttons, telephone numbers, or a picture that you always want to show. The slider properties can be modified to change the animation style and various playback controls. Panels within the slider can also be reordered and made to display at set times.
Navigation Items
58 Navigation Items
Navigation Items 59 Inserting navigation bars Navigation bars are used to allow the site visitor to jump between pages serving different purposes, e.g. Home page, Gallery, Products, and Contact Us. They are automatically programmed to understand your site structure (see p. 21), making it easy to design a site that's simple to navigate.
60 Navigation Items When inserting a navigation bar, you can choose how your navigation will appear on your page by choosing: • Type: The intrinsic design of your navigation bar (e.g., designer, graphical, simple). • Navigation Type: The site or custom structure on which the navigation bar is based. • Appearance: The button, separator, and background design of the navigation bar. Either preset or custom designs can be used.
Navigation Items 61 4. From the dialog's Type tab, browse navigation bar categories, clicking to expand if necessary. 5. Review each navigation bar in turn (or scroll through the bars using the keyboard arrows for quick browsing)! Select your chosen navigation type, e.g. Tabs 2. - or Click the Browse Assets button to see previews of all navigation bars in the asset browser. Select an item and click OK to return to the dialog. 6.
62 Navigation Items If choosing Based on site structure, you can: • Select the level of pages that will be included in the navigation bar: Top Level, Parent Level, Same Level, etc. • Depending on the main selection, you can opt to include the child pages, anchors, home page, parent page, and/or Hide current page or disabled links. • Set Target Frame/Window to change where the new page will open.
Navigation Items 63 Inserting pop-up menus Pop-up menus form an integral part of multi-level navigation bars (p. 59), showing as menus that display only on button hover over. The items in pop-up menus represent child pages at lower levels of your site. You can also add pop-up menus to any object (a QuickShape, image, a gallery item, but most typically a button), the menu being essentially the same as those integrated with navigation bars.
64 Navigation Items 3. Enable Based on site structure or Custom to either use your site's navigation links as part of the menu or base the pop-up menu on your own custom structure, respectively. With the former, you can base your menu on child pages of a top-level "Products" page. 4. From the dialog's Menu Appearance tab, select Text pop-up menus or Graphical pop-up menus. The latter implements button objects to make up its menus. 5.
Navigation Items 65 Inserting buttons Buttons are an integral part of WebPlus navigation bars (see p. 59) but can also be added onto your web page, either standalone or as part of a form. When clicked by the web visitor, they can be made to display a hyperlink destination, pop-up menu, or trigger an action. In WebPlus, buttons can be either a preset design or be created from scratch in the Button Studio. It's quite common to choose a preset and then customize it to fit your requirements (e.g.
66 Navigation Items 3. From the Insert Button dialog, click the button preview box. 4. From the Asset Browser, select a preset button type and click OK. The preview box updates with your chosen button design. 5. Enter a Button Label to identify the button, such as "Home", "Images", etc. (available only for buttons that allow a text label). 6. From the Hyperlink tab: 7. • From the Hyperlink Type tab, select a link destination type which will direct the user to a target (e.g.
Navigation Items 67 Additional tabs, called Advanced (Hyperlink tab) and Actions, offer accessibility and search engine relationship (REL) attributes, and a range of actions (p. 71) that can control user interactivity with your button. ID/ Anchor and CSS Properties tabs offer advanced controls and styling options. For a range of website buttons and other graphical elements stored in Asset Packs, you can use the Asset Browser. From the Assets tab, click Browse, then select the Settings category.
68 Navigation Items • Site page • Internet page (somewhere on the web) • Internet Email • Anchor (a designated target within a web page) • File on your local disk or network (for download of files) • Shopping cart • Smart object (e.g., a forum, blog or CMS) • RSS feed (or podcast) • Navigation element • User Data • Picture Actions are conceptually like hyperlinks, in that something happens on object click or rollover.
Navigation Items 69 3. On the Hyperlink Type tab (Hyperlink tab), click to select the link destination type, i.e. a Site Page, Internet Page, Smart Object, etc. 4. Depending on the link type, choose type-specific options in the right-hand pane. 5. Click OK. You can view and manage all hyperlinks and anchors throughout your site by using the Site Manager, accessible from the Default context toolbar (and Tools menu). To modify or remove a hyperlink: 1.
70 Navigation Items Selecting a target window The Target Window tab offers a range of target windows, frames, or a lightbox in which the link destination will be displayed. To select a target window: 1. From the object's properties dialog's Hyperlink tab, select the Target Window tab. 2. Select an option from the Type drop-down list.
Navigation Items 71 To view or edit existing hyperlinks: • From the Tools menu, select Site Manager>Hyperlink Manager to view, rename, or remove hyperlinks. Applying actions Actions can be associated with objects (not text) to allow for greater user interactivity. Available actions, triggered typically by a click or mouse rollover of the object, are as follows: • Alert: Displays a pop-up alert box (on click). • Visibility: Displays a panel (on rollover/click).
72 Navigation Items The Actions tab is only displayed when you select an object (but not on text selection). You'll need to create a panel in advance before you can assign an action to it, allowing it to display. For more information, see Inserting panels on p. 41. To apply an action: Edit Actions from the Properties toolbar. 1. Select 2. From the dialog, click Add and choose an option from the flyout. 3. From the dialog, configure the action. 4. Click OK.
Navigation Items 73 Adding an anchor An anchor is a specific location on a page that can serve as the target for a hyperlink (see p. 67). Invisible to the web page visitor, it typically marks a point within some text (such as the start of a particular section) or a picture at some point down the page. To attach an anchor to a section of text: 1. Either: i. Use the Pointer Tool to click for an insertion point inside the target text. ii. From the Text menu, select Insert>Anchor (or press Ctrl+Q).
74 Navigation Items 3. In the dialog, select Treat this object as an anchor. 4. (Optional) To assign a specific anchor identification name to your anchor (rather than using the object's HTML ID), uncheck Use object ID and then type a name into the Anchor ID input box. 5. (Optional) Check Include Anchor in Navigation. 6. Click OK. To view or edit existing anchors: • From the Tools menu, select Site Manager>Anchor Manager to view, rename, or remove an anchor attached to a particular object.
Navigation Items 75 Lightboxes can be used to display: • Pictures, as a larger sized version of a picture thumbnail already added to your web page. • Forms in your site. • A login box for access control. • Pages (Site or Internet). • A blog, forum, or RSS feed. • A Word file, PDF, or any other file type. To create a lightbox for a picture on your web page: 1. Select the picture (preferably a thumbnail). 2. Click 3. From the Hyperlink Type tab, select Picture from the menu. 4.
76 Navigation Items To create a lightbox to a local picture: • As above but choose the File option instead of Picture. You'll have the option to embed or link the picture; either way, the picture always displays using its native image dimensions. Lightbox slideshows Simple lightbox slideshows can be created which are based on the pictures already placed on the same web page. The lightbox itself will display controls to navigate through your slideshow. To create a lightbox slideshow: 1.
Interactive Objects
78 Interactive Objects
Interactive Objects 79 Inserting rollover graphics A picture whose appearance changes in response to a mouse event is called a rollover graphic. Mouse events could typically be a hover over or mouse button press. You can directly import rollover graphics created in Serif DrawPlus. (See WebPlus Help for more information.) Rollover options Creating rollovers is a matter of deciding which state(s) you'll want to define, then specifying a picture variant for each chosen state.
80 Interactive Objects You can also specify a hyperlink event—for example, a jump to a targeted web page—that will trigger if the user releases the mouse button while in down state. And you can even group buttons on a page so they work together—and only one button in the group can be 'down' at any one time. To create a rollover graphic: 1. In a suitable image-editing program, create the variant source pictures for each state you'll be defining. 2.
Interactive Objects 5. 81 Click OK. WebPlus displays the picture assigned to the Normal state. It's a good idea to preview the page and test each rollover picture, then return to WebPlus and revise as needed. To edit a rollover graphic: • Double-click the rollover graphic, to display the Edit Rollover dialog. Modify settings as appropriate.
82 Interactive Objects To insert a pop-up rollover: 1. Click Pop-up Rollover from the Quick Build tab (Interactive Objects) and drag the insert cursor across your page to set the rollover size. 2. From the Edit Pop-Up Rollover dialog, on the Rollover Graphic tab: • For the Normal rollover image click the Browse button, and navigate to and select the image. Click Open. - or Click the Browse Assets button and locate an image from your saved asset packs.
Interactive Objects 83 For pop-up rollovers to work effectively you'll need to position the Normal and Over images on your page. Positioning is carried out from a dedicated dialog, where each state image can be moved and resized by dragging (or by setting absolute pixel values). See WebPlus Help for more information. To edit a pop-up rollover: • Double-click the Normal image on the page, to display the Edit Pop-Up Rollover dialog. Modify settings as appropriate.
84 Interactive Objects The search results show a hyperlinked page name heading plus associated web page text for reference. Visitors simply click the hyperlink to access the web page. To add Site Search Results: 1. Choose Site Search from the Insert menu and select Site Search Results from the submenu (placing your search results window on your page after configuring it). - or - 2.
Interactive Objects 85 Inserting Google Maps Use embedded Google Maps in your web page if want to make sure that a client can locate your headquarters, attendees can find that special meeting (or event), or identify any other special interest locations. Map, Street View, and Satellite views are available. To insert a Google Map: Google Map from the Quick Build tab (Interactive Objects) 1. Click and drag the insert cursor across your page to set the map size. 2.
86 Interactive Objects Adding markers You can add an unlimited number of markers to your Google Map. Each marker can display further details on hover over and mouse click. To add a marker: 1. From the Google Map dialog, click Add. 2. In the Google Map Marker dialog, click a chosen location using the cursor. 3. Enter a Name for the marker. This "tooltip" displays on hover over and could represent a company or site name. 4. Assign a Click action to the marker, i.e.
External / Managed Content
88 External / Managed Content
External / Managed Content 89 Inserting a blog A blog acts as a personal journal on your web page that hosts your own published articles and offers an easy-to-use text editor. Articles can be commented on by visitors to the web page. In WebPlus, blogs are actually Smart Objects (p. 164), a common term to indicate that they are intelligent server-sided objects hosted on the secure online service called Serif Web Resources.
90 External / Managed Content If you're on the move or working remotely, you can always monitor and update this managed content by using Serif Web Resources. A republish of your website is not necessary. Inserting blogs Blogs are like any object in WebPlus, in that you can easily insert one onto a chosen page. To insert a blog (on the page): 1. From the Quick Build tab (External / Managed Content category), click Blog. 2. Drag the blog region.
External / Managed Content 91 Managing your blog Managing your blog lets you add, edit, or delete articles, and even comments associated with articles. You can also select an Editor group for multi-author article publishing. For new articles (or when editing) you can create/edit your article in RTF, add tags, pick an article poster, allow trackbacks, and make comments. To manage your blog: • Select the blog and click Manage from the context toolbar.
92 External / Managed Content For example, you could create the categories Philosophers, Branches, and General, while the Philosophers category would include the subforums Plato, Descarte, and Artistotle. Visitors can view the topics posted in a subforum, the number of replies/views, the topic author, and the last post. The selection of a topic lets the visitor post a reply or start a new unrelated topic.
External / Managed Content 93 Forum features • Create different categories (e.g., Philosophers) containing multiple subforums (Plato, Aristotle, Descartes, etc.). • Establish access control for users and moderators. • Set forum privacy as publicly readable or private. • Apply a theme (style) to the whole forum. • Create, edit, and assign user ranks. • Set user permissions. • Manage and moderate the forum without republishing.
94 External / Managed Content you'll get the Serif Web Resources login dialog. To sign up, click Create Account under the New User? section. - or If you're an existing user and are already logged in, you'll get an Edit dialog. 3. From the dialog, enter a Name for your forum. This is the forum title that appears at the top of the published forum. 4. Add a Forum Description to describe what the forum is for. 5. Click Save. The forum appears on your page.
External / Managed Content 95 To manage your forum: Manage from the context toolbar. • Select the forum and click • To explore the available options, scroll down and click Help at the bottom of the dialog. Forum security By default, your forum is created with the Add new users on signup feature enabled, which means you don't need to do anything except moderate forum content when needed. Forum contributors simply register and enter their own login details to post or reply to topics.
96 External / Managed Content 4. Use the Users and Groups tabs to manually add users, and the Bans tab to ban/suspend users. 5. Click Exit. Forums, by their nature, are complex objects. For more configuration details and a description of options, click the Help button in any Smart object dialog. Inserting an RSS reader WebPlus lets you include an RSS feed from another website on your own web page.
Social Media
98 Social Media
Social Media 99 Inserting a Facebook widget Facebook widgets can be added to your page to stream various types of live feeds to display on your page or a Like button that allows users to share and promote your page via their Facebook pages. A Facebook account is recommended to use these widgets. For more information about Facebook, visit www.facebook.com. Inserting a Facebook widget The widget is placed directly on the page, the same as any other object. To insert a Facebook widget: 1.
100 Social Media 3. In the Preview pane, check or uncheck Update to preview what your widget will look like on the page as you make changes. 4. Customize the behavior of your widget: • Use Current Site URL Check to use the current URL of your site. Uncheck to enter a custom web address below. For Like Feed, enter the exact URL of a Facebook page. • Link Target (Recommendations Feed only) Select Blank to open links in a new window, select Parent or Top to open links in the same window.
Social Media 101 Inserting a Twitter widget A Tweet or Follow button can be added to your page that interfaces directly with Twitter. A Twitter account is recommended to use these widgets. For more information about Twitter, visit www.twitter.com. Twitter widget types There are two types of widgets that can be added to a page to allow visitors to engage with site content in different ways.
102 3. Social Media Customize the behavior of your button: • Use Current Site URL Check to use the current URL of your site. Uncheck to enter a custom web address in URL To Tweet. • Tweet Text Enter Tweet Text. This text gets displayed in the Tweet field and is modifiable prior to Tweet submission. • Via Enter the name of a Twitter account to add to the end of the tweet as a "via @". It is recommended to enter your username in this field.
Social Media 103 4. In User To Follow, enter a Twitter username. Visitors will follow this account on Twitter when they click your button. 5. (Optional) Customize the appearance of your widget using additional options (these differ according to Type). 6. Click OK. Editing a Twitter widget Once added to the page, the Twitter widget can be edited at any time. To edit a Twitter widget: 1. Select the widget already present on your page. 2. Double-click the widget. The Edit dialog is displayed.
104 Social Media To insert a Google +1 button: 1. From the Quick Build tab (Social Media category), click Google +1 Button then click on the page. 2. From the dialog, in the Preview pane, check or uncheck Update to preview what your widget will look like on the page as you make changes. 3. In the Configuration pane, check +1 Current Page to use the current URL of your site. Uncheck to enter a custom web address in Custom URL. 4.
Social Media 105 Inserting a social bookmarking button strip If you add a strip containing a selection of social bookmarking buttons, your web visitors can share and promote your site via whichever social media or social news site is clicked. WebPlus lets you to create a strip with some of the most popular social websites including Facebook, Twitter, Reddit, Digg, etc. Although not considered social media, the strip also lets visitors share your site's URL via email or simply print the current page.
106 Social Media To edit a social bookmarking button strip: 1. Select the button strip already present on your page. 2. Double-click the button strip. The Edit dialog is displayed. The options available are the same as those available when the button was created. 3. Make your changes and click OK.
Media
108 Media
Media 109 Inserting videos WebPlus includes an optimized and highly-compatible video player from Flowplayer that lets you place individual videos and playlists directly on your page. You can use videos from your own computer, or stream videos that exist elsewhere online. The player is versatile with a customizable appearance that gives viewers access to all the playback controls they'd expect, including watching videos full-screen. Supported video formats The primary supported video format is MP4 (.mp4).
110 Media 2. Position the cursor where you want the video player to appear on the page, then simply click the mouse. 3. Choose the format for your video player: 4. • Use HTML5 and MP4 video HTML5 offers the best compatibility playback with no browser plug-in or media playing software required. - or - • Use Flash video Choose the older Flash video player for Flash FLV video.
Media 111 The video player will be inserted where you clicked on your page and by default will be sized to match the first video in your playlist. You can configure the player to adjust its size and appearance and also customize playlist control buttons. To replace a video or edit the playlist For an existing video player, you can go back to your video selection or playlist and edit it at any time. To replace your video or edit the playlist: 1. Double-click the video object on your page. 2.
112 Media 5. Replace the Poster image—the preview shown in the player before your video or playlist begins. 6. Choose the Controls that you would like viewers to be able to use. 7. Set optional player Behavior. 8. Enable or disable player Controls, such as the mute button, volume slider, and 'get embed code' button for sharing videos on other sites. 9.
Media 113 Inserting YouTube videos YouTube videos that are already published on the Internet can be included on your web page. YouTube videos themselves are not embedded in your site; instead, just the unique video ID is embedded as you place the YouTube video on your page. To embed a single YouTube video: 1. Open the www.youtube.com website in your browser, and choose the YouTube video that you want to link to. 2. Copy the URL address for the video (or embed code).
114 Media To swap your YouTube video for another, double-click an existing YouTube video. From the dialog, paste a previously copied video URL into the input box. Consider embedding a YouTube playlist instead of a fixed choice of individual videos if you want to update video content on your site without using WebPlus. See WebPlus Help for information about adding and creating YouTube playlists. Inserting Vimeo videos Vimeo videos that are already published on the Internet can be included on your web page.
Media 115 To embed a Vimeo video: 1. Open the www.vimeo.com website in your browser, and choose the Vimeo video that you want to link to. 2. Copy the URL address for the video (or its embed code). This contains an alphanumeric ID which uniquely identifies the video clip. 3. From the Quick Build tab (Media category), select click on your page. 4. In the dialog, paste the video URL into the input box. 5.
116 Media smartphones cannot display Flash content, so you should consider using an alternative format. To insert a Flash file: 1. From the Quick Build tab's Media category, select then click on your page. 2. Select the Flash file to open (click Browse or Browse Assets then select your SWF file). Click Export Options to optionally define a different file name and/or file location. To keep the animation separate from the WebPlus file (using a link to the source file) uncheck Embed Flash files in site.
Forms
118 Forms
Forms 119 Inserting forms Web-based forms allow information to be collected from visitors to your website in an efficient and modern manner. Form data can be collected in a variety of ways—by email, to a local/remote script file, or via Serif Web Resources. See Submission of forms on p. 126. Form Structure The building blocks of a form comprise a mixture of text labels and form fields.
120 Forms Each field has its own set of properties relating to its appearance, its value(s), validation, or the action expected of the field. A form's functionality only becomes active when your website is published (of course you can still preview your forms from within WebPlus, see Previewing your site on p. 153). When a web visitor enters data into, or selects a form option, the data will be sent back to a chosen destination when the form is submitted.
Forms 121 Form Templates are available for user appointments, comments, and login. Other popular forms that could be created from scratch by the user include resumé submission forms and canvassing forms. • Using an on-page blank form and adding form fields from the Quick Build tab. Creating forms (from a template) The easiest way to create commonly used forms is to select one of the Form Designer's impressive range of form templates.
122 Forms 2. From the Form Designer, ensure the Templates tab is selected, then select a form template from the tab pane (e.g., Login, Appointment, etc.). Use the right-hand preview window to review each template. 3. From the Theme tab, select a specific look for your form. 4. (Optional) From the Fields tab (Add Field), click additional field to add them to your form. Delete unwanted fields or rearrange fields using the buttons under the preview page. 5.
Forms 123 Customizing template forms If you've selected a template form you can customize it to your own requirement. Form fields can be modified, reordered, or removed. Additional form fields can also be added. To modify a field: 1. From Form Designer (Templates tab), double-click a form field in the right-hand preview pane. 2. Edit the Field Properties in the Fields tab. Options differ depending on the type of form field selected. 3.
124 Forms Creating forms (from scratch) If you're looking for design freedom, WebPlus lets you create a blank form directly on the page to which you can add form fields. To create a blank form from scratch: • From the Quick Build tab, Ctrl-drag category to the page. Form from the Forms The blank form, composed of a blank form area and a Submit button, is added to the page. You can then add form fields to the form easily. To add form fields to the form: • Click a form field, e.g.
Forms 125 To access forms via the Asset Browser: 1. In Form Designer (Templates tab), click Browse Assets. 2. Select a form from the Asset Browser's Page Content>Form Templates category. If you wish to store your own form field that you've modified from a template or created from scratch, it can be saved as an asset. See WebPlus Help. Editing forms on the page If you've created a form using a template it can be edited in Form Designer at any time. Forms from scratch can be edited on the page.
126 Forms To edit form fields: • Double-click the form field. Submission of forms All forms have one thing in common—they must be submitted to allow data to be collected. This is done by the website visitor using a dedicated Submit button form field when using Form Designer or when creating a form from scratch. The button needs to be present on the form.
Text
128 Text
Text 129 Importing text from a file Importing text from a word-processor file is a quick way to build up text content for your site (but you can also create a story using WritePlus). If you use your current word processor (such as Microsoft Word) to create the text files for your site, you can import any number of files into one site. As well as the WritePlus format (.stt), a range of popular word processing and text formats can be imported, including: ANSI text .txt Open Office text .
130 Text To import text into a new text frame: 1. Choose Insert > Text File from the Text menu. 2. From the Insert Text File dialog, select the format of the source file to be imported and locate the file itself. 3. Check the Retain Format box to retain the source file's formatting styles. Uncheck the box to discard this information.
Text 131 Using artistic text Artistic text is standalone text you type directly onto a page. Especially useful for headlines, pull quotes, and other special-purpose text, it's easily formatted with the standard text tools. To create artistic text: Artistic Text Tool from the Drawing toolbar. 1. Choose the 2. Click anywhere on the page for an insertion point using a default point size, or drag to specify a particular size as shown here. 3. Set initial text properties (font, style, etc.
132 Text To resize or reproportion an artistic text object: • Drag the object's corner handles to resize it while maintaining the object's proportions. • To resize freely, hold down the Shift key while dragging. To edit artistic text: • Drag to select a range of text, creating a blue selection. You can also double-click to select a word. Now you can type new text, apply character and paragraph formatting, edit the text in WritePlus, apply proofing options, and so on.
Text 133 Selecting and entering text The selection of frame text, artistic text, and table text follows the conventions of the most up-to-date word-processing tools. The selection area is shaded in semi-transparent blue for clear editing. Double-, triple-, or quadruple-click selects a word, paragraph or all text, respectively. You can also make use of the Ctrl-click or drag for selection of non-adjacent words, and the Shift key for ranges of text. To edit text on the page: 1.
134 Text To switch between insert mode and overwrite mode: • Press the Insert key. Copying, pasting and moving text You can easily copy and paste text using standard commands; drag and drop of text is also supported. If you don't place an insertion point, the text can be pasted into a new text frame directly.
Assets for Creativity
136 Assets for Creativity
Assets for Creativity 137 Using assets An asset is a general term for any object or page element that can be added to your page to enhance its appearance, increase efficiency, or personalize your design. Assets range from graphics, pictures, picture frames, buttons, sliders/panels, various settings, to more complex page content and entire pages. To use assets, WebPlus provides the Assets tab, powered by both an Asset Browser (p. 139) and Asset Manager.
138 Assets for Creativity Using the Assets tab The Assets tab is a powerful design resource that exclusively hosts your browsed assets, ready for adding to your web page from the following categories. • My Designs: Stores custom assets dragged from the page. • Graphics: Contains professional clipart from Asset Packs. • Pictures: Added pictures from your hard disk (or from Asset Pack, if containing pictures).
Assets for Creativity 139 The tab also lets you save your own page objects for reuse globally or for use just in your site (by dragging to the My Designs category or dragging to another tab's category respectively). Settings, rather than actual objects, can be saved exclusively to the tab's Settings category. See Storing custom assets and asset settings (see p. 145). Browsing for assets Although initially empty, the tab can be populated with pre-designed assets by using an Asset Browser.
140 Assets for Creativity There are two ways to browse assets before adding assets to your workspace—by category or by pack file. You can also use the search controls at the top-right of the dialog to narrow your search, or to find a specific assets in the pack files. To browse assets (by category): Browse. 1. From the Assets tab, click 2. In the Asset Browser, select an asset category from the Categories section.
Assets for Creativity 141 For example, for Graphics, you'll see available graphics appear in sub-categories (e.g., Boxes, Flags, etc.) in the main pane. 3. Scroll through the sub-categories to browse and select additional assets. To browse assets (by Pack File): 1. From the Assets tab, click 2. In the Asset Browser, on the left-hand side of the dialog, select a pack file category (e.g., Backgrounds) or asset pack name from the Pack Files section.
142 3. Assets for Creativity Scroll through to browse the assets included in each pack file. To make browsing easier, you can expand and collapse the categories or pack files to hide or reveal the assets. Searching for assets The search facility filters assets based on preset and custom tags applied to all of the pack files shown in the Asset Browser.
Assets for Creativity 143 If your search results are being restricted to the currently highlighted category, Smart folder, Smart tag, or pack file, you can click the appropriate section header to remove this restriction. Filtering assets Filtering means that you can restrict the amount of assets on display. • For category and/or pack file filtering, select a category or pack file (or multiple instances using Ctrl-click). You can also search for category and pack file combinations.
144 Assets for Creativity Adding assets to your Assets tab To add a specific asset: • Select the category or pack file in the Asset Browser, and then simply click the asset. A check mark shows on the thumbnail. To add all assets: • Click Add All from the upper-right corner of each Asset Pack's thumbnail gallery. Check marks will show on all thumbnails. With either method, asset(s) will be available to you from the Assets tab when you close the Asset Browser.
Assets for Creativity 145 Storing custom assets and asset settings WebPlus lets you create and store custom assets from objects on the page; the settings of an object (its color) can also be saved. This allows the assets to be used again either in your current WebPlus site or globally in any site in the future.
146 Assets for Creativity * When you close your site, any assets you've created in these categories will need to be saved. You'll be prompted to save a custom Asset Pack specific to the site. Objects and settings are added to the Assets tab by dragging from the page, then dragging back onto your page where (and when) you want it. Pages are added to the Assets tab from within the tab category.
Assets for Creativity 147 If you drag an object to any other category, then it will only be available to the current site. Storing Pages Any page already present in your site can be stored in the Assets tab (Pages category). To store a page: 1. From the Assets tab's Pages category, click Add. 2. From the dialog, check a page (or master page). 3. Click OK. The page appears in the Pages category.
148 Assets for Creativity Pinning categories and individual assets Individual assets and entire categories within the Assets tab can be made available for all sites (i.e., globally) if they are pinned. To pin and unpin assets: • To pin an individual asset, click the • Pin All on the category To pin all the assets in a category, click header. - or - icon on the individual asset. To unpin all the assets in a category, click category header. - or To unpin an individual asset, click the asset.
Previewing and Publishing
150 Previewing and Publishing
Previewing and Publishing 151 Using Site Checker In advance of publishing, the Site Checker searches your website for common layout problems relating to site navigation, text formatting, forms, and E-Commerce, and reports detected problems. A wide variety of commonly encountered problems can be located but typical problems include: • Duplicate object HTML IDs. • Invalid Anchors or Hyperlinks. • Web Forms: No Submit button or form objects have the same name. • W3C validation failure warnings.
152 Previewing and Publishing To scan for site problems: 1. Click Site Manager on the Default context toolbar, then select Site Checker. 2. (Optional) Select whether to view problems for All Pages or a specific page from the Page drop-down list. 3. In the Type drop-down menu, choose to view All Site Problems or selectively choose to view problems relating to: 4.
Previewing and Publishing 153 3. From the Apply Multiple Fix dialog, click a button to apply either a Primary fix (most recommended) or Secondary fix. Problems that can be resolved automatically will be fixed and removed from the problem list once the appropriate button is clicked. However, some fixes may require modification of settings via additional dialogs. 4. Click Close to exit Site Manager. To fix selected problems manually: 1.
154 Previewing and Publishing To preview your site: 1. Click the down arrow on the Standard toolbar. 2. Select an option from the submenu: Preview site button on the • Preview in Window (shortcut Alt+P) opens the site in a new internal WebPlus window. • Choose Preview in to use an external browser. The names will reflect which browsers are currently installed, e.g. the entry may read "Preview in Internet Explorer.
Previewing and Publishing 155 To publish your site to WebPlus.net: 1. Click the down arrow on the Publish site button on the Standard toolbar and click Publish to Web. 2. From the Publish To Web: Get Hosting dialog, click Activate Now. 3. Follow the set up procedure within your default Internet browser. You’ll be provided with a hosting page which contains FTP details you’ll need to manually transfer. 4.
156 Previewing and Publishing 5. Click OK to close Account Details. 6. In the Upload to server dialog, click the Test button to test your FTP Account. If the test is successful a dialog will display stating that a connection has been established. 7. Click Update Account. The Publish To Web dialog can then be used to upload your website.
Previewing and Publishing 157 • Port number: Unless directed by your provider, you can leave this set at "21." • Leave the Folder box blank unless directed by your provider, or if you want to publish to a subfolder of your root directory. • You'll also need a Username and Password as pre-assigned by the provider. • Check Save password to record the password on your computer, if you don't want to re-enter it with each upload.
158 Previewing and Publishing Quick Publish Quick Publish allows you to quickly upload and view the currently displayed page—useful for live verification of individual pages. To configure Quick Publish: 1. Click the Publish site flyout on the Standard toolbar and then click Quick Publish Configuration. 2. In the dialog: 3. • Enter the details of, or select from the drop-down list, the URL of the site you want to publish to. • Select the browser to view your page once it has been published.
Advanced Content
160 Advanced Content
Advanced Content 161 Understanding e-commerce E-commerce entails the buying and selling of goods on the Internet. Any site that supports this kind of e-commerce activity will typically make use of a shopping cart system and a payment processing system. A shopping cart is a virtual basket (think of a supermarket basket) which stores your chosen items and is used in conjunction with a payment processing system (taking the place of the supermarket's checkout).
162 Advanced Content Configuring your shopping cart provider A number of different shopping cart providers can be configured within WebPlus. These are the most commonly used and some, like PayPal®, you may have come across directly as an eBay® customer. The configuration process directs you to the provider's own site from where you can sign-up as a registered user. Use the provider's website to find out more about unique shopping cart features. To set up a shopping cart provider: E- 1.
Advanced Content 4. 163 (Optional; PayPal only) In the next dialog, check Use the PayPal Minicart to display a pop-up cart (as an overlay) that appears as products are added to the cart (the cart is subsequently minimized to the top-right of your browser window while items remain in your cart before checking out). You can also configure, via the dialog, the minicart position in your browser window and edit or delete the default text displayed in the Minicart. 5.
164 Advanced Content Using Smart objects For managed content, WebPlus uses server-sided Smart objects which store gathered web visitor data on Serif's own secure server space called Serif Web Resources. You can manage your smart objects directly from within WebPlus, or independently, and at any time, via www.serifwebresources.com once your site is published and live. Let's look at each Smart object you'll find in Serif Web Resources and what you can do with them.
Advanced Content 165 Forum Add a thread-based discussion forum to your site, split into multiple categories and subcategories. You can also drag a forum onto the page by using the Quick Build tab. Hit Counter A straightforward count of the number of hits on the current page (reset as needed). Different styles can be adopted. News Add a news window onto your page. Poll Set up an online poll to canvass web visitor's opinions.
166 Advanced Content subscription. Email addresses can be imported as a delimited text file (CSV) or export to a range of formats. • Access Control mode: Control accessibility to pages, forums, blogs, and CMS by using user groups. See Access Control on p. 171 for more details. o Enable CAPTCHA anti-spam protection during user registration. o Create user groups (with optional user sign-up, autologin, and connection to Smart objects). o Add, remove, suspend, or ban users.
Advanced Content 167 3. In the next dialog, enter your current email address, screen name, and a password twice. You'll need to review and agree to Serif's terms and conditions of use (via a check box). 4. Click the Signup button. 5. An additional dialog, will ask for personal details, plus a few check boxes if you would like to receive the Serif Community newsletter, Serif offers, and/or other third-party offers. 6. A confirmation email will be sent to your email address.
168 Advanced Content Creating Smart objects Smart objects can be created via Serif Web Resources, by adding to a Smart Object library (the library lets you manage and edit each object). Objects can then be added to the web page immediately or at a later date. Some Smart objects such as forums, blogs, and news windows can be dragged onto the page from the Quick Build tab. Some Smart objects have interdependencies between each other.
Advanced Content 169 The named object will be shown in a list in the My Smart Objects Library left-hand pane. To add a Smart object to your web page: 1. From the Smart Objects dialog, select the chosen object from the left-hand pane and click the Insert button. 2. To insert the object at a default size, position the simply click the mouse. - or - cursor, then Drag the cursor across the page to size the Smart object.
170 Advanced Content Editing Smart objects Once an object is created it can be edited either in the My Smart Object Library or directly on the page. Typically, you might want to alter the appearance of the object from its original settings, maybe change a Poll question, or reset a Hit Counter back to zero. Editing an object only affects the object itself and does not alter any collected data. The dialog options for editing and creating a Smart object are identical.
Advanced Content To manage Smart objects directly over the Internet: • Login to www.serifwebresources.com to control all your Smart objects independently of your WebPlus site. Use your usual Web Resources login as before. For more management information and a description of each option, click the Help button in any Smart object dialog. The CMS Smart object can only be managed via www.serifwebresources.com.
172 Advanced Content • For page security: lets you login to a password-protected page(s) or via an on-the-page login box. As an example, a personal Photo Gallery page can be made "private" but still be shared with a selected group of users (under password control). The login details are stored in a user group associated with the page which contains a list of authorized users; the users are added manually by the web manager of the site or new users can self-register via sign up.
Advanced Content 173 To apply or edit CSS style attributes: • From the Properties toolbar, click - or - Edit CSS Properties. Double-click on an object, then from the dialog, select the CSS Properties tab. • If an object already has CSS Properties applied to it, you can edit them by clicking the Edit CSS Properties button at the bottomright of the selected object.
174 Advanced Content You can choose the background color, enter from one to three lines of text, define text properties (choose from any installed font), scroll direction, speed and alignment for each line. If you like, you can define any link destination type for the marquee (see Adding hyperlinks on p. 67). Animated marquees appear as static graphics on the WebPlus page. They will animate when previewed or viewed in a web browser. To create an animated marquee: 1.
Additional Information
176 Additional Information
Additional Information 177 Contacting Serif Help with your Product On the web community.serif.com Get answers and ask questions in the Serif community! Type ‘WebPlus X7’ to filter WebPlus only articles. Serif Support www.serif.com/support For Serif Account and Customer Service information. Additional Serif information On the web Serif website www.serif.
178 Additional Information Credits This User Guide, and the software described in it, is furnished under an end user License Agreement, which is included with the product. The agreement specifies the permitted and prohibited uses. Trademarks Serif is a registered trademark of Serif (Europe) Ltd. WebPlus is a registered trademark of Serif (Europe) Ltd. All Serif product names are trademarks of Serif (Europe) Ltd. Microsoft, Windows, and the Windows logo are registered trademarks of Microsoft Corporation.
Additional Information 179 Andrei Stcherbatchenko, Ferdinand Prantl PayPal © 1999-2012 PayPal. All rights reserved. Roman Cart © 2008 Roman Interactive Ltd. All rights reserved. Mal's © 1998 to 2003 Mal's e-commerce Ltd. All rights reserved. iTunes © 2000 to 2008 Apple, Inc. All rights reserved. YouTube © 2008 YouTube, LLC TM + © 2013 Vimeo, LLC. All rights reserved. Facebook © 2008 Facebook Inc. Twitter © 2012 Twitter Inc.
180 Additional Information
Index
182 Index
Index access control, 166, 171 Account Details (FTP), 155, 156 actions, 68, 71 applying, 72 adjustment (of pictures), 40 anchors, 73 hyperlinks to, 68 animated banners, 53 marquee, 173 anti-spam (CAPTCHA), 119, 126 artistic text, 131 Asset Browser, 137, 139 Asset Manager, 137 Asset Pack, 137, 139 assets, 137 adding to page, 144 browsing, 139 filtering, 143 pinning, 148 searching, 142 Assets tab, 138 storing custom designs in, 145 attaching master pages, 26 AutoFit, 35 backgrounds, 139 page, 24 site-wide, 2
184 Index inserting, 93 managing, 94 security, 95 frames (text), 33 controlling overflow in, 34 creating, 33 fitting text to, 35 FTP account details, 155, 156 gallery (photo), 45 Google Google+ (widget), 103 Maps, 85 markers for, 86 graphics (as Assets), 139 home page (changing), 30 hosting with Serif WebPlus.
Index Minicart, 163 shopping cart, 161 Photo Gallery, 45 editing, 48 inserting, 46 PhotoLab, 40 picture frames, 139 pictures, 35 adding, 35 to the page, 36 adjustments for, 40 as Assets, 139 effects for, 40 hyperlinks to, 68 in lightboxes, 38, 74 pop-up, 81 replacing, 37 pop-up menus, 63 pop-up rollovers, 81 previewing sites, 153 Pro Templates, 14, 139 profiles Smart object, 168 proofing tools, 151 publishing QuickPublish, 158 third-party web, 156 with Serif WebPlus.
186 Index Startup Assistant, 11, 14, 17, 19 storing designs, 145 story text, 33 Street View (Google), 85 styling (CSS), 172 submission (of forms), 126 support, 177 SWF files, 115 sytem requirements, 7 tables, 49 technical support, 177 template (design), 13, 14 creating site with, 14 Templates, 14 text artistic (standalone), 131 editing on the page, 132 fitting to frames, 35 formatting problems on web pages, 151 frame, 33 adding to, 34 importing from file, 129 storing, 145 theme layouts, 14, 139 Tool Tabl
