16
Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Embed Size (px)

DESCRIPTION

What is Weebly? Weebly is a free website creator. The entire program works through an internet browser. The program offers already created webpage templates with lots of options. Weebly’s controls are intuitive and easy to navigate. Anyone using Weebly can create a professional looking page within a short amount of time.

Citation preview

Page 1: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Develop Your Web Presence Using WEEBLYTECHNO DRAGON PD | WEEBLY

Page 2: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Why do I want to create a web presence?

*Increase communication with parents and students through messages, blog posts, or videos.

*Store and share class resources (documents, web links, tutorial videos, etc…) which you, students, and parents can access.

*Offer additional learning opportunities that your limited class time does not allow.

Page 3: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

What is Weebly?

http://education.weebly.com/ed-features.php Weebly is a free website creator. The entire program works through an internet browser. The program offers already created webpage templates with lots of options. Weebly’s controls are intuitive and easy to navigate. Anyone using Weebly can create a professional looking page within a short amount of time.

Page 5: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Weebly Examples

•www.nicksabeelclass.weebly.com•www.hynes.weebly.com•http://owens7thgradesocialstudies.weebly.com•http://avermeulen.weebly.com/ •http://jkotas.weebly.com/•http://murtaugh.weebly.com/

Lake Orion•http://teacher-sites.weebly.com/•http://interactivesites.weebly.com/

Other•http://98755569.nhd.weebly.com/•http://nhdexample1.weebly.com/

Student Created

Page 6: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

What Other Features Does Weebly Have?

*Embed videos*Allow students to create their own sites (private to public, only teacher and student can see)*Allow students to submit assignments electronically *Set up a Blog within the website

Page 7: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

How Do I Get Started?

education.weebly.com Create a User Name, Password, and give your Lake Orion email

address Once you are logged in, you can begin personalizing your website

by choosing your template and color. Then you can begin adding content.

Page 8: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

The Basics of Weebly

With all elements of Weebly you simply choose an element to add to your page, left click on the element (hold) and drag to the page work space. (A temporary orange bar will appear, all items will go under this bar) note: You do not have an option on where to drop the element when initially setting up the page. You can edit different aspects of the element later.

Page 9: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

EditingEditing Design:

Click design tab

Click “All Themes” to view theme options

Choose a theme

Click “Preview Theme”

Click “Use Theme” or “Cancel”

Edit Text:

Click “Design Options”

Click “Site Title, Paragraph Title,

Paragraph Text and Links” to edit the font of your page

Editing Theme:

Edit generic images:• Click “edit image” (on

that image”• Click the small blue box

to remove the current image

• Click “OK” when asked if you are sure you would like to remove the image

• Click “add image” in upper left corner

• Follow adding image steps

• Click “OK”

Page 10: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Adding Pages

Adding Pages and blogs:

Click pages tab

Click add page or add blog

New pages will line up vertically. You can navigate through the page list using the mouse.

Click on the “New Page” to edit the title of that page

Click “Save Settings”

Adding Text to Page:

Click “Edit Image”

Click “Add Text”

Adjust font size, color, etc. (glow, shadow, and opacity (brightness) can enhance your words)

Click and drag text to desired location on the page

Add text

Page 11: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

You can manage the way pages appear on your home page by clicking on individual page bars on the page editing page.

Hide page in navigation (it will not show up on your home page) Click the box at “Hide page in navigation menu” (you will only be

able to access that page from the pages tab) password protect (with a paid account)

click the password protect page link page

click the link page to external site type or paste the web address of the site you would like to link click “save settings”

Page 12: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Paragraph with Title/Paragraph/Title Elements:

o Click and drag the paragraph with title element to the workspace o Edit the element using the blue tool bar at the top of the screen

Bold, italics, underline, font color, increase/decrease font size, delete formatting, create a link, left align, center, right align, full align, bullets, numbers, undo/redo. This tool bar is similar to “Word”

To use these tools first highlight the text you would like to format and then click on the appropriate button. To create a link:

o type text o highlight text o Click link icon

o Choose what type of link you are creating

a page on your website: you will be offered a dropdown menu, choose which page you would like to link and click “Save”

an outside website: you will be prompted to enter the website, type or cut and paste the web address, choose if you would like the link opened in a new window and click “Save”

File: click “upload file” choose the file, click “open” and click “save” email address: enter the email address you would like to link and click “save” (this option opens

your default email with the email address included in the “TO” section of the email) •Two Column Layout: this element is a way to change the layout of your page. You will use other elements along with this element.

Page 13: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Adding Images to WeeblyParagraph with Picture and Picture Elements:

Click and drag the Paragraph with picture element to the workspaceoAdd a title, add paragraph (follow editing steps as above)

Add Picture Click the blue “sample Picture/Click here to Edit” boxSelect the image from:

My Computer: Click “Choose File” (the file must be JPEG, GIF, OR PNG. You can determine the type of image file by right clicking on the image file and clicking “properties”) Click “Open”

Photo Gallery: Click “Photo Gallery” Search Flickr for imageClick on the image of your choiceClick “ok”

The Internet: Click “The Internet”Type or paste URL in space provided (i.e., Google images: find an image, click image, click “see full size image” this should take you to an individual page of the image, copy URL and paste in space provided on weebly page) (note: make sure url ends with JPEG, GIF OR PNG) Click “insert”

Page 14: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Adding Photo Gallery/Slideshow to Weebly

Adding a Photo Gallery: Click and drag element to the work space Choose picture(s) to be addedClick “Open”

Adding Slideshow: Click and drag element to the work spaceChoose a slideshow style by clicking on the chosen formatClick “Continue”Click “Upload Photos”

Page 15: Develop Your Web Presence Using WEEBLY TECHNO DRAGON PD | WEEBLY

Adding Video to Weebly

Adding Video: Click and drag video element to workspaceClick on film image “click here to upload video” (there is a size limit: 100mb)

(there is a brief wait time for file upload)

Adding Youtube video: Click and drag Youtube Video element to work spaceClick within element block, the blue toolbar will appearType or paste youtube video URL into the space providedChoose size and position Click publish