arts drupal training...arts drupal training live site: training site: table of contents: 1 web...

27
Arts Drupal Training Live site: http://arts.uwaterloo.ca Training site: https://artsonline.uwaterloo.ca/arts/ Table of Contents: 1 Web Browsers ................................................................................................................. 4 2 Web Writing Tips ............................................................................................................. 4 2.1 Links ........................................................................................................................................................................ 4 2.2 “Scanable” Pages .................................................................................................................................................... 4 3 Important Information – Read First ................................................................................. 4 3.1 Save Save Save ........................................................................................................................................................ 4 3.2 Know Who is Editing What...................................................................................................................................... 5 4 Logging In ........................................................................................................................ 5 5 Editing Pages ................................................................................................................... 5 5.1 Basic Editing ............................................................................................................................................................ 5 5.2 Full Screen Editing ................................................................................................................................................... 6 5.3 Editing Existing Pages .............................................................................................................................................. 6 5.3.1 Editing the Title of a Page ............................................................................................................................... 6 5.4 Adding Links ............................................................................................................................................................ 6 5.4.1 Inserting a Link ................................................................................................................................................ 6 5.4.2 Inserting Email/Mailto Links ........................................................................................................................... 7 5.4.3 Removing Links ............................................................................................................................................... 7 5.5 Creating/Linking to Anchor Links ............................................................................................................................ 7 5.5.1 Creating an Anchor ......................................................................................................................................... 7 5.5.2 Linking to the Anchor ...................................................................................................................................... 8 5.6 Images ..................................................................................................................................................................... 8 5.6.1 Inserting an Image........................................................................................................................................... 8 5.6.2 Image Properties ............................................................................................................................................. 9 5.6.3 Sizing Images ................................................................................................................................................... 9 5.6.4 Banner Images (and ’Featured Photo’) ........................................................................................................... 9 5.6.5 Deleting an Image ........................................................................................................................................... 9 5.7 Formatting Text/Heading Styles ............................................................................................................................. 9 5.7.1 Bold and all CAPS ............................................................................................................................................ 9 5.7.2 Heading Styles ............................................................................................................................................... 10

Upload: others

Post on 26-Sep-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

Arts Drupal Training Live site: http://arts.uwaterloo.ca

Training site: https://artsonline.uwaterloo.ca/arts/

Table of Contents:

1 Web Browsers ................................................................................................................. 4

2 Web Writing Tips ............................................................................................................. 4

2.1 Links ........................................................................................................................................................................ 4

2.2 “Scanable” Pages .................................................................................................................................................... 4

3 Important Information – Read First ................................................................................. 4

3.1 Save Save Save ........................................................................................................................................................ 4

3.2 Know Who is Editing What...................................................................................................................................... 5

4 Logging In ........................................................................................................................ 5

5 Editing Pages ................................................................................................................... 5

5.1 Basic Editing ............................................................................................................................................................ 5

5.2 Full Screen Editing ................................................................................................................................................... 6

5.3 Editing Existing Pages .............................................................................................................................................. 6

5.3.1 Editing the Title of a Page ............................................................................................................................... 6

5.4 Adding Links ............................................................................................................................................................ 6

5.4.1 Inserting a Link ................................................................................................................................................ 6

5.4.2 Inserting Email/Mailto Links ........................................................................................................................... 7

5.4.3 Removing Links ............................................................................................................................................... 7

5.5 Creating/Linking to Anchor Links ............................................................................................................................ 7

5.5.1 Creating an Anchor ......................................................................................................................................... 7

5.5.2 Linking to the Anchor ...................................................................................................................................... 8

5.6 Images ..................................................................................................................................................................... 8

5.6.1 Inserting an Image ........................................................................................................................................... 8

5.6.2 Image Properties ............................................................................................................................................. 9

5.6.3 Sizing Images ................................................................................................................................................... 9

5.6.4 Banner Images (and ’Featured Photo’) ........................................................................................................... 9

5.6.5 Deleting an Image ........................................................................................................................................... 9

5.7 Formatting Text/Heading Styles ............................................................................................................................. 9

5.7.1 Bold and all CAPS ............................................................................................................................................ 9

5.7.2 Heading Styles ............................................................................................................................................... 10

Page 2: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

2

5.7.3 Formatting Text ............................................................................................................................................. 10

5.8 Spell check ............................................................................................................................................................. 10

5.8.1 Check Spelling as You Type ........................................................................................................................... 10

5.8.2 Manual Spell Check ....................................................................................................................................... 11

5.9 Pasting from Word ................................................................................................................................................ 11

5.10 Tables .................................................................................................................................................................... 11

5.10.1 Table Style ..................................................................................................................................................... 11

5.10.2 Insert a Table ................................................................................................................................................. 11

5.10.3 Edit Content in a Table .................................................................................................................................. 13

5.10.4 Inserting Images in a Table ........................................................................................................................... 13

5.10.5 Move Around the Table ................................................................................................................................ 13

5.10.6 Resizing an Existing Table .............................................................................................................................. 13

5.10.7 Edit Table Structure ...................................................................................................................................... 14

5.10.8 Text alignment/Line Spacing/Word Wrap in Cells ........................................................................................ 14

5.10.9 Deleting a Table ............................................................................................................................................ 15

5.11 Preview/Saving/Discarding Changes ..................................................................................................................... 15

5.11.1 Preview .......................................................................................................................................................... 15

5.11.2 Saving ............................................................................................................................................................ 15

5.11.3 Discarding Changes ....................................................................................................................................... 15

6 Reverting to Past Versions of Content/Pages ................................................................. 15

7 PDF Files ........................................................................................................................ 16

7.1 Upload and Link to PDF Files ................................................................................................................................. 16

7.2 Remove PDF Files .................................................................................................................................................. 16

8 Creating New Pages/Content ......................................................................................... 16

8.1 Content Types ....................................................................................................................................................... 17

8.2 Creating a New Web ‘Page’................................................................................................................................... 17

8.2.1 Menus ........................................................................................................................................................... 17

8.2.2 Breadcrumbs ................................................................................................................................................. 18

8.2.3 Drafts-Saving Your New Page as a Draft ....................................................................................................... 18

8.3 ‘Featured Photo’ Content Type ............................................................................................................................. 19

8.4 Adding a “News Item” (right side of Arts home page) .......................................................................................... 19

8.5 Adding an “Arts Event” (right side of Arts home page) ........................................................................................ 19

Page 3: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

3

8.6 Creating ‘Admin Staff’/’Alumni Profile’/’Arts In Academics’/’Professor profiles’/’Student Profile’ Content Types

20

8.7 Panel Content Type ............................................................................................................................................... 21

8.8 Creating a Webform .............................................................................................................................................. 21

8.8.1 Creating the Form Page ................................................................................................................................ 21

8.8.2 Creating Fields for Your Form ....................................................................................................................... 21

8.8.3 Viewing Your Form/Form URL....................................................................................................................... 23

8.8.4 Setting an Email Address to Receive Form Submissions ............................................................................... 24

8.8.5 Other Important Form Settings ..................................................................................................................... 24

8.8.6 Form Results .................................................................................................................................................. 24

8.8.7 Clearing Your Form........................................................................................................................................ 25

8.9 Linking to Your New Page/Content ....................................................................................................................... 25

9 Deleting Content ........................................................................................................... 25

9.1 Deleting Pages/News Items/Events ...................................................................................................................... 25

9.2 Deleting Other Content (Featured Photos, Other Content Types…) .................................................................... 26

10 Finding Unpublished Drafts/Content ............................................................................. 26

11 Breadcrumbs ................................................................................................................. 26

12 Inserting Video .............................................................................................................. 26

13 More Help ..................................................................................................................... 27

14 Improvements ............................................................................................................... 27

Page 4: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

4

1 Web Browsers Recommended web browsers are:

Internet Explorer version 10

Safari – newest version

Firefox –newest version

Chrome – newest version

2 Web Writing Tips There are a zillion web writing tips, and we highly recommend taking one of the related courses such as Writing for the

Web offered by the IST SEW program, http://strobe.uwaterloo.ca/ist/services/index.php?service=18

Notes for Writing for the Web are at:

https://sharepoint.uwaterloo.ca/sites/IST/CS/SEW%20Handouts/Web%20Courses/Writing%20for%20the%20Web%20(K

.Teahen)/Writing%20for%20the%20Web.pptx

Two common, important tips are:

2.1 Links The text of all links should be a short description of what the link takes you to:

o E.g. The Drupal Training Manual is available for your use. (NOT: Click here to see the Drupal Training

Manual)

2.2 “Scanable” Pages Always think of the reader who is scanning your page for information

o Use brief point form, bullets when possible

o Avoid using long paragraphs, where readers need to read the entire paragraph to find the information

they need

Use “Scanable” Elements:

o Headings

o Lists

o Short descriptions

o Meaningful links

3 Important Information – Read First

3.1 Save Save Save At the current time, if you are editing a web page, depending on how you browse away from it (Back button vs. clicking

on a menu etc.), your changes are NOT saved and you may or may not be warned of this.

Our recommendations are:

When editing a page, be VERY sure to click Save before browsing to a new page, or your changes could be lost

without warning

Page 5: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

5

Use a separate web browser or web browser window for editing your site and another web browser/browser

window for other web applications or for browsing web pages.

3.2 Know Who is Editing What At this time there is no checking in/checking out of web pages

Know who is responsible for changing which pages, and if this task is shared, let others know when you are

editing a page

If someone else is editing a page at the same time as you:

o Whoever saves first ‘wins’

o Whoever saves second, will receive the following message “This content has been modified by another

user, changes cannot be saved.” and will not be able to save.

4 Logging In Browse to http://artsonline.uwaterloo.ca/arts/ and click on Log in at the bottom right corner of the page.

Enter your Quest/Watiam userid and password and click the Log in button.

5 Editing Pages

5.1 Basic Editing Using the navigation (menus) at the top and/or the left side of the page, browse to the page you would like to

edit

Under the page’s title you will see three links: View Edit Revisions. Click on the Edit link.

Scroll down to the Body section. Generally, all your page changes will take place in the text area of the Body

section

The tool bar will look something like this (we will not recommend use of all buttons):

If you hover over an icon, you will see a description of what it does.

o -Bold, Italic, Underline, Strikethrough

o -bullets, numbering

o - change justification (left, center, right, full)

o -decrease/increase indent

Page 6: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

6

o - undo/redo

o -link

o -unlink

o Some of the other icons will be described in related sections below

5.2 Full Screen Editing

Click on the Maximize button to see your editor in full screen mode

This is very useful if you have a lot of editing to do

To return to the regular view, click the button again, which is now labeled Minimize

5.3 Editing Existing Pages When editing an existing page:

Do NOT change the alias under URL path settings.

Doing so will likely result in in broken links to that page – in other words: changing the original URL can cause

broken links within your site:

5.3.1 Editing the Title of a Page

If the content of the page has changed slightly, you may instead edit the Title at the top of the page (but ensure the URL

does not change):

5.4 Adding Links

5.4.1 Inserting a Link

Browse to the page where you would like to create the link.

Edit to go to edit mode.

Scroll down to the Body section.

Enter the text you would like to link from. **Always use descriptive words for the link (and not an actual URL).

Select the text you would link from.

o To link to an internal web page on your site (allows you to search based on page titles):

(If you are linking to a page on your site, and you aren’t sure what the title is:

Page 7: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

7

Browse to the page.

Click the Edit link.

Note the title of the page.)

Make sure the text you want to link from is selected.

Click the Linkit button.

Click on the text box under Link to:

Begin to type the title of the page you want to link to (and pause to wait for a list to appear)

Click on the appropriate page in the list

Click the Insert button.

o To link to an external web page:

Make sure the text you want to link from is selected.

Click on the Link button

Under URL, type the full URL in the text box (e.g. http://www.uwaterloo.ca)

Click on the Target tab

Choose New Window (_blank) to have the external web page open up in a new window.

Click the OK button.

5.4.2 Inserting Email/Mailto Links

If you enter an email address anywhere in the Body section of your web page, it will automatically turn into an

email link for you.

If you would like to link an email address to a name/other text:

o Type the name/text in the Body section of your pages.

o Select the name/text.

o Click on the Linkit button

o Click on the text box under Link to:

o Type the following in the text box: mailto:emailaddress.xxx.ca (replace emailaddress.xxx.ca with the

appropriate email address)

Note that behind the scenes, in the code, the email address is broken up to reduce email address ‘harvesting’.

5.4.3 Removing Links

Select the text containing the link.

Click on the Unlink button

5.5 Creating/Linking to Anchor Links Anchors let you link to various points on the same page.

Anchors should be used on most long pages that have important info below the top screen view.

5.5.1 Creating an Anchor

Click at the spot on the page you would like to link to (create an anchor).

Press the Anchor button ( ) in the tool bar.

Enter the anchor name (it should be short, concise, and related to the text)

Click OK.

Page 8: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

8

5.5.2 Linking to the Anchor

Select the text you would like to link from.

Click on the link button ( ).

Under Link Type choose Link to anchor in the text.

Under By Anchor Name, choose the name of the anchor you want to link to.

Click OK.

5.6 Images

5.6.1 Inserting an Image

Click at the spot in the Body area, where you would like your image to be placed.

In the Images section (just below the Body section), click Browse and find and select an image on your

computer you want to add. Click the Open button.

Click the Upload button to upload the image to the server.

From the Style drop down list, choose the size you would like your image to be:

o full_width_720: image will be the full width of the content area

o half_width_360 image will be half the width of the content area o quarter_width_180: image will be a quarter of the width of the content area

Under Alternative Text: enter a good description of the image so that screen readers, or those who cannot

view the image have a good idea of what the image is.

Click on the Insert button to add the image to the editor. It will place the image where your cursor was in the

editor.

Right-mouse click the image and select Image Properties

o Hover over captions: It is highly recommended to create mouse over text for the image:

Page 9: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

9

Click on the Advanced tab

Enter the text beside Advisory Title

5.6.2 Image Properties

You can then right-mouse click the image and select Image Properties if you wish to change:

o Position: Under Align, choose Right or Left

o Padding: the spacing around the image (HSpace or VSpace in pixels – usually 8 or 10 pixels is best) o Width, Height (in pixels)

o Border (1, 2, or 3 are usually adequate) Also in Image Properties:

o Under the Link tab, you can enter a URL that you image would link to

Click OK to save your changes in Image Properties.

In some cases, you may need to click the Preview button at the bottom to view your image properly and then

click Save at the bottom to keep your changes.

Note: If the image you uploaded is smaller than the width style (say a 600px wide image and you choose the

720px preset), it will keep the image at 600px width and not stretch it. You can add additional images (unlimited) by clicking the Add another item button in the Images section.

5.6.3 Sizing Images

Although you can resize your images in Drupal as described above, you can also do so before uploading, using software

such as GIMP, Adobe Photoshop, or MS Paint. Most photos should be < 50-60 kb in size for fast page loading, if possible.

5.6.4 Banner Images (and ’Featured Photo’)

There are two types of banner images:

1. The Featured Photo content type is used for the banner on the main home page.

a. It should be 720x230 pixels in size and should be resized before uploading it to the system. If it is not

resized ahead of time, it will be stretched to fit.

b. To insert it, you should follow the instructions in section 8.3 ‘Featured Photo’ Content Type (below).

2. ‘Skinny’ banners on other pages should be 720x165 pixels and can be inserted like any other image

a. The height can vary if necessary

b. Avoid using irregular sized photos at the top of pages (here is an acceptable exception:

https://arts.uwaterloo.ca/alumni-friends/alumni-awards ).

5.6.5 Deleting an Image

In Edit mode:

Click on the image to select it

Press the Delete key on your keyboard

If you also wanted the image removed from the server altogether:

o Click on the Remove button under the image in the Images section below the Body section

Save to save your changes

5.7 Formatting Text/Heading Styles

5.7.1 Bold and all CAPS

Avoid using bold and /or all caps unless it is really vital to clarifying important text on a page.

Use Heading 3 styles (see below) for page subheadings.

Page 10: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

10

5.7.2 Heading Styles

o It is important to use heading styles for headings, for screen readers and search engines.

o Select the text you would like to format as a heading

o Click on the arrow in the Paragraph Format drop down list:

o Choose a heading style. **Note that Heading 3 is generally used for most headings on Arts pages.

In some cases Heading 2 and Heading 4 styles are also used:

o Heading 3 should be used for all main content sections of a page

o Heading 2 can be used for the first heading on a page when the heading is a more expanded version of

menu title (e.g. “Master's and doctoral programs offered in Arts” on page

https://artsonline.uwaterloo.ca/arts/future-graduate-students/programs)

o Heading 4 could be used for anchor links at the top of a page (rare use of Heading 4) (e.g.

https://artsonline.uwaterloo.ca/arts/future-graduate-students/programs)

5.7.3 Formatting Text

Text that is not a heading should be of the Normal style.

You may format your non-heading text similar to the way you do in a word processor.

Select the text you would like to format.

Use one of the appropriate buttons on the tool bar (see 5.1 Basic Editing (above))

5.8 Spell check

5.8.1 Check Spelling as You Type

To have misspelled words underlined in red as you type:

o Click on the right check spelling icon and choose Enable SCAYT

To turn off spell checking as you type:

Page 11: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

11

o Click on the right check spelling icon and choose Disable SCAYT

Right click on misspelled words underlined in red to see some spelling suggestions:

5.8.2 Manual Spell Check

Click on the Check Spelling button

To change a misspelled word to a suggested word

o Select the word that is correct and click Change to

To ignore a misspelled word, click Ignore

To stop the spell check, click the Finish Checking button. Only click the Cancel button if you do NOT want to

keep any of the changes made in the spell checker window.

5.9 Pasting from Word We want to be careful not to paste unwanted MS Word codes into our web pages.

Copy the text from Word

In Edit mode, click at the spot where you would like to paste the content from Word.

Click on the:

o Paste from Word button (if you want to keep some formatting) or

o Paste as plain text button (if you don’t need to keep any formatting)

When prompted, click on the Allow Access button.

You can then format the text you pasted, as needed.

5.10 Tables

5.10.1 Table Style

Currently the look/style of all tables on the site will be consistent:

o Headings have black background and white text

o Body is gray with black text

5.10.2 Insert a Table

In Edit mode, click in the Body area where you would like to insert your table.

Click on the Table button to insert a table

The Table Properties window will open for you to set up how your table will look.

Page 12: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

12

Set the table properties, as appropriate (see details on how below), and click the OK button.

5.10.2.1 Table Size

Enter the number of Rows and Columns your table will have

5.10.2.2 Header row/column:

o Header row: from the Headers drop down, choose First Row (see screenshot below)

o Header column: from the Headers drop down, choose First column

o Header row and column: from the Headers drop down, choose Both

5.10.2.3 Border size/Cell spacing/Cell padding

o Since the table is pre-formatted, you don’t need to set a border or set cell spacing or padding.

5.10.2.4 Table Width:

o To have your table be the full width of the page, set the Width to be 100 and choose percent from the

drop down beside Width. (see screen shot below)

o You can also set your table size in pixels.

o (Table Height does not have to be set.)

Page 13: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

13

5.10.2.5 Table Alignment

Under Align, you can choose to have your table aligned Left, Right, or Centre.

5.10.3 Edit Content in a Table

Content of tables can be edited directly, like any other text.

5.10.4 Inserting Images in a Table

Images must be reasonably consistent in size (e.g. In a photo gallery or list of images and text on the same

page, the images should be the same size)

To insert an image into a table cell:

o Click inside the table cell.

o Follow the instructions above: 5.6.1 Inserting an Image.

5.10.5 Move Around the Table

If you have clicked inside your table, you can use the <Tab> key on your keyboard to move around in your table

(or <Shift><Tab> to move back/up in your table).

5.10.6 Resizing an Existing Table

Right click on the table and choose Table Properties. Adjust the width and height and click OK.

OR

Hover your mouse at the top left of the table and click to select the table. If the table is selected you should see

small white boxes around the edge of the table:

Page 14: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

14

You can then drag any of the white boxes to resize your table.

5.10.7 Edit Table Structure

5.10.7.1 Merging Cells

Right click on the left most cell (of the cells you want to merge), and choose Cell/Merge Right. Repeat this to

merge more cells together.

5.10.7.2 Removing Rows/Cells/Columns

Right click on the row/cell/column you want to delete and choose:

o Row/Delete Rows

or

o Cell/Delete Cells

or

o Column/Delete Columns

5.10.7.3 Inserting Rows/Cells/Columns

Right click where you want to insert and choose:

o Row/Insert Rows After (or Before)

or

o Cell/Insert Cells After (or Before)

or

o Column/Insert Columns After (or Before)

5.10.8 Text alignment/Line Spacing/Word Wrap in Cells

To change text alignment in cells:

o Select the cells you want to apply the change to (note: to select the entire table you may need to put

content in the first and last cells to be able to select all cells)

o Right click on the selection

o Choose Cell/Cell Properties

o Set the Horizontal Alignment and Vertical Alignment as needed.

o Click OK.

Page 15: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

15

o Click the X at the top right to close the window, if necessary and click OK.

Line spacing is standard within cells, but if you only want single spacing in a cell:

o press ‘shift’-‘enter’ after lines where you only want single spacing (rather than ‘enter’)

Word Wrap should generally be set to Yes so that text wraps to the next line within a cell and doesn’t widen the

cell. This is the default, so this should not need to be set.

o Select the cells you want to apply the change to (note: to select the entire table you may need to put

content in the first and last cells to be able to select all cells)

o Right click on the selection

o Choose Cell/Cell Properties

o Set the Word Wrap to be Yes.

o Click OK.

o Click the X at the top right to close the window, if necessary and click OK.

o

5.10.9 Deleting a Table

Right click on the table and choose Delete Table

5.11 Preview/Saving/Discarding Changes

5.11.1 Preview

Scroll to the bottom of the page and click the Preview button.

If you like your changes, ensure you click Save at the bottom of the page before browsing away. (Do NOT click

‘Edit’ in preview mode as you will lose your changes.)

5.11.2 Saving

***After making changes, it is important to Save before browsing away from the page:

Scroll down to the bottom of the page

o If your changes are extensive, you may want to preview them before saving by clicking on the Preview

button

o To save (in Edit or Preview mode):

Scroll down to the bottom of the page

Click on the Save button.

You may want to open a separate browser JUST for editing your site.

5.11.3 Discarding Changes

To discard any changes you have made:

o Simply browse away from your page and your changes will not be saved.

6 Reverting to Past Versions of Content/Pages Browse to the page.

Click on the Revisions link at the top.

Find the page you would like to revert to and click on the revert link beside the page name.

You will be prompted again to verify; click on the Revert button if you are sure.

Page 16: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

16

7 PDF Files

7.1 Upload and Link to PDF Files *** Note that for accessibility you should also have an HTML version of any PDF file, or the PDF file should be an

accessible PDF. Information on accessible PDFs is at http://webaim.org/techniques/acrobat/

Log onto the site.

Browse to the web page that will link to the PDF file.

Click on the Edit button at the top of the page.

In the Files section (just below the Body and Images sections), click Browse and find and select the PDF file

on your computer. Click the Open button.

Click the Upload button to upload the PDF file to the server.

Click in the Body section where you would like to have your link to the PDF file.

Click on the Insert button.

A link will be placed in your text to the PDF file.

o **Edit the text of the link so that it is descriptive of the PDF they are getting by clicking on it.

o It is a good idea to put (PDF) at the end of the description so the person knows they are clicking on a PDF

link. (The link description should not be an actual URL.)

7.2 Remove PDF Files

To remove a PDF file from the server and its link:

o Browse to and edit the page containing the link.

o Delete the link text.

o Click Remove beside the PDF file name, in the Files section.

8 Creating New Pages/Content To create new content on your site:

Page 17: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

17

Click Create Content in the left menu

8.1 Content Types After clicking Create Content, you will be presented with a number of different content choices.

Content types relate to specific page types/items. A description is available below each content type. Content

types may added/removed, as needed, over time.

Content types available currently: Admin Staff, Alumni Profile, Arts Event, Arts in Academics, Featured Photo,

News Item, Page, Professor profiles, Student Profile, and Webform.

8.2 Creating a New Web ‘Page’

Click Create Content, choose Page

Enter the Title. Note that his will be the title that appears at the top of your page.

8.2.1 Menus

Generally, only ACO staff will be adding menus to the site.

If you have approval, and would like a Menu item created that will link directly to your new page:

o Click Menu settings

o Under Menu link title: enter the name of the new menu item

o Under Parent item: choose the menu your new menu item will be under (for the main menu on the left,

choose <Left Navigation> (at the top of the list)) (*do NOT choose <Primary Links> (top) or <Secondary

links> (not used) or <Navigation>)

Page 18: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

18

o Under Weight: you can leave it as 0 to add your item to the end of the list.

Enter the Body. Refer to the information about editing pages in section 5. Editing Pages (above).

A default page name will be created for your new web page, based on your title. If you would like to specify the

page name:

o Scroll down and click on URL path settings.

o Uncheck Automatic alias

o Enter the page name you would like (e.g. If you enter a page name of undergrads, then the URL for your

page would be http://artsonline.uwaterloo.ca/arts/undergrads).

Click on the Save button.

8.2.2 Breadcrumbs

Ensure the breadcrumb path appears at the top of newly added pages. It will look similar to:

Home › Current graduate students › Graduate Studies Calendar

8.2.3 Drafts-Saving Your New Page as a Draft

If you do not want your new page to be visible on the web yet:

o Before clicking Save, click on Publishing Options

o Uncheck Published:

Page 19: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

19

o Click Save as usual.

o To find this content later (since it is not linked to), see section 10 Finding Unpublished Drafts/Content.

8.3 ‘Featured Photo’ Content Type Ensure you have an image ready for the home page of the Faculty of Arts web site. It must meet these

requirements:

o Maximum file size: 2 MB

o Allowed file types png gif jpg jpeg

o Larger than 720x230 pixels (preferably exactly 720x230 pixels)

Click Create Content, and choose Featured Photo

Enter the Title and a Caption: they both should contain the same text and this text will appear on the home

page of the Faculty of Arts web site.

Under Banner Photo, click Browse.

Browse to the location of the new 720x230 pixel banner image, and select it.

Click the Open button and then click Upload.

Click Preview at the bottom to view how it will look.

Click Save to save it and add this photo to the group of rotating banners on the home page.

8.4 Adding a “News Item” (right side of Arts home page) Log onto the site

Click on Create Content

Click on News Item

Under Headline:, type the text of the link that will be displayed under NEWS on the right side of the Arts home

page (or, if it is alumni news, under LATEST ALUMNI NEWS on the right side of the Alumni|Friends page).

Under News Tag, click to check Front Page if it is meant for the Faculty of Arts home page.

Under News Tag, click to check Alumni if it is meant for the Alumni|Friends page.

Under Body:, enter the complete contents of the News Item.

Images: It is often a good idea to include images in News Items. You may upload images as needed. See section

5.6 Images

Inserting an Image for details.

A default page name will be created for your news item, based on your headline. If you would like to specify the

page name:

o Scroll down and click on URL path settings.

o Uncheck Automatic alias.

o Enter the page name you would like. (E.g. If you enter a page name of new-arts-program, then the URL

for your page would be http://artsonline.uwaterloo.ca/arts/new-arts-program.)

Click on the Save button to save the news item.

8.5 Adding an “Arts Event” (right side of Arts home page)

Log onto the site

Click on Create Content

Click on Arts Event

Page 20: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

20

Under Event Title:, type the event title (as you would like it displayed under EVENTS on the right side of the Arts

home page).

Under From date, enter the start date and time of the event, in the format shown. *If you click on the text box

under From date:, a calendar will appear and you can browse to and choose the correct date.

Optionally, under To date:, enter the end date and time for the event in the same way you entered the From

date.

Under Description of Event:, enter the details about the event.

Under Location:, enter the event location.

At the time of this writing, there is not a page specifically for alumni events. If, when you are doing this, there is

a page listing Alumni events, you can check Alumni Event under Event Type to add your event to the Alumni

events page.

Poster: it is a good idea to upload a poster in PDF format for people to post about the event. To do so:

o Under Poster:, click on the Browse button.

o Browse to the PDF file, select it and click Open.

o Click the Upload button.

o When the event is published, a link to the PDF file will be available.

A default page name will be created for your event, based on your event title. If you would like to specify the

page name:

o Scroll down and click on URL path settings.

o Uncheck Automatic alias.

o Enter the page name you would like. (E.g. If you enter a page name of theatre night, then the URL for

your page would be https://artsonline.uwaterloo.ca/arts/theatre%20night (Note that spaces are

replaced with %20 so it may be nicer to name the page theatre_night.))

Click on the Save button to save the event.

8.6 Creating ‘Admin Staff’/’Alumni Profile’/’Arts In Academics’/’Professor

profiles’/’Student Profile’ Content Types The following Content Types are set up to be formatted in specific ways and to appear on specific web pages. Beside

each content type is a description of what they are and where they appear:

Admin Staff (Arts Home/’Our People’ page)

Alumni Profile (Alumni|Friends/Profiles, Alumni profiles)

Arts In Academics (Alumni|Friends/Alumni Awards, Arts in Academics)

Professor Profiles (TEACHING|LEARNING/Professor profiles)

Student Profile (if you check Graduate Student, it will appear on Future graduate students/Grad student

profiles; if you check Undergraduate Student, it will appear on Future undergraduates/Undergraduate profiles.

Each of these content types requires different pieces of information. To create them:

Click Create Content

Page 21: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

21

Choose the appropriate content type (e.g. Admin Staff, Alumni Profile, Arts In Academics, Professor Profiles or

Student Profile) (make sure you are aware of how this content type works; if not contact your Arts Computing

Office web contact)

Enter the content for all the required fields (denoted by a * beside the field name). Formatting help for entering

information in the text fields is above in section 5 Editing Pages.

Click on the Preview button to see how it looks.

Click on the Save button to save.

8.7 Panel Content Type The Panel layout allows you to create a page for comments that can be displayed in various columns layouts.

8.8 Creating a Webform

8.8.1 Creating the Form Page

Click Create Content from the left menu.

Click Webform at the bottom of the list.

Enter the Title for the web form page.

Enter text in the Body that will appear at the top of your form.

A default page name will be created for your web form, based on your title. If you would like to specify the page

name:

o Scroll down and click on URL path settings.

o Uncheck Automatic alias

o Enter the page name you would like (e.g. If you enter a page name of undergrad_form, then the URL for

your page would be http://artsonline.uwaterloo.ca/arts/undergrad_form).

Click on the Save button to save your new page.

Note the URL in your address bar. This is the URL of your form.

8.8.2 Creating Fields for Your Form

Click Webform beside the Edit button to create fields for your form.

o (You will initially be in the Form components section of the Webform.

)

o Enter information for one of your fields in the space provided:

Enter the field name

Choose what type of field it is from the drop down menu

Check the check box if you would like to make this field mandatory.

Click on the Add button.

o This next page that opens will prompt you to add more information related to the field you just added.

o For text fields, enter the

Label –text to be displayed beside the field in the form

Page 22: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

22

Field Key -usually best to leave it as the default (it can contain letters, numbers and

underscores)

Default value if you would like the field to have a default value or descriptive text about what

to enter.

o You may enter a description of the field in the Description section or you can leave the Description

section blank.

o Make sure Mandatory is checked if the field is required.

o Check Unique if the field is unique (e.g. student numbers).

o Enter the:

Maxlength-maximum number of characters you are allowing

Width-the character width of the field on the screen

Label placed to the left of textfield (only if needed e.g. $)

Label placed to the right of textfield (only if needed, e.g. %)

Label display-Above/Inline/None (Above and Inline sometime appear the same; None: no

label will display)

o You can set a field to be Disabled if you do not want people to be able to enter information into it. This

could be done if the default value will be displayed but should not be changed.

o Click the Save Component button at the bottom of the screen.

Page 23: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

23

Repeat the above for all the other fields required for your form. Other field types will have different options to

set.

Then click the Save button at the bottom of your Webform/Form Components screen.

8.8.3 Viewing Your Form/Form URL

At any time, you can click on the View link at the top of the page to view your form.

The URL for your form will appear in the address bar when you are viewing your form.

You can link to the form from another page as you would link to any other content (see section 5.4.1 Inserting a

Link), or you can copy the URL and send it out to people.

Page 24: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

24

8.8.4 Setting an Email Address to Receive Form Submissions

Click again on Webform and then click on E-mails

Type in the email address of the person who should receive email of form submissions and click the Add button.

Fill out the next screen with the details about how the email should look, etc.

Click Save e-mail settings

8.8.5 Other Important Form Settings

Click on Webform again and then click on Form settings

You can then enter a Confirmation message that people will see after completing the form.

Instead, you could enter a Redirection location URL, that would direct people to another web page (that you

have already created) instead of them seeing a confirmation message:

o Select Custom URL:

o Type the URL of the web page you want them directed to under Custom URL:

You can also set Submission limit: which limits how many submissions a person can submit.

(You can stop people from submitting to the form by closing the form:

o Under Status of this form: choose Closed )

You can also control who can submit to the form by setting the Roles that can submit this webform. If you

choose authenticated user then each person who submits must log on with their Watiam userid and password.

Click Save configuration.

8.8.6 Form Results

Once you have advertised your form and people have filled it out, you can view results by:

o Logging onto the site

o Browse to the web form

o Click on the Results link at the top

Page 25: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

25

o You can click on the various links to display the results: Submissions, Analysis, or Table

o Click Download to download the results to an Excel file.

o Choose Microsoft Excel and click on the Download button.

o Click Save

o Browse to where you want to save the file and then click Save again.

o Simply open the file in Excel to view your results.

8.8.7 Clearing Your Form

If you would like to start with fresh results:

Make sure you have downloaded your current results to an Excel file and saved the Excel file on the N: drive.

Click on the Results link at the top

Click on the Clear link.

**Note that this cannot be undone: Click on the Clear button.

There are many other options and details related to web forms. If you have questions, please contact someone

form the Arts Computing Office for help.

8.9 Linking to Your New Page/Content See section 5.4.1 Inserting a Link (above).

9 Deleting Content

9.1 Deleting Pages/News Items/Events Log onto the site

Browse to and open the page, news item, or event you would like to delete.

Click on the Edit link at the top.

Scroll down to the bottom of the page and click on the link for Publishing Options.

Page 26: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

26

Uncheck Published.

Click on the Save button.

9.2 Deleting Other Content (Featured Photos, Other Content Types…) For content such as Pages, News Items, Arts Events, and any other page-like content you can browse to:

o You can unpublish the content; see section 9.1 Deleting Pages/News Items/Events (above).

For other content such as featured photos:

o Please contact the Arts Computing Office to delete the item for you. See section 13 More Help (below)

for a list of contacts.

10 Finding Unpublished Drafts/Content To find existing content that is not linked to or is unpublished:

Click on Node List in the left menu near the bottom

Choose No from the Published drop down menu.

Click the Apply button.

Browse through the content. Note you can also search for published content (that maybe is published but not

linked to) by choosing Yes from the Published drop down menu.

To edit your found content:

o Click on the content’s Title

o Then click on the Edit link.

11 Breadcrumbs “Breadcrumbs” are what appear at the top of a page to indicate how you got to that page. They look something like this:

On this site, breadcrumbs are created for you automatically based on the menu structure or based on the content type

of the item.

12 Inserting Video Click Create Content and choose Video.

Enter the information required and complete the upload and Save.

Contact Sean Speers ([email protected]) or Guillermo Fuentes ([email protected]) to let them know you

have uploaded the video and they will complete the process.

See section 13 More Help (below) for a list of other contacts if necessary.

Page 27: Arts Drupal Training...Arts Drupal Training Live site:  Training site:  Table of Contents: 1 Web Browsers ..... 4 2 Web

27

13 More Help The Arts Computing Office staff are happy to help.

Main contacts for help with the Faculty of Arts Drupal web site are:

o Sean Speers, [email protected]

o Lisa Tomalty, [email protected]

o Guillermo Fuentes, [email protected]

o Wendy Philpott, [email protected]

o ACO Help, [email protected]

14 Improvements We will add additional styles/content types/etc. as required.

Arts plans to move this web site to the central uWaterloo Drupal installation when possible.