Most of the features associated with creating HTML5 content in Dreamweaver require that you first define a Dreamweaver site. Dreamweaver sites organize and manage all the files you create as you generate the content in Dreamweaver. Moreover, that kind of careful file management is essential in order to make sure that your HTML5 content works the way it is supposed to. For example, very shortly we will create web pages using HTML5 page layouts in Dreamweaver CS5.5. Those page layouts are dependant on CSS files that control how the HTML5 elements look. By defining a Dreamweaver site, and managing all files through this, you will ensure that the linked CSS file meshes properly with the HTML file that holds the page content.
In addition, let me emphasize this: Always work within a Dreamweaver site. Again, the more complex (and interesting, attractive, and inviting) your HTML5 pages, the more important it is that Dreamweaver is working its magic to orchestrate how all the generated files synch up with each other.
In order to create a Dreamweaver site, carry out the following steps:
Note
Pl anning and Designing a site: With our focus on implementing HTML5 elements in Dreamweaver, a full exploration of approaches to aesthetic, content, and audience issues is beyond the scope of what we can explore. However, as a general point of departure, you will want to sketch out in some form the pages you wish to create, prepare and organize text, images, and media content, and define basic thematic elements such as fonts and a color scheme either before, or during the process of creating your site. A wide range of online resources can provide perspectives and advice on web planning and design.
- Copy and paste all the content you have prepared for your website (text files, images, and media) into a folder on your computer.
- From the Dreamweaver CS5 or CS5.5 main menu, select Site | New Site.
- The Site Definition dialog opens. With Site selected in the category list on the left, type a name for your site in the Site Name field. This name can contain spaces, upper and lowercase characters, and special symbols.
- Click on the Browse for folder icon (the little gray folder) at the right of the Local Site Folder field and browse to, and select the folder in which you copied the content that will be used in your website, as shown in the following screenshot:
- There are advanced options available, but the default settings will work fine. Click on Save to complete the process of defining your site.
Note
Connecting to a remote site: In order to publish your website on the Internet, you have to define a remote site in Dreamweaver. The techniques explored in this book do not—overwhelmingly—require a remote site. If you are creating a remote site as you work through this book, then you will contract with a web hosting service that will provide you with an FTP address, a username, and a password. Enter this information in the Servers tab of the Site Setup dialog to connect your local site to the remote site. In order to upload files from your local site to your remote site, choose Site | Synchronize Sitewide, and choose upload options from the intuitive Synchronize Files dialog. For a more detailed discussion of creating and managing remote sites in Dreamweaver CS5, see Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, by David Karlins.