How To Create A Responsive Website In Dreamweaver Cc

Create a responsive website in Dreamweaver CC – Part 1

June 17, 2015 No Comment

Re-create a static home page to make it responsive

This will be one in a series of posts in which I document my progress in updating a client's website to be responsive. The first installment will be a multi-part series in which I describe how I re-designed the home page.

Get Dreamweaver CC 2015

I am using the latest responsive web design features in Dreamweaver (available Jun 16, 2015 – update or start a free trial today!). The responsive features enable you to create a responsive website from scratch, or make an existing website responsive. The new features include:

• Bootstrap components
• New document dialog with Bootstrap configuration settings
• Visual media query breakpoints
• Draggable Live View scrubber to set media queries and preview responsive designs
• Device Preview to preview responsive designs on actual devices

Assess the home page layout

The home page has a unique layout from the rest of the pages in the site, so I decided I would re-create that first. The following image shows a before and after of the home page (or, click the staged before and after version). Eventually, I will likely add some finesse to the typography and color scheme, but I am not a designer, so I will focus on getting the responsive layout and structure in place first.

Figure 1. (Click to enlarge image) Home page – Before and After

The following image shows the before and after version of the site with the browser window resized to show the difference between the original, non-responsive home page and the newly redesigned, responsive home page.

Figure 2. (Click to enlarge) Home page – Before (non-responsive) and After (responsive)

Create from scratch vs. update existing website

Initially, I set out to make the existing website responsive – here's a staged version of the original site. However, I decided to start from the ground up and rebuild it from scratch. The hope is that the resulting web page will have cleaner code than the original site and will be more pure in terms of responsive web design best practices.

Create a new web page based on a grid layout

First, I needed to create an index.html page and add it to my existing site (Be sure to set up a Dreamweaver site – follow this tutorial to see how, and why, to use sites in Dreamweaver).

I selected File > New > New Document > HTML and clicked the Bootstrap tab. Since this is the first page in the new website, I selected to create a new Bootstrap CSS file that was created with the settings from the Customize section.

You can review the default settings for the number of columns for the grid layout and the screen sizes that will define the media queries for the page. Change these settings if necessary, or keep as is. I kept the default settings for now. Then, click Create and save the file (e.g., index.html) to the root directory in the site.

Figure 3. (Click to enlarge) Dreamweaver New Document Bootstrap grid layout settings

Preview responsive layouts in Live View

Dreamweaver creates a sample page that is fully responsive. The visual media queries in Live View are created based on the screen sizes you set in the New Document dialog. You can click on these to view the page at different sizes to represent how the design will likely appear across different devices. Or, drag the Live View scrubber to see the different layouts of the page design. You can even click the + sign to add more breakpoints.

Video 1. Quick demo of responsive features in Live View (no sound)

Include a pre-built layout

You can click the Include a pre-built layout checkbox in the New Document dialog to create a page with some content and examples that describe the new responsive features. This is helpful information when you are learning about the new features, so feel free to check it out.

I didn't need any of this content, so I used Split View to see the content and HTML in Live View and Code View simultaneously. I then used the code collapse feature to minimize the HTML elements I will not need. Hover your mouse over the line number on the left side in Code View to make the arrow appear and click to expand or collapse sections of HTML.

I deleted everything inside of the <body></body> tags except for the 2 <script> tags at the bottom required for the responsive functionality to work.

Figure 4. (Click to enlarge) Mouse over line numbers to display collapse options

Figure 5. (Click to enlarge) Collapse sections – HTML elements – to delete (e.g., <nav> and 2 <divs> inside the <body>)

Figure 6. (Click to enlarge) Now the page is blank so you can add your own content

Add a container element to hold the page content

Before I really got started designing the page, I made sure to add a container element to hold the page's contents. The Insert panel includes the container and container-fluid components in the new Bootstrap Components category. I chose the container element because it holds the contents to a fixed width, allowing me to center the content in the page.

Figure 7. (Click to enlarge) The container element wraps the page contents in a fixed width

While in Split View, I made sure the cursor appeared just after the opening <body> tag. Then, I selected Insert > Bootstrap Components > Container to add the container element to the page. Dreamweaver adds the container element, a <div> with a class of .container. Nothing is will be visible in Live View, or in a browser, until I start adding content to the container.

Figure 8. (Click to enlarge) The container <div> is added with a class of .container

The .container class is defined in the bootstrap.css file. If you're curious about the the properties in the .container class, right click on .container in Live View and select Go to Code.

Figure 9. (Click to enlarge) Go to Code from Live View to see CSS details

Add a navigation (menu) bar

The next component I wanted to add to the page was a navbar to provide the main menu navigation for the page. The Bootstrap Components category of the Insert panel includes several navbar options. I ultimately chose the Inverted Navbar, but you may want to experiment with the different options to see which one best fits your needs.

Figure 10. (Click to enlarge) Click the down arrow next to the Navbar component to see the options

I placed the cursor between the <div class="container></div> tags, then selected Inverted Navbar. Dreamweaver adds the necessary code including default menu options and a search field. If you expand Live View, by clicking the Live button, you can click the visual media queries, or use the draggable Live View scrubber to test the responsive capability that is automatically included when you add the navbar bootstrap component.

Video 2. Quick demo of responsive navbar in Live View (no sound)

I customized the navbar as needed for this site. I removed the search bar and added the company logo. I also customized the menu items to match the structure (including adding submenu items to Services and Galleries).

Figure 11. (Click to enlarge) Navbar with custom menu items and structure

Add an image slider in Dreamweaver

The original site has a slideshow that was created in Flash and output as a .swf file. This won't work on iOS devices since it requires the Flash plugin – I should have changed this a long time ago, but no time like the present!

First, I added the 5 images I wanted use in the slideshow to my Dreamweaver site. I created an images folder with a subfolder called banner to keep these separate from the rest of the images (not necessary, just easier for me to stay organized).

Figure 12. (Click to enlarge) Add images to Dreamweaver site

Add the Bootstrap Carousel component

The Carousel Bootstrap component makes it easy to add a slideshow to your page that will display across devices, browsers, and operating systems. I added the Carousel component just after the closing </nav> tag. First, I collapsed the <nav> section to make it easier to place the new component by hovering over the line number in the code, then clicking the down arrow.

Figure 13. (Click to enlarge) Hover line numbers in code view to collapse or expand code

The Carousel component adds code to hold 3 images. Replace the reference in the <img src=" " >. In this case, I replaced the Slide1_Placeholder.png, Slider2_Placeholder.png, and Slider3_Placeholder.png references to point to the first 3 images I want to use in the slideshow.

I needed to add 2 more images since I am using a total of 5 images in the slider. So, I copied the last 2 divs in the Carousel component:

Figure 14. (Click to enlarge) Copy 2 divs containing carousel image references

and pasted them just after the closing </div> containing the 3rd image reference:

Figure 15. (Click to enlarge) Paste selected <divs> just after the 3rd image </div>

Then, changed the name of the image files to reference the last 2 images:

Figure 16. (Click to enlarge) Change image src to reference the last 2 images

Again, the Carousel component created a placeholder for just3 images, and I added 2 more. In order for the slideshow to work properly with the additional images, I needed to update the ordered list (<ol>) at the beginning of the <div> element defining the carousel. The ordered list contains 3 list items, by default, that each reference an instance, or image, in the slideshow. The data-slide-to attribute references the sequence of images (data-slide-to="0″ references the first image; data-slide-to="1″ references the second; data-slide-to="2″ references the third).

Once again, I used the valuable web development tool of copy and paste to copy the last 2 list items (<li>) and change the reference (final list now includes data-slide-to="3″ for the fourth image and data-slide-to="4″ for the fifth).

Figure 17. (Click to enlarge) Add list items to target additional images in the slideshow

Finally, I did not want the captions in the slideshow, so I removed the div – <div class="carousel-caption"> – for each image.

Figure 18. (Click to enlarge) Highlight the div containing the caption, then delete

Here's what the page looks like with the navbar and slideshow.

Video 3. Quick demo of responsive image slideshow in Live View (no sound)

Add thumbnail images

The next section I want to re-create is this set of images that represent the 3 lines of business this builder does – New Home, Renovation, and Commercial Construction.

Figure 19. (Click to enlarge) Thumbnails from the original website

After reviewing the list of Bootstrap components, the Thumbnail component looked like a good fit.

Again, I collapsed the sections of code I would not need for this step in order to make it easier. Then, I added the Thumbnail component just after the closing </div> for the carousel component.

Figure 20. (Click to enlarge) Thumbnail component

The thumbnail component creates a div with a row. That row contains 3 divs that represent 3 columns in the row. Each column contains a placeholder image, a level 3 heading (h3), placeholder text for a description, and 2 buttons. I have 3 images to replace the placeholder thumbnail image.

Figure 21. (Click to enlarge) Replace placeholder image references

Now, the correct images are referenced in the thumbnail columns, so I expand Live View to test how it will look when viewed at different sizes.

Video 4. Quick demo of default responsive thumbnail component in Live View (no sound)

I'm not crazy about the way the images bunch up together, so I will work on changing the default column settings so that they stack up on each other when the display area (viewport size) gets smaller (such as when viewed on a tablet or cell phone).

Change default thumbnail layout for optimal display on different devices

When I initially created the page using the New Document dialog, I opted to create the page based on a 12-column grid layout. Designing with Grid-based Approach is a great resource for using grid layouts in web design. In this post, I just cover the concepts of grid layout at a very high level and how it translates to usage inside of Dreamweaver.

Figure 22. (Click to enlarge) New document dialog declaring a 12-column grid layout

The Thumbnail component defaults to adding the following classes (as defined in bootstrap.css) to the thumbnail div to determine the space they are allotted in the 12-column grid layout for this page. Here's a direct quote from the Bootstrap documentation:

"Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4."

• .col-xs-4: spans 3 columns when the layout is extra small (e.g. iPhone5)
• .col-sm-4: spans 3 columns when the layout is small (e.g., iPhone6+)
• .col-md-4: spans 3 columns when the layout is medium (e.g., iPad)
• .col-lg-4: spans 3 columns when the layout is large (e.g., desktop)

Since I did not want the thumbnails to take up 3 columns within the row when displayed at the smaller device sizes, I removed the .col-xs-4, .col-sm-4, and .col-md-4 classes.

Video 5. Quick demo of customizing responsive thumbnail layout settings in Live View (no sound)

Add spacing between sections

The layout is getting closer to what I want in terms of the responsive layout at different screen sizes. However, the slideshow show and the thumbnail sections are bunched together, so I'd like to add a bit of spacing between them.

The way I started to handle this was to wrap the row of thumbnails inside a panel div. This will allow me to add spacing via CSS to separate the panel div from the thumbnail div. It will also allow me to add a panel heading for the thumbnail section.

I first collapsed the div that contained the row of thumbnails:

Figure 23. (Click to enlarge) Collapse div with row of thumbnails to make code easier to edit

Then, I added a panel component just before the row:

Figure 24. (Click to enlarge) Insert panel just before the row of thumbnails

The row needs to be wrapped in the panel div, so I moved the closing </div> after the row (just used good old copy/paste to do this):

Figure 25. (Click to enlarge) Move closing </div> to wrap the row in the panel

I manually added a div for the panel header since I don't see a way to do this just yet from the list of components (but there is a panel-header class in the bootstrap.css):

Figure 26. (Click to enlarge) Add a panel header to create a heading for the section

Sometimes I like to do a quick test in an actual desktop browser to preview functionality. I use a Mac and have the Preview in Browser option setup to work with Chrome, Firefox, and Safari. When I test the design at this point, I can see that the spacing is definitely improved.

Video 6. Quick demo of previewing spacing adjustments (no sound)

Add a bit of color

The layout and responsiveness is looking much better, but I want to add a bit of color to make the page and the different sections stand out a bit more.

First, I'll add a light yellow background to the thumbnail section. I don't want to include the panel heading, so I'll wrap the thumbnail contents in another div.

Figure 27. (Click to enlarge) Wrap the row in a div

The new div really needs a CSS class assigned to it that defines the background color, border settings, and padding to create space between the outside border of the div and the content it contains.

The Dreamweaver team recommends keeping the bootstrap.css file intact and adding any custom settings in a separate CSS file. So, I'll go to the CSS Designer panel to create a new CSS file – click the + sign in the Sources panel and select Create A New CSS file.

Figure 28. (Click to enlarge) Create a new CSS file for any custom style and layout settings

Name the CSS file – I browsed to the css subfolder in my site and named the file main.css – and click OK. Dreamweaver added the new CSS file to the css subfolder.

Figure 29. (Click to enlarge) The main.css file is now available from the Files and CSS Designer panel

I added a class called .mid_ctr with these properties:

.mid_ctr {     background-color: #fff7d4;     border: medium;     border-color: #d8ca2b;     padding: 20px;  }

Note: You can define CSS selectors and their properties directly in Code View (check out some of the new code editing features available in the latest release). Or, if you prefer a more visual approach, you can use the CSS Designer.

Now, I need to associate the new class selector with the appropriate element in the HTML so that section will display with the color and spacing properties specified. I added the class="mid_ctr" attribute to the div that contains the row of thumbnails.

Figure 30. (Click to enlarge) Add class attribute to HTML element

Figure 31. (Click to enlarge) New color settings applied to thumbnail section

Apply background color to page

The page is looking a more polished, but the white background is a bit jarring. So, I will add the same background color to the body element that I used in the original site. Since the color will apply to the entire body of the page, I'll create a body element selector in the main.css file.

body {     background-color: #cbcda9;  }

Here's what the main.css file looks like at this point. This shows that I haven't had to add much custom styling for what already exists in the standard Bootstrap Components available to me now (also note that you can click on a color code in CSS and see a preview).

Figure 32. (Click to enlarge) Custom layout and style in main.css

Click here to see the live site so far. Right now, the navbar, slideshow (Carousel), and thumbnail section have been defined:

Figure 33. (Click to enlarge) Home page with newly styled menu, slideshow, and thumbnails

What's next

In part 2 of this sub-series, I will use more of the responsive web design features available to me to build out the rest of the page, including:

• Additional Bootstrap Components including Media Object, Tab, and List Group
• Addition Live View features for adding columns and rows to your layout

Throughout this series, I hope to provide comprehensive coverage of the responsive web design features available in Dreamweaver CC 2015. Feel free to share your thoughts on what is helpful or unclear.

How To Create A Responsive Website In Dreamweaver Cc

Source: http://mailevalentine.com/create-a-responsive-website-in-dreamweaver-cc/

Posted by: bestliffeent75.blogspot.com

Share this post