Web Content Management

Transcription

1 Web Content Management With Drupal School Website User Guide Version 1.1 1

2 Table of Contents Overview 3 Getting Started 4 Writing for the Web 5 Introducing: Your New Website 7 Logging in 7 The Landing Page 9 Shortcuts 10 Welcome Content 11 School News 11 Upcoming Events 12 Adding and Editing Content 13 How to Upload Basic Page Content 14 How to Edit Basic Page Content 16 How to Upload and Link a File to Basic Page Content 17 Using the File Browser 18 How to Add a Video 23 How to Add a Link to a PDF, Word Document or PowerPoint 27 Additional Publishing Options 31 How to Add a Page to a Menu 34 How to Add a Menu Sub-Item 36 How to Add an Article 38 How to Add a Calendar Event 39 Other Event Options 41 How to Add Frontpage Content 44 How to Create a Frontpage Slideshow 46 How to Add a Webform 47 Other Webform Options 49 Contact Information 53 2

3 Overview You will be learning how to customize and maintain your website using a web content management system (CMS). A CMS is simply a set of hardware and software technologies working together to make it easier for non-technical users to manage information. In other words, you don t need to know HTML code or any other programming language to produce a great-looking, effective website! Some of the benefits of using a CMS include: Staff can create, edit and manage their own web content without special equipment or technical expertise. Since little technical expertise is needed, maintenance tasks can be distributed among a larger number of users. Content scheduling features help ensure website content is accurate and up-to-date. Pre-built templates help ensure a consistent, professional look. A professional-looking, up-to-date, accurate website inspires confidence in your department or office and the district as a whole. Current and prospective students, parents and community members can get information they need when they need it. 3

4 Getting Started If your department already had a web presence, the content may have already been moved over for you. If not, you will start off with a general navigational structure to which you will add your content. In most cases, it will be obvious where various types of information should be located within the structure of the template provided. However, there will also be times when this may not be so clear. While there is no right or wrong place, here are a few guidelines that will help ensure your users are able to find what they are looking for: Try to put yourself in the shoes of someone unfamiliar with the school system. Imagine how he or she might attempt to locate information. A common mistake is to present information based on an organization s internal structure. Unfortunately, this method only makes sense to insiders and assumes a level of knowledge your audience likely does not have. If possible, ask several individuals in your target audience for their input. How would they attempt to locate a given piece of information within your site? In general, keep important content at the top of your pages. Structure information to minimize the number of clicks required to access it. For the purpose of getting your website up, running and available to parents and community members as soon as possible, keep the website very simple at first. You can always add more detail later. 4

5 Writing for the Web Writing for the web is somewhat different than writing for other mediums. Web users tend to scan pages to quickly zone in on the exact information they are looking for. For optimum results, please refer to the guidelines listed below: Be concise. Keep sentences and paragraphs short. Use bullet points where possible. Present the most important information first so it is immediately viewable without scrolling, regardless of resolution or monitor size. Never use an acronym without first providing the full name for which it stands. Speak to Your Audience Clarify goals for communicating various pieces of information. Who is the intended audience? For example, will the content be geared toward staff, students, parents, a particular community, the public in general, or a combination of these? Once the audience has been defined, make sure to consistently communicate in a manner appropriate to that audience (e.g., avoid using jargon your audience may not be familiar with) and to review your content periodically to ensure your original goals are being accomplished. Keep it Professional Ensure content is relevant, accurate, concise and timely. Use the styles provided to maintain a consistent look and feel throughout your website. Avoid using ALL CAPS, which can be extremely difficult to read. Black text on a white background offers the most contrast and is easiest to read. Don t use tiled backgrounds or background images; they make text hard to read. Users expect graphic buttons to do something when clicked. To avoid confusion, label buttons clearly and don t make an object look three-dimensional (like a button) if it isn t, in fact, a button. Users expect links to appear as underlined text. To avoid confusion, never use underlining for anything other than hyperlinks. Make links an integral part of sentence structure rather than using the clumsy "click here" link. Don t create links to pages that have nothing viable to offer (e.g., under construction text). If a page is not ready for publishing, leave the link off completely. Information intended for public consumption may not be posted in the form of Word or Excel files. These file formats are not appropriate for the web because they require users to have specific software installed. Files of this type can also be infected with viruses so many people will not open them even if the appropriate software is available. Although highly discouraged, these file types may be used if a) there is a compelling reason to use this format over standard web formats, and b) the information is intended for staff only. Avoid using Adobe PDF files for anything except forms which must be printed (because they require a hand-written signature), or to provide an archive of items such as newsletters, flyers or brochures that have actually been printed. In the latter situation, the 5

6 PDF should not be considered an alternative to providing equivalent information within the structure and in the style of your website. For example, if you have a flyer announcing an event, be sure to also include the event details on your calendar. In that context, you might also provide a link to the PDF flyer so people can print and post it. PDFs reflect print thinking. On the Web, we need web thinking. (Source: PDFs are evil, lazy, slothful and sinful, by Gerry McGovern; 2/5/07) Make sure your content is always up to date by assigning individuals to review pages on a regular basis. Develop a schedule for updating your site and performing maintenance, such as archiving or deleting information. 6

7 Introducing: Your New Website Logging In: Now that you are familiar with how your new website fits into the overall structure, let s log in and get to work! Log on to Select your school from the list. Click on the Login button. 7

8 You will be brought to this screen. This is where you will enter your employee ID and your password. Once you have entered this information, you will automatically be routed back to your School site. Your employee ID will be listed in the orange box, so you will know that you are logged in. 8

9 The Landing Page Note: During the Drupal migration all schools in the system adopted 1 of 3 new templates. While the pages in the screen shots may look slightly different from those on your website, all of the content and options remain the same. The District Home button takes you to the District website. The Select Language dropdown allows you to change the page language. 9

10 Shortcuts The Shortcuts menu lists the items on the portal that the school believes are most important. Main Slideshow This space offers an opportunity to showcase your school and its students through a series of rotating photos. 10

11 Welcome Content Underneath the slideshow is a space for a welcome message that may also be used for a mission statement, contact information, social media links, etc. School News This section will list the last five news items posted. 11

12 Upcoming Events Events may include everything from meetings to fundraisers to sporting events. 12

13 Adding and Editing Content The process of adding or editing content begins with the navigational options in the gray toolbar at the top of the page. To see a listing of all content currently on the site, click the Find Content button on your top editing bar, to the right of Add Content. To filter out content from other schools, enter the name of your school in the School box and click Apply. You will also see an Edit option on any page that you are allowed to edit. Note: You may also locate the content you wish to edit by browsing the site like any user. When you click on a page you will see the Edit option below the headline. Click on that and you will automatically be taken to the edit screen for that page. 13

14 How to Upload Basic Page Content The majority of site content is Basic Page content. Click on Add Content. Click on Basic Page Content. This will take you to the Create Basic page screen. Give your page a title. Add your content. You may type it directly into the Body space, or copy and paste content from a Word document. 14

15 Select a School and Department. This will assign the content to a particular school and department. Only those within the school and/or department with editing privileges within the choices selected can make additional edits. Click Save when finished. This will publish the page, and you will then view it in its finished form. 15

16 How to Edit Basic Page Content Browse to or Search for the page you would like to edit. Click the Edit link. Note: You will only see this link if you have editing privileges for this page. Edit or update content as needed. Click Save. 16

17 How to Upload and Link a File to Basic Page Content If you wish to add an image, PDF, Word document or PowerPoint presentation, follow these steps. To Add an Image Browse to or Search for the page you would like to edit. Click the Edit link. Note: You will only see this link if you have editing privileges for this page. Click on the location in body copy where you wish to place your image. Click on Add/Edit image icon. A window for adding a photo will open up. You can either paste in the URL of an image or click the Browse button next to the Image URL field to upload a file. 17

18 Using the File Browser The File Browser makes it easier to upload images and other content. Click on File browser. A new window opens showing all previously added content PDFs, spreadsheets, photos, etc. Note: The File Browser should not be used for all file storage. It is recommended only for content that will be distributed on school websites. 18

19 To Add an Image using the File Browser Open File Browser and click on Schools, select your school folder, then select the Images folder. Choose an image from those previously uploaded into this folder. To upload a new image, click on Upload and choose your file. Browse for the file on your system and select it. Then click the Upload button to send the file from your computer to the website. 19

20 If you wish to create a new folder for this image, click on Directory, type in a new folder name and click Add. Click on new folder created, then click on Upload. Click on Choose File. Select image and click Open. Click Upload. 20

21 You should now see a preview of your image. To resize image, click on Thumbnails while image is highlighted in the File menu. You will then have the option of creating a small, medium or large version of the selected image. Click Insert. 21

22 A pop-up window will appear with the new image dimensions. Next, add an image description. This image description is utilized for individuals with visual impairments. This description should be a succinct description of what is in the image. If you wish to change the image location on the page, choose Alignment and move as needed. Click Insert. Click Save to see page with image uploaded. 22

23 How to Add a Video Browse to or Search for the page you would like to edit. Click the Edit link. Note: You will only see this link if you have editing privileges for this page. Click on the location in body copy where you wish to place your video. Click on Insert/Edit Embedded Media icon, and follow the instructions in the pop-up window for adding a URL, video type, etc. Note: You can also follow the same instructions for uploading an image via the File Browser. 23

24 After the video has been uploaded, click Insert File. 24

25 Before inserting the video, be sure HTML 5 Video type is selected. 25

26 Also before inserting, click on the Advanced tab. Under HTML5 Video Options, check the Controls box. This provides a control bar for the video viewer. Uploading a Poster You may also wish to upload a poster, which is a thumbnail image for the video. Choose a poster from your image file and click Insert. Click Save. 26

27 How to Add a Link to a PDF, Word Document or PowerPoint Click the Edit link. Note: You will only see this link if you have editing privileges for this page. Highlight the copy to link to the PDF, then click Link to content icon (at right end of toolbar). This will open the Linkit pop-up window. 27

28 Choose whether you wish to link your PDF, document or PowerPoint to an external URL or to other content already uploaded on the site. To link to content on the site, begin typing its location into the Search for content space. As you type, options will appear in a dropdown window. Click on your selection, and the URL will automatically be added in the Link URL box. To add an external URL, type the URL into the Link URL box. 28

29 To link new content that has not been uploaded yet, click on Open file browser. Click Upload. Click Choose File, and find your content in the menu. Click Open then Upload. Note: unlike when you upload images, you will not receive a preview image of your PDF. Click Insert file and it will be automatically inserted. 29

30 To open content in a new window (so the user does not leave your site): Click on the Link, and then the Link to content icon (at right end of toolbar). From the Options drop down menu (located under Link URL) choose New Window. Click Insert link. Click Save. 30

31 Additional Publishing Options The tabs for additional publishing options are at the lower left on the Edit content screen. URL path settings Drupal works with friendly URLs. These will be created automatically by default based on the category and title of your page. However, you can select a different URL by un-checking the Generate automatic URL box, and entering a different URL. Click Save. 31

32 Revision information This is a helpful tool when more than one person is editing the same content. All revisions to the same document are automatically saved whenever Save is clicked. If you wish to revert back to a previous version or undo an edit, click Revision information. Denote changes in the Revision log message box, such as added text or added new link. These notes let everyone else accessing page know what changes have been made. 32

33 The Published checkbox By default, when you save a page it is published (meaning it is live and available to other users). If you are still working on a page and don t want it to go live, un-check the published click box. Then click Save. By doing so you can continue to work on this version without anyone else seeing it. When ready to publish, click on published checkbox and click Save. 33

34 How to Add a Page to a Menu If a new page will be a main page that will be accessed often, you may want to add it to a menu. Copy URL of page to be added. Click on the Menus option (in the gray toolbar). Every school has two menus: (school name) Menu and (school name) Shortcuts. Menu refers to the main navigation area at the top of your website. Shortcuts refers to the shortcut links on the landing page. 34

35 Find the menu you wish to edit. Click on List links to see all of the links in that menu. Click on Add link at the top of the list. This will take you to Add Link page. Enter title of new page in Menu link title box. Paste URL you previously copied into Path box. 35

36 Click Save. You may then reposition your new link by dragging it up or down on the List Links page as preferred. How to Add a Menu Sub-Item To add a menu sub-item, follow the same directions for adding a menu item (above). When new page is added to the menu list, click on it and drag it to the right, under the main page for which it will serve as a sub-item. Click Save configuration. 36

37 From Edit menu link screen, click on the main page selected, and click Edit. Check the show as expanded box Click Save. 37

38 How to Add an Article From Add Content screen click on Article. Enter a Title. Enter Teaser Text (this is the text that will show up as a brief description under School News on the landing page). Enter Content. Add an Image if desired (by using the File Browser, or following the same instructions for adding an image to Basic Page content). Select School and Department. Click Save. 38

39 How to Add a Calendar Event From Add Content screen click on Calendar Event. Enter a Title. Enter Content. 39

40 Select a start and end Date and Time. Select a Location Name and Location Address. Note: Address should be entered as a one-line address that Google Maps will understand, so a location map will automatically be generated. Add Contact and Telephone Number. Add Event URL (if desired) Select School and Department. 40

41 Click Save. Other Calendar Event Options To create a recurring event: Click on Repeat click box. Indicate whether event occurs daily, weekly, monthly or yearly. You can also choose the day on which the event occurs. Click Save. 41

42 To Cancel a Recurring Event: Enter the total number of events in the box under repeating. The event will no longer be listed once that number is reached. Click Save. Exclude dates The Exclude dates click box can be used to indicate that a recurring event will not happen on a day when it might be expected for example, when a Monday event is canceled due to a legal holiday. Click on the Exclude dates box. Enter the date to be excluded. Click on Add exception box and repeat as needed until all exceptions are entered. Click Save. 42

43 To Reschedule Canceled Events: Click on Include dates click box and enter the new date. Click on Add addition box and repeat as needed until all exceptions are entered. Click Save. 43

44 How to Add Frontpage Content The Frontpage Content is the text that appears on the home page beneath the slideshow. From Add Content screen click on Frontpage Content. Enter a Title. Note: this will be for internal use only and will not appear on the home page. Enter Content. Click Save. Note: You are not limited to one Frontpage Content selection. You can create as many as you wish so this content can be periodically changed to promote special events, seasonal activities, etc. Simply follow the same instructions to create additional content. 44

45 From Find Content screen, locate Frontpage Content in the Type box, and add the school name to the School box. Click Apply. You will now see a listing of all Frontpage Content items created. 45

46 How to Create a Frontpage Slideshow From Add Content screen click on Frontpage Slideshow. Enter a Title. Note: this will be for internal use only and will not appear on the home page. Locate images using File Browser to select a stored image or upload a new one (see Adding an Image ) Select a Caption and a School. Click Save. 46

47 How to Add a Webform From Add Content screen click on Webform. Enter a Title. Enter Content. Select School. Click Save. 47

48 This takes you to the Webform Builder page. From here you can choose other elements for your webform from the selection under Add a Field. Example: To add a Textfield: choose Textfield. Click on the edit icon to add a title and description. Add information as desired and click Save. Follow the same procedure for other types of fields. 48

49 Other Webform Options To Review Completed Webform: Click View To Review Webform Submissions: Click on Results tab at top right of Edit Webform page. 49

50 The Analysis button provides additional details. The Table button shows the dates, first names, IP addresses, addresses and comments from all who submitted your webform. 50

51 To Download Webform Data: Click Download. Choose Export format and Column header format. Click Download again. To Select an Address where Webform will be Submitted: Click on s button. Fill in address and click Add. Customize as desired from the options screen. Click Save. 51

52 Form Components Click on Form components button to view Form preview screen. Click on Display to further customize webform. Click on Validation to make some webform fields required before submission (you can do so by clicking the Required click box) or to add unique information such as a user ID to the webform (by clicking Unique ). 52

53 Contact Information For assistance, please contact: Geoffrey Smith (619) Open Labs Open labs are a computer lab classroom reserved for employees or website editors who have already attended a formal training course, but who would like additional, one-on-one assistance. At each Open Lab, a trained district employee will be available to assist you while you work at a computer. Open Labs are not training classes, and you don t need to enroll to attend. Just show up during the hours it is being held. Attendees are assisted on a first-come, first-served basis. For information on when and where Schoolwires Open Labs will be held, please visit: 53