Download - Drupal2011
![Page 1: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/1.jpg)
DRUPAL
How to create a How to create a websitewebsite
Summer Tech Academy2010 Mercedes Conde
![Page 2: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/2.jpg)
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
![Page 3: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/3.jpg)
1. Go to http://training.amherst.k12.va.us
2. Log in:
GETTING STARTED
![Page 4: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/4.jpg)
CREATING CONTENTCREATING CONTENT
![Page 5: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/5.jpg)
Once you log in, you’ll see this.
Click on “Create content”
CREATING CONTENT
![Page 6: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/6.jpg)
Types of content
There are three different types of content:
![Page 7: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/7.jpg)
CREATING A PAGECREATING A PAGE
![Page 8: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/8.jpg)
Adding the title
Add a title to the page.
Use the same title here.
![Page 9: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/9.jpg)
Page location
Make sure the content you are creating is under your name in the parent item.
![Page 10: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/10.jpg)
Body options
HTML cut pastecopy
undo/redo erase bold italic underline
list indent
alignment link image table line
It looks similar to the Microsoft Word text editor.
![Page 11: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/11.jpg)
Font options
You can choose different formats, fonts, sizes, colors… Although, your website should be consistent with the design of your school’s website.
![Page 12: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/12.jpg)
Tables can be very useful when creating a website.Tables will help you keep the information organized and easy to find.
ADDING A TABLE
![Page 13: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/13.jpg)
Adding a table
Click on the table button.
Go to the BODY menu
![Page 14: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/14.jpg)
Adding a table
How many rows and columns do I need?
Where do I want it?
![Page 15: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/15.jpg)
You need to attach files in order to:-Create hyperlinks-Publish documents (word, pdf, ppt…)-Add pictures
ATTACHING FILES
![Page 16: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/16.jpg)
Attaching files
Scroll down the page. The file attachments are after the body section.
![Page 17: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/17.jpg)
Attaching files
Click on “Choose File”
Find the file you want to attach.
Then, click “Attach”
![Page 18: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/18.jpg)
Attaching files
Once your file is attached, uncheck the LIST option.
![Page 19: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/19.jpg)
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.
![Page 20: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/20.jpg)
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
![Page 21: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/21.jpg)
Different uses
Create hyperlinks to:1.Files (word, power point…)2.Other pages in your website3.Other websites
![Page 22: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/22.jpg)
HYPERLINK TO HYPERLINK TO ATTACHED FILESATTACHED FILES
![Page 23: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/23.jpg)
Hyperlink to attached filesYou have to attach the files you want to use later. (check “attaching files”)
![Page 24: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/24.jpg)
Hyperlink to attached filesOnce 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”
![Page 25: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/25.jpg)
Hyperlink to attached filesGo 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.
![Page 26: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/26.jpg)
Hyperlink to attached filesClick on the hyperlink button
Paste the address you copied from the attachments.
![Page 27: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/27.jpg)
Hyperlink to attached filesYou can also decide where your file is going to be opened once the visitors click on the link.
1. Click on “Target” 2. Choose one option
![Page 28: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/28.jpg)
HYPERLINK HYPERLINK TO TO
OTHER PAGESOTHER PAGES
![Page 29: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/29.jpg)
Hyperlink to other pagesCopy the HTTP address of the page you want to link to.
![Page 30: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/30.jpg)
Hyperlink to other pages1. 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.
![Page 31: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/31.jpg)
HYPERLINK HYPERLINK TO TO
OTHER WEBSITESOTHER WEBSITES
![Page 32: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/32.jpg)
Hyperlink to other websitesRepeat 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.
![Page 33: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/33.jpg)
A picture can say a million wordsPictures make websites less boringPictures make content easy to find
ADDING IMAGES
![Page 34: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/34.jpg)
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.
![Page 35: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/35.jpg)
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.
![Page 36: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/36.jpg)
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”
![Page 37: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/37.jpg)
Adding images
Once you paste the address, you need to adjust the size of your picture.
![Page 38: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/38.jpg)
Adding images
Decide where you want to place your picture.
![Page 39: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/39.jpg)
CREATING A POLLCREATING A POLL
![Page 40: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/40.jpg)
Story
Go to CREATE CONTENT and select the POLL option
![Page 41: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/41.jpg)
Poll
Multiple Choice Question
You can add more choices
You decide how long the poll will be active
![Page 42: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/42.jpg)
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.
![Page 43: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/43.jpg)
Poll
Once you save it, this is how your poll should look like
This is how the results would look like on your website…
![Page 44: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/44.jpg)
Poll
If you want to have more information about the poll, when you log in, click on VOTES
![Page 45: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/45.jpg)
Poll
When you log in, you also can see who participated in the poll and what he/she voted.
![Page 46: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/46.jpg)
CREATING A STORYCREATING A STORY
![Page 47: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/47.jpg)
Story
Go to CREATE CONTENT and select the STORY option
![Page 48: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/48.jpg)
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 story’s title. Be careful where you put your story into!!
![Page 49: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/49.jpg)
Story
Write your story on the body section. This is just like creating a page, so you can also add pictures, tables, links…
![Page 50: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/50.jpg)
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.
![Page 51: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/51.jpg)
OTHER APPLICATIONSOTHER APPLICATIONS
![Page 52: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/52.jpg)
Adding:Photo slideshowVideosPower Point Play List
OTHER APPLICATIONS
![Page 53: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/53.jpg)
PHOTO SLIDE SHOWPHOTO SLIDE SHOW
![Page 54: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/54.jpg)
Using PICASA
Creating a Photo SlideShow
![Page 55: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/55.jpg)
Photo Slide Show
Go to www.picasa.google.com and create an account
![Page 56: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/56.jpg)
Photo Slide Show
Once you log in, click on UPLOAD
Then, create a PHOTO ALBUM.
![Page 57: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/57.jpg)
Photo Slide Show
Once your photos are uploaded…
…click on EMBED SLIDESHOW
![Page 58: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/58.jpg)
Photo Slide Show
This is the code you have to copy
You can change the size of your slideshow
![Page 59: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/59.jpg)
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.
![Page 60: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/60.jpg)
Photo Slide Show
Now, your photo slide show has been embedded.
![Page 61: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/61.jpg)
POWER POINT PLAY LISTPOWER POINT PLAY LIST
![Page 62: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/62.jpg)
Using SLIDESHARE to embed:-Power Point play lists
Embedding a Play List
![Page 63: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/63.jpg)
Power Point Play List
First of all, you have to sign up and create an account.
Go to www.slideshare.net
![Page 64: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/64.jpg)
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
![Page 65: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/65.jpg)
Power Point Play List
While your file is uploading, you can complete the file information
![Page 66: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/66.jpg)
Power Point Play List
Once you have finished uploading all the files, click on My uploads
![Page 67: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/67.jpg)
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.
![Page 68: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/68.jpg)
Power Point Play List
Scroll down, and click on “Widgets for your blog”
![Page 69: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/69.jpg)
Power Point Play List
Select my uploads
You can change the name of your playlist
![Page 70: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/70.jpg)
Power Point Play List
Your playlist should show all the files you have uploaded
![Page 71: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/71.jpg)
Power Point Play List
Now, it is time to embed your playlist on your website.
You will find the embedding code on your playlist
![Page 72: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/72.jpg)
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.
![Page 73: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/73.jpg)
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.
![Page 74: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/74.jpg)
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 don’t have Microsoft Office installed at home.
![Page 75: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/75.jpg)
VIDEOSVIDEOS
![Page 76: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/76.jpg)
Using Youtube to embed:-Videos
Embedding Videos
![Page 77: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/77.jpg)
Videos
First of all you have to create an account
![Page 78: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/78.jpg)
Videos
Once have logged in, click on upload
Click on “upload video” and select a file
![Page 79: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/79.jpg)
Videos
It will take a few minutes to upload the video.
Remember to keep your video public so your students can see it.
![Page 80: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/80.jpg)
Videos
Once your video has been uploaded, click on My Videos
There you will find all your uploaded videos.
![Page 81: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/81.jpg)
Videos
If you want to embed only one video on your website…Find the video and click on the name of the video.
![Page 82: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/82.jpg)
Videos
Then, click on SHARE
![Page 83: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/83.jpg)
Videos
Then, click on EMBED
This is the code you have to copy and paste into your website.
Don’t forget to UNCHECK this option!!!
You can also select how big your video is going to be.
![Page 84: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/84.jpg)
Video
Go to the BODY section and click on “Source”
Click on the right button of your mouse, and click on “Paste”
![Page 85: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/85.jpg)
Videos
Now your video is embedded in your website.
![Page 86: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/86.jpg)
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.
![Page 87: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/87.jpg)
Videos
Click on Playlists: +NEW. Add a title to your play list and click on create.
![Page 88: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/88.jpg)
Videos
Click on Add videos to playlist, and add the videos you have selected
![Page 89: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/89.jpg)
Videos
Once you have all the videos you need in your playlist, click on SHARE
![Page 90: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/90.jpg)
Videos
This is the code you have to copy and paste into your website
![Page 91: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/91.jpg)
Video
Go to the BODY section and click on “Source”
Click on the right button of your mouse, and click on “Paste”
![Page 92: Drupal2011](https://reader033.vdocuments.net/reader033/viewer/2022060109/5557ce98d8b42af2178b4bae/html5/thumbnails/92.jpg)
Video
This is how your playlist should look like