Web Authoring Guide Last updated 22 February 2016 Contents Log in................................ 2 Write a new post...3 Edit text...4 Publish a post...5 Create a link...6 Prepare photographs...7 Insert a picture...8 Edit your group page...9 House style...10 Dorking & District U3A web authoring guide 1
Log in 1. In your browser (Internet Explorer, Edge, Chrome, Firefox or Safari) go to www.dorkingu3a.org.uk. 2. Find the Users Log in panel at the bottom of the righthand sidebar. 3. Click on Log in. 4. On the log-in screen enter your User name and Password and click the Log in button. 5. You will be taken to the Dashboard screen...... which is where, depending on your role, you can access Posts (articles and news items) Events (calendar entries and venues) Media (image, video and sound files) Pages (structural elements of the site best left alone!) Dorking & District U3A web authoring guide 2
Write a new post 1. On the Dashboard screen click on the + New dropdown at the top of the screen, and then on Post. 2. You will be taken to the Add a New Post screen, the whole of which looks like this...... but you will only need the top bit: 3. Give your post a title (where it says Enter title here ) this will be the headline. 4. In the main text entry panel, labelled Visual, type or copy and paste your words. The Visual panel is what-you-see-is-what-you-get (WYSIWYG). Unless you are comfortable with HTML, avoid selecting the Text tab next to the Visual tab. Dorking & District U3A web authoring guide 3
Edit text As in any word processing environment there are options for styling your text: Highlight (select) it first, then click on, say, B to make it bold or I to italicise it. There is a row of dropdown menus File, Edit, etc and a row of button icons. Several functions are available on both, but many are not for example, there s an option to Print on the File menu and a Find and replace under Edit. When you hover your cursor over a button icon a tool tip pops up to tell you what it does. Most of the functions are self-explanatory. As pictured above, from the left the icons are: Bold Italic Blockquote Text colour Bulleted list Numbered list Align left Align centre Align right indents the selected text colours the selected text select a number of items on separate lines (paragraphs), then click this as above Insert/edit link (see page 4) Remove link Table Fullscreen Undo Redo Special character Nonbreaking space Horizontal line Insert Read More tag Toolbar Toggle choose initial number of rows and columns. Add and remove rows and columns later using Table dropdown menu makes the Visual editor fill the screen. Click the icon again to return to normal mode. brings up a table of characters. This is where you ll find your accents, fractions. etc. use this in place of a normal space to keep text together, eg, in a date in a long piece, this cuts off the text at the selected point and inserts a Read more... button for the reader to click if so moved. brings up a second row of button icons Dorking & District U3A web authoring guide 4
Publish a post Once you have given your post a title, written the text and inserted picture(s), you are ready to publish it to the web. There are some further considerations before doing so: If you click on the Preview button, you will be able to see how your post will look on the site. This is a good check to do before hitting Publish. If your work is interrupted, you can click on Save Draft and come back to it later. To pick up where you left off: go to the Dashboard screen; click on Posts; hover your cursor over your post, which will be labelled Draft; then click Edit. Every new post should have at least one and not more than three Categories. Please don t add any new categories. To make your post easier to find in a search, you can enter one or two terms into the Tags box and click Add. If a post is given the category News, it will appear at the top of the front page of the site. It will remain there until replaced by a newer post. Dorking & District U3A web authoring guide 5
Create a link To make a link to a post, page or event within our website or to an external resource first select the text. 1. In the Visual editor panel, highlight the text you wish to use to trigger the link. 2. Click on the Insert/edit link button icon. This brings up a new form: The link text you ve chosen will already be showing in the appropriate box. If you wish to link to an external web page, copy its complete URL from your browser s address bar and paste it into the URL box. In this case, it is preferable to tick the box marked Open link in new tab, thus keeping the user in touch with our site. For internal links, the bottom part of the form offers a scrollable list of recent postings, or you can enter a search term into the box and it will find matching items. Click on the item you require and the URL box will be filled automatically. Leave Open link in new tab unchecked. 3. Then click Add Link. Dorking & District U3A web authoring guide 6
Prepare photographs for the web If you upload very large images to our website, it will slow right down when those images are viewed. The solution is to learn how to optimise images (trim them down to size) before uploading them. File dimensions and file size Images have file dimensions (width and height, in pixels [px]) and file size (measured in kilobytes [KB] or megabytes [MB]). You can think of these as size and weight if you like. The maximum width available to display photos on our site is 800px, which will fill the whole width of a post allowing for the sidebar on the right. Images from digital cameras or phones can be very large, both in dimensions and weight. A width of 4,000px is not uncommon, and the file size can be from 2MB up to 10MB. These images are far wider than required, and their weight would cause delays while they download. These problems can be avoided if you prepare your images to ensure the dimensions and file sizes are reasonable. Preparing images involves reducing the physical size and file size while still leaving the images looking good. When you upload an image, the site automatically creates a Medium size version (300px wide) and a Thumbnail (150px wide). You can then choose to use your full-size image or the Medium or Thumbnail. File size This is the most important part of preparing an image for the website. Images with a large file size take longer to download to visitors browsers and slow down the site. For most full-width images you want them to be 80-100KB at most. If the image is only part of a page half the width of a post, say then 20-30KB is usually fine. Dropping image quality to 30-50% of the original usually doesn t make any difference that you can pick out with the naked eye. You can drop 2-3MB images to 80-120KB and not really be able to see any change in quality. Image optimisation A very quick way to optimise images can be to just email them to yourself before uploading to the site. I think this works on a Mac. Here s how it works in Windows (7 or 10): 1. In Windows Explorer select the photo(s) you want to upload. 2. On the Share toolbar tab, click Email. A dialog box titled Attach Files opens up. 3. Select a size from the Picture Size list (bear in mind our maximum width of 800px) and click Attach. 4. A new email message with your resized picture(s) attached opens in a new window. 5. If your email program permits, you can then right-click and Save the optimised attachment(s) or address the email to yourself and send it. On receipt of the email, save the optimised attachment(s) for uploading to the site. There are also online services where you can upload your photo and download a reduced-size version. Try www.jpegmini.com it will reduce the file size but not the dimensions. Otherwise you need a program such as Photoshop or the open-source GIMP (free for Mac and Windows) to crop and resize image files. (Other image-editing software is available.) In most cases these programs will let you reduce image quality by a percentage. If you are dealing with large high-resolution images, you can usually drop them to around 30% of original quality and not be able to see much, if any, difference. Experiment for yourself... Dorking & District U3A web authoring guide 7
Insert a picture 1. In the Visual editor, place the cursor at the start of the paragraph where you want the picture to be. You will be able to position it left, right or centre later (step 4). 2. Click the Add Media button. 3. The Insert Media screen appears. If you re adding a new photo, click on Upload Files. (If not, just select an existing file by clicking on it.) 3. You can then drag and drop files from your computer on to the drop area or click the Select Files button, which will take you to your computer s file access system in which case, click Open and the file will upload. 4. When a file has been selected the Attachment details panel appears on the right. Here you can write a caption...... and set the Attachment Display Settings, where Alignment will place the photo to the left, centre or right of the text, and Size is self-evident. You can ignore Link To. 5. Finally, click Insert into post. Dorking & District U3A web authoring guide 8
Edit your group page If you are a group leader, you can have the capability to edit your group s page on the site. Here s how: 1. After logging in, on the Dashboard screen click on the Dorking & District U3A link at the top left, and then Visit Site, which will take you to the front page. 2. Click on Groups on the main menu and then click on your group in the list to go to your group page. 3. At the bottom of the main panel of your group page there will be a blue (Edit) link. Click on this to bring up the page in the Visual editor. 4. Make your changes (see page 4 Edit text ) and then, using the buttons on the Publish panel, Preview the changes. When you re happy that the page looks right, click Update. Dorking & District U3A web authoring guide 9
House style Consistency of style helps our site as with all publications to maintain its sense of identity and to present the image of an organisation working together in the same direction. What it means in particular is that dates and times, quantities, capitalisation and abbreviations should be presented in a standard fashion throughout the site. If the date, say, is given as March 10th, 2016 in one post and 10 March 2016 in the next, it can give the impression however subliminally of our U3A not singing from the same hymn sheet. So here are some house rules... Dates no st, nd, rd or th and no punctuation (eg, 10 March 2016) Times no.00 for o clock, no spaces, full stop between hours and minutes (eg, 2pm, 2.45pm) Numbers spell out one to nine, use digits for 10 and above Capitals please avoid capitalising words except when they are proper nouns Dorking & District U3A web authoring guide 10