HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5: Learn by Video

Build Websites for Today and Tomorrow

With HTML5 and CSS3 bursting onto the scene far more quickly than anticipated and the rapid spread of web-enabled smartphones and tablets, designing and building a website has suddenly become more complex. Fortunately, JavaScript libraries like jQuery reconcile browser incompatibilities and make light work of adding dynamic features, and Dreamweaver CS5.5 has risen to the challenge by providing the tools you need to build modern websites with HTML5, CSS3, and jQuery. In this course, experienced author and trainer David Powers explains which parts of HTML5 and CSS3 you can use now and how to convert existing pages to HTML5 or build new ones from scratch. You’ll learn how to adapt a website that was originally designed for desktop computers so that it works properly on mobile phones and tablets and how to use CSS media queries to apply different styles depending on screen width, viewing the changes in real time in Dreamweaver´s Live view. You’ll also learn the basics of jQuery and how to use it to enhance forms, how to create CSS3 effects without images, how to choose the right CSS selector, and much more.

Trainer: David Powers

ISBN Code: 978-0-321-78811-5

August, 2011

Duration: 7 hrs 35 min

Ready for iPad, Android, and HTML5

Powerful, Feature-Rich Interface

HD Video

Add to Cart Downloads

Similar Courses

Welcome to HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5: Learn by Video

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.
  
  When Will HTML5 Be Ready to Use?
  
  02:44
- 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.
  
  What's New in HTML5?
  
  04:22
- 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.
  
  What CSS3 Has to Offer
  
  03:53
- 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.
  
  Why jQuery?
  
  03:24
- Finding new features in a program can be difficult. This video is your quick guide to what's new in Dreamweaver CS5.5.
  
  What's New in Dreamweaver CS5.5?
  
  06:29
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.
  
  Defining a Dreamweaver Site
  
  06:25
- 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.
  
  Setting Dreamweaver Preferences for HTML5
  
  03:54
- 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.
  
  Finding Your Way Around the Dreamweaver UI
  
  07:22
- 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.
  
  Using the Property Inspector and the Insert Panel
  
  09:52
- 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.
  
  Digging Deeper with the Tag Inspector Panel
  
  06:55
- 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.
  
  Using the CSS Styles Panel and the Code Navigator
  
  07:26
- 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.
  
  Using Live View, CSS Inspect, and Live Code
  
  04:18
- The Dreamweaver workspace is highly configurable. This video walks you through the process of setting up a suggested configuration for working with HTML5.
  
  Configuring the Workspace
  
  05:42
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.
  
  Using a Predefined HTML5 Layout
  
  07:22
- This video explores the process of inserting HTML5 semantic tags in both Design and Code views, and offers advice on when to use which method.
  
  Inserting New HTML5 Elements in Design and Code Views
  
  07:44
- 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.
  
  Alternative Strategies for Semantic Elements
  
  05:20
- 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.
  
  Converting Existing Pages to HTML5
  
  04:43
- 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.
  
  New Form Input Elements
  
  04:52
- Six of the new form input elements are related to dates and times. This video discusses the new types and the formats they support.
  
  Date-Related Form Elements
  
  03:45
- This video describes new attributes that can be added to form elements, such as autofocus, required, min, and max.
  
  New Form Attributes
  
  05:00
- 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.
  
  Specifying Input Formats with Placeholder and Pattern Attributes
  
  04:02
- 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.
  
  Creating an Editable Drop-Down Menu with a Datalist
  
  05:35
- 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.
  
  Inserting Video
  
  06:59
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.
  
  Type (Tag), Class, and ID Selectors
  
  08:13
- 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.
  
  Selecting Related Elements
  
  06:16
- 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.
  
  Optimizing Link Styles
  
  06:48
- 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.
  
  Selecting an Element's First Line or Letter
  
  08:23
- Lack of support in Internet Explorer 6 has delayed the adoption of attribute selectors. This video covers the main attribute selectors in CSS2.
  
  Basic Attribute Selectors
  
  06:43
- 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.
  
  Attribute Selectors That Look for a Partial Match
  
  07:00
- 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.
  
  Understanding the Cascade and Specificity
  
  05:54
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.
  
  Opacity and Alpha Transparency
  
  05:01
- 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.
  
  Web Fonts
  
  05:32
- Adding a drop shadow to text is quick and easy with the text-shadow property, as you'll see in this lesson.
  
  Text Shadows
  
  03:51
- 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.
  
  Vendor-Specific Prefixes
  
  05:34
- 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.
  
  Adding Rounded Corners
  
  05:39
- This lesson shows you how to create drop shadows on block elements using the box-shadow property. Shadows can also be inset inside an element.
  
  Creating Drop and Inset Shadows
  
  06:43
- 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.
  
  Rotating Elements
  
  03:14
- This video shows you how to display images full-size when they are hovered over using the scale() function of the CSS3 transform property.
  
  Scaling Elements
  
  08:19
- 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.
  
  Using CSS Transitions
  
  06:20
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.
  
  Controlling the Position of Background Images
  
  05:45
- 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.
  
  Adding Multiple Background Images to an Element
  
  06:36
- This video demonstrates how to scale or resize a background image using the background-size property.
  
  Scaling a Background Image to Fit an Element
  
  04:35
- 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.
  
  Creating Transparent Borders
  
  02:54
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.
  
  What Are Media Queries and @media Rules?
  
  04:03
- 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.
  
  Creating a Site-Wide Media Queries File
  
  08:05
- 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.
  
  Hiding Desktop Background Images from Mobile Devices
  
  05:05
- 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.
  
  Serving Styles to Older Versions of Internet Explorer with Conditional Comments
  
  04:11
- 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.
  
  Restyling the Header and Navigation Menu for Tablets
  
  07:47
- In this video, the Tozai Hotel site's single-column pages are optimized for flexible display on tablet devices.
  
  Restyling the Single-Column Pages for Tablets
  
  06:56
- 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.
  
  Converting a Two-Column Layout into a Single-Column Layout
  
  07:52
- 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.
  
  Using @media Rules for Supplementary Styles
  
  06:03
- This video demonstrates how to configure the navigation menu and inline images for display on smartphones.
  
  Creating the Basic Rules for Mobile Phones
  
  07:01
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.
  
  Selecting First, Last, and Only Children
  
  06:33
- 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.
  
  Selecting the First, Last, and Only Elements of a Particular Type
  
  04:49
- 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.
  
  Selecting Elements Based on Their Position in a Series
  
  06:49
- 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.
  
  Selecting Siblings and the Root Element
  
  02:54
- 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.
  
  Selecting Elements Based on Negative Properties
  
  06:28
- This video shows how you can style form elements depending on whether they are enabled, disabled, checked, or have focus.
  
  Selecting Form Elements Based on Their State
  
  06:20
- 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.
  
  Highlighting Linked Targets
  
  06:05
- 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.
  
  Generating Content with ::before and ::after
  
  06:35
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.
    
    JavaScript Overview
    
    04:12
  - In this lesson, you'll learn how to create a simple JavaScript function to change the font size of an unordered list.
    
    Creating a Function
    
    06:45
  - 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.
    
    Adding an Event Handler
    
    04:23
  - 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.
    
    Using Conditions to Make Decisions
    
    04:11
  - This lesson explains the logical operators used to combine conditions and explores what JavaScript regards as true and false.
    
    Logical Operators and What JavaScript Regards as True
    
    04:24
  - 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.
    
    Passing an Argument to a Function
    
    03:13
  - This lesson describes how to store multiple values in an array and how to access the individual array elements.
    
    Using an Array
    
    07:22
  - This video shows you how to create a for loop to iterate through the elements of an array.
    
    Looping Through Array Elements
    
    07:52
- In this section, you'll learn the fundamental aspects of the jQuery JavaScript library.
  
  jQuery Basics
  - In this lesson you'll learn how to include the jQuery core library in a web page and create a document ready handler.
    
    Including the jQuery Core Library and Creating a Document Ready Handler
    
    06:42
  - 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.
    
    Selecting Elements
    
    05:07
  - 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.
    
    Chaining Methods
    
    02:39
  - 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.
    
    Binding Events
    
    07:11
  - 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.
    
    Swapping Images Dynamically
    
    05:05
  - 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.
    
    Passing Arguments to an Event Handler
    
    07:43
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.
  
  Disabling the Submit Button Until a Checkbox Is Checked
  
  05:01
- 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.
  
  Enabling the Submit Button When a Radio Button Is Selected
  
  04:28
- This lesson explains how you can show or hide text input fields depending on which option is selected in a drop-down menu.
  
  Creating Dependent Input Fields
  
  06:04
- 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.
  
  Populating a Dependent Drop-Down Menu Using Static Text Files
  
  07:01
- 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.
  
  Populating a Dependent Drop-Down Menu Using a Server-Side Script
  
  04:59

Welcome to HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5: Learn by Video

The advent of HTML5 and CSS3, combined with the growing popularity of web-enabled smartphones and tablets, have made this an exciting and challenging time to be a web developer. This video course addresses these challenges and opportunities with the help of the JavaScript library jQuery and an impressive range of new features in Dreamweaver CS5.5. The contents of this course include:

Introduction to HTML5, CSS3, and jQuery
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.

Using the Right Tools in Dreamweaver CS5.5
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.

Practical 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.

Everyday CSS Selectors
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.

CSS3 Effects Without Images
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 Backgrounds
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.

CSS Media Queries for Phones, Tablets, and Desktops
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.

Advanced CSS Selectors
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.

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

Enhancing Forms with jQuery
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.

The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn and a 48-page guide containing supplemental material.

System Requirements

Broadband internet connection
Up-to-date browser with Flash plug-in
Screen resolution 1024x768 or higher
Sound card with speakers or headphones attached
Pentium 4 2.6 GHz or higher, or Apple Mac G5
512 MB RAM

Ready for iPad, Android, and HTML5

It's easy to watch this course from your Android device, iPad, or iPhone (4 or later). Access videos straight from your browser, or, for Android devices or iPads, use this course in one of our free apps.

Project Files (Downloadable Feature)

Project files are included with this course so you can practice what you learn and work right along with the videos.

Powerful, Feature-Rich Interface

This course features video2brain’s interactive interface. As you navigate the course, rolling over a chapter or video brings up text describing that item.

Full-Screen mode provides a hi-def, immersive experience. And Watch-and-Work mode puts the video into a resizable window that you can shrink so you can watch the lessons on one side of your screen while you’re following along and applying what you’ve learned on the other.

HD Video

This course comes in crisp 1280 x 720 high definition video.

Bookmarks (Downloadable Feature)

Available in the downloadable version of our courses, this feature makes it easy to create a custom bookmark in any lesson to mark where you left off or to make note of something you want to refer back to later. You can even add a name or short note to remind yourself what the bookmark is for.

Test Yourself (Downloadable Feature)

Available in the downloadable versions of our courses, Test Yourself lets you reinforce what you’ve learned with a series of interactive test questions about the topics covered in the course.

Bonus Booklet (Downloadable Feature)

This course is accompanied by a full-color booklet that provides supplemental material to enhance the video training. (Downloadable PDF booklet for on-demand courses, print booklet when purchased at retail.)

No comments yet

Recommended Courses

HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5: Learn by Video

Build Websites for Today and Tomorrow

About this lesson

Welcome to HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5: Learn by Video

System Requirements

Welcome to video2brain!

Other sites. Andere Seiten. Otros sitios. Autres sites.