Objective

To explore Bootstrap's responsive framework by developing an advanced web page similar to this example.

Discussion

Building responsive websites is not easy. Although there are man y responsive frameworks out there, Bootstrap is the most popular because it is well documented (see comparison). There are plenty of high quality Bootstrap templates out there (most are free). But most designers like Bootstrap because it gives the designer full control of the look-and-feel of the site (except for the navbar). In this exercise, we will use existing code from various sources and let Dreamweaver to help us put it all together.

References and resources:

• getbootstrap.com is the official documentation for all things Bootstrap; although a great reference site, downloading starter files from here is challenging.
• startbootstrap.com is one of many sites that offer free starter templates; these templates are lean and clean and ready to be used without fussing with relinking resources.
• www.bootstrapcdn.com is a free content delivery network that can speed up loading of css and javascript required for Bootstrap deployment.
• Google fonts is the "go to" site for free high quality web fonts. The embed code is simple, the site is easy to use, and the fonts load fast.
• Fancybox 3 JQuery Lightbox is one of the best image gallery lightboxes available. It has a very clean look and the code is easy to understand.
• CSS Flexbox is a layout system that allows for more control of items in a grid. This W3 Schools tutorial is a great place to learn this system.
• Scrollspy is a Bootstrap plugin that updates the menu based on scroll position. This W3 Schools tutorial will get you started.
• fontawesome.io is a free Bootstrap companion with hundreds of icons designed to be used as a family.

Procedure

Overview: Add content to Bootstrap template. Customize CSS styles. Add Flexbox CSS. Add Fancybox code. Publish.

Preparing for the exercise

1. download starter files
2. move files into "html" folder; rename "x?-illustrators"
3. launch dreamweaver
4. site > new site: "gds000-x?-illustrators"; browse for above folder
5. window > files: new file "index.html" (RMB on root folder)
6. new file "css/illustrators.css" (RMB on "css" folder)
7. open "index.html", "illustrators.css"
8. browse to W3 Schools's scrollspy reference page; scroll down to "Smooth scrolling" section, click TRY IT YOURSELF
9. view > code: copy/paste code into "index.html"
10. view > live view: note media queries and break points
11. file > real-time preview > chrome (opt+F12): note error on "WebSiteName"
12. edit line 78 as shown (animates all links with this class):
    $("a.linkScroll").on('click', function(event) {
13. line 7: move <link> to line 9 (<script> should be above <link>)
14. dupe line 9 to make line 10; edit href="css/illustrators.css"
15. copy/paste "body" css code from "index.html" to "illustrators.css"
16. file > real-time preview > chrome (opt+F12)

Embedding Google fonts

1. browse to fonts.google.com
2. search for "roboto"
3. select "roboto" (+), click "1 family selected"
4. click "customize", select only the following weights:
   • roboto: regular 400
   • roboto: regular 400 italic
   • roboto: black 900
   • roboto: black 900 italic
5. copy/paste embed code to "index.html"
6. backup site: dupe root folder, rename with today's date

Setting up the page structure

1. delete placeholder css in <style> section (<style> should be empty)
2. delete placeholder <div#section1>; repeat with other section <div>s
3. modify the main menu:
   • href="#start": the ART of illustration
   • href="#gallery": Gallery
   • href="#": Artists
   • href="#exhibit": Exhibit
4. add html comments:
   <!--START DROPDOWN-->
   <!--START DROPDOWN-->
5. modify drop down menu:
   <li><a href="#balbusso">Balbusso Twins</a></li>
   <li><a href="#binkley">Ed Binkley </a></li>
   <li><a href="#buzelli">Chris Buzelli </a></li>
   <li><a href="#chin">Marcos Chin </a></li>
   <li><a href="#kiuchi">Tatsuro Kiuchi </a></li>
   <li><a href="#martincic">Miriam Martincic</a></li>
   <li><a href="#mayer">Bill Mayer</a></li>
   <li><a href="#prosek">James Prosek</a></li>
   <li><a href="#steadman">Ralph Steadman</a></li>
   <li><a href="#wiley">Matt Wiley</a></li>
6. animate all internal links: add class="linkScroll" to <a>
7. setting up the "start" section (read up on container classes):
   <div id="start" class="container-fluid">
   <section class="container">
   <h1>top</h1>
   <p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
   </section>
   </div>
8. duplicate "start" section 12x (total of 13)
9. modify IDs and h1 to match menu items
10. edit <div#balbusso> as follows:
    <div id="balbusso" class="container-fluid">
11. repeat with all other artists
12. file > real-time preview > chrome (opt+F12)
13. backup site: dupe root folder, rename with today's date

Merge "contents.html" into "index.html"

1. open "content.html"
2. view > code: copy gallery images into <div#gallery> (delete <section>)
3. view > design: copy all other sections (one at a time, retain <section>)
4. browse to getbootstrap.com copy iframe code for 16:9 aspect ratio
5. paste into <div#exhibit> below Flicker's iframe code, merge Flickr and Bootstrap code
6. delete <h1> in <div#top>, insert > image: images/title.png; add class=img-responsive
7. animate all internal links in <div#top>: add class="linkScroll" to <a>
8. window > css designer: source=illustrator.css; selector: new (+):
   • #top: bg-color=#9f94c3; bg-image=gradient1.png, repeat-x
   • #gallery: bg-color=#000; bg-image=gradient1-bg.png, repeat-x
   • #artist div.container-fluid: bg-color=#f6a655; bg-image=gradient2.png, repeat-x
   • #exhibit: bg-color=#f08c7b; bg-image=gradient3.png, repeat-x
   • .container: max-width=800px
   • #top img: margin-bottom=40px
   • section: padding-top=100px, padding-bottom=20px
   • body: text: color=#5a4a46, font-family="Roboto", Arial, sans-serif (start with Verdana, edit code); font-size=16px, line-height=150%
   • #myNavbar: text: font-weight=900
   • .navbar-brand: width=300px, margin-top=-2px, padding-left=50px; text: font-weight=900, font-size=16px, line-height=150%
   • h6: text: color=color=#C7CC9B, font-weight=900, font-size=16px, line-height=150%, text-align=center
   • strong: font-weight=900
   • a, h1: text: color=#FDE4C6
   • #top a: text: color=#EDEEDF
   • .pull-left: margin-top=4px, margin-right=20px; border: all sides, border-width=3px, border-style=solid, border-color=#FDE4C6
   
9. file > real-time preview > chrome (opt+F12)
10. backup site: dupe root folder, rename with today's date

Adding Flexbox

1. window > css designer: add source (+):
   • css/flex.css (study code) (tutorial)
   
2. add to inside of <div#gallery>:
   <div class="row"> <div class="column">
   </div></div>
3. file > real-time preview > chrome (opt+F12)
4. add media query (+):
   @media screen and (min-width:1260px)
5. move 6-column code into above media query
6. repeat with other media queries:
   • two column-layout: min-width:420px, flex: 50%
   • three column-layout: min-width:630px, flex: 33.333%
   • four column-layout: min-width:840px, flex: 25%
   • five column-layout: min-width:1050px, flex: 20%
   
7. file > real-time preview > chrome (opt+F12)
8. tip: window > css: source = flex.css:
   • .col img (global): increase negative right margin if needed
9. backup site: dupe root folder, rename with today's date

Adding Fancybox

1. browse to fancyapps.com/fancybox/3/
2. copy/paste fancybox css and javascript links into "index.html" (important: <script> should load first, <link> should load after <script>, our custom "illustrator.css" should load last)
3. replace images in <div#gallery> with contents of "captions.txt"
4. file > real-time preview > chrome (opt+F12)
5. backup site: dupe root folder, rename with today's date

Fine-tuning the page

1. window > css designer: source=illustrator.css; add selector (+):
   • .fancybox-is-open .fancybox-bg: layout: opacity: 1
2. window > css designer: source=illustrator.css; edit selector:
   • #artist div.container-fluid: padding-bottom=50px
   
3. add .pull-left to wraparound images
4. change title to:
   <title>the ART of illustration | Giertz Gallery | Parkland College | Champaign IL USA</title>
   
5. add favicon link:
   <link rel="icon" type="image/png" href="/images/favicon.png">
   
6. file > real-time preview > chrome (opt+F12)
7. backup site: dupe root folder, rename "x?-illustrators-alt"

Making an alternate version (see example)

1. site > new site "x?-illustrators-alt"
2. open "index.html"
3. modify the navbar: link to the following files:
   • index.html
   • gallery.html
   • artists.html
   • exhibit.html
4. modify dropdown menu: add "artist.html" to each link; repeat with <h6> section in <div#start>
5. in finder, duplicate "index.html" 3x; rename to match above links
6. in each file, delete unneeded sections
7. delete "scrollspy" <script> right above </body> (in all files except "artists.html")
8. "index.html": window > css designer: source=new (+): define in page
9. window > css designer: source=<style>:
   • body: bg: color=?? (eye dropper)
10. window > css designer: source=illustrator.css; add selector (+):
    • .hit: text: color=fff
11. add "hit" state to select menu item on each page per example:
    <span class="hit">the ART of illustration</span>
12. repeat with other pages
13. file > real-time preview > chrome (opt+F12)

Grading

1. publish your both of your finished sites (instructions)
2. make links from your Process Page to this exercise