Build a simple website using Weebly and become familiar with our hosting and editing platform.
Upon completion of this lab exercise you will be able to:
- create an account on Weebly and create pages following an imported template
- familiar with the BoatVentures case study background information
- add images and links to a Weebly website
- set up social networking to Facebook and Twitter on Weebly
- configure SquareUp for appointments
- allow booking through SquareUp
- use multiple columns, spacers, and images with text on Weebly
- set up a blog in Weebly
- publish your website hosted on Weebly
Required Knowledge & Skills
Chris Kelly is not sure what a website could do for him. So, he has asked for several prototype mockups of websites. He also feels that he should be able to manage the website content himself rather than contracting with your firm. He would like you to design and build the site, but then maintain it himself. He understands that the tools are much easier to use now. Your proposal of using the Weebly platform for his website should meet his needs, but he wants to see what it can do. So, you need to build a quick prototype of his website that shows him some of the basic capabilities and features of Weebly.
- Create an account on Weebly. Use any user name you prefer. Be sure to write down your user name and password. Note that you are limited to ten pages in a free account.
- Log in to your account and create a new website titled "BoatVentures". Import this template (note that Weebly may ask you to select a starter template first, after which you can import the provided template which will replace the starter template). You need to first download the file "IS1500.zip" containing the theme definition -- simply click on the theme link and choose "Save" -- it is likely saved under Downloads. In the Themes tab in Weebly, click on "Import Theme" and then select the "IS1500.zip" file you downloaded.
- You will be asked for a domain name for your website. Use is1500-username as your domain name. Use your Northeastern user name.
- Once you are logged on, view the Weebly Tutorials and familiarize yourself with the platform's capabilities.
Create a website identical to the one shown in this URL keeping in mind the following requirements after watching this brief overview of the website.
- Use the Images from this list for your web site
- Make the home page a "landing page" (in the Pages tab in Weebly, select "Landing Page")
- Change the page header to include your last name, e.g., "BoatVentures (Schedlbauer)"
- Add social networking buttons for Facebook, Twitter, and e-mail: e-mail should go to your e-mail, Twitter should follow @boatventures, and the Facebook link should link to BoatVentures' Facebook page (https://www.facebook.com/BoatVentures-106562220728562)
- Link the Book Now! button on the landing page to the Reservations page
- Add a blog page -- you need to create a new page of type "Blog" in Weebly -- note that the dates on your blog page will be the current dates
- Set up SquareUp in the Reservations page; you will need to create an account on SquareUp and add the services as shows in the reference website -- after you've configured SquareUp you'll insert the <iframe> or <script> fragment provided by SquareUp as Embedded HTML in your Weebly site; SquareUp has recently updated their "look and feel" so it'll display differently than on my reference web site; also note that you will not see the reservations until you publish your web site and look at the published site
- Check all the links and make sure they open properly (in the same window or a new tab)
- Highlight and change fonts and styles as shown in the reference website
Publish your website under the subdomain URL IS1500-userName.weebly.com where userName is YOUR student name as assigned by the University, e.g., is1500-mschedlbauer.weebly.com. Submit this URL in a clickable form on Blackboard for your assignment submission.
If you have not already done so:
- post your questions on Piazza
- create a Weebly "Sandbox" website; a sandbox site is a site where you can try ideas out in without affecting your main web site; we will use this for class demonstration and experiments; name the sandbox web site is1500-sandbox-studentName.weebly.com
where studentName is YOUR student name