presenters: jovita [email protected] jerilyn lynn … › uploads › 4 › 5 › 2 ›...
TRANSCRIPT
Step-by Step Guide to Using Weebly
Weebly is free and has everything you need to plan, build, publish and grow a site that meets your goals. Weebly’s drop and drag website builder makes it simple to create a powerful, professional website without any technical skills required. Content elements (like text, photos, maps, and videos) are added to your
website by simply dragging and dropping them into place. Text is edited just like in a word processor. Building your website is done in real time, right from within your web browser. You can create multiple pages, a blog , a tweet and register your site for Facebook. Millions of people and small businesses have joined Weebly to build their online presence. There’s absolutely nothing to install and no upgrades to worry about. Anyone using Weebly can build up to 10 sites in their account. To create a new site, use the Add Site button on the My Sites area of your account.
I. Let’s get started log onto www.weebly.com.
II..Click on Sign up. It’s free! to create an account
III. A verification notification will be sent to your email address. (School or personal you decide).
IV. A Welcome to Weebly dialog box will appear. (Select the name for your site) press Continue.
V. The first step to constructing your website is to select a THEME.
Select from the vast selections Weebly offers.
VI. After you’ve selected a theme you'll be asked to give your site a title. If you don't have a title in mind yet, just think of a temporary title; just like the theme, the title can be easily changed later on.
VII. Next you'll choose your site's address (also called a domain). This
isn't particularly important until you've finished your site and Published it, so if you don't already know which domain you want to use the simplest thing to do is to select a free subdomain of Weebly.com using the first option. Much like the theme and the title,
this is yet another part of the site that's easy to change, and we'll cover domain names in more detail later in this guide.
Title goes here
VIII. All done with the initial steps now you are ready to create your site. CONSTRUCTION OF YOUR SITE AND THE ELEMENTS FOR BUILDING:
A. Under the BUILD Tab is where you’ll find the basic working elements. This is where you decide what/how to make the opening page of your site. Adding an element to a site is as simple as clicking on that element and dragging and dropping the icon on the page.
B. A brief description of each element is described below:
1. The text element is exactly what it sounds like: an element for writing text. Click inside the element to start writing. It works just like any other word processor allowing font changes, bold, italic, underline, font size and color.
This is the FREE site address. Be sure to write it down. Once you publish your site is ready to be viewed. Others will be able to see your work when you provide them with the address.
2. Adding pictures to your site works in much the same way as adding text: by dragging an image element to the page and your screen will appear as shown below.
This opens up a dialog box presenting several ways to add a photo. The two key options are to either upload (or drag) an image from your own computer or to search through the Weebly stock photo database.
The easiest way to approach this is to drag the picture you want to use from your desktop into the box that quite helpfully says "drag photo here." You can also click the green "Upload a photo" button if it isn't convenient to drag the image over.
You can adjust the size of the image by clicking and dragging the little box that appears in the lower right corner of the image (you'll need to click on the picture to see it).
Clicking on the photo also opens up a settings dialog box that you can use to make further changes.
Some notable controls:
Lightbox: If you turn this on then any visitor who clicks the image on your site will be shown a larger version.
Link: This option turns the image into a link. We cover links later in this
guide.
Spacing: Makes minor adjustments to the amount of white space around
the picture.
Caption: Lets you add a basic text caption under the picture.
Advanced: Allows you to adjust (or turn off / on) the border around the
picture. Additional editing can be done to the picture since the blue handles
are still visible. The image editor provides some basic options for adding effects, lets you Rotate the image to any angle and has a Crop feature that can cut unwanted parts of the image away.
When you begin adding other elements to a page, you'll notice that they stack one on top of each other automatically. At first glance this may make it appear there's no way to place elements side-by-side.
3. Columns Element begin with two columns however, you can add up to five columns to a page just select the desired number you wish to use. This enables you place elements right alongside each other. The Columns Element is dragged to a page just like any other element.
If you are satisfied with the changes made thus far click SAVE.
Editing Features
You can drag as many elements into each column as needed, and use the
blue bar between the columns to adjust the width of each. Elements
inside the columns will expand or contract as you change the column
size. The divider between the columns doesn't show up on the published
site so none of your visitors will see that.
4. Your site can have as many pages and sub-pages as needed; we place no limits whatsoever on the number of pages that can be added to a site. Creating a new page is a matter of going to the Pages tab and clicking the Add Page button.
There is an option to Add a Standard Page or Add a Blog. For now let's focus on creating Standard Pages. Adding more pages is a matter of clicking Add Page and choosing Standard Page again (and again).
As you add (and name) each of your pages, they'll automatically become part of your site's navigation bar.
You can re-arrange the order of the pages by clicking and dragging them up and down the Pages list. Dragging a page to the top of the list will make that page your Home. The Home page can be renamed to whatever you like; the name for this site's Home has been changed to Welcome. Changing the order of pages in the list will also change the order in which they're displayed in the navigation.
You're also able to create subpages of other pages.
Each time you add a standard page be sure to name it. Notice the added pages align on the left side of your page element. When finished adding pages be sure to save and edit.
Changing order of pages
You can do this by dragging a page or pages underneath and to the right of another page. These subpages appear in a drop-down menu when you scroll over the page to which you connected them. Go to the Home Page and Click Publish You have created the basic skeleton of your website . This will bring up a verification box, letting you know your site has been Published. You can click the Published address to view your site (you can also give this address out so that other people can use it to visit your site) Of course, you are probably not done with your site at this point, and that's OK. You can continue to add content through the editor whenever you like and then click the Publish button to push that content to your live site.
This is your website address. To view the site live click on your site name. Once the site is viewed close out that tab click on the X in the right hand corner
and continue editing your
site.
ADVANCED FEATURES AND CHANGES THAT CAN BE DONE TO YOUR SITE
1. How to Switch Themes: You can change your theme by going to the
Design tab and selecting Change Theme. When you scroll over a theme you're given the option to Preview it. Previewing it shows exactly how your own pictures and content would appear in this new theme. If you like the theme you can Choose it, if you don't you can Cancel and look through some of the other themes. You can sort the themes by categories and popularity, if you'd prefer scrolling through all of them again.
2. How to Change Fonts: You can change these fonts using the Change
Fonts area found under the Design tab.
3. Links connect people to other pages on your site, pages on other sites, email addresses and files that they may want to download.
a Change the color of an unclicked Link.
b. Change the Visited color (this color indicates to the site visitor that
they've already looked at that link).
c. Change the Hover color. This is the color given to the link when you
hover the mouse over it.
d. If you ever want to switch back to the default fonts for a section, just use
the Reset link found within each section.
4. Editing the Header-image on any of your pages, we've made this header
very simple to edit and change. To get started, scroll over the header
image and click the Edit Image button:
This will prompt you to either Add an Image or Use the Original Image.
Choose to Add Image. This will open up a dialog box that allows you to
upload an image from your own computer. Once you upload or find an image,
you'll be able to edit that image. If the image is taller than the banner area it
can be re-sized using the little bubbles at each corner and sides of the image.
An image can be dragged to better fit the header by clicking anywhere on it
and dragging it. The Editing adjustment tools at the top of the page can be
used to edit and add text / effects to the image as needed. When you're
happy with an image, select the Save button.
You can use the arrow to the right of the Save button to choose whether to
save the image to every page of the site, just this page or to select only
certain pages to save it to. In that way you can have different headers on
different pages if you want.
Finally, if you don’t like any of the heading and have ideas of your own you
can create your own header with images and text.
CREATING YOUR OWN THEMES
Users can create their own themes by doing the following:
a. Copy the theme of your choice as shown below
b. Open PowerPoint to a blank presentation and paste the copied
picture on the page. Crop the picture.
c. Click on the rectangle and draw it the same size of the cropped
image. You have the option of changing your background and line
color. Download any and all graphics you want and begin placing
them inside the rectangle. Insert WordArt or textbox with
whatever you want to say. Copy the picture and paste it below
the one you made.
d. Right mouse click on the picture and scroll down to Save Picture
As:
e. The screen will change click the drop down arrow to Desktop and
click the drop down arrow to JPEG as shown below:
1. Click on the drop down arrow
2. Change the PNG to JPEG and click SAVE
You have just converted a PNG to a JPEG. You are now ready to upload this image into your new theme.
f. To get started, scroll over the header image and click the Edit Image button:
g. This will prompt you to either Add an Image or Use the Original
Image. Choose to Add Image. This will open up a dialog box that
allows you to upload an image from your own computer. Once you
upload or find an image, you'll be able to edit that image. If the image
is taller than the banner area it can be re-sized using the little bubbles
at each corner and sides of the image. An image can be dragged to
better fit the header by clicking anywhere on it and dragging it. The
Editing adjustment tools at the top of the page can be used to edit and
add text / effects to the image as needed. When you're happy with an
image, select the Save button.
How to Embed Videos into Weebly
There are a few ways to add video to your site. First, you can upload
video directly using our HD Video element, if you're a Pro or Business user. Our Pro elements are not the only way to add Video and Audio to your site. You can add multimedia content from Vimeo.com, using our Embed Code element. Please know that if you are using Vimeo as a way of uploading videos you must create a free account and adhere to the guidelines and restrictions. Those expectations and criteria will be included within this booklet.
Click that button. A dialog box appears with share and embedding options. Since we want to embed the video, we are only interested in the Embed options. At the bottom right, click Show options:
The Intro has 3 options: Portrait (which is your Vimeo avatar), Title (of the video) and Byline (author name). Special stuff determines the behavior of the video player. This is quite self-explanatory:
Video Guidelines
Vimeo does allow users a Free Account as well as plans that require payment. There are certain expectations and rules you must adhere too. In order to create a free (Basic) account go to: vimeo.com.
Upload only videos you created yourself.
You must own or hold all necessary rights (copyrights, etc.) to your video.
“So-and-so gave me permission” does not mean you created it.
You can upload videos that you appear in or helped create (as director, DP, editor, musician, motion graphics artist, actor, etc.) as long as you have the necessary permissions from the copyright holders.
Please add your role in the video description to avoid deletion.
Exception! Vimeo PRO members can upload videos they did not create as long as they hold the necessary rights and permissions.
You cannot upload certain types of content:
No rips of movies, music, television, or any other third party copyrighted material.
No sexually explicit material or pornography. (Artistic and non-sexual nudity is allowed.
No videos that are hateful, harass others, violate someone's privacy, or include defamatory or discriminatory speech.
No videos that depict or promote violent activity, extreme or real-life violence, self-harm, or cruelty toward animals.
Don’t be a creep.
Vimeo is an amazing place to connect with other people who make and love awesome videos.
Don’t abuse those connections with comments or messages that make the recipient feel uncomfortable, such as sexualized compliments or unwelcome advances.
Make sure your user avatar and profile do not include nudity, explicit or gory images, spammy links, or details designed to impersonate any other person or business.
How to create a gorgeous custom cover video
Not so long ago, we launched all-new profile pages to give you more control over the look and feel of your page, and help you highlight the amazing videos you upload. Think of this as your online calling card: a place you can send people to see your work, learn what you’re all about, and understand what you do. Perhaps the most eye-catching change of all? The ability to add a gorgeous custom cover video, so everyone can see what you’re all about right when they land on your profile.
A great cover video, much like cover photos, can draw people in and entice them to learn more about what you do and watch more of your videos. So whether you’re looking to flaunt your filmmaking chops, communicate your brand’s values, or just express your particular aesthetic, here are a few tips to keep in mind when choosing that perfect looping clip.
To add or edit your cover video, go to your profile, click the button, and choose one of your videos. As you’re trying things out, you’ll want to...
Consider video length, size, and framing
After you’ve selected a video, you can use the sliders to select a clip to loop at the top of your page. Your clip can be anywhere from a few seconds to the entirety of your video. In addition to duration, you’ll need to decide what you want to actually appear in frame. While our design is dynamic and depends on the screen width of your viewer, a 1920x540 video should mostly stay in frame.
You can test out a few of your videos to see what works best, or even create a video especially for your profile page. Simply slide the size overlay to the desired position, and preview exactly what will be displayed.
When choosing your perfect video, here are a few things to keep in mind:
No one likes to see a person’s head cut off (unless you’re a horror director)
Don’t cover up text — people like to read!. Remember: your profile picture appears in the center of your frame;
make sure it’s not hiding something important
Bloomberg does a great job at showing what their brand is all about, and keeping all the relevant info above the fold.
Put your best film forward
Just like a cover photo, your cover video instantly communicates to visitors what you’re all about. If you’re a filmmaker, flaunt a technique you specialize in. If you’re a brand, think about what best visually communicates your values.
It doesn’t have to be educational, either. In the same way that thumbnails draw in people’s attention, so too will bold visuals, bright colors, and a focused concept. Filmmaker Janssen Powers, for example, uses his cover video as a reel, highlighting some of his best work and letting potential clients know what he’s about right off the bat.
Switch it up
If you drive a lot of traffic to your profile page, it’s important to make things fresh. Got a new short film premiering? An upcoming product launch? A hashtag for a new campaign? Keep your looping in sync with your latest and
greatest projects. Take Jeff Williams, a Walt Disney animator, who chose to showcase some of his most recent and notable work in Zootopia.
Shoot something new
You may not have the perfect cover video already sitting in your Vimeo account. If this is the case, why not go out and make one? Our very own Nick C. went so far as to sacrifice his lunch break in order to shoot something completely custom using only his iPhone and a bit of ingenuity:
Tap into that left-side brain power Vimeo is home to the most wildly creative community on Earth, and cover videos are meant to help you get those wildly creative ideas out there. So let your imagination go bananas, start customizing, and share your profile with us below so we can soak up your ingenuity, on loop.
How to Capture Screenshots for the IBM and the MAC Computers
IBM Directions:
1. Once you have acquired the picture or article you want click the
FN Button and Print screen key which is located on the right side of the keyboard.
2. Open up a word processing document and click Paste
and the image or article will appear on the document page .
3. User have the option of re-sizing, and cropping the image
or article to their liking. (HINT: In order to move the image around make sure the handles are on the image under Format click Text Wrap-click drop down arrow and click In Front of Text this will allow you to freely place the image where ever you want it). MAC Directions
1. Once you have acquired the picture or article you want press and hold
the Shift Key-Command Key and Press #4. The mouse changes to a +
and begin drawing a rectangle around the image. Let go of the keys
and this allows the image to be captured as a screenshot
.
2. Your image screenshot will appear on your desktop.
3. Open a word processing document and go to Insert-Picture and obtain
the screenshot from the desktop.
4. User have the option of re-sizing, and cropping the image
or article to their liking.
(HINT: Under Format click Text Wrap-click drop down arrow and click In Front of Text this will allow you to freely place the image where ever you want it). Jovita Davis -2017