HTML5 and CSS3 in Dreamweaver CS5.5 – Part 1: Building the web page

Dreamweaver CS5.5 incorporates native support for the new HTML5 structural elements and many of the CSS3 properties supported by the latest browsers. Some of these features were introduced in the 11.0.3 updater for Dreamweaver CS5, but they have been significantly enchanced in Dreamweaver CS5.5. For example, there are new tools that make it easy to apply CSS rounded corners and drop shadows while seeing the results in Live view. Dreamweaver CS5.5 now has support for alpha transparency using RGBa or HSLa color formats. Improvements have also been made to the handling of CSS media queries, which  allow you to serve different styles to mobile phones, tablets, and desktops. Advanced users will also be pleased to discover that Dreamweaver CS5.5 now supports all CSS selectors

In this first part of this three-part tutorial series, you will begin exploring some of these features by building an HTML5 web page for a fictional restaurant, Citrus Cafe. In Part 2, you'll style the page for desktop computers, using a combination of CSS3 and CSS2.1 properties. Part 3 demonstrates how to use the Multiscreen Preview panel to add CSS media queries to optimize the page for a tablet device and mobile phone.

Trying to discover new features in a familiar program is rather like playing hunt the thimble, an old party game where you have to find a tiny object hidden in room. There are several thimbles hidden in the Dreamweaver user interface (UI), but perhaps the easiest one to find is the small down arrow on the right of the Multiscreen button in the Document toolbar (see Figure 1).

The Multiscreen button was added by the 11.0.3 updater. It launches the Multiscreen Preview panel, which simplifies the creation of page layout for devices with different screen resolutions, using CSS media queries. You'll explore the panel later in this tutorial series.

First, take a look at what the little arrow on the right is for. Clicking the arrow reveals the menu shown in Figure 2.

Selecting one of the menu options resizes the viewport in the Document window. Used in combination with Live view, this allows you to see what your site will look like at different screen resolutions. The preset values target the most common sizes for desktops, tablets, and smartphones, but you can also define your own sizes by selecting Edit Sizes at the bottom of the menu. As you'll see later in this tutorial series, the Document window now responds to CSS media queries, applying different style rules depending on the width of the viewport. So, the ability to resize the window quickly and accurately is indispensible when designing for multiple screen resolutions.

You can also access the Window Size menu by clicking the current size in the status bar at the bottom of the Document window (see Figure 3). Alternatively, select View > Window Size.

Changing the size of the Document window viewport is mainly concerned with CSS. So, let's take a look at the Dreamweaver CS5.5 support for HTML5.

Using a preformatted HTML5 layout

Two new preformatted layouts have been added to the Blank Page section of the New Document dialog box, designed to give you a kick start with HTML5.

Note: The HTML5 layouts in the 11.0.3 updater are identical, except for two minor changes that have no effect on the way they render in a browser.

1. Select File > New to open the New Document dialog box.
2. Select the Blank Page category on the left of the dialog box, and select HTML as the Page Type.
3. At the bottom of the Layout column are two new HTML5 layouts (see Figure 4). Both are fixed-width with a header and footer. By default, the two-column version has a sidebar on the right, but it can be easily switched to the left. The three-column version has sidebars on both left and right.

Even if your current default document type is HTML 4.01 or XHTML 1.0, the DocType pop-up menu at the bottom right of the New Document dialog box automatically switches to HTML5 when you select one of these layouts.

Note: HTML5 is designed to be backwards compatible. When you switch back to one of the other layouts, HTML5 remains selected in the DocType pop-up menu. Even Internet Explorer 6 recognizes an HTML5 DOCTYPE declaration (but not HTML5 tags), so it's safe to use with current pages.

Select the two-column HTML5 layout, and click Create.

4. This creates a basic two-column layout that you can use as a starting point, replacing the placeholder text and styling it with CSS just like any other page (see Figure 5).

5. To move the sidebar to the left, click anywhere inside the sidebar, and select <div.sidebar1> in the Tag selector at the bottom of the Document window.

   Open the CSS Styles panel by clicking its tab or selecting Window > CSS Styles.

   Select the Current button at the top of the CSS Styles panel, and change the value of float from right to left (see Figure 6).

6. Open Code view by clicking the Code or Split button on the Document toolbar. You'll see that the HTML code contains a mix of familiar tags, such as <div> , <ul> , <li> , and <h1> . But it also contains some new ones, such as <header> , <nav> , <aside> , <article> , and <section> (see Figure 7).

The purpose of the new tags is to give web pages a more meaningful structure. In the bad, old days, tables were used for structure. Improvements in CSS made it possible to dispense with tables, but the only tool available to designers to group sections of a page for styling was the <div> element.

As you can see in lines 118 and 122 of Figure 7, the <div> element lives on. In fact, the draft HTML5 specification says, "When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element."

Because HTML5 is still new and evolving, it's not always clear which is the best element to use in a particular case. For example, the <section> element can be used to divide a page into logical sections. It can also be used—as it is here—to divide an <article> into sections. The new <header> element doesn't apply only to the top section of the page. Each <section> or <article> element can have its own <header> .

As you build the Citrus Cafe web page, I'll explain why I have chosen particular tags. The choice wasn't always easy, and you might not agree with my decisions.

7. Scroll up to the top of the page in Code view. The CSS in the <head> of the page is heavily commented to help you style the page to your own requirements. It's well worth reading the CSS comments to get an understanding of how the style rules have been applied.
8. Scroll to the bottom of the <head> section. The final style rule on lines 108–110 of Figure 8 tells browsers to display the main HTML5 structural elements as blocks. Without this rule, the new elements are displayed inline. Once all browsers support HTML5, you should be able to dispense with this rule, but you'll need it for a long time to come.

Also note the Internet Explorer conditional comment on lines 112–114 of Figure 8. It loads a tiny JavaScript file that helps versions of Internet Explorer earlier than Internet Explorer 9 (currently in beta) to apply CSS to the HTML5 elements. The script was developed by Remy Sharp, an independent developer based in Brighton, UK. The preformatted layouts use the Google Code content delivery network (CDN), but you can also use a local version. The download files for this tutorial include a copy of the file, which is just 2 KB.

Note: If JavaScript is disabled, Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 apply styles only to HTML4 elements. The result can look a mess. If you need to support Internet Explorer and know that JavaScript is likely to be disabled, it is probably wise to avoid the new HTML5 structural elements, and use <div> elements instead.

9. Close the preformatted layout. You won't be using it again in this tutorial, so there's no need to save it.

The download files contain the completed web page for the Citrus Cafe site, optimized for display in a desktop, tablet device, or mobile phone.It's styled using a new feature in Dreamweaver CS5.5 called a site-wide media queries file. Although there are four style sheets in the css folder, only one of them (citrus_mq.css) is directly attached to the page. The other styles are imported using CSS media queries, which allow you to control how styles are applied depending on the target device’s features, such as screen resolution. The advantage of a site-wide media queries file is that any changes to your media queries are made in a single file rather in every page of the site.

1. Download citrus_pt1.zip (if you haven't already), and extract the files to your local computer. When expanded, you should have a folder called citrus, with three other folders and a text file inside.
2. In Dreamweaver, select Site > New Site to open the Site Setup dialog box.
3. Type Citrus Cafe in the Site Name text box.
4. Click the Browse for folder icon alongside the Local Site Folder text box, and select the citrus folder.
5. Click Save to create the Citrus Cafe site.
6. Expand the folders in the Files panel. The site structure should look like Figure 9.

Note that the images folder contains different size versions of some images. The javascript folder contains the file html5.js, a copy of Remy Sharp's script that cajoles Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 to apply CSS to the new HTML5 elements.

Inspecting the Citrus Cafe page in the Multiscreen Preview panel

In the completed folder, the completed/css subfolder contains three style sheets designed for different resolution screens. The Multiscreen Preview panel displays the results of all three simultaneously. The Document window also responds to CSS media queries, applying the appropriate style sheet depending on the width of Design view.

1. In the Files panel, double-click index.html in the completed folder to open it in the Document window. Switch to Design view, if necessary.
2. Click the Multiscreen button in the Document toolbar. This launches the Multiscreen Preview panel, which displays the page as it will be rendered in a mobile phone, a tablet device, and on a desktop (see Figure 10). You might need to resize the panel to see all three.

The panel is interactive, so you can mouse over the menu labels in the Tablet and Desktop windows to see them animate. In the Phone window, they remain static. The Citrus Cafe site has only one page, but in a multipage site, you can follow the links to see what other pages in the site look like in each device.

3. Click the Media Queries button at the top right of the panel. This opens the Media Queries dialog box shown in Figure 11 (the screen shot shows the version in Dreamweaver CS5.5).

Note: You'll learn how to use the Media Queries dialog box in Part 3 of this tutorial series. Because Dreamweaver CS5 has fewer options than shown in Figure 11, I provided separate instructions for each version of the program.

The Media Queries dialog box has been redesigned since the 11.0.3 updater. It now has options to define a site-wide media queries file and to insert the viewport <meta> tag to force mobile devices to report their actual width. The dialog box also no longer limits the number of media queries you can define (the maximum in Dreamweaver CS5 is three).

As you can see, phone.css targets screen sizes up to a maximum width of 320 pixels, and tablet.css targets screen sizes between 321 and 768 pixels. Older browsers, including all versions of Internet Explorer in current use, don't recognize media queries. So, desktop.css is linked in the normal way to ensure the web page is styled in those browsers.

4. Click Cancel to close the Media Queries dialog box without making any changes.
5. Click the Viewport Sizes button at the top right of the Multiscreen Preview panel. This opens a dialog box where you can change the size of the panel viewports. Make any changes you want to suit your working environment, and click OK. Or just accept the defaults, and click Cancel to close the dialog box.
6. If you're using a dual-monitor setup, it's a good idea to move the multiscreen panel to your second monitor. Otherwise, click the tiny double arrows at the top right of the panel to minimize it to an icon.

7. Activate Live view in the Document window, and open the Window Size menu by clicking the down arrow on the right of the Multiscreen button. Alternatively, select View > Window Size or click the current size indicator in the status bar.

   Note: The Window Size menu is not available in Dreamweaver CS5. Skip to step 11 if you're using CS5.

8. Select 320 x 480 Smart Phone from the Window Size menu. The Document window viewport resizes, and Live view applies the styles designed for a phone of that screen resolution (see Figure 12).

9. Open the Window Size menu again and select 768 x 1024 Tablet. The Document window is resized and displays the site as it will look in a tablet.

10. Select Full Size from the Window Size menu to return the Document window to its normal size.

    Note: Full Size does not display the current page at its maximum size. It simply returns the Document window to its default state. In pages that use media queries, the actual width of the Document window determines which styles are applied.

11. Click the Split button to display both Code view and the Design view window. By default, Dreamweaver CS5.5 splits the Document window vertically. If your window is split horizontally, select View > Split vertically.
12. Resize Design view. Depending on the width of Design view, Dreamweaver automatically applies the correct styles. As Figure 13 shows, the phone layout is displayed when Design view is less than 320 pixels wide.

13. As you drag Design view wider, the display changes, and applies the styles in tablet.css. Expand Design view beyond 768 pixels, and the styles in desktop.css are applied.
14. Close index.html. Now that you have seen the page you're going to build, it's time to get to work.

Although Dreamweaver CS5.5 now has extensive support for HTML5 and CSS3, the new features haven't yet been fully integrated into the UI. There's no way to add a <section> , <article> , or <header> element through the Insert panel/bar. Most of the time, their attributes aren't accessible through the Property inspector, although they can be viewed and edited through the generally underutilized Tag Inspector panel (Window > Tag Inspector). Often, the quickest way to access the new tags and their attributes is through the hints in Code view, but you can also use the Wrap Tag feature to wrap single elements in an HTML5 tag.

Using HTML5 in Dreamweaver CS5.5 involves some new ways of working, which aren't always as efficient as you might want. But HTML5 is also new. If you want to be at the bleeding edge, you need to be prepared to use a little ingenuity to achieve your goals.

Inspecting the basic HTML structure

The structure of an HTML5 page is basically the same as for HTML 4.01 and XHTML 1.0, but some parts of the code are much simpler than before.

1. Select File > New to open the New Document dialog box.
2. In the Blank Page section, set Page Type to HTML and Layout to <none>.
3. Make sure the DocType pop-up menu is set to HTML5, and click Create.
4. Save the page as index.html in the Citrus Cafe site root.
5. Switch to Code view to inspect the HTML skeleton Dreamweaver has created (see Figure 14).

You should note two points here: The DOCTYPE declaration and the <meta> tag that sets the encoding to UTF-8 (Unicode) are both much simpler than in previous versions of HTML and XHTML. Otherwise, the code is the same as for HTML 4.01.

Note: The 11.0.3 updater for Dreamweaver CS5 uses a longer version of the <meta> tag. The longer version is not incorrect, but the version used by Dreamweaver CS5.5 is more succinct.

For backwards compatibility with XHTML 1.0, HTML5 permits the insertion of a closing slash on tags—such as <meta> , <link> , and <img> —that don't have a closing tag. However, Dreamweaver CS5 keeps the code simple by using standard HTML syntax.

Note: To convert existing XHTML pages to HTML5, select File > Convert > HTML5. Dreamweaver changes the DOCTYPE declaration, and removes the closing slashes from single tags.

6. Change the page's title to Citrus Cafe. and save the page.
   

Creating basic styles for the new HTML5 elements

When creating an HTML5 page, your first task should be to create a basic style rule that treats the new structural elements as blocks. Forgetting to do so results in other styles being incorrectly applied in older browsers. It's also a good idea to set padding and margins on the new elements to zero in case newer browsers unexpectedly add default settings that break your layout.

Although the finished page will use media queries, they won't be added until Part 3 of this tutorial series. So, you'll begin by creating styles attached to the page in the normal way. Adding the style sheet to a site-wide media queries file later is very straightforward.

1. Select File > New > Blank Page > CSS and click Create.
2. Save the new style sheet as desktop.css in a new folder called css in the site root.
3. Add the following style definition to the new style sheet:

This ensures that the HTML5 structural elements are styled as block-level elements without any margins or padding. In other words, they will behave exactly the same as <div> elements.

4. Close desktop.css. With index.html as the active document, select Format > CSS Styles > Attach Style Sheet, and navigate to the style sheet you have just created to link it to index.html.
5. Select desktop.css in the Related Files toolbar to make sure you attached the new version of the style sheet, which should have only the style definition you created in step 3.
6. Select File > Save All Related Files to save both files.

Adding the <header> element

According to the HTML5 specification: the <header> element "represents a group of introductory or navigational aids." So, the <header> will contain the page's main heading, logo, and navigation menu. The <header> will also contain another HTML5 structural element: <nav> . Unless you're prepared to type all the tags in Code view, you need to add the elements in a specific order.

Note: The original version of this tutorial also used the HTML5 <hgroup> tag. The tag is currently under review and likely to be dropped from the final specification.

Follow the instructions carefully in this section, as it's easy to make a mistake.

1. Make sure you’re in Split view, and select Source Code in the Related Files toolbar so you can see the HTML being created as you type.
2. Click inside Design view, type Citrus Cafe, and format it as a level 1 heading by pressing Ctrl+1 (Windows) or Cmd+1 (Mac).
3. With your insertion point inside the text, select <h1> in the Tag selector to ensure the surrounding tags are selected. Then right-click the selected text in Design view, and select Wrap Tag from the context menu.
4. Type head, and press the down arrow once to select header from the code hint menu (see Figure 15).

5. Press Enter/Return twice. The <h1> heading should now be wrapped in <header> tags, as shown in Figure 16.

6. Click to the right of the word Cafe in Design view, and press Enter/Return. This inserts a new paragraph inside the <header> element.
7. Type Sustainable, organic and natural in the new paragraph, and press Ctrl+2 (Windows) or Cmd+2 to format it as an <h2> heading.
8. With your insertion point at the end of the second heading, press Enter/Return once to insert a new paragraph between the closing </h2> and </header> tags.
9. Convert the new paragraph into the first element of a bulleted list by clicking the Unordered List button in the Property inspector in HTML mode.
10. Add five items to the bulleted list: Home, Menus, Reservations, Gallery, and Contact.
11. Add a dummy link to each item in the bulleted list by selecting the text, and typing a hash symbol (#) in the Link text box of the Property inspector in HTML mode.
12. Select <ul> in the Tag selector to select the whole unordered list, right-click the selected list in Design view, and select Wrap Tag from the context menu.
13. Select nav in the Wrap tag mini-panel, and press Enter/Return twice to wrap the unordered list in a pair of <nav> tags.

    Your HTML code should now look like Figure 17.

16. The <header> element needs an ID. This is one of the occasions you can use the Property inspector for the HTML5 structural elements.

    Select <header> in the Tag selector, and type logo in the ID text box. Press Enter or Tab to apply the ID.

17. With the <header> still selected, click the Insert Div Tag button in the Common category of the Insert panel/bar, or select Insert > Layout Objects > Div Tag.
18. In the Insert Div Tag dialog box, make sure the Insert pop-up menu is set to Wrap around selection, and type container in the ID text box.
19. Click OK to wrap the <header> in the new <div> element, and save index.html.

    Your HTML code should now look like Figure 18.

Wrapping the page's main heading and navigation menu in a <header> element identifies them as a logical group that belong together both in structure and meaning. The <nav> element identifies the unordered list as a navigation element.

In contrast, the container <div> has no structural meaning. It's simply there to hold the whole page together. The rest of the HTML will go inside the <div> , which will be styled to center the content in the page.

The rest of the page consists of a hero banner with the Citrus Café's vision or mission statement, three pods with links to other parts of the site, and a footer. Deciding which element to use for the mission statement was difficult. In the end, I decided that <article> was probably the most appropriate, but others might disagree. Although two of the pods contain only a static image, they could be used for rotating images or videos, so I decided to use <section> elements for the pods, <figure> elements for the images, and <article> for the list of news items. However, if the news items link to other pages, another <nav> would be more appropriate. Decisions, decisions . . .

Adding the main content

To save some typing, the main text for the rest of the page is in copy.txt.

1. To hold the main section of the page together, you need a <div> element purely for styling. Click the Insert Div Tag button in the Insert panel/bar, or select Insert > Layout Objects > Div Tag.
2. In the Insert Div Tag dialog box, select After tag from the Insert pop-up menu. This activates another pop-up menu alongside, which lists all elements that have an ID. Select <header id="logo"> from this menu, and type maincontent in the ID text box, as shown in Figure 19. Click OK to insert the <div> element.

3. With the placeholder text still selected, right-click the text in Design view, and select Wrap Tag from the context menu. Select article from the code hints list, and press Enter/Return twice to wrap the placeholder text in <article> tags.
4. Dreamweaver should automatically select the surrounding <article> tags, allowing you to add an ID. Type vision in the ID text box in the Property inspector.
5. Replace the placeholder text in the <article> element with the first sentence from copy.txt (it begins with "A new neighborhood"). It's probably easier to do this in Code view, to make sure you don't accidentally delete the <article> tags.
6. For this next part, you need to remain in Code view, because trying to work in Design view and the Property inspector results in the insertion of unwanted tags or tags being inserted in the wrong place. Dreamweaver hasn't quite caught up with the new syntax.

   Type the following code immediately after the <article> you have just inserted. Although there's a lot of code, code hinting in Dreamweaver should speed up the process. Also, you can copy and paste the paragraphs in the final <section> element from copy.txt.

The main points to note in this code are that each <section> has an <h1> heading, and that the <a> tags are outside the <h1> headings. In HTML5, the hierarchy of headings is determined by each section. So, the use of <h1> indicates that this is the most important heading in the current section. HTML5 also allows you to wrap block-level elements in <a> tags. As a result, the heading will be clickable across the full width of the section.

7. In Design view, click carefully below the "Today's specials" heading, and check in Code view that the insertion point has been placed between the <figure> tags. If you find it difficult to get the insertion point in the right place, click to the right of the heading, and press the down arrow key once.
8. Click the Insert Image button in the Common category of the Insert panel/bar, or select Insert > Image.
9. In the Select Image Source dialog box, select specials.jpg in the images folder, and click OK (Choose on a Mac). Give the image some alternate text in the Image Tag Accessibility Attributes dialog box, and click OK.
10. Repeat steps 7 and 8 under the "Events" heading, and select events.jpg in the images folder.

    The maincontent <div> should now look like Figure 20 in Design view.

11. The numbers in the "News" section are dates, so they should be wrapped in <time> tags. Select 9/1 in the first news item, right-click, and select Wrap Tag from the context menu.

    Type ti to select time from the code hints menu, and press Enter/Return twice to wrap the text in <time> tags.

12. With the insertion point inside the <time> tags, open the Tag Inspector by clicking its tab or selecting Window > Tag Inspector.

    Make sure the Attributes button is selected, and click in the field alongside datetime.

    The <time> element requires the date and/or time to be specified in the datetime attribute in the format recommended by the International Organization for Standardization (ISO): YYYY-MM-DD HH:MM:SS. In this case, you need only the date, so type 2011-09-01 in the datetime field (see Figure 21).

13. Repeat steps 10 and 11 for the remaining dates in the news section, adjusting the value of the datetime attribute as necessary.

Note: Assigning the datetime attribute like this might seem tedious, but it would normally be done automatically by a server-side script when pulling information from a database.

Adding the <footer> element

In HTML5, the <footer> element isn't limited to the bottom of the web page. Each <section> or <article> can have its own <footer> . In this page, though, the <footer > represents only the contact information at the bottom of the page.

1. Select <div#maincontent> in the Tag Selector to select the whole <div> element, and press your right arrow key once to position the insertion point outside the closing </div> tag.
2. Click the insertion point in Code view, and type <foo. This selects the code hint for the <footer> element. Press Enter/Return to autocomplete the tag. Add the closing angle bracket, and type </ to add the closing </footer> tag.
3. Position the insertion point between the opening and closing <footer> tags, and click the Insert Div Tag button in the Insert panel/bar.

   In the Insert Div Tag dialog box, select At insertion point from the Insert pop-up menu, type facebookTwitter in the ID text box, and click OK.

4. Delete the placeholder text in the new <div> element, and insert the images, icon_facebook.jpg and icon_twitter.jpg inside the <div> .

5. Copy from copy.txt the two paragraphs containing the address and phone number, and paste them after the <div> inside the <footer> element.

   The <footer> code should look like Figure 22.

If you're horrified by my use of <b> tags instead of <strong>, welcome to another change in HTML5. The specification redefines the use of <strong> to indicate strong importance, such as <strong>Warning!</strong>. On the other hand, <b> indicates a span of text stylistically offset from the surrounding text without conveying extra importance, for example, keywords in a document or product names in a review.

You now have a well-structured document ready to be styled. Using elements such as <header> , <section> , <article> , and <figure> don't affect the way the page looks, but they create a more meaningful structure that should help with search engine optimization. In future, it should also help with accessibility and archiving. At the moment, it's a leap of faith to adopt these new elements. After a slow, tentative start, HTML5 has suddenly gained pace. By learning to use the new elements, you'll be in a better position to take advantage of new developments as they arise, while keeping legacy browsers happy.

In Part 2 of this tutorial series, you'll bring the page to life with CSS, including emerging CSS3 features, such as rounded corners, box and text shadows, and transformations.