31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 339
Veröffentlichungsjahr: 2011
Ähnliche
Table of Contents
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Copyright © 2011 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: September 2011
Production Reference: 1160911
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-158-1
www.packtpub.com
Cover Image by Asher Wishkerman (<[email protected]>)
Credits
Author
David Karlins
Reviewers
Chad Adams
Nelson Therrien
Acquisition Editor
Wilson D'souza
Development Editor
Neha Mallik
Technical Editors
Kavita Iyer
Azharuddin Sheikh
Project Coordinator
Srimoyee Ghoshal
Proofreader
Mario Cecere
Indexer
Rekha Nair
Graphics
Valentina D'silva
Production Coordinator
Shantanu Zagade
Cover Work
Shantanu Zagade
About the Author
DavidKarlins is a consultant, writer, and teacher on digital graphics and interactive design solutions. He has written or co-authored some fifty books, professional instruction videos, and apps on web design, vector graphic design, digital photography, sports photography, project management, digital video, and animation.
David Karlins' consulting clients have ranged from Hewlett Packard to the Himalayan Fair, from AAA Health Insurance to the Association of Alternative Newsweeklies.
David Karlins is the author of AdobeCreativeSuite5WebPremiumHow-Tos: 100EssentialTechniques, (Adobe Press), AdobeDreamweaverCS4How-Tos: 100EssentialTechniques (Adobe Press), AdobelllustratorCS4How-Tos: 100EssentialTechniques (Adobe Press). He is also the author of PCMagazineGuidetoPrintingGreatDigitalPhotos (PC Magazine Press), BuildYourOwnWebSite (McGraw Hill), AdobeIllustratorGoneWild (Wiley), andEnhancingaDreamweaverWebSitewithFlashVideo: VisualQuickProjectGuide (Peachpit).
Thanks to Wilson D'souza, Srimoyee Ghoshal, Priya Mukherji, and the entire management and staff at Packt Publishing. I would also like to thank my agent Margot Maley Hutchison.
About the Reviewers
ChadAdams is a graduate of University of Central Missouri with a B.F.A. in Commercial Art in Graphic Design, and has been a professional web developer and user experience designer for over seven years. He has developed websites and mobile applications for iOS, Android, and Windows Phone 7 as well.
In order to know more about Chad, visit his website at: http://chad-adams.com/.
My amazing wife, Heather, was always so patient with my late nights studying and working and I want to thank her for her faithful support during my career. Lastly, I offer my regards to my friends, family, and thanks to all those who have supported me in any respect during the completion of the project.
NelsonTherrien has computer degrees in both multimedia and programming. He is an ACE (AdobeCertifiedExpert) with Dreamweaver and has many Brainbench certifications (HTML, XHTML, Dreamweaver, Flash, Web design, Photoshop, and so on).
Most of his time is spent in teaching and developing web applications and dynamic forms. He is teaching at Eliquo, Canada's biggest Apple and Adobe authorized training center. He is responsible for everything that revolves around the Web at the Montreal office.
You could see him if you take a course on Dreamweaver, Flash, ActionScript, Flex, ColdFusion, HTML5, CSS3, XML, JavaScript, jQuery, PHP, LiveCycle Designer, or accessibility and standards on the Web. He also touched some ASP, .NET, Java, SQL, Photoshop, Fireworks, and Illustrator.
He also gave a conference for the launch of Adobe CS5 and CS5.5 in Canada as an Eliquo representative.
He is the father of three young children.
As a way to relax, he is constantly reading and searching to improve his skills and knowledge, and he can find some time to play Canada's national game: hockey! He is a goaltender on his own and coaches his two sons.
I would like to thank Craig Boassaly, Eliquo's president, and the entire team at Eliquo for making my teaching job so much fun.
I would also want to thank my wife, who has the job of taking care of our three angels when I am too busy to help her. Moreover, I would like to thank my three kids, Josué, Isaac, and Kaïla for putting so much sunshine in my life.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt’s online digital book library. Here, you can access, read and search across Packt’s entire library of books.
Why Subscribe?
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
Dreamweaver is the most powerful and industry-leading web design software that utilizes innovative web technologies such as HTML5, CSS3, and jQuery for web and mobile development. These technologies have radically reconfigured the process of designing the 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 who are 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 systematic directions for building mobile applications 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. This 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 finish reading this book, you will have learned several techniques to use the latest features of Dreamweaver for web and mobile development.
What this book covers
Chapter 1, CreatingHTML5PagesinDreamweaver, begins with the exploration of creating HTML web pages with Dreamweaver CS5.
Chapter 2, CustomizingHTML5Layout—ContentandLook, provides information about customizing both the content and the look of HTML5 pages generated with the HTML5 Layouts in Dreamweaver.
Chapter 3, CustomizingHTML5LayoutElements, provides an exploration of using new HTML5 layout elements, including <header>, <nav>, <article> and <section>, <aside>, and <footer>.
Chapter 4, BuildingHTML5PagesfromScratch, guides you through the process of building modern standards-complaint pages relying entirely on HTML5 layout tags.
Chapter 5, DefiningandImplementingMultiscreenPreviewsandMediaQueries, guides you through the process of providing media-sensitive content for avariety of viewports, ranging from large-screen projections of websites to hand-held devices.
Chapter 6, ApplyingCSS3Effectsand Transforms, highlights the importance of using CSS3 to format effects such as drop-shadows, rounded box corners, and opacity (transparency) along with transforms that change the shape, location, rotation, and size of objects.
Chapter 7, EmbeddingHTML5AudioinDreamweaver, guides you through the process of embedding native (browser-based, not plugin-based) audio to web pages using Dreamweaver CS5.5 tools for HTML5 media.
Chapter 8, EmbeddingHTML5VideoinDreamweaver, provides information about embedding a variety of HTML5-compliant video formats to web pages using HTML5 and Dreamweaver CS5.5.
Chapter 9, CreatingMobilePageswithjQuery, guides you through the process of creating jQuery Mobile-based pages—accessible, inviting, animated pages that work particularly well in mobile devices.
Chapter 10, AddingjQueryMobileElements, provides information about building jQuery Mobile-based pages from scratch with layout grids, and collapsible blocks.
Chapter 11, GeneratingApps, guides you through the process of publishing mobile apps for iOS (iPhone, iPod Touch, and iPad) and Android devices using new tools in Dreamweaver 5.5.
What you need for this book
In order to work through this book most effectively, you need access to Dreamweaver CS5.5 or higher. However, the book includes asides and notes to enable designers using earlier versions of Dreamweaver, back to Version 3, to take advantage of Adobe-provided tools for creating HTML5 and CSS3-based websites.
Who this book is 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.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Newterms and importantwords are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Doing this opens the SelectImageSource dialog".
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the erratasubmissionform link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
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:
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:
Note
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.
HTML4.1, XHTML, and 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, Entersearchtexthere:
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, DefiningandImplementingMultiscreenPreviewsandMediaQueries) 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'sFlashVideo (FLV) and Flashanimation/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 DIVtags 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
