Project 6: Kayaking HTML5 Site Working with HTML5 tags Working with CSS3 selectors Working with Web fonts Adding Video in HTML5 Creating an image gallery HTML5 is the next version in the evolution of the HTML language. Although it will not be formally adopted as a standard until 2014, it is already in use across the Web and will become more common in the coming months. Dreamweaver CC already incorporates many HTML5 and CSS3 options into the application interface. You can also use the Code pane to create HTML5 elements that function properly in both the Live view and a Web browser. This project introduces many of the new options that have been added to HTML5, including new elements and CSS3 properties that give designers far greater control over the appearance of a Web site. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

HTML5 Elements Structure Insert panel New elements for standard page sections header footer nav section article Structure Insert panel HTML5 is the next generation of the HTML code language. Although it will not be officially adopted as a standard until 2014, it is already being used in many Web sites. HTML5 incorporates new elements and attributes that are intended to make Web pages function better, both structurally and syntactically. HTML5 also removed (deprecated) elements from previous versions of the language that were obsolete or unnecessary based on the way people currently use the Web. Because HTML5 is a revision of an existing language, you will see very little difference in the basic file that you create in Dreamweaver. The only notable difference between an HTML 4/XHTML page and an HTML5 page is the doctype statement at the beginning of the page code. In the general sense, working with HTML5 is no different than working with the HTML 4 files you have used in previous projects. Adding content to a page, and formatting elements with CSS selectors, are core skills for either version of HTML. One difference with HTML5 is the addition of new tags that reflect conventions that Web designers have been using for years. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Navigating CSS Code Adobe Dreamweaver CC: The Professional Portfolio By default, the Code Navigator icon appears near the cursor when you hover your mouse over an object. If you don’t see the icon, it has been disabled; in this case, you can Command-Option-click (Macintosh) or Alt-click (Windows) any object on the page to show the Code Navigator. You can use the Code Navigator to review all CSS rules that apply to a specific object. This is especially useful when you don’t know what selectors or rules affect an object. Moving the mouse over a specific item in the Code Navigator shows the defined properties for that link. The Code Navigator also provides a dynamic link to all related code. If you click a link in the Code Navigator window, the document window automatically switches to Split view and the appropriate code file displays in the Code pane. The active selector is also selected in the CSS Designer panel. The Related Files bar above the document window shows which code file is active in the Code pane. Clicking any selector’s code in the Code pane automatically highlights the related selector in the CSS Designer panel. Clicking a selector in the CSS Designer panel automatically snaps the Code pane to show the code for the active selector. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

CSS3 Properties Browser-specific prefixes Most preview only in the Live view CSS3 is the next generation of cascading style sheets. The newest edition of the standard adds a number of properties that give you considerably more creative control over the appearance of Web pages. Prior to CSS3, a number of design options — rounded corners, color transparency, drop shadows, etc. —required a series of convoluted and complex image slices, cut apart in an image-editing application such as Adobe Photoshop and then reassembled in the Web page usually as the background images for a series of divs or (before CSS became the standard) table cells. Using CSS3, many of these design options are available as properties for block-type elements. Although you can use the CSS Designer panel to add specific properties to a selector, some of the new CSS3 properties are not available in the panel and must be manually typed in the Code pane. (Code hints do support CSS3 properties.) The complete list of CSS properties — including those added in CSS3 — can be found at www.w3cschools.com/cssref/default.asp. It is important to note that some CSS3 properties are not supported by all browsers. In these cases, you must use browser-specific prefixes as a workaround to define options that will work in various browsers. You should also note that the Dreamweaver Design view doe not support many of the CSS3 properties unless the Live view is active. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

RGBA Transparency Alpha transparency for CSS color properties Using CSS3, you can define colors in a number of ways: Using a hexadecimal color value, such as #FF0066. Each couplet in the color value defines the red, green, and blue components of that color. Using a color name, such as “aqua” or “green.” There are 147 defined color names in the HTML and CSS color specification. Using specific RGB values, in the following format: rgb(255, 0, 100) Each number in the parentheses defines the amount of red, green, and blue (respectively) — from 0 (none of a color) to 255 (all of a color) — that makes up the overall color. By combining various percentages of each color component, this method theoretically allows you to define any of the 16.7 million colors in the visible spectrum. This flexibility gives you considerably more color options than the basic Web-safe color list that was the standard in earlier generations of Web design. Keep in mind, however, that colors still vary from one display to another. Although you can now define a much wider range of colors, you still can’t guarantee that the color you want is the color users will see. Using RGBA color values, which adds the alpha property to standard RGB color values in the following format: rgba(255, 0, 100, 0.5) The fourth parameter in the parentheses is the alpha value, which defines the color’s transparency from 0.0 (fully transparent) to 1.0 (fully opaque). Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Edge Web Fonts Customize pages with specific fonts Modify>Manage Fonts Custom font stacks Web sites used to be limited to the fonts that were installed on a user’s computer. When we design pages, we use font families to define a sequence of possible fonts to use, usually ending with a generic type of font like serif or sans- serif. Even those options were not guaranteed, because an individual user can customize a browser to display all type in (for example) Comic Sans regardless of the type of font a design defined. The addition of Web fonts in CSS3 now means that you can embed specific fonts into a Web page; when a user opens your page, the exact fonts you define will be used in the browser. Dreamweaver CC includes built-in access to Adobe Edge fonts. These fonts are served by TypeKit servers, which deliver the appropriate font data to the browser when the page is loaded. When you add Edge Web fonts to a page, Dreamweaver automatically adds the required scripts to the page’s <head> element. To use Edge Web fonts in an HTML page, you have to first use the Manage Fonts dialog box to make those fonts available to your version of Dreamweaver. You can then create custom font stacks, and apply those font or font stacks to various elements in your pages. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Edge Web Fonts (cont.) When you first apply a Web font in a page, Dreamweaver shows a warning at the top of the document window that other properties have been modified so that the Web font works to best advantage. Keep in mind that, like many other CSS3 properties, Web fonts do not display in the Design view unless the Live view is active. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

External Web Fonts Install packages Apply families to CSS styles In addition to Edge Web fonts, you can use local Web fonts if you have the appropriate files on your hard drive. (Many sources of Web fonts are available on the Internet; some sources are free, some are free only for non-commercial use, and some require a fee just like high-quality fonts for print applications.) The process for working with local Web fonts is explained in detail on Page 265. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

HTML5 Video Media Insert panel No plug-ins required Multiple file formats for different browsers One of the advantages of HTML5 is the ability to present multimedia files without the need for a plug-in. Using the <video> tag, you can define a source for video that will play directly in the page. Because HTML5 is not yet an adopted standard, different browsers require different formats for video placed into an HTML5 page. Internet Explorer 9+ supports MPEG 4 (.mp4) files. Safari supports MPEG 4 files. Firefox supports WebM and Ogg (.ogv) files Opera supports WebM and Ogg files Google Chrome supports MPEG 4, WebM, and Ogg files. A number of free video converters are available on the Internet. To create the required files for this project, we used the Freemake Video Converter for Windows (www.freemake.com). Keep in mind that the <video> tag is new in HTML5; if you open the page in an older browser that does not support HTML5, the video will not be visible. When the Live view is active, you can see the first frame of the placed video in Dreamweaver’s Design pane. When you move the mouse over the video, you should notice that there are currently no controls to make the video play. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Position Property static absolute fixed relative inherit By default, block-type elements appear on the page in the order they are placed, relative to the container in which they are placed. The CSS position property makes it possible to place elements in a specific location regardless of where the code exists in the HTML file. static is the default value, which is applied if no other specific position value is defined. absolute defines a specific position relative to the first containing element that does not have static position. fixed allows you to define a position relative to the browser window, regardless of an elements nesting position. relative allows you define an element’s position relative to its default. inherit means the element’s position value is defined by the position value of its immediate parent. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

nth-of-type Selectors Numbered instance of the element The nth-of-type pseudo-class selector, new in CSS3, allows you to define properties of a specific instance of the defined element type. In the example of this project, you have placed eight images in the same absolute position (10 pixels from the top of the containing element). Using the nth-of-type selector, you can define different positions for each image in the gallery without defining different ids or classes for each img element in the gallery. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Z-index Stacking order position Objects exist in the order they are placed in the code, just as pieces of paper exist on your desk in the order you set them down. The first is below the second, which is below the third, and so on. Because you can control the exact position of individual objects — effectively allowing you to place multiple objects in the same position — you should also realize that you can also control the top-to-bottom position (stacking order) in which objects appear by changing an object’s z-index property. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio