Drupal Web Content Management System (WCMS)

Transcription

1 Drupal Web Content Management System (WCMS) Toolkit & User Guide College Marketing and Communications Information Technology Services Training Group Version 1.01 Last Updated: August 26, 2015

2 Contents Training Workshop Overview Chapter 1 Overview of New Website Organization Overview Structure Of The New Website Content Writing General Guidelines For Developing Web Copy Additional Information Best Practices Chapter 2 Logging In To Drupal Chapter 3 Navigating To The Pages You Manage Chapter 4 Fields and Definition for Basic Pages: Suggested Homepage Structure with Annotated Fields Chapter 5 Editing Editing An Existing Page Helpful Tips: Body Toolbar Options Chapter 6 Hyperlinks What is a Hyperlink? Types of Links: Internal Path Methods Method 1: Method 2: Using URL Path Create An Anchor Link Chapter 7 Working With To A File (PDF,Word Document, Google Doc etc) Working with the File Browser in Drupal Break an existing hyperlink that is no longer needed Delete a file from your department folder in Drupal Replacing An Existing File with A New Version Creating A Department File Folder Chapter 8 Working With Images Uploading An Image Insert An Image Onto A Web Page Delete An Image From A Page Creating An Image Folder Chapter 9 Tables Insert A Table: Chapter 10 Add/Edit An Expandable List Headings Chapter 11 Using The Revisions Tool Resources 2

3 Training Workshop Overview There two are different levels of permissions, each with its own training session: Content Editors The Content Editor (CE) is responsible for page content, making updates and edits, adding images and links. The CE is accountable for the accessibility of the content of the pages which they are assigned. Topics covered during the workshop are: Explore the structure of the new website Review web page writing and style guidelines from Marketing and Communications Editing of text, links, tables, images and files on existing pages. Creating expandable lists Inserting images and files Revert Feature Content Managers The Content Manager (CM) builds upon the Content Editor role. CE training is a prerequisite for the Content Manager role. The CM is able to modify the structure of their assigned pages. Content Managers have the ability to create new pages and manipulate menu items. Topics covered during the workshop are: Creating new pages (Basic Pages) Creating Feature Boxes Creating Image Gallery Editing the left hand navigation 3

4 Part I Content Editor 4

5 Chapter 1 Overview of New Website Organization Overview Goals of the new website: Better showcase our position as a leading liberal arts college Improve our overall look and meet expectations of users Improve navigation to allow users to better find content they are seeking and allow us to better showcase the Holy Cross story Incorporate responsive design to work across all devices (computers, tablets, smartphones) 5

6 Structure Of The New Website 6

7 Content Writing General Guidelines For Developing Web Copy Keep Your Intended Audience In Mind Consider who will be reading and using the web content. Most of the website copy is aimed at prospective students, but some may be more applicable to current student (e.g., requirements on academic page). While writing, ask yourself What are they looking for, and what do they need? Be sure the tone, language and organization of content is appropriate for the audience. Be Concise Web writing should be clear and direct. Keep sentences short. Remove words or descriptions that don t add value to the content. Make Content Scannable Readers scan web pages before they read. Studies show users stay on a page for about 5-7 seconds before determining if they want to stay on the page and read the content or move on. Elements you can use in lengthy body copy: headers, links, and bulleted lists. In long body copy, bulleted lists are easier to scan and read than full paragraphs. If you are listing three or more items, consider using a bulleted list. For instructions or long lists like this one, consider using numbered lists for easy reference. Copy Limit paragraphs to five lines across (on Microsoft Word). Lengthy paragraphs overwhelm online readers. Less is more. Use Active Voice Writing in the active voice is more clear, conversational and engaging than the passive voice. Active: The dog bit the man. Passive: The man was bitten by the dog. Use Common Language It s essential for findability and SEO (search engine optimization) to use the same words and phrases your readers do. When creating page titles, headers, list items and links, choose keywords carefully. Additionally, be sure to use keywords consistently when creating web content. When used appropriately, this practice reinforces keyword relevancy for search engines, such as Google and your own internal search, thereby improving findability. 7

8 Tone Use a conversational tone. Be professional and human, and inject personality. Consider how you would communicate with someone standing in front of you instead of writing a manual. Include Valuable Links If additional useful, relevant and appropriate content exists elsewhere on or off our website link to it. Instead of repeating information that already exists on our site, link to the content. Images Images should be added to enhance the web page. For accessibility purposes, information on a page should always be in text format and never embedded within an image (e.g., on a printed poster). If you wish to link to such an image, duplicate the information contained in the image as text on the page. Refrain from using graphics, logos or other distracting visual elements. These types of images should not be used to provide navigational aid, rather, call-out feature boxes should be utilized instead. Internal department or College logos should not be used on any College web pages. Other We adhere to Associated Press guidelines for consistency and style across all digital publications For examples and exceptions, see the Writing Guidelines on our website: Additional Information For more information, please visit the College Marketing and Communications Website: marketing and communications/ Phone: web@holycross.edu 8

9 Best Practices The Faith and Services section is a new addition to the website and is a good example of a new page layout including different item types such as Feature Boxes, Linking Types, Formatting, Bulleted lists, Tables and Video. and service opportunities/prayer and worship Formatting using Headers. H1 is automatically assigned based on the Title Field H2 is used for the types of Prayer and Worship IMPORTANT Text Style : Notice that paragraphs listed under each H2 are short and to the point. Rule of thumb for paragraph writing on web pages is 5 lines across on a desk top screen. Anything more should be broken into a new paragraph. service/worship schedule Brief Impact Statement (which should include what the program is and its value, a high level view of the department or program). This page layout of a large table with Row Headings at the top outlined in purple. By using a table the alignment and placement of text on a page is lined up evenly. There are three type of Heading you can select from. See the Tables section of this document. and service opportunities/student programs urban development spud SPUD is a good page that contains multiple text sections that are broken up by headings. This example page also shows Impact statement, Body Text, Lists, Anchor Links. service/jesuit tradition Feature Boxes Feature Boxes can be used to call attention to specific topics on your web pages. There are a number of feature box styles that you can select. Here are two examples of feature box use: Method 1: For navigation: service/faith and service opportunities Feature boxes are a highly effective way of providing in page navigation. They have short descriptions usually text from the impact statement of the page you are linking to or other short text explanation. A Title is used to link to another page that gives more detail about the feature. The headline is hyperlinked to the corresponding page. Method 2: To call out information/links service/jesuit tradition Call out Boxes A call out box has been added to the page. A call out box is a type of feature box. The main difference being a call out box brings attention to a section of text with an image. This text may or may not be linked to a separate page such as a feature box. Feature boxes have an image attached to them that can be formatted either to the left, right or above the text. 9

10 Chapter 2 Logging In To Drupal Environments Stage (for testing and training only) sites.com Username: admin Password:ohosite1100 Edits made in stage are for testing only. Changes made in stage cannot be transferred to the live production site. Additionally, the staging site is periodically cleared. Please only use stage for experimentation and testing. Production (live) Edits made in production appear immediately on the site. The new Drupal content management system requires your Holy Cross Gmail username and passphrase for authentication to the system. It is important that you click the button when logging in. Sign in with Google You will be directed to the Gmail login screen where you will type your full address example : jdoe@holycross.edu. Type your Gmail passphrase. If you change your Gmail passphrase at anytime Drupal will automatically update with the new passphrase. You will be able to edit your web pages from both on and off campus. IMPORTANT NOTES : Do not use the Log In or Request new Password buttons under User Account. Do not use the username and password fields listed on the screen. 1. Open the web browser Mozilla Firefox (using either a PC or Mac). 10

11 2. Navigate to the web page and type 3. Click the Sign in with Google button. 4. Click Accept to allow Drupal to view your address and profile. (Initial Log in only) 11

12 Chapter 3 Navigating To The Pages You Manage Departments & Offices (Academic & Administrative) You will only be able to edit page(s) for which you have permissions. Departments can access their Main department page using the purple menu bar. Administrative Departments : Click About Holy Cross > Offices and Departments > locate your department in the listing and click on it. Academic Departments : Click Academics >Departments and Offices > locate your department in the listing and click on it. NOTE : You can also use the Search Box or Site Index at the top of the screen and search by department/program name as an alternate means of finding the pages you maintain. 12

13 Chapter 4 Fields and Definition for Basic Pages : The fields below are managed by the Content Editor and Manager Role: Title: This is the title of the page and will display in the URL path setting. This field is pre formatted as an H1 style. Header Image Inserted by College Marketing and Communications. This image displays on all pages within a department (office of academic program) website. One static image will appear throughout the site. Visitors use the header image as an indicator of where they are on the site, so it becomes confusing if the images changes. College Marketing and Communications plans to refresh these annually. Intro Text: (Optional) Department Impact Statement. You can either copy or type text here. Once text is added use the formatting drop down and format the text as Intro Text. Intro Text describe the distinguishing characteristics of the office or program; Specs: words (45 average target). Not all departments have an impact statement. Check with Marketing and Communication Web Office for more details about creating Impact Statements. Body Text: This allows you more space to expand on the copy from the department landing page impact statement. Describe the department in more detail; Specs: words (200 average target). Also, use bulleted/numbered list, add a table and any linked files. When structuring your web page it may feel long and that you re continually scrolling through content text and images. To make the page appear less lengthy, structure the page using the tools, such as anchors links to jump to sections of the page, Headings to separate sections, bulleted or numbered lists to keep ideas short and to the point. Hero Image: (Optional) A page may or may not include a hero image. This feature allows for the ability to add a unique image for that page (this is in addition to the header image.) When you add a Hero image it will automatically size. Video URL: Insert an existing YouTube video. If you have a new video that you wish to use, please contact College Marketing and Communications; they will upload your video to the College s YouTube account. The fields below are managed by the Content Manager Role: Body text: Body Field 1 6 :You can use these text areas for adding additional text paragraphs for you department or they can also be used when added a feature box. Feature Box: Feature Box Field 1 6: Can be used to add feature boxes to your page. Image Gallery Reference Field: Attach an existing Image Gallery to your page. Group Audience Field: This allows the editor to attach a page to a specific department website. Choose your department from the listing. 13

14 Suggested Homepage Structure with Annotated Fields NOTE: Keep in mind most features are available to utilize, however, there may be some that have not been activated. This structure above is a suggested format to use from Marketing and Communications when structuring the content of your site. 14

15 Chapter 5 Editing Editing An Existing Page 1) Navigate to your department page. 2) Click Edit from the menu bar. 3) Click the Body link to expand this section. 4) Make any changes necessary and Save. General Helpful Tips: Underlining text : Do not use underline tool. Underlining indicated that something is linked to either an internal or external page. Line Spacing : Hitting the Enter key will create a line break. Using Shift + Enter creates single spacing. Paste Options: When pasting text from ANY source (Drupal, Microsoft Word, Google Docs or another web page), it is very important that you use use the paste from word or paste from text tool to paste. These tools strip out all of the extraneous code making it easier to format text for the web page. 15

16 Body Toolbar Options Button Styles Definition The Styles menu. To apply any style you must first Highlight the text. It is suggested to use heading whenever possible. Defines your page s organizational structure. Header text informs visitors and helps navigate them through your page. Styles have the correct color, size and font applied already. Search engines like Google and Yahoo are primarily looking at the text content of your pages and by using effective headers you will increase your sites searchability. Think of headers as your site structure similar to a term paper. Options H1 this is the largest text formatting. It should not be utilized since this is the Page Title. H2 H4 These headings can be used to organize your page s content. Normal Paragraph Can be applied to the Body text of a page. This is your standard, default copy type. Intro Text Use this style when formatting the department Impact Statement. This is the only style that should be applied in the Intro Text field. Expandable List Header Creates an expandable list. Example: Questions and Answers. Expandable List Body Supplies the Answer to the List Header Bold, Italics and Underline Bold, Italics and Underline icons are used to place emphasis on text. Special Notes : Only bold necessary words, not the entire page or large segments of text. 16

17 Italics should be avoided and quotes should be used instead. Marketing and Communications has asked that when placing books, compositions or movies titles on your web page they should be placed in quotes rather than italics. Avoid using the underline as those reference hyperlinks. For more information see Marketing and Communications Writing Guidelines. In the beginning of this document. Remove Formatting Removes formatting on text that was typed directly into Drupal. When pasting from field to field within Drupal you should use the Paste options of Paste as Plain text or Paste from Word. Undo and Redo Cut Undo the last command and Redo the last command Use Ctrl X to cut text either from an external file or website or internal drupal field. When pasting text into your web page you must use the Past Plain Text or Paste from Word. Any formatting attached to the source text will be stripped away. Copy Use Ctrl C to copy text either from an external file or website or internal drupal field. 17

18 When pasting text into your web page you must use the Past Plain Text or Paste from Word. Any formatting attached to the source text will be stripped away. Paste Plain Text. By using this paste option any formatting attached to the source text will be stripped away. Paste from Word. By using this paste option any formatting attached to the source text will be stripped away. Insert Image Insert Table Special Characters Insert images to a page Insert a table to a page Inserts special characters like copyright, or double arrows for see more» Superscript and Subscript Text Alignment Numbering Bullets HyperLink H 2 O, 1 st, 2 nd, 3 rd or 4 th Examples: Chemical formulas or ordinal numbers Left align, middle align, right align and justified Use when listing items Use when listing a series of thoughts or statements Insert links on a page to other websites, files, internal pages. 18

19 Break a Link Break a Hyperlink. The link is no longer active. Horizontal Line Inserts a Horizontal Line on the page. Use a line to separate major sections of content on the page. Source View the HTML source code if necessary. For advanced editors. Strike through Insert Anchor Puts a strike through line through text. Inserts an Anchor tag to connect to a section on the same page or on a different page. Block Quotes Div Tag IFrame Used with HTML to create a callout for text. For advanced editors. Is used to group block elements to format them with style sheets. For advanced editors. Used with HTML For advanced editors. 19

20 Chapter 6 Hyperlinks What is a Hyperlink? A hyperlink, or link, is applied to selected words, so that when the selected words are clicked by a visitor, a command is given to 'jump to another page' in your site or to an entirely new website. There are several different types of links that can be used in your Drupal page. Types of Links: Internal Path NEW TO DRUPAL Recommended for linking to existing pages on the Holy Cross website ( ). Internal Path link allows automatic updates for links to pages when they are moved at the same level. NOTE : links will not update automatically for newsroom (news.holycross.edu), Catalog (catalog.holycross.edu), Events Calendar (events.holycross.edu) or other pages that do not contain URL Anchor Links to any internal or external websites remember to include This is used to link to a section of the current page without having to scroll up or down. NOTE : If you choose this option and the internal/external web pages are moved, the hyperlink will not update automatically and you will need to manually update them. NOTE : Anchor links can be used to link to a section of the current page or link directly to a section of another page. 20

21 Internal Path Methods Outlined below are the different ways of creating internal links on your web pages. Using the Internal path link tool ensures that the link will always remain active, regardless if the page you link to moves or the name changes. When working with internal web pages, the preferred linking option is Internal Path. You can choose the method that best fits your needs. Method 1: If you are linking to another internal web page begin typing the page name in the link field. 1. Navigate to you page where the link will display. 2. Highlight the text on the page that will represent the link. 3. Click the Link button on the toolbar. 4. From the link window, choose Internal path. 5. In the link field begin typing the page name to link. 6. From the drop down choose the page. The correct name of the page populates the Link field Example: Training (node/66016). Method 2: You can also manually enter the URL of the internal page into the Link field rather than searching and selecting it from the drop down. This method will also update if the page name changes. 1. Open a second tab in your browser navigate to the internal page url you want to copy. calendar 2. Highlight the internal part of the URL: its/training calendar Do not copy the or the leading or trailing forward slashes. 3. Return to the Link type window and paste the address link in. The correct name of the page will automatically populate with the node address after saving the link. 21

22 Using URL Path This type of link, can be used to link to either an internal or external website, you must remember to include NOTE : If you choose this option and the internal/external web pages are moved the hyperlink will not update automatically and you will need to manually update them. Manually moving pages is a Content Manager function. 1. Highlight the text and click the Link button. 2. Select URL from the Link Type drop down, 3. Type the page address (example: ) 4. If linking to an external website or any document (e.g., PDFs) click the Target tab and choose New windows (_blank) to ensure that the link opens in a new window. Setting and Creating An Anchor Link Anchors can be used to link to a specific section of a page, either from that same page or from a different page. Setting An Anchor Location 1. On the toolbar click the Anchor icon. 2. Type a name for your Anchor link (all lowercase, no spaces, under 20 characters). 3. Click ok. Linking to An Anchor Location On The Same Page 4. Find and highlight the text that you want to link the anchor to. 5. Click the Link tool. 6. From the Link Type drop down selection field choose Link to anchor in the text 7. From the By Anchor Name drop down selection field choose your anchor name. Linking to An Anchor Location On A Different Page From Where The Anchor Appears 1. Navigate to page that has the anchor you wish to link to. 2. Copy the URL (e.g., calendar). 3. Append the anchor to the end of the URL (e.g., if the anchor was 2015calendar, the URL would become: calendar#2015calendar). 4. Find and highlight the text that you want to link the anchor to. 5. Click the Link tool. 6. Select URL from the Link Type drop down, 7. Paste the page address with anchor (example: calendar#2015calendar) 22

23 Link This is used to link a selection of text to an address. 1. Click the drop down option in the Link Type and choose . Format should be address. jdoe@holycross.edu 2. Can also pre fill a subject line. Remove A Hyperlink 1. Highlight or click on the text you wish to link. 2. Right click on the text, choose Unlink. 3. This does NOT remove a file from the server. If you remove a hyperlinked file, the file is still searchable through search engines. Things to Avoid With Hyperlinks Based on the type of hyperlink or link selected (URL, , Anchor, etc.) a set of instructions is applied to the text selected to load certain information. When working with links they should display differently from surrounding text. Links usually display in a different color and are underlined. Guidelines to creating text hyperlinks are listed below. Avoid using the actual URL as the link on the page For more information visit Instead :Select words, in context, to become the link. For more information visit the Arts and Sciences website. Avoid the words: click here. select this, etc. Instead :Use phrases such as visit our Campus Guide. OR See More» is available. 23

24 Chapter 7 Working With A File (PDF,Word Document, Google Doc etc) 1. Navigate to the page you want to edit. 2. Click Edit. 3. Highlight or Type the text you want to link the PDF file to. 4. Click the Link icon on the toolbar. 5. Click the drop down arrow and choose the link type URL. 6. Click Browse the Server to choose a file. 24

25 Working with the File Browser in Drupal The file browser is an important container in Drupal. Here is where a copy of all uploaded files from the network are saved and stored. 7. Once the file browser opens, click the < root> folder icon, this will to ensure you are starting at the top level. 8. Under the <root> folder click on the folder Files. 9. Under the Files locate your department folder name and click to open it. *Once you are in your department folder, you can begin to upload files from the network. 10. Click the Upload button. 25

26 11. From the drop down window click Browse. 12. You should now see your network drives. 13. Navigate to the network folder where the files are saved. 14. Select the file by clicking once on it and click the Open button. 15. The file name populates in the Browse window. 16. Click the UPLOAD button. 17. A copy of the file has been uploaded to your department s drupal folder. 18. Click the X in the File window to close. 26

27 19. From the File Browser window select the file you just uploaded. It should be on the right hand side of the screen. 20. When the file is selected click the Insert File button. 21. In the Link window the file name populates the URL field. 22. Click the Target tab. 23. Click the drop down arrow and choose Target to be New Window (_blank.) 24. Click OK. 25. The text you initially highlighted is now a hyperlink to that file. 26. Scroll down the web page and click Save. 27

28 Remove an existing hyperlink that is no longer needed 1. Navigate to the page where the existing link is located. 2. Click Edit. 3. Click the Body link to expand the section. 4. Scroll to the section the link is located, highlight the existing linked text. 5. The Unlink button on the toolbar becomes available. 6. Click it and the link is broken. NOTE : Remember you only made the link inactive on the web page. The copy of the file still lives in your department file folder.if you no longer want the file to be searchable, you must delete the file from the Drupal server (see instructions below). Delete a file from your department folder in Drupal 1. Navigate to the page the link you want to break is located. 2. Click Edit. 3. Click the Body link to expand the section. 4. Scroll to the section the link is located and highlight the existing linked text. 5. Right click on the selected text and choose Edit Link from the menu. 28

29 6. From the Link Window click the Browse Server button. 7. The File Browser window opens. 8. Click the < root> folder icon ensuring you re starting at the top level. 9. From the listing under the <root> folder locate and click on the folder called Files. 10. Under Files look for your department folder name and click to open it. 11. Once in your department folder, locate the file on the right hand side and single click to select it. 12. Click the Delete key on the toolbar. 13. Delete selected files? Click OK. 29

30 14. The file is deleted from the drupal system. The source file still remains on the your network drive. Only the copy that was uploaded to Drupal is deleted. Replacing An Existing File with A New Version We want to update the current training policy link on our page. Rather than creating a file with a new name and leaving the existing file searchable in Google as a broken link. When replacing an existing file with a newer version, follow the instructions below. These instructions will prevent previous file versions from still displaying in a search browser. NOTE : It is important to keep the original file name. When naming files there should be no spaces or special characters. In Drupal: 1. Navigate to the page the link you need to update currently resides. 2. Click the Edit button. 3. Scroll to the Body link to expand the section. 4. Highlight the existing link, right click and choose Edit Link. 5. From the Link window click on Browse Server. 6. From the File Browser window click the <root> folder. 7. Click the File folder. 8. Click your department folder name. 30

31 9. The current file should display. In our example the file is: Training_Policies. 10. Copy the original file name from the existing department folder.(click the file name once and highlight the name only. Use Ctrl C to copy the file name). Use the Network Files Location 11. Navigate to the network drive or other file location. 12. Open the folder the new revision of the file resides on. 12a. Locate the original source file. In our example it is called Training Policies. Right click the file name choose rename. Call the file: Training Policies Old. 13. Choose the new updated revision file ( Our Example: Training Policies 2015). 14. Right click and choose Rename (delete Training Policies 2015 name and Ctrl V to post in the Drupal file name Training_Policies). 15. Close your network window. 16. Return to Drupal. 31

32 Back In Drupal: 17. Return to Drupal File Browser window. The old version still resides here in Drupal. 18. Click once on the old file to select it. Then click Delete (we want to delete training_policies.docx). 19. Click Upload the navigate back to the network folder and choose the updated version of the file (now called Training_Policies. 20. Click Open. 21. Click Upload again. The newly renamed file displays on the drupal server. 22. Click the file to update the Link Box URL. 23. Click OK. Creating A Department File Folder 1. If your department folder has not been created, you can create one by using the Link icon on the toolbar. 2. Click Browse Server. 3. From the directory window click on the Root folder to make sure you start at the top level. 4. Click the File folder. 5. Create a department folder under the File folder by click the Directory icon. 6. In the subdirectory name type the department name (folder names must be in lowercase letters with no spaces). 32

33 7. Click ADD. Close subdirectory box. The department folder is listed under Files; if you want to upload files from the network now, see that section, otherwise close the File Browser window. 33

34 Chapter 8 Working With Images Uploading An Image 1. Navigate to the page you want the image to display. 2. Expand the Body field by clicking the link. Click in the Body Text field you want to use. 3. Click the Image Icon. 4. Click Browse Server. 5. Click the Root folder to ensure you are starting at the top level. 6. Click on the Images folder. 7. Click your department folder. 8. Click the Upload button. 9. Browse for the file and select it. 10. Click Open. 11. Click Upload. Insert An Image Onto A Web Page 1. Navigate to the page you want to the image to display. 2. Expand the Body field by clicking the link. Click in the Body Text field you want to use. 3. Click the Image Icon. 4. Click Browse Server. 5. Click the Root folder to ensure you are starting at the top level. 6. Click on the Images folder. 34

35 7. Click your department folder. 8. Select the file on the right that you want to insert. 9. Click Insert File. 10. Add alternative text for image. This is important for visitors with screen readers or other image reading programs The file loads with original sizing applied. NOTE : To resize the image after upload use the Width and Height fields on the image property window. 12. Choose an Alignment for the image. The default is None. 35

36 Delete An Image From A Page 1. Select the image in the Body of the page. 2. Press the Delete key. a) When you delete an image from the page the image will still be saved in the Image root folder of your department. b) To delete an Image from the root department folder simply select the image from the listing and press the delete key on the keyboard. Creating An Image Folder 8. If your department folder has not been created, you can create one by using the Image icon on the body toolbar. 9. Click Browse Server. 10. From the directory window click on the Root folder to make sure you start at the top level. 11. Click the Image folder from the listing. 12. Create a department folder under the File folder by click the Directory icon. 13. In the s ubdirectory name type the department name (folder names must be in lowercase letters with no spaces). 14. Click ADD. Close subdirectory box. 15. The department folder is listed under Images; if you want to upload images now, see the next section, otherwise close the File Browser window. 36

37 Chapter 9 Tables Tables let you organize information on your web page and give it an organized look that your visitors will find useful. Tables have rows and columns and for each spot where a row and column intersect, you have a table cell. Data in a cell can be aligned left, center, or right, formatted, and so on. Tables can also have headings for row and columns which appear in purple. Insert A Table: 13. Navigate to the page you want the table to display. 14. Expand the Body field by clicking the link. Click in the Body Text field you want to use. 15. Click the Insert table icon. 16. Set the number of Rows and Columns you will need. 17. Delete the default width of 500 leaving the field blank. a) By leaving this field blank the table will automatically adjust its width depending on your screen size (e.g.: desktop, tablet, smartphone, etc.) 18. Choose Headers if you have column or row headings. a) This example displays a Row Heading Only. b) A banner is applied to the identified headers section. c) No internal cell lines display on tables. 19. Click OK. 20. Example: Example of First Column Headings : 37

38 Example of Both First Row Headings and First Column Headings. Chapter 10 Add/Edit An Expandable List Headings Adding an expandable list allows you to hide additional content unless extended by the page visitor. Possible uses include FAQs and Q&As. Each item will have an (+) sign to expand the item and once expanded a ( ) to collapse it. 1. Navigate to the page you want the list to display. 2. Scroll down to the Body section. 3. Type the first question. Example: How can I view my google calendar? 4. Highlight the text and from the Style drop down choose Expandable List Heading. 5. Text will still be selected. Deselect by clicking once at the end of the first question. 6. Press Enter. 7. Type the Answer. Example: Click Settings> calendar. The calendar will then appear on the page. 8. Highlight the text and select Expandable List Body. 9. Text will still be selected. Deselect by clicking once at the end of the first question. 10. Press the Enter key and add more list Headings and Body. 11. Save the page 38

39 Final Result. 39

40 Chapter 11 Using The Revisions Tool The revision tab at the top of the screen displays all changes that have been made to each page. The left hand side of the screen displays the date and time the edits were made, as well as, the user that made them. We now have access to compare the current version of the web page vs. the previous versions. We also have the ability to revert back to any previous version of the page listed. 1. Navigate to the page. 2. Click the Revisions tab on the upper right. 3. A list of revisions for that page displays.the current version is first to display in the listing and is marked by a radio button and under Operations header on the table says current revision. 4. From the listing choose a version to compare by selecting the radio button on the right hand side. 5. Click Compare. 40

41 6. The Revision screen displays with the current changes listed on the right side and are highlighted in red. The previous version displays to the left and is highlighted in yellow. 7. Review the changes. To return to the list revisions screen click the List revisions button. 8. Once you return to the listing you can then click the Revert hyperlink to revert back to the chosen page. 41

42 Resources Questions About Name Title Department Phone Assistance using Drupal; training Passwords, logging in, server errors ITS Training ITS ambarry or pchuplis ITS Help Desk ITS helpdesk Content, writing, photography, multimedia Nick Markantonatos Asst. Dir, Web Comm. College Marketing and Communications nmarkant Web structure, strategy, permissions, web policy, analytics Christian Santillo Assoc. Dir., Web Comm. College Marketing and Communications csantill Faculty/profile pages Margaret Nelson Academic Support Specialist Academic Affairs mnelson Social media Jessica McCaughey Social Media Specialist College Marketing and Communications jmccaugh College branding (logos, colors, etc.) Bridget Cass Project Manager College Marketing and Communications bcass Google Sites ITS Help Desk ITS helpdesk 42