Presentation is loading. Please wait.

Presentation is loading. Please wait.

LESSON #3 WEB DESIGN. WHAT IS WEEBLY? Weebly.com is web 2.0 like online site builder with some advanced features. Is the perfect tool for creating classroom.

Similar presentations


Presentation on theme: "LESSON #3 WEB DESIGN. WHAT IS WEEBLY? Weebly.com is web 2.0 like online site builder with some advanced features. Is the perfect tool for creating classroom."— Presentation transcript:

1 LESSON #3 WEB DESIGN

2 WHAT IS WEEBLY? Weebly.com is web 2.0 like online site builder with some advanced features. Is the perfect tool for creating classroom websites, student e-portfolios, and websites for assigned projects.

3 WHY USING WEEBLY? The drag & drop website editor is stunningly simple to use, and appropriate for use with students of all ages. Weebly enables your students to express themselves creatively using a variety of multimedia features, all within a protected environment that you control.

4 Provide compelling content / something of value Make sure each page in your website has something valuable to offer. Avoid Sleazy Elements Don't distract your visitors with blinking or scrolling text, animated GIFs, or auto-loading sound. Don't annoy your visitors with pop-up windows. Don't use put text over image backgrounds. Avoid scrolling text, summarize content. WEB DESIGN TIPS

5 Make it Easy to Find Stuff Put some thought into organization. Minimize clicking. Limit page length to 2 screenfuls, or 6-7 screenfuls for articles. Include a way to get back to the home page, on every page. Include the menu option on every page. Don't bog your website down Compress your image files. Don't let flashy multimedia ruin your site, keep it simple. WEB DESIGN TIPS

6 Website Readability No line of text should be more than about 650 pixels wide (25 cm.) Don't make your page too narrow or too wide. Use contrasting colors or simple backgrounds to make your text easy to read. Make the text large enough to read. Increase the line spacing (leading) to improve readability. Don't type more than a few words in ALL CAPS. Never use more than one exclamation point! Use a spelling checker. WEB DESIGN TIPS

7 The right and wrong way to use links Don't underline words if they're not links. Make links easy to recognize, blue or underlined. Explain what you're linking to. Don't open internal links in a new window. Always open external links in a new window. WEB DESIGN TIPS

8 Make sure it works, and that it keeps working Test your links. Remove dead external links periodically. Be accessible Make sure you create a contact page with enough information and several ways to find you. If you have social media accounts, include them. Finally choose an appropriate name for your site. WEB DESIGN TIPS

9 Subject’s/Teacher’s page: http://technologyamericano.webs.com/ Specific activity/lesson/unit page: http://environments-aoi-fair.weebly.com/ End of school year page: http://fcaq-international-writing.weebly.com http://technologyamericano.webs.com/ http://environments-aoi-fair.weebly.com/ http://fcaq-international-writing.weebly.com WEB DESIGN IN EDUCATION

10 YOUR CLASS WEBSITE ABOUT ME HOME THE CLASS GALLERY CONTACTS RESOURCES Brief Introduction Quick Bio Expectations Thoughts Ideas Brief Introduction Quick Bio Expectations Thoughts Ideas Brief Introduction Subject summary Objectives Syllabus Brief Introduction Subject summary Objectives Syllabus Web pages Books Videos Surveys Quizzes Tutorials Web pages Books Videos Surveys Quizzes Tutorials Videos Images Audio files Student’s work Digital portfolios Videos Images Audio files Student’s work Digital portfolios Email Contact form Social media Wiki info Blog info Email Contact form Social media Wiki info Blog info 1. Create a Weebly account and individually design a web page for your class with the suggested subpages and contents.


Download ppt "LESSON #3 WEB DESIGN. WHAT IS WEEBLY? Weebly.com is web 2.0 like online site builder with some advanced features. Is the perfect tool for creating classroom."

Similar presentations


Ads by Google