1. Introduction to working with Weebly
Weebly Overview
Introduction to working with Weebly

2. Overview So what is Weebly.com? Benefits of Weebly?
Working with Web Assets
Administration Overview
Creating an Account
Practice Making a Site
Choose a Theme
Choose a Sub-Domain
Settings Overview
Elements, Images & Social Media
Publish a Web Site

3. So what is Weebly.com?
Weebly.com is Content-Management System website that enables users to create robust, compliant and professional looking websites
Weebly offers users Responsive Themes – These are website layouts that adapt to the device accessing it.
These themes are written in JavaScript so they can be modified and development in advanced classes.
JavaScript is a language that is used to create fancy stuff you see on a web page

4. Benefits of Weebly?
One of the biggest benefits of Weebly is it will host your website for you at no cost (Note: You will have their logo/name all over your website though)
Additional assets that could be beneficial to you include:
Blogging capabilities
Shopping Cart capabilities
Can edit using desktop, IOS and Android
Surveys are built in
Creates both the desktop and mobile layouts for you

5. Working with Web Assets
Create a local folder on your USB Drive and name it CMSAssets
Download the .ZIP file CMSAssets from the class website
Extract the contents of this folder to your local CMSAssets folder you create:
Right-click on the downloaded folder > Extract All > Set Location to local CMSAssets
You will have four folders, and one text document titled, “loremIpsum”
Why are we learning this?
When working with web design and development, after creating the structure of the web pages, then you must work with web assets – this is the stage of design and development where we make the website look pretty.

6. Administration Overview
Getting Started in Weebly – Account Creation, Themes and Settings

7. Account Creation
Assuming this is the first time you have used weebly.com, we will set up an account for the site.
Each account can have up to 10 websites. For this class we will have two sites
This step is only done once (aka remember your login information!)
Open a web browser and type into the address bar
Choose “Sign Up” in the upper right corner or “Get Started” In the main website area
You will be prompted for your full name, address and a password for the website.

8. Weebly Dashboard
After you create the account – you are taken to the dashboard of the website.
This is an overview area you can navigate your sites, check stats, edit sites, delete sites
Click on the “+Create a New Site” Button and look at the Themes

9. Weebly Themes - Introduction
Notice with the themes these are entire web site designs ready to go for you
Have a navigation bar at the top that also groups the themes into certain areas you might like
Remember – you can have up to ten websites!
These themes are also responsive as well – What are responsive designs again?

10. Weebly Themes – Selecting a Theme
Scroll through the themes, and find one that looks interesting
Notice when you hover over each theme, a menu bar pops up beneath it with an additional option:
Choose: Will select the theme and open it in the Weebly in-browser editor
Note: There used to be a Preview option but it looks like they removed it.
If you change your mind on a theme, you can change it in the Settings later
Weebly Themes – Selecting a Theme

11. Weebly & Domains
After selecting the theme you want to work with, you will be shown a popup window asking for a name (aka a sub- domain) for your website
Domains vs. Sub-Domains
Examples of Domains: duq.edu, msn.com
Examples of Sub-Domains: jma.duq.edu,
You can choose to do this later, but for this example type in a sub-domain name for your website and click continue
You can delete the site/change the name later

12. Weebly Settings
Overview of Weebly Settings & Options

13. Accessing the Weebly Settings
When in the in-browser editor, navigate to the menu bar at the top of the page and choose Settings.
A flyout menu will fill the area and now you are in the settings
On the left side you will see the Setting Sections that group similar options together.
Click on each one to see the changes between the options
In the upper left corner there is a light-grey X that can be clicked to close the settings.
When committing changes in the settings, use the save/apply buttons at the right sides

14. Additional Settings Part 1 – General
Site Address: At this point you shouldn’t have to change this – but this is where you would change the sub-domain
Site Title: This changes what is shown in the browser tabs at the top of the pages (See previous slide video for example). You really will want to change this to match your site

15. Additional Settings
Cookie Notification: Shows the user your web site is using cookies (the little warning bars you might see on your web browser)
What is a Cookie?
Small pieces of text that are stored on a web surfer’s computer that can be retrieved by either the webserver, or by JavaScript on the web surfer’s computer.
Cookies are great (with milk!) for storing information so that it does not need to be re-entered the next time a user visits the web page

16. Additional Settings

17. Additional Settings

18. Additional Settings – Save Buttons
Remember:
Save/Commit Buttons are located on the right side
See the graphic for three examples
Save buttons didn’t capture – Remember to click on them!

19. Elements, Images & Social Media
Introduction to working with the Elements Bar in Weebly

20. Weebly’s Element Bar
This is a drag and drop bar that is your bread and butter while working with Weebly.
Elements are organized into similar groups that when you have selected one, you just drag it over to your web page and drop it where you would like it to appear
Once an element is placed, it can be selected to bring up it’s sub-menu panel and offer you additional options

21. Images – Adding Web Assets
When you are ready to add your own assets from your local CMSAssets folder, it is as easy as dragging and dropping onto the web page in the browser.
Locate the Indians Folder in the CMSAssets Folder you unzipped at the start of the class.
Select an Indian image, click and hold and drag it onto the web page
It should go grey – drop the image. Weebly will take a moment and upload the image and it is now placed on the website
Watch for blue line as you move the square around

22. Social Media Icons – Adding your first Element
To add an element to the web page – Just choose the button for what you want, and then click, hold and drag it onto the page.
Find and drag the Social Icons onto your web page (Located under “More” On the elements menu)
Click on it to activate the specific sub-menu for the element
Just to practice, click on the Manage button in the sub-menu to see the different options for each of the social media icons. You would click on each of these to add in your own social media links

23. Publish the Website Once you are done, you can publish your website
When you publish a website this means it is a ‘live’ website. If a web surfer were to type your web address into a browser, they would be able to see the website
Make sure you are done editing and ready to publish
In the upper right corner you should see a ‘Publish’ Button, click on it to begin the publishing process
Verify you are human
A notification pops up the site is published. You can now open a new tab and type in your web address to see your website live on the Internet!