Creating a Responsive Website with Bootstrap in Dreamweaver

Posted on by

Dreamweaver has a range of features and capabilities that extend far beyond basic website creation. Here’s another tutorial that focuses on creating a responsive website using Bootstrap, a popular framework that is included with Dreamweaver.

Prerequisites: Basic understanding of HTML and CSS, and Adobe Dreamweaver installed on your computer.

Step 1: Set Up a New Site

Just like the previous tutorial, you first need to set up a new site in Dreamweaver. Click on “Site” in the menu, then “New Site”. Enter a name for your site in the “Site Name” field, and select a local site folder where your files will be saved.

Step 2: Create a New HTML File

  1. Go to “File” > “New”.
  2. In the dialog box, choose “New Document” > “HTML” > “Bootstrap Templates”, then select a template that fits your needs, for example, “Starter: Basic marketing site”.
  3. Click “Create”.

Dreamweaver will create a new HTML document based on the Bootstrap template, and also include the necessary CSS and JavaScript files.

Step 3: Customize the Page

You can now customize your page. The Bootstrap template has several sections like a navigation bar, header, content sections, and footer. You can customize the text, images, links, and more in these sections to suit your needs. Dreamweaver’s visual editor (Design view) makes it easy to see how your changes will look without having to preview the page in a browser.

Step 4: Edit CSS Styles

The Bootstrap CSS file (bootstrap.css) is linked in your HTML document. You can override these styles by adding a custom CSS file:

  1. Go to “File” > “New”, select “CSS”, and click “Create”.
  2. Save this file as “custom.css” in the same location as your HTML file.
  3. Link this CSS file in your HTML document below the link to the Bootstrap CSS file: <link rel="stylesheet" type="text/css" href="custom.css">.
  4. Now you can add your own styles in the “custom.css” file.

Step 5: Add More Pages

You can add more pages to your site by repeating steps 2-4. Make sure to update the navigation links in each page to correctly link to all your pages.

Step 6: Preview and Publish

Preview your website in a browser by clicking the “Real-Time Preview” button. When you’re happy with your site, you can publish it by clicking on the “Put Files to Remote Server” button (if you’ve set up a server connection).

This tutorial shows how to use Dreamweaver’s Bootstrap templates to quickly create a responsive website. However, Dreamweaver offers many more features such as interactive behaviors, jQuery UI widgets, form validation, and more that you can explore to enhance your website.