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.
Dreamweaver templates have very powerful automation tools for managing hundreds of pages. In this exercise, we will build a responsive master page from scratch and then convert it into a Dreamweaver template.
Important: When using Dreamweaver's templates, you MUST have a separate site definition for every site. There must be a separate TEMPLATE folder in the root directory of every site where templates are being used.
Reference links
Procedure
Overview: Copy content into a new Bootstrap starter file. Customize styles to make a master page. Convert master page into a Dreamweaver template page. Develop a website using the new template page.
Starting a Bootstrap project
- download starter files
- move files into "html" folder; rename "proshow_site_architecture" to "x?-proshow" (this is the root folder for this website"
- download Bootstrap starter files
- rename "index.html" to "master.html"
- merge "vendor" folder into root folder
- download push button pack
- rename "demo.html" to "push-button-demo.html"
- merge "assets" folder into root folder
- launch dreamweaver
- site > new site: site name=x?-proshow;
local site folder=faa999/gds220/html/x?-proshow; export STE file
- site > advanced > recreate site cache
- open "master.html"
- delete <div.col-lg-12.text-center">
- insert (inside div.row):
<div class="col-lg-4"></div>
<div class="col-lg-5"></div>
<div class="col-lg-3"></div>
- add link (above <style>):
<link href="assets/css/buttons.css" rel="stylesheet" type="text/css" />
<link href="css/proshow.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/favicon.png">
- window > files: new file: "css/proshow.css", "css/fonts.css"
Adding content to the master page
- col 1: insert > image: "left.gif" (class="img-fluid")
• select <img.img-fluid>: link="index.html"
• select <a>: insert > div: id="left" (wraparound)
• select <div#left>: insert > div: id="left-bg" (wraparound)
- col 2: copy/paste <div#main> from "about.html"
- col 3: copy/paste <div#right>
- copy/paste <title>: "2014 CUDO PRO SHOW | A Professional Showcase of Design"
- insert > image: "cudo_logo.png"
- insert > image: "social_flat.png" (after <nav>)
- wrap <p> around "social_flat.png"
- create image map links (see sample)
- copy/paste <nav> <li> into <div#navbar> (code view)
- open "push-button-demo.html"
- copy class="btn btn-primary sharp" (code view)
- go to "master.html"
- paste class="btn btn-primary sharp" into <a> in right col
(code view)
- modify code: class="btn btn-primary sharp btn-small" (5x)
- edit <alt> tags
- view > toggle live view (opt+F11)
- file > preview in browser (opt+F12 and cmd+F12)
Embedding responsive iframes
- browse to getbootstrap.com/docs/4.0/utilities/embed
- copy/paste 4x3 embed code into "master.html"
- replace first iframe src="slides/2014.html"
- replace 2nd and 3rd iframe with 1x1 embed code
- file > preview in browser (opt+F12 and cmd+F12)
Styling fonts
- browse to www.google.com/webfonts#HomePlace:home
- search for "oswald", select font (+)
- click 1 FAMILY SELECTED
- select only weights needed for web page (400, 700)
- copy standard embed code to dreamweaver (near top of <head>):
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
- window > CSS designer: add selectors (source=fonts.css):
• body: font-family="Verdana, Arial, sans-serif", font-size=0.8em, line-height=1.7em
• h1: font-family="Oswald, Arial, sans-serif", font-weight=400, font-size=3.5em, padding-bottom=.3em
• h2: font-family="Oswald, Arial, sans-serif", font-weight=700, font-size=1.7em, padding-top=1em
• h3: font-family="Oswald, Arial, sans-serif", font-weight=700, font-size=1em, margin-top=0px
• #nav: font-family="Oswald, Arial, sans-serif", font-weight=400, font-size=1em
• a: color=(darker green), font-weight=700
• a:hover, a:focus: color=(darker green), text-decoration=underline
• footer: padding-top=6em, padding-bottom=2em, font-size=.85em
• #right ul: padding-left=15px, list-style-type=square
Styling the master page
- window > files: duplicate "assets/css/buttons.css", rename "button-safe.css"
- window > css designer: edit selectors (source=buttons.css):
• .btn: width=180px, font-weight=700, letterspacing=2px
• .btn-primary: margin-bottom=4pt; bg-color=#96BD48
• .btn-primary:hover,...: bg-color=#000
• .btn-primary:active,...: bg-color=#000
- window > css designer: add selectors (source=proshow.css, media=global)
• body {
margin-top: 84px;
}
• .rule {
border-top: 1px dashed #96BD48;
}
- window > css designer: add selectors (source=proshow.css,
media=min-width: 768px):
• .container {
padding-left: 0px;
padding-right: 0px;
width: 100%;
max-width: 100%;
}
• .row {
margin-right: 0px;
margin-left: 0px; }
• #main, #right {
margin-top: 50px;
margin-left: 2%;
margin-right: 2%;
}
• #right #logo {
margin-bottom: 50px;
}
• nav li {
list-style-type: none;
padding-bottom: 3px;
}
#right nav ul {
padding-left: 0px;
}
- window > css designer: add selectors (source=proshow.css,
media=max-width: 767px):
• footer {
display: none;
}
• #right #logo {
margin-top: 75px;
}
• p#social {
margin-top: 25px; }
- window > css designer: add selectors (source=proshow.css,
media=min-width: 992px):
• body {
padding-top: 0px;
margin-top: 0px;
}
• .navbar {
display: none;
}
• #left-bg {
background-color: #96BD48;
width: 30%;
position: fixed; margin-left: -15px;
}
• #left {
max-width: 270px;
margin-left: auto;
margin-right: auto;
}
• p#social {
margin-top: 50px;
}
• html, body, .row, .container, .col-lg-4, #left , #left-bg {
height: 100%;
}
- window > css designer: add selectors (source=proshow.css,
media=max-width: 991px):
• #left-bg {
display: none;
}
• #right nav {
display: none;
}
• .navbar-dark.bg-dark {
background-color: #000000 !important;
}
• .navbar-dark.bg-dark li a {
color: #A4A4A4;
text-decoration: none;
}
• .navbar-dark.bg-dark li {
margin-bottom: 5px;
margin-top: 10px;
}
- add <p.rule> below "TOP" in footer
- file > preview in browser (opt+F12 and cmd+F12)
- in finder: duplicate current root folder, rename "x?-proshow-old"
Setting up a Dreamweaver template page
- add <li class="about" > to <nav> and <div#navbar>
- repeat with other links
- window > css designer: add selectors (source=define in page):
• #right nav a .about {background-color: #000000; }
• .navbar-nav .nav-link.about {color: #FFFFFF;
}
- file > preview in browser (opt+F12 and cmd+F12)
- save, save as template: "master.dwt"
- select <div#main>
- insert > template > editable region "main"
- move <style type="text/css"> into existing "head" editable region (code view)
- file > preview in browser (opt+F12 and cmd+F12)
Making the website
- file > new: site templates: "master"
- save as "about.html"
- file > new: site templates: "master"
- save as "receptions.html"
- window > css designer: edit name of selectors (source=<style>):
• #right nav a .receptions {background-color: #000000; }
• .navbar-nav .nav-link.receptions {color: #FFFFFF;
}
- replace content in <div#main>
- repeat with other pages
- file > preview in browser (opt+F12 and cmd+F12)
Vertical centering logos on the sponsors page
- add the following code to "proshow.css" (global):
• .gray { background-color: #EBEBEB;
height: 200px;
margin-bottom: 50px; display: table;
width: 100%;
}
• .centered {
display: table-cell;
text-align: center;
vertical-align: middle;
}
- open "sponsors.html"
- select <p> containing a logo
- insert > div: class=centered (wraparound)
- select <div.centered>
- insert > div: class=gray (wraparound)
- repeat
- file > preview in browser (opt+F12 and cmd+F12)
- in finder: duplicate current root folder, rename "x?-proshow-old2"
Making the landing page
- open "images/type.psd" in photoshop
- examine layers, hide appropriate layer
- file > save for web: type.png" (preset=png 24)
- download "the big picture" sourcefiles from startbootstrap.com (live preview > free download)
- merge "index.html" and "css/styles.css" into root folder
- site > advanced > recreate site cache
- open "index.html" in dreamweaver
- select <nav>; delete
- select <body>, arrow left
- insert > image: "type.png", class="img-fluid"
- insert > image: "chris.png", id=credit
- insert > image "social-flat.png", id=social
- make image map links
- edit <alt> tags
- window > css designer: add selectors (source=define in page):
• .img-fluid: margin-left/right=auto
• #credit: position=absolute, right=15px, bottom=20px
• #social: position=absolute, left=15px, bottom=25px
- copy/paste the following CSS into <head><style>:
- body {
background: url(images/josh.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
- select <body>: add link "about.html"
- copy/paste <title>: "2014 CUDO PRO SHOW | A Professional Showcase of Design" from "about.html"
- file > preview in browser (opt+F12 and cmd+F12)
Grading
- publish your site using "gds220-admin" site (see separate instructions)
- keep this page updated with your work as the semester progresses
