How to Use Serif WebPlus 10 Getting started 1. Open Serif WebPlus and select Start New Site from the Startup Screen 2. WebPlus will start a blank website for you. Take a few moments to familiarise yourself with the workspace and the different toolbars and tabs. 1 2 7 3 4 8 5 9 10 6 1. Standard, Arrange and View toolbars 6. Hintline toolbar 2. Text and Frame context toolbars 7. Docked Studio tabs 3. Tools toolbar 8. Site tab 4. Standard Objects toolbar 9. Page area 5. Web Objects toolbar 10. Pasteboard area The workspace consists of: A page area, where you put the text, graphics and other elements you want to appear on the final web page. A pasteboard area, where you can keep elements that are being prepared or waiting to be positioned onto the page area. Several horizontal and vertical toolbars used to access the various functions and tools. Several tabbed panels along the right hand side of the screen such as the site tab that gives an overview of the site structure Serif Europe 1
A hintline along the bottom of the screen which will give information about any icon that you hover your mouse over. Build your site 3. Before you begin your site ensure that you have a clear idea about how your website will be organised. Plan it out on paper before you begin, working out how many pages you need, and the titles of each page. To build your site, select the site tab from the studio area. By default it will show your home page. 4. To insert additional pages, click on the + button on the Site Structure toolbar for each page that you wish to have in your site. By default each page will be called Page 2, Page 3 etc 5. Give the new page a recognisable name that will appear in browser windows, and a more meaningful filename by right clicking on the page in the Site Structure window and selecting Page Properties from the context menu. Change the page name by replacing Page 2 with something more meaningful. To change the actual filename of the page click on the Change button, and then type a new name into the box. If you do not wish for any page that you add to be part of the main navigation bar, then uncheck the Include in Navigation box. 6. Repeat steps 4 and 5 until you have built the whole site and renamed all the pages. Double click a page to open it in the workspace. As you change pages notice Serif Europe 2
that the Current Page Icon and being edited. moves to indicate which page is currently on view 7. Save your site to a folder you have created to hold your web site on your computer. WebPlus stores the web site as a multipage project file (.wpp) so any file is instantly available. All the images, files and other assets such as sound or video that you intend to use in your site should be saved into this folder. Remember to save your website regularly as you work on it and to make a backup copy of the wpp file from time to time. Design your interface 8. The next stage is to design your Master Page. This is a template that will contain shared elements that feature on every page of your site such as a navigation bar, logo and copyright information. It will allow your site to have a coherent visual identity. Any changes you make to the master page will automatically be changed on all the pages in the site that use that master page. Switch to Master Page view by clicking on Master Page in the Site Tab. Then double click on Master A to vi ew it. You may have noticed that each file in your site structure tree has a letter A on it: this indicates that their layout style will be based on Master Page A. You can have several Master Pages for different areas of your site if you so wish for example a very large school website where you may want to use a different colour scheme for each departments pages (Science, English etc). For the purposes of this tutorial we are going to use one master page only. 9. To add a navigation bar to the master page, choose the Theme Graphics tab and click on View Sets. A wide range of choices is available, or you can use elements you have created yourself. Scroll down the list and choose a theme that fits your website. Drag a horizontal or vertical navigation bar out of the gallery and drop it onto the master page. Serif Europe 3
The navigation bar will take its text from the page headings you set up on the site structure tree. Double click on the navigation bar to change its settings. The most important area on a website is the safe area or the area displayed in the browser when the page first loads without the user having to scroll down. All key elements such as navigation and main logo should be placed in this area. You can drag guides out from the top and side rulers to help you align and position the page elements accurately. These lines will not be visible in your published website. Designers use grids to lay out pages and to group elements together. Avoid scattered elements that are not aligned or grouped with anything else on the page. You can also use the Align Objects command. Select multiple items by holding down the Shift key and clicking on each object you wish to align. Then go to the Arrange menu and choose Align Objects. Then choose how you wish to align them (top edge, left edge etc). It is important that elements of your page are aligned neatly, either horizontally or vertically. This improves the visual impact of your web page. 10. To change the colour scheme of your site, click on the Colour Scheme button (or click on Tools and Scheme Manager). Scroll down the menu to view the available choices. Simply click on the scheme you want and click OK to apply the changes. 11. To add a graphic click on the Import Picture button on the Tools toolbar and navigate to the file you need. Click and drag on the page to resize and position the graphic. Graphics added to the Master Page will appear on all the pages in your site. To create a hyperlink select a graphic or text and click the hyperlink button from the Tools toolbar. From the dialog box select the type of hyperlink you need (e.g. a page in your site, an internet page) set the destination page and click OK. Serif Europe 4
Add your content 12. Switch back to page view by double-clicking on a page from your site structure tree or click on the Page/Master Page button in the bottom left corner of the window. To add text boxes use the HTML text frame tool and drag the text boxes onto the page. More creative text effects can be achieved using the creative text tool. Type directly into these boxes to add your text, or cut and paste from other applications such as a word processor. You can fill a text box with placeholder text, so you can get an idea of how it will look by selecting a text box and then from Insert menu choose Fill with placeholder text. Use the tools on the tools panel to add additional content to your site such as images, tables and sound/video. Remember t o save your work often. Preview your website 13. To view how your pages will look when published onto the internet, and to verify that all your hyperlinks work, from the File menu select Preview Site and Preview in Window Serif Europe 5
T his will enable you to preview any animations, video clips and sounds that you have added. Show your work to others at this stage and get feedback from them about the content and the useability of the site. Make any changes you feel necessary as a result of these comments. It is good practice to test how your pages display in different browsers and make adjustments accordingly if your text and graphics do not display as expected. From the Preview Site menu select Browser Preview List to display all the different browsers installed on your computer such as Internet Explorer and Firefox. You should also check your pages to see how long they take to download. From the Preview Site menu select Estimate Download Time to get an indication of how long your page will take to download on both a broadband and on a dialup connection. If the times are very long, consider optimizing some of the graphics and other elements on your page. Serif Europe 6
Publishing your site. When your website is complete, you can publish it to a folder on your computer for assessment purposes or you can publish onto the internet if you have some webspace that you can use. From the File menu select Publish Site and then either Publish to Disk Folder or Publish to Web. a) To publish to a folder, use the Choose Folder button to navigate to the folder where you want your site to be published. You should choose the Website folder you created as part of section 1 of this unit. Make sure that you click on the Select All button to publish every page in your site, otherwise only the pages that are ticked will be published. Publishing to disk allows you to create a backup copy of your website on a Memory Stick or a backup drive. It could also then be copied onto a CD. b) To publish to the Internet you will need to have some webspace, and will also need to have the ftp address, username and password. Set this up by clicking on the Accounts button and entering the required information. Again, make sure that all the pages are selected before you publish. When you click on OK, WebPlus will connect to the internet and attempt to upload the website to your webspace using the details you provided. Your website should then be immediately visible in your web browser by navigating to your allocated web address. c) To make changes to any of your pages, edit them within WebPlus and then republish your site. You can choose to only publish those pages that you have altered, just select the pages you wish to upload by placing a tick next to each one. Serif Europe 7