Adobe Dreamweaver CC

How to make and style a responsive web page

Learn how to build a responsive web page from scratch. (Try it, 45 min)

What do I need?

Get files Sample files to practice with (ZIP, 12.6 MB)

Get PDF Dreamweaver keyboard shortcuts

Learn how to build a responsive web page

This video tutorial guides you through the process of building a responsive web page from scratch using the features introduced in Dreamweaver CC 2015. The first thing you need to do is download the project assets. Then, together we’ll define a site in Dreamweaver so it can create the correct links to images and other pages. Finally, we'll create a blank page with responsive settings. If you get stuck during this tutorial, ask us for help in our forum. Let’s get started by setting up your project in Dreamweaver.

Add a page title and container

Add the title that will display in the web browser's tab and set your page apart in future search results. We'll finish this section by adding the container that will wrap the contents and make the design fit the width of the page.

Add structure and content

Build the overall structure of the page by adding the HTML components to provide the framework for the page. In this step, we'll add the placeholders for the main menu navigation, a slideshow, the main body of content, a thumbnail image, and a footer. The page is not styled at this point, but it will be easier to change now that we have our foundation.

Add custom content

Change the placeholder content that Dreamweaver adds when you use the predefined components from the Insert panel. In this step, we'll add our own labels to the menu navigation and change the structure to match our final design. Next, we'll replace the caption text for the slideshow and thumbnail sections to match the images we'll add later in the tutorial. Finally, we'll add text to the main heading and paragraph in the body of the page and replace the footer content with some copyright information.

Replace the placeholder images in the slideshow and thumbnail section to make the page start to come together. Add links to the menu to navigate to another page in the site as well as an external website. In this step, we'll explore a few methods you can use to point to images and define links.

Style text content

Apply some style and layout to the text. In this step, we'll use the CSS Designer to add some color and reposition the text in different sections of the page.

Style the menu

Change the menu to give it a more modern look and blend it with the rest of the page design. In this video, we'll override the menu's default styling to change the background color, border, and positioning of the menu within the page to get the look we want.

Add the finishing touches

Finish the page by giving it a more polished look and change the default style of the images so they look great on any device. In this video, we'll apply CSS to the slideshow images to make them stretch the width of the page. Then, we'll modify the thumbnail images to fit the width of their container. Finally, we'll tweak the main page's container for that last bit of style.

Let us know what you think