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.
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.
Rename the folder that was downloaded to the name of the site (e.g., RMCS).
Move this folder if necessary to where you want the site root to be.
NOTE:
There should be three folders (js, css and fonts). The *.min files are the compressed files–you can used them when you are finished so that files can load faster because they are smaller. We will use the uncompressed versions of the JavaScript and CSS for the local ones and the *.min for the remote ones. The fonts folder has a list of glyphicons that will be used later.
Download / Install jQuery
Go tojQuery.comto download the jquery.js file that is also needed for Bootstrap to run JavaScript plug-ins.
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
Create a folder named images in the site root directory (e.g., RMCS).
Download tutorial images or create your own images to use for your project and place them in the images folder.
Create HTML Framework
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.)
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:
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>
Write the following three meta tags after the opening
<head>
tag to ensure correct rendering with IE and zooming on mobile devices.
CODE EXPLANATION:
-
The charset attribute sets the character set (e.g., utf-8) for the page.
-
The http-equiv and content attributes make the page compatible with IE.
- The name attribute is used to set the viewport which makes the page mobile friendly. On modern mobile devices with high pixel resolution the page will attempt to be displayed the whole site on the phone which is usually to small.
- The content attribute of the last <meta> tag makes the page display based on the device width (e.g., width=device-width) and the initial zoom level (e.g., initial-scale=1), where 1 represents 100%.
Link CSS / JavaScript Files
Write the following
<link>
tags below the closing
<title>
tag to link to two CSS files that will be in the css folder:
NOTE: It it common practice to include the external style sheets in the <head> tag using a <link> tags with the last style sheet being the one (e.g., custom_styles.css) used to overwrite the Bootstrap framework CSS style sheet (e.g., bootstrap.css). Also, it is common practice as will be seen later to include the JavaScript files at the bottom of the page so that the page content can be loaded and be available for the script if needed. Notice that <link> tags are self closing–meaning that they do NOT have a closing tag (e.g., </link>).
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.
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.
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.
Add some text after the opening
<body>
tag to see if the Bootstrap framework is working correctly:
<body>
<h1>RMCS</h1>
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.