Download File - Weebly

Document Sample
Download File - Weebly Powered By Docstoc
					                                            ALTC PRIORITY PROGRAMS PROJECT 2011



              Weebly Instruction
                  Manual
            Getting started with Weebly - Part 1
                                                               Written by Binh Lieu (2011)


     Table of Contents
Getting Started ............................................................................................................................................................................. 2

Signup with Weebly...................................................................................................................................................................... 3

Choosing a title for your website .................................................................................................................................................. 4

Choose your website domain name ............................................................................................................................................. 5

Start Building ................................................................................................................................................................................ 6

 Adding elements......................................................................................................................................................................... 6

 Adding Basic Elements................................................................................................................................................................ 7

           Adding Text ...................................................................................................................................................................... 1

           Hyper linking Text ............................................................................................................................................................ 8

           Linking to your own pages ............................................................................................................................................. 10

           Linking to another website............................................................................................................................................. 10

           Linking to a file ............................................................................................................................................................... 11

           Linking to an Email Address ........................................................................................................................................... 11

           Remove a Link ................................................................................................................................................................ 12

 Adding Multimedia Elements ................................................................................................................................................... 13

           Photo Gallery ................................................................................................................................................................. 13

           Photo Gallery Toolbar .................................................................................................................................................... 14

           Slideshow ....................................................................................................................................................................... 15

           Managing Slideshow Photos .......................................................................................................................................... 16

           File Element ................................................................................................................................................................... 17

           Flash Element ................................................................................................................................................................. 18

           YouTube Video ............................................................................................................................................................... 18

Managing Pages ......................................................................................................................................................................... 19

Webpage Design......................................................................................................................................................................... 20

           Favourites ...................................................................................................................................................................... 20

           Design Options ............................................................................................................................................................... 20

           All Themes...................................................................................................................................................................... 21

Settings....................................................................................................................................................................................... 22

Publishing your Webpage ........................................................................................................................................................... 23
Getting Started
Please give some thought to the message you want your site to convey for your
intended viewers. What would your audience be interested in knowing?

Set up a project folder and gather any text, graphics, audio and video files that
you might like to use.

Plan your site. The last page will summarize the whole website and have link to
each separate section. Let's now start with your first page and build the site as we
go.

If you already have an account.

    1. Navigate to http://www.weebly.com

 Type your username and password in the top right hand of the Weebly website.
Once logged in, you will be presented with the same screen as Figure 1. Click on
the blue "Edit Site" button to continue or start editing your webpage. Skip the
next section ("Signup with Weebly") if you already have an account.




    Click to start building
    website




                              Figure 1: Existing User Logged In




                                                                            Page | 2
Signup with Weebly
Before you can start using Weebly you must sign up for an account.

    2. Navigate to http://www.weebly.com




                             Figure 2: Weebly Main Page

    3. You should be presented by a page similar to Figure 1. Start off by
        entering in your:

             Username
             Password
             Email

    4. Once you've filled in your details click on the "Sign Up" button which is
       coloured orange on the page.




                                                                             Page | 3
Choosing a title for your website
Once you've entered the in your details and clicked on the "Sign Up" button. You
will be given the following page.

   1. Choose a title for your website and type it into the first text box. The
      title can be changed later.




                            Figure 3: Choosing a site name

   2. Next choose the type of website you wish to create.




                               Figure 4: Website Type




                                                                         Page | 4
Choose your website domain name
Next we must choose a name for your website. This is the name which people will
type into their browser to get to your website.

NOTE: Make sure that you've got the first option selected and that is highlighted
green like the one in the picture. The other two options are for paid licences or
require some payment. The first option is FREE.

Choose the name of your website carefully because you cannot change it later.




                            Figure 5: Choose your domain

    1. Choose a name for your website. For example you can put your name or
       even a company name if you like.

    2. The website will notify you whether or not the name you've chosen is
       available.

    3. Once your happy with the name. Click the "Continue" button.




                                                                          Page | 5
Start Building
You have now created a new Weebly account and is ready to start building your
own personal website. You should be given the following page after you have
completed previous steps.

You will be given a home page to start off. You will be able to add more pages. To
find out how to add more pages refer to section "Managing Pages".




                            Figure 6: Weebly Content Manager

Adding elements
There are different elements and objects which you can drag and drop into the
empty space on the page.

NOTE: Since this is a free version of Weebly there are limitations in what elements
can be added to the page. To get an idea of what you are allowed to add to the
page simply avoid elements/objects which have the word "PRO" on the bottom
right.




Weebly have some alternatives such as the elements in the multimedia section.
Skip to the "Adding Multimedia Elements" section to see descriptions on each of
the free available multimedia elements.




                                                                          Page | 6
Adding Basic Elements
Other elements and objects which are available can be simply dragged and
dropped into the empty space of the webpage. Below is an example of how it
would look like.




                                                                                         Delete element




                               Figure 7: Drag and Drop Elements

Adding Text
In this example a "Paragraph with Title" has been dragged and dropped into the
empty space. Once dropped into the empty space you can edit the text or object
by clicking the item you wish to edit.

There are different combinations for each element available. For example:

    1. Paragraph with Title - This element will allow you to add a paragraph of
       text with a title attached to it. The paragraph can be any length.
    2. Paragraph with Picture - This element will allow you to add a picture
       along with a title to the page.

The rest of the elements are straight forward and is similar to the two above
explained. If you make a mistake and add the wrong element simply click on the
red cross on the top right of the element. This is illustrated in Figure 6 with a red
arrow.




                                                                              Page | 7
Hyper linking Text
Hyper linking allows you to link text or pictures you have on your webpage to
another page on a different site or pages which you have set up on your own
webpage.

    1. Start by dragging a paragraph element to your webpage.




                            Figure 8: Dragging of Paragraph

    2. Type in some text and highlight the text you want to link. If you already
       have some text you wish to link then highlight the piece of text you want
       to link.




                        Figure 9: Inserting and Highlighting Text




                                                                         Page | 8
3. Once you have highlighted your text click on the link button in the
   toolbar. This button is labelled red in Figure 10.



                                                                                    Link button




                             Figure 10: Link Button

4. A new window will pop up which looks like Figure 11. From this window
   you will be able to create a link to either your own pages, a website, a file
   or an email address.




                           Figure 11: Linking Window




                                                                         Page | 9
Linking to your own pages
   5. If wish to take the viewer to another page on your own website. Choose
       which page you wish to link the text to from the drop down box and click
       "Save".

       NOTE: If you click on the drop down box and you only see one selection
       available this means that you have not yet created extra pages for your
       website. Refer to section "Managing Pages" to find out how.




                          Figure 12: Linking to your own Page

Linking to another website
   6. To link to a website, click on the website button on the left and paste the
       website address into the space provided. Make sure the website only
       starts with a "www" when you paste in the link otherwise the link will not
       work.




                          Figure 13: Linking to another site            Page | 10
Linking to a file
   7. If you want to link your highlighted text to a file. Click on the file button
       on the left and Click on the "Upload a file" button. Choose a file from your
       computer.




                             Figure 14: Linking text to a file

Linking to an Email Address
   8. Linking to an email address is similar to linking to a website. Click on the
       "Email Address" button to start. Simply type or paste in the email address
       in the space provided to link the highlighted text to an email address.




                           Figure 15: Linking to Email address



                                                                         Page | 11
   9. Once you have chosen the link you wish to have for the text. Your
      highlighted text should now be underlined. This indicates that the text is
      linked.

       Make sure you click "Save" if you have either chosen to link to a "Page",
       "Website" or "Email Address". Linking to a file automatically brings
       you back to your linked text.

       Keep in mind that you can only link a text to one of the methods
       mentioned above. You CAN NOT link your text to multiple Pages or
       WebPages at the same time.

       NOTE: The link will not work until you've published your webpage. Refer
       to section "Publishing your Webpage". You can test to see if your link
       works once you've published.




                               Figure 16: Linked Text

Remove a Link
  To remove a link from a text. Click on the underlined text and click "Remove".




                              Figure 17: Remove Link




                                                                        Page | 12
Adding Multimedia Elements
This section describes each of the multimedia elements available in Weebly.
Remember to avoid the "PRO" features if you are using the free version of
Weebly.

        Photo Gallery




                               Figure 18: Photo Gallery

This is the "Photo Gallery" element from Weebly. It allows you to add multiple
photos into one element.

Once you have dragged and drop the "Photo Gallery" element onto your
webpage. Simply click on the blue picture to start adding photos. You can hold
down the "CTRL" key and select multiple images IF the images are within the same
folder. Images will be easier to find if you have set up a project folder as
instructed in the beginning of this manual.

There is no real limit to image sizes in Weebly but Weebly recommends that the
maximum image per gallery element should be 300.

Images should be resized before uploading or adding to your website to allow
faster loading and viewing for other users who visit your webpage. To learn or
find out how to resize and edit your images refer to "Resizing and Editing Images"
in the appendix.




                                                                         Page | 13
                                        Upload new image          Number of images in one element
Photo Gallery Toolbar




                          Figure 19: Photo Gallery with Toolbar

This is an example of a picture already being added to the "Photo Gallery". If you
wish to add more pictures to the gallery simply click in the empty space of the
element to bring up the "Photo Gallery" toolbar.

The toolbar will only show up AFTER you've clicked in the empty space of the
"Photo Gallery" element.

The toolbar will allow you to customize the element. For example you can
customize the number of images you want in the photo gallery. The maximum is 6
images in one element. You can also customize the spacing between the images
and also customize the border thickness.




                              Figure 20: Full Photo Gallery

This is an example of a Photo gallery will the maximum of 6 images allowed. To
delete a photo from the gallery. Place your cursor over the image and click on the
red cross which appears.

                                                                          Page | 14
Slideshow




                            Figure 21: Slideshow Element

The slide show element allows users to add photos in a different format to the
Photo Gallery.




                             Figure 22: Slideshow Styles

Once you have dragged the slideshow element onto the webpage. A window with
a list of styles for the slideshow will appear. Choose your desired format of the
slideshow to continue.




                                                                        Page | 15
Managing Slideshow Photos
The screen below is what would pop up on your screen when you start uploading
photos into the slideshow.




                            Figure 23: Slideshow Manager

After the selected layout for the slideshow has been chosen. The slideshow
manager will pop up which will allow you to add your photos to the slide show.
The top orange "Add Photos" button will let you choose the photos you want to
add from your computer.

The amount of photos allowed will depend on the slideshow layout which you
have chosen.

Once you have uploaded or added all the required photos for the slideshow. Click
the blue "Save" button to add the photos on the slide show.




                                                                       Page | 16
File Element




                                Figure 24: File element

The Weebly file element will allow you to upload a file from your computer which
will enable other users to download.

    1. Drag and drop the File element onto the webpage.

    2. To add or upload a file click on the icon which appears after the drag and
       drop.

    3. Choose the file you wish to upload




                                Figure 25: Uploaded File

This is an example of what the file element should look like after a file has been
uploaded. You would not be able to test whether the file is downloadable until
you've published your website. Refer to section "Publishing your Webpage" to
find out how.
                                                                           Page | 17
Flash Element




                                Figure 26: Flash Element

The flash element allows you to add a flash file with the file extension of ".swf".
This can usually be a file which has been downloaded from YouTube or another
video streaming website. If you wish to know about downloading videos from
YouTube. Please refer to the Appendix.

YouTube Video


                                                                      Paste YouTube link here




                               Figure 27: YouTube Video

An alternative for video on Weebly is the YouTube video element in the
multimedia section. Simply drag and drop the element onto the page.

Once you have the element on the page. Navigate to your chosen video on
YouTube and paste the link into the YouTube element toolbar.
                                                                      Page | 18
Managing Pages
This section allows you to add, remove and name pages of your webpage.




                             Figure 28: Manage Pages

   1. To add a new page simply click on the "New Page" button on the top
      underneath the heading.

   2. To name the page simply select the page you want to name and type in
      the new name in the textbox on the right.

   3. Password protection is also available for selected pages. Select the page
      you wish to password protect and tick the box where it says "Password
      Protect?"

   4. Once you are happy with the number of pages and the naming. Click the
      "Save" button to save changes.




                                                                       Page | 19
Webpage Design

Favourites




                               Figure 29: Design Layouts

The design section in Weebly provides a large range of design layouts which can
be easily be applied just by clicking on them.

Figure 18 shows a row of different designs available to the user.

Design Options




                               Figure 30: Design Options

Figure 19 shows the design options. The design options allow you to customize
the text within the title. The design options only allow you to change the font and
the size of the text.




                                                                          Page | 20
All Themes




                                Figure 31: All Themes

The "All Themes" button on the left side of the Design tab categorises all the
themes into different genres to allow easy and quick navigation through all the
themes.

The themes can be applied at anytime and it does not change any of the elements
which you have placed on the webpage. Some elements might move depending
on the style of the themes but the information and content will still be present.




                                                                         Page | 21
Settings




                               Figure 32: Weebly Settings




The settings tab on the top of Weebly window brings up a new window.

It gives you options to change the site address and site title. There are other
options available but it is recommended at this point that it is left default if you
are unsure of what they do.




                                                                             Page | 22
Publishing your Webpage
This is the final step in creating your own webpage. Once you are happy with the
design and contents of your website. You can now place your website onto the
internet for everyone view.

To begin publishing. Click on the orange "Publish" button on the top right of the
Weebly screen.




                               Figure 33: Publish Button

Once you click the "Publish" button. You will be given a new window with options
about the domain. This is your chance to change your domain name if you wish.
Otherwise choose the first option and click "Continue".




                                                                          Page | 23
Free

Cost

Cost

                             Figure 34: Domain Options

Clicking continue will bring you to one final window which will notify you that
your website have been published. You can click on the link provided to preview
your website and test any features you have just added.

If you want other users to view your website simply give them the address
provided. In this example "http://uwsportfolio.weebly.com" will be the address
where people can view my website.

Once your done viewing your website. You can continue editing your webpage in
Weebly by clicking the "X" button on the top right of the pop up window to bring
you back to Weebly.




                            Figure 35: Website Published




                FOR MORE INFORMATION GO TO
                  http://badanami.weebly.com
                                                                        Page | 24
Page | 25

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:12/24/2012
language:English
pages:25