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
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.
Download / Install jQuery
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.
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
tag and a title to the
<title>RMCS: Training Made Easy</title>
Write the following three meta tags after the opening
tag to ensure correct rendering with IE and zooming on mobile devices.
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%.
Write the following
tags below the closing
tag to link to two CSS files that will be in the css folder:
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
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]>
Even though the code is commented, it will still be recognized by Internet Explorer.
Write the following two
tags above the closing
tag to connect to the jQuery and Bootstrap framework. Comments are optional:
<!-- Include all compiled plug-ins (below), or include individual files as needed -->
The version number may be differ from this tutorial if you downloaded it from their website.
Add some text after the opening
tag to see if the Bootstrap framework is working correctly:
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.