[PDF] Apprendre à utiliser le CMS Drupal pas à pas | Formation informatique

(1)

Drupal User Guide

Cal Poly Specific Information

(2)

Login to Drupal

Websites in Drupal are managed by viewing the Web site, then logging into it.

1. Open a web browser (e.g. Internet Explorer, Firefox, Safari, or any other modern browser) – Firefox is recommended

2. In the address bar, key in the website URL and press Enter on the keyboard to make sure that the website appears

3. Then, add “/user” without the quotes to the end of the URL in the address bar. It should look like this: http://[sitename]/user

4. Press Enter on the keyboard to submit the URL in the browser (this URL may be bookmarked for future use)

5. Key in your user name, which is your full Cal Poly email address – e.g.

khischke@calpoly.edu – and your Drupal password. If you don’t have a password or you want to change your password, select the Request New Password tab put in your full calpoly username, and select the E-mail new password button.

A new password will be emailed to you by the system.

6. A temporary security certificate may need to be accepted in order to login into the site. This is temporary. We are working to fix this.

(5)

3

7. If the previous steps were done correctly, an Administer Site menu should appear on the left side of the web page. This is what will be used to manage and maintain this Drupal website.

Change your Drupal Password

You can change your Drupal Password anytime once you are logged into your Drupal account. If you don’t have a password, see the login instructions above to request a new password.

(6)

4

Creating Pages

Create a New Page

To create a new page, go to the Administrative menu item Create content > Page

You’ll be presented with the Title, the Editor for adding content to the body area of a page, and other settings. Key in content according to the following:

• Title – This appears at the top of the page content and is the first level heading for the page. The title should clearly describe the purpose of the page content. The Title will also be used to automatically name the page (node) unless this feature is specifically

overridden (which may be necessary if an existing Web site is being migrated into Drupal).

Setting up the URL path (alias)

Drupal uses URL aliases to identify the nodes (pages).

Important: The URL alias needs to be set up correctly as it is difficult to modify once it has been created.

Use Default URL - If you are creating a new web page. or

Use Custom URL - If a more organized path is desired, such as one resembling the folder and subfolder system of a typical website and/or you are migrating a page from an existing web site.

Use Default URL

By default, Drupal creates a URL alias automatically for a page based on the title of the page. Let Drupal create the alias when there is no corresponding page (existing web page eg. .html or .htm) being migrated from an existing Web site (this is a new web page).

To have Drupal automatically provide a URL alias, scroll down to the bottom of the page, and ensure that the Automatic alias box is checked. The alias is created when the page is saved, and it will appear in the URL path settings box on return to the edit tab of that page.

(7)

5 If the title is set as:

The automatic alias will appear as:

All pages created using an automatic alias will have a path resembling the example above (content/page-title).

Use Custom URL

Use this method if a more organized path is desired, such as one resembling the folder and subfolder system of a typical website and/or you are migrating a page from an existing web site (Custom URL aliases are necessary to prevent outside links from breaking).

For example, if the title is set as:

A custom URL alias could be entered as content/example/service_desk_example. Notice a faux subfolder name was added.

Uncheck the Automatic alias checkbox within the URL path settings box. If an existing Web page filename and path is described as:

service/computing_support/antivirus_info/index.html then the Drupal URL Alias should be:

content/computing_support/antivirus_info/index

Custom URL Guidelines:

• Always add “content/” before any custom alias. • Do not add a file extension such as .html or .htm • Limit the filename to two or three words

• Use only lowercase letters, numbers, dashes, or underscores. Do not use spaces or other special characters for this name.

(8)

6

• If the original file name used a space, replace the space in the URL alias using the code %20 for each space.

• For nodes (pages) that represent .html or .htm files that are not located within folders, simply use content/ followed by the alias of the page.

o For example, support.html will become content/support

• For nodes (pages) that represent .html or .htm files within subfolders, the path must include the folder and subfolders in which the page is located.

o For example, support/computing_support/faq.html will become content/support/computing_support/faq

Mimicking the original path to the .html or .htm file name is necessary because Drupal doesn’t use a folder structure to store pages (nodes). Instead, all of the pages appear to be stored in one “flat” location (see What pages can I access? when logged in to Drupal). Cal Poly’s Drupal uses URL Aliases to make a faux path so that a URL looks like it came from a folder on a web site. This can be used to help organize pages and have them sort in a list using the faux folder path in the URL Alias.

By naming URL Aliases in a way that mimics the original .html file the Drupal Web server can receive a request for the original filename. For example, in the .html URL

“servicedesk.calpoly.edu/support/antivirus /index.html”, the ".html" will be dropped, and “servicedesk.calpoly.edu/” will be replaced with "content/". Now Drupal can read the alias and find the matching page (node).

Delete a Page

Navigate to the page you wish to delete. Click Edit tab. Scroll to bottom and select the Delete All Revisions button. Warning! This cannot be undone. You will not be able to revert to a previous version.

Working with Content

Work with Existing Pages

To see the content that the user can access, Click on What pages can I access? Four main tabs (I created, I last modified, I can edit, I can view) with three sub-tabs (Published, Unpublished, All) will appear at the top of the page.

(9)

7

• I created – displays all nodes (pages) created by the user.

• I last modified – displays nodes (pages) recently edited by the user (even though the node may have been created by another user).

• I can edit – shows every node (page) that the user’s role (e.g. advanced author) has access to edit.

• I can view – displays every node (page) created for the site including the nodes that the user’s role does not have permission to edit (will be view only).

Sub-tabs:

• Published– displays all nodes (pages) in which the Published check box (in the Edit mode) was checked.

• Unpublished – displays nodes (pages) in which the Published check box (in the Edit mode) was NOT checked.

• All – shows every node (page) published and unpublished page (recommended).

Editing Page Content

To edit or add content on a page, select edit tab, place the cursor within the Body: Editor content area window and type in the desired text. Refer to Appendix B - Using the Editor for

information about formatting and using styles. If editing using HTML is desired, click the Source button in the toolbar.

Menu Items

A menu item is created when the node is first created.

When editing a node: Delete this menu item must be checked to delete a link that was previously placed on a menu.

Page Titles and Breadcrumbs

Page Titles and Breadcrumbs can be optionally suppressed. There must always be at least one page title on every web page (for accessibility reasons). If the page title is suppressed using a special character as described below, you must make sure that it is first readable text item in the body of the page.

The Title field on a node (page) is used to control the suppression of both the page title and breadcrumb:

(10)

8 # - turns off h1 title (main title at top of page) @ - turns off breadcrumbs only

The special characters will appear in the related menu item for the node (page). In order to prevent this, uncheck “Automatically update Menu Title” (do this before adding special character to the title).

The menu roll-over tool tip comes from the page title upon first creation of the new node (page). The menu roll-over tool tip can be modified to remove special character: site building > menus, edit menu item description or delete menu link in page view then recreate it.

To fix roll-over text go to menu item and edit description. The description will update every time the page title is modified.

Tips for Adding Content

• Right-click in the Body: (content area of the Editor) to bring up the following functions: Cut, Copy, and Paste

• Right-click on a link within the content area to bring up these additional functions: Edit Link, Unlink.

• Click the Maximize the editor size icon in the editing window for a larger viewing area

• A page is considered to be in draft mode when it is saved but not published. Unpublished pages have a pink shading. See Publishing below.

• Remember to click the Save button at the bottom of the page often during your editing. This will create versions you can revert to if needed.

Check Spelling

• Within the Edit view of a page, type in the desired text • In the Editor toolbar, click the Check Spelling icon

(11)

9

• The Spell Check pop-up box will appear and display all misspelled words in the page. • Click on the word and choose its correct spelling in the Suggestions text field

• If the word is not misspelled, but still has a red zigzag line under it, choose Ignore or Ignore All to remove the line

Revisions

Revisions are created every time a node is modified and saved. You can view and activate previous revisions if desired. To activate a previous revision:

1. Select the node from Administer » Content management » Content (or navigate to the page you want to revise)

2. Click the Revisions tab

3. View revised page and confirm this is the version you want to revert to 4. Select the revert link next to the previous version to reinstate

Click Revert to confirm your request

Images

Begin in the Edit view of the page.

Upload an Image

1. In the Body: of the page, in the editor toolbar, click the Image icon

2. In the Image Properties pop-up window that appears, click the Browse Server icon 3. The File Browser pop-up window will appear. The File Browser houses all content

uploaded within the Image tool

4. Within the Navigation pane (on the left), select the images folder

5. Click the Upload button (upper left of window). A file browsing tool will appear below the top buttons

6. Click the Browse… icon to open file explorer

7. Within the file explorer, select the image that will be inserted

8. Press the Open button to insert the image path into the file browsing tool

9. Click the Upload button that appears below the file browsing tool (not the upper left). 10. The image will be added into the images folder (shown in File name pane)

Insert the Image

(12)

10 2. In the toolbar, click the Image icon

3. In the Image Properties pop-up window that appears, click the Browse Server icon 4. Within the Navigation pane (on the left), select the images folder

5. Select the image that you want

6. Click Insert File. The image path will appear in the URL text field in the Image Properties window

7. Add text describing the image in the Alternate Text field 8. Click OK

9. (Optional) Position the image left or right to allow text to wrap around it a. Click on the image to select it

b. In the toolbar, click the Style dropdown menu to expand it

c. Choose the Image on Left, Image Centered or Image on Right style to position the image left or right

Insert an Image with a Caption

1. Place the cursor in the content area where the image will be inserted

2. In the toolbar, click the Templates icon

3. Select the Image w/caption template floated left or right as desired

4. To replace the sample image, right click on the image, select image properties 5. In the Image Properties pop-up window that appears, click Browse Server 6. Within the Navigation pane (on the left), select the images folder

7. Select the image that you want

8. Click Insert File. The image path will appear in the URL text field in the Image Properties window

9. Add text describing the image in the Alternate Text field 10. Click OK

11. Click on the sample caption text and type in a caption Cal Poly Best Practice: don’t use Border, HSpace, VSpace or Align

Links

In the Edit view of the page:

Create an Internal Link

Making an internal link requires linking from a piece of text or from an image in a web page (node) to another page (node) within the Drupal site. To create an internal link:

(13)

11 1. Select the text or image that will have a link

2. In the toolbar click the Link icon

3. In the Link pop-up window select Link Type Drupal

4. Key in part of the page (node) name, and the system will display the page names that contain the string you keyed in.

5. Select the desired page (node) from the list 6. Click OK

Create an External Link

An external link creates a link to an external website or a file in Drupal (such as .doc, .pdf, .jpg, etc.).

To create a link to a file:

1. Select the text or image that will have a link

3. In the Link pop-up window select Link Type URL

4. Click the Browse Server icon to open the File Browser window.

5. Select the desired file (if the file has not yet been uploaded, read Upload an Image or Upload a File in the next sections)

6. Click Insert File. The path to file will appear in the URL text field of the Link pop-up window

7. Click OK

To create a link to a website:

1. Select the text or image that will have a link

3. In the Link pop-up window select Link Type URL 4. Select proper protocol (most often http://).

5. Type or paste the URL in the URL field(eg. http://www.calpoly.edu or www.calpoly.edu), then click OK

Edit an Existing Link

• Select the linked text, then, In the toolbar click the Link icon and change the properties

Delete an Existing Link

• To remove a link, select the linked text or image, and click the Unlink icon in the toolbar.

(14)

12

Create an Email Link

1. Select the text that will be linked

3. In the Link pop-up window, select Link Type E-mail

4. Fill in the email address. Subject and message body are optional. 5. Click OK

Create an Anchor Link

1. Place the cursor where the anchor will be inserted

2. In the toolbar, click the Anchor icon

3. In the Anchor name field, type the name of the anchor that will be created 4. Click OK. An anchor icon will appear where the cursor was placed

5. Key in and/or select the text that will link to the anchor, and click the Link icon 6. In the Link pop-up window, select the Link Type Link to anchor in the text

7. In the Select an Anchor By Anchor Name drop down menu, select the appropriate anchor name (should be the same as the anchor name in step 3)

8. Click OK

Link Checking a Site

Checking the Links Report

To check for broken links on a site

1. Go to Administer » Reports » Broken links 2. Check the broken links report for broken links

• URL – The URL for the broken link (bad link reference)

• Response – code returned from a web server referring to the broken link. Some of the more common web server response codes are listed below

a. 404 – The page could not be found by the web server. The link will need to be corrected

b. 403 – The page is Forbidden and the web server is refusing to respond to the request. The link will need to be corrected.

c. 301 – The page has been permanently moved and a new redirection URL is available. The link will need to be corrected to point to the new URL.

d. 5XX – Codes such as 500, 501, 503, etc. indicate cases in which the server is aware that it has encountered an error or is otherwise incapable of performing

(15)

13

the request. The link may begin working again later, however this depends on the

• Error – A brief summary of the response code meaning • Operations – Several possible items are listed for this:

a. Edit link settings – allows you to see when the link was last checked and to request that the link be rechecked

b. Edit node # – allows you to edit the node (page) on which the broken link was found

c. Edit block # – allows you to edit the block in which the broken link was found.

3. If a broken link is found

4. Click on edit node # in the Operation column to open the page in the edit mode 5. Look at the top of the page for the reference to the broken link

6. Make updates as necessary

If an external link has been fixed, go to Edit link settings under Operations and go to

maintenance and check the box labeled re-check link status to have the links re-checked within the next hour (by default, external links are checked on a weekly basis. Checking this box allows the link checker to check the link when the next link check job is run which is hourly.)

The Yellow Link checker Highlight at the Top of a Page

If a bad link reference is found on a page, a yellow highlight box will be displayed at the top of the page that contains the reference when an authenticated user (logged in user) is viewing the page. The information provides only the URL for the broken link; it does not tell where on the page the broken link was found. The Drupal Link checker tool is useful for identifying pages that have broken links on them.

Finding Broken links within a Drupal Page

To identify where a broken link is located on a page, a useful and simple tool for this is the LinkChecker add-on (unrelated to the Drupal Link checker) for the Firefox web browser. This tool checks links on a page one page at a time. Another Firefox add-on for link checking is Pinger, which operates similar to the Linkchecker add-on.

Determine When the Link Checker Runs on a Site

The Drupal Link checker is a program that checks for broken links on a site and runs

approximately once per hour. The time of the run may vary by site so that the Drupal system doesn’t overload with every site trying to run a link check simultaneously. The Drupal

Linkchecer program checks internal site links every hour and checks external site links only once per day.

(16)

14

To determine when the Link checker program last ran on a site 1. Go to Administer » Reports » System information

2. Look for Cron near the top of the report. It will have next to it a date and time which indicates when the Drupal Link checker was last run. It will run again for the site approximately one hour after the time reported.

Notes About the Drupal Link checker

You may see a node with only one link checked even though you know additional broken links are on the page. This situation could occur because the Drupal Link checker checks links based on a list of links that it gathers from the site rather than checking them based on a page-by-page basis. The Drupal Link checker may need to make several passes to completely link check an entire site.

Tables

Tables can be created by using the Insert/Edit Table button. Tables can be edited by right clicking within the table.

For useable examples of accessible tables, copy tables directly from the sample data tables page that came with your website.

Add Shading to Table Rows

It is often helpful to alternately shade table rows to enhance the contrast of the rows. This eases the readability of a table. To do this:

1. Go into edit mode

2. Place the cursor into the table row that you want to shade

3. At the bottom of the editor window, select the tr in the quick tag selector (this selects the entire table row). Alternately, you can select each of the cells in the row by clicking and dragging across all cells in the row.

4. Select Shade Row from the Styles drop-down menu

Remove Link Underlining within a Table

Occasionally you will want to remove the underlines from text links within a table in order to reduce visual clutter.

1. Select the entire table: place cursor in the table, then at the bottom of the editor window, select the table tag in the quick tag selector

2. Select No Link Lines from the Styles drop-down menu

3. You must use the view tab to see the results (links in the table will be colored green and will not use an underline)

(17)

15

Editing Files

Use only filenames with no spaces or capital letters. Not only is this a best practice for web publishing, but some servers don't read files with spaces in them and links will break.

To work with files, go to My Account and select the File Browser tab.

Upload a File

Several file types can be uploaded including Word, Excel, PowerPoint, PDF, Text and Flash 1. Select My Account in the Administer Site menu on the left-hand side

2. Hold down Ctrl Key and Left click on the file browser tab 3. Click on the new tab

4. Within the Navigation box, select the documents folder (if you get asked “refresh the current directory?” Click OK)

5. If a more organized folder system is desired, additional folders and subfolders can be created:

1. Click Manage directories. A text field will appear below entitled Subdirectory name

2. Type in the desired folder or subfolder name (location depends on which folder was selected within the Navigation box

3. Click Add

6. After selecting the preferred folder, click Upload. A text field entitled File will appear 7. Select the Browse… button

8. With the file explorer open, select the file to upload 9. Press Open. The explorer will close

10. With the path in the File text field of the File Browser window, click Upload File is now available

Delete a File

Use this procedure to delete an existing file in the File Browser (e.g. .pdf, .doc, .xls, .jpg, etc.) 1. In the Navigation box, find the folder or subfolder in which the file that will be deleted is

located

2. Select the file that will be deleted

3. Click Delete from the top row of buttons 4. In the window appears, click OK

(18)

16

Update / Replace a File

Use this procedure to replace/overwrite an existing file in the File Browser (e.g. .pdf, .doc, .xls, .jpg, etc.) with a newer version (same file name).

1. In the Navigation box, find the folder or subfolder in which the file that will be updated is located

2. Click Upload from the top row of buttons. A file browsing tool will appear below the top buttons

3. Click the Browse… icon to open file explorer

4. Within the file explorer, find and select the desired file and select the Open button to insert the file path into the file browsing tool

5. Click the Upload button associated with the file browsing tool 6. The file will appear within the File name box

Move a File

Files cannot be moved within these folders. They must be deleted (make sure you have another copy before deleting) and then upload into the new location.

The Basics on Blocks

What Blocks Are and How They Work

• A Block is a moveable group of content on a Web page. E.g. A menu block, a “widget”, a hyperlinked list of content, an image, etc.

• Blocks are moved around on a page by assigning them to a region (an area) that is pre-defined in the Theme (e.g. the Cal Poly Web theme).

• Blocks can allow the content inside them to appear in many pages while being updated from a single location, making it easy to maintain consistency.

• A special block called a Menu block will always reside within a Block, but a Block can contain content other than Menus.

Why Blocks are used:

• To establish the layout and content inclusion of a page.

• Help provide a measure of consistency across a web site (e.g. department name, contact information, menus).

• Provide additional functionality (e.g. calendar, announcements, etc.) • Provide structure and readability to content.

• To permit content access based on selected pages or by user role. (e.g. Individual Blocks can be configured to display or not display on selected pages or display or not display according to a user’s role).

(19)

17 How Blocks are created:

• Some are created automatically by modules.

• Others may be created manually Administer » Site building » Blocks » Add Block Adding Content In a Block

To edit content in a block, follow these steps: 1. Go to Administer > Site building > Blocks 2. Under the List tab, choose a theme to work under

3. Find the block that will be edited, and click configure in the Operations column 4. Editing or adding content can be done in the Editor content area on the page 5. Click Save block

6. If further instruction on the Editor or adding content is needed, see Appendix B - Using the Editor or Adding content above

After a block is assigned to a page, you may be able to bring up an edit block option by hovering over the block itself.

Tip: Never Delete a Block. Rather, hide the block by selecting the option Show on only the listed pages. Administer » Site building » Blocks » Configure block

Migrating Content into Drupal from an existing web site

There are various ways to move content from existing web sites or documents into Drupal. In general, migrating content consists of either copying from a text editing program, or copying the HTML code directly. In almost every case, links, tables, forms, and other elements will need to

(20)

18

be checked for correct style and formatting. Because Drupal handles links differently than other HTML editors, links will need to be recreated once the content is migrated in, including links to images.

Web Page Content

The following methods can be used to move content from existing web pages. The method used depends on how “well formed” the HTML code and content is. This means that content is marked up semantically and styles are applied appropriately. Each of the following methods has quirks that will affect how well the content is copied in. Use option 2 if content is being migrated from a site that uses the Cal Poly Web template and the content has passed an Accessibility review.

All methods operate on the assumption that the Drupal page is empty there is no content in the Drupal page.

Option 1 – Copy from Text Editor 1. View the web page in a Web browser

2. Highlight the content by clicking and dragging with the cursor 3. Go to Edit > Copy

4. Open a text editing program (TextPad, TextEdit, NotePad, etc.) 5. Go to Edit > Paste

6. Go to Edit > Select All 7. Go to Edit > Copy

8. Navigate to the page in Drupal

9. In the Body: (Editor content area), select the Paste as plain text icon, and click Paste (note, using Paste as plain text does a better job of preserving paragraph tags)

10. Use the Editor toolbar to mark up the content with styling, formatting, and links 11. Click Save

Option 2 – Copy HTML from Dreamweaver

From Design View

1. Open the Web page in Dreamweaver 2. Make sure the page is in Design view

3. Highlight the content by clicking and dragging with the cursor 4. Select Edit > Copy

5. In Drupal, navigate to the new page

6. In the Body: (Editor content area), select the Paste as plain text icon, and click Paste (note, using Paste as plain text does a better job of preserving paragraph tags)

(21)

19

From Code View

This method preserves most tags and class assignments. However links will need to be updated. 1. Open the Web page in Dreamweaver

2. Make sure the page is in Design view

3. Highlight the content by clicking and dragging with the cursor (shortcut: if you want all content selected from the “content” region, click in the body area, then while holding the <ctrl> key down press the <A> key.)

4. Switch to Code view, the content should already be highlighted 5. Select Edit > Copy

6. In Drupal, navigate to the new page

7. In the Editor, click the Source icon which allows editing of the HTML code 8. Right-click in the window, and click Paste

9. Select the Source icon again to switch back to the text mode

Option 3 – Copy HTML Source from Browser

This option can be complicated by the selection of incorrect HTML tags. Unpredictable results may occur that require editing of the HTML code.

1. Open the Web page in a browser

2. Right-click on the page, and then click “View Source” (exact wording will vary among browsers)

3. Highlight all of the HTML tags in the content area by clicking and dragging with the cursor

4. Go to Edit > Copy

6. In the Editor, click the Source icon which allows editing of the HTML code 7. Right-click in the window, and click Paste

8. Select the Source icon again to switch back to the text mode

9. Use the Editor toolbar to mark up the content with styling, formatting, and links 10. Click Save

Option 4 – Copy Content from Browser 1. Open the Web page in a browser

(22)

20

2. Highlight the desired content by clicking and dragging with the cursor 3. Go to Edit > Copy

5. In the Editor, select the Paste as plain text icon, and click Paste

6. Use the Editor toolbar to mark up the content with styling, formatting, and links 7. Click Save

Notes

• Copying content into a text editor will remove all HTML mark-up, and there will only be raw text. Once it is pasted into the editor, all styling, formatting, and links must be recreated.

• Copying out of Dreamweaver is one of the best methods to migrate content provided that the content uses the standard Cal Poly web template styles. The downside to this method is that it could bring with it HTML tags, style attributes, and formatting that could produce inconsistencies in Drupal, or cause the content to not be accessible or XHTML compliant.

• All URL links to items on the local site will need to be rebuilt, including links to images. Links to items that have never been on the local site should copy over correctly with the following exception: links that have spaces in them require the space to be converted to “%20” for the link to be usable in Drupal.

MS Word Content

Drupal provides the ability to copy content from Microsoft Word into the Editor. To copy content from Word into Drupal, follow these steps:

1. Open the Word document that the content will be copied from 2. Select content by clicking and dragging with the cursor 3. Go to Edit > Copy

4. In Drupal, open the page and view it in the editor 5. Click the Paste from Word icon

6. Right click in the window, and click Paste 7. Click OK

8. Clean up content and formatting if necessary Here are a few tips for copying from Word documents:

• Simplify data tables in Word before copying into Drupal • Do not copy any tables that have been used for layout

• Mark up content in Word with headings, paragraphs, lists, etc. before copying into Drupal. Content will maintain its markup when imported from Word.

(23)

21

PDF Content

Copying content from a PDF into Drupal is similar to Option 1 in the Web Page Content section. 1. Open the PDF document

2. Highlight the content by clicking and dragging with the cursor 3. Go to Edit > Copy

4. Open a text editing program (TextPad, TextEdit, NotePad, etc.) 5. Go to Edit > Paste

6. Go to Edit > Select All 7. Go to Edit > Copy

9. Right-click in the editing window and click Paste

10. Use the editor toolbar to mark up the content with styling, formatting, and links 11. Remove extra carriage returns if needed

(24)

22

Appendix A - Drupal Terms

Pages and Nodes

• Node (Page) – A general collective term for all content types. A node is the core element of a Drupal “web page” and the name of the node is used to retrieve a Web page in a default Drupal installation. Similar to the content region of a web page, a node is used to store content (text, images, etc.) for later assembly into a web page. In general, a node does not contain navigation, header, footer or other such page elements. It only contains the body content for the page. A node can usually be correlated to a Web page, though this is not always the case.

In a default Drupal implementation, a Drupal web page displayed in a Web browser would have the node number reference contained in the URL (e.g.

http://www.servicedesk.calpoly.edu/node/194). This can be confusing to users, so Cal Poly has implemented a URL alias feature (described below) to give nodes a friendlier name when displayed in a web browser.

• Content – Any sort of material published in a Drupal site such as text and images

• Content Type – The form that is used to create a particular type of content. The standard content types in Cal Poly’s Drupal 6 are:

Page - A page is best suited for static information – the kind that doesn’t change very often such as an "About us" section of a website. The majority of pages in most CalPoly sites will be created using this content type.

Webform - Create a new form or questionnaire accessible to users. Submission results and statistics are recorded and accessible to privileged users.

Story and Book – although visible in some roles these are not recommended at CalPoly at this time.

• URL Aliases – Another way to name a node so that the URL in a web browser appears like a conventional web page. Instead of using the node number to retrieve a web page from Drupal, a URL alias can be assigned to a node then used to reference said node (e.g. http://www.servicedesk.calpoly.edu/content/about)

• “Flat file structure” – This is not specifically a Drupal term. However, Drupal does not use a file folder structure to organize nodes the way tools like Dreamweaver use file structure to organize web pages. Often a site’s navigational hierarchy (menu structure) is used to determine how web pages will be organized as files and folders. Drupal instead stores nodes in one space which looks like they are all in the root folder area of the site. This can take some getting used to with larger sites, and tools, such as the URL aliases, are available in Cal Poly’s implementation to help work with this.

• Themes – Themes allow you to change the look and feel of your Drupal site. The Cal Poly web template theme is the only theme available for use on websites, although another theme is being used for the administrative interface.

(25)

23

• Blocks – This is another storage area for content that can be assigned to one or more nodes for display with a web page in a browser. For Dreamweaver users, blocks can be thought of as library items, though blocks are much more powerful and versatile. Blocks are assigned to themes.

A Block is a box of content (such as a navigation menu) that can be easily placed into different regions (such as footer or sidebar) within a Drupal theme. The block of content will only appear on pages that use both the theme and region in which the block was placed. Blocks can allow the content inside them to appear in many pages while being updated from a single location, making it easy to maintain consistency. Blocks can also be configured to display or to not display on any combination of pages.

• Menus – Site navigation is contained in menus and can be setup so that they are

automatically updated if a change is made to the site hierarchy or to a page (node) name. Menus are actually contained inside of blocks. Menus cannot be placed into nodes. This will be explained more fully later.

Site navigation is contained in menus and can be setup so that they are automatically updated if a change is made to the site hierarchy or to a page (node) name. Menus are actually contained inside of blocks. Menus cannot be placed into nodes.

• Modules – Modules are plug in applications for Drupal,There are thousands of modules available for use in configuring Drupal – CalPoly’s implementation of Drupal comprises a unique combination of these modules. Some we’ve chosen are CAPTCHA, Link Checker, the WSYWYG editor CKeditor, and Webforms.

• Multi-site – Allows for multiple unique sites using a common Drupal code base with each site having individual configuration, user, and role profiles.

• WYSIWYG editor – Stands for What You See Is What You Get editor. The

presentation in the editor displays pretty much like what it will look like within the web page.

• CKeditor – Cal Poly’s Drupal implementation is using the CKeditor for its WYSIWYG tool. There are many different editors. Cal Poly chose CKeditor for its robustness and configurability.

• Roles – User profiles (individual users) are assigned roles which are assigned

permissions which determine access to resources. Roles define the authorization of a user for a site and determine what will be visable.

(26)

24

Appendix B - Using the Editor in Drupal

What Does WYSIWYG Mean?

WYSIWYG is an acronym for “What You See Is What You Get.” The content editing

interface in Drupal is called a WYSIWYG editor and displays what the page will look like when it is viewed in the browser. To use the Editor, select on a node (page) within What pages can I access? and select the Edit tab.

The Editor Toolbar

The following is a list of all the buttons and their functions in the WYSIWYG Editor toolbar.

Maximize the Editor Size Edit HTML Check Spelling Cut (Ctrl + X) Copy (Ctrl + C) Paste (Ctrl + V) Paste as Plain Text Paste from Word Undo (Ctrl + Z) Redo (Ctrl + Y) Find Replace Select All (Ctrl + A) Remove Format Bold (Ctrl + B) Italic (Ctrl + I) Subscript Superscript Ordered List Unordered List Decrease Indent Increase Indent (up to 4) Blockquote

Align Center Align Right

Format Dropdown Menu

Styles Dropdown Menu Create Div Container Link Unlink Insert/Edit Anchor Insert/Edit Image Insert/Edit Flash Insert Table Horizontal Rule Insert Special Character Insert Teaser Break Content Templates Show Blocks

Formatting

• Content Templates offer most options you may need when creating a new web page and usually the best place to start.

• Use the Format drop-down menu to distinguish your text elements between headers and paragraphs.

(27)

25

o Normal (DIV) – Wraps selected text with a <div> element o Heading 1 – Page titles

o Heading 2 – Section headings o Heading 3 - Sub-section headings o Heading 4 - Sub-section headings

• The Unordered List and Ordered List buttons create HTML markup code that is necessary for a bulleted or numbered list.

• Use the Bold and Italic buttons to strengthen or emphasize certain elements of text

• Use the tag selector at the bottom of the Editor window to accurately select all content within that tag.

• Remove Format removes these attributes 'class, style, lang, width, height, align, hspace, valign' and these tags 'b, big, code, del, dfn, em, font, i, ins, kbd, q, samp, small, span, strike, strong, sub, sup, tt, u, var'

Editor Styles

Using the editor styles in the dropdown menu will ensure that the content is being properly styled. The following is a list of the styles that can be used and how to apply them:

• Gold – applies a gold background to the elements within the left and right column content areas

• Imageleft – floats an image to the left • Imageright – floats an image to the right

• inside – allows ordered and unordered lists to wrap around an image that is floated left

• nolinklines – removes underlines from links when presented in a table. Use only for elements that are presented in a list format within a table. Apply this class to the <table> element.

• quicklinks – This styles a list of navigation items into a quicklinks menu. To use this style properly, apply the "Quicklinks" style to the <h2> and the <ul> in the menu.

• iconlinks - This styles a list of navigation items into a iconlinks menu. To use this style properly, apply the "Iconlinks" style to the <h2> and the <ul> in the menu. • Shade Row – applies a shaded background color to table rows <tr>

• Clear – Inserts a break to vertically separate sets of elements. When inserted between two elements the elementes will always display on two separate lines, vertically separated. This element uses the CSS property clear:both and is automatically included after the column templates provided in the content template button.

(28)

26

Sample Content

To see examples of how the Editor can be used to mark up content and apply styles, view the Sample Content included in your site under the Navigation left hand menu or in Drupal.calpoly.edu under the Sample Content Menu. It contains examples of basic formatting of text, images, tables, forms, and CSS styles. Content can be copied safely from the Sample Content site into other sites.