QRG: Using the WYSIWYG Editor

Transcription

1 WYSIWYG Editor QRG: Using the WYSIWYG Editor WYSIWYG stands for What You See Is What You Get. The WYSIWYG Editor is the reason you don t need to be an IT Programmer to write content for your web page. There are many WYSIWYG Editor icons to use in the toolbar; some of which will be familiar to you if you use Word they make formatting your web pages easy! WYSIWYG Editor: In addition to common features such as bold, italics, underline, highlight, font colours, alignment and paragraph indentation, there are also the following formatting features available for you to use: Styles (setup as part of your design package) Format (Headings) Tables Block Quotes And many more. Below are some elements you can add to your web pages using the WYSIWYG Editor. Some of these elements such as images, links and files can also be added to the web page using purpose specific tabs. However, adding these elements using the WYSIWYG Editor will give you maximum flexibility over where they appear on the page. Images Images added using the WYSIWYG Editor will allow you to place the image exactly where you want it to display on the website. However, it does not resize the images for you as the Images Tab does. Therefore, before you upload an image using the WYSIWYG Editor, you will need to resize the image using photo editing software. Reducing the image to the actual dimensions that you want on your page will, at the same time, reduce the number of

2 pixels, and the file size (amount of bytes). This is important as it makes loading the image on the page faster and is also supportive of responsive web design. 1 Tips for adding images: Resize the image first Resize your image in photo editing software and save it to your desktop. Upload the image using the WYSIWYG Editor and place it in the relevant section on your page. File Size Keep your image file size to under 100kb Otherwise it may slow the load of your page and will not aid responsiveness Once you have resized your image, you can upload it in the WYSIWYG Editor. To Upload an Image using the WYSIWYG Editor: Place your curser where you want the image to display on the page Click on the image icon in the WYSIWYG Editor In the Image Properties pop up, go to the Upload Tab 2. Click on Browse to select an image from your PC 3. Click on Send it to the Server; the image will now display in the Image Info tab preview box. 1 See Appendix 2 of this manual for more information on responsive web design 2

3 Changing image dimensions in the width and height fields changes the image display size but does not reduce the file size. Remember resize in photo-editing software first! Select OK. Save your page and view it on the front end. Images already in this section: Once you have sent an image to the server, it will remain in your server for you to use again. To find an image already loaded, click on the icon in the WYSIWYG editor to display the image properties box. Click on the Browse Server button to open the image server for this section. 3

4 Images that have previously been saved in this section will display. They can be sorted by name, date, size and listed in pages. Select the relevant image and then OK in the Image Properties tab. Links Adding links using the WYSIWYG Editor allows for flexibility over where you want the link to display on your page. There are several different links that you may want to add to your page, including: An address An external website A different page within the same website A different part of the same page, which is called an anchor To add a link to an address: 1. Type your text in the content area, highlight it and click on the icon in the WYSIWYG Editor 2. In the Link Info tab, select the Link Type: from the dropdown list 3. Enter the address to send the link to 4. Click on OK 4

5 When a user clicks on the link they will be able to send an directly to the address inserted into the link properties. The link to the will display on the front end. To add a link to an external website: 1. Type your text in the content area, highlight it and click on the icon in the WYSIWYG Editor 2. In the Link Info tab, the Link Type: URL is selected by default. Type in the URL (website address). (See Appendix 1 section of this manual for Protocol Definitions) 3. Click on OK When a user clicks on the link, the website listed here will open. 5

6 To add a link to a different page within the same website: 1. Type your text in the content area, highlight it and click on the icon in the WYSIWYG Editor 2. In the Link Info tab, click on Browse Server ; a pop-up box will display of the front end of your website. 3. Navigate to the relevant page you want to send the link to. Click on Select and Close; this action auto-populates the page s URL in the URL field. 4. Click on OK 2 3 6

7 4 To add an anchor on your page: 1. Place your curser where you want the link to land on (ie top of the page) 2. Click on the icon in the WYSIWYG Editor 3. In the Anchor Properties Box, create an anchor name (just one word is enough) 4. Click on OK The Anchor Icon now appears in the Page content but not on the front end. 5. Type the text in the content area you want to link to the anchor, highlight it and select the icon in the WYSIWYG Editor, a pop up box will appear 7

8 6. In the Link Info tab, select Link Type: Link to anchor in the text 7. Select your Anchor from the dropdown list in both fields By Anchor Name and By Element ID 8. Click on OK Select the relevant anchor name from the dropdown in both fields When a user clicks on the link, they will be taken to the relevant place in the page where you set the anchor. Tips for links: Open in New window Create Buttons Use the Target Tab in the Link Properties box to set the link to open in a new window This means the user won't be taken away from your website when they click on the link In the Advanced Tab of the Link Properites box, under the field 'Stylesheet classes', type the word 'button'. This will make your page look cleaner and more modern Open in New Window: Select New Window in the Target dropdown list 8

9 Create a Button: Documents Adding Files (documents) to your Page To add a document to your page using the WYSIWYG Editor the document needs to be in the Document Manager already. See the Tools section of the support centre for information on how to add documents to the document manager. To add an existing document to your page from the WYSIWYG Editor: 1. Place your curser in the page content where you want the document located 2. Type in the display text 3. Highlight the text 4. Click on the icon in the WYSIWYG Editor Click on Browse Server to access the Document Manager 9

10 Select the Browse Documents tab in your server 5. Find the document by selecting the relevant directories or documents. 6. Click on the orange Select button; this inserts the URL in the URL box When a user clicks on the link on the front end, the document opens. 10

11 Forms A form is a simple questionnaire that allows the user to send information to you. Examples are forms such as contact us or customer feedback. The forms need to have been created before you can add them to the page. See the Tools section of the support centre for instructions on how to create and edit a form. Adding a form to your page: 1. Go to the forms tab, click on the next to the relevant category. 2. Click on the button of the form you want to add. A window will pop-up Highlight and copy the URL in the pop-up window 4. Back in the WYSIWYG Editor, click on the icon; and paste the link into the URL field in the Link Properties tab. 5. Click OK and Save. Paste the Form URL here 11

12 When a user clicks on the form link on the front end of the website the form opens. Tables Tables offer the flexibility of where you place your content on the page. You can use tables to force images, links or documents into particular places within the page. Tables in Association Online are similar to Word, but there are some tips you will need to know to assist with page responsiveness when adding tables to your page. See Appendix 2 of this manual for more information on responsive web design. Add a Table To add a table to your page content, click on the A table properties box will open. icon in the WYSIWYG Editor. 12

13 Complete the table properties box including (as a minimum): Number of rows Number of columns If a header is required Border Size (insert 0 for no border) Change the width to 100% to cover the whole page and to aid with responsiveness Click on OK A table outline appears in your page content area. You can now add content into your table. What you may notice is that if you enter content in one column, other columns will move across the page. You can put a freeze on the size of the cell by editing the cell properties. Editing a Table: Edit table properties by right clicking in the cell, row or column you want to edit. You can do the following here: Edit cell properties, including merging cells Insert or delete a row Insert or delete a column Delete the table Edit the table properties 13

14 To edit the Cell properties, select Cell>Cell Properties. A pop up box will open. Edits you can make: Set the width/height of a cell (make sure you use the Percent dropdown option if your table is set to 100%) Word Wrap Align the content within the cell Change the colour of the cell You can now add content in the table. A sample table on the front end of the website. Styles Once your design for your website has been implemented you can use your designed styles for content elements such as: Tables Buttons Images Links Documents Click on the content element you wish to style in the page content. Then select the icon in the WYSIWYG Editor. Select your relevant style from the dropdown list and it will be applied to your page. 14