Weebly Basics Tutorial: Create a Home Page. Create a Home Page

Size: px

Start display at page:

Download "Weebly Basics Tutorial: Create a Home Page. Create a Home Page"

Milo Gerald Murphy
6 years ago
Views:

1 Create a Home Page Weebly is a free online web authoring tool to help you build and publish a website. This tutorial will help you get familiar with the functions and basic skills in using weebly to create your course site. 1. Register your Website The first step to create your course website is to register an account in weebly.com. Please use this this URL or to register your account because you will earn $10 credit when you publish your site. The credit can be used to upgrade your account. You won t earn credits by registering from weebly.com. You can also register an account by accepting the invitation from your friends. Since normal registration procedure is included in the invited-registration steps, we will show you how to register your course through invitation. When receiving the notification, you will see the following screen: Picture 1.1 Invitation After clicking the highlighted Get started here, you will get started with the registration procedures. The link will navigate you to the home page of Weebly (Picture 1.2, which is also 1

what you will see when you click these links: http://www.weebly.com/link/vezntd or http://www.weebly.com/link/xne3bp ) and you are asked to fill in your basic information, such as full name, email, and password.

2 what you will see when you click these links: or ) and you are asked to fill in your basic information, such as full name, , and password. After completing this step, you will get your own account at Weebly. 2. Set up Your Website Picture 1.2 Registration The second step for you to build a website is to set up the basic elements of your website. You will be consulted which pricing option you will choose for the account. Options are as below (Picture 2.1) and you can decide based on your needs. For the purpose of this course, you choose Free version. Picture 2.1 Pricing Options 2

After deciding the pricing plans, Weebly will ask you to categorize your website. Multiple options can be available after you clicked on the triangle (Picture 2.2).

3 After deciding the pricing plans, Weebly will ask you to categorize your website. Multiple options can be available after you clicked on the triangle (Picture 2.2). Taking our course website as an example, I will choose Education and in the emerging Category box, I will select Teacher. The course website you create is highly recommended to combine with your daily instruction so Education may be preferred choice but you are also free to choose any category based on your website plan. Certainly, you can also skip those procedures if you want. Picture 2.2 Categorize Your Websites I Picture 2.3 Categorize Your Website II 3

4 Then you can see the following screen (Picture 2.4) pop out and this screen will also be what you initially see when you log in Weebly later. When you click the highlighted My Site or Edit you can further edit the course site. Picture 2.4 Edit My Site If you are to create a new website, Weebly will ask you to choose the focus of the website, Site, Blog, or Store. According to our needs for the course, I will choose the Site. You can adjust the settings based on your needs, too. Picture 2.5 Site Focus Then you will be navigated to choose a theme for your website (Picture 2.6). Weebly provides a series of beautiful templates and you can pick any one from them. If you want to change the template later, you can also see the options in the control panel on the editing screen. 4

Picture 2.6 Choose a Theme The following screen is for you to Choose Your Website Domain. There are three options for the domain: Use a Subdomain of Weebly.

Register a New Domain is a paid service and you can have an external domain. As the name shows, Connect a Domain You Already Own requires you have a previous domain so that you can connect.

5 Picture 2.6 Choose a Theme The following screen is for you to Choose Your Website Domain. There are three options for the domain: Use a Subdomain of Weebly.com, Register a New Domain, and Connect a Domain You Already Own. Use a Subdomain of Weebly.com is a free service and there are no limits on the number of words for the title. Register a New Domain is a paid service and you can have an external domain. As the name shows, Connect a Domain You Already Own requires you have a previous domain so that you can connect. Considering the needs, I choose Use a Subdomain of Weebly.com for the course website. You can type the domain name in the text field and if the domain name is still available, you can see the signal and move to the next step. Then after you see the following screen (Picture 2.7), you need prepare to build your own site. Picture 2.7 Build My Site 5

interface. The first screen will look like the following one (Picture 3.

6 3. Build My Site a. Get Familiar with the Interface When you start to build the site, you need get accustomed to the interface. The first screen will look like the following one (Picture 3.1) and you will add and edit course contents on this screen. Picture 3.1 Interface Picture 3.2 Sidebar Elements Picture 3.3 Drag the Elements to the Field Elements are available in the left sidebar as shown in Picture 3.2. They have different categories, including Basic, Structure, Media, Commerce, and More. If you need certain functions, you just need select the function and then drag it to the place you want to move to. For example, if you 6

want to add a title to the content field, you just need select Title from Basic and then drag it to the place you like (Picture 3.3). Then you can also see Control Panel (Picture 3.

7 want to add a title to the content field, you just need select Title from Basic and then drag it to the place you like (Picture 3.3). Then you can also see Control Panel (Picture 3.4) on the home page. Each option will feature distinct function. For example, build will allow you to edit the site; design enables you to change themes and fonts; pages is for you to change the setting for each page, including home, about, and etc.; store empowers commercial products and information; settings is the place where you can change the basic information of the site. On the top right corner, you can see the orange button, Publish, and this is for the website to go public. You need re-click publish each time you update the content. b. Edit the Logo and Title Picture 3.4 Control Panel Then, get started with the course website design! The first step for a course website design is to create a logo. Weebly support both texts and images for the logo. You can type in the title or upload the logo you created for the course. Picture 3.5 Edit Logo When you move the cursor to the title area, it will pop out the highlighted box. You can choose off (to close), text (title), or logo (image). If you choose Off, the title area will disappear. If you choose text, you just need type in the title in the text box. If you choose logo, you can upload the image you have as logo. The tutorial on how to create a logo is located in Module Three, where you are required to create a logo for your site. So don t worry about this part now. If you choose logo, you will see the upload screen and you can choose to select photos from your computer and online resources. You can create your own images but do not use the copyrighted images found from Internet. Upload function can only allow you to upload one 7

8 photo; but occasionally, you may need several photos and text boxes for your logo. So you can check Picture 3.7 to see how to deal with this situation. Picture 3.6 Upload the Photo Picture 3.7 Edit the Logo I will use three separate pictures, T, A, E, as my logo but I can only upload one picture on the upload screen. To resolve this problem, you can click the logo under editing status and it will pop out a control panel like the picture above. You can click on Edit and then move to the screen to create a logo with multiple images. Picture 3.8 Edit the Logo with Multiple Images As the above picture shows, you can use Add Image and Add Text to enable the logo has more than one image or text box. Besides, after you select the picture, it will pop out a new function panel and you can adjust the setting of the photo to make it look more professional and beautiful. For example, in my course website design, I continue to upload the images of A and E and the ultimate logo shows as below. 8

9 Picture 3.9 Logo c. Edit Headline and Description The next step is to edit the headline and description of the website. Picture 3.10 Headline and Description Those two fields are all text-based. What you need do is to move your cursor over this field and then click to type in the headline and course description. Headline and description are supposed to be concise and clear for readers to understand what the website is about. So before typing in the texts, remember to write as clear and precise as possible. 9

There is also one Button Text in this area and it is normally used to navigate to Frequently Question page or the instructor s email address.

10 Picture 3.11 Edit the Text You can also revise the text on the screen. After selecting the text, you can see the text panel and those settings can help you change the font, create the link and also restore to original status. There is also one Button Text in this area and it is normally used to navigate to Frequently Question page or the instructor s address. For this course website, I link the button text to the instructor s address. To create the link, you need click on the button and the editing panel will pop out (Picture 3.11) and you can change the button type, link, spacing, and etc. through adjusting the setting. Picture 3.11 Button Text 10

Picture 3.12 Change the Link If you want to change the setting of link, you just need click on link and the screen will show as Picture 3.12. You can define the link of the button as a website URL, standard page, store page, file attachment, or an Email address.

Edit the Content Basic As described above, there are five categories of elements can be added to the content field, including basic, structure, media, store, and more.

11 Picture 3.12 Change the Link If you want to change the setting of link, you just need click on link and the screen will show as Picture You can define the link of the button as a website URL, standard page, store page, file attachment, or an address. Make sure to select the box Open link in new window if you link to an external page or web site URL. d. Edit the Content Basic As described above, there are five categories of elements can be added to the content field, including basic, structure, media, store, and more. Among basic elements, besides text and image, you can also add a slideshow to the content field or your side bar. If you want to do so, drag the slideshow icon to the location where you want to add. Then you will be asked to choose a slideshow style. You can choose what you like from the slideshow style as shown in picture Picture 3.13 Slideshow Templates 11

Picture 3.14 Slideshow In my course website design, the slideshow is used as a navigation tool to provide readers an overview of content for the whole course.

After you select the slideshow element, the panel will pop out and you can change settings of slideshow and also add or edit photos as shown in Picture 3.14.

12 Picture 3.14 Slideshow In my course website design, the slideshow is used as a navigation tool to provide readers an overview of content for the whole course. Slideshow is also a great tool for demonstration or interpretation by images. After you select the slideshow element, the panel will pop out and you can change settings of slideshow and also add or edit photos as shown in Picture If you click on Add or Edit Photos, you will be able to edit the photo through the screen below. You can add photos by uploading and then edit those photos. While editing the slideshow, you can create hyperlink, insert captions, and also delete the photo. Picture 3.15 Slideshow Photos 12

13 Structure Structure elements are intended to frame the layout and make it more professional. Since the footer function is not free for Weebly, you can create your own footer freely with Divider. You just need drag the divider line to the content field and then drag another text field below divider line to create your own footer. Picture 3.16 Divider Line In addition, columns function is also widely used in organizing the layout elements. You can drag elements to the place you like and then add more elements to fill the column so that the layout looks more symmetrical and professional. For example, I use columns to provide instructors information on the home page. After I dragged a columns item to the content field, I further added Text+Image and then the structure can form the symmetry between elements. Picture 3.17 Columns Media Weebly supports a number of media formats including HD video, audio, document, Youtube video, flash, and file. Among those six formats, HD video, audio, Youtube all cost fees but the other three are free. Here I will use Youtube video as an example to show how to embed media files in this website. The first step for you is to drag the element to the intended place. I dragged Youtube video element and then click on the element. The following screen will emerge and then you can search the video through URL and also adjust the spacing, alignment, size, and etc. Once you have inserted all the necessary information, Youtube video is embedded in the website. 13

site. What you need do is to find the highlighted Publish button on the top-right corner.

14 Picture 3.18 Youtube Video 4. Publish the Site Based on the tutorial above, you are assumed to create a high-quality website design so the next step is to publish the site. What you need do is to find the highlighted Publish button on the top-right corner. After you click the button, the course will become public. Do remember to republish each time after you revise the website content. Picture 3.19 Publish After clicking the Publish button, you can see the following screen, which means the website has been public. You can also check out your domain again. 14

15 Picture 3.20 Publish Successfully 15

Study before beginning these instructions.

Study before beginning these instructions. NOTE: You will be switching back and forth between two sites. 1. Education.Weebly.com where you edit and create 2. Your site which is what the public will see (i.e., eesl521.weebly.com) Study http://eesl521.weebly.com