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.
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.
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.
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.
That's it! You're done. Please tell us what you think about this tutorial.