Archived copy for reference only
 

Parkland College > Fine & Applied Arts > Graphic Design/Interactive Design > Archives > Exercises > Dreamweaver: Bootstrap (Parallax)
 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Dreamweaver: Bootstrap Website with Parallax Scrolling (Li'l Porgy's)

(Archived from 2019)

Objective

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

Discussion

Parallax scrolling is an advanced interactive technique that's gaining popularity around the web. At its most basic level, all that's required for this technique to work is to control the scrolling speed of background images. This can be easily accomplished with some javascript code.

Navigation is slightly more challenging. A fixed nav bar is a prerequisite. But active states are difficult to control. Fortunately, with a little javascript and some fade transition, one can achieve a reasonably satisfactory result.

Oversized images are the norm with today's broadband penetration. However, reasonable download times are still expected especially for mobile users. Therefore, optimizing images is still required. Surprisingly, many images optimize quite well at JPEG with medium quality. Any images over 1000px wide or over 100K should be carefully examined.

Reference links

Procedure

Overview: Add content to Bootstrap template. Add custom styles. Add javascript code for scrolling effects.

Starting a Bootstrap project

  1. download starter files
  2. move files into "html" folder; rename "x?-porgys"
  3. download Bootstrap starter template
  4. merge essential Bootstrap files into root folder
  5. duplicate "index.html", rename "index-safe.html"
  6. launch dreamweaver
  7. open "index.html"

Prepping the page

  1. line 76: replace jquery code with:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. line 44: delete <span class="sr-only">(current)</span>
  3. line 42: delete <li class="nav-item active">
  4. line 35: change "container" to "container-fluid"
  5. line 34: change "navbar-expand-lg" to "navbar-expand-md"
  6. copy/paste parallax scrolling code from www.bootply.com/zrATdhAKBZ#
    • js goes in to new file "scroll.js"
    • css goes into <head>
    • html replaces <container>
  7. open "scroll.js": change parallax speed: bg-1=.50, others=.30
  8. go to "index.html": load "scroll.js" (above </body>)

Setting up the page structure

  1. window > css designer: edit selectors (source=<style>):
    • .bg-1: background: url('images/1.jpg')
    (repeat 5x with .bg-2 thru .bg-6 selectors)
  2. delete <div#footer>
  3. delete <hr class=""> (all)
  4. delete <div.divider> (all)
  5. delete <div.col-md-4> (3x)
  6. insert <div.col-md-12> (inside <div.row>)
  7. open "site_architecture.html": copy <div#intro>
  8. go to "index.html": paste <div#intro> into first <section> (note: each section has a bg image and one <h1>)
  9. go to "site_architecture.html": copy <div#intro-text>
  10. go to "index.html": paste <div#intro-text> into <div.col-md-12> (note: each <div.container> has body copy and <h2>s)
  11. edit HTML comment by adding '-':
    <!--parallax 1 ----------------------------------------------------- >
  12. delete all other HTML (up to <!-- Bootstrap core JavaScript -->)
  13. copy/paste <!--parallax 1 --> 5x (total of 6)
  14. edit labels: <!--parallax 2 --> etc
  15. delete last <container>
  16. change bg images by changing class numbers (i.e. bg-2)
  17. file > preview in browser (opt+F12 and cmd+F12)

Adding content

  1. open "site_architecture.html"
  2. copy/paste <div#menu> into 2nd <section> in "index.html"
  3. copy/paste <div#menu-text> into <div.text> in "index.html"
  4. insert <row> and <div.col-sm-6> as needed
  5. repeat with additional content

Editing the menu

  1. copy/paste <nav> <li> from "site_architecture.html" into "index.html"
  2. replace "Project Name" with "Li'l Porgy's BBQ"
  3. rename placeholder link: link="#top"
  4. insert > div: id=top (right after <body>)
  5. rename placeholder links in <nav>: link="#menu" etc
  6. move id=intro from <div> to <section>; repeat
  7. change title to "Li'l Porgy's BBQ"
  8. file > preview in browser (opt+F12 and cmd+F12)

Styling the page

  1. browse to www.google.com/webfonts#HomePlace:home
  2. search for "ultra", select font (+)
  3. click 1 FAMILY SELECTED
  4. copy standard embed code to dreamweaver (near top of <head>):
    <link href='https://fonts.googleapis.com/css?family=Ultra' rel='stylesheet'>
  5. window > css designer: edit/add selectors (source=<style>):
    • body: font-family: Helvetica, Arial, sans-serif; font-size=17px; bg-color=#FFE4B3 (tan);
    • h1: font-family='Ultra', serif; font-size: 4em; padding-top: 300px; margin-bottom: 0px;
    • h2: font-family='Ultra', serif; font-size: 1.8em; color=#F45D19 (orange);
    • h3: margin-bottom: 0px; font-size: 17px; font-weight: bold
    • a: color=#F45D19 (orange); font-weight: bold;
    • a:hover, a:focus: color=#F45D19 (orange); text-decoration: underline;
    • .navbar: bg-color=#000000 !important (black);
    • .navbar-nav li:nav-item a.nav-link: color=#FFD262 (yellow);
    • .navbar-nav li:nav-item a.nav-link:hover: color=#FFFFFF (white);
  6. window > css designer: add selectors (source=<style>, 
    media=min-width=768):
    • .navbar .container-fluid: margin-left/right: 3%
    • .navbar-nav li.nav-item a.nav-link:hover: color: #FFFFFF; background-color: #F45D19;
    • a.nav-link.link.active: background-color: #F45D19;
    • .nav.navbar-nav li a: more: transition: .5s all ease-out;
    • a.nav-link.link: margin-top/bottom: -15px; padding-top/bottom: 15px;
  7. window > css designer: add selectors (source=<style>, 
    media=max-width=767):
    • h1: font-size=3em
  8. add class="text-center" to select <div.container>
  9. replace first <h1> with "images/porgys.png"
  10. add class <img.img-fluid>
  11. wrap <p> around <img>
  12. file > preview in browser (opt+F12 and cmd+F12)

Fine-tuning the page

  1. browse to smooth scrolling/active link javascript code
  2. copy/paste js code into new file "smooth.js"
  3. modify code (line 28): scrollTop: (target.offset().top - 0)
  4. load script in "index.html" (above </body>)
  5. add class="link" to <a> in <nav> (4x)
  6. add class="link" to <a class="navbar-brand">
  7. window > css designer: add/edit selectors (source=<style>):
    • .navbar: border-bottom: thin, solid, color: #ADADAD (gray);
    • h1: text-shadow: h-shadow=0, v-shadow=0, blur=10, color=??
    • section.bg-1: height: 800px; padding-top: 300px;
    • .text: margin-top: 20px; margin-bottom: 80px
  8. replace ' with &#8217; (code view)
  9. add link (above <style>): 
    <link rel="icon" href="images/favicon.png">
  10. file > preview in browser (opt+F12 and cmd+F12)

Grading

  1. publish your site using "gds220-admin" site (see separate instructions)
  2. keep this page updated with your work as the semester progresses

BACK TO TOP
Last updated: 5/10/21