w e e b l y

1. www.weebly.com How to create a website from scratch

2. Go a head • You should have an internet access. • Visit www.weebly.com • You need to create a new account OR sign up with FACEBOOK and that’s what I did.

3. Then it take you to the next page which asks you to pick the type of your site as illustrated below. • I chose the site icon that my university project required to build a website. • The next page will be choosing you website design. Actually, you will feel lost because there are many good designs but do not worry if you change your mind, you can edit it later.

4. Start to work • There is a message appear which asks you to pick your domain, ignore it at the beginning. • Then there is a tutorial WEEBLY which shows you the steps of building your site. You can ignore it, too. • you will be in the first page which it is “HOME” , I started by editing My Site title. • You will see on the left of the page the basic panel that you can use in order to add your files, pictures, videos and other features.

5. This illustrated what I explained before. The panel

6. IMPROVE YOUR SITE • Click Pages tab to add additional pages to your website. You also have the option to organize and rename pages. The pages will appear on your main page. • Then, you turned to this page where you can change the page title and the page layout. You also can make some pages as a sub page on the left by moving it under the page. • Save your work. Home About Contact The Basic Pages

7. To the left side top, click on the orange icon titled “Add Page +”, a list of options appears, choose “Standard Page”. • Type the title of the page. • Click on “Save & Edit”. • Note: You can copy or delete any of your pages from the same page - the one I was talking about above-, just click on the page from the list of pages on the left column and choose “Copy Page” or “Delete Page”.

8. Example of creating subpage

9. Back to your home page and then start to add the features such as text and images. • To add text and other features drag and drop them to the desired location beside the panel. • You click on the box which leads you to pick image from your compute • Make sure that you save your work. • You can edit the images and the text, too.

10. What to add • From this panel you canadd what you want to your site. But you will notice that some features do not work except if youupgrade your site. • Do not worry, if you do so there is a warning message tells you that you have to upgrade your site in order to use this feature.

11. Some of these features which I added to my site are: • The form structure • The youtube videos structure the structure guides you how to embed the video.

12. Gallery structure • The buttons structure • Links • Hyper links

13. The contact info; you add more icons. • The amazing feature in weeblyis that you can create your own blog.

14. The map: 1- From the “BUILD page, drag the “MAP” icon into any page you have already chosen. • Type your address and choose any more settings if you like from the box.

16. “Like” & “Share” Face book buttons • You can also add like button on your website so that visitors can “like” and “share” your page. • It is an easy task just follow the following steps:1- Follow this link https://developers.facebook.com/docs/plugins/like-button/2- Type your website URL in the box titled “URL to like”.3- Click on the button titled “Get Code”

17. 4- You will have a new window that contains two boxes, the first one has a long  ‎JavaScript SDK, and the second one contains a short one. Copy the long one. 5- Go back to your website and drag an “EMBED CODE” into any of your pages, and then paste the long  ‎JavaScript SDK in new box that you will have. 6-Again, go back to the page from where you have got  ‎JavaScript SDK, and copy the second  ‎JavaScript SDK that is the short one. 7- Go back to your website again and drag an “EMBED CODE” into any of your pages, and then paste the short  ‎JavaScript SDK. 8-Now you are done. The “Like” and “Share” buttons do

18. How to create a “slideshow” 1- Drag the “SLIDESHOW” button from the panel into any of your pages. 2- A new window will appear, choose any slide show style you like and press “Continue” 3- Upload photos from your computer, by the way, you can select more than one picture a time by keeping pressing “ctrl” on your key board while selecting picture you like, then click on “open”. 4- Click on “save” after finishing. 5- you will see your pictures appear automatically.

19. How to arrange you pages 1- On the top of the page there is a bar contains certain titles, click on “PAGES”. 2- Look at the list of pages on the left column , click on any page you want and drag it into any position in the list, you can drag it to be the first page, the second, third etc. You can do the same with the rest of any of your pages.

20. How to edit the image of your theme 1- Click on the main image of your theme. 2- Choose “Edit Image”. 3- Choose “Add Image”. 4- Choose “Upload a photo from your computer” 5- After uploading the photo, on the top of your page, there are certain options such as “Crop”, “Rotate”, “Opacity” etc., you can make changes to your image from these options and after finishing, click on the orange bottom “Save” on the right side and choose “Save to this page only”.Note: From the same page you can also add a text by clicking on “Add text”, and you can type any text you like. See the next picture

22. How to add columns • You can also add columns to any of your pages so that they appear better by following these steps: 1- Drag a “COLUMNS” button into any page you like. 2- When you click on the new box button on the page, a box contained number of columns appear. 3- Choose the number of columns you need . 4- The page will be divided into columns, now you can add any content you like.

23. How to add Google ads: • From the panel picks Google ads which leads you to this page :

25. The final result will appear on your website like this

26. Vote for your website • You can check the popularity of your website by asking the website’s visitors to vote for it. • So you can choose from the panel the POLL feature.

27. follow the steps which are shown in the illustrations:

31. The final shape of my poll

32. If you decide to unpublished your website …. 1- Click on “SETTINGS” 2- Choose “Archive/ Un-publish”

33. 3- Choose the red button “Un-publish Site”.

34. How to change your site address 1- Choose “SETTINGS”. 2- Choose “Change” to change the address or title. 3- Type the new address or title, and then click on “Continue” 4- Now the site address or title has been changed.

35. How to edit your website • You can save changes and edit your website from time to time.

36. Check statistics of your site • You can check the statistics of your site by clicking on the edit page:

38. You can also check the blogs/ forums of the site:

40. The last steps • When you have done, then you can publish your site.This feature allows others to visit your website, saves your website changes, and sets your subdomain (website) name! • It is FREE and can upgrade to have more features.

41. Let’s the world visit you! • Once you publish your page, you are now ready to share your weebly portfolio link.Thisis the link that will allow others to visit your portfolio. You can also email the link to anyone! And share it.

42. Search your website on GOOGLE • First step go to this link: www.google.com/cse/

43. Step two:

44. Step Three:

45. Step Four

46. Step Five • Step Six

47. ourfinal piece of art Maysaaalshabatat.weebly.com Join me there

48. http://maisbmayyas.weebly.com/

49. http://juhainaalmusa.weebly.com/

50. Resource:www.weebly.com Prepared by: Maysa'aIssa MaisMayyas University project Teaching English through Computer Supervised by: Prof. Ruba Bataineh