Weebly Tutorial 1. Saint Jude the Apostle Catholic School Web Design. Mrs. Cartwright

Size: px

Start display at page:

Download "Weebly Tutorial 1. Saint Jude the Apostle Catholic School Web Design. Mrs. Cartwright"

Melvyn James Allison
5 years ago
Views:

1 Weebly Tutorial 1 Saint Jude the Apostle Catholic School Web Design Mrs. Cartwright

2 Purpose The following tutorial has been designed to get you started with the creation of your Weebly for Education site.

3 Curriculum References 7th Grade T7.S2.O2: Apply various methods of electronic collaborative sharing and communication such as: blogs, wikis, , document and video sharing. (Titanpad, Kidsblog, Nicenet.com, Skype, Facetime, Google Drives) T7.S2.O3: Communicate information and ideas effectively to multiple audiences using a variety of media and formats T7.S2.O5: Effectively use technology to complete a cross-curricular, collaborative project. T7.S3.O1: Demonstrate knowledge of school Acceptable Use Policy T7.S3.O2: Describe proper online behavior (cyberbullying, social networking sites, etiquette, permanence of online information) T7.S3.O3: Discuss online safety measures (protecting personal information, protecting computer from virus, appropriate website content) T7.S4.O11: Use Digital Media tools to communicate original ideas and stories T7.S5.O1: Apply existing knowledge to generate new ideas, products, or processes T7.S5.O2: Create original works as a means of personal or group expression T7.S5.O3: Apply technology skills creatively to real world situations T7.S6.O2: Plan and manage activities to develop a solution or complete a project

4 Tutorial Content This tutorial contains information on: Logging into the Weebly site Editing and adding pages Providing a title for your site Customizing your images Publishing your site

5 Important Note You will be using your ipad (NetTexts) to view tutorials throughout the design process. The designing and building of your site will occur on the computer work stations. Your ipad, and NetTexts, is your reference for this course as there is no textbook.

6 Logging In Go to student.weebly.com and log in using the username and password that were provided to you. You ll notice that this is a different username than what you are used to, but the password is familiar. If you have not already done so, take a picture of this information using your ipad so that you have a back-up copy.

7 Logging In

8 Edit Site

9 Editing Pages Do not abbreviate the titles of your pages. For example, spell out Language Arts, do not abbreviate it to LA. Directions on next slide.

10 Editing Pages Edit your pages. As a student, five is the maximum number of pages that you can have. You ll notice that you already have a Home page. Add four additional pages in this order: Language Arts, Social Studies, Math/Science, and Other. You ll want to select the Standard Page option when prompted.

11 Editing Pages Your Home page will have the tall header (this is how it defaults), and the other four pages will have the short header. vs Tall Header Short Header

12 Title Now, go to Settings, and change the site title to your first name, and then click Save. Note that this defaulted to My Site. Leave the show title on the top of your pages checked.

13 Image Go to Build to start editing your images. You can further customize your images with different options.

14 Image Here are some different image options: This is a good opportunity to customize your website to fit your personality and hobbies.

15 Image Design Principles Make sure to apply the design principle of unity in your design selection. Unity Creates a consistent brand and identity for your site. Forms a connection between your elements (pages, images) Holds your design together as the structure, both visually and conceptually. Consider color, repetition, alignment, consistency, and proximity. There is a lack of unity in this current design. The titles are not consistent in color or size. The black and white image is not repeated in the Tagxedo image.

16 Websites with Good Unity

17 Websites with Good Unity

18 Websites with Good Unity

19 Additional Information on Unity eveloping-unity-in-web-design/ basics/p/aaunity.htm Design/principles/unity/index.html

20 Publish Do you want to see what you ve built so far? Go ahead and publish your site by selecting the button on the upper-right hand side. When it prompts you, click continue, and then Education/Class Project.

21 Publishing Conventions The URL for your site is: Initial of your first name Initial of your last name You ll notice when you click on the link, it will bring you to a password-protected page. Our class password is glenridge.

22 Great work! Once you ve completed this tutorial, you will move onto Tutorial 2.

Gradecam (Access through

Gradecam (Access through Mastery Connect) At a Glance... Teacher prints DIY scantron type sheets After assessment, simply hold up scantron to device camera - and it will be automatically graded! Up to