This chapter sets the scene for the rest of the course with a brief overview of HTML5, CSS3, jQuery, and the new features in Dreamweaver CS5.5.
Introduction to HTML5, CSS3, and jQuery
Many web designers and developers are reluctant to adopt HTML5 because the specification is still evolving. This video discusses the backwards compatibility of HTML5 and encourages you to start using it now.
This lesson compares an HTML5 predefined layout in Dreamweaver CS5.5 with its XHTML 1.0 equivalent and points out where new semantic tags are used. You'll also learn about new form elements and the <video> tag.
Like HTML5, CSS3 is constantly evolving, but its modular format means that many parts are stable and widely supported by all modern browsers. This video provides a quick overview of the CSS3 features covered by this course.
This video explains why Dreamweaver CS5.5 has chosen to provide code hinting for the jQuery JavaScript library (hint: it's the choice of more than three out of every four websites that use a JavaScript library). You'll also see why jQuery is known as the "write less, do more" solution.
This set of videos describes the most important parts of the Dreamweaver user interface that will be used in this course. Even if you're an experienced Dreamweaver user, it's worth checking them out.
Using the Right Tools in Dreamweaver CS5.5
You need to define a site in Dreamweaver for the program to be able to create the correct paths for assets such as images, style sheets, and external JavaScript files. This lesson shows how to set up the exercise files for this course and explains the simplified site setup that was first introduced in Dreamweaver CS5.
Most default settings in Dreamweaver are fine, but for HTML5 you need to change the default document type and the way bold and italics are handled. This video covers all the details.
Knowing your way around the user interface is essential. Although mainly intended for newcomers, this video might also uncover some hidden treasures for experienced users.
This video takes a look at two of the most important elements of the Dreamweaver interface, the Property Inspector and the Insert panel. It clarifies some common points of confusion and highlights features that are often overlooked.
Although Dreamweaver CS5.5 supports all new tags and attributes in HTML5, most of them cannot be accessed through the Property Inspector. This lesson introduces you to the Tag Inspector panel and demonstrates its use with an HTML5 form.
This lesson demonstrates two of Dreamweaver's powerful CSS management tools. The CSS Styles panel lets you organize the cascade in your style sheets and provides detailed information about the current selection, whereas the Code Navigator provides quick and easy access to styles from within the Document window.
This video looks at Live view, the integrated WebKit browser engine in the Dreamweaver Document window, which lets you see what your pages will look like in a standards-compliant browser. It also gives you access to CSS Inspect and Live Code, which show you dynamically generated code and the effect of style rules.
The Dreamweaver workspace is highly configurable. This video walks you through the process of setting up a suggested configuration for working with HTML5.
This chapter looks at the main new features in HTML5 and offers practical advice on which ones can be immediately incorporated into websites without creating problems for older browsers.
Practical HTML5
Dreamweaver CS5.5 has two predefined HTML5 layouts. This lesson examines one of the layouts and describes its advantages and drawbacks.
The problem with HTML5 semantic elements is that they remain unstyled in Internet Explorer 8 and earlier if JavaScript is disabled. This lesson considers alternative strategies, including the use of the Web Accessibility Initiative (WAI-ARIA) role attribute.
Dreamweaver CS5.5 converts existing pages to HTML5 in a quick and simple operation. After showing you how to convert a page from XHTML 1.0 Strict, this video shows how to check that the code is valid by submitting it to the W3C validator without leaving the Document window.
HTML5 introduces 13 new form input elements, which you can start using immediately because older browsers render them as text input fields. This video describes many of the new elements and their uses.
This lesson shows you how to use the placeholder attribute to provide a hint for users. You'll also learn how to use the pattern attribute with a regular expression to enforce a specific input format.
The HTML5 datalist element displays a list of options when its associated text input field gets focus. In this lesson, you'll learn how to wrap a menu in a datalist to provide a fallback for browsers that don't support the new element.
The HTML5 video tag allows you to display videos in your web pages without the use of plug-ins. Although browsers haven't agreed on a common video format, the Adobe Widget Browser provides a cross-browser solution.
A strong understanding of CSS selectors is essential not only for styling a website, but also for working with jQuery. This chapter serves as a refresher on the most important selectors, including many that you might have overlooked because they weren't supported by Internet Explorer 6.
Everyday CSS Selectors
This video covers the three most basic selectors, which have been in use since CSS1 and are supported by all browsers. However, even experienced web designers don't always use them correctly.
Browsers treat HTML elements like a family tree with ancestors, descendants, and siblings. This lesson shows you how to style elements based on their relationship to each other.
Links are at the heart of the web. This video discusses optimizing link styles by using the cascade and making sure links remain accessible to people using the keyboard to navigate your sites.
The :first-line and :first-letter pseudo-elements have been part of CSS since the beginning, but they're often overlooked. This video suggests revisiting them.
New attribute selectors in CSS3 are particularly useful for styling links to external sites or particular types of files, such as PDFs. They're supported by all modern browsers, including Internet Explorer 7 and later.
This lesson reminds you how style rules are applied and explains how to work out a selector's specificity to determine which style takes precedence in case of a conflict. You'll also learn how to check specificity in Dreamweaver's CSS Styles panel.
These videos demonstrate how to add visual flourishes to your designs by using CSS3 properties to add transparency, drop shadows, and simple animations. You'll also learn how to embed web fonts in your pages.
CSS3 Effects Without Images
This video explains the difference between opacity and alpha transparency. They're similar, but produce very different effects.
Licensing issues and incompatible formats have held back the adoption of embeddable web fonts for many years. Although problems still remain, web designers now have a much wider choice of fonts, as this video explains.
Many CSS3 properties are being introduced on an experimental basis while the specifications are being refined. This video explains the role of vendor-specific prefixes and how they're supported by Dreamweaver.
Adding rounded corners to backgrounds is easy with the border-radius property. As you'll see in this video, you can also use the property to create circular backgrounds.
Bored with having all your page elements in straight lines? This video will show you how to use the rotate() function of the CSS3 transform property to add a little variety to your layout.
The CSS3 transition property allows you to smoothly animate the change from one state to another. In this video, you'll learn how to scale images gradually rather than jumping directly from one size to the other.
This section describes the new background properties in CSS3, which include the ability to scale background images and to control the area covered by a background.
CSS3 Backgrounds
This video demonstrates the use of the background-origin property to control the position of the background area of an element.
All modern browsers now support adding multiple background images to the same element. In this video you'll see how to define multiple images and control their positions.
Normally, an element's background stretches under its borders, preventing the background of a parent element from showing through. In this lesson, you'll learn how to create transparent borders using the background-clip property.
This series of videos walks you through a case study that uses CSS media queries to optimize for mobile phones and tablets a website that was originally designed for viewing on a desktop computer. It's recommended that you view them in the order they are presented in order to follow the logical progression.
CSS Media Queries for Phones, Tablets, and Desktops
In this lesson, you'll learn how to use CSS media queries and @media rules to target style sheets and selected style rules for different devices depending on such characteristics as their minimum and maximum width.
This video demonstrates the process of setting up a site-wide media queries file in Dreamweaver CS5.5 using the Media Queries dialog box. You'll also learn how to serve styles to older browsers that don't understand media queries.
Setting the display property of a background image to none doesn't prevent the image from being downloaded, just suppresses its display, wasting precious bandwidth on mobile devices. This lesson suggests a strategy to get around this problem.
Internet Explorer 6 through 8 don't support media queries. This video shows how to serve a separate style sheet to these older versions using Internet Explorer conditional comments.
With everything set up, we're ready to start creating separate styles for tablets. In this video, the header and navigation menu are restyled for a flexible layout.
This video demonstrates converting a double-column layout to a single column for display on tablets and adjusting background images to accommodate the new layout.
In this lesson, you'll learn how to create separate rules for special cases using @media rules combined with media queries inside a style sheet. The video demonstrates how to change the layout of the navigation menu and index page for tablets with smaller screens.
This chapter looks at advanced selectors, most of which have been added in CSS3. With the exception of the :first-child pseudo-class, they are not supported by IE 6-8. However, knowing these selectors is important for working with jQuery.
Advanced CSS Selectors
In this video you'll see how to use the :first-child, :last-child, and :only-child pseudo-classes. The :first-child pseudo-class was introduced in CSS2 and is supported by IE 6.
The :first-of-type and :last-of-type pseudo-classes are useful for targeting the first or last element of a particular type, such as first and last list items, table rows, and so on. The :only-of-type pseudo-class targets an element that has no siblings of the same type. You'll see how all these pseudo-classes work in this video.
The nth-child() and related pseudo-classes make it possible to target elements based on their position in a series. This lesson unravels the mystery of calculating the formula to select the desired sequence.
The general sibling combinator selects elements that follow another element at the same level of the document hierarchy. The :root pseudo-class is mainly used with XML documents, but is included here for completeness.
Used in combination with other pseudo-classes and attribute selectors, the :not() pseudo-class is extremely useful when you want to exclude certain elements, such as the first or last table row, from a style. This video also covers the :empty pseudo-class, which applies to tags that have no content.
The :target pseudo-class applies styles to page elements that have been accessed using an ID or named anchor at the end of a URL. This helps draw attention to the target element, particularly if it's low on the page.
In this lesson, you'll learn how to automatically insert an image before or after a selected element using the ::before and ::after pseudo-elements. You'll also see how to use the ::after pseudo-element to display the URLs of external links.
This chapter covers the fundamentals of working with the jQuery JavaScript framework. We'll begin with a JavaScript refresher and then explore the jQuery JavaScript library.
Introduction to jQuery
Although jQuery is designed to overcome many of the problems associated with JavaScript, you still need a basic understanding of JavaScript to use jQuery successfully. The videos in this section will give you hands-on experience with the main features of the language.
JavaScript Refresher
This video presents a high-level overview of the role of JavaScript in creating interactive web pages and discusses the need to cater to users who access websites with JavaScript disabled in their browsers.
For a function to be executed, it needs to be bound to an event handler. This video shows how to execute a function automatically when the page loads or when the user clicks a link.
This lesson explains how JavaScript uses the comparison of two values to determine which action to take. It also introduces the main comparison operators used in JavaScript.
In this video you'll see how passing a value as an argument to a function gives the function greater flexibility, allowing it to be reused in different situations.
This video demonstrates how to dynamically append a paragraph to a page. It also shows the equivalent JavaScript code needed to do the same thing, illustrating why jQuery is known as the "write less, do more" JavaScript library.
One of the most powerful features in jQuery is the ability to chain methods and apply multiple dynamic effects to selected objects. This video shows how easy it is to chain methods.
This lesson demonstrates several important features of jQuery: dynamic binding of event handlers, using anonymous functions, and using "this" to select the target of an event.
This video shows you how to swap a background image in response to an event. It also illustrates how the functionality of some jQuery methods differs depending on the number of arguments passed to them.
In this lesson, you'll learn how to pass arguments to a jQuery event handler using a data object and how to retrieve the values using the event object's data property.
In this chapter you'll learn how to improve online forms with jQuery by showing and hiding elements in response to the user's choices.
Enhancing Forms with jQuery
It's common for forms to require users to select a checkbox to indicate that they have read the terms and conditions. This means that the Submit button must be disabled unless the checkbox has been selected, and you'll see how to do that in this video.
Getting the value from a radio button group requires a different technique than doing the same thing with a checkbox. In this lesson, you'll learn how to disable a form's Submit button unless a specific radio button has been selected.
In this video, you'll learn how to populate a menu with options depending on the value selected in another menu. Static text files are used as the source for the dynamically loaded options.
When working with a database, as opposed to a static text file, you need to send a variable containing the selected value to your server-side script so it can query the database. This video shows how this process works.
Android
Apple iPad
