1. Weebly Elements, Continued

2. Advanced Elements
A strong argument in favor of using any CMS is the ability to use tools, assets, and plugins that are challenging for beginner HTML developers to use, but easy in a CMS
Weebly automates things like providing file downloads, forms, Youtube embeds, maps, feeds, and more
Lets explore the additional tools we have!
To start, open your practice site (for example, pjdjmapractice.weebley.com )
It was the most recent one we built
Make a new Standard page from the Pages menu – name it Elements 3. We’ll build a bunch of sub-pages under this

3. Preparing for our Submenus
Create a new page from the Pages menu
Name it Maps, set to No Header, and Save
Back in Pages menu, drag Maps under Elements 3
Your menu might look different because we were experimenting (we’ll clean this up for an assignment later) but should look something like this for the Elements and Maps submenus

4. Map Element 1 Add a Map element to the Maps page
Drag a Map element to this page
The map appears with a pinned address… to change this address, click the map to open the properties sheet (as usual)
Change the Address field to a location of interest – type it in and hit enter, the element will search for the address

5. Map Element 2 Customize Adjust the Zoom
In Width and height, set Width to Small
Spacing for an appropriate margin
Advanced location lets you enter a location through Lat and Long coordinates – good for my camping site, overkill for this
Advanced display lets you change marker and map control settings – can leave defaults

6. File Download 1
Sometimes you might want to make files available for download
Normally, you’d throw this on a web server and provide a link
Weebly automates this process. Let’s try it out
Make a new Word document, enter a quick sentence
Save it as TestDownload.docx – mine is on desktop
Now, make a new page called Document, and move it under Elements3 (like we did in slide 3)
Drag a File element over to the page – we’re instructed to Click to upload file…

7. File Download 2 Click the icon The File property tab appears
Hit Upload file
A new “Drag a file here” dialog appears – drag your word document
Your file will be downloadable once the site is published!

8. File Download 3 Things to remember!
File element will make a link to download the file – contents of the document won’t be visible
Document element (shown before) will attempt to show the contents of the document in the page
If you attempt to make a Document element and it can’t show the contents, choose File instead
Page on screenshot shows a File element, and then a Document element below

9. Slideshow Element 1 Slideshows are easy to create – let’s try.
As usual, create a new page, name it Slideshow
Move it under Elements 3
Open this page, and drag a Slideshow element
We’re asked to pick a layout for the thumbnails – pick one and hit continue
Drag some images from your computer – if you don’t have any, you can use the photos from the Cars folder in CMSAssets
Have to be under 10 meg for the free version of Weebly
You can add more photos in the third dialog… we’ll hit save, and customize in the next slide

10. Slideshow Element 2 Click the slideshow element to see properties
Caption location can be set to top or bottom
Most important item is probably under advanced – here, turn Autoplay on or off
Test with the Play control at the top of the default image

11. Gallery Add a new page, name Gallery, move under elements
Drag a Gallery element over
The upload files dialog appears, choose multiple small images (in the assets folder, the Cars subfolder works well)
This gallery will use the Lightbox Image zoom we saw in images
Properties sheet
Change # of columns, and display of captions
Advanced menu lets you change sImage spacing and border

12. Feed Reader 1
An RSS feed is a set of links with article previews from websites.
You could provide a feed from other sites for your viewers
Look on websites you visit for the RSS icon
To find one, it’s often easiest to either Google search “website RSS” – i.e. engadget rss
CNN and NFL have one worth trying too
Let’s implement!

13. Feed Reader 2 Add a new page, name Feed, move under Elements 3
Drag a Feed Reader icon
Now, pause here, open a new browser tab, google for a feed (use cnn rss if you can’t find anything else)
CNN shows in top result (as of now). Follow the link
Copy a link path other than Top Stories and return to Weebly
Ironically, the Weebly Feed Reader defaults to cnn… open properties of the Feed Reader

14. Feed Reader 3
Change the path of the feed reader to the path you copied (paste)
Under Advanced, you can set the number of stories to show
Now, your page will grab the feed whenever it’s loaded!

15. Contact Form 1
Make new page called Contact Form, place under Elements 3
Drag a Contact Form over
Now, you can change fields and the behavior of the form. Forms require a little more customization.
Note the form fields area on the left of the screen – these will be dragged into the form, and then have the field’s properties set

16. Contact Form 2 Drag a Dropdown box over to the page, and click it
Make note of the initial properties
As we change values to customize this field, some new dialogs will appear

17. Contact Form 3
You’re editing the properties of the Drop Down… in field title put Reason for Contact, and choose if it is required
Next, click Option Items
Add some option items
To remove an option, hit edit, and then you can remove an option with the “Circle with the –”

18. Contact Form 4 Top right of form, go to Form Options
Set your address
Hit Save
The View Entries can be used to see submitted forms as well

19. Publish and Test Hit Publish button Open new browser window
Go to your public site (pjdjmapractice.weebly.com, but YOUR initials
Fill out your form
Check your ! I got the message mailed to me
In the Editor window of your site, click the form, then click View Entries
Can see them here too!

20. End of Lecture
Discuss Assignment
Work on Assignment