Weebly Elements, Continued

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…

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!

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

Gallery We saw Slideshow before – Slideshow plays images automatically Gallery lets user select from thumbnails, and supports the Lightbox (zoom picture) effect 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

Contact Form 1 Make new page called Contact Form Drag a Contact Form over You can add and change fields and the behavior of the form and its fields. 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 Free version limited to 5 fields

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

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 –”

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

Publish and Test Hit Publish button After publish you see your site URL in the “Website Published!” dialog. Click it, it opens your live site in new tab Find and fill out your form, hit Submit Check your email! I got the message mailed to me In the Editor tab where you were editing your site. Click the form, then click View Entries Can see them here too!

csv A comma-separated values (CSV) file stores tabular data (numbers and text) in plain text. Each line of the file is a data record. Each record consists of one or more fields, separated by comma value