Archived copy for reference only
 

 

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

Interactive Design Exercises
Dreamweaver: Bootstrap Site (Movie Premiere)

(Archived from 2019)

Objective

To explore Bootstrap's responsive framework by developing a website similar to this example.

Discussion

Bootstrap's powerful framework works fine right out of the box. But not all websites are meant to look like Bootstrap templates. They key to successfully use Bootstrap's framework is to customize Bootstrap's styles to fit your design sensibilities.

References and resources:

  • getbootstrap.com/docs/4.0/getting-started/introduction 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
  • fontawesome.io is a free Bootstrap companion with hundreds of icons designed to be used as a family
Procedure

Overview: Download a Bootstrap template, copy content into the template, customize styles to make a master page. Develop a website using the new master page.

Starting a Bootstrap project

  1. download starter files
  2. move files into "html" folder; rename "x0_graphicmeans"
  3. duplicate "site-architecture", rename as "master"
  4. download bootstrap "full" master template
  5. rename "index.html" as "master.html"; move into "master" root folder
  6. copy "vendor" and "css" folders to "master" root folder
  7. launch dreamweaver
  8. site > new site: site name=x0-gm-master;
    local site folder=faa999/gds220/html/x0-gm-master; export STE file

Prepping the "master" page

  1. site > advanced > recreate site cache
  2. open "index.html" and "master.html"
  3. copy/paste links from "index.html" to "master.html"
  4. copy/paste <title> (line #11)
  5. add favicon: <link rel="icon" type="image/png" href="images/favicon.png"> (line #18)
  6. change <nav class="navbar-expand-lg"> to <nav class="navbar-expand-md"> (line #24)
  7. change class to <div class="container-fluid"> (line #25)
  8. hide navbar-brand: apply html comment to line #26
  9. apply "margin-right: auto" to navbar elements: <ul class="navbar-nav mr-auto"> (line #31)
  10. file > preview in browser (opt+F12 and cmd+F12)
  11. inspect navbar in browser, locate background color code
  12. copy/paste code into "full.css"
  13. change background-color: .bg-dark { background-color: #000000 !important; }

Inserting a "full background" image

  1. code view="full.css"
  2. line #8: background: url('../images/gm.jpg')
  3. file > preview in browser (opt+F12 and cmd+F12)
  4. window > css designer: add new media query (+):
    media=screen and (+) min-width=768px
  5. code view: wrap media query around <body> (will affect <body> only on large screens)
  6. move new media query code to bottom of "full.css" (order is important!)
  7. replace <body> specs:
    background-image: url(../images/gm.jpg);
    background-repeat: no-repeat;
    background-position: right 55px;
    background-attachment: fixed;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
  8. file > preview in browser (opt+F12 and cmd+F12)

Adding the logo

  1. position cursor right after <body> (select <body>, arrow right)
  2. insert > Image at top of file "logos/PC-logo-rev-black-24.png"
  3. select <img>: insert > div (wraparound, id="logo)
  4. select <img>: class="img-fluid", href="http://www.parkland.edu/", target="_blank", alt="Parkland College"
  5. window > css designer: source=full.css, add selector (+): #logo
    • width: 40%; min-width: 150px; max-width: 200px;
    • position: fixed; right: 4%; top: 20px; z-index: 99999;
  6. file > preview in browser (opt+F12 and cmd+F12)

Adding content

  1. window > css designer: source="full.css": add selector (+)
    • body: margin-top=50px, margin-bottom=20px; font-family: Helvetica, Arial, sans-serif;
  2. after <!-- Page Content --> (line #51):
    • insert > div: class="col-md-5"
    • insert > div: class="col-md-7"
    • select both <div>: insert > div: class="row" (wraparound)
    • select <div.row>: insert > div: class="container" (wraparound)
    • delete placeholder text
  3. duplicate <div.container> 2x (copy/paste)
  4. change first <div.container> to <div.container-fluid>; change both columns to "col-md-6"
  5. insert > image: images/gm-title2.gif (into left col, right column is blank); add class="img-fluid"
  6. open "index.html", select <main>
  7. copy/paste into "master.html" (second <div.container>, left column, right column is blank)

Adding a button

  1. browse to getbootstrap.com/docs/4.0/components/buttons/
  2. copy code: <button type="button" class="btn btn-primary">Primary</button>
  3. code view: replace "Primary" with &nbsp;RSVP ON FACEBOOK&nbsp;
  4. wrap <a> around button
  5. select <btn>
  6. window > css designer: add selector (+): btn.btn-primary:
    • background-color: #EE2331 (eye dropper);
    • border-radius: 32px;
    • font-weight: bold;
    • border-style: none
  7. duplicate btn.btn-primary, rename btn.btn-primary:hover
    • make background color darker
  8. window > css designer: add selector (+):
    a: text: color=#EE2331, font-weight=bold
    a:hover: text: color=#EE2331
  9. file > preview in browser (opt+F12 and cmd+F12)

Embedding a responsive video

  1. browse to getbootstrap.com/docs/4.0/utilities/embed
  2. copy/paste 16x9 embed code into "index.html"
  3. browse to vimeo.com/157620840
  4. click SHARE, click SHOW OPTIONS (next to embed): do not show PORTRAIT or TEXT LINK
  5. copy/paste embed code into "index.html"
  6. merge code
  7. file > preview in browser (opt+F12 and cmd+F12)

Positioning "back to top"

  1. go to "index.html"
  2. copy <small><a href="#">TOP</a></small>
  3. go to "master.html"
  4. paste right above "bootstrap core js" (near bottom)
  5. browse to www.bootstrapcdn.com/fontawesome
  6. copy html code (important: click down arrow)
  7. go to "master.html": paste right below <title>
  8. browse to fontawesome.io/icon/chevron-circle-up
  9. copy code: <i class="fa fa-chevron-circle-up" aria-hidden="true"></i>
  10. paste right before "TOP", add &nbsp;
  11. add inline style to <i>: style="color: #E50039; font-size: 130%;"
  12. add class="lowerRight" to <small>
  13. window > css designer: add selector (+): .lowerRight:
    • display: none (global)
  14. window > css designer: media=min-width: 768px; add selector (+): .lowerRight:
    • display: inherit
    • position: fixed;
    • right: 4%;
    • bottom: 30px;
  15. add <alt> tags
  16. file > save all
  17. file > preview in browser (opt+F12 and cmd+F12)
  18. close all widows (cmd+shift+W)

Making the website

  1. in finder: dupe "x0-gm-master" root folder, rename "x0-gm-final"
  2. site > new site: site name=x0-gm-final;
    local site folder=faa999/gds220/html/x0-gm-final; export STE file
  3. open "master.html"
  4. file > save as "index.html" (replace)
  5. open "film.html"
  6. copy/paste <main> into "master.html"
  7. save, save as "film.html" (replace)
  8. replace key image
  9. modify <nav>:
    • move class="active" from link #1 to #2
    • move <span> from link #1 to #2
  10. edit text as needed
  11. add images as needed
  12. add containers as needed
  13. repeat with other pages
  14. file > preview in browser (opt+F12 and cmd+F12)

Tips

  1. an easy way to center images is to use text-align: center, but the style must be attached to the <p> and the image must be inside a <p>
  2. to wrap text around images, use width: 50% and float: left (adjust margins as needed)

Grading

  1. publish your site using "gds220-admin" site (see separate instructions)
  2. make a link from your process page to this assignment

BACK TO TOP
Last updated: 5/11/21