3 Review(s)

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. What you will learn from this book : Use and customize the content of Dreamweaver’s HTML5 layouts Dissect and customize the CSS styles that control HTML5 layouts Create sites that use the styling and content tools in Dreamweaver to their full potential Implement multiscreen previews and media queries to create sites for desktops, mobiles, and tablets Apply new CSS3 effects with Dreamweaver code hints and enhanced CSS Styles panel Add multimedia to web pages with HTML5 elements Create jQuery Mobile-based web pages from scratch Build and emulate mobile apps with Dreamweaver Approach This book combines accessible, clear, engaging and candid reference material, advice and shortcuts with substantial step-by-step instructions for creating a wide range of HTML5 and CSS3 designs and page content in Dreamweaver. Who this book is written for This book is geared towards experienced Dreamweaver web designers migrating to HTML5 and jQuery. It also targets web designers new to Dreamweaver who want to jump with two feet into the most current Web design tools and features. While focused primarily on Dreamweaver CS5.5, the book includes content of value to readers using older versions of Dreamweaver with directions on installing a version of Adobe’s HTML5 Pack that updates those packages. About the Author David Karlins is the author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques (Adobe Press, 2010) along with dozens of other books and videos on web, and digital graphic and interactive design. His articles and reviews appear in publications ranging from Macworld to Business Wee, and David’s consulting and design clients have ranged from Hewlett-Packard to the Himalayan Fair. His classes and seminars in New York City and the San Francisco Bay Area explore themes ranging from effective intranet culture to Web strategies for periodicals. Table of Contents Preface Chapter 1: Creating HTML5 Pages in Dreamweaver HTML5 and Dreamweaver CS5 in the world of web design HTML5—the cutting edge of web design HTML4.1, XHTML, and HTML5 Compatibility issues with HTML5 HTML5 and Dreamweaver CS5.5 Dreamweaver generates code Dreamweaver—catching up to HTML5 An introduction to HTML5 layout elements The evolution of HTML layout elements Phase 1: Tables Phase 2: CSS DIV tags Phase 3: HTML5 layout elements Meet the HTML5 layout elements Dreamweaver's HTML5 Pack and design elements Detecting or installing the HTML5 Pack in Dreamweaver Creating a Dreamweaver site Generating new pages from layouts using the HTML5 templates Examining the generated HTML5 layout Toggling between related files Code, Split, and Design views Dissecting design elements with the Inspect Mode Saving a layout as a web page Recipe: Creating and saving a 3-column HTML5 page Summary Chapter 2: Customizing HTML5 Layout–Content and Look Customizing layouts – An overview Embedding content where it belongs Dissecting format Editing content in HTML5 page layout elements HTML text tags versus HTML5 layout elements Organizing content in containers Utilizing Split view for editing content Adding articles and sections Identifying and selecting HTML5 layout elements Copying, pasting, and deleting HTML5 Elements Identifying style rules HTML5 layout elements require styles Examining CSS associated with HTML5 layouts Customizing HTML tag rules Making quick changes to styles in the CSS styles panel The CSS rules definition dialog Editing type styles Editing backgrounds Preview with apply Saving customized HTML5 layouts Recipe: Customize content and look of an HTML5 page Summary Chapter 3: Customizing HTML5 Layout Elements HTML5 layout and browser compatibility challenges Which browsers support HTML5 layout elements? Using CSS to solve browser issues The magic of display: block Disabling a CSS rule Global HTML5 layout element attributes Working with backgrounds Defining size, margins, and padding Assigning a page size Margins versus padding Element padding versus content margins Positioning with float Customizing HTML5 elements Back to the future: ID and class styles Layout with class styles The role of ID styles Recipe: Customizing the HTML5 page layout Recipe: Customizing the size and position for header, footer, nav, and aside Customizing links in the nav element Summary Chapter 4: Building HTML5 Pages from Scratch Dreamweaver CS5 and HTML5 Building an HTML5 page from the top HTML5 structural elements Creating a CSS file Using HTML5 to make content accessible HTML5 layout strategy Using code hints Adding header, header nav, and hgroup Navigation within a header Organizing header content with hgroups Creating articles and sections Adding aside content Creating a footer Adding metadata Defining an address Figures and captions Indicating date and time Recipe Part 1: Build a style sheet for an HTML5 page layout Recipe Part 2: Build an HTML5 layout from scratch Summary Chapter 5: Defining and Implementing Multiscreen Previews and Media Queries Web design for a multimedia web world CSS3 and Media Queries Styling for mobile devices and tablets Previewing with the Multiscreen Preview Generating a Media Query in Dreamweaver Building alternative style sheets A 3-step protocol for preparing to generate a Media Query Assigning styles to different media Formatting CSS files for Media Queries Caution: Don't delete style rules Styling for mobile devices Troubleshooting for Apple i-Gadgets Exercise: Defining a Media Query for a cell phone Summary Chapter 6: Applying CSS3 Effects and Transforms New in CSS3: Effects and transforms Compatibility challenges CSS3 styles in Dreamweaver's HTML5 Pack CSS3 effects Opacity Border radius Shadows Box shadow Text shadow Text outline CSS3 transforms When to use transforms How to generate transition coding in Dreamweaver Resizing with scale Moving with translate Applying rotation Creating a skew transition Other CS3 transform effects Compound transforms Interactive effects and transforms Effects and JavaScript Interactivity with the :hover pseudo-class Animating CSS3 transforms in Dreamweaver Recipe: Create an animated effect and transform Putting the pieces in place Summary Chapter 7: Embedding HTML5 Audio in Dreamweaver Audio and compatibility Laying the groundwork: HTML5 and page-building Making audio HTML5-ready Audio compression Browser support for audio files Embedding an HTML5 audio element in a Dreamweaver CS5 web page Alternative media options Providing alternative HTML5 audio formats Audio for non-HTML5 browsers Adding play parameters Recipe: Embedding HTML5 audio Summary Chapter 8: Embedding HTML5 Video in Dreamweaver HTML5 video and Dreamweaver CS5.5 Early formats Flash Video (FLV) Apple devices and the web video The wild world of native videos Native video formats Browsers that do NOT support HTML5 Preparing an HTML5 video for every scenario Compressing videos for the Web Video compression—open source and proprietary Converting a video to web formats with open source tools Creating an HTML5 video in Adobe Media Encoder CS5. 5 Dreamweaver site management for an HTML5 video Defining the HTML5 <Video> element Prerequisites Creating the <Video> element Defining video attributes Defining video source(s) Alternate video for non-HTML5 environments Putting it all together Testing HTML5 video pages Previewing a video in the Live View Previewing a video in Browser Lab Recipe: Embedding an HTML5 video Summary Chapter 9: Creating Mobile Pages with jQuery Mobile pages – An overview Mobile pages, apps, and jQuery Mobile The status of jQuery Mobile Using jQuery Mobile starter pages Creating mobile pages from Dreamweaver CS5.5 starters Mobile pages in Split view Previewing jQuery Mobile pages in Live view Customizing mobile page content The HTML5 data-role property Data-role pages Customizing page content Customizing content for different data roles Adding new jQuery Mobile pages and objects Creating new data-role pages by copying code Creating new data-role pages from the menu Customizing mobile page CSS styles Default jQuery Mobile CSS Editing jQuery Mobile CSS Applying and customizing themes Looking ahead: Generating mobile apps Recipe: Build a mobile web page with jQuery Mobile objects Summary Chapter 10: Adding jQuery Mobile Elements Creating jQuery Mobile pages from scratch Interface options Step 1 – Creating an HTML5 page Step 2 – Inserting a jQuery Mobile "page" Inserting a Layout Grid Defining styles for Layout Grids Designing mobile pages into a collapsible block Building a collapsible block Changing initial block state Changing block data-themes and styles Editing Collapsible Block HTML Adding jQuery form objects Forms in Dreamweaver Creating a jQuery Mobile form Special mobile form fields Inserting a text input field Inserting a slider Inserting a toggle switch Formatting jQuery Mobile Form Fields Recipe: Build a page with collapsible blocks and a form Summary Chapter 11: Generating Apps Generating apps from Dreamweaver—an overview Advantage: App vs web page PhoneGap and Dreamweaver CS5.5 Configuring application framework(s) The App toolkits Installing the frameworks Defining mobile application settings Building and emulating apps Testing mobile apps on your computer Recipe: Building and emulating a mobile app Summary Index