Introduction to working with Weebly Weebly Overview Introduction to working with Weebly

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

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

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

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.

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

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 www.weebly.com 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, e-mail address and a password for the website.

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

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?

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

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

Weebly Settings Overview of Weebly Settings & Options

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

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

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

Additional Settings

Additional Settings

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!

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

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

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

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

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!