Version 1 test 11.46am. Drupal Training Manual

Transcription

1 Version 1 test 11.46am Drupal Training Manual 1

2 Contents How to login to Drupal?... 3 Working with basic pages?... 4 How to create a web page?... 4 How to set the heading on your pages?... 6 How to copy text from word into your web page?... 7 How to edit an existing page?... 8 How to switch to previous version of a page?... 8 How to insert an image into a web page?... 9 How do I wrap text around an image How to insert a hyperlink into your web page? How to remove a hyperlink? How to insert a document into a web page? How to remove a document from a webpage? How to create an Anchor tag in your web page? How to create a Webform? How to create a News Article? How to add a menu link to the left hand side block or across the top of your site? How to create a sub menu? How to edit a Homepage Carousel Article How to edit the Homepage?

3 How to login to Drupal? To login into Drupal open a web browser such as Google Chrome then type in and then press enter. On the next screen enter in your DCU username and password (which are the Same details that you use to login to your account etc.) And then click login. 3

4 Working with basic pages? This screen is displayed after you login How to create a web page? To create a basic page select add content and basic page 4

5 Set your department here Title of the page goes here The contents of the page goes here This needs to be set to WYSIWYG Editor 5

6 Now to create the page just click save, the URL or address of the page will be based on what you have in typed in the title field. How to set the heading on your pages? Note all page titles must be set to h2 to do this highlight the heading you want and then select Heading 2 from the format drop down menu. And Heading 3 or h3 for all other headers within pages. 6

7 How to copy text from word into your web page? Selecting this icon brings up this box, now paste in the text you copied in from Word by going ctrl + v on your keyboard and then click insert 7

8 How to edit an existing page? To edit an existing page after logging into drupal click on the Edit tab How to switch to previous version of a page? Don t worry if you ve managed to delete some content off a page. With the Revisions option you can revert to a previously saved version 8

9 How to insert an image into a web page? When using images for any page on the site, whether it s a basic page or news article, please remember that the image must either have DCU ownership (produced, created or bought by Dublin City University) or have agreed permissions for the use of the image (permission from the image creator - flickr, istock). Image bank Communications and Marketing have created a bank of Images ( for all faculties and departments to source from for online and offline use. These images cover multiple general and specific subject matters that could possibly appear on the news feed. These images are sized for news article stories only. If you feel have further image/photo needs please contact comms.marketing@dcu.ie While in Drupal select the insert/edit image icon 9

10 This screen is then displayed. Now click on the browse public icon Now navigate to your department such as ISS and then the images folder 10 If the image you want to include is not contained here you can then upload it from your computer

11 To upload the file from your computer select upload, then Choose file Now select the image you want and then select open 11

12 Then click upload to move the file up to your images folder and then click insert file from above to get access to the screen below Make sure to provide a description of the image Now click the insert button to include the image in your web page 12

13 How do I wrap text around an image Firstly click add content and then select a basic page if creating a new page from scratch or click on The edit tab option of an existing page. Now in the content area don t forget to select paste from word from the toolbar if you re copying in the text from msword Now put your mouse cursor at the start of the paragraph and click the insert image icon to insert your image as previously shown above. Now highlight the image by clicking on it. Then right click and select, insert/edit image. Now select appearance from the next screen 13

14 Now fill in these 4 fields as shown and then select update at the bottom of the screen. Note the values in Vertical space and Horizontal spacing are optional. As they may affect the display of text in the next part of your page. After saving the page this is an example of what the image looks like with text wrapped around it. 14

15 How to insert a hyperlink into your web page? If inserting a link into an existing web page, you first need to edit the page. (as previously shown in slide 8) then highlight the piece of text/word that you want linkable and then click insert/edit link If you need to link to a internal website with in dcu enter the page address in this format and for external addresses such as rte.ie enter in this format then click insert and the link is now in place 15

16 How to remove a hyperlink? So first we need to log in and then select the edit tab on the page that contains the link/s you want to remove. So now highlight the link to be removed and then click Unlink from the toolbar to remove the link and then click save at the bottom of page. 16

17 How to insert a document into a web page? It is very similar to creating a link. Again highlight a piece of text then right click on it and select insert / edit link. Now click browse public if your file is to be publically viewed If the content of your file/s is only to be viewed by DCU staff/students they then need to be put in the private folder 17

18 18 Again navigate to your department such as ISS after selecting either the browse public or private folder and then select either the docs or pdf s folder depending on what you re uploading.

19 To upload the file from your computer select upload, then Choose file Locate the file you want to upload and then select open 19

20 20 Now click upload, and the file is uploaded onto the server

21 Then click insert file, to see the box below Finally click insert and the document is embedded in your web page. 21

22 How to remove a document from a webpage? For example let s say you want to remove this document from Drupal. So first we need to log in and then select the edit tab on the page that contains a link to the document Click on the link to the file and then select insert/edit link 22

23 If the file to be deleted was contained in this folder i.e the browse public folder then you would select this one In this case we now select browse private to locate the file as it s restricted. NB the browse public folder is used if the document is not restricted Now highlight the file in the list and then click delete. If the file was a docx or doc you would just do the same as illustrated here 23

24 Now click ok The file is now deleted, now close this window to get to the next screen 24

25 Now click update The final step is to highlight the link to the file and then select the unlink icon, and then click save at the bottom of your screen. 25

26 How to create an Anchor tag in your web page? Note 2 - Highlight the text anchor1 for example, and then click on the anchor icon Note 1 - Firstly create your anchor tags within your web And then name the anchor e.g. anchor1 and click insert on the image above. Once the anchor tags have been created we then need to create a link to them. To do this simply highlighting this piece of text and then right click on it and select insert/edit link 26

27 This box appears, under Anchors, select anchor1 from the drop down list and then click insert The link has now been created 27

28 How to create a Webform? Important Before creating any web forms you need to consult with your data champion within your department. To create a webform, click the add content button, then webform Give your form a title Make sure this is set to WYSIWYG Editor 28

29 Make sure to select the correct department Now click save To create a new label enter it in under New component name, select the type e.g text field, date, file etc. and check whether the label is mandatory or not, then click add and save component to get the default settings 29

30 ! Important! If you need to request an attachment be uploaded to your form such as a cv for example and you select the file type as listed above and then click add on the setup section of the field make sure you always select the Private files as the Upload destination This is what the form looks like Set where the responses from your form go under the s heading 30

31 31 Change the component to Name and to Address if you want to be able to directly respond to the person who submitted the web form.

32 The response the user receives can be changed under form settings A form can be closed manually under Submission settings or can be closed automatically via the scheduler option which is also found under form settings 32

33 To download the results from the form and view them in Excel you must select the delimited text option here Now select INCLUDED EXPORT COMPONENTS Then untick submission information to reduce the number of fields that get downloaded and then click the download button to access the results from the webform 33

34 How to create a News Article? To create a News Article click add content and then news article Select your department e.g ISS Enter in the title of the article here 34

35 Again this must be set to WYSIWYG Editor Upload the image for your article here for news articles images must have a recommended Width 900 and Height 463 pixels but smaller images can now also be uploaded starting at 400 x 300 pixels. 35

36 Now click save and the URL for your news article will be automatically created. The news article will then be live on your site within an hour. 36

37 37 Here s an example of a news article that contains an image, title and content

38 How to add a menu link to the left hand side block or across the top of your site? Left hand side menu link The left hand menu is classed as a Block. This menu block will appear on the left hand side of your all department s webpages. To edit this menu block hover your mouse cursor over the top right of your menu block and click on the cog symbol see below. Now click list links 38

39 Across the top of your site Now click list links Now click add link 39

40 This will be the title of the menu The path of the menu link should consist of the department name and title of the page e.g iss/test-page.shtml Under the Classes Heading type in menu_item_1 or menu_item_2 etc this controls the colour of the menu so the first menu would be menu_item_1 and so on up to menu_item_9 and then click save at the bottom of the screen. NB this is only required for top level menus 40

41 Your menu has now been created, but is at the bottom of the list To move your menu to its appropriate location simply click on the move icon and drag it to its correct location and then click save configuration 41

42 How to create a sub menu? Again click on the cog symbol and then select List links Now click add link to see the below options Give the menu a name Enter the full path of the menu which would be or 42

43 As before we need to give the menu a colour -Under the Classes Heading type in any colour between menu_item_1 and so on up to menu_item_9 and then click save at the bottom of the screen. NB this is only required for top level menus. The Menu has now been created and can be moved to its required positon as shown on page 29 43

44 Now drag your pages up and over to the right and now they are subpages of the Test Sub Menu now click save configuration at the bottom of your screen This is how it looks 44

45 How to edit a Homepage Carousel Article Firstly make sure to log into Then open this website in Chrome 2) Now select the Department field and type in your dept. and select it e.g. step etc. 1) Then Select Homepage Carousel Article 3) Next click the search button Below is a list of the Homepage Carousel Articles for your website Just select the one you want to update and click edit. 45

46 1) You can change the title Or 2) Carousel text Or 3) Altlink Don t forget to click save if you make a change to the Carousel Article. 46

47 How to edit the Homepage? Click the edit tab 47

48 Add in a title e.g. step Give the homepage a heading. Such as Welcome to STEP or add in a sub heading Change the text on the home page here 48

49 Add in a second heading and Text here that will display on your Homepage. NB: Don t forget to click save If you make any changes to your home page. 49