how to create a personal website with weebly: instruction...

How to Create a

Personal Website

with Weebly: Instruction Manual

N o r t h C e n t r a l T e x a s

C o l l e g e

1 2 / 9 / 2 0 1 2

Marissa Bunn Learn how to plan, design, create, and publish your

personal website for free using Weebly.com.

How to Create a Personal Website with Weebly: Instruction Manual

1

TABLE OF CONTENTS

INTRODUCTION.............................................................................................2

BEFORE YOU BEGIN ......................................................................................3

STEP 1: PLANNING YOUR WEBSITE ...............................................................4

STEP 2: GETTING STARTED ............................................................................5

STEP 3: BUILDING YOUR SITE ........................................................................7

Design ...................................................................................... 7

Part 1: Using Elements ................................................................ 9

Adding Text Elements ............................................................... 9

Adding Image Elements .......................................................... 10

Adding a Contact Form ........................................................... 11

Adding other Elements ........................................................... 11

Part 2: Adding Pages................................................................. 12

Part 3: Finishing and Editing ...................................................... 13

STEP 4: PUBLISHING YOUR SITE .................................................................. 14

STEP 5: EDITING AND PUBLISHING YOUR SITE ............................................ 15

APPENDIX: SUGGESTIONS AND TROUBLESHOOTING .................................. 16


2

INTRODUCTION

This instruction manual will enable you to create your online presence with a personal website. Creating your website will allow you to:

Showcase your work!

Show off your talents!

Share your up-to-date portfolio with potential employers or schools that you are applying to!

Are you computer literate but HTML ignorant? This manual is for you. Learn how to create and publish your personal website using Weebly.com (without learning HTML).

If you can use Microsoft Word and Mozilla Firefox, you can use Weebly.


3

BEFORE YOU BEGIN

You will need to make sure you have the following items to begin your website:

Access to a personal computer or computer work station that allows you to plug in your removable storage (such as a keychain flash drive). HINT! Many public libraries provide free computer and internet use. Check with your local library to see if they have a computer center or take advantage of your school’s computer lab.

Internet access, preferably with a high-speed connection such as Verizon FiOS. HINT! If you do not have internet access at home, but own your own laptop computer, many locations now provide free Wi-Fi connections. Check with your local libraries, your school, and even local restaurants!

An internet browser such as Internet Explorer or Mozilla Firefox installed on the machine you are using.

A plan for your website.

See STEP 1: PLANNING YOUR WEBSITE.


4

STEP 1: PLANNING YOUR WEBSITE

Before you create your website, you should have a plan. The sample website for this manual will be a personal portfolio designed to showcase the creator’s writing samples. Let the purpose of your website dictate the design.

The following are items you need to include in your website to create an effective portfolio:

A Home Page that states the purpose of your website and provides Links to the other pages.

An About Me or About the Author page that provides a brief and professional description of you.

A website Title that accurately describes what viewers are seeing. HINT! Remember, your website title will appear on the tab of viewers’ browsers, it is not necessarily the same name as your domain name.

Domain Name. HINT! Choose one that sounds professional if you are planning to refer schools, employers, or clients to your website.

Samples of your best work.

A Contact Page so that viewers can get in touch with you.

The following items are suggestions to think about when planning your site:

What is my site’s purpose? Am I looking for a job, applying to school, completing a school project, or just showing off?

What is the most effective way to show my work? Should all samples be placed on one page or multiple links?

How many pages do I need to get my website launched?

Who will see my site?

If you have considered all the necessary items and suggestions, you are ready to begin! See STEP 2: GETTING STARTED.


5

STEP 2: GETTING STARTED

The first thing you will do is create an account with Weebly. Follow the directions below to get started.

1. Use your preferred browser to go to Weebly.com. HINT! The sample website was created using Mozilla Firefox. Some steps may differ if you use a different browser.

2. Create an account using the Sign Up button. 3. Enter your full name. 4. Enter a valid email address. 5. Choose a good password. 6. Enter the displayed text to verify your humanity. See Figure 1 below.

Continue to the next page for sub-steps 7 and 8.

Figure 1


6

7. Enter your website’s title. HINT! You will be asked to choose a title for your website, remember this is not the same as your domain name. See Figure 2 to understand the difference between title and domain.

8. Enter your domain name.

Figure 2

Congratulations! Now you are ready to begin building your website. See STEP 3: BUILDING YOUR SITE.


7

STEP 3: BUILDING YOUR SITE

You are ready to begin creating your website. Since you already have a plan, you know what you want to show on your first page. By default, your first page will be your home page. The appearance of your website will default to the style of Figure 3 below until you make changes.

Design

The first step is to choose a Design. Choosing a design sets the style for your entire site. HINT! Remember, you can always change this later if you decide the design is not working for your site.

1. Click the Design tab at the top of the Weebly Editor.

2. Choose the design you want to use from Favorites or click All Themes for more options.

3. Click on the design you wish to use, and it will automatically be applied to your site.

See Figure 4 on the next page for one alternative design.

Figure 3


8

To create your home page you also need to know how to use Weebly’s Elements to:

Add text.

Add images.

Add a contact form.

Add other items such as videos.

Now that you have chosen a design you are ready to start adding content. See Part 1: Using Elements.

Figure 4


9

Part 1: Using Elements

Use elements to add pictures, videos, text, or anything else to your home page. The image below displays the Basic options on the Elements Toolbar. See Figure 5.

Adding Text Elements

Make sure you are on the Elements tab in the Weebly Editor.

Choose the type of text you would like to add, such as Paragraph with Title.

Left-click the icon for the element you would like to add and drag it to your page.

Enter your text by typing directly into your text box or cutting and pasting from your word processor. HINT! If you have planned your website carefully, you will already have your content written and edited.

Edit your text using the toolbar displayed below. Access the toolbar by clicking in your text box. See Figure 6.

Figure 6

Now that you can add and edit text, you are ready to start adding images! Continue to the next page to see Adding Image Elements.

Figure 5


10

Adding Image Elements

Place an Image Box by dragging the icon from the Elements Toolbar. The basic process is the same as adding a text box, but you will choose a type of image element.

Click where it says Click Here to Edit as shown in Figure 7 below.

Choose your image source when the window below appears. HINT! You will already have chosen which images to include during the planning stage, so your image should be stored on your computer (or storage device).

Click Upload a photo from your computer. See Figure 8 below.

Double click on the image you want to add. It may take a minute or longer for your image to appear depending on the file size. Edit your image as needed and save to complete the process.

Once you have saved your image, you can edit it again by hovering over it to access the Edit feature.

Now you can add and edit images. See Adding a Contact Form on the next page.

Figure 8

Figure 7


11

Adding a Contact Form

1. Drag the Contact Form icon to your page. 2. Edit your Contact Form by clicking Click Here to Edit. Form Fields will

appear in the Elements Toolbar. 3. Add new Form Fields by dragging an icon to your Contact Form. See Figure

9 below. 4. Click on Form Options to change settings such as the email address where

comments will be received. HINT! By default, Weebly will forward comments to the email you registered with.

Adding Other Elements

To add other elements, follow the same basic steps as you did with text and images.

1. Choose the desired element. 2. Drag the icon to your page. 3. Edit as needed and save your changes.

Other elements may include videos, slide shows, multiple columns, and more.

Now that you can work with Elements, it is time to add a new page. See Part 2: Adding Pages.

Figure 9


12

Part 2: Adding Pages

Using multiple pages on your website will help you keep your information organized and easy for users to find. HINT! Refer to your plan to see which page you are adding first.

1. Click on the Pages tab at the top of your Weebly screen. See Figure 10. The yellow arrow points to the Pages tab.

2. Click the Add Page button. See Figure 11. 3. Enter your Page Name. 4. Click to choose your Page Layout. 5. Scroll down to Save Settings and click the button, or simply hit enter on

your keyboard to finish creating your new page. HINT! You will return to the Weebly Editor screen, and your pages will automatically be linked.

See Part 3: Finishing and Editing

Figure 10

Figure 11

Figure 11


13

Part 3: Finishing and Editing

Now that you can use Elements and Add Pages, you have the skills necessary to complete your website. Refer to your Plan to ensure you have all the necessary pages and elements added. Before you publish your website, consider the following:

Have I added all the content I need for the purpose of my website?

Have I proofread all textual information?

Have I chosen a visually appealing style?

Is my site user-friendly?

Did I have a friend or relative (or enemy) review my site before I make it public?

If you can answer Yes to all these questions, you are ready to publish your website! See Step 4: Publishing Your Website.


14

STEP 4: PUBLISHING YOUR SITE

Congratulations! You have completed planning, designing, and building your website. You are ready to publish your website and make it public. Follow the steps below to go live.

1. Click Publish.

2. Wait for Weebly to publish your site.

3. Share your site with others via Facebook or Twitter by clicking on them in the dialog box shown in Figure 12 below.

Figure 12

HINT! Now that you have an active website, you will want to keep it updated. Continue to the next page to see Step 5: Editing and Republishing your Site.


15

STEP 5: EDITING AND REPUBLISHING YOUR SITE

Now that you are published on the World Wide Web, make sure to keep your website up-to-date.

1. Log in to Weebly.com to edit your website.

2. Edit existing pages or add new pages using the steps you have already learned.

3. Republish your website using the steps you learned in Step 4 to update your website online.

4. Reload your page if your updates are not visible when you visit your site online. Your browser may be using a cached version of your site.

That’s it! You have successfully created and published your website. HINT! As you continue to edit and update your website, you may want to explore more options in Weebly to refine the look and feel of your website. Good luck!


16

APPENDIX: SUGGESTIONS AND TROUBLESHOOTING

Suggestions

Maintain a professional online presence. Do not include content that would detract from your online image (such as drunk or indecent pictures).

Carefully proofread any text to avoid grammatical mistakes.

Keep the purpose of your website in mind as you develop your plan.

Most importantly, plan ahead. The more developed your plan is before you start, the easier you will find creating your website.

Troubleshooting

Q: Why isn’t my image loading?

A: Check your file size, the image may be taking longer than usual to load because your file is too large. Edit your images before uploading, and save to a smaller file size before trying to import to Weebly.

Q: There is not enough contrast between my text and my background color. How can I fix this?

A: Try choosing a different design theme to see if your text stands out more.

Q: I am still having trouble, where can I find more information?

A: If you do not see your question here, please refer to Weebly’s online help tool. There is a Help button in the upper right corner of the Weebly Editor Toolbar.

how to create a personal website with weebly: instruction...

Documents