# StepWiser
Quick Guide to Dreamweaver CC 2017+
By Peter Hulm
Bootstrap Resumé: the first step
Bootstrap is a framework for web pages created by Twitter employees. It uses a grid system, dividing each page into 12 vertical cells to control layouts. Out of the box it provides "responsive" layouts that change according to the width of the screen you use on your computer.
Create a new page from the Starter Templates for a cv.htm
.
The other thing to do first is to create a blank stylesheet called something like cv.css for your specific styling that overrules the standard bootstrap styling: i.e. it should be linked in the head of the cv.htm after the bootstrap.css.
The File
Menu has an Attach Style Sheet
option but check the code to ensure it is properly placed. F10
will call up the Code Inspector
.
You can also inspect the code here. You can ignore the rest for now. This is what the code produces out of the box.
Unlike other Dreamweaver Starter Templates, the Bootstrap specimens are poorly commented.
To get a proper WYSYWYG (what-you-see-is-what-you-get) view in Dreamweaver I had to set the display to Live View.
N.B. Dreamweaver wants you to hook up to bootstrap.css
but gave me the wrong link. You too may need to change the default link, and I prefer to link to the minified version, bootstrap.min.css
, then change tags in my separate css file, here cv.css
. You know where to find the File|Attach Style Sheet
command. Just make sure it comes after the bootstrap stylesheet in the head section.
Replace the defaults
To ensure you have the latest version of Bootstrap, once you have created your page with the Dreamweaver defaults, you can replace the head specifications with the online versions (currently 4.5.3) , though you will need to have an internet link to view it. Here's the code (ignore the line breaks):
<!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
You will need to add some more code in the bottom part of the html just after the /body
tag.
<!-- jQuery, Popper.js, and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/ zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/ umd/popper.min.js" integrity="sha384-9/ reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYl FhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3 /dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7 lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>