Contents Contents 1. Welcome .......................................................... 1 Welcome! ..................................................................................................................3 New features............................................................................................................4 Installation ................................................................................................................7 2. Getting Your Site Online ..................
Contents Using color schemes ......................................................................................... 59 Dynamic guides .................................................................................................. 62 4. Layout Items .................................................. 65 Inserting text frames ......................................................................................... 67 Inserting pictures....................................................................
Contents 7. External / Managed Content ......................... 129 Inserting framed documents ........................................................................131 Inserting a blog ..................................................................................................133 Inserting a news window ...............................................................................135 Inserting a forum...............................................................................................
Contents 12. Text .............................................................. 199 Importing text from a file .............................................................................. 201 Using artistic text .............................................................................................. 202 Putting text on a path ..................................................................................... 205 Editing text on the page ...........................................................
Contents 16. Additional Information ................................... 247 Contacting Serif .................................................................................................249 Credits ...................................................................................................................251 17. Index............................................................. 253 Screenshots used in this User Guide were taken from the UK English version of WebPlus X6.
In memory of Jim Baumgartner, a valued WebPlus forum contributor over many years.
1 Welcome
2 Welcome
Welcome 3 Welcome! Welcome to WebPlus X6 from Serif—the easiest way to get your business, organization, or household on the web! To make life so much easier, 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 X6 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). New features • Site Structure View for Site Organization (p.
Welcome 5 • Quick Build Tab for Easy Web Design Access the most popular tools using the Quick Build tab—split into categories such as Layout Items, Navigation Items, Social Media, and Interactive Objects, as well as External / Managed Content, and many more. Large icons help you easily identify the type of content you need, then simply click-drag an icon onto the page for quick results—no prior knowledge of the user interface needed! • More Actions for Advanced Object Interactivity (p.
6 Welcome Creative • Assets for a Creative Boost! (p. 219) Get creative with WebPlus's new Assets tab—the powerful new tab that lets you browse and search for professionally designed content (called assets). Web-related categories such as Sliders/Panels and Buttons are available, along with Graphics, Pictures, Picture Frames, Backgrounds, Page Content and entire Pages—all ready to drag and drop straight into your site! The tab also lets you store custom designs for global or current site use only.
Welcome WebPlus Help lists additional minor product improvements on previous versions. See the New Features topic in WebPlus Help for more details.
8 Welcome First-time install To install WebPlus X6, simply insert the WebPlus X6 Program disc into your disc drive. The AutoRun feature automatically starts the Setup process. Simply answer the on-screen questions to install the program. Repairing or changing your install To repair or change the installation at a later date, select Control Panel from the Windows Start menu and then click on the Programs - Uninstall a program icon.
2 Getting Your Site Online
10 Getting Your Site Online
Getting Your Site Online Start WebPlus On program launch, the Startup Wizard is displayed which offers different routes into WebPlus: For this Getting Your Site Online chapter, we'll concentrate on the Use Design Template and WebPlus Hosting options. Along the way, you'll be able to edit title and body text, insert a picture, add a new page, an Under Construction graphic, and publish your site (via Serif or other web hosting provider).
12 Getting Your Site Online Pick a design You don't need to start from scratch with WebPlus. Instead, you can create a complete website based entirely on a theme layout (i.e., a set of pre-designed template pages with a similar look and feel). To pick your design, simply select a theme layout and a color scheme to suit your taste. Choosing a theme layout and color scheme 1. Start WebPlus. 2. From the Startup Wizard, select Use Design Template. 3.
Getting Your Site Online 13 4. 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). The page thumbnails refresh to reflect the new page's appearance. 5. In the right-hand pane, uncheck all pages except the Home page. Use your up/down arrow keys for a live preview of each scheme in turn.
14 Getting Your Site Online 6. Click Open. Your web page is added to the Site tab. Choosing a Pro Template Instead of a theme layout, you could choose a Pro Template, i.e. a ready-to-go multi-page template already populated with royalty-free pictures. These templates are more trade/occupation-based (e.g., Painter & Decorator) rather than being based on a theme. 1. From the Startup Wizard, select Use Design Template. 2.
Getting Your Site Online Edit heading and text Edit the page heading 1. On the Site tab, double-click the entry for the Home page. 2. Double-click on the heading text. 3. Type new text. Edit body text 1. On your page, triple-click on a text frame to select a paragraph. 2. Type your text.
16 Getting Your Site Online Instead of editing an existing text frame, you can create new text frames by using the Text Frame option on the Quick Build tab. Insert a picture Adding pictures to WebPlus 1. From the Assets tab (Pictures category), click Add.... 2. From the dialog, navigate to a folder, and select your picture(s). 3. Click Open. Your pictures appear as thumbnails within the Pictures category.
Getting Your Site Online 17 Adding pictures to the page • From the Assets tab (Pictures category), drag a picture thumbnail directly onto the page, inline into artistic/frame text (at a chosen insertion point), or into a picture placeholder (below). - or - • Click a picture placeholder to add a picture from your computer drive directly. Add a new blank page 1. From the Site tab, click the down arrow on the tab's Add new page or link button. From the drop-down list, choose New Blank Page.... 2.
18 Getting Your Site Online Add an Under Construction graphic Before you establish a web presence by publishing your site, it's a good idea to add an "Under construction" graphic to your pages until you've finished your site. On publishing, you'll make web visitors aware that your site is in development and subject to change. Graphics that you want to display throughout your site can be added to a page's master page. 1. On the Site tab, select Master Pages>. 2.
Getting Your Site Online 19 6. Click Close. 7. From the Assets tab, drag the graphic onto the bottom of the master page. 8. Right-click the graphic and select Arrange>Attach to Bottom of Page. On publishing, the under construction graphic always appears at the bottom of the page. As you're on a master page you may like to add your company/club name, by double-clicking the placeholder text and typing.
20 Getting Your Site Online Get Serif web hosting Serif web hosting provides Serif-supplied web space for the user to publish to. By signing up to the hosting service you can simplify web publishing with the option of upgrading your web hosting package over time. When you sign up, you'll be able to decide which name to use as your web address, depending on the package you've chosen. This is simply the address that web visitors would type into their web browser in order to visit the home page of your site.
Getting Your Site Online 2. 21 Follow the web hosting sign-up instructions available online. You'll need to: • Enter a valid email address and contact details. • Activate the link in an activation email that Serif will send to you. • Create the web hosting account, using your email address and password. You'll also need to enter your chosen that makes up your web address. • In the Hosting details screen, select a hosting package.
22 Getting Your Site Online Transferring your account details WebPlus will check if you have no hosting account details set up in the program. If none are present, you'll be prompted to add account details. Publish site on the Standard toolbar. 1. In WebPlus, click 2. From the pop-up dialog, in the Use existing hosting & domain name box, select Add Details. 3. In the Account Details dialog, transfer, by copy and paste, your web hosting account details (created on serif.
Getting Your Site Online 5. 23 In the subsequent Upload to server dialog, click Test to check that your added details are valid. If a connection isn't established successfully, review your hosting account details and your Internet connection, then retry. If you would like to use your own hosting and domain name rather than use Serif hosting, see Publishing your site (below). Publishing your site To get your site online, you'll need to publish your page to your web space.
24 Getting Your Site Online You should now have a site online which can be used as a building block for further web development. The additional chapters let you explore WebPlus further, and will help you maximize your web design skills. To keep to key principles, many assumptions have been made in this chapter about your site. By understanding WebPlus as a whole, you'll be able to customize your site's design to further fit your needs.
3 Setting up Sites and Pages
26 Setting Up Sites and Pages
Setting up Sites and Pages 27 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 highvisual impact. • Schemes—choose a named color 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.
28 Setting Up Sites and Pages Pro templates These are categorized templates containing royalty-free pictures which can be adopted to fast-track you to your completed website. You just need to personalize placeholder text, then publish. Equivalent mobile-ready theme layouts are available that can be used to create your own site optimized for smart phone access. (See Creating mobile sites and pages on p. 34). To create a site using a design template: 1. Launch WebPlus, or choose Startup Wizard...
Setting up Sites and Pages 29 Theme Layouts Pro Design Templates If needed, use the scroll bar or collapse a category to reveal more options (click the button next to the category name). On template selection, the right-hand pane refreshes to display thumbnails of that template's available pages.
30 Setting Up Sites and Pages 4. 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 click Select All to select all pages (click Deselect All to clear the current selection). 5. 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).
Setting up Sites and Pages 31 The site opens to the first (Home) page, with the Studio's Site tab displayed on the right, showing the various pages that comprise the site in its Site Structure tree. The Get More Templates category lets you access additional purchasable templates from Serif. All theme layouts contain assets, e.g. individual professional graphics, pictures, buttons, icons, picture frames, or backgrounds, to complement your theme layouts.
32 Setting Up Sites and Pages If your site hasn't been opened recently, click navigate to it. Browse... to Recently viewed files also appear at the bottom of the File menu. Simply select the file name to open it. 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 33 Starting a site from scratch Although design templates (p. 27) can simplify your design choices, you can just as easily start out from scratch with a new, blank site. Your site is created by following a step-by-step wizard which helps cover the key aspects of your site's creation.
34 Setting Up Sites and Pages To start a new blank site during your WebPlus session: • Choose New from the File menu. The new site opens with a blank page using default page properties. If you click result. Cancel from the Startup Wizard, you'll get the same Creating mobile sites and pages Before the advent of cell phone technology, your website was just termed a website.
Setting up Sites and Pages 35 WebPlus lets you create mobile solutions for your website in several ways: • Create a standalone mobile site. • Create a hybrid desktop - mobile site, with redirection from desktop pages to mobile site pages (and vice versa), all within the same WebPlus project. • Create a separate desktop and mobile site (above), with redirect from desktop pages to a separately hosted mobile site. Your mobile site is created from a separate WebPlus project.
36 Setting Up Sites and Pages Mobile file management One important aspect of hybrid sites is how you keep your mobile pages separate from your desktop pages. This is recommended for efficient page management and for providing independent navigation bars for your desktop and mobile pages. Some useful tips include: • Rename your mobile file names: Mobile pages are named differently when added (e.g., index0.html instead of index.html), to prevent files being overwritten.
Setting up Sites and Pages • 37 For navigation control, edit the navigation bar on both the desktop and mobile page's master page. Right-click the navigation bar and select Edit Navigation Bar.... Select Child Pages Of..., then choose the appropriate Home page in the lower drop-down list, ensuring that Include child pages and Include home page are also checked. Redirecting to/from mobile Redirection assumes that you have pages to redirect from, and "target" pages to redirect to.
38 Setting Up Sites and Pages For effective search engine optimization, always try to redirect users between pages containing equivalent content. For example, redirect a ProductX desktop page to a ProductX mobile page. 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 39 Viewing site structure Two ways of viewing the site structure are possible: via the Site tab or via the Site Structure View. The latter is ideal for viewing larger sites. 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.
40 Setting Up Sites and Pages 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. To view your site structure: • From the Standard toolbar, select Site Structure.
Setting up Sites and Pages 41 Dragging to (A) adds page before the target page on the same level, (B) after the target page on same level, or (C) as a child of a target page. If you drag a parent page, its child pages move too. 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.) are automatically set on selecting a template or when starting from scratch.
42 Setting Up Sites and Pages Understanding pages and master pages Looking at individual pages from a design standpoint, each WebPlus page has a "foreground" page and a "background" master page. 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 over.
Setting up Sites and Pages 43 The Studio's Site 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. For more varied page designs across your site, you can create more than one master page (see Adding, removing, and rearranging pages on p. 47).
44 Setting Up Sites and Pages Attaching different master pages By default, pages created in new sites have a master page (Master A) automatically attached to them. However, if you want to use a different master page, you can attach it to the page instead of the original master page. To attach a different master page to a page: 1. In the Site tab, right-click the page and select Page Properties.... 2.
Setting up Sites and Pages 45 As an example, let's say you have two designs existing on two separate master pages—"Master A" and "Master B". From Page Properties, you can place "Master B", containing the IPSUM text, in front of the selected page, with Master A used as the page background. To attach multiple master pages to a web page: 1. In the Site tab, right-click the page and select Page Properties.... 2. From the dialog's Master Pages menu option, check multiple master pages. 3. Click OK.
46 Setting Up Sites and Pages To reorder the page content and master pages: • Select the master page entry in the Page Properties dialog (Master Pages menu option) and click the Up or Down button. Editing master page objects If you're working on pages which have master pages attached, then master page objects will contribute to your page design. These objects can be edited quickly and easily from the page by using a control bar under the selected object. To edit the master page object: 1.
Setting up Sites and Pages 47 If you change your mind at any point you can reattach the object to the master page, leaving your page as it was originally. To reattach object: 1. On your standard page, select the promoted object, to reveal the control bar under the object. 2. Click Revert to Master Page. Adding, removing, and rearranging pages Using the Studio's Site tab, you can: • Add pages. • Delete pages. • Add one or more master pages.
48 Setting Up Sites and Pages Incidentally, WebPlus also supports HTML pages and offsite links which can be inserted as for any other page. Page icons for both are slightly different in design to a standard web page to indicate that it is based only on HTML code (See WebPlus Help) or that it points to a location outside of the website. As an example, compare the HTML page "Overview," the standard web page "Sales," and the offsite link "Member's forum.
Setting up Sites and Pages 49 A new page appears at the specified location in the site structure. The page uses Site Properties (p. 41) for its dimensions. You can always move the page to a different position or level, or make it use a different master page (see Rearranging pages or Assigning master pages on p. 50 and 44).
50 Setting Up Sites and Pages Adding HTML pages HTML pages can be added to any Site tab's Site Structure. Such pages are included in navigation as for standard pages. To add an HTML page: 1. In the Pages Window of the Studio's Site tab, select a page after which you want to add the new page. 2. Click the down arrow on the Add new page or link button directly above the Pages window. From the drop-down list, choose New HTML Page. A new HTML page is added to the Site tab.
Setting up Sites and Pages 3. 51 (Using drag-and-drop) Drag the page entry up or down and drop it at a new position in the tree. Watch the cursor for feedback on the new position relative to that of the page just below the cursor: 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.
52 Setting Up Sites and Pages 4. 5. WebPlus lets you control if an associated master page is copied with the page. Pick from the top-left drop-down list, choosing one of: • Copy Master Page. To always copy the master page into your site. • Compare and Copy Master Page. Checks if the master page already exists in your site then copies it if not present. • No Master Page. The page's master page is never copied to the site. Click the Open button. The page is added to the Site tab.
Setting up Sites and Pages 53 4. In the Hyperlinks tab, select the link destination type (e.g., Smart Object) for the offsite link, and the specific offsite hyperlink target (e.g., a previously created Forum). (See Selecting a hyperlink target on p. 108). 5. In the Target Window tab, select a window or frame in which you want the target to appear. 6. Click OK. Setting your home page To make a web page your home page: • Right-click on a standard page in your Site tab then select Set as Home Page.
54 Setting Up Sites and Pages Adding backgrounds WebPlus provides a wide range of backgrounds that you can apply to specific web pages or all site pages. Backgrounds are available as assets (p. 219), stored in Asset Packs such as Footers, Gradients, Headers, Patterns, Photo, and Textures. In addition, you can apply on-page or background colors to specific pages or all your site pages via page properties and site properties (p. 53 and p. 41, respectively); these can either be schemed or non-schemed.
Setting up Sites and Pages 55 Adding background pictures To add a background picture: 1. From the Assets tab, select 2. In the Asset Browser dialog, select Backgrounds from the Categories section. 3. Navigate the Asset Packs to locate a background, then select an Browse.... individual background or click Add All to include all the backgrounds from that pack. A check mark will appear on selected thumbnails. 4. Click Close. The background(s) will appear in the tab's Backgrounds category. 5.
56 Setting Up Sites and Pages 6. From the displayed dialog, select an option to apply the background to all pages (i.e., site default background), or to just the current page. The first option replaces all backgrounds for pages that use site-wide settings simultaneously. 7. Click OK. Alternatively, you can add a background picture via Edit>Site Properties... or Edit>Page Properties.... (Both using the Background menu option).
Setting up Sites and Pages 57 To create a multi-picture background: 1. From Edit>Site Properties (Background menu option), click Add to include each picture in your background. 2. Select Repeat and Position settings as described above. Pictures are placed relative to the edges of the browser window. 3. Click OK. Each added picture is displayed in the Background Pictures list. The multipicture background example (see p. 56), was based on the following list.
58 Setting Up Sites and Pages If you make the on-page color transparent, any background color shows, making the page boundaries invisible (content is still constrained to page dimensions). If you've used a picture background with transparent regions, the Background color is still active and will show through; otherwise the picture will cover the background color. For more details on other menu option settings, see WebPlus Help.
Setting up Sites and Pages 59 Using color schemes WebPlus offers an impressive selection of color schemes that can be selected when creating a site using a design template or from scratch. If you choose a template-based site, your color scheme selection will set the look and feel of your site—all templates are already "schemed". Selecting a different scheme dramatically changes the colors of page elements in your page layout with just one click! Color schemes: (A) Coral, (B) Smoothie, and (C) Default.
60 Setting Up Sites and Pages How color schemes work Color schemes in WebPlus work much like a paint-by-numbers system, where page elements in a layout are assigned specific scheme colors by number. These colors are stored in "paint jar" swatches, numbered 1 to 12, hosted on the Swatches tab. Smoothie color scheme These swatches represent the site color scheme. From here, you can assign scheme colors to page elements to make them schemed (this process is done already with templates).
Setting up Sites and Pages 61 Selecting color schemes To select a preset color scheme: Color Scheme Designer on the default context toolbar. 1. Click 2. From the dialog's Color Schemes tab, click a different color scheme sample from the list and click OK. Any regions in the site that have been assigned one of the twelve color scheme numbers are updated with the corresponding color from the new scheme.
62 Setting Up Sites and Pages Naming color scheme colors With 12 separate scheme colors, it can sometimes be difficult to keep track of the primary use for each color. In this situation you can customize the name of each scheme color using the Color Scheme Designer. To name color scheme colors: Color Scheme Designer on the default context toolbar. 1. Click 2. From the dialog's Site Color Names tab, type in a name to describe the main use for any schemed color and click OK.
Setting up Sites and Pages 63 To switch off/on dynamic guides: Options. 1. From the default context toolbar, click 2. Select the Layout>Snapping menu option, then uncheck/check Use dynamic guides. To snap to page centers, you must additionally check Page center. Aligning objects The use of dynamic guides is illustrated in the examples below and over. The darker object is already placed on the page, while the lighter object is being dragged into position.
64 Setting Up Sites and Pages Object center Page center You can also align using combinations of the above, e.g. right and bottom, depending on the position of your dragged object. Dynamic guides are red or blue when alignment is in relation to other objects or the page, respectively. Resizing objects The use of dynamic guides when resizing objects is illustrated in below. The darker object is already placed on the page, while the lighter object is being dragged into position.
4 Layout Items
66 Layout Items
Layout Items 67 Inserting text frames Typically, text in WebPlus goes into HTML text frames, which work equally well as containers for single words or standalone paragraphs and articles. You can also use artistic text for standalone text with special effects, or table text (see Inserting tables on p. 87) for row-and-column displays. What's a text frame? A text frame is effectively a mini-page, typically containing frame text in one or more paragraphs that flow through the frame.
68 Layout Items 2. Drag out to place the text frame at your chosen dimensions. - or Click on the page or pasteboard to create a new frame at a default size. To delete a frame: • Select the frame and press the Delete key. (If there's a selection point in the text, pressing Delete will remove characters after the cursor.) Putting text into a frame You can put text into a frame in one of several ways. The text will be converted to compliant HTML code.
Layout Items 69 Frame setup and layout The frame layout controls how text will flow in the frame. When a frame is selected and values for the margins are defined, its frame margins appear as dashed gray guide lines. These guides actually determine how text flows within the frame by providing padding between the text and frame edge. Text won't flow outside the frame margins. To create frame margins: • Click the frame edge, then drag column margin lines to adjust the boundaries of the column.
70 Layout Items Controlling overflowing frame text Fitting story text precisely into text frames is part of the art of laying out websites. If there's too much story text to fit in your text frame, WebPlus stores it in an overflow area hidden from view (but not lost!) at the bottom of the frame. The Text overflow button displays under the overflowing frame to indicate this hidden text, so it's important to ensure the text is made to display again, otherwise your story will remain truncated.
Layout Items Adding pictures to the Assets tab To add pictures to the tab: 1. Select the Assets tab's Pictures category, and click Add... 2. From the dialog, navigate to a folder, and select your picture(s). 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.
72 Layout Items To add a picture to your page: • From the Assets tab (Pictures category), drag a picture thumbnail directly onto the page, inline into artistic/frame text (at a chosen insertion point), or into a picture frame. 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.
Layout Items 73 Searching for tagged pictures WebPlus lets you retrieve pictures by individual tag, i.e. XMP metadata stored within each picture. You can tag photos by using the Asset Manager. To search for pictures by tag: • Click in the search box at the bottom of the Assets tab and enter a search term, e.g. vacation. Matching pictures will appear directly above the search box in a temporary Search Results tab.
74 Layout Items 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 Format menu or right-click). 3. Select Picture from the menu, then from the Target Window tab, choose Lightbox from the Type drop-down list. Cutting out pictures Cutout Studio offers a powerful integrated solution for cutting objects out from their backgrounds.
Layout Items 3. 75 Cick either Keep brush or Discard brush from the left of the Studio workspace, and paint regions to be kept or discarded. Follow the How To Help 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.
76 Layout Items 5. Repeat for additional filters. 6. Click OK. 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.
Layout Items 77 • Quick access information such as contact details and keyboard shortcuts. • "Always-on" navigation (converted from a navigation bar; see p. 99). • Image magnifier Panels are also used as building blocks for creating animated sliders (p. 92). Like revolving advertising hoardings around sports stadiums, sliders can be made to change which panel is displayed at set time intervals.
78 Layout Items 5. Select a preset panel type from the flyout. The preview box updates with your chosen panel design. 6. (Optional) Drag the Transparency slider to set how transparent the panel appears against its background. You'll need to preview your page to see your changes. 7. (Optional) Check Align panel to browser window to make your panel always available and fixed to a position when the web visitor scrolls the web page.
Layout Items 79 Adding content to your panel You should treat your panel as an empty building block which can be developed using WebPlus standard tools and features. By creating objects within the panel area, they belong to the panel. This extends to objects such as text frames, artistic text, tables, QuickShapes, and pictures. Dragging the panel will also move its associated objects.
80 Layout Items 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 Hide Panel. The panel is replaced with a Hidden Panel icon. The panel is still there, and can be revealed again by disabling the Hide Panel button (by clicking). The Hide Panel option is the same as the dialog's Panel is initially hidden option. On publishing your page, a rollover of the page object will display the panel.
Layout Items 81 To create a custom background: 1. (Optional) From the Panel Properties dialog, select a preset from which to base your new background. 2. From the same dialog, click the Edit button. The Design Studio is launched with your background zoomed in to fit your workspace. 3. Using standard WebPlus X6 tools and tabs, customize your background to your liking, using the accompanying How To tab to interactively design your background. 4. Click Commit Changes on the main toolbar to exit.
82 Layout Items Gallery types Different Flash or JavaScript gallery types can be used to create your Photo Gallery. 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.
Layout Items 83 2. 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 above. 4. Click Next>. For all Gallery types (except the Live Feed type) from the dialog, choose whether to: 5.
84 Layout Items • To add a caption, click the Caption column and input text, numbers and characters. • (Professional Flash Photo Gallery only) To add hyperlinks 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). 6. To include selected photos within your site, check Embed Images.
Layout Items 85 Using online photo content Instead of sourcing photos locally from your computer drive(s), your photo gallery can be populated with photos already online on Flickr or SlideShowPro Director via a live feed. The key advantage of using a live feed for your photo gallery is that your published website's photo gallery is automatically updated as you upload new photo content to Flickr or SlideShowPro Director independently of WebPlus.
86 Layout Items To copy your photo link from SlideShowPro Director: 1. Go to the SlideShowPro Director website, and sign in to your account. 2. Locate your album and, under Publish, click the Copy button (in the Copy XML File Path option) to your clipboard. To insert a live-feed photo gallery: 1. From the Photo Gallery dialog, select Professional Flash Photo Gallery (Live Feed). 2. Click Next>. 3. Enable RSS 2.0 media or SlideShowPro Director according to the photo source you want to use.
Layout Items 87 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.
88 Layout Items To insert a table: 1. - or Select From the Quick Build tab (Layout Items category), click Table. Table Tool from the Basic toolbar. 2. Click on your page, or drag out to set the size of your table. 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.
Layout Items 89 Event Manager lets you add personal events before or after adding a calendar to the page. For calendar-specific properties, a context toolbar lets you change an existing calendar's month/year, modify calendar-specific properties, and manage calendar events (both personal and public holidays). At any time, you can update calendar details throughout your site via Set User Details—in the same way that you'd set up the date (along with the time) on some alarm clocks.
90 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 91 Adding personal events You can complement your public holiday listings (e.g., Easter) by adding personal events such as birthdays and business launches so that the events show up on your calendar—simply use the Calendar Events button on a selected calendar's context toolbar. Events show automatically on your calendar under the chosen date. To add an event: 1. Select your calendar's bounding box. 2. Click 3.
92 Layout Items Use the Edit Event or delete an existing event. Delete Event buttons to modify or 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.
Layout Items 93 Various animation styles can be used to control how each panel is displayed. You can pick from directional styles (e.g., Left to right, Top to bottom, etc.) as well as Medley (mixed styles), Accordion, Overlays, and Scroller styles. Timebased displays are also configurable so you could make each panel appear for a Start and End date (or time). Pre-designed professional sliders are available from the Assets tab, and are typically customized once on the page.
94 Layout Items To select a slider: • From the Objects tab, select the Slider entry. You'll see the slider context toolbar appear above your workspace allowing you to edit the slider. If you're editing the contents of a panel and need to select the panel itself, select Edit>Select Parent. Subsequently, the parent slider can then be selected by choosing Edit>Select Parent again. The Asset Browser also provides some sliders which have a separate supporting navigation bar for moving between panels.
Layout Items 95 Overlay slide/fade: only uses two panels, on mouse over the second panel appears on top of the first Scroller: panels are arranged in a grid and the view scrolls from one panel to the next Date & Time: used to hide or show content depending on the current date and time In addition, the slider's panel order and playback controls can also be modified. To add a new panel: 1. Select the slider. 2. From the context toolbar, select Add Panel....
96 Layout Items To modify slider properties: 1. Double-click the slider. 2. From the Options tab, select a style from the Animation style dropdown list. The lower window will automatically preview the new style once chosen. 3. Select other playback controls using check boxes or drop-down lists. 4. From the Panels tab, you can Add Panel, Copy Panel, Delete Panel, or rearrange panel order by drag and drop (or by using Panel Left/Panel Right).
5 Navigation Items
98 Navigation Items
Navigation Items 99 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 programmed to understand your site structure, 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.
100 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., block, speech, traditional). • 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 101 If choosing Site Structure, you can: 7. • Select the page level whose pages 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 page, 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.
102 Navigation Items Once you're working with a custom navigation tree, the navigation bar will no longer automatically update when new pages are added to your site. If you still want this to happen, you'll have to base your bar on the site's Site Structure. To customize a selected navigation bar: 1. Double-click the navigation bar. 2. From the Navigation Type tab, enable the Custom option. 3.
Navigation Items 103 Pop-up menus are especially useful when you may want to show a limited, perhaps related, set of navigation links such as a set of products. You have full control of what level of your site your 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. Select Pop-Up Menu...
104 Navigation Items 5. From the dialog's Menu Appearance tab, select Text pop-up menus or Graphical pop-up menus. The latter implements buttons objects to make up its menus. 6. Select a menu option from the box, then edit input boxes, drop-down lists, radio buttons, and check boxes to suit your pop-up menu design. Graphical pop-up menu settings for buttons, separators, and background share similar settings to those of buttons. All options are described in detail in Changing pop-up menus in WebPlus Help.
Navigation Items 105 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 Edit Button dialog, click the button preview box. 4. Select a preset button type from the flyout. The preview box updates with your chosen button design. 5.
106 Navigation Items 6. (optional) From the Form tab, select Submit Form or Reset Form if the button is within a form and is intended to have a submit or reset function. 7. From the Hyperlinks 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. 108). 8. 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". 9. Click OK.
Navigation Items 107 Creating custom buttons If you're looking to further modify your chosen button preset (or work from scratch) you can use Button Studio, a button design environment integrated into WebPlus. This allows you to focus on your button design without the distractions of other objects on the page, i.e. the design is displayed in isolation. See WebPlus Help for more information. To edit a button design: • Select Edit Button Design from the context toolbar.
108 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 • Shopping cart • Smart object (e.g.
Navigation Items 109 3. 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 righthand pane as your hyperlink target. 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.
110 Navigation Items Selecting a target window The Hyperlink dialog's 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 Edit Hyperlink dialog, select the Target Window tab. 2. Select an option from the Type drop-down list. For artistic, frame, or table text, several options exist in the dialog's Appearance tab for how you want to derive your text hyperlink colors.
Navigation Items 111 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). • Opacity: Makes objects transparent (until rollover), e.g. to only show navigation buttons on panel hover over.
112 Navigation Items To apply an action: Edit Actions from the Web 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. On previewing or publishing, a click or hover over of the object will trigger the action chosen. Adding an anchor An anchor is a specific location on a page that can serve as the target for a hyperlink (see p. 108).
Navigation Items 113 4. (Optional) Check Include Anchor in Navigation to allow the anchor (typically a selected object) to be accessed via a navigation bar instead of a hyperlink. You'll need to ensure Include anchors is checked on your navigation bar settings. Give the anchor a title. 5. Click OK. To view or edit existing anchors: • Choose Site Manager>Anchor Manager... on the Tools menu to view, rename, or remove an anchor attached to a particular object.
114 Navigation Items 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 Hyperlinks tab, select Picture from the menu. 4.
Navigation Items 115 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. Create a lightbox for a picture on your web page (as above). 2. From the Edit Hyperlink and Actions dialog, select the Target Window tab. 3. Enter a slideshow name in the Slideshow Name drop-down list.
116 Navigation Items 3. From the Hyperlinks tab, select a hyperlink target from the menu. 4. From the Target Window tab, configure the lightbox as described previously. Setting global lightbox properties As with most settings in WebPlus, you can customize lightbox settings for the current site. Settings can be adjusted for general lightbox controls (including border type), caption controls (font, font size, font color, opacity), and background settings (color and opacity).
6 Interactive Objects
118 Interactive Objects
Interactive Objects 119 Inserting rollovers 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 Adding rollovers is basically a matter of deciding which state(s) you'll want to define, then specifying an picture variant for each chosen state.
120 Interactive Objects 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. 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 121 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; even the thumbnail can be selected and resized at any time. To insert a pop-up rollover: 1.
122 Interactive Objects 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. 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). To position rollover images: 1.
Interactive Objects 123 To edit a pop-up rollover: • Double-click the Normal image on the page, to display the Edit PopUp Rollover dialog. Modify settings as appropriate. Inserting a site search WebPlus uses a powerful search facility which matches user search terms with text that appears in your site in artistic text, text frames or tables. The search facility is created by combining a Site Search Form object with a Site Search Results window.
124 Interactive Objects The search results show a hyperlinked page name heading plus associated web page text for reference. 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. 2. Drag the insert cursor across your page to place your search results window.
Interactive Objects 125 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 special interest locations. Each map will allow markers to be placed on the map to identify each location. To insert a Google Map: 1. Google Map from the Quick Build tab (Interactive Click Objects) and drag the insert cursor across your page to set the map size. 2.
126 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.
Interactive Objects 127 To advertise, web developers must have an approved Google AdSense account (www.google.com/adsense), where you'll be able to choose the type and format of adverts to be displayed, each advert being called a unit. You can copy and paste a generated code snippet per unit from the Google AdSense website and paste it into WebPlus's Google AdSense advertisement dialog. To log in to Google AdSense: • Visit www.google.com/adsense to sign up or sign in to Google AdSense.
128 Interactive Objects 3. Paste the code snippet previously copied for the unit by clicking Paste from Clipboard. The snippet appears in your dialog and cannot be edited. 4. Click OK. To edit your advert: 1. Change the format and color of your ad unit from AdSense Setup on the Google AdSense website, then copy the code snippet. 2. Double-click the advert on your page. 3. Paste the code snippet into the text box by clicking Paste from Clipboard. 4. Click OK.
7 External / Managed Content
130 External / Managed Content
External / Managed Content 131 Inserting framed documents WebPlus allows one or more frames, also known as Iframes, to be placed on a single page, each accessing another page within your site. Just like a picture, a frame can be placed anywhere on the page and can be drawn to any size. While it's typical to link to a page, you can also link to a range of other link destinations (an Internet page, local file, Smart object, or stored user data) as well.
132 External / Managed Content To create a framed site: 1. Select the page on which you would like to add a frame. 2. From the Quick Build tab (External/Managed Content category), click Document Frame. 3. Drag the cursor across your page to define the size and shape of your frame. 4. A dialog is displayed immediately into which you can apply various framed document settings. Choose from: • HTML ID: This is the uniquely assigned identifier for the frame. Normally this doesn't need to be changed.
External / Managed Content 133 Inserting a blog A blog acts as a personal journal on your web page which hosts your own published articles in an easy-to-use text editor. Articles can be commented on by visitors to the web page. In WebPlus, blogs are actually Smart objects, a common term to indicate that they are intelligent server-sided objects hosted on the secure online service called Serif Web Resources.
134 External / Managed Content 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 region. cursor across your page to define the size of your blog If you don't have a Serif Web Resources account (or are logged out), you'll get the Serif Web Resources login dialog. To sign up, click Create Account under the New User? section.
External / Managed Content 135 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 article (or ones for edit) you can create/edit your article in RTF, add tags, pick article poster, allow trackbacks, and make comments. To manage your blog: • Select the blog and click Manage from the context toolbar.
136 External / Managed Content To insert a news window: 1. From the Quick Build tab (External/Managed Content category), select News. 2. Drag the cursor across your page to define the size of your news window. If you don't have a Serif Web Resources account (or are logged out), 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.
External / Managed Content 137 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.
138 External / Managed Content 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 features • Create different categories (e.g., Philosophers) containing multiple subforums (Plato, Aristotle, Descartes, etc.). • Establish access control for users and moderators.
External / Managed Content 139 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. To insert a forum: 1. From the Quick Build tab (External/Managed Content category), click Forum. 2.
140 External / Managed Content To edit your forum: • Double-click the forum. For more details about Serif Web Resources account control, see Using Smart objects (p. 151). Managing your forum Up to now, you've just created a single subforum within a single category. To edit category name, subforum name, and add more categories and/or subforums within those categories, WebPlus lets you manage the forum. You can also control forum privacy, moderation, theme, and user ranking (most posts).
External / Managed Content 141 To manually add forum users: 1. Select Smart Object from the Insert menu. 2. From the Smart Objects library list, select the User List smart object of the same name as your forum. 3. Click Manage. 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.
142 External / Managed Content Here's an example of a Reuters RSS news feed added to a WebPlus web page: To insert an RSS feed or podcast on your page: 1. Locate an RSS feed or podcast from a website on the Internet. Look for one of the following distinctive symbols. 2. Copy the Feed/podcast URL to the clipboard by right-clicking the symbol. 3. From the Quick Build tab (External/Managed Content category), select RSS Reader. 4. A place cursor is displayed.
External / Managed Content 143 The feed window will be filled with a peach color with the URL shown—you'll need to publish the page to view the current new feed. Remember that the content will update automatically as the feed is updated on the original website. For Podcasts, when the web visitor views the feed, each episode can be played by clicking on the audio link, typically pointing to an MP3 file. Once downloaded and saved, the file can be played on a currently set default player (e.g.
144 External / Managed Content 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. • For Smart object security: provides access control for forums, blogs, and CMS. • Forums: for management of users and group moderation. • Blogs: for adding and removing articles via an Editors group. • CMS: for managing articles in your CMS.
External / Managed Content 145 Setting up your User List Smart object You'll need to firstly create a User List Smart object then create one or more groups connected to that Smart object. Normally, you'll just need one Smart object per site—the individual groups can then be used to control access to specific pages or Smart object resources. To create a User List smart object: 1. From the Insert menu, select Smart Object. 2. Login to Serif Web Resources (See Using Smart objects; p. 151).
146 External / Managed Content 3. To switch on self-registration user sign up to the Smart object, check Enable signups to User List. This allows a Sign up link to be shown on a placed login box. 4. For extra security at user sign in, check CAPTCHA enabled. CAPTCHA is an anti-spamming technique where arbitrary servergenerated text is displayed; the web visitor enters the text for subsequent validation. 5.
External / Managed Content 147 Adding users (manual or self-registration) adding users manually Typically, adding users manually is great for controlled environments such as small businesses, organizations, or clubs where users are "known." For each user group that is created, a group of users can be added to each user group by manual entry or import from a comma-delimited text file.
148 External / Managed Content With Require activation checked, an activation link will be emailed to the user along with an auto-generated password. When unchecked, only an auto-generated password will be emailed. With Email User checked, an email will be sent to the user; if unchecked, no email is sent but the user is added. The password needs to be communicated to the user via other means (telephone or verbally). 4. Click the Add User button. The user is added to the user list in the Users section. 5.
External / Managed Content 149 4. From the dialog, select an existing group from the Group drop-down list, and click Manage Group. 5. Check Add new users on signup—the user's login details on sign up will be added to the user group during registration. When checked, the sign in process allows access to all groups that are "sign up enabled", otherwise restricted pages will be protected. 6. Click Update Group and then Done.
150 External / Managed Content 3. From the User Groups dialog, select the user group, e.g. Photoaccess, 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. You'll now notice the page in the Site tab showing a symbol which indicates that page security is set. key Adding a login box WebPlus lets you add a login/logout input box onto a page in your website.
External / Managed Content 151 To add a user login box: 1. Follow the procedure under Enabling access control (see p. 149) but instead of exiting the dialog, pick a page to place your login box, then click the Insert button. 2. Position the Paste cursor where you want the user login box, then click the mouse to insert the object at a default size. 3. Enable self-registration user sign up as described previously (see p. 148).
152 External / Managed Content Let's look at each Smart object you'll find in Serif Web Resources and what you can do with them. Name Active Viewers Blog Use Use to show how many people are currently viewing the web page. A blog acts as a personal journal on your web page which hosts your own published articles in an easy-to-use text editor. Articles can be commented on by visitors to the web page. You can also drag a blog onto the page by using the Quick Build tab.
External / Managed Content 153 Add a news window onto your page. News You can also drag a news window onto the page by using the Quick Build tab. For more details, see Inserting a news window on p. 135. Set up an online poll to canvass web visitor's opinions. Poll Resource Booker Host the online booking of hotel rooms, meeting rooms, rehearsal rooms, theater tickets, and more. Book by the hour or by the day, as recurring bookings, and with pricing options for different age groups.
154 External / Managed Content As Smart Objects are stored in Serif Web Resources, you can use Help buttons accompanying each Smart Object (as you create and manage them) for more detailed information. For security reasons, the objects are only available via a Serif Web Resources login accessible from within WebPlus. If you don't have a valid username and password you must create a Serif Web Resources account first.
External / Managed Content 155 To access Web Resources: 1. From the Insert menu, select Smart Object. 2. At the login prompt enter your username and your password. Check Remember account details to access Web Resources directly in future (bypassing the login screen). 3. Click the Login button. The Smart Objects dialog is displayed. Once created, you can check your account details from the Smart Objects dialog by clicking the My Account button. To log out of Serif Web Resources: 1.
156 External / Managed Content 5. 6. From the dialog: • Enter your own Name for the object. • (Optional) Select a Profile from the drop-down menu if created previously. • (Optional) A Filter Offsite string (access to the object will be restricted to the domain entered and will prevent the URL from being copied). • (Optional) Change the object specific settings, e.g. for some objects you can also set the titling, colors (for body, text and border), and border thickness if appropriate.
External / Managed Content 157 To add a Smart object to your web page: 1. From the Smart Objects dialog, select the chosen object from the lefthand pane and click the Insert button. 2. To insert the object at a default size, position the cursor where you want the object to appear on the page, then simply click the mouse. - or Drag the cursor across the page to size the Smart object.
158 External / Managed Content Managing Smart objects While editing Smart objects affects how the object operates, managing Smart objects can be used to manage the object's "gathered" data when the web page is published. Some Smart objects such as Hit Counters don't need to be managed as they just increment on each web visit (you can reset the counters though). However, other more complex Smart objects (e.g.
8 Social Media
160 Social Media
Social Media 161 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.
162 Social Media Inserting a Facebook widget The widget is placed directly on the page, the same as any other object. To insert a Facebook widget: 1. From the Quick Build tab (Social Media category), click Facebook Widget then click on the page to place. 2. In the dialog, from the Type drop-down list, select either Activity Feed, Like Feed, Recommendations Feed, or Like Button. 3. Customize the behavior of your widget: • Use Current Site URL Check to use the current URL of your site.
Social Media 163 Inserting a Twitter widget Twitter widgets can be added to your page to stream various types of live feeds to display on your page or a Tweet (or Follow) button 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 several different types of widgets that can be added to a page to allow visitors to engage with site content in different ways.
164 Social Media Inserting a Twitter widget The widget is placed directly onto the page, the same as any other object. There are different ways to insert different widget types. To insert a Favorites, List, Profile, or Search Feed: 1. From the Quick Build tab (Social Media category), click Twitter Widget then click on the page to place. 2. In the dialog, from the Type drop-down list, select Favorites Feed, List Feed, Profile Feed, or Search Feed. 3.
Social Media 165 4. (Optional) Customize the appearance of your feed in the Appearance section. 5. Click OK. To insert a Tweet Button: 1. From the Quick Build tab (Social Media category), click Twitter Widget then click on the page to place. 2. In the dialog, from the Type drop-down list, select Tweet Button. 3. 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.
166 Social Media To insert a Follow Button: 1. From the Quick Build tab (Social Media category), click Twitter Widget then click on the page to place. 2. In the dialog, from the Type drop-down list, select Follow Button. 3. In User to Follow, enter a Twitter username. Visitors will follow this account on Twitter when they click your button. 4. (Optional) Customize the appearance of your widget using additional options (these differ according to Type). 5. Click OK.
Social Media 167 Inserting a Google +1 button Promote your site by using a Google +1 button to let visitors recommend your site content to Google+. When visitors click your button they will be able to share your web page by posting on their live stream or the +1 tab on their Google+ profiles. The +1 tab displays all links a user recommends to the public. The Google +1 button can also display how many others have recommended your web page. A Google+ account is recommended to use this button.
168 Social Media 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.
Social Media 169 To edit a social bookmarking button strip: 1. Select the button strip already present on your page. 2. Double-click the button strip. The Configuration dialog is displayed. The options available are the same as those available when the button was created. 3. Make your changes and click OK.
170 Social Media
9 Media
172 Media
Media 173 Adding sound and video WebPlus lets you augment your web pages with sound and video files in a variety of standard formats, including both non-streaming and streaming media. In addition, WebPlus lets you include third-party videos already hosted on YouTube.
174 Media 4. If you do not wish to embed the file, uncheck the Embed sound file in site option. 5. To have the sound play back as a continuous loop, check Loop sound. Otherwise, it will play just once. 6. (Optional) Set Export Options... to define an exported file name and physical location. (See Setting image export options in WebPlus Help.) 7. Click OK. The sound file will download and play back when the web page displays in a browser. To link from an icon, picture, or inline player: 1.
Media 175 5. (Optional) Set Export Options... to define an exported file name and physical location. (See Setting image export options in WebPlus Help.) 6. In the dialog's Target Window tab, a range of target windows or frames can be chosen depending on how you want the link destination to be displayed. (See Adding hyperlinks and actions on p. 108.). 7. Click OK. Inserting Flash SWF files A Flash SWF file is a viewable movie using the Flash™ Player format.
176 Media 5. (Optional) The Display box controls how the Flash movie is presented on your WebPlus page. Experiment with the options for different looping, transparency, alignment, scaling, and quality options. 6. Click OK. To edit a Flash movie: • Double-click your Flash movie. If you experience any playback problems when Flash files are placed on your page, it is possible to uncheck Preview Flash objects in Tools>Options (User Interface>View menu).
Media 177 To embed a 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). This contains an alphanumeric ID which uniquely identifies the video clip. 3. From the Quick Build tab (Media category), select YouTube and click on your page. 4. From the dialog, paste the video URL into the input box. 5. (Optional) Check/Uncheck the boxes to enable/disable video options. 6.
178 Media
10 Forms
180 Forms
Forms 181 Inserting forms Web-based forms allow information to be collected from visitors to your website in an efficient and modern manner. Some common form types include request forms, feedback forms, and guest books. Form data can be collected in a variety of ways—by email, to a local/remote script file, or via Serif Web Resources. Form Structure The building blocks of a form comprise a mixture of text, graphics and form controls.
182 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. 233). 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 183 To create a standard form: 1. From the Quick Build tab, select Form from the Forms category and click on the page. 2. In the dialog, click the Use and adapt a standard form icon and then Next>. 3. From the list of forms, select a form type while using the lower Preview pane. 4. Click Next>. 5. In the next screen, choose to add, modify or delete controls. • To add, click a button in the Add section.
184 Forms If you're looking for design freedom, WebPlus provides a blank form and form objects from which you can design your form from scratch. You can add form controls or standard form objects, or both. You can also customize and replace form submit and reset buttons. (See WebPlus Help for more details.) Submission of forms All forms have one thing in common—they must be submitted to allow data to be collected.
Forms 185 This option is for experienced web developers with scripting expertise. A script file from my hard drive A remote script To set up a local script file: 1. With the Script file icon enabled, add a Form name. 2. Navigate to your local script file, typically a .php, .js, .cfm, .cgi, .pl, .dll, or .exe file with the Browse... button. 3. Check Embed file to include the script within the site.
186 Forms Serif Web Resources Not everyone will have access to or even want to operate their own web server so, as an alternative to this, you can use Serif Web Resources (see p. 154). This is a free web to email gateway service which will transit valued form data via Serif and send it to your personal email address(es).
Forms 187 4. Click Add new. The email entry is created and added to the Available Email Targets list. You'll notice that the entry is classed as "Not Confirmed". Before the service commences, you'll get an email confirmation message sent to your email address. By clicking the link, the service will be activated and the entry will change to "Confirmed." 5. (Optional) Repeat the above procedure to add further email targets, then select an email entry to make it active. 6. Click OK to exit.
188 Forms CAPTCHA gateway To protect against spam emails, Serif Web Resources uses a CAPTCHA gateway if you've not added a CAPTCHA form control directly to your form (see Form controls in WebPlus Help). On form submission, this enables a security check offering a random text string for the web visitor to reproduce in an text box. Passing the check initiates form submission.
11 E-Commerce Objects
190 E-Commerce Objects
E-Commerce Objects 191 Understanding e-commerce E-commerce entails the buying and selling of goods on the Internet. It's difficult to escape online retailing in any Internet session these days—you've more than likely used some form of Internet shopping at some point, when buying online CDs, books, vacations, etc. Any site that supports this kind of e-commerce activity will typically make use of a shopping cart system and a payment processing system.
192 E-Commerce Objects 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: 1.
E-Commerce Objects 4. 193 (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-left 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.
194 E-Commerce Objects Inserting an e-commerce object (PayPal) The creation of e-commerce objects within WebPlus takes a Wizard-based approach. An e-commerce object can be added to the web page as a form or link (i.e., a simple button) by completion of a series of dialogs. Whether you choose to use forms or links depends on the characteristics of the items you are planning to sell, and how you want to sell your goods.
E-Commerce Objects 195 The dialog that is displayed when you add an e-commerce object will entirely depend on the currently enabled shopping cart provider (see Configuring your shopping cart provider on p. 192). The following procedures assume that PayPal is configured as your shopping cart. To insert an e-commerce form or button: 1. From the Quick Build tab (E-commerce category), click E-Commerce then click on the page to place. 2.
196 E-Commerce Objects 4. In the next dialog, define a button for use. It's possible to enable a standard text button (when enabled, enter any text string) or a standard image button (when enabled, pick from an attractive selection of presets in the scrollable window). Some images support automatic rollovers. Click Next>. 5. Item identification, pricing, tax, and weight information can be defined in the Item Details dialog. Options to be selected are: • Item Name: The item name for sale.
E-Commerce Objects • 197 Weight: Set an item weight if you're using weight-based shipping (US only), set in your PayPal profile. Typically, pounds (lb) are used as measurement, but kilograms (kg) can also be set if needed. Choose from the above settings and click Next>. If you're using e-commerce database merging, this Item Details dialog will instead let you choose an e-commerce database for use with your chosen provider. Remember to set the currency you wish to trade in. 6. 7.
198 E-Commerce Objects 9. The Payment Pages dialog offers some payment settings, i.e. • Enter the name of your Checkout Page Style (if setup in advance via your PayPal login). • Set a language for the PayPal login page. Pick for the drop-down list. • Change the text for the Continue button on the Successful Payment Page. • If needed, define Successful Payment Pages and/or Canceled Payment Pages. Enter the page's URL or select an entry from the drop-down list. 10.
12 Text
200 Text
Text 201 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 Microsoft Word 2007/2010 .docx/.
202 Text To import text from a file: 1. (Optional) 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. Choose Insert > Text File... from the Text menu. 3. From the Open dialog, select the format of the source file to be imported and locate the file itself. 4. Check the Retain Format box to retain the source file's formatting styles.
Text 203 • Apply different line styles, fills (including gradient and bitmap fills), and transparency. • Embed inline images. • Apply filter effects and rotate/flip. • Use proofing options such as AutoSpell/Spell Checker, Proof Reader, and Thesaurus. • Manage their content and track font usage via the Site Manager. And some differences: • You can initially "draw" artistic text at a desired point size, and drag it to adjust the size later. Frame text reflows in its frame upon frame resize.
204 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 colors, gradient/bitmap fills and transparency can all be applied. 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.
Text 205 Putting text on a path "Ordinary" straight-line artistic text is far from ordinary—but you can extend its creative possibilities even further by flowing it along a curved path. The resulting object has all the properties of artistic text, plus its path is a Bézier curve that you can edit with the Pointer Tool as easily as any other line! In addition, text on a path is editable in some unique ways, as described on p. 207. To apply a preset curved path to text: 1. Create an artistic text object.
206 Text To add artistic text along an existing line or shape: 1. Create a freehand, straight, or curved line or a shape (see WebPlus Help for details). 2. Select 3. Bring the cursor very close to the line. When the cursor changes to include a curve, click the mouse where you want the text to begin. Your line appears as a dashed path with an insertion point at its starting end. 4. Begin typing at the insertion point. Text flows along the line, which has been converted to a path.
Text 207 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 (see p. 216). For editing longer stories, and for more advanced options, choose WritePlus (Edit Story from the Text menu).
208 Text 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. If you don't place an insertion point, the text can be pasted into a new text frame directly.
Text 209 Using fonts One of the most dramatic ways to change your site's appearance is to change the fonts used in your artistic text, frame text, or table text. Applying different fonts to a character or entire paragraph can communicate very different messages to your intended readership. Font assignment is very simple in WebPlus, and can be done from the Fonts tab, Text context toolbar, or in the Character dialog (via right-click, or from the Text menu).
210 Text Using text styles WebPlus lets you use named text styles (pre- or user-defined), which can be applied to frame text, table text, or artistic text. A text style is a set of character and/or paragraph attributes saved as a group. When you apply a style to text, you apply the whole group of attributes in just one step.
Text 211 Paragraph styles and character styles A paragraph style is a complete specification for the appearance of a paragraph, including all its font and paragraph format attributes. Every paragraph in WebPlus has a paragraph style associated with it. A character style includes only font attributes (name, point size, bold, italic, etc.), and you apply it at the character level—that is, to a range of selected characters—rather than to the whole paragraph.
212 Text To modify an existing style: 1. From the Text Styles tab: • Right-click on the character or paragraph style you want to modify and then choose Modify
