Adobe Creative Cloud

Build Responsive Websites with Built-in Bootstrap Templates in Dreamweaver

Learn how to use Dreamweaver’s built-in templates to create responsive content

Dreamweaver now has several Starter Templates to give you a jump start toward creating web pages that will look great on any size device. These templates are divided into two categories: Bootstrap Templates and Responsive Starters. This tutorial will show you how to create a page based on a Bootstrap Template.

What do I need?

Download the following files: botswana_sunset.psd

 

Step 1 of 8

Create a new page from a Bootstrap template

You see the Welcome Screen each time you open Dreamweaver. If you don’t see it, check your preferences and verify that the option Show Welcome Screen is checked, or close any open files and select Help > Welcome. You can use either the Welcome Screen or the File menu to create a new page. Before you create a new page, however, it’s a good idea to create a folder to store the new page and its related files, such as images or cascading style sheet files; then to define a site using this folder as the site folder.

Use your File management program to create a new folder. I named my folder botswana.

Select Dreamweaver Site in the New Column on the Create Welcome Screen, then define a new site using the folder you just created as the Local Site Folder. I named my site Botswana.

Next, on the Welcome Screen, select the Create tab, then select Bootstrap-Agency under the Starter Templates column.

bootstrap 1

Replace the default File name with index.html.

Next, select Copy in the Copy Dependent Files dialog box to copy the dependent files necessary for this design into your site. These files include a style sheet, fonts, images, and JavaScripts.

 

Step 2 of 8

View the files that were copied to the Files panel

Let’s take a look at the files that were copied into the local site folder. Open the Files panel and expand each of the four subfolders that were created.

You see a bootstrap.css file in the css folder; five files used to format the fonts on the page in the fonts folder; four image files in the img folder; and two JavaScript files in the js folder. The index page has 245 lines of code. The bulk of the code for the content placement and design is in the bootstrap.css file, which has over 6,500 lines of code!

bootstrap 2

 

Step 3 of 8

Add a page title and page content

One of the simplest, but sometimes overlooked tasks for creating a web page is to add a page title. A page title, which is different from a page filename, appears on the browser page tab when a page is open in a browser. A page title is part of the Meta data for the HTML file, and is used by search engines to help users locate your site. If you don’t assign a page title, the default page title will appear in the browser page tab. An unassigned page title not only reflects poorly on the page designer, but diminishes the chances of search engines indexing the page. The default page title for this index page is Bootstrap Agency Template.

Go to Code view or Split view, then replace the title Bootstrap Agency Template with Welcome to Botswana!

bootstrap 3

 

Step 4 of 8

Add an image using the Extract panel and Live View

A relatively new Dreamweaver panel is the Extract panel. The Extract panel is a powerful tool that can extract, or selectively copy images, text, or styles from a Photoshop file, then add or apply them to a page open in Live View in Dreamweaver. For instance, you can copy an image on a specific layer in a Photoshop file and place it in an HTML div tag or other page container. Or you can copy selected text and place it, along with its styles, on your page. You can even design an entire layout in Photoshop, then extract the layout to create a new page.

Select the Workspace switcher, then select Extract. This workspace divides the Dreamweaver workspace into the Extract panel and the Document window.

bootstrap 4

Select Upload PSD in the Extract panel, then browse to and select the file botswana_sunset.psd. After the file is uploaded into the Extract panel, it is available to use to add content on a page.

bootstrap 5

Select the image thumbnail to open it in the Extract panel, select the Layers button in the Extract panel, then select the Background layer.

bootstrap 6

Change to Live View if necessary, then drag the background layer from the Extract panel to the div under the set of links at the top of the page until you see the </> tag, press and hold over the </> tag until you see the DOM panel, slide the pointer down until it points to the div class=”row”, drop the image, then press [Enter] to accept the default image name.

bootstrap 7

bootstrap 8

The image now fills the div class=“row”, but a breakpoint appears indicating where the image will not fit on smaller screen sizes. To automatically resize the image to fully appear on all size devices, create a style with a width property to resize the image responsively.

bootstrap 9

Select the menu to the left of the img tag in Element Quick view, then the add alt and title text Sunset over the Moremi Game Preserve.

bootstrap 10

You can close the Extract panel now to free up workspace.

 

Step 5 of 8

Modify a style with the CSS Designer panel

Select the banner image, select Add Class/ID (the plus sign) in Element Quick view over the top left corner of the image, then type .banner_img in the class text box.

bootstrap 11

Open CSS Designer, select .banner_img in the Selectors pane, then set the Layout width to 100%. If you don’t see the .banner_img selector, be sure your CSS Designer panel is in Current mode with the Show Set checkbox deselected in the Properties pane.

bootstrap 12

After setting the width to 100%, the image will expand to the full width in the div container in any size device.

bootstrap 13

 

Step 6 of 8

Preview a page with the Window Size menu

Close the Extract panel and save all files.

Select the Window Size menu on the right side of the Status bar, then select iPhone 6 Plus. Notice that you have the choice of viewing the page in either Landscape or Portrait orientation.

bootstrap 14

The page content, including the image, resizes to the iPhone 6 Plus Landscape orientation size.

bootstrap 15

Experiment with selecting other screen sizes to verify that the page content conforms to each selected size, then return to Full Size.

 

Step 7 of 8

Preview a page with the Visual Media Queries bar

The Visual Media Queries bar is another way to check your page design in different media sizes. The Visual Media Queries bar is under the Document toolbar. It visually represents the media sizes that are defined in your bootstrap css file.

Select one of the media queries on the Visual Media Queries bar and notice how the page resizes to fit the width of the selected device.

bootstrap 16

The Scrubber is a tool you can use in conjunction with the Visual Media Queries bar. Slowly drag the scrubber toward the center of the page to see how the page “breaks” or rearranges content to adjust to a new screen width.

 bootstrap 17

 

Step 8 of 8

Preview a page on a mobile device with Device Preview

Device Preview is a new feature with Dreamweaver 16. Device Preview is an easy way to preview a page on the actual device size you are testing, rather than using a simulated size within Dreamweaver or manipulating the page size in a browser window. This is an extremely cool feature! All devices you are testing must be on the same network that Dreamweaver is using for the feature to work correctly.

Select Device Preview on the right side of the Status bar, then when the QR code displays for the index page, scan the QR code with your mobile device with an app such as Microsoft Tag. The index page will scan into your mobile device so you can see how it looks live on a mobile device.

bootstrap 18

The page below was scanned using an iPhone6 Plus.

bootstrap 19

Summary

This tutorial introduced the new responsive Bootstrap templates in Dreamweaver. We created a new page based on the Agency template, then used the Extract panel to upload a Photoshop file and extract an image to add to the new page. We then added a class style to the image to format the image to display responsively at 100% width on any size device. The next steps would be to replace each placeholder item with new content and adjust default styles or add new styles to fine tune the positioning of all page elements. As you work, it is important to view the work in progress using such tools as the Window size menu, the Visual Queries bar, and the Device Preview.

Dreamweaver Interface

Join the discussion

  • By king - 8:18 AM on July 17, 2015  

    Fantastic photos from dw cc

    • By Lindsay Munro - 5:20 PM on July 17, 2015  

      The incredible author of this post, Sherry Bishop, took these photos on a recent vacation. We were thrilled she used them in this tutorial. Glad you liked them!

  • By MaryAnn Selva - 2:17 PM on July 28, 2015  

    Can you explain exactly how to accomplish this step please?
    “The image now fills the div class=“row”, but a breakpoint appears indicating where the image will not fit on smaller screen sizes. To automatically resize the image to fully appear on all size devices, create a style with a width property to resize the image responsively.”

  • By Preran Kumar - 4:33 PM on July 28, 2015  

    Check out this article on responsive images in bootstrap http://skeeterz71.com/make-images-responsive-default-bootstrap-3/ If you still need help, please post your query on the DW forum http://adobe.ly/1sBK41o

    • By Carol - 5:04 PM on August 29, 2015  

      With respect, I think Mary Ann’s point was that this is a tutorial and as such it should include this important information so that the reader has the tools necessary to complete the tutorial. She will need to display the CSS Designer pod, create a new css file and link to it. She will select that new css file and then select Global from the @Media pod. Then she will add a new selector. I shortened the one I added to the name .row img. Then in the Properties pod, select the width attribute and set it to 100%.

  • By SHERRY - 3:14 AM on August 29, 2015  

    good tutorial just a little problem finding the extract etc but I am very inexperienced hoping you have more bootstrap specific tutorials

  • By webthemez - 7:27 PM on December 28, 2015  

    Nice article !!!

  • By John M - 1:44 PM on April 13, 2016  

    I don’t have Bootstrap Agency listed under Starter Templates. Where do you get that?

    • By Preran Kumar - 9:00 PM on April 13, 2016  

      Hi John, can you post a screenshot of your screen on Adobe forums http://adobe.ly/1JjeDam so that I can share the link for investigation?

  • By Michael James - 8:04 PM on April 26, 2016  

    Aloha, I am just starting this tutorial, when I open the images folder there is only one image, not four as it says in the tutorial lesson, please tell me where I went wrong. Mahalo

  • By Michael James - 8:10 PM on April 26, 2016  

    Aloha, sorry it’s Michael again, I also don’t have the 5 fonts file, help, what did I miss?

  • By Michael James - 9:12 PM on April 26, 2016  

    Aloha again; sorry I’m a beginner and must have missed a tiny detail that will make all this work. DW tells me that the image was downloaded successfully, but I can’t see it in live view, nevertheless I continued with the rest of the lesson and successfully entered all info. I saved everything and tried viewing it in a browser, but no image. I can see where the image is added in the code???

  • By Arun Sharma - 9:48 AM on September 14, 2016  

    Really a useful information, Other one Learnfly Academy is also providing great html online training, css online training, bootstrap online training, web design online training.