Setup Frameworks

Download / Install Bootstrap

Before creating a web site or app, it is a good practice to download the necessary frameworks, images, and other assets that are needed. Then, create the HTML framework and connect to the framework via <script> and <link> tags.

  1. Go to getBootstrap.com and click on the Getting started menu at the top of the page and then click on the first Download Bootstrap button to download the Bootstrap framework.
  2. Rename the folder that was downloaded to the name of the site (e.g., RMCS).
  3. Move this folder if necessary to where you want the site root to be.

Download / Install jQuery

  1. Go to jQuery.com to download the jquery.js file that is also needed for Bootstrap to run JavaScript plug-ins.
  2. Unzip the download and save it in the js folder in the site root directory (e.g., RMCS).

    ALTERNATIVE: You could link to the framework files for both Bootstrap and jQuery using their corresponding Content Delivery Network (CDN) links found on their respective sites. See instruction on their web sites for detail.

Download / Create Image

  1. Create a folder named images in the site root directory (e.g., RMCS).
  2. Download tutorial images or create your own images to use for your project and place them in the images folder.

Create HTML Framework

  1. Create a new site.

    NOTE: In Dreamweaver, it's Site > New Site.... Then, enter a Site Name (e.g., RMCS site) and then click the folder icon to navigate to the Local Site Folder that you created earlier and then click the Save button.)

  2. Create a regular HTML framework and save it as index.html in the site root folder.

    NOTE: In Dreamweaver, it's File > New.... Then, select HTML for the document type and None for the framework and then click the Create button:

  3. Add a lang attribute to the <html> tag and a title to the <title> tag:

    <!doctype html>
<html lang="en">
  <head>
    <title>RMCS: Training Made Easy</title>
  </head>
  <body>
  </body>
</html>

  4. Write the following three meta tags after the opening <head> tag to ensure correct rendering with IE and zooming on mobile devices.

    <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Link CSS / JavaScript Files

  1. Write the following <link> tags below the closing <title> tag to link to two CSS files that will be in the css folder:

    </title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom_styles.css" rel="stylesheet">

  2. Create a blank CSS file and name it custom_styles.css and save it in the css folder.

    - It will be used later to create some custom styles to overwrite the default Bootstrap CSS styles.

  3. Optionally, add the following code below the last <link> tag to make page compatible with older versions of Internet Explorer (IE):

    <link href="css/custom_styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

    -     Even though the code is commented, it will still be recognized by Internet Explorer.

  4. Write the following two <script> tags above the closing </body> tag to connect to the jQuery and Bootstrap framework. Comments are optional:

    <!-- jQuery (necessary for Bootstrap's JavaScript plug-ins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plug-ins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>

    -     The version number may be differ from this tutorial if you downloaded it from their website.

  5. Add some text after the opening <body> tag to see if the Bootstrap framework is working correctly:

    <body>
<h1>RMCS</h1>

  6. CHECK POINT: Save the file and preview it in a browser. You should see the text displayed with the Bootstrap framework format instead of the regular browser format.