Page 1

Instructions Project

Introduction:
The purpose of these set of instructions is to help a user create a personal e-portfolio using the Weebly online webpage generator. An e-portfolio is a personal website created by a user to showcase themselves and documents they have created during different projects.

Table of Contents:
Before You Begin . Page 2

Creating an Account . Page 2 Creating a New Website Page 2 3

Creating Your Home Page and Adding Text . Page 3 4 Choosing a Design Adding Pages Adding Visuals . Page 4 . Page 5 . Page 5 7

Organizing Your Information . Page 7 Publishing .. Page 7 8 . Page 9 13

Optional Embedding

Page 2

Before You Begin:

You will need to have the latest version of Mozilla Firefox installed on your computer. Follow this link (http://www.mozilla.org/en-US/firefox/new/) and follow the directions to downloading and installing Firefox onto your computer. Decide what you want to include in your e-portfolio. You should include information on projects you have completed as well as personal and contact information. Gather up necessary documents so they are easy to find while creating your webpage. Be sure to have a valid email address, you will need one to make an account on Weebly.

Creating an Account:
1. From the latest Firefox browsers go to (http://www.weebly.com/). 2. On the homepage of the Weebly website type in your full name, valid email address, and a password where indicated. 3. Once your account has been accepted you are ready to begin creating your very own eportfolio.

Creating a New Website:

1. If you have just created your account you will be brought directly to a page to create a new website. If you are returning choose the Add Site selection under the My Sites tab. 2. Next, add a title for your website in the to Enter a title for your website box. 3. Under the dropdown menu of Type of Site choose Portfolio and then click the Continue button.

4. Now you will be asked to register a domain for your website. We will be using a weebly sub-domain so select the radial button that says Use a Weebly sub-domain and type in

Page 3

the domain name you want and click Continue.

a. Note that the domain name is the web address that people will use to get to your website. 5. You are now ready to add content and personalize your e-portfolio.

Creating the Introduction/Home page and Adding Text:

1. Your site will start with one page originally. Use this page to create your introduction / Home page. 2. Using one of the text insertion tools (Paragraph with Title, Paragraph, or Title) we will begin inserting information on the page. 3. Click on the text tool you wish to use on the page, and then drag it to where you wish to insert it on the page. a. For now select the Paragraph tool and drag it to the page.

Page 4

b. Note that the orange bar will indicate where your tool will be inserted when you release the drag. 4. After dragging the item to the page, type the text that you wish to enter on the page. a. For now use the sample text provided, or create your own, to fill out this page. 5. You have now successfully created your introduction / Home page. Reminder: You should always try to broadcast who your user will be in the introduction page, as well as stating what the project is and what its goals are. You should never present large amounts of information without breaks in pages or paragraphs, in lieu of Walls of Text.

Choosing a Design:
1. After creating your website your first step will be to choose a design for your website. In order to choose a design for your site you must click on the Design tab at the top of the page in the Weebly Editor.

2. There will now be multiple designs listed in the Weebly Editor. Clicking on one of these designs will apply it to your site and allow you to preview it. 3. After choosing your design you will want to return to the Elements section by clicking on it in the Weebly Editor.

4. You have now successfully chosen a design for your portfolio. Reminder: You should always take into account your audience and what you wish to reflect on your site when considering your portfolios design.

Page 5

Adding Pages:
1. Now we will add a new page to the portfolio. To add a new page to your portfolio you must click on the Pages tab in the Weebly Editor.

2. Once in the Pages tab, you will see every page you have created so far, which should only include the Home page. 3. To add a page, you must first click on the Add a Page button right below the Manage Pages header.

a. Note by dragging the indicator for the new page you control the page order on the portfolio, or even make it into a sub-page. 4. In the Page Name box type the name that you wish to call the page. 5. After you are finished click the Save Settings button and you will be returned to your portfolio. 6. You have now successfully created a new page.

Adding Visuals:
1. Next will be adding visuals to the portfolio. There are two methods to adding graphics to the portfolio, but for now we will discuss the first method. 2. The first method to adding graphics is to add a visual to the actual page. To do this we must choose one of the visual tools from the Weebly Editor, Paragraph with Picture or Picture. a. For now let us choose the Picture tool. 3. After choosing one of these tools you must drag it to the page as we have before. After placing it a box will come up that says Click Here to Edit.

Page 6

4. Click on the box and it will bring up an option pane that presents you the choice between uploading a picture, finding a picture, or linking a picture.

5.

6.

7. 8.

a. For now we will be uploading a picture from our computer. The file will be provided for you, but you may use your own if you wish. b. Note the file must be of .JPEG, .GIF, or .PNG format. No other formats will be accepted. After choosing the graphic you wish to upload, it will appear on the page where you specified. a. Note there are multiple tools for editing visuals and graphics on your portfolio in Weebly, but we will not delve into those tools during this project. The second method for inserting a visual on your portfolio is to choose a design that comes with a banner visual, and then change the banner visual to a graphic or visual of your own. To change the banner image you must keep your mouse over the banner until the Edit Image button appears. After pressing the edit image button you should click on the red x in the top right corner of the image to delete the original.

Page 7

a. Note that deleting the original image is simply to prevent image overlapping or clutter, and that the original visual can be reverted. 9. Now we will click on the Add Image button in the top left corner and we arrive at step 4 again. 10. You have now successfully added an image to your portfolio. Reminder: You should always keep in mind your audience when attaching images or visuals to your portfolio, ensure that the visuals correspond to the information and do not detract from the page, and never overpower your information with graphics.

Organizing your Information:

1. After you have finished creating your introduction / Home page or any other pages you should create a new page in order to keep your information organized. 2. Try to organize like information or projects into similar pages or into sub-page categories. 3. Also make sure to separate information as it corresponds to your projects works. For instance, do not have one project and then a different project on the same page. a. Note that being able to successfully organize your portfolio is crucial. 4. After you have successfully organized your portfolio, you are finished with the portfolio and should proceed to publishing it.

Publishing:
1. Now that we are finally done creating and organizing the portfolio so now it is time to save it and publish it, so that it can be seen online by others. In the top right corner of the screen should be a button labeled Publish. Click on this button. 2. If this is your first time publishing the portfolio it will ask you to choose your domain again, as we did when creating the site. As we did earlier, select the radial button that says Use a Weebly sub-domain and type in the domain name you want and click Continue.

Page 8

3. After clicking the continue button it will begin to save and publish your website. A window saying Website Published! should pop-up, share on social networks, or proceed to your site with. Click on the link in the middle and you will be led to your published portfolio, where you can view it without the Weebly Tools present, as any other visitor would see it.

a. Note that the notice telling you that (your domain name).com is also available should be ignored as to obtain this domain you would need to pay for the domain rights. 4. You have successfully completed and published your portfolio. You are now finished with the project and should inform your facilitator and answer their questions, or you may continue onto the Embedding section should time permit.

Page 9

*Optional* - Embedding Documents with Scribd:

1. First you must go to the Scribd site (http://www.scribd.com/) and it is recommended that you create an account. a. Many people attach their Facebook account to Scribd and allow it to sign in using Facebook. 2. After signing in you should click on the Upload button in the top-left hand corner of this site, as show here.

3. Select where you wish to upload your document from and then click Upload. For the sake of these instructions I will select to upload a document from my computer.

Page 10

4. Now we choose to upload the document from where it was saved on the computer.

5. After selecting our document we must agree to the terms of service for Scribd, which ensure that you have the rights to the document that you are submitting.

Page 11

6. After choosing to upload your document it will run through a few processes and then lead you to a screen requesting your e-mail if you have not signed in.

a. Note if you have not signed in you must enter your e-mail to proceed. 7. If you are signed in, or after entering your e-mail, you will be led to a screen showing all of the documents you have uploaded.

a. Note that the character errors in the summary are nothing to worry about and are caused by Scribd trying to scan the document and pull text incorrectly. 8. From here you will click on the document you want to embed (or link) to your webpage. Clicking on the blue name of that document will take you where you need to go.

Page 12

9. Now you will be brought to a screen that will show the Scribd interface for your document. You need to to click on the Embed button as shown below.

Page 13

10. After clicking on the Embed button we will want to copy the HTML5 code by selecting it and pressing the Copy button or by using right click copy (or ctrl+c).

11. Now we will need to go back to the Weebly portfolio we have been making and select the Custom HTML tool from the Weebly Editor. We will need to drag this tool to the page to insert it where we want, as we did with the text tools.

12. Now that we have the HTML box placed were almost done. We need to highlight and erase the text that says Click to set custom HTML. Instead we want to paste the code we copied from the Embed button on Scribd, using right click paste (or ctrl+v) to paste the code.

13. Finally just click anywhere outside of the textbox and allow the Scribd document a few seconds to validate and load. It should appear right where you specified the HTML code box to be. 14. Now you have your document embedded in your website using Scribd.