Ready Reference 063014 Introduction Introduction to Drupal 6 This page provides instructions for using the Drupal Web Content Management System. Drupal makes publishing content relatively easy and allows you to modify Pace web pages directly from your web browser after logging into the site with admin/editor privileges. Getting Started To request access to your department s webpage, your direct report or someone in your area with admin permissions will need to place a helpdesk ticket. All requests can be submitted to https://help.pace.edu or by sending an email to pacehelpdesk@pace.edu. Logging into Drupal Note: The preferred browser to use is Mozilla Firefox open a browser and navigate to http://www.pace.edu/{your Site Name Here}/user/ type your MyPace Portal Username and Password click Login After authenticating, you will be directed to your profile page. Information on how long you have been a member to the website will display. To acknowledge you have authenticated successfully, you will notice a black admin toolbar at the top of the page shown below. Note: The red box marked below indicates the amount of users and administrator/editors that are on the site. Note: Please remember to log out of Drupal if no editing is done. To sign out, click on the Log Out (username)
1 2 3 Overview of administration page components and features 4 5 6 8 7 9 10 Number Name Description 1 Admin Toolbar Select options to create a page, view various content, update banner, etc. 2 Header Department or Organizations Name 3 Dark Blue Navigation Bar Navigation bar on all Pace pages 4 Area Banner Banner representing your site 5 Quick links Top right navigation for up to 5 links 6 Teal Blue Navigation Bar Navigation bar on all Pace pages 7 Primary Tabs Tabs to View and Edit page 8 Body Area to display content 9 Primary Links Right side menu containing Drupal pages 10 Footer General University information and links -1-
Using the File Browser The File Browser is a central repository for storing files, PDFs, images etc. It can be accessed within the profile page or when editing a page. To access file browser from Profile page: click icon on the far right of the Admin Toolbar click File Browser in the main window The toolbar has the following options available: Icon Name Description Save images, documents, PDFs, and other miscellaneous files to the file browser Reduce the size of the selected image with the provided dimensions (three sizes) Delete a file based on what is selected Adjust the visual dimensions of the image and optimize its size Cuts out certain section of an image Rename a file Create and remove folders in the directory Insert images, documents, PDFs, and other miscellaneous files from the file browser Upload files The instructions below show how to upload files to the Drupal site. select folder from the in the left navigation pane to place an image click Upload button The files upload dialog box will display. -2-
click Browse navigate to folder that contains the image to upload select image and click Open Once the picture file is selected on storage device (e.g., desktop, Network drive), click Upload Note: It is not recommended to select a thumbnail (see above) since each of the thumbnails predefined size may cut out part of your image if the width and height does not have the same dimensions. Resize an image: select image to resize from folder directory in the left navigation pane click Resize on toolbar type the desired pixel width and height in the spaces provided Note: Drupal will adjust the height ratio in relation to the width you have specified. -3-
Crop a file: select image to crop from folder directory in the left navigation pane click Crop on toolbar Once the image is selected, a green box will appear around the picture. Once you click and drag anywhere within the green box, a red box will display. Within the red selected image is the area that will become the new image. To finalize crop: Rename files click Crop select image to rename from folder directory in the left navigation pane click Rename on toolbar type file name next to New name Delete Files select you desired file from folder directory in the left navigation pane click delete -4-
A confirmation box displays: click OK Managing Directories for file storage The user has the option of adding or removing a folder from left navigation directory tree. To add a folder: select parent folder from left navigation and under Root click Directory type folder name next to Subdirectory name click Add Note: the newly created folder will display under selected parent folder. Editing & Creating a Page Existing webpages can be modified or a new page can be created for the site. To update an existing page: -Or - navigate to the desired page click on the Edit tab To create a new page: hover over Content Management from the Admin Toolbar hover over Create Content click Page -5-
The Drupal page will display: type the title of page under Title type the content of webpage under Body The WYSIWYG Editor Toolbar has the following options available: Icon Name and Description Source View HTML code Cut Remove the selected data from its original position Copy Create a duplicate from the selected data Paste Inserts font, styles, and miscellaneous code Plain text - Inserts text without formatting Paste from Word Inserts content copied from Word Check Spelling Review the body of the page for spelling errors Spell Check As You Type Enable SCAYT option to indicate spelling errors Find Enter the word or phrase to locate within the page body Replace Enter the word or phrase to substitute within the page Select All Select all content within the body Remove Format Remove all fonts and styles within selected area Insert Image Use the file browser to upload and insert images to the body of the page Flash - Insert a SWF animation or a FLV video Insert Table Table can be customized with its own color and styles -6-
Insert Horizontal Line A grey horizontal line will appear based on the cursor s location when button is selected Insert Smiley Place in stylized faces and images Insert Special Character Add numbers, characters, and symbols IFrame An inline frame is used to embed another document within the current HTML document Bold Change characters to a stronger appearance Italic Transform characters to right upward slant Underline Draw a line under the selected word Subscript A letter or figure written below the line of text. Superscript A letter or figure written above the line of text Insert/Remove Numbered List Creates a ordered list using numbers or letters Bulleted List Creates a bulleted list Insert Indent Positions text further from the margin than the main part of the text Align Text Left Alignment of the text will be on the left margin of the page Center Aligns the content along the center of the page Right Aligns the content along with the right margin or Justified Distributes the text evenly between the margins Text Direction Changes the direction of the text within the selected area Insert Link Select the text or image for which you want to create a link Anchor Anchor is used with link to jump to a specific location within the same page Font Name, Size Drupal provides hidden default font and size. A selection can be made to change the default font and size Font Color Changes the color of your text. Background Color Changes background colors, images, or texts in a document Maximize increase screen view of page your editing Show Blocks indicates different tags present on page -7-
Inserting a Image The following instructions will show how to insert an image to the body of the page. insert the cursor in the content area where the image will be placed select the Image icon from the toolbar select the Browse Server icon once the Image Properties pop-up window appears click the folder where the image resides select the image you want. select Insert File. click OK. Links Create an Internal Link Internal links refer to alternative pages found within the same Drupal site. choose the image/text that will have a link attached select the Link icon from the toolbar select Drupal within the Link Type drop down list -8-
type in the name of the page, and the system will show all relevant page names click on the page you would like select OK Create an External Link An external link is connected to an external webpage or file ( i.e..doc,.pdf,.jpg, etc.) Create a link to a website: choose the image or text that will have a link attached select the Link icon from the toolbar click the Link Type URL within the Link pop-up window click the appropriate procedure (in most cases http://) type or paste the URL in the URL field click OK. Create a link to a file: choose the image or text that will have a link attached select the Link icon from the toolbar -9-
click the Link Type URL within the Link pop-up window select the Browse Server icon from the File Browser window select the file or image you want to upload click Insert File button Note: Within the URL text field of the Link pop-up window, the path to file should appear. click OK. Edit an Existing Link click on the text which is linked select the Link icon adjust the URL address Delete an Existing Link click on the text or image that is linked select the Unlink icon from the toolbar Create an Email Link click on the text you want to link select Link icon from the toolbar click Link Type Email from the Link pop-up window enter the email address. (Optional) Add subject and message body select OK -10-
Create an Anchor Link insert the cursor in the content area where the image will be placed select the Anchor icon from the toolbar type the name of the anchor you are making in the Anchor name field select OK. Note: Where the cursor was inserted, an anchor icon should appear. type in and/or click the text which will link to the anchor select the Link icon select Link to anchor in the text from the Link Type choose the proper anchor name from the Select an Anchor Name drop down menu select OK Tables use the Insert/Edit Table button to insert tables. The Table Properties pop-up window will appear -11-
Type the amount of Rows and Columns you desire Input the width of the table in the Width field Then hit OK There are a few things to keep in mind before saving your webpage: Option Input Format Menu settings Meta tags Revision information. Authoring information Description By default Raw HTML is automatically selected. Other options such as: Filtered HTML, Full HTML, and PHP code, may alter the HTML code that is generated in the body of the page. To prevent unwanted changes, leave the Raw HTML option selected. Raw HTML leaves the code in raw format. Within the menu link title, input the text you would like to appear within the primary links (e.g. menu). Both the title of the page and the menu link title should be the same.. No additional steps are needed. Drupal by default provides the necessary meta tags. This option allows you to backup any changes you make to your pages. Create new revision box must be checked off in order to save any content. Further descriptions of the change can be added in the log message field. By default new pages will be assigned to person who created the page. You can change the name to someone else s with access to site. -12-
Publishing Options To have a page published for the end user to see, the published checkbox must be checked. To hide a page and have it only viewable to an administrator/editor, the published box must be unchecked. The Promoted to front page and Sticky at top of lists are options only used for blogs and are not compatible with webpages. URL path settings The defaulty option for automatic alias is checked off. Thus, Drupal will assign a URL address automatically based on the title of the page. To create your own alias, uncheck this option and provide the address to page, excluding the domain and your departments home address (e.g., www.pace.edu/its/). Printer, email and PDF Comment settings Display a printer-friendly icon and/or email icon on a page for visitors by placing a checkc next to your desired optioins: Show link, Show link individual comments, and Show Printer-friendly URLs list. Uncheck Disabled, Read only, and Read/Write to prevent visitors from commenting on pages. URL redirects Create a list of URL redirects to point to the page you re on. View all Published and Not Published (Non-Published) Pages All content, published and non-published, are listed on the content page. click Content Management from the admin toolbar select content and click list The content Pages are listed starting from the most recently published down to the oldest. To view the desired page click on the title To make changes to the listed page: click edit link -13-
Show Only Items Where In this section you can filter by status (published and not published) or type (Page and Webform) and by selecting additional options under each item. Note: Under the status drop down list, discard the following option since they are not being used by Pace s site: Promoted to front page, demote from front page, Make sticky, Remove stickiness, Update URL alias, Delete meta tags Update Options Change the status (Publish, Not Publish, Delete) of the Content by selecting. from the drop down list Note: When publishing a page, the URL alias may change. Primary Links The primary links allow you to rearrange click Site Building from Admin Toolbar select Menus and click List Menus click Primary Links or the name of the website displayed You will be able to perform the following steps: rearrange the Menu Items by dragging it up, down, left and right -14-
click Save configuration -15-