(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. Click the image below to see a larger version. 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. (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. 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. 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.
#Change cursor color in dreamweaver 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.
0 kommentar(er)
