University of Pittsburgh Communications Services Basic Training Manual www.shrs.pitt.edu Drupal 7
Table of Contents Users... 3 Log In... 3 Log Out... 3 What is a Content Management System?... 4 What are Content Types?... 4 View Existing Webpage Content... 5 Edit Basic Pages:... 6 Basic Pages: Using the WYSIWYG Editor... 7 Using the WYSIWYG: Adding Hyperlinks... 8 Using the WYSIWYG: Adding Images... 10 Using the WYSIWYG: Downloading and Linking to a PDF... 12 Edit Landing Pages:... 13 Edit Person... 15 Add Person... 17 Contact Us... 19 2
Users Log In Open a Web browser and go to your Web site. www.shrs.pitt.edu (Type /user at the end of the URL to log in.) Our sites function best in modern browsers such as Firefox, Chrome, Safari, and Internet Explorer 9+. The site will maintain most design detail and interactivity in Internet Explorer 8, and degrade gradually in older versions. We recommend that you use Firefox, Chrome, or Safari when editing. The site can be accessed from any computer with an Internet connection after it is launched using http://shrs.pitt.edu If you forget your password: The site uses your University of Pittsburgh credentials to log in. The username is the part of your Pitt e- mail address that is in front of the @ symbol. The password should be the same as your Pitt password. Example: Your Pitt e- mail is yourname@pitt.edu Username: yourname Password: your Pitt password Not sure you are logged in? For most Communications Services sites, once logged in, you will see a horizontal black bar with white words positioned at the top of the site (below the URL bar). If you do not see this black bar (pictured below), you are not logged in or you do not have the appropriate access. Log Out Once all site updates are completed, log out of the system using the Log Out link at the upper right in the menu bar. Click on Log Out. You can also navigate to http://www.shrs.pitt.edu/logout 3
What is a Content Management System? Drupal is a web- based publishing platform that allows users to easily create, manage, store, and deploy content on their own webpages. The core function and use of content management systems is to present information on websites. CMS features vary widely from system to system. Simple systems showcase a handful of features, while other releases, notably enterprise systems, offer more complex and powerful functions. Most CMSs include Web- based publishing, format management, revision control, indexing, search and retrieval. A CMS serves as a central repository containing documents, movies, pictures, and scientific data. CMSs can be used for storing, controlling, revising, semantically enriching and publishing documentation. A CMS such as Drupal allows users to: 1. Create Create new content with an easy- to- use web interface. You can create everything from simple text posts to news and events and photo galleries. 2. Organize Drupal comes with tools to organize, structure, find, and re- use your content. 3. Manage With the help of user permissions, multiple users can be assigned different roles in editing the site. 4. Design With the help of our design team, your custom website will be easy to use, engaging, and eye- catching. Drupal offers a way for you to connect, relate, and classify your website s content. Taxonomy organizes your site based on organizational keywords or tags. In Drupal, these terms are gathered within vocabularies and they are created, managed, and applied through the Taxonomy module. What are Content Types? Communications Services has created a list of content types below based on your content needs for your Web site. These are developed as a result of Communications Services conversations with you about the site and the content plan. This content management system (CMS) allows for dynamic placement of content based on the type of content and related taxonomies. Your content types for this Web site are: 1. Basic page a page in your site formatted using the WYSIWYG editor 2. Landing Page pages used to consolidate information an extra navigation tool 3. Person - the individual people profiles You can sort these options under Edit Content. 4
View Existing Webpage Content To view existing content, click on Edit Content on the black bar at the top of the screen. After selecting Edit Content, you will see a table with all current content on the site. Columns include: Title links to the page view Type: Basic Page or Landing Page Program /Department the Program or Department the page is in. Operations a link to the edit screen for the page You can filter this information in a few ways: Title Search: You can type in the partial or full title (or program acronym) The Program dropdown lets you see only content in a specific Program The Department dropdown lets you see only content in a specific Department Once you have selected an option click Apply. To undo click Reset. 5
Edit Basic Pages: 1. Navigate to the page you want to edit and click the Edit tab. 2. Go to Edit Content, find the page you want to edit in the content list, and choose edit (on right) to go to the edit screen for that page. Once you have clicked edit, your page view should change to an editing screen, as follows: You can modify any information on this page. Before saving, you can preview the changes by clicking Preview at the bottom. If you are happy with the changes click Save and your changes will be submitted for approval. 6
Basic Pages: Using the WYSIWYG Editor Within the site content, a style sheet has been developed that pre- defines various heading styles for use on your Web site. You can apply those heading styles to site content via the content editor, choosing from a Format drop- down box that offers you the following options for styling your text: 1. Normal this is normal paragraph text (by default, all text will be set as this) 2. Headings 2, 3, 4, 5, 6 (in descending order of size) To select a heading type, highlight the line of text in the content window and then choose a style from the dropdown. In order to set a heading style, the header text must be separated from other text by a return. A heading style cannot be isolated to several words within a paragraph. Note: There is no Heading 1 in the drop-down because that level header is automatically in use for the page s title. There are also regular formatting options that are similar to those found on any Word document. These include: Source Cut, paste, paste from Word Undo and redo Find, replace Add links, anchors, or images (will explain later) Horizontal line Italics, underline, bold, strikethrough Superscript or subscript Erase formatting Bulleted and numbered lists Block quote Align text left, center, right, and justify Add links, remove links, anchors Note: You can hover your mouse over any icon on the formatting menu to get a description of what the icon does. 7
Using the WYSIWYG: Adding Hyperlinks Links you can add to a Web page are: 1. Internal Links link to another page within your website. 2. External Links go to pages or documents on other websites. 3. E- mail Links go directly to an individual e- mail address. 4. Link to a Document links to a PDF, docx, txt, etc. within the website. About internal links (sometimes called relative links ): The link may look like this: /pagetitle. Internal links need only the information following the / from the URL. We try to make the URLs for site pages human friendly, so the URL reflects the page title. URLs can never have spaces in them, so where we intend a space to exist an underline (_) is used. URL paths are typically all lower case. External Link To create an external link, highlight the text and click on the link icon. Because external links go to websites outside of your site, it is necessary to write in the full URL in the link box, for example: http://www.xxx.pitt.edu. The system should prompt for the http if it is not included. Often the easiest way to ensure that you have the correct URL (and don t accidentally mistype something) is simply to copy the URL from the address bar of your browser and then paste it into the link box. * Please set an external link to open in a new window. Click on Target and then select option New Window Link type: select URL URL: Enter the full URL Target: By default the link will open in the same window. You can choose to have the link open in a new browser window. Advanced: More options to add to your link. Click the OK button. 8
E- mail Link To create a link to an email address, highlight the text (typically an e- mail address or someone s name) and click the link icon. Link type: select E- mail E- mail address: Enter the full e- mail address Message Subject: Optional field that automatically generates a subject in the person s e- mail to you. Message Body: Optional field that automatically generates content in the person s e- mail to you. Click the OK button 9
Using the WYSIWYG: Adding Images Note: Images should be jpg, gif, or png files. While you may use them at their original size, they are best saved at the final size that you would like them to display on the Web site. In general, jpg files are best for photographic images, while the gif and png format is best for flat color images like logos. To add a new image to a page on the Web site, make sure you have saved it at the proper size and in the correct file format before you proceed through the steps below. There is often a recommended width for an image in the main content area of the site. It is usually best not to upload images wider than the content area of your site's pages. Saving it to your desktop lets you retrieve it easily. Within the content editing screen, click the Image icon A new window will appear. Click on the blue Browse Server button to upload the image. A new pop- up window will appear. If the image is already on the site, in the left hand column select the folder titled Library > Images > locate your program or department name. Click that file open and search for your image there. Select the file from the column that says File name and click Insert. 10
If the image needs to be uploaded to the site, in the left hand column select the folder titled Library > Images > locate your program or department name and click that file open. (This puts the file in the correct folder for the future) Once the file is open click on the Upload button in the top left corner of the window and browse to the image on your computer that you want to upload. Once uploaded, it will be highlighted by default. Click Insert File. You will be returned to the first pop- up box, click OK to finish adding the image. You may (though it is optional) fill the remaining fields: Alternative Text: filling out this field ensures that users who browse the Web with alternative technologies like screen readers will have the image verbally described to them. Alignment: Positions the image in relation to the paragraph of text. Width/Height: these will be auto completed based on the size of the image you uploaded. Border: if you would like to set a border on the image you may do so here, but there is normally default border styles set for the whole Web site. Vertical and horizontal space: insert empty/white space between the image and the text. There is, by default, some vertical and horizontal space set by the Web site, but if you would like to add more, use these fields. Measurements are in pixels. 11
Using the WYSIWYG: Downloading and Linking to a PDF To link to a PDF, highlight the text you want to link, and click on the link icon. Link type: select URL URL: select the blue Browse Server button A new pop- up window will appear. If the document is already on the site, in the left hand column select the folder titled Library > Documents > locate your program or department name. Click that file open and search for your document there. Select the file from the column that says File name and click Insert File. If the document needs to be uploaded to the site, in the left hand column select the folder titled Library > Documents > locate your program or department name and click that file open. (This puts the file in the correct folder for the future) Once the file is open click on the Upload button in the top left corner of the window and browse to the document on your computer that you want to upload. Once uploaded, it will be highlighted by default. Click Insert File. You will be returned to the first pop- up box. Click OK to finish adding the link. 12
Edit Landing Pages: 1. Navigate to the page you want to edit and click the Edit tab. 2. Go to Content Edit, find the page you want to edit in the content list, and choose edit (on right) to go to the edit screen for that page. 13
Landing pages have break out sections to easily format information. Make sure to locate the specific information you want to edit. You can also add additional break out sections by clicking Add another item seen below. You can modify any information on this page as you would with a normal page. Before saving, you can preview the changes by clicking Preview at the bottom. If you are happy with the changes click Save and your changes will be submitted for approval. 14
Edit Person To view existing people, click on Edit People on the black bar at the top of the screen. After selecting Edit People, you will see a table with all current people on the site. Columns include: Title links to the person s profile Type: showing the content type: Person Program /Department the Program or Department the person is in Operations a link to the edit screen for the person s profile There are a few ways to find a specific person: You can type in their partial or full name The Program filter lets you see only people in a specific program The Department filter lets you see only people in a specific Department Once you have selected an option click Apply. To undo click Reset. 15
Once you find the person you wish to edit in the content list, and choose edit (on right) to go to the edit screen for that person. Your page view should change to an editing screen, as follows: Edit the information that you want to change. Click Save. 16
Add Person To add a person, click on Add Content > Person on the black bar at the top of the screen. Or from the Edit People page you can click on the Add a Person link. Fill in the important fields along with any additional information. Important Fields: Add First & Last Name Choose Photo > Upload (note image requirements) Download CV > Upload Select a Role Type Select an Academic Appointment Select Department and/or Programs 17
Once finished > Click Save 18
Contact Us If you have any questions about this manual, please contact: Dru Sturgess Web Producer 412-624- 5021 drs105@pitt.edu Christine Cornely Associate Director of Web Communications 412-624- 0993 cmc81@pitt.edu John Cooper Director of Web Communications 412-624- 4010 jcooper@pitt.edu 19