Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

By David Karlins
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Creating HTML5 Pages in Dreamweaver

About this book

Dreamweaver is the most powerful and industry-leading web design software that utilizes cutting edge web technologies such as HTML5, CSS3, and jQuery for web and mobile development. These technologies have radically reconfigured the process of designing Web content and function in the widest possible range of browsing environments ranging from desktops to mobile devices.

For experienced Dreamweaver designers and for designers new to Dreamweaver, this book explains in detail how to take advantage of the new features available in the latest releases of Dreamweaver that add support for HTML5, CSS3, and jQuery. In addition to this, the book also contains detailed step-by-step directions for building mobile apps in Dreamweaver CS5.5.

This book starts off by teaching you to create web pages in Dreamweaver using the latest technology and approaches — HTML5, CSS3, and JavaScript. It demonstrates how to create or customize pages with HTML5 layouts and add multimedia to these pages with HTML5 elements. Then you will learn to add various CSS3 effects to web pages. The book also covers different techniques of adding interactivity to web pages. The later chapters show how to optimize web pages with Dreamweaver for display in various browsing environments. You will also learn to build jQuery-based mobile apps from scratch in the later chapters. By the time you're finished, you'll have learned several techniques to use the latest features of Dreamweaver for web and mobile development.

Publication date:
September 2011


Chapter 1. Creating HTML5 Pages in Dreamweaver

This chapter begins our exploration of creating HTML5 web pages with Dreamweaver CS5. The focus here, and throughout this book is on unleashing the exciting, powerful HTML features for page layout, animation, media, and design using HTML5. At the same time, we will of necessity, take a concentrated looks at basic techniques involved in setting up Dreamweaver websites and basic editing and formatting tools in Dreamweaver.

After briefly introducing HTML5, CSS3, and Dreamweaver CS5, and the way they work together to create websites, the focus of this chapter will be generating page layouts in Dreamweaver that avail themselves of HTML5 layout tools. By the end of this chapter, you will be able to create basic, attractive web pages that use the improved HTML5 page layout elements. In addition, you will be in a position to customize those pages with your own content, and formatting, in the next chapter.

In this chapter, we will:

  • Survey the evolution of HTML5 and understand how it simplifies the web page design

  • Explore key HTML5 elements used in web page layouts

  • Understand how Dreamweaver CS5 generates HTML5 web page layouts

  • Install the HTML5 Pack as an Extension (for Dreamweaver CS5 and older versions as well)

  • Create Dreamweaver CS5/HTML5 sites and files

  • Generate new pages from layouts using the HTML5 templates

  • Control views

  • Generate HTML5 page layouts in Dreamweaver

  • Create a 3-column HTML5 page layout in Dreamweaver


HTML5 and Dreamweaver CS5 in the world of web design

We will be working with a few key acronyms in this book and they stand for things, which are essential to creating innovative websites. So, let's start with introductions:

  • HTML5 is the latest and most powerful version of the HTML (HyperText Markup Language ). It is the newest and the most powerful language for creating the basic elements of a web page.

  • CSS3 is the latest and the most powerful version of CSS (Cascading Style Sheets—or Style Sheets for short). CSS handles how web pages and elements on them look.

  • Dreamweaver CS5 is the most widely used, powerful, and flexible tool for creating the web page content, including HTML5 and CSS3. Thus, the basic flow of this book will be exploring the key powerful features of HTML5 and CSS3 and generating those features using Dreamweaver CS5.


Limited CS4 and CS3 functionality: Some, but not all of the features explored in this book are available in older versions of Dreamweaver with the HTML5 Pack installed. In general, you can follow the same steps indicated here for Dreamweaver CS3 and CS4 and take advantage of those elements of the HTML5 Pack supported by older versions of Dreamweaver.

HTML5—the cutting edge of web design

I like to describe HTML5 concisely as solving the 3s: simplifying, standardizing, and styling. Those terms don't embrace everything new in HTML5, but they highlight key new features and help break down what HTML5 is all about into digestible chunks.

HTML5 simplifies the web design by taking frequently used features, such as the page layout elements we will explore in this chapter, and defining elements (previously known as tags) for them. Therefore, for example, instead of every page designer needing to invent a special batch of code to define a page header—a common element in many web pages—HTML5 has added a standard, pre-set <header> element.

HTML5 is an attempt to standardize how browsers interpret the page layout code. Now, an obvious question is, who sets the standards and how standard are they? The answer in this case is complex, contradictory, and a work in progress. However, suffice to say that an alignment of the most powerful players on the Web, in particular the makers of all the major browsers (Safari, Firefox, Chrome, Opera, and Internet Explorer starting with version 9) have all embraced HTML5, to the point that a critical mass is either now in place, or emerging quickly. That said, it would be a long time before everyone browsing the Web is doing so in an HTML5-compliant browser. Therefore, in the course of this book, we will explore approaches for providing alternative content for visitors using non-HTML5 browsers.

HTML5 also expands what can be done in web design style, without resorting to plugins (such as JavaScript or Flash). Many of these additional features are accessed through CSS3—the latest version of Style Sheet formatting that is an enabling, co-dependent partner (in a good way!) with HTML5.


HTML5 was preceded by XHTML, and before that, HTML 4 (in various versions). In some ways, HTML5 is not a continuation on that evolutionary line, but a new synthesis that stands on both HTML and XHTML.

There is no great need here to clutter our heads with the ways in which HTML5 addresses non-standardization in different previous versions of HTML and browsing environments, but such housekeeping and standardization is a significant contribution of HTML5.

The new features in HTML5 (and the related features in CSS3) are of more interest for designers.

HTML5's <video> and <audio> elements provide a much simplified approach to presenting the online video and audio, without resorting to different and competing media players (such as Windows Media Player, QuickTime player, or Flash Player). The new canvas elements open the door to an exciting array of possibilities for presenting images, interactivity, and media.

Moreover, as we will focus on in this chapter, HTML5 introduces a set of elements that standardize and simplify the page layout.

Compatibility issues with HTML5

As HTML5 is new, and emerging, designers obviously want to know whether elements they create using it (such as video, or page design elements) are supported in different browsers.

The answer is more complicated than you might think. Different HTML5 elements are supported in different browsing environments and in different ways. For example, many (but not all) browsers support HTML5's new VIDEO element, but within that grouping of browsers, there is support for different video formats.

In other cases, older browsers support the HTML5 elements, but some of the features don't work. In general, these elements still work in older browsers and visitors simply forego nice but non-essential features. For example, an HTML5 e-mail will be easier to fill out in an HTML5-complaint browser, but will still work as a plain text field in older browsers.

This might sound like a messy situation. In some ways it is. However, as I say in almost every session of my live web design classes, "welcome to the experience." Compatibility issues with HTML5 are, however, an eminently manageable challenge that we will address from different angles and with different problems in mind throughout this book.

Each time we introduce HTML5 elements, we will also look at how to provide alternatives for visitors viewing the page in a browser that does not support HTML5.

Sometimes, the HTML5 features not supported in non-complaint browsers limit available features, but do not cause harm. For example, the following screenshot illustrates the PLACEHOLDER attribute in HTML5 that displays a "hint" text in a form field that vanishes when a visitor begins typing in that field.

HTML5 allows a placeholder text, in this case, Enter search text here:

In the case of HTML5's placeholder attribute, when this is not supported in a browser, the form field simply appears without the placeholder text, as shown in the following screenshot.

Viewed in a non-complaint browser, the HTML placeholder text simply disappears, but the form still works:

In some situations, we will address compatibility issues exploring, on the spot, and creating an alternative content for older browsers. We will also explore more radical approaches to provide alternative formatting for different browsers using techniques such as Media Queries (see Chapter 5, Defining and Implementing Multiscreen Previews and Media Queries) to provide alternate page layouts for different browsers.

However, the bottom line is, in one way or another, we will take into account and build into the process by providing alternative content for non-HTML5 environments.


HTML5 and Dreamweaver CS5.5

Having briefly surveyed HTML5, we will now step back and see how Dreamweaver fits into the whole picture of creating websites using HTML5.

Dreamweaver is the premiere tool for generating web content and design. We will parse that a bit: First, Dreamweaver produces a range of web content. Dreamweaver generates HTML (including, as we shall explore in a moment) HTML5. HTML is the foundation of web pages, but Dreamweaver also generates two other critical elements of Web design: CSS (Style Sheets) and JavaScript.

Dreamweaver's capacity to generate interactive (objects that interact with visitor actions) is somewhat limited. We will see these features at times in this book, but in the main, we will focus on Dreamweaver's very powerful tools for managing CSS, the styles that control how content appears in web pages.

Dreamweaver generates code

Let's define what we meant when we say Dreamweaver generates HTML, CSS, and (in a more limited way) JavaScript. Dreamweaver generates this content in three basic ways that work together.

The first way Dreamweaver generates code is when you edit and format content in the Design view of the Document window. Second, Dreamweaver generates CSS and JavaScript using panels such as the CSS Styles panel and the Behaviors panel (respectively). Finally, you can write HTML and CSS in the code view and Dreamweaver will assist with code hints.

Dreamweaver's Document window has three views, which we will explore shortly. However, the most intuitive is the Design view—an environment that approximates those in other Adobe Creative Suite applications such as InDesign, Photoshop, and Illustrator. The Design view is used to format text, images, design containers, media, and other elements. As you use intuitive editing and formatting tools, including the utilitarian and context-sensitive Properties Manager panel, Dreamweaver generates HTML, CSS, and JavaScript to match the content and formatting attributes you create in the Design view. In the following screenshot, for example, the selected image is having attributes such as an associated link edited in Dreamweaver CS5.5's Properties inspector and the code (on the left) is updated automatically.

Defining a link in Dreamweaver's Design view, while the code updates in the Code view (on the left):

The second way Dreamweaver generates code is through panels. There are several panels which generate different kinds of code. In this book, we will focus on the CSS Styles panel which generates the critical CSS that controls the page formatting.

Finally, the Dreamweaver's Code View provides code hinting and completion tools that make writing of the code easier. As much as possible, we will rely on the Design view and Panels to generate all the code we need to maximize the HTML5 page design in Dreamweaver. We will resort to the Code view when necessary and take full advantage of the Dreamweaver's code hinting features.

Dreamweaver—catching up to HTML5

We will begin with a candid assessment: Dreamweaver CS5.5 (and even more so CS4 and CS3) is racing to catch up with HTML5. Why? The answer is a complex mix of technical factors (HTML5 is, after all, still something of a work-in-progress and has not been adopted by all browsers), as well as business and what might be called economic and political factors, including the competition between Adobe and Apple.

This later element involves contending visions for how to implement media on the Web in particular. Just as Creative Suite 5 was being released, Apple consolidated its position that Adobe's Flash Video (FLV) and Flash animation/interactivity (SWF) formats would not be supported on iPhones, iPads, and other Apple mobile devices. Instead, Apple has backed HTML5's audio and video tools. Without going into this in any more detail, or "choosing sides," this level of background helps contextualize the release of Dreamweaver CS5.5 without support for HTML5.

That said, Adobe responded quickly with the release of the HTML5 Pack to add HTML5 tools to Dreamweaver CS5. The HTML5 Pack represented a significant upgrade to Dreamweaver. The HTML5 Pack is actually available in a limited edition for Dreamweaver CS4 and in an even more limited edition for CS3. However, in order to implement the HTML5 functionality completely, designers will find the most powerful set of tools in the combination of Dreamweaver CS5.5 and HTML5. In this chapter, you will learn to test for and—as necessary—install the HTML5 Pack.

In this context, our exploration of the HTML5 design in Dreamweaver will require a bit more time spent in the Code view than might be usual for a basic-to-intermediate book like this. However, we will work hard to make those forays in the Code view as effortless as possible. Moreover, I promise to leave "no stone unturned" to utilize the friendly Design view and more accessible Dreamweaver panels whenever possible.


An introduction to HTML5 layout elements

It is often helpful, in understanding something new, to have a sense of where it came from. The evolution of different versions of HTML and accompanying versions of CSS (style sheets) has been marked in a fundamental sense by the need to create more attractive, complex, and creative page designs.

Web page design has evolved radically, but HTML in one version or another remains the foundation for web page design. HTML pages are the basic containers in which text, images, media, and animation are packaged. Moreover, HTML5 is the up-and-coming version of HTML that, as it gradually is adopted and unified across browsing environments, opens up vast opportunities for more easily creating web pages that are more inviting.

In the course of this book, we will explore how to use Dreamweaver to create page layouts, interactive elements, embedded media, and creative design with HTML5. However, we will start with one of the most basic, and substantial, new improvements in HTML5: the creation of a set of elements dedicated to the page layout. These elements ("tags" in earlier incarnations of HTML) are used to define regions of a page common to many, if not most, web page layouts.

HTML5 elements (like all HTML elements) are enclosed in "<>" characters in the HTML code. Therefore, for example, in coding books, the footer element is often written as <footer>. Even though Dreamweaver generates HTML and HTML5 code, we will use "<>" when referring to elements to make it easier to identify and work with them, once generated, in Dreamweaver.

The evolution of HTML layout elements

The earliest versions of HTML did not provide for any real page design tools. Web pages were envisioned as pages to hold very basic content, with some images and text formatting, but without any real page layout.

Phase 1: Tables

Inventive designers forged a way to use tables—a feature originally created to present data in columns and rows—as a page design tool. Table columns were used to layout vertical blocks of content, whereas table rows were used to layout horizontal bands of content.

Tables are still available as a tool for page design and a large percentage of older websites that were built using tables still rely on tables for page design. Moreover, Dreamweaver, including Dreamweaver CS5.5, still provides tools for designing pages with tables. The following screenshot shows a web page design in Dreamweaver. The properties inspector (shown in the following figure) identifies the selected table as having three columns (merged in the top and bottom rows) and three rows.

Phase 2: CSS DIV tags

Tables had (and have) two great limitations as page layout tools.

The first was that they were (and are) a clunky way to design pages. Creative and unique page layouts with tables required contorting what was essentially a checkerboard of squares into desired headers, footers, sidebars, navigation spaces, and so on. Placement of images and text was awkward, requiring unstandardized combinations of table, row, column, and cell attributes, mixed and matched with attributes like those that margins assigned to text and images.

The second problem was that it was nearly impossible to orchestrate the global page designs across a website. The page design was embedded in individual pages—and thus if a designer wanted to tweak the layout of dozens of pages across a website, this generally required changing each page layout, one by one.

There is a third; it is a less recognized problem with using tables as page layout tools: They are not compatible with special reader software that allows vision-impaired people to experience web pages.

The solution that emerged to these challenges was just as creative and out-of-the-box as the original invention of using tables for page layout. Designers began relying on external (separate) CSS files to control both the attributes of text and images, but also to define blocks that could be used for the page design. Designers took and expanded the vaguely defined HTML DIV tag, and used it as a page layout tool. By attaching rules (attributes) defined in the CSS file to uniquely named DIV tags, designers concocted a work-around to the lack of real page layout elements in HTML. This situation existed through all the versions of HTML and XHTML (an updated, enhanced version of HTML that preceded HTML5).

Working with these blocks was (and is) awkward. There is no uniform or standardized set of DIV tags for page design, each designer creates and defines his or her own. This means that designers working in collaborative environments, or with content created by other designers, have to create their own sets of defined DIV tags for page layout. Editing other designers' work often requires far too much unproductive time and energy decoding the unique set of DIV tags used for page layout in an inherited design.

Therefore, DIV tags provided more flexibility than tables and allowed global editing (by changing the CSS file, all DIV tags across a site are updated). However, DIV tags are not standardized and are a clumsy and unnecessarily anarchistic approach to defining page layout elements.

The following screenshot shows a page designed with DIV tags in Dreamweaver. The Properties inspector reveals a non-standard DIV tag defining the selected container on the left side of the page (sidebar1, displayed in the Class pop up):

Phase 3: HTML5 layout elements

From this set of demands and constraints, HTML5 evolved a standardized set of page layout elements. Sections of a web page such as Header, Footer, <nav> (for navigational elements), or <aside> (sidebars) come pre-named.

Like DIV tags before them, HTML5 layout elements can be updated across a website quickly and easily.

In addition, like DIV tags before them, HTML5 elements rely on CSS styles to define their location, size, and other appearance attributes (such as the background color or padding). Therefore, in the course of this, and following chapters, we'll be using Dreamweaver to orchestrate a dynamic relationship between HTML5 layout elements and CSS styles.

Meet the HTML5 layout elements

As alluded to in our journey thus far, HTML5 comes with pre-set elements for commonly used components of a web page design. Once we have briefly surveyed the main HTML5 layout elements, we will explore how they are generated and modified in Dreamweaver with the HTML5 Pack.

Some of these elements are more adapted to laying out particular kinds of web pages. For example, the <article> and <section> elements are particularly useful for online periodicals or other publications that have articles, with (sub)sections within them. The <aside> element defines boxes for sidebars associated with articles.

The intuitively named <header> element, as you would expect, holds the content at the top of web pages. The <footer> element holds the content at the bottom of a page.

The <nav> element is used to layout the navigational content—links to other pages or locations on the Internet.

The following diagram illustrates a typical page layout using the <header>, <nav>, <article> and <section>, <aside>, and <footer> HTML5 elements:


Dreamweaver's HTML5 Pack and design elements

Now that we have introduced the key design elements of HTML5, we are almost ready to generate pages that use those elements in Dreamweaver. Before we do, however, it will be helpful to preview briefly, conceptually, how Dreamweaver generates HTML5 layouts.

The first thing to emphasize is that HTML5 elements such as <header>, <footer>, <article>, <section>, <aside>, and <nav>, do not really do much if anything "on their own." Like their DIV tag evolutionary precursors, they are more or less empty vessels. HTML5 elements take shape, literally, when connected with CSS styles.

For example, a web page might have a <header> defined as stretching the entire width of the page, at the top of the page, with a set background color, and spacing that keeps it from bumping into other page elements. All of these attributes (size, location, background color, and spacing) are defined in a CSS style sheet that includes a specific CSS style associated with the <header> element. Moreover, this symbiotic relationship between HTML5 layout elements and CSS styles is required for each HTML5 layout element.

Therefore, when Dreamweaver generates page layouts using HTML5 elements, it also generates a CSS file that has already built-in style rules for all the HTML5 elements used in the page.

Of course, you can change how HTML5 elements appear. You can edit the generic content that Dreamweaver provides with the HTML5 layouts. Alternatively, you can change the appearance of the HTML5 elements by editing the CSS styles. We will do both of these things in the next chapter of this book. Here and now, we will focus on setting up Dreamweaver so that it can generate HTML5 pages and then we will actually create those pages.

With the basic understanding of HTML5 layout elements and the way they interact with CSS under our belts, the time has come to launch into Dreamweaver and begin to create HTML5 layouts.


Detecting or installing the HTML5 Pack in Dreamweaver

If you are working with Dreamweaver CS5.5, then you have the HTML5 editing features automatically installed. Therefore, you can skip this section of this chapter.

If you are working with an earlier version of Dreamweaver, then you may need to install the HTML5 Pack separately.

Depending on how recently you have installed Adobe-supplied updates to your version of Dreamweaver, you may have to install the HTML5 Pack to access Dreamweaver's new HTML5 tools. A quick test will determine whether the HTML5 Pack is installed in Dreamweaver CS5 (the following test won't work for earlier versions of Dreamweaver, as the HTML5 Pack features for those versions are much more limited).

Here it is. Launch Dreamweaver, and choose File | New from the main Dreamweaver menu (you can do this whether or not the Welcome Screen is visible). The New Document dialog appears.

In the New Document dialog that appears, choose the Blank Page category in the far left column. In the Page Type category, choose HTML. At the bottom of the Layout column, you should see two layouts that begin with HTML5, as shown in the following screenshot. You can see previews of these layouts if you click (once) on them in the New Document dialog:

If your New Document dialog does display the two HTML5 layouts, hit the pause button (figuratively speaking) while we catch up readers who do not have the HTML5 Pack installed.

If you do not have the HTML5 layouts available in the Ne w Document dialog, then your installation of Dreamweaver CS5 has not been updated for HTML5 and you will have to install the HTML5 Pack. In order to do that, use your web browser to go to http://labs.adobe.com/technologies/html5pack/ and follow the instructions to update your installation of Dreamweaver CS5 to add the HTML5 Pack.


Older versions of Dreamweaver: In order to add the HTML5 Pack to older versions of Dreamweaver, follow links to the Dreamweaver Exchange at the preceding URL.

With your installation of Dreamweaver CS5 updated (or if you have upgraded to CS5.5), or with the HTML5 Pack added as an extension to an older version of Dreamweaver, you are ready to roll. You now have Dreamweaver enabled to access HTML5 tools.


Creating a Dreamweaver site

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:


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.

  1. Copy and paste all the content you have prepared for your website (text files, images, and media) into a folder on your computer.

  2. From the Dreamweaver CS5 or CS5.5 main menu, select Site | New Site.

  3. 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.

  4. 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:

  5. There are advanced options available, but the default settings will work fine. Click on Save to complete the process of defining your site.


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.


Generating new pages from layouts using the HTML5 templates

Now that you have defined a Dreamweaver site, you are ready to generate new page layouts using HTML5 elements. In subsequent chapters, you will learn to customize the content, size, shape, colors, fonts, and other elements of these HTML5 elements. However, the first and foundational step is to generate pages.

In order to do that, choose File | New, and select Blank Page from the categories in the New Document dialog. Click once on the HTML5: 2 column fixed, right sidebar, header and footer layout to see a thumbnail preview of that layout in the New Document dialog and read a description of it, as shown in the following screenshot:

Similarly, you can click once on the HTML5: 3 column fixed, header and footer layout to see a preview thumbnail of that layout, and read a description of it.

The DocType pop up in the New Document dialog allows you to choose a file format other than (older than) HTML5 to save your file to. However, choosing any option other than HTML5 effectively negates the HTML5 elements essential to the layout (this option is more useful for page layouts using pre-HTML5 elements).

The Layout CSS pop up presents an important set of three options. The default, Create New File, sets up a new CSS file that will hold all the formatting information for this page. The Add to Head option is not considered best practice because it embeds styles within the HTML page. CSS files are much more powerful when they are saved externally—as distinct files—that can be applied to unlimited web pages, not just one. The final option, Link to Existing File, is used when you already have a CSS file ready to use with your generated page layout. If you are starting out on the process of exploring HTML5, then you won't yet have such a page. Later in this book, we will examine situations where it is useful to link a generated HTML5 layout to an existing CSS file.

After you have selected one of the two HTML5 layouts, click on the Create button in the New Document dialog. If you elected to generate a new style sheet, then the Save Style Sheet File As dialog appears, with a suggested file name as shown in the following screenshot. By default, if you first created a Dreamweaver site (and you should have!), the CSS file will be saved to your site folder. It works just fine to accept the default filename and folder and click on Save in the Save Style Sheet File As dialog:


Why we are saving a style sheet: The HTML5 layout generated by Dreamweaver includes HTML5 elements (tags) that, very roughly, demarcate sections of the page. The formatting of those HTML5 elements is controlled by CSS styles, saved in an external (separate and distinct) Style Sheet file.


Examining the generated HTML5 layout

Carefully examining a generated HTML5 introduces HTML5 elements and enables editing the content of the layout.

Dreamweaver CS5 and CS5.5 provide a wide array of views and combinations of views with which we can examine the generated HTML5 layout. Here, we will survey the most important and useful of those views and the way they work in various combinations to make it easier to edit the content.

You can view the page content in ways that provide access to the code that display how the page will look in a browser, or both. You can edit the page content or lock out the editing features to see how elements, such as links, will appear in a browser. In addition, you can explore related files that affect the way an open web page appears.

Toggling between related files

The first component of the page display to be aware of is the related files tab. This set of tabs provides access to all files related to the main HTML page. When you generate either of the two available HTML5 layouts, a separate, distinct, but related (linked) CSS file generates. Both the HTML file and the CSS file are displayed in the related files tab, as shown in the following screenshot. You can toggle between them by clicking on either tag.

Toggling between an HTML page (the Source Code tab) and a related CSS file (indicated by the .css filename extension):

As you create more complex HTML5 layouts, being aware of what related files affect the appearance of that page opens the door to powerful design techniques. For now, simply note that the appearance of your generated HTML5 layout is defined by both the basic HTML web page and the related (linked) CSS file.

Code, Split, and Design views

Your HTML5 page can be viewed in the Code, Split, or Design view. You can toggle between these views from the View menu, or by using buttons in the Document toolbar (if the buttons are not visible, choose View | Toolbars | Document to display it).

Code view reveals the HTML code that defines the basic page content. The Design view shows, roughly, how the page will look in a browser. The Split view splits the screen between the Code view (by default on the left) and the Design view (on the right).


Only the Code view for CSS pages: CSS pages that are related to HTML pages are only displayed in the Code view. This is because CSS pages are just code—they define how the HTML page displays, but these files themselves are not normally viewed in a web browser and if they are, they simply appear as lines of code.

The Design view functions in two modes—with the Live View on or off. With the Live View on, you cannot edit most of the page content, but you can preview how interactive elements, such as links, will appear in a browser. The following screenshot shows a link being tested in a Split mode, with the Live View on.

Testing how a link will appear in Split view, with Live View enabled. Note that the mouse cursor is interacting with a link as it would in a browser:

Dissecting design elements with the Inspect Mode

The Inspect button in the Document toolbar turns on a feature that makes it easier to identify HTML5 (and other) elements that control how a page looks.

When you hover over any element on a page in the Inspect mode, elements such as padding (space within an HTML or HTML5 element) appear in purple and spacing created by margins (spacing outside of an HTML or HTML5 element) displays in yellow.

The Inspect mode is also of a particular relevance in working with HTML5 elements. When you place the mouse cursor over any part of a web page created from HTML5 layouts, you can click on the left-arrow key on your keyboard to "work backwards" in the list of elements that appears in the tag bar at the bottom of the Dreamweaver window.

The generated HTML5 layouts include elements such as <header>, <nav>, <section>, <aside>, and <footer>—new HTML5 elements that make page design simpler. In the following screenshot, the <header> element is identified in the Tag bar.


Other workspace settings for the Inspect mode: When you click on the Inspect button, Dreamweaver prompts you to change other workspace settings as well. Those other workspace changes are not essential, except for one—do work in the Live View when using the Inspect mode.


Saving a layout as a web page

After you generate an HTML5 layout, the next step is to save the generated web page as an HTML file. However, before you do that, enter a page title in the Title box in the Document bar in Dreamweaver. File names should not have spaces, special characters (such as "?," "/," or "!"), but page titles should be descriptive. The following screenshot shows the Title field in the Document bar:

In order to save the file, choose File | Save. The Save As dialog opens, with a default file name assigned, and an HTML filename extension.

Here, it is time to revisit my earlier admonitions in order to be sure to create a Dreamweaver site, and work within it. One simple way to make sure you are saving your web page in the proper folder in your Dreamweaver site is to click on the Site Root button in the S ave As dialog. This will ensure that your file is saved at the proper location.

Having ensured that you are saving your page to a folder defined in your Dreamweaver site, you can customize the filename for your page. Whatever filename you select, you should retain the .html filename extension. This is one of the acceptable filename extensions for web pages. The filename itself should have no spaces or special characters. In addition, while this is not a requirement for web page filenames, I recommend keeping filenames all lowercase to prevent confusion in file management (much of the Web is case sensitive when it comes to filenames).


The Unicode normalization form pop up: The default "C" setting in this pop up is the most widely supported way of coding characters used in different languages (such as o, ó, ò, ô, ö, õ) for the World Wide Web. Dreamweaver allows you to save in other, less widely supported systems of coding characters, but this is only useful in very specialized situations.

After entering a filename in the Filename (Windows) or Save As (Mac) field in the Save As dialog, click on the Save button. The Save As dialog with a valid filename is shown in the following screenshot:


Recipe: Creating and saving a 3-column HTML5 page

This recipe will walk you through the process of generating and saving a 3-column web page using the key HTML5 Layout elements. We will assume that you have created a Dreamweaver site (see the section named Creating a Dreamweaver site in this chapter).

  1. Select File | New to open the New Document dialog. Select Blank page on the left-hand category column. Choose HTML in the Page Type column. Moreover, select HTML5: 3 column fixed, <header> and <footer> in the Layout column.

  2. Note that HTML5 is now selected in the DocType pop up and Create New File from the Layout CSS pop up.

  3. Click on the Create button. The Save Style Sheet File As dialog appears.

  4. Click on the Save button and if prompted to replace an existing file, click on Replace. A generated HTML5 layout opens in Dreamweaver Document window.

  5. Click on the Inspect button in the Document toolbar to more easily detect and identify HTML5 Layout elements. With the Inspect button enabled, hover over different sections of the page, and look for HTML5 Layout elements such as < header>, <footer>, <aside>, <nav>, <article>, and <section> in the tag bar at the bottom of the Dreamweaver window, as shown in the following screenshot:

  6. Enter a page title in the Title box in the Document toolbar.

  7. Choose File | Save. Replace the default filename with your own filename—all in lowercase, no spaces, or special characters. Leave the HTML filename extension in tact. In order to work through the recipe in Chapter 2, save your file as: chapter1.html:

  8. Click on the Site Root button to ensure the file is correctly managed by Dreamweaver and then click on the Save button.

This is, of course, only the first step in creating a web page using the HTML5 layout elements in Dreamweaver. The next steps are to customize the content and look of your page. We will do that next!



In this chapter, we explored how to verify that the HTML5 Pack is installed in Dreamweaver CS5.

We have focused on generating web pages using the two available HTML5 Layouts that are part of the HTML5 Pack. We have explored both the HTML (HTML5) file that is generated from either of these layouts and noted that the formatting of the HTML5 elements (and other HTML elements) is dependent on a related (linked) CSS (style sheet) file.

Finally, we began to acclimate to some of the most useful views in Dreamweaver CS5 that will be of great value as we detect and change the attributes of HTML5 elements in future chapters.

About the Author

  • David Karlins

    David Karlins is a web design consultant, teacher, and author of dozens of books on web design, including Building Websites All-in-One For Dummies, John Wiley & Sons Inc. (co-author with Doug Sahlin), Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, Peachpit, and Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery, Packt Publishing.

    Browse publications by this author
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Unlock this book and the full library FREE for 7 days
Start now