Weebly BasicsNell Eckersley

http://bit.ly/AETechToolbox

2

Sample Websites• http://mrnystudent.weebly.com/ • http://techtoolboxpd.weebly.com/ • http://www.emergingtechforadulted.com/• https://usadultliteracy.wordpress.com/

http://bit.ly/AETechToolbox

3

Pre-ThinkingWhat do you plan to use your website for? Draw a basic sitemap to outline your website. This will help you when you are asked to choose a themeWeebly gives you three default pages Home, About, and Contact

Tip: Use post-it-notes for the sections in your sitemap so you can easily rearrange them

http://digestwebdesign.com/sitemap.html

Organizing website content (Information Architecture) https://www.smashingmagazine.com/2010/03/starting-out-organized-website-content-planning-the-right-way/ Creating a Website Outline and Site Diagram (video) https://www.youtube.com/watch?v=umqojkqaTck

4

Pre-ThinkingHave a URL name idea--your free URL will look something like this http://nelightful.weebly.com/. Have a few options incase your first option is already taken.

Tip: The URL does NOT have to contain the name of your site, but should be easy to remember and type. Shorter is better.

http://bit.ly/AETechToolbox

5

Pre-ThinkingTo create your Weebly account you will need to use an email address. Use an email address you can access easily now so you can verify your account straight awayUse a password you can remember

Tip: Here’s one way to make a pretty secure password: Take a word or phrase and remove the vowels from it. For example, "eat the cheeseburger" becomes "tthchsbrgr". You might want to add a number or special character and capitalize the first or last letter.

http://www.wikihow.com/Create-a-Password-You-Can-Remember

6

Let’s get started:1. Go to

http://www.weebly.com2. If you don’t already have

an account, click on Try It Free.

7

Weebly Dashboard: Click the arrow to select new site or find another site you already have create, or click Edit Site to Edit the site currently displayed

8

Creating a New Site: Click Add Site from the drop down menu. Weebly will take you through the next steps

9

10

Finding/Creating ImagesCoppyright Free, Royalty Free and Creative Commons• https://www.flickr.com/creativecommons/ • https://pixabay.com/ • http://www.imagesource.com/royalty-free • http://www.gettyimages.com/creative-images/royaltyfree• Photo Editor https://pixlr.com/ • Graphic Design Software https://www.canva.com/

Tip: Create a website folder and save all the website images there so you can find them again

11

12

13

14

15

16

17

18

19

20

Weebly Interface http://adultedtechnologytoolbox.weebly.com/

21

22

Weebly Tutorials• How to do everything

http://hc.weebly.com/hc/en-us/categories/200044378-How-to-Do-Everything http://bit.ly/weeblyeverything

• Video Tutorials https://www.youtube.com/user/weebly http://bit.ly/weeblyyoutube

23

Weebly Resources• EdTech Tip: Webbing with Weebly http://

www.gpb.org/blogs/education-matters/2015/09/30/edtech-tips-webbing-weebly • Using Weebly for Digital Student Portfolios http://

edtechchic.blogspot.com/2016/03/using-weebly-for-digital-student.html • How to Embed Quizlet Flashcards in to a Weebly website

https://msdrasby.com/2016/03/05/how-to-embed-quizlet-flashcards-into-weebly/ • Web Design with Weebly for Education http://

www.learningedtech.com/web-design-with-weebly.html

24

Domains & URLs• Dotster https://www.dotster.com/• Go Daddy https://www.godaddy.com/• 1 and 1 http://www.1and1.com/

25

A Note about Web Design• Why Aesthetics Matter to Learning https://

www.td.org/Publications/Blogs/Learning-Technologies-Blog/2015/04/Why-Aesthetics-Matter-to-Learning

• 1990’s Web Design http://blog.ambitious.me/2012/04/how-websites-looked-like-in-the-1990s/

• Make any website look like 1990’s http://www.wonder-tonic.com/geocitiesizer/

• Good Design http://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/

• User Experience Design https://en.wikipedia.org/wiki/User_experience_design

26

Nell Eckersley▪ Literacy Assistance Center▪ Evaluation http://bit.ly/1km64BF ▪ NellE@lacnyc.org ▪ @LACNYCNell

Evaluation http://bit.ly/1km64BF My Contact Info