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 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
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.
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.
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.
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.
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.
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.
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.
Introduction to jQuery
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 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.
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.