sidebar1 style in the CSS Styles panel, and in the Properties pane at the bottom, use the dropdown in the float field to change the alignment. If you want the sidebar on the left, you need to edit the style rule that controls the sidebar alignment. In this two-column layout, the sidebar is on the right side of the page. Click the image below to see a larger version. Don’t be alarmed by if the size of the sidebar is too small or you don’t like the garish green color you can easily change all of the elements in these layouts using Dreamweaver’s great CSS editing tools.įigure 5. If you’ve used Dreamweaver’s CSS Layouts before, you know they’re not much to look at on their own (Figure 5). This will help ensure that images and links are set properly as you add your own content and edit the style rules. Save the page as soon as you create it in Dreamweaver. When you have all the settings the way you want them, click Create to generate the new page in Dreamweaver. Make sure it’s selected from the DocType drop-down menu. In the bottom-right corner of the dialog (shown enlarged in Figure 4), the Dreamweaver CS5.5 DocType options include HTML5. When you get all the settings the way you want in the New Page dialog, click Create and the page will open automatically in Dreamweaver.Īnother new option in Dreamweaver CS5.5 is the addition of the HTML5 DocType to the New Page dialog. The others are designed using XHTML 1.0 Transitional. Only the two last Layout options on the list use HTML5. Click the image below to see a larger version.Īlthough Dreamweaver CS5.5 has only two HTML5 layouts, they’re a great place to start because they’re so customizable. In Figure 3, I’ve chosen the Layout with the long name of “HTML5: 2 column, fixed, right sidebar, header and footer”.įigure 3. Note that a preview of the selected Layout is displayed at the far right of the dialog. (Dreamweaver included CSS Layouts in previous versions, but only CS5.5 has the new HTML5 layouts covered in this tutorial.) Under the Page Type column, select HTML, and then from the list of CSS Layouts in the Layout Column, choose the last option, the 2-column, HTML5 Layout. In the far left of the New Document window that appears, choose Blank Page. You can give your site any name you like: The name is only for the purposes of identifying the site in Dreamweaver. You also have to give each site a name as you set it up. The site set up process mostly involves identifying that folder in Dreamweaver so that image references and links are set correctly. That means you need to store all of the files that you’ll use in your site in one folder (called the root folder on a server). To set up a site, all you have to do is identify the main site folder of your Web site. When you start working on any site in Dreamweaver (a new site or an existing site that you’re opening for the first time), you need to begin at Dreamweaver’s menu and choose Site > New Site (Figure 2).įigure 2. The best approach to creating a well-coded HTML5 page is to build it in Dreamweaver and add just the images you need after you’ve optimized them in the image editor.įigure 1.
![adobe dreamweaver cs5 5 adobe dreamweaver cs5 5](https://lh6.ggpht.com/_698w1KGH4-k/S-FWuCVohoI/AAAAAAAAADU/YhC7dSgb6Hs/12.png)
(You can also your the mock-up in Fireworks or some other image editor, of course, but if you do, avoid the automated slice and export features.) Figure 1 shows the design you’ll create in this tutorial as it appears in Photoshop. It’s common to mock up a Web design in Photoshop and then recreate it with HTML in Dreamweaver.
![adobe dreamweaver cs5 5 adobe dreamweaver cs5 5](https://i.ytimg.com/vi/sBhMm6_GpM4/maxresdefault.jpg)
Note that versions of Dreamweaver before CS5.5 don’t include these HTML5 layouts. The visible text in these files explains how the pages are designed, and there are comments with notes throughout the code. If nothing else, experimenting with these predesigned layouts is a great way to learn more about HTML5.
![adobe dreamweaver cs5 5 adobe dreamweaver cs5 5](http://what-when-how.com/wp-content/uploads/2012/07/tmpbc127.png)
If you’ve been using CSS for a while, you may appreciate the head start these layouts offer and how easy it is to customize the CSS designs in Dreamweaver. If you’re completely new to CSS, altering one of these layouts may seem confusing at first, but it’s still easier than starting from scratch.
#ADOBE DREAMWEAVER CS5 5 HOW TO#
This tutorial shows you how to customize those new HTML5 layouts by adding your own images and text, as well as by editing the CSS to change the background color, font face, and other design features. Given the growing popularity-and all the hype-around HTML5, it’s no surprise that many of the new features in Dreamweaver CS5.5 are meant to help you create cutting-edge Web page designs with the latest flavor of HTML.Īmong the new goodies in Dreamweaver CS5.5, you’ll find two new HTML5 Layouts, complete with CSS style rules.