1. DRUPAL How to create a website Summer Tech Academy 2010 Mercedes Conde

2. TABLE of CONTENTS Creating content Creating a page Adding a table Attaching files Creating hyperlinks Adding images Creating a poll Creating a story Other applications Photo Slideshow Video playlist Power Point play list

3. 1. Go to http://training.amherst.k12.va.us 2. Log in: GETTING STARTED

4. CREATING CONTENT

5. Once you log in, youll see this. Click on Create content CREATING CONTENT

6. Types of content There are three different types of content:

7. CREATING A PAGE

8. Adding the title Add a title to the page. Use the same title here.

9. Page location Make sure the content you are creating is under your name in the parent item.

10. Body options HTML cutpastecopy undo/redoerasebolditalicunderline listindent alignmentlinkimagetableline It looks similar to the Microsoft Word text editor.

11. Font options You can choose different formats, fonts, sizes, colors… Although, your website should be consistent with the design of your schools website.

12. Tables can be very useful when creating a website. Tables will help you keep the information organized and easy to find. ADDING A TABLE

13. Adding a table Click on the table button. Go to the BODY menu

14. Adding a table How many rows and columns do I need? Where do I want it?

15. You need to attach files in order to: - Create hyperlinks - Publish documents (word, pdf, ppt…) - Add pictures ATTACHING FILES

16. Attaching files Scroll down the page. The file attachments are after the body section.

17. Attaching files Click on Choose File Find the file you want to attach. Then, click Attach

18. Attaching files Once your file is attached, uncheck the LIST option.

19. Attaching files Now your file is attached to your website, but it is not published yet. We are going to use hyperlinks for publishing our files. This is the information you need when creating hyperlinks.

20. Any graphic or text that you can click on to be taken to another page or website is called a hyperlink. Hyperlinks help visitors find their way around the website. CREATING HYPERLINKS

21. Different uses Create hyperlinks to: 1. Files (word, power point…) 2. Other pages in your website 3. Other websites

22. HYPERLINK TO ATTACHED FILES

23. Hyperlink to attached files You have to attach the files you want to use later. (check attaching files)

24. Hyperlink to attached files Once you have attached the files, you have to select the address where your file is located. Click on the right button of your mouse and click on copy

25. Hyperlink to attached files Go up to the body section where you are going to link your file. Then, select the piece of information your visitors will click on, in order to access the linked file.

26. Hyperlink to attached files Click on the hyperlink button Paste the address you copied from the attachments.

27. Hyperlink to attached files You can also decide where your file is going to be opened once the visitors click on the link. 1. Click on Target2. Choose one option

28. HYPERLINKTO OTHER PAGES

29. Hyperlink to other pages Copy the HTTP address of the page you want to link to.

30. Hyperlink to other pages 1. Select the text/image where you want to put the hyperlink 2. Click on the hyperlink button 3. Paste the address of the page. Click OK.

31. HYPERLINKTO OTHER WEBSITES

32. Hyperlink to other websites Repeat the same steps from the hyperlink to other pages section. The only difference is that the link is not redirecting to one of the pages inside your website, but to another website. This is very useful if you want to redirect your visitors to other webs.

33. A picture can say a million words Pictures make websites less boring Pictures make content easy to find ADDING IMAGES

34. Adding images First of all, you have to attach your files to your website. Go to Attach new file and click on Choose File Find the picture you want to attach. Click Ok. Click Attach.

35. Adding images Once you have attached the picture you are going to use, you have to copy the address. (Same thing you did before when attaching files) Select the address. Click on copy.

36. Adding images On the body section, click on the image button. Click on URL. Here is where you are going to paste the address you copied on the previous step from your attachments. Click on the right button of your mouse and select Paste

37. Adding images Once you paste the address, you need to adjust the size of your picture.

38. Adding images Decide where you want to place your picture.

39. CREATING A POLL

40. Story Go to CREATE CONTENT and select the POLL option

41. Poll Multiple Choice Question You can add more choices You decide how long the poll will be active

42. Poll It is very important to make sure you put the poll into the correct page Add a title to your poll and find your page in the parent item.

43. Poll Once you save it, this is how your poll should look like This is how the results would look like on your website…

44. Poll If you want to have more information about the poll, when you log in, click on VOTES

45. Poll When you log in, you also can see who participated in the poll and what he/she voted.

46. CREATING A STORY

47. Story Go to CREATE CONTENT and select the STORY option

48. Story The difference between a story and a page is that a story allows your students to post and share their comments. First step is adding your storys title. Be careful where you put your story into!!

49. Story Write your story on the body section. This is just like creating a page, so you can also add pictures, tables, links…

50. Story Scroll down and find COMMENT SETTINGS. Make sure the read/write option is checked, so your students can read and write comments. Once you have finished, click on SAVE.

51. OTHER APPLICATIONS

52. Adding: Photo slideshow Videos Power Point Play List OTHER APPLICATIONS

53. PHOTO SLIDE SHOW

54. Using PICASA Creating a Photo SlideShow

55. Photo Slide Show Go to www.picasa.google.com and create an account

56. Photo Slide Show Once you log in, click on UPLOAD Then, create a PHOTO ALBUM.

57. Photo Slide Show Once your photos are uploaded… …click on EMBED SLIDESHOW

58. Photo Slide Show This is the code you have to copy You can change the size of your slideshow

59. Photo Slide Show Once you have copied the code, go to your website and to the BODY menu. Click on SOURCE, paste the code and click on SAVE.

60. Photo Slide Show Now, your photo slide show has been embedded.

61. POWER POINT PLAY LIST

62. Using SLIDESHARE to embed: - Power Point play lists Embedding a Play List

63. Power Point Play List First of all, you have to sign up and create an account. Go to www.slideshare.netwww.slideshare.net

64. Power Point Play List Once you are registered, and logged in, click on upload Click on Upload publicly and select the.ppt you want to upload

65. Power Point Play List While your file is uploading, you can complete the file information

66. Power Point Play List Once you have finished uploading all the files, click on My uploads

67. Power Point Play List The uploaded files should be inside the MY UPLOADS tag. Next step is to create a play list for your presentations.

68. Power Point Play List Scroll down, and click on Widgets for your blog

69. Power Point Play List Select my uploads You can change the name of your playlist

70. Power Point Play List Your playlist should show all the files you have uploaded

71. Power Point Play List Now, it is time to embed your playlist on your website. You will find the embedding code on your playlist

72. Power Point Play List Click on the text box to select the code. Then, click on the right button of your mouse and click on copy.

73. Power Point Play List Go back to your website. On the BODY menu, click on SOURCE. Then, paste the embedding code, using the right button of your mouse.

74. Power Point Play List Once you have saved the changes, your website should look like this This playlist allows visitors to see Power Point Presentations even if they dont have Microsoft Office installed at home.

75. VIDEOS

76. Using Youtube to embed: - Videos Embedding Videos

77. Videos First of all you have to create an account

78. Videos Once have logged in, click on upload Click on upload video and select a file

79. Videos It will take a few minutes to upload the video. Remember to keep your video public so your students can see it.

80. Videos Once your video has been uploaded, click on My Videos There you will find all your uploaded videos.

81. Videos If you want to embed only one video on your website… Find the video and click on the name of the video.

82. Videos Then, click on SHARE

83. Videos Then, click on EMBED This is the code you have to copy and paste into your website. Dont forget to UNCHECK this option!!! You can also select how big your video is going to be.

84. Video Go to the BODY section and click on Source Click on the right button of your mouse, and click on Paste

85. Videos Now your video is embedded in your website.

86. Videos Now, if you want to embed more than one video… You have to create a PLAYLIST. Go back to YOUTUBE and click on MY VIDEOS.

87. Videos Click on Playlists: +NEW. Add a title to your play list and click on create.

88. Videos Click on Add videos to playlist, and add the videos you have selected

89. Videos Once you have all the videos you need in your playlist, click on SHARE

90. Videos This is the code you have to copy and paste into your website

91. Video Go to the BODY section and click on Source Click on the right button of your mouse, and click on Paste

92. Video This is how your playlist should look like

93. mconde@amherst.k12.va.us ANY QUESTIONS, CONTACT ME @