Objective

To learn to web development techniques by example. To learn how to generate easy-to-manage slideshows using a HTML/Javascript approach to make this sample website.

Discussion

In this sample portfolio website, the thumbnail images are linking to a larger full-sized image (which have all been prepped to be 700x500px). Once the Javascript code has been added, clicking on a link will activate a slideshow on top of the current page. This technique makes use of a very popular open source library of javascript code called JQuery.

Procedure

Overview: Copy content into a new Bootstrap example. Customize styles to make a master page. Convert master page into a Dreamweaver template page. Develop a website using the new template page.

Prepping for the exercise

1. download starter files, move to "html/e?_site_architecture"
2. download bootstrap thumbnail gallery template (code > download zip)
3. download fresco lightbox source files
4. copy "fresco.js" into "js" folder
5. copy "fresco.css" into "css" folder
6. copy "skins" folder into "css" folder
7. copy "slides" folder to root folder
8. duplicate "index.html"; rename "index_backup.html"
9. launch dreamweaver
10. site > new site: site name=e?_portfolio;
    local site folder=faa999/gds220/html/e?_portfolio; export STE file
11. open "fresco/example/index.html"; examine code

Adding content to the home page

1. open "index.html"; examine code
2. copy "fresco.css" link into "index.html" (above "thumbnail-gallery.css")
3. copy "fresco.js" link into "index.html"
4. delete uneeded elements (including extra jquery link)
5. copy code for one image from sample into "index.html"
6. replace image src="slides/100x100/01.jpg"
7. replace anchor href="slides/700x500/01.jpg"
8. replace caption with
   "Poster<br />Client: Amtrak<br />Illustration: Jane Smith <br/><a href='http://gds.parkland.edu/pages/exhibition.html' target='_blank'>View Website</a>"
9. retain "img-responsive" and "thumbnail" classes
10. modify <div> class to match:
    <div class="col-md-3 col-sm-4 col-xs-6 thumb">
11. file > preview in browser (opt+F12 and cmd+F12)
12. copy/paste thumbnail <div> 12x
13. modify each image number
14. add looping code to first image:
    data-fresco-group-options="loop: true"
    
15. select all thumbnail <div>s
16. insert > div: class="col-sm-9"
17. insert > div: class="col-sm-3" (before <div.col-sm-9>)
18. insert > image "logo.png" (inside <div.col-sm3>)
19. add id="logo"; class="img-responsive"
20. link to "index.html"
21. select <container>: add id=main
22. change title to "Jane Smith Graphic Designer"
23. file > preview in browser (opt+F12 and cmd+F12)

Styling the home page

1. window > CSS designer: source="thumnbnail-gallery.css":
   • body: padding-top=70px, padding-bottom=30px; text: color=gray; bg=black
   • a: color=white
   • a:hover, a:focus: color=white, text-decoration=underline
   • .thumbnail: border=0; bg=black
   • .thumb: margin-top=30px, margin-bottom=0
   • #main: margin-top=50px
   • #logo: margin-top=20px, padding-right=20px
   • .navbar.navbar-inverse: border-bottom=gray; bg=black
   • .nav.navbar-nav .active: text: color=red
   • .nav.navbar-nav li: margin-right=20px
   • .fr-caption: text: color=dark gray
   • .fr-caption a: light gray
   • .fr-caption a:hover: text-decoration=underline
   • .fr-info-padder: bg-color=black, padding-keft=0
   
2. edit links
3. edit navbar-brand="Jane Smith Graphic Designer"
4. add class="active" to "Portfolio" link
5. window > css designer: source="thumnbnail-gallery.css":
   media=min-width=768px):
   • a.navbar-brand: display=none
   
6. window > css designer: source="thumnbnail-gallery.css":
   media=max-width=767px):
   • #logo: display=none
   • #main: margin-top=20px
7. window > css designer: source="thumnbnail-gallery.css":
   media=min-width=501px):
   • .fr-info-padder: padding-left=0px
8. file > preview in browser (opt+F12 and cmd+F12)

Making the Résumé page

1. file > save as "resume.html"
2. select <div.col-sm-9>; delete
3. insert > div: class="col-sm-6"
4. insert > div: class="col-sm-3"
5. copy/paste content from site architecture
6. window > CSS designer: source="thumnbnail-gallery.css":
   • h1: font-family=georgia
   • h2: font-family=georgia italic, weight=normal
   • h3: padding-top=24px, font-weight=bold, font-size=14
   • #content ul: list-style-image=../images/square.gif
   • html: overflow-y=scroll
   
7. window > css designer: source="thumnbnail-gallery.css":
   media=min-width=768):
   • #content: margin-right=20px
   
8. move class="active" to "Resume" link
9. file > preview in browser (opt+F12 and cmd+F12)
10. repeat with other pages
11. publish the finished site as a link from your personal process page for grading