My Class Website My Favorite Things
MY FAVORITE THINGS - GUIDE DIRECTIONS: Refer to this guide to add a carousel containing pictures of your favorite things to the home page of your class website. Remember, never include personally identi able information in your web projects, e.g., full name, address, mother’s maiden name, cell number, etc.
Table of Contents Getting Started Gathering Images Updating the Page Publishing
Getting Started
Step
Detailed Instructions
❏
Launch Brackets
■ On Windows: ○ Start > All Programs > Brackets (or use Desktop Icon) ■ On Mac: ○ Finder > Applications > Brackets
❏
Open "My Class Website" Project
■ FILE > Open Folder...
James Colestock
■ Navigate to and open "my-class-website" folder My Class Website - My Favorite Things
Page 1 of 7
Gathering Images
Step
Detailed Instructions
❏
Open Home Page
■ In Brackets, double-click index.html in the File Tree or use FILE > Open...
❏
Launch Live Preview
■ To see the web page as you build it, launch Live Preview: http://static.colestock.com/Brackets_Live_Preview.pdf
❏
Search Google for ■ Navigate to images.google.com in your web browser Images of Favorite ■ Using the search tools, nd three 800x600 images of your Things favorite things ■ Click on each image, then right-click Save image as...to save to the images directory of your My Class Website project
❏
Refresh File Tree in ■ In Brackets, right-click and choose Refresh File Tree to verify Brackets that your images are now part of the project
Use Google’s search tools to nd images of the exact size:
James Colestock
My Class Website - My Favorite Things
Page 2 of 7
When prompted, specify the size you want, i.e., 800 x 600:
Once you nd the image you like, right-click Save image as…
James Colestock
My Class Website - My Favorite Things
Page 3 of 7
Save to the images directory of your My Class Website project:
In Brackets, refresh the File Tree:
James Colestock
My Class Website - My Favorite Things
Page 4 of 7
Verify your les are listed in your project:
Updating the Page
Step ❏
Update the Favorite Things Carousel
Detailed Instructions ■ Referring to the example below, update each div.item: ○ Update the src attribute to re ect the name and location of your favorite thing image ○ Update the alt attribute with a description of your favorite thing image ○ Update the contents of the subheading () with a caption of your choosing
Before: Caption Goes Here...
James Colestock
My Class Website - My Favorite Things
Page 5 of 7
After: I Love to Play the Guitar
❏
Save Page
■ Ctrl+S/⌘ S or FILE > Save
When we started, your home page should have resembled:
James Colestock
My Class Website - My Favorite Things
Page 6 of 7
Afterwards, your home page should resemble:
Publishing
❏
Step
Detailed Instructions
Update Class Website
■ Use FileZilla to FTP the updated index.html and your favorite thing images (placing inside the images directory) to your class website: http://static.colestock.com/FileZilla_Publishing.pdf
James Colestock
My Class Website - My Favorite Things
Page 7 of 7
