Contents 1. Welcome ............................................................................... 1 Welcome!......................................................................................................2 New features ...............................................................................................3 Installation ...................................................................................................8 2. Setting up Sites and Pages...........................................
Contents Inserting pop-up menus ..................................................................... 51 Inserting buttons.................................................................................... 53 Adding hyperlinks and actions ......................................................... 56 Adding an anchor .................................................................................. 61 Using lightboxes.....................................................................................
Contents 8. Media................................................................................. 113 Inserting videos .................................................................................... 114 Inserting YouTube videos ................................................................. 118 Inserting Vimeo videos ...................................................................... 119 Inserting audio ......................................................................................
Contents 13. Additional Information ............................................... 161 Contacting Serif .................................................................................... 162 Credits ...................................................................................................... 163 14. Index ..................................................................................
Welcome
2 Welcome Welcome! Welcome to WebPlus X8 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.
Welcome 3 This User Guide The WebPlus X8 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).
4 Welcome • Save as Package Share your WebPlus file or make it easier to move from one computer to another by saving it as a package—a single file that contains your WebPlus site design, the fonts you've used, and any linked images and other resources. Opening the package on another computer will unpack the design and other resources so you can carry on working. • Backup to the Web (see p.
Welcome 5 tab joins the recently used and websafe categories in your font list, and they can be uploaded with your site for automatic downloading with site content for a better browsing experience. • Audio Player (see p. 120) Give visitors an easy way to hear your music and other audio files in your website with a customizable audio player that uses the latest HTML5 technology for efficiency and broad compatibility.
6 Welcome and does not modify original photo files. Choose text or a logo, set transparency, size, tiling and other options, and see a preview of your watermark while you design it. • Magnifier (see p. 39) Set an area on your page to show a magnified image, with settings for zoom controls and mouse wheel operation. Optionally set the image extent as the magnifier area, so visitors can zoom and pan around inside an image without requiring extra page space. • Galleries in Date Order (see p.
Welcome • Custom CSS and HTML Attributes Attach custom HTML attributes and custom CSS properties to objects, without converting the object to code and without entering the code editing view. Simply add the new attributes via the object's Properties dialog. • Export as Widget Output interactive elements of your websites as widgets that can be incorporated into other websites, whether hand coding or using other web design software.
8 Welcome Installation Installing WebPlus follows different procedures depending on whether you are installing from disc or via download. You can install your new version alongside previous versions and use them independently. 32 or 64-bit WebPlus X8 installs to respective 32 or 64-bit computers. 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.
Welcome System Requirements Minimum: • Windows-based PC* with mouse or equivalent input device • Operating systems: Windows® 8 (32 or 64 bit) Windows® 7 (32 or 64 bit) Windows® Vista (32 or 64 bit) Microsoft Windows® XP SP3 (32 bit) • PC Memory: 512MB RAM (Windows® XP) 1GB RAM (Windows® Vista and 32-bit Windows 7® and 8) 2GB RAM (For 64-bit Windows® 7 and 8) • Hard Drive Space: 281MB free hard disk space for physical media install (and a DVD drive) 396MB free hard disk space for download install (ad
10 Welcome Optional: • Windows-compatible printer • TWAIN-compatible scanner and/or digital camera • .NET 2.
Setting up Sites and Pages
12 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 X8 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 X8. • For Windows 8: The Setup routine during install adds a Serif WebPlus X8 entry to the desktop and also to the Start screen.
Setting Up Sites and Pages 13 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 WebPlus 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 X8 user guide are also provided.
14 Setting Up Sites and Pages Creating a site using a design template WebPlus comes complete with a whole range of categorized design templates which will speed you through the creation of all kinds of websites. Each template offers: • Complementary design—Professionally designed layout with high-visual impact. • Schemes—choose a named colour scheme to apply a specific look and feel. • Page selection—select some or all template pages (e.g., Home, Products, About Us, etc.) to base your new site on.
Setting Up Sites and Pages 15 Ready-to-go Pro templates These are categorized templates containing royaltyfree 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. Equivalent mobile-ready layouts are available for both theme layouts and Pro templates—these can be used to create your own site optimized for smart phone access. To create a site using a design template: 1.
16 Setting Up Sites and Pages 4. Navigate the main pane by scrolling using the right-hand scroll bar. 5. Select a thumbnail design you like from the main pane. Theme Layout (Desktop) Theme Layout (Mobile) Pro Design Template (Desktop) Pro Design Template (Mobile) 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.
Setting Up Sites and Pages 17 7. Pick a Colour 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. The page thumbnails will refresh to reflect the new page's appearance. 8. (Optional) Use the BACK button if you want to alter your choices. 9. Click OK. The pages are added to your new site.
18 Setting Up Sites and Pages Starting a site from scratch Although design templates (p. 14) 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. To start a new site from scratch (via Startup Assistant): 1. Open WebPlus to display the Startup Assistant. - or Select Startup Assistant from the File menu (during your session). 2. Select New Site. 3.
Setting Up Sites and Pages 19 To start a new blank site during your WebPlus session: • During your WebPlus session, click Standard toolbar. New Site on the The new site opens with a blank page using default site properties. Opening an existing site You can open an existing WebPlus site from the Startup Assistant, Standard toolbar, or via the File menu. To open an existing publication (via Startup Assistant): 1. Open WebPlus to display the initial Startup Assistant.
20 Setting Up Sites and Pages ii. The site opens in your workspace. - or 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. 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.
Setting Up Sites and Pages 21 one step below the "section" pages reside at Level 2, and are considered to be child pages of the "parent" page. Viewing site structure Two ways of viewing the site structure are possible: via the Pages tab or via the Site Structure View. The latter is ideal for viewing larger sites. Via Pages tab In WebPlus, the Site Structure tree (in the Pages tab) provides a visual aid that lets you organize the content on your site into sections and levels.
22 Setting Up Sites and Pages Via Site Structure View For larger websites, Site Structure view can be used instead of the Pages tab to provide a full-screen display that previews your "section and level" site structure as page thumbnails presented in a tree-based structure. To view your site structure: • From the Standard toolbar, select View Site Structure.
Setting Up Sites and Pages 23 Some site properties such as page appearance and search-engine optimization settings are also mirrored on individual pages (via Page Properties). This lets you override or complement the "global" Site Properties, respectively, and apply "local" settings to specific pages. To view or change site property settings: • Select - or - Site Properties from the default context toolbar. Choose Site Properties from the Properties menu.
24 Setting Up Sites and Pages master page and then assigning several pages to use that master page, you ensure that all the pages incorporate that element. Of course, each individual page can have its own elements. The Pages tab includes an upper Master Pages section containing your master page(s), and a lower Site Structure in the Pages window containing your standard pages. Each page shown in the window indicates the master page being used for that page.
Setting Up Sites and Pages 25 Attaching different master pages By default, pages created in new sites have a master page (e.g., Master A) automatically attached to them. However, if your site has more than one master page you can attach a different master page to the page instead. To attach a different master page to a page: 1. In the Pages tab, right-click the page and select Page Properties. 2.
26 Setting Up Sites and Pages Adding, removing, and rearranging pages Using the Pages tab, you can: • Add and delete pages. • Add one or more master pages. • Use drag-and-drop to rearrange pages. • Add pages from installed design templates. • Add offsite links. • Add HTML pages. • Set a page to be the home page. Use the upper Master Pages window of the Pages tab to access master pages, and the Pages window (tab's central Site Structure tree) to access pages.
Setting Up Sites and Pages 27 Adding pages To add a new blank page: 1. In the Pages Window of the Pages 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 Pages tab's Pages 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. Click OK. A new page appears at the specified location in the site structure.
28 Setting Up Sites and Pages To reassign pages to particular master pages, see Understanding pages and master pages on p. 23. Deleting pages To delete a page or master page: 1. On the Pages tab, select the page (or master page) to delete by clicking its entry. 2. Click Delete selected page above the appropriate window to delete the page. Creating HTML pages HTML pages can be added to any Pages tab's Site Structure. Such pages are included in navigation as standard pages.
Setting Up Sites and Pages 29 moves the page to the same level as, and following, the highlighted target page. makes the page a child of the page below the highlighted target page. 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.
30 Setting Up Sites and Pages Setting your home page To make a web page your home page: • Right-click on a standard page in your Pages tab then select Set as Home Page. 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 behaviour or your site when it's published.
Setting Up Sites and Pages 31 To Back up to site: 1. Save your site in WebPlus. 2. From the File menu, select Backup Site to Web. If you attempt to backup your site without configuring your FTP account settings first, a dialog appears. You'll be able to add existing FTP account details as described in Quick Publish. The Backup To web dialog displays. The hosting location where your site is about to backed up to is shown in the Publishing to field. 3.
32 Setting Up Sites and Pages From the File menu, select Publish Site and then choose Maintain Web Site from the submenu. The Maintain Website dialog appears. 2. Select your FTP account name (from the drop-down list) and type in your Password (if not saved). 3. Click Maintain. WebPlus seeks an Internet connection and displays a dialog showing the navigable website's folders in the left-hand window and any selected folder's contents in the adjacent window. 4.
Layout Items
34 Layout Items 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. 137) for standalone text with special effects, or table text (see Inserting tables on p. 45) 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.
Layout Items 35 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. 139.
36 Layout Items To resize frame text once frames are sized and positioned, various text sizing and AutoFit options are available on the Frame context toolbar. Inserting pictures The Assets tab (Pictures category) acts as a "basket" for initially gathering together and then including pictures in your site. Its chief use is to aid the design process by improving efficiency (avoiding having to import pictures one by one) and convenience.
Layout Items 37 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.
38 Layout Items Replacing pictures You can swap a picture at any time, especially useful when you want to retain the position and dimensions on the page but want to update the picture itself. It can be used on any image (uncropped or cropped). To replace a picture: 1. Click Replace Picture from File or Replace Picture from Assets directly under the selected picture. This sources pictures from anywhere on your computer or from a supplied (or custom) Asset Pack, respectively. 2.
Layout Items 39 To create a lightbox for a picture on your web page: 1. Select the picture (preferably a thumbnail). 2. Create a hyperlink to it (click Hyperlink from the Properties menu). 3. Select Picture from the menu, then from the Target Window tab, choose Lightbox from the Type drop-down list. Displaying pictures using Picture Magnifier Picture Magnifier lets you hover over areas of your picture for an overlaid or offset magnified view.
40 Layout Items Sharing via Pinterest Any picture in your site can be shared via the picture-based social media website Pinterest. This is done by applying a Pinterest action to the picture by double-clicking the picture, selecting the Actions tab, and clicking Add to add the Pinterest action. Cutting out pictures Cutout Studio offers a powerful integrated solution for cutting objects out from their backgrounds.
Layout Items 3. 41 Click either Keep brush or Discard brush from the left of the Studio workspace, and paint regions to be kept or discarded. Follow the Help pane in the studio for more detailed information. 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 launch PhotoLab: 1.
42 Layout Items 3. Select a filter from the filter tabs (Favourites, Adjustments, or Effects). 4. Adjust the filter's settings to your liking in the lower-right Trial Zone, then click Commit. 5. Repeat for additional filters. 6. Click OK. For more information, see WebPlus Help. CSS Properties You can also control the border, padding, outline, background images and visibility of your object by adjusting its CSS properties.
Layout Items 43 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. Panels can also be made to display only when required as you click or roll over buttons, pictures, or other assets. They can also be made to display permanently—great for navigation bars that never disappear on window scrolling! Panels are also used as building blocks for creating animated sliders (p. 66).
44 Layout Items • 4. In the Asset Browser, select a panel background design and click OK. The preview box updates with your chosen panel design. Click OK. 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.
Layout Items 4. Select the panel from the Object ID drop-down list. 5. Select an event from the Event drop-down list. 45 The event relates to the behaviour 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. To hide a selected panel: • From the context toolbar, select Show or Hide the object.
46 Layout Items 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 colour fills. Some unique features include number formatting and formula insertion. To insert a table: 1. From the Quick Build tab (Layout Items category), click Table. 2. Click on your page, or drag out to set the size of your table.
Navigation Items
48 Navigation Items 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. 20), making it easy to design a site that's simple to navigate. Technically, navigation bars facilitate movement between the various sections and levels of a site (see p.
Navigation Items 49 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.
50 Navigation Items 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.
Navigation Items • 51 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. From the Advanced option, set target frame/window, page ordering, and relative links: 7. Click OK. The navigation bar appears on your page. Tips: • Some navigation bars are colour schemed, allowing further control of the bar's appearance. • Use the Task Monitor tab to add navigation-related tasks and reminders.
52 Navigation Items You have full control of what level of your site you want to present in the pop-up menu. In the example opposite, the pop-up menu is based on child pages belonging to a Products parent page (which would probably host the button and pop-up menu). To create a pop-up menu: 1. Select an object to attach the pop-up menu to. 2. From the Properties menu, select Pop-Up Menu. - or Right-click an object and select Pop-Up Menu. 3.
Navigation Items 53 5. 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. 6. Select a menu option from the box, then edit the values in input boxes, the choices in drop-down lists, select radio buttons, and check boxes to alter your pop-up menu design. Graphical popup menu settings for buttons, separators, and background share similar settings to those of buttons. 7. Click OK.
54 Navigation Items To insert a preset button: 1. From the Quick Build tab (Navigation Items category), click Button. 2. Position your cursor and click at the point where you want your button to be placed. Alternatively, to set the size of the button, drag out a region and release the mouse button. 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.
Navigation Items 7. 55 • From the Hyperlink Type tab, select a link destination type which will direct the user to a target (e.g., Internet page, site page, file) via a hyperlink (see p. 57). • From the Target Window tab, select a window or frame type from the Type drop-down list. For example, you could open the target page in a "New Window". Click OK.
56 Navigation Items Adding hyperlinks and actions Hyperlinking an object such as a box, some text, or a picture means that a visitor to your website can click on the object to trigger an event. The event is most commonly a jump to one of the following hyperlink targets: • 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.
Navigation Items 57 Adding hyperlinks To add a hyperlink: 1. Use the Pointer Tool to select the single or grouped object or highlight the region of text to be hyperlinked. 2. Select Hyperlink from the Properties toolbar. The object's properties dialog appears. 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.
58 Navigation Items The object's properties dialog appears with the current link target shown. • To modify the hyperlink, select a new link destination type, target, and/or options. • To remove the hyperlink, click No Hyperlink. 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.
Navigation Items 59 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). • Slide on Scroll: Object slides horizontally from left or right, fading in when scrolled in/out of view. • Fade-In: Makes objects transparent until rollover, e.g.
60 Navigation Items account needs to be created on the Pinterest website to use this feature. • Custom: Runs your own JavaScript code in response to a click, mouse, key press, and more. 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. 42. 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.
Navigation Items 61 Adding an anchor An anchor is a specific location on a page that can serve as the target for a hyperlink (see p. 57). 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).
62 Navigation Items ID and Anchor from the Properties toolbar. 2. Select 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.
Navigation Items 63 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. From the Target Window tab, choose Lightbox from the Type drop-down list. 5. (Optional) Add a caption to the picture in the lightbox using the Caption box. You can also make the picture part of a slideshow using the Slideshow Name drop-down list. 6. Click OK. Hyperlink from the Properties toolbar.
64 Navigation Items
Interactive Objects
66 Interactive Objects 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.
Interactive Objects 67 To insert a slider: 1. From the Quick Build tab (Interactive Objects category), click Slider. 2. To insert the slider where you want it to appear on the page, position the displayed cursor then simply click the mouse. 3. In the Asset Browser dialog, select "Sliders" in the Pack Files category, then select an individual slider from the main pane. 4. Click OK. You can also add sliders to the page using the Assets tab (see WebPlus Help).
68 Interactive Objects 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. One you've reviewed the content you can either edit the slider directly on the page or use the more versatile Slider Studio. To edit your slider directly on the page: 1. Select your slider. 2. From the context toolbar, choose options to: • add, copy or delete panels.
Interactive Objects 69 The studio offers a panel-to-view display with supporting tabs for panel configuration, and lets you perform all of the operations possible from the context toolbar (above) plus additional features such as slider preview. To edit your slider in Slider Studio: 1. Select anywhere in the slider region, then from the Slider context toolbar, select Slider Studio. 2.
70 Interactive Objects Gallery types Different Flash or JavaScript gallery types can be used to create your Photo Gallery. 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.0-compatible image host, or SlideShowPro Director.
Interactive Objects 71 JavaScript Photo Gallery Like Flash Gallery but offers JavaScript-based photo galleries. Photo grids, photo stacks, and lightboxes are available. Inserting a Photo Gallery The Photo Gallery is inserted on the page, just like an individual photo, except that the currently displayed photo is surrounded by a background, navigation bar and preview thumbnails. To insert a Photo Gallery: 1. From the Quick Build tab (Interactive Objects Items category), click Photo Gallery. 2.
72 Interactive Objects photo file(s) to open. Use Ctrl-click or Shift-click to select multiple non-adjacent or adjacent files. - or Click the Add Assets button to navigate to then select the photo file(s) to open. - or • 2. Add all photos in a folder Click the Add Folder button to navigate to a folder then select it to add its content. (Optional) Select any photo thumbnail(s) for manipulation; • To add a caption, click the Caption column and input text, numbers and characters.
Interactive Objects 73 Editing the Photo Gallery Once added to the web page, the Photo Gallery can be edited at any time by double clicking. 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. Each map will allow markers to be placed on the map to identify locations. To insert a Google Map: 1.
74 Interactive Objects 2. From the Google Map dialog, enter your post code (zip code) or address in the Search for a location field, then click Search. As Google's geolocator is being used, WebPlus will sense your locale, and display local addresses preferentially. 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.
Interactive Objects 75 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.
76 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. 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. Click Rollover from the Quick Build tab (Interactive Objects) and drag the insert cursor across your page to set the rollover size. 3.
Interactive Objects 77 To edit a rollover graphic: • Double-click the rollover graphic, to display the Edit Rollover dialog. Modify settings as appropriate. Inserting pop-up rollovers The most common use for pop-up rollovers in WebPlus is to hover over a picture thumbnail to show its larger representation, usually offset next to the thumbnail. WebPlus lets you choose the position and size of the pop-up in relation to the "hovered over" thumbnail. To insert a pop-up rollover: 1.
78 Interactive Objects • 3. For the Over image, the previously chosen Normal image is used by default (typically for photo thumbnails). However, you can Browse or Browse Assets to use a completely different image. Click OK. If captioning is required on pop-up rollovers this can be made to appear next to your Over image (see WebPlus Help for details). For pop-up rollovers to work effectively you'll need to position the Normal and Over images on your page.
Smart Objects
80 Smart Objects Login forms WebPlus lets you add a login/logout form onto a page in your website. This means that a registered web visitor can gain access to any restricted pages by signing in to the site. The login box is part of your Site Membership Manager in Serif Web Resources. Registered users can either be added manually via www.serifwebresources.com or via self-registration user sign up. To insert a login form: 1. From the Quick Build tab (Smart Objects category), click Login Form. 2.
Smart Objects 81 created one, click Create New. (See Site Membership Manager on p. 99) 5. 6. In the Edit dialog, several options are available: • Click Configure to set the appearance of your form. • Click Manage to access www.serifwebresources.com to set up your Site Membership Manager. • From the Appearance settings box, set a colour for your background, border, text/labels, and buttons. Click Insert to add the form to your page.
82 Smart Objects requisite to using blogs, like all Smart Objects, is that you create a valid Serif Web Resources account and a Site Membership Manager for your site in advance. As a blog owner, you can manage the blog. Articles can be added, edited, or removed, while visitor's article comments can be deleted. Another feature is the ability to allow multiple authors to add articles to your blog (see WebPlus Help).
Smart Objects 83 5. From the Configure dialog, enter a Name for your blog. This is the blog title that appears at the top of the published blog. 6. Click Save. If you've created a Site Membership Manager previously, steps 3 and 4 are not required. Once added to the page, you can Edit, Configure, and Manage the blog by right-clicking the box (or using the context toolbar). Your blog can be edited to change its appearance and number of articles to view. To edit your blog: • Double-click the blog.
84 Smart Objects Inserting a forum WebPlus lets you insert a forum Smart Object into your site, which can be structured into separate categories containing one or more subforums. 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.
Smart Objects 85 Within a selected subforum, a topic can be created by a forum visitor which can be viewed and/or optionally replied to by other forum visitors (by posting a message in response). This discussion forms the basis of forum debate, creating a "thread" of visitor replies. Forum contributors simply register and enter their own login details to post or reply to topics. Forum features • Create different categories (e.g.
86 Smart Objects • Set user permissions. • Manage and moderate the forum without republishing. 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 a forum A forum can be added to the page like any other object, although you have the option to present the forum in a full-size window as an offsite link instead.
Smart Objects 87 4. From the Site Membership Managers dialog, select the Site Membership Manager for your site. If you haven't already created one, click Create New. (See Site Membership Manager on p. 99.) 5. From the Configure dialog, enter a Name for your forum. This is the forum title that appears at the top of the published forum. 6. Add a Forum Description to describe what the forum is for. 7. Click Save. The forum appears on your page.
88 Smart Objects To manage your forum: • Select the forum and click toolbar. Manage from the context 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 a site search WebPlus offers a choice of powerful search options depending on how (and what part of) your website is to be searched.
Smart Objects 89 Site Search Results Frame— creates a frame in which the search results are displayed. Typically, this is placed and sized onto its own page, and does not appear in the site navigation structure. You'll normally position the search results frame ahead of adding the Site Search Form. Site Search Form object—the text box in which users type the word or phrase they want to search for. This object is usually added to a master page so it appears on all pages of the site.
90 Smart Objects 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. Select Site Search Results Frame on the Quick Build tab (Smart Objects) and drag the insert cursor across your page to place your search results window. 3. From the dialog, select various options to alter the appearance of results text and/or hyperlink text.
Smart Objects 5. 91 To set up Smart Search Properties via Serif Web Resources, click Select Site Membership Manager. In the dialog, select the Site Manager for your site from the list or click Create New to create a new Site Manager. The Site Membership Manager must be using the same URL as your website. If they do not match the Online Search feature will not work. 6. (Optional) Check Use custom text.. to display a message while search results are being compiled ready to display. 7.
92 Smart Objects 3. Click Add. Indexing your website Once you've published your site, an important final step is to initiate the indexing of the site. This will allow web visitors to use the Online Search feature without delay. To index your website: • Go to your website's page containing your search form, then carry out a search for any search term present in your site. To monitor the indexing status of your site at any time, go to your Site Membership Manager on www.serifwebresources.
Smart Objects 93 Let's look at each Smart Object you'll find in Serif Web Resources and what you can do with them. Accommodation Booker Blog Host the online booking of guest house, motel, and bed & breakfast rooms, with pricing options for different date periods and days of the week. A blog acts as a personal journal on your web page which hosts your own published articles in an easy-to-use text editing window. Articles can be commented on by visitors to the web page.
94 Smart Objects Poll Resource Booker Shout Box Set up an online poll to canvass web visitors' opinions. Host the online booking of meeting rooms, rehearsal rooms, theatre tickets, and more. Book by the hour or by the day, as recurring bookings, and with pricing options for different age groups. Acts as an interactive chat window. Let your web visitors chat amongst themselves.
Smart Objects 5. 95 A confirmation email will be sent to your email address. Click the link in the email and you're ready to login to Serif Web Resources (via Insert>Smart Object or www.serifwebresources.com). To clear Account details: • Go to Tools>Options and click Clear Account Details shown from the Options>General menu option. This will clear the stored login details for Serif Web Resources so that automatic login will no longer work.
96 Smart Objects Once your Site Membership Manager is created, Smart Objects can be created from it, configured, and edited before adding to the web page immediately or at a later date. Creating Smart Objects A Smart Object can be created from a selected Site Membership Manager. Typically you would only add a single forum to your site, but your site could have multiple blogs, news objects, shout boxes, and polls spread throughout your site. Each object needs to be created in the Site Membership Manager.
Smart Objects 97 Configuring Smart Objects The created Smart Object needs to be named, given a description, and, in some cases, have settings configured to control the way the Smart Object operates. 1. 2. From the Configure dialog: • Enter your own Name for the object. This displays next to the Smart Object under the Site Membership Manager entry for easy identification. • Set the Language to be used for your object. • Depending on the Smart Object type, settings will vary.
98 Smart Objects Selecting an object from within the Smart Objects library view (having expanded the Site Membership Manager) will also open the Edit dialog. To edit a Smart Object on your page: • Double-click the object to reveal the object's Edit dialog. Editing an object only affects the object on the page and does not alter any collected data. You can insert multiple instances of the same Smart Object. Each separate instance can then be edited independently.
Smart Objects 99 Shout Box) store collected visitor data such as article comments, email addresses, poll results, and a chat messaging log. For example, for Blogs creating and managing articles is a fundamental part of the management process. To manage a Smart Object from your Site Membership Manager: 1. From your Site Membership Manager, double-click the Smart Object. 2. From the Edit dialog, click Manage. The management options differ for each Smart Object type.
100 Smart Objects Only one Site Membership Manager can be created per website. If you're a multi-site developer you'll be able to manage multiple websites via each site's Site Membership Manager. Each Site Membership Manager controls its own unique access control arrangements and Smart Objects. See WebPlus Help for more information. If you want to create Smart Objects, see Using Smart Objects on p. 92.
Smart Objects 101 2. Log in to Serif Web Resources (See Using Smart Objects on p. 92). This assumes you have a valid login; otherwise you will have to register. 3. From the Site Membership Managers dialog, select Create New. 4. In the Configure dialog, you have to set up a Site Name. This is a server-side manager that needs to be created to allow Smart Object and access control to operate. 5. Enter the Site URL, which is the web address of your site, e.g. www.rainbow.org.uk. 6. Click Create.
102 Smart Objects Member Login Form: Use this option to add a login form directly to your page. Typically of use in personal websites or small enterprise websites, you can allow free access to most of your site, with only a limited set of pages accessible to selected web visitors via login. This login form can also be added via the Quick Build tab. See Login forms on p. 80 for more information.
Smart Objects 103 WebPlus uses Serif Web Resources to control which users can access the page. Login details are stored in a user group associated with the page which contains a list of authorized users. To set up your user access control: 1. Create a new Site Membership Manager for your site. (See Site Membership Manager on p. 99.) 2. Login to www.serifwebresources.com. 3. From the Groups tab, enter a group name and click Create Group. 4.
104 Smart Objects 3. From the User Groups dialog, select the user group, e.g. Members (which belongs to the website Rainbow), then click OK. Your page's Page Security tab should show that the page is password protected and that the user group has been assigned. 4. Click OK, then OK again to exit the dialogs. Mailing lists As well as login forms, mailing lists can be created in WebPlus. A mailing list can be added onto a page in your website which allows web visitors to sign up to newsletters, etc.
Social Media
106 Social Media 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.
Social Media 4. 107 Customize the behaviour 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. • Verb to Display (Like Button only) Select Like or Recommend as the word that appears on the button. 5.
108 Social Media 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. Tweet Button Allows visitors to share your website by tweeting your site content to their Twitter profile.
Social Media 2. In the dialog, from the Type drop-down list, select Tweet Button. 3. Customize the behaviour 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 @".
110 Social Media 2. In the dialog, from the Type drop-down list, select Follow Button. 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. 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.
Social Media 111 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.
112 Social Media Although not considered social media, the strip also lets visitors share your site's URL via email or simply print the current page. Why not position your button strip on a master page? This will make the strip available across all pages that use that master page. To insert a social bookmarking button strip: 1. From the Quick Build tab (Social Media category), click Social Bookmarking Button Strip then click anywhere on the page to place it. 2.
Media
114 Media 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 locally stored videos, uploaded videos on your web space 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.
Media • 4. 115 Use Flash video Choose the older Flash video player for Flash FLV video. Add your video or videos to the player: • Add individual videos Click the Add Files button to select the video file(s) to open. - or - • Add all videos in a folder Click the Add Folder button then navigate to a folder, select it and click OK to add its content. - or - • Add videos from your Assets Click the Add Assets button then choose your preferred player format and click OK.
116 Media See Inserting Videos in WebPlus Help for further information about player and playlist configuration. 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. Online Resource Manager (Tools>Site Manager) can be used to scan your web space for video files, as well as manually upload videos to your web space.
Media 117 2. Choose a clip or predefined dimensions from the Size list on the General tab to set the player size. It's recommended that your player is sized to match your video (or smaller) rather than choosing a player size larger than your clips. 3. Choose a Skin to set the player's basic appearance. 4. Pick Colours for your progress bar and other elements. 5. Replace the Poster image—the preview shown in the player before your video or playlist begins. 6.
118 Media 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).
Media 5. (Optional) To just play a snippet rather than the full video, specify start and end times (in seconds). 6. Click OK if you are happy to insert the video in a standard YouTube player. 119 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.
120 Media 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 Vimeo and click on your page. 4. In the dialog, paste the video URL into the input box. 5. (Optional) Choose a custom colour for the player controls and any visible text to match or contrast with your site using the Colour of Video Controls selector. 6.
Media 121 Adding audio to your page Audio is inserted in a player straight onto the page. You can add audio from a file, from assets, or from an already online or uploaded location. To insert a single audio or a playlist: Audio 1. From the Quick Build tab (Media category), click Player. 2. cursor where you want the audio player to Position the appear on the page, then simply click the mouse. 3.
122 Media • Add audio that is already online Click Add URL and paste or type an online audio URL (its full web address). This could be audio on another website. 4. (Optional) To remove audio from the playlist, check the box to the left of its thumbnail and click Delete. 5. (Optional) To adjust order in a playlist, use the Down buttons at the bottom of the dialog. 6. Click OK. Up and The audio player will be inserted where you clicked on your page.
Forms
124 Forms 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. 131. Form Structure The building blocks of a form comprise a mixture of text labels and form fields.
Forms 125 completed is configurable, as is validation of input data. (See WebPlus Help for more about tab order and validation). 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. 155).
126 Forms Form Templates are available for user appointments, comments, and login. Other popular forms that could be created from scratch by the user include CV 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.
Forms 127 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. From the Forms tab, set a Form Name, Form Title, and Width for the form (not form fields). 6.
128 Forms 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.
Forms 129 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 Forms category to the page. Form from the 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.
130 Forms 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 131 background colour (from the Colour tab), and form fields can be ordered and rearranged. Form field properties can also be edited independently of Form Designer. 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 available as a form field when using Form Designer or when creating a form from scratch.
132 Forms To set up Serif Web Resources submission: 1. With the Serif Web Resources icon enabled, click the Select button adjacent to the Email Address field (log in to Serif Web Resources if you're not already logged in). 2. From the dialog's Add new box, enter the target email address and click Add new. The email entry is created and added to the list. You'll notice that the entry is classed as Confirmed "No".
Forms 133 5. Check Time Zone and a city/region according to the website's location. 6. Select Email Format if the email is to be sent as plain text, HTML, or both. Format lets you set header text or footer text. 7. Check Attach Data as Zip File to bundle the submitted form data as a ZIP file, attached to the email. 8. Click More Recipients to add additional email addresses to send the form data to. These must already exist as form email targets. 9.
134 Forms To set up email directly: With the A remote script icon enabled, enter the destination Email Address (or select an already known email address from the drop-down list). To set up a local script file: The A script from my hard drive option is for experienced web developers with scripting expertise. Navigate to and select your local script file, typically a .php, .js, .cfm, .cgi, .pl, .dll, or .exe file with the Browse button.
Text
136 Text 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. WebPlus will import text into a selected text frame or create a new text frame if one is not selected. See Inserting text frames on p. 34 for more information.
Text 137 Click on the page or pasteboard to create a new frame at a default size. You can also import text directly into a text frame which already exists on the page. To import text into an existing frame: 1. If using an existing empty text frame, select the frame. If inserting text into a populated text frame, click for an insertion point (or select a portion of text to be replaced). 2. Follow steps 1-5 above. The text will be imported into the selected text object.
138 Text 3. Set initial text properties (font, style, etc.) as needed before typing, using the Text context toolbar, Text menu, or rightclick (choose Text Format>). 4. Type directly on the page to create the artistic text. Once you've created an artistic text object, you can select, move, resize, delete, and copy it just as you would with a text frame. Solid colours, gradient/bitmap fills and transparency can all be applied.
Text 139 Now you can type new text, apply character and paragraph formatting, edit the text in WritePlus, apply proofing options, and so on. Editing text on the page You can use the Pointer Tool to edit frame text, table text, or artistic text directly. On the page, you can select and enter text, set paragraph indents and tab stops, change text properties, apply text styles, and use Find and Replace.
140 Text - or Select a single word, paragraph or portion of text. 2. Type to insert new text or overwrite selected text, respectively. To start a new paragraph: • Press Enter. To start a new line within the same paragraph (using a "line break" or "soft return"): • Press Shift+Enter. 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.
Assets for Creativity
142 Assets for Creativity 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, backgrounds, 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 and Asset Manager (p. 144 and WebPlus Help, respectively).
Assets for Creativity 143 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. 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 (p. 149).
144 Assets for Creativity The Asset Manager Use the Asset Manager to create your own Asset Packs by using assets from other Asset Packs and/or by importing pictures, graphics, or PagePlus pack files. You can tag assets and then save or export your custom asset pack. (See WebPlus Help for details.) Asset browsing The Asset Browser offers a whole range of professional ready-to-go designs, called assets, that you can use directly in your site.
Assets for Creativity 145 To browse assets (by category): 1. From the Assets tab, click 2. In the Asset Browser, select an asset category from the Categories section. Browse. 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.
146 Assets for Creativity 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. You may need to click the right arrow to expand a category for the latter. The pack file(s) will appear in the main pane. 3. Scroll through to browse the assets included in each pack file.
Assets for Creativity 147 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.
148 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 149 Adding assets to your page To add an asset to the page: • Click its thumbnail in the design category and drag it out onto the page. 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 colour) 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.
150 Assets for Creativity When you first install WebPlus, the My Designs gallery will be empty, ready for objects to be added to it. To store an object in My Designs: • Drag the object from the page and drop it onto the Assets tab's My Designs category. You don't need to expand the category in advance, as it will automatically expand for you.
Assets for Creativity 151 Storing asset settings Instead of storing an object, it's possible to store just an object's settings for reuse at a later date. As an example, a custom button's design could be saved, rather than the button itself. Like storing objects, settings can be stored by drag and drop of the object, but to the Settings category only. A pop-up dialog lets you choose the type of settings needing to be saved.
152 Assets for Creativity
Previewing and Publishing
154 Previewing and Publishing Tasks The Task Monitor tab is used to report errors, problems, and reminders relating to your website prior to publishing. The task entries in the tab are interactive and let you resolve tasks automatically or manually. At any time you publish, the tasks are displayed again in the publishing dialog—you can decide to proceed with publishing or be taken back to the Task Monitor tab to resolve tasks. The tab is displayed at the bottom of the WebPlus workspace.
Previewing and Publishing 155 Creating your own reminders The Task Monitor tab allows you to create your own reminders that need to be addressed before project completion. You can add reminder text as well as set an urgency and a due date (e.g. a website go-live date). Previewing your site Previewing your site in a web browser is an essential step before publishing it to the web. It's the only way you can see just how your site will appear to a visitor.
156 Previewing and Publishing on each page and the total size of the files. This is carried out via the Standard toolbar's Preview site flyout. Publishing to the web (using WebPlus.net) You can upload your site to WebPlus.net (Serif Web Hosting) so it's viewable by the whole world! You can specify that all web pages are published or, if updating your site, only pages changed since the last "publish." To publish your site to WebPlus.net: 1.
Previewing and Publishing 157 3. Follow the set up procedure on serif.com within your Internet browser. You’ll be provided with a hosting page which contains FTP details you’ll need to manually transfer to WebPlus. 4. In WebPlus’s Account Details dialog, which popped up when you clicked Activate Now, transfer hosting details from your hosting setup page and paste them into the equivalent fields, e.g. 5. Click OK to close Account Details. 6.
158 Previewing and Publishing To publish your site to the web: 1. Click the down arrow on the Publish site button on the Standard toolbar and click Publish to Web. If you haven’t set up FTP account information, you'll be prompted to add FTP details via a pop-up dialog. If you've set up at least one account, the Publish to Web dialog appears with the last used account name shown in the drop-down list and its settings in subsequent boxes. 2. From the Publish To Web: Get Hosting dialog, click Add Details.
Previewing and Publishing 159 • Check Save password to record the password on your computer, if you don't want to re-enter it with each upload. • Passive mode: Leave checked unless you are experiencing FTP connection problems. If you are certain that the FTP details are correct, unchecking Passive mode might fix the problem. ISPs and web hosts can operate passive or active FTP modes of operation, so it is worth checking this with them. • Web site URL: Set your site's URL.
160 3. Previewing and Publishing • 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. • Select the FTP account you want to use from the drop-down list. To update account settings, or add a new account, click Manage Accounts. Click OK. To Quick Publish to Web: • Click the Publish site flyout on the Standard toolbar and then click Quick Publish to Web.
Additional Information
162 Additional Information Contacting Serif Help with your Product On the web community.serif.com Get answers and ask questions in the Serif community! Additional Serif information On the web Serif website www.serif.
Additional Information 163 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.
164 Additional Information Portions of this software are copyright © 2008 The FreeType Project (www.freetype.org). All rights reserved. ODF Translator © 2006-2008, Clever Age, DIaLOGIKa, Sonata Software Ltd. All rights reserved. Office Binary Translator to OpenXML Copyright © 2008-2009, DIaLOGIKa. All rights reserved. Anti-Grain Geometry - Version 2.4 Copyright © 2002-2005 Maxim Shemanarev (McSeem) SlideShowPro © Dominey Design Inc. All rights reserved.
Index
166 Index access control, 102 Accommodation Booker, 93 Account Details (FTP), 157, 158 actions, 56, 59 adjustment (of pictures), 41 anchors, 61 animated banners, 66 anti-spam form submission, 133 artistic text, 137 Artistic Text Tool, 137 Asset Browser, 142, 144 Asset Manager, 142 Asset Pack, 142, 144 assets, 142 adding to Assets tab, 148 adding to the page, 149 browsing, 143, 144 filtering, 147 pinning, 151 searching, 146 Assets tab, 143 storing custom designs in, 149 attaching master pages, 25 audio, 12
Index Google Google+ (widget), 110 Maps, 73 graphics (as Assets), 144 HD photo, 36 home page, 20 changing, 30 HTML pages, 28 hyperlinks, 56 adding, 57 anchors for, 61 target window for, 58 icons, 144 importing text, 136 installation, 8 JPEG, 36 lightboxes, 62 for pictures, 38 log-in forms, 80 Magnifier (pictures), 39, 59 mailing lists, 104 maps (Google), 73 master pages, 23 adding, 27 attaching, 25 properties, 30 removing, 28 menus pop-up, 51 navigation bars, 48 buttons for, 53 inserting, 48 new features,
168 Index Pro templates, 15 proofing tools Task Monitor tab, 154 publishing QuickPublish, 159 third-party web hosting, 157 to WebPlus.
Index theme layouts, 14 trademarks, 163 Twitter (widget), 108 video inserting, 114 Vimeo, 119 YouTube, 118 Video Player, 114 Vimeo videos, 119 watermarking (pictures), 39, 144 169 web hosting (WebPlus.
