Adobe Dreamweaver CC 2017
The new Adobe Dreamweaver CC 2017 has been reimagined from the ground up taking clues from Brackets, their modern open source text editor. I've been a Dreamweaver user in the past but moved on when things started to evolve and Dreamweaver couldn't keep up. I must say that I am pleasantly surprised with this new version. There are a lot of good things in there that make me want to give it go. If you are curious like me on how the CSS Preprocessors work in Dreamweaver, here's a page that explains it in detail. One of the best ways to see what is possible with the new Dreamweaver CC 2017 release is by following a tutorial. A step-by-step walkthrough on how to create a responsive design. I've watched all videos and honestly Daniel Walter Scott did a wonderful job. It's worth following along, even if all this sounds new to you.
Responsive web design basics
Explore different design techniques for displaying content across mobile, tablet, and desktop browsers before you dive in to Adobe Dreamweaver to write the actual code.
Create a responsive menu
Style the menu to make it easy for visitors to navigate your site on any type of device — mobile, tablet, or desktop. Here's the link to the files you'll need for this tutorial (ZIP, 49MB).
1. Create a menu structure
See why a mobile-first approach to web design is a good idea. Define a site to manage your files and assets, and then use HTML to create a header section that includes the logo and basic structure of your navigation.
2. Style the menu for mobile
As of now, the main menu is a bulleted list with purple text. Let’s style it with CSS and adjust the layout for mobile screens.
3. Style the menu for tablet and desktop
The menu layout will be different across mobile, tablet, and desktop screens. Find out how to use CSS media queries to change the layout for different devices. As a bonus, see how you can do real-time design while previewing on an actual device.
Create a responsive grid layout
Define a responsive grid layout that allows the contents of your web page to scale across devices. Here's the link to the files you'll need for this tutorial (ZIP, 62MB).
1. Style the header image and text
Dig deeper into HTML and CSS to organize your content into a grid of rows and columns that begins with a striking header image and engaging text.
2. Style text and image content
Every web page needs text and images to convey a message. With the grid structure in place, now add and organize the rest of your web page content — text, images, color, and a footer.
3. Finish the responsive design
The web design looks great on mobile devices, now let’s use CSS media queries to ensure your layout automatically adjusts when viewed on tablet and desktop screens. Once you’re done, that’s it — you have successfully created a responsive web page in Dreamweaver.