Extending the classroom community by building a class website Destiny Long TIU 11 Community Education Services dlong@tiu11.org Have you ever created a website? Yes, many Yes, one or two No 1
How comfortable do you feel with weebly? Very comfortable I ve used it a few times I ve never used it Goals for today: 1) You ll be able to state different 1) You ll be able to state different goals for using a class website with your face to face class. 2
Goals for today: 2) You will be able to create a sample web page using at least four different weebly tools Goals for today: 3) You will be able to describe 3) You will be able to describe elements of good web design. 3
Voluntary gallery walk Show off your sample page at the end of today s training to see how much you ve learned in just 75 minutes! Goals for creating a class website Provide a space for students to build a learning community outside of class Post class materials for students who miss class Post activities that can build on class content Post activities for students to learn something new on their own Post resources to hl help learners understanding di Flipped classroom Others ideas? 4
Sample pages http://ericaseslclass.weebly.com/ http://connierivera.weebly.com/websites andresources for math practice.html http://excelsiorspringsadulted.weebly.com/on line registration form.html What is weebly? 5
Logging into weebly education.weebly.com 6
Logging into weebly your turn education.weebly.com Creating a page 7
Creating a page your turn 1 2 3 Editing a page 1. Click on the Edit button beside the website that you want to edit 2. Click on the Pages icon to choose the page that you want to edit 8
Editing a page your turn 1. Click on the Edit button beside the website that you want to edit 2. Click on the Pages icon to choose the page that you want to edit Adding page title and headers 1. Click on Title 2. Drag it down to the white space 3. Start typing your page title 9
Adding page title and headers your turn Add a page title to your sample web page. Adding text 1. Click on Paragraph 2. Drag it down to the white space 3. Start typing your text. You can also copy and paste from a word document into this box. 10
Adding text your turn Add at least two sentences to your page. Adding a picture 1. Click on Picture or Paragraph with picture 2. Drag it down to the white space 3. Click on the blue box Click Here to Edit to upload a picture 4. Click upload a photo from your computer 5. Choose your file, click open 11
Keep in mind when adding a picture Add an alt tag: click on the picture, click on advanced and type in a short description in ALT TEXT field. Add captions: Click on the captions bubble. Type your caption click save. Adding a picture your turn Add a picture or a picture with a paragraph. Add an alt tag. If you d like, you can also add a caption. 12
Most websites use multiple columns http://www.yahoo.com http://www.nytimes.com 13
http://www.worlded.org Using multiple columns How many columns are used in this page? 14
without columns more scrolling Using multiple columns 1. Drag multiple columns from the menu 2. Choose the number of columns you want. 3. Drag Elements from the menu at the top or existing elements on the page into the column. 15
Using multiple columns your turn On your page, create two columns. Drag the picture you uploaded in the one column. Drag the text you created earlier into the other column. Adding links: Add a link to text Highlight the text you want to be the link Click on the link icon Choose the type of link you want Click save Add a link to an image: Add a link to an image: Click on the link icon Choose the type of link you want Click save 16
Adding links your turn Please add at least one of the following to your page: link text to a website link image to a website link text tto an email address link text to a file link text to another page in the website Changing font colors and sizes: Click in the text box so the format menu appears Click + to increase the size to decrease Click on the color to change the color. 17
Changing font colors and sizes your turn Other useful tools: You can embed a document by using the embed a document ttool. Please keep in mind dthat t this will not work on Apple mobile devices so best practice is to also include a link to the document as well. You can add a video. The size of the video is limited to 100MB (which is quite large). 18
Other useful tools: You can create a photo slideshow by using the slideshow tool. Please remember to use ALT Tags for photos. You can add a form to collect information from peopleor or have participantsuploadfiles files. Files will only been seen by web editors and not uploaded for all to see. Other useful tools: There is a discussion board topic but that element is requires people to create a log in, is run by a 3 rd party, and requires a paid subscription to get full use. You can also use the custom html box for advanced dweb editing. This will not be required for most of the work you ll be doing on your page. 19
Deleting an element Click on the red x in the upper right corner Click on Yes, Delete it to confirm the deletion Please note: to delete a multiple columns element, you must first either delete ormove all the elements in the columns before deleting Voluntary gallery walk Show off your sample page at the end of today s training to see how much you ve learned so far. 20
Web guidelines Think about content and design to make your page useful and user friendly. readability navigation colors images placement Web guidelines readability Think about content and design to make your page useful and user friendly. Ensure your font size is readable Ensure the content is written at a level that is appropriate for your audience Use headers, bullet points, and questions to help the reader locate information Avoid jargon and abbreviations that are not spelled out at least once 21
Web guidelines navigation Use descriptive words for links avoid things like click here Use navigation and submenus to help participants find information; but don t make navigations more than 2 or 3 levels deep Consider using anchors and targets to avoid having many levels of pages in the navigation Web guidelines colors Use consistent colors to help the audience know they are on the same site Ensure there is enough contrast between the background and text Avoid using too light of colors difficult to read in print and in text 22
Web guidelines images Resize pictures using by dragging the top and sides to ensure a picture it doesn t get stretched t Add an ALT TAG to all pictures to help those using screen readers Only use pictures if they help to illustrate a point, not for decoration Ensure that the image is clear and the viewer can make out any details or text if applicable Web guidelines placement Remember to put the most important information at the top of the page (think of newspapers and above the fold ) Avoid lengthy pages where users have to scroll to view the entire page Have a consistent page layout to help readers locate information 23
Copyright Please only use images that you have the rights iht to use. This includes: Images you have taken Images and logos where the original artist has given you permission Creative Common Licenses Please be sure to use correct citations if applicable Next Steps? Destiny Long TIU 11 / PA Distance Learning Project dlong@tiu11.org 24