Dreamweaver 2017/2018 and Bootstrap Basics

Dreamweaver 2017/2018 and Bootstrap Basics


Greetings Webbies! Let’s create a basic
web page using Dreamweaver and Bootstrap. here’s the page layout plan our client
would like something like this so we’re gonna start breaking this down in our
mind next we’ll mock up the basic layout into
sections we see a navigation area at the very top followed by a header a main
area with three content areas and then a footer now we’ll need to break that up
into bootstrap components we’ll need a container a row with one column another
row with one column the next row with three columns and finally the last row
with one column now let’s think about how we can apply the semantics to our
components we’ll replace the first column with a navbar component and our
second header row will contain column that’s the full 12 columns of the grid
wide our third main row will contain an aside column an article column in
another a side column for the moment each four columns wide lastly a column
12 wide inside our footer row all of this contained in our container it’s
time to create a new document on the top right of your Dreamweaver interface
click file then click new on the page that opens select new document click
HTML and then the bootstrap tab click the create new button uncheck include a
pre-built layout click customize but let’s leave the default settings and
then click create let’s go ahead and save click file save as locate and click
on your destination folder name your file be sure not to include any spaces
click Save and then confirm that the file has saved in the location that you
desire click refresh if necessary sometimes it doesn’t show up right away
in your file panel notice that bootstrap has
a CSS folder a jeaious folder and a fonts folder you wouldn’t do this in the
real world but for this class I suggest that you move those folders inside the
lesson folder that you’re working on that way when you start another
bootstrap project in another lesson that you won’t have conflicting folders take
a minute to observe the code in the new bootstrap page that you have created
review the content of HTML code paying special attention to the external links
click on the live page and you’ll see a tag that says body in the right of your
Dreamweaver interface near the files panel you’ll see another tab that says
insert to find the component options in the drop down menu select bootstrap
components the bootstrap component menu opens revealing over 20 options this
time you’re going to select the first one container reviewing your code and
your live view you’ll now have a div class container inside your body tag in
version 3 of Dreamweaver you have four size options extra small small medium
and large we’re opting for small so you want to
make sure that you click on the 768 min width in your virtual media query
interface depending on the size of your computer screen you may have to close
all your panels to icons and open just in live view without your code view
showing to make sure that you can select the 768 min pixel small check after you
insert the first element and be sure that you have the small if you’ve got
medium or extra small you just didn’t click in the right place so once you’ve
selected the size and you can see div containers showing in the live window
select the grid row width column from the bootstrap components options be sure
to click on or near the icon if you click in the text
sometimes it doesn’t make the connection select carefully when your select row
with column window pops up you can adjust your column number and select the
row location nest after or before stop and confirm this everything is in the
correct place your container needs to be inside the body opening and closing tags
and your div class row with the column inside needs to be nested inside the
container again all row column sets should be nested inside the container
tags row column sets come one after the other in the layout followed at the very
end by the container closing tag get in the habit of checking to make sure that
all of your components are where they should be finally you’ll be adding semantic
structure follow directions carefully as always

Comments

  1. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *