Adobe Dreamweaver CC Classroom in a Book (2014 release) David J. Hark dhark.com dhark@fred.net 29 April 2015 Text and Some Code ========================================================= CHAPTER 2 HTML BASICS p. 38 p. 42 2 Welcome to my first webpage p. 42 3 Making web pages is fun and easy! p. 43 3 (  or  )

Making web pages is fun     and easy!

p. 44 2

Welcome to my first web page

p. 45 2 and easy! p. 46 HTML Basics for Fun and Profit p. 48 9 Welcome to my second page p. 49 15 Making web pages in Dreamweaver is even more fun! p. 50 18 HTML Basics, Page 2 p. 50 20 secondpage CHAPTER 3 CSS BASICS p. 60 p. 73 h1 {color:gray;} p. 74 8 h1 {color:red;} p. 75 15 h1 {color:orange;} p. 76 3 h1 {font-family:Arial;} p. 77 5 h2 {font-family:Arial;color:gray;} p. 77 6 h3 {font-family:Arial;color:gray;} p {font-family:Arial;color:gray;} li {font-family:Arial;color:gray;} p. 77 8 article {font-family:Arial;color:gray;} p. 79 12 body {font-family:Arial;color:gray;} p. 79 3 p {font-family:Garamond;} p. 80 5 article p {font-size:120%;color:darkblue;} p. 81 1 h1 {font-family:Tahoma;color:teal;} p. 81 2 .content h1 {font-size:300%;color:red;} p. 81 3 #box_model h2 {color:orange;} #cascade h2 {color:purple;} #inheritance h2 {color:darkred;} #descendant h2 {color:navy;} #specificity h2 {color:olive;} p. 93 2 .sidebar1 {width:200px;} p. 94 1 article {width:50%;} p. 95 4 article {width:50%;min-width:400px;} p. 95 6 article {width:50%;min-width:400px;max-width:700px;} p. 96 5 body {font-size:200%;font-family:Arial;color:gray;} p. 97 6 body {font-size:100%;font-family:Arial;color:gray;} p. 97 2 article section { border-top:solid 10px #000; border-left:solid 2px #ccc; } p. 97 4 article, footer, header, section {border:solid 1px #999;} p. 98 2 body {font-size:100%;font-family:Arial;color:gray; background-color:#ccc;} p. 99 3 article, footer, header, section {border:solid 1px #999; background-color:#fff;} p. 99 4 body {font-size:100%;font-family:Arial;color:gray; background-color:#ccc; background-image:url(images/street.jpg);} p. 100 7 body {font-size:100%;font-family:Arial;color:gray; background-color:#ccc; background-image:url(images/street.jpg);backgound-size:100% auto;} p. 100 8 body {font-size:100%;font-family:Arial;color:gray; background-color:#ccc; background-image:url(images/street.jpg);backgound-size:100% auto; background-position:center; background-attachment:fixed;} p. 101 10 body {font-size:100%;font-family:Arial;color:gray; background-color:#acd8b6; background-image:url(images/stripes.png);backgound-size:100% auto; background-position:center center; background-attachment:fixed;} p. 101 11-12 body {font-size:100%;font-family:Arial;color:gray; background-color:#acd8b6; background-image:url(images/stripes.png); background-repeat:repeat-x} p. 101 13 body {font-size:100%;font-family:Arial;color:gray; background-color:#acd8b6; background-image:url(images/stripes.png);} p. 102 2 .sidebar1,article,.sidebar2{ float:right;} p. 103 4 .sidebar1,article,.sidebar2{ float:left;} p. 104 6 .container{ width:1050px;} p. 104 7 footer{ clear:both;} p. 105 1 .sidebar1,article,.sidebar2{ float:left; min-height:1000px;} p. 105 2 .container{ width:1050px; background-color:#fff;} p. 106 3 .sidebar1,article,.sidebar2{ float:left; min-height:1000px; margin:5px;} p. 106 5 .container{ width:1050px; background-color:#fff; margin:20px auto;} p. 107 1-2 .sidebar1,article,.sidebar2{ float:left; min-height:1000px; margin:5px; padding: 5px;} footer{ clear:both; padding:10px;} p. 107 3 article section { border-top:solid 10px #000; border-left:solid 2px #ccc; padding:5px; } p. 108 5 .sidebar1,article,.sidebar2{ float:left; min-height:1000px; margin:5px; padding: 15px;} p. 108 6 .sidebar1,article,.sidebar2{ float:left; min-height:1000px; margin:5px; padding: 5px;} p. 109 2 (top) p,h1,h2,h3,h4,h5,h6,li{margin:0px;} p. 109 1 article, footer, header, section {background-color:#fff;} p. 109 2 p,h1,h2,h3,h4,h5,h6,li{margin:10px 0px;} p. 109 3 header { padding:30px; border-bottom:2px solid #000; text-align:center; } p. 109 4 .container { width:1050px; background-color:#fff; margin:20px auto; -webkit-box-shadow:0px 0px 20px 5px rgba(0,0,0,0.40); box-shadow:0px 0px 20px 5px rgba(0,0,0,0.40); } CHAPTER 4 WEB DESIGN BASICS p. 114 p. 124 BreeSerif Bold Bell Centennial Std Bold Add fonts from Typekit https://helpx.adobe.com/creative-cloud/help/add-fonts-typekit.html p. 127 1 200% fern.png+fern.jpg CHAPTER 5 CREATE A PAGE LAYOUT p. 130 p. 153 5 (CSS Shorthand version) .content h1 { font: 400 normal 250%/1.4em patua-one; margin-bottom: 0px; margin-top: 0px; } p. 155 1 greenstart p. 155 2 GREENAWARENESS IN ACTION p. 157 8 background-repeat: no-repeat; background-image: url(images/fern.png); background-size: auto 90%; background-position: 47% center; p. 159 Apply gradients to background https://helpx.adobe.com/dreamweaver/using/gradients.html p. 160 5 background-size: auto 90%, 100% auto; background-position: 47% center, left top; p. 161 9 (only webkit) position:relative; background-color: #090; height: 200px; color: #fff; background-color: #090; background-image: url(images/fern.png), url(images/stripe.png), -webkit-linear-gradient (270deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-image: url(images/fern.png), url(images/stripe.png), linear-gradient(180deg,rgba(0,102,0,1.00) 0%, rgba(0,204,0,1.00) 100%); background-repeat: no-repeat, repeat-x; background-size: auto 90%, auto auto, 100% auto; background-position: 47% center, left top, left top; WITH ALL DW CSS PREFIXES: Preferences > CSS Styles webkit, mozilla,opera position:relative background-color: #090; height: 200px; color: #fff; background-color: #090; background-image: url(images/fern.png),url(images/stripe.png), -webkit-linear-gradient(270deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-image: url(images/fern.png), url(images/stripe.png), -moz-linear-gradient(270deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-image: url(images/fern.png),url(images/stripe.png), -o-linear-gradient(270deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-image: url(images/fern.png),url(images/stripe.png), linear-gradient(180deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-repeat: no-repeat, repeat-x; background-size: auto 90%, auto auto 100% auto; background-position: 47% center, left top, left top; p. 162 3 text-shadow: 0px 0px 30px rgba(0,0,0,0.75); p. 163 5 .logo-white { color:#FFF; } p. 166 16 p. 170 13 background-color: #069; background-image: -webkit-linear-gradient(270deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%); background-image: linear-gradient(180deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%); p. 170 14 border-top-color: #0ae; border-right-color: #024; border-bottom-color: #024; border-left-color: #0ae; p. 171 17 .top ul li a:hover { color: #fff; background-image: -moz-linear-gradient(90deg,rgba(0,102,153,1.00) 0%, rgba(0,136,170,1.00) 100%); background-image: -webkit-linear-gradient(90deg,rgba(0,102,153,1.00) 0%, rgba(0,136,170,1.00) 100%); background-image: -ms-linear-gradient( 270deg, rgb(2,129,166) 0%, rgb(0,97,153) 100%); background-image: -o-linear-gradient(90deg,rgba(0,102,153,1.00) 0%, rgba(0,136,170,1.00) 100%); background-image: linear-gradient(0deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%); } p. 172 21 border-top: 5px solid #Fd5; p. 173 7 .main aside blockquote { padding: 0px; margin: 0px 0px 20px 0px; } p. 174 8 "Insert quotation here." p. 174 10 aside blockquote p { padding: 0px .5em; margin: 0px 0px 5px 0px; text-indent: -0.5px; } p. 174 13 Insert author here p. 174 15 aside blockquote cite { display: block; padding-right: 0.5em; font-size: 90%; text-align: right; font-style: italic; } p. 176 6 Document Object Model http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model (DOM) http://www.w3.org/DOM/ p. 177 9 Insert sidebar heading here p. 177 10 Insert sidebar content here p. 177 12 .sidebar2 { width: 200px; background-color: #cfc; float: left; overflow: auto; } p. 177 14 .sidebar2 section h2 { margin-bottom: 5px; font-weight: 700; font-size: 130%; line-height: 1.4em; } p. 177 1,2,3 Insert main heading here Insert subheading here Insert content here p. 178 6 footer { padding-top: 10px; padding-right: 10%; padding-bottom: 10px; padding-left: 10%; background-color: rgba(104,104,104,1.00); position: relative;/* this gives IE6 hasLayout to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ color: #ffc; font-size: 95%; margin-top: 20px; background-image: -webkit-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-image: -moz-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-image: -o-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); background-image: linear-gradient(0deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%); } p. 178 9 2014 Meridien GreenStart. All rights reserved. p. 179 W3C Markup Validation Service http://validator.w3.org/ CSS Validation Service https://jigsaw.w3.org/css-validator/ http://validator.w3.org/ CHAPTER 6 DESIGNING FOR MOBILE DEVICES p. 182 p. 202 8 .content h1 { font-size: 200%; text-align: center; } p. 203 EDGE INSPECT Adobe Edge Inspect http://en.wikipedia.org/wiki/Adobe_Edge#Adobe_Edge_Inspect Adobe Creative Cloud: Edge InspectCC https://creative.adobe.com/products/inspect Adobe Edge Inspect CC (Chrome) https://chrome.google.com/webstore/detail/adobe-edge-inspect-cc/ijoeapleklopieoejahbpdnhkjjgddem?hl=en Adobe Edge Inspect CC Getting Started Guide chrome-extension://ijoeapleklopieoejahbpdnhkjjgddem/firstrun.html CHAPTER 7 WORKING WITH TEMPLATES p. 206 p. 209 6 Get a fresh start with GreenStart p. 218 3 Meridien GreenStart Association - Add Title Here p. 218 5 Meridien GreenStart Association - add description here CHAPTER 8 WORKING WITH TEXT, LISTS, AND TABLES p. 228 CHAPTER 9 WORKING WITH IMAGES p. 276 p. 285 7 Elaine, Meridien GreenStart President and CEO p. 287 6 Sarah, GreenStart Events Coordinator p. 288 5 Eric, Transportation Research Coordinator p. 290 8 Lin, Research and Development Coordinator p. 296 7 Matthew, Information Systems Manager p. 299 6 Green buildings are top earners p. 302 3 Buy local to save energy CHAPTER 10 WORKING WITH NAVIGATION p. 306 CHAPTER 11 ADDING INTERACTIVITY p. 332 p. 338 11 - 12 Green Travel Eco-Touring p. 339 15 Eco-Tour of Paris p. 351 12 - 13 .content section #Accordion1 .ui-helper-reset.ui-state-default a:link .content section #Accordion1 .ui-helper-reset.ui-state-default a:link,.content section #Accordion1 .ui-helper-reset.ui-state-default a:visited p. 358 12 .content section .ui-widget-content p. 359 16 .content section div div ul,.content section div div ol p. 360 21 .content section div div CHAPTER 12 WORKING WITH WEB ANIMATION AND VIDEO p. 362 p. 377 4 .content section video,.content section video object CHAPTER 13 PUBLISHING TO THE WEB p. 380 APPENDIX Tiny URL's p. 403