Create a Responsive Website from Scratch with Dreamweaver CC

Responsive websites, optimized for different screens, are an absolute must. Over half the number of everyday visitors come from devices other than a desktop computer. To reach your market—any market—you need responsive design. In this tutorial, I’ll show you how to create a responsive website from the ground up using the new device-savvy power tools in Dreamweaver CC 2015.

Exploring new document options

Dreamweaver CC 2015 includes a host of new document options to jumpstart your work, whether you’re a responsive site beginner or a Bootstrap master. For a quick sense of what’s possible, open the New Document dialog (File > New) and choose the Starter Templates category. In the Bootstrap Templates folder, you’ll find a nice array of responsive layouts for different types of sites and web pages, from Agency to Resume.


But if your design is set, Dreamweaver can lay the perfect responsive foundation and hand you all the tools you’ll need to bring your comp to reality:

  1. Choose File > New.
  2. In the New Documents dialog, select the New Document > HTML category.
  3. Select the Bootstrap tab.
    Use the None tab when you want to build a standard HTML page without the Bootstrap framework.
  4. Choose Create new.
    Dreamweaver will copy a number of assets, including JavaScript and CSS files, to the site. For a multi-page site, this is a one-time operation and you would choose the Use existing option for additional pages.
  5. Deselect Include a pre-built layout.
    The pre-built layout is a terrific way to explore Bootstrap in general and Dreamweaver’s new responsive feature set in particular. Be sure to give it a spin some time!
  6. Click Create.

Dreamweaver will notify you of the assets being added and you’ll see them shortly in the Files panel. I always recommend saving your new file right away so you can resolve any links to included files. Once you do that, switch to Code view; you’ll see a link to bootstrap.css in the new css folder up in the area and

Working with the responsive UI Dreamweaver CC 2015 brings a new visual, interactive flair to responsive page design. Media queries are an integral part of modern responsive websites; they provide a series of breakpoints that allow CSS adjustments to accommodate a wide range of screens. Dreamweaver’s new Visual Media Queries toolbar is an eye-catching interface that not only represents the various minimum and maximum width, but you can also use it to quickly resize Dreamweaver’s document window and view the resulting layout:

  1. Notice the multi-colored bars atop the document window:
      1. Click the green media query bar once to resize the document window to the max-width of 767 pixels.
      2. Click the purple bar farthest to the right to snap the screen to min-width of 992px.
      3. Click the left-most blue bar once to move the screen slightly to the max-width of 991px; click it again to resize it to the min-width of 768px. The blue media query bars toggle between their two parameters.
      4. To quickly restore the document window to the fully available width, double-click the large gray area to its right.
      5. You’re not limited to resizing the screen to the media query breakpoints. Drag the scrubber handle—found on the middle-right of the document window—to any width. Once we have some content on our page, you’ll be able to see how the responsive layout reacts smoothly to any screen width.
      6. You can also use the scrubber to establish a new media query: you’re not limited to the Bootstrap defaults. Let’s say we want to specifically address smaller screen widths with a maximum of 379 pixels:
        1. Drag the scrubber to a width of 379 pixels. Dreamweaver displays the current dimensions in a pop-up just below the ruler.
        2. Click Add New Media Query (the plus symbol inside the inverted triangle on the ruler). The next step depends on whether you want to a min-width based query or one based on a max-width; Dreamweaver presents both options, one green and the other purple.
        3. Click the green bar to the left of the dividing line. In the pop-up dialog that appears, adjust the max-width value if necessary. You can also supply a min-width value to create a media query with both parameters.
        4. Set the CSS Source to create a new CSS file and click OK.
        5. Browse to your desired location and name your stylesheet.

          1. In the Insert panel, switch to the Bootstrap Components category.
          2. Choose Container. A
          3. with the class of .container is inserted as noted in the heads-up display.
          4. Click Add Class/ID to further identify the division. I’ll enter #mission as this container will hold my mission statement area. We have a container, now let’s add a row and then columns. With Dreamweaver, you can do that in one step.
          5. From the Insert panel, choose Grid Row with column.
          6. In the Insert row with columns dialog, choose Nest to place the code within the container and change the number of columns to add to 1. Click OK. You can have as many columns as desired; my mission statement will span the page, so I just need the one.
          7. With the new column selected, nest content from the Insert panel. For example, from the HTML category, select Heading: H2 and then double-click the placeholder text to modify.
            5. Now I have one row with a single column and a second row with three columns, all with just headings and basic text. Filling out a comp with content—even placeholder content—can be a real chore. Luckily, it’s a chore that just got a whole lot easier with Dreamweaver’s new Emmet integration. Emmet is, essentially, a macro engine based on abbreviations. Let’s use it to whip up some lorem ipsum content:

Handling navigation Navigation can be really tricky in responsive sites. You want something that is easy to use, flexible, and robust but still capable of adapting to any size screen—even transforming to a full sized menu on smaller displays. Dreamweaver’s new Bootstrap nav bar fits the bill and is one-click simple to install:1. - Select the #mission container.- From the Bootstrap Components category of the Insert bar, chose Navbar > Inverted Navbar. There are a number of options here: the basic navbar scrolls with the rest of the page; navbar fixed to top and bottom do just that; and inverted navbar uses a black background with white and light gray type.

Integrating Bootstrap components Naturally, web pages do not survive on navigation and basic content alone. With the Bootstrap components supported in Dreamweaver CC, you have a multi-hued palette to draw from.

# tag.-   From the Bootstrap Components category of the Insert panel, choose Responsive Image: Default.](

Next steps Dreamweaver CC 2015 provides point-and-click access to many more Bootstrap components, including accordion panels, tabs, as well as form elements. With them, your responsive pages will be ready for any design challenge, on any size screen.