Customer Service 1-800-221-5528

Murach’s Dreamweaver CC 2014

by Zak Ruvalcaba
17 chapters, 610 pages, 253 illustrations
Published August 2014
ISBN 978-1-890774-77-6
List price: $54.50

This book presents a complete course in using Dreamweaver CC 2014 to build modern, standards-compliant, and accessible websites. It starts with a crash course that gets your students going, whether or not they already know how to use HTML and CSS. It always shows how to use Dreamweaver to build websites the right way, with external style sheets and HTML5 semantics. It presents all the Dreamweaver skills that a professional web developer should have. And it can be used alone or in combination with our HTML5 and CSS3 book for a variety of web design and development courses.

Buy This Book

You are currently on the Murach site for instructors. To buy this book, please visit our retail site.

Unlike the 'quick and dirty' guides that promise near-instant competency with quick routines and guidelines, Murach's really takes the time to explore its subject well, providing web designers with not just a hasty overview, but a lesson plan incorporating all the skills needed to master all of Dreamweaver's many tools and functions, whether they be beginning or advanced."

D. Donovan, eBook Reviewer, MBR

  • About this Book
  • Table of Contents
  • Courseware
  • FAQs
  • Corrections

Book description

Section 1: Get your students started right

Section 1 presents a crash course in Dreamweaver that has your students developing web pages at a professional level after just six chapters. These chapters don’t just show how to use Dreamweaver to build web pages. They also show how to use Dreamweaver so it generates the HTML and CSS for a page in a way that is consistent with the best practices of modern website development. That includes the use of HTML5 semantics, external style sheets, and CSS3.

When your students finish the first 6 chapters, they will have the perspective and skills they need for developing professional web pages in Dreamweaver. Then, you can add to those skills by assigning any of the chapters in the next two sections...and these sections and chapters don’t have to be read in sequence. The one exception is that you should assign chapter 7 before chapter 8 since they are closely related.

Section 2: Complete a professional Dreamweaver skillset

The seven chapters in section 2 let your students gain the skills that every professional Dreamweaver developer should have. That includes:

  • How to use media queries to implement Responsive Web Design so your web pages work right in desktop browsers as well as in mobile devices
  • How to implement Responsive Web Design by using Dreamweaver’s Fluid Grid Layout feature
  • How to use templates and library items to save time and build consistent web pages
  • How to add tables to your web pages
  • How to add audio or video to a page by using HTML5 elements instead of plug-ins
  • How to use the Dreamweaver features that can help you work more productively
  • How to deploy an application to a web server

Section 3: Create interactive and mobile web pages

The four chapters in this section show your students how to use the Dreamweaver features for creating interactive and mobile web pages. That includes:

  • How to add a form to a web page that submits user entries to a web server for processing
  • How to use Dreamweaver to add JavaScript features like image galleries to a web page...without knowing how to code JavaScript
  • How to use Dreamweaver to add jQuery and jQuery UI features like accordions and tabs to a web page...without knowing how to use jQuery or jQuery UI
  • How to use jQuery Mobile to build mobile websites, which in some cases is a practical alternative to Responsive Web Design

Book features

Like all of our books, this one has our standard features that you won’t find in competing books. Here, though, are features that are specific to this book.

  • From the first page to the last, this book shows your students how to use the best HTML and CSS practices, even though they’re using Dreamweaver to generate the HTML and CSS. That way, they’ll be developing web pages at a professional level from the start. In contrast, most competing books focus on the Dreamweaver visual interface without worrying about the code that it generates.
  • Chapter 2 presents the least any Dreamweaver user should know about HTML and CSS. That’s because you can’t be an effective Dreamweaver user without understanding the HTML and CSS that Dreamweaver generates. In particular, this chapter presents the proper use of HTML5 semantics and external style sheets...essential web development skills that are treated too late or too lightly in most Dreamweaver books. Because this chapter is available, you can use this book for a first course in web design or web development.
  • Like all our books, all of the information in this book is presented in “paired pages,” with the essential syntax, guidelines, and examples on the right page and the perspective and extra explanation on the left page. This helps your students learn faster by reading less...and this is the ideal reference format for a complicated IDE like Dreamweaver.
  • The exercises at the end of each chapter guide your students through the development of web pages using the skills that have been presented in the chapter. Because Dreamweaver has a complicated visual interface that is hard to master, these exercises are an essential part of the learning process.

What makes these exercises so effective is that they never introduce skills that haven’t already been presented in the text. In contrast, most Dreamweaver books try to teach new skills by stepping the readers through them...even though that’s a frustrating, tedious, and ineffective way to learn. But our exercises never rely on “click here, click there” because that’s not the kind of practice your students need to get ready for their own projects. Instead, our exercises build your students’ perspective, their skills, and their confidence.

What courses this book can be used for

Dreamweaver with no prerequisites

This book can of course be used as the sole textbook for a Dreamweaver course that has no prerequisites. That’s because chapter 2 presents the HTML and CSS skills that Dreamweaver users need.

Dreamweaver with HTML and CSS as prerequisites

If your students already know how to use HTML and CSS, they will of course be able to get up-to-speed with Dreamweaver more quickly than if they don’t. That means that you can probably assign all of the chapters in our Dreamweaver book in a single course. For a course like that, you can use chapter 2 to review the HTML5 and CSS essentials that every Dreamweaver developer should know.

Web design with HTML5 and CSS3

If you want to teach a web design course that is, in essence, an HTML and CSS course, Dreamweaver can be used as the IDE for the course. In that case, our Dreamweaver book can be used as a supplement to an HTML and CSS book like Murach’s HTML5 and CSS3. In fact, our HTML5 book and our Dreamweaver book have comparable structures that are designed to work well together.

Web design with HTML5, CSS3, and JavaScript

Because Murach’s HTML5 and CSS3 and Murach’s Dreamweaver both include a section on the use of JavaScript, jQuery, jQuery UI, and jQuery Mobile, you can also combine these books for a web design course that includes JavaScript.

What software your students need

Dreamweaver CC 2014

Because this book teaches Dreamweaver CC 2014, that’s the version that you should have in your computer lab. Your students should also be able to get this version for their personal computers at a student’s rate from the Adobe website.

At least two web browsers

To run and test web applications, your students should use at least two browsers:

  • Their default browser: Internet Explorer (on a Windows system) or Safari (on a Mac system)
  • Chrome, Firefox, or Opera

Since Internet Explorer and Safari are installed automatically, your students won’t have to install either of those browsers on their personal systems. And the appendix in this book shows how to download and install the other browsers.

Presentation options

Remember that this book is modular. That means that you can teach the chapters in sections 2 and 3 in whatever sequence you prefer after your students complete section 1. Also remember that you don’t have to assign all of these chapters. Instead, you can select just those chapters that meet your course objectives. Often, the most effective teaching sequence is the one that best reflects the interests of your students, and this book enables you to structure your course that way.

Companion books for web design courses

If you offer a two- or three-term web design course, you might want to consider combining our Dreamweaver book with Murach’s HTML5 and CSS3 (4th Edition) plus Murach’s JavaScript and jQuery (3rd Edition). You may also want to combine our books with a more traditional web design book, using our books to teach your students the practical Dreamweaver, HTML5, CSS3, JavaScript, and jQuery skills that they will need on the job. Our books are designed to work together, and they all use the same educational approach, making it easy for your students to transition from one to another.

View the table of contents for this book in a PDF: Table of Contents (PDF)

Click on any chapter title to display or hide its content.

Section 1 A crash course in Dreamweaver

Chapter 1 An introduction to web development with Dreamweaver

How web applications work

The components of a web application

How static web pages are processed

How dynamic web pages are processed

A survey of web browsers and server-side scripting languages

How JavaScript and jQuery fit into web development

Web development and Dreamweaver CC

A tour of the Dreamweaver interface

How to use the Welcome screen

How to create a Dreamweaver site

How to work with the Document window in Design view

How to work with the Document window in Code view

How to work with the Document window in Live view

How to use the Files panel

How to preview a web page

How to get help

How to change the workspace and set preferences

How to use a predefined workspace layout

How to work with panels

How to set preferences

Chapter 2 An introduction to HTML5 and CSS3

How web pages developed with Dreamweaver work

A web page developed with Dreamweaver

The HTML for the web page

The CSS for the web page

The HTML skills that you need

The basic structure of an HTML document

How to code HTML elements

How to use the div and span elements

How to use the HTML5 semantic elements

The CSS skills that you need

Three ways to provide CSS styles for a web page

How to code CSS rule sets and comments

How to code selectors for elements, ids, and classes

How to code descendant, pseudo-class, and combination selectors

How to provide for cross-browser compatibility

How to make HTML5 pages work with older browsers

How to use the normalize.css style sheet

Chapter 3 How to build a website with Dreamweaver

How to create a site and add a web page

How to create a Dreamweaver site

How to create a new web page

How to define the basic appearance of a web page

How to add content to a web page

How to work with HTML in Dreamweaver

How to use the Property Inspector to work with HTML

How to use the Insert panel to work with HTML

How to use the Insert panel to add structural elements

How to work with CSS in Dreamweaver

How to use the CSS Designer to create style rules and styles

How to use the CSS Designer to modify, add, and delete styles

How to use the Property Inspector to display and modify styles

How to use Element Live Display to work with classes and IDs

How to work with external style sheets

How to create an external style sheet

How to move style rules and copy styles

How to attach an external style sheet to a web page

How to create a style sheet for printing

Other skills for working with Dreamweaver sites

How to validate a web page

How to set browser preferences

How to delete, edit, and duplicate sites

Chapter 4 How to work with text, images, and links

How to work with text

How to add text to a web page

How to edit the text in a web page

How to insert special characters

How to use the Property Inspector to work with text

How to check the spelling in a web page

How to work with images

Types of images for the Web

How to insert images

How to use the Property Inspector to work with images

How to use the Quick Property Inspector to work with images

How to optimize images

How to work with hyperlinks

How to create text links

How to create image links

How to create email, phone, and Skype links

How to create and link to placeholders

How to check and change links site wide

Chapter 5 How to use CSS to format text

How to specify measurements and colors

How to specify measurements

How to specify colors

How to work with text

How to set the font family

How to set other properties for styling fonts

How to indent and align text

How to transform and decorate text

How to add shadows to text

A web page with formatted text

The page layout for the web page

The HTML for the web page

The CSS for the web page

How to manage web fonts

How to work with Adobe Edge Web Fonts

How to work with local web fonts

How to work with custom font stacks

Chapter 6 How to use CSS for page layout, borders, and backgrounds

How to size and space elements

An introduction to the box model

How to set heights and widths

How to set margins

How to set padding

A web page that illustrates sizing and spacing

How to set borders and backgrounds

How to set borders

How to add rounded corners and shadows

How to set background colors and images

How to set background gradients

A web page that uses borders and backgrounds

How to format lists

The properties for formatting lists

Examples of unordered and ordered lists

How to use an unordered list to create a navigation menu

How to create a multi-tier navigation menu

How to float elements

The properties for floating and clearing elements

How to use floating in a 2-column layout

How to use floating in a 3-column layout

How to position elements

Four ways to position an element

How to use absolute positioning

How to use fixed positioning

Section 2 More Dreamweaver skills as you need them

Chapter 7 How to use media queries to create a responsive design

An introduction to Responsive Web Design

How to provide pages for mobile devices

The need for Responsive Web Design

How to plan a responsive design

How to use CSS3 media queries

How to control the mobile viewport

An introduction to media queries

How to create media queries in the CSS Designer

How to display a page at different screen sizes

A web page that uses Responsive Web Design

The web page in a desktop browser

How to style the media query for a tablet in portrait orientation

How to style the media query for a smart phone in landscape orientation

How to style the media query for a smart phone in portrait orientation

How to use third-party tools for responsive designs

How to use Responsive Menu to create a drop-down menu

How to use ProtoFluid to test a responsive design

Chapter 8 How to work with fluid layouts

An introduction to fluid layouts

Fluid layouts vs. fixed layouts

How to create a website that uses a fluid layout

How the style sheet for a fluid layout works

How to implement a mobile layout

How to use the visual aids for working with a fluid layout

How to add and work with fluid elements

How to add and format content

How to create a fluid navigation menu

How to implement a tablet or desktop layout

How to create a multi-column layout

How to format tablet and desktop layouts

How to modify a fluid navigation menu for tablet and desktop layouts

Chapter 9 How to use templates and library items

Basic skills for creating and using templates

An introduction to templates

How to create a template

How to add editable regions to a template

How to base a web page on a template

How to apply a template to an existing web page

How to update a site with changes made to a template

More skills for working with templates

How to create and use optional regions

How to create and use repeating regions and repeating tables

How to create and use editable tag attributes

How to create and use nested templates

How to use the Assets panel to work with templates

Other template features you should know about

How to create and use library items

How to create a library item

How to use the Assets panel to work with library items

How to use library items with templates

Chapter 10 How to add audio, video, and animations to a website

An introduction to media on the web

Common media types for video and audio

Video codecs

Audio codecs

Audio and video support in current browsers

How to encode media

How to add audio and video

How to add HTML5 audio

How to add HTML5 video

How to add Flash video

How to add other types of media

A web page that offers both audio and video

How to add animations and Canvas drawings

How to add Flash animations

How to add Edge Animate compositions

How to add an HTML5 Canvas drawing

A web page with a Flash animation and an Edge Animate composition

Chapter 11 How to work with tables

Basic skills for working with tables

An introduction to tables

How to insert a table

How to select tables, columns, rows, and cells

How to use the Property Inspector to work with tables

How to use the Property Inspector to work with table cells

How to insert and delete rows and columns

How to merge and split cells

Other skills for working with tables

How to import tabular data

How to sort a table

Chapter 12 How to work more efficiently in Dreamweaver

How to use snippets

How to use the Snippets panel to work with Snippets

How to create custom snippets

How to use the Assets panel

How the Assets panel works

How to create and work with favorites

How to use the find and replace feature

How the find and replace feature works

How to use the Search panel

How to use the advanced options for finding text

How to find and replace specific tags

How to work with commands

A summary of the built-in commands

How to use the History panel

How to create and work with custom commands

Other skills for improving your efficiency

How to use Element Quick View

How to create and manage custom layouts

How to set keyboard shortcuts

Chapter 13 How to deploy a website and collaborate with a team

How to get a web host and domain name

How to find a web host

How to get a domain name

How to transfer files to and from your web host

How to define a remote server

How to upload and download files

How to use the expanded Files panel

How to synchronize a website

How to use the Check In/Check Out feature

How to configure the Check In/Check Out feature

How to check in files

How to check out files

How to export, import, and duplicate a site

How to export a site

How to import a site

How to duplicate a site

How to work with design notes

How to create a design note

How to customize a design note

How to display design note values in the Files panel

Three more skills for deploying a website

How to test a website that has been uploaded to the web server

How to get your website into search engines and directories

How to control which pages are indexed and visited

Section 3 How to create interactive and mobile web pages

Chapter 14 How to work with forms

How to use forms and controls

How to create a form

How to use text fields

How to use buttons

How to use radio buttons and check boxes

How to use radio button and check box groups

How to use drop-down lists and list boxes

How to use text areas

How to use labels

How to use fieldsets to visually group controls

How to use file-upload fields

A web page with a form that uses the classic HTML controls

Other skills for working with forms

How to align controls

How to format controls

How to set the tab order and assign access keys

How to use the HTML5 properties and CSS3 selectors for data validation

How to use regular expressions for data validation

How to use the HTML5 controls

How to use the Email, Url, and Tel controls

How to use the Number and Range controls

How to use the date and time controls

How to use the Search control for a search function

How to use the Color control

A web page with a form that uses HTML5 controls and data validation

Chapter 15 How to use Dreamweaver behaviors and CSS transitions

An introduction to JavaScript and behaviors

How JavaScript works

How to use behaviors

How to change the event that triggers a behavior

A summary of the Dreamweaver behaviors

How to use the most common behaviors

How to use the Popup Message behavior

How to use the Swap Image behavior

How to use the Show-Hide Elements behavior

How to use the Go To URL behavior

How to use the Open Browser Window behavior

How to use the Jump Menu and Jump Menu Go behaviors

How to use the Change Property behavior

How to use the Set Text behaviors

How to use the Validate Form behavior

How to use the Check Plugin behavior

An introduction to CSS3 transitions

How transitions work

How to create a transition in Dreamweaver

Chapter 16 How to use jQuery and jQuery UI

An introduction to jQuery and jQuery UI

What jQuery and jQuery UI are

How Dreamweaver implements jQuery and jQuery UI

How to use the jQuery UI widgets

How to use any widget

How to use the Accordion widget

How to use the Tabs widget

How to use the Datepicker widget

How to use the Button and Dialog widgets

How to use the Autocomplete widget

A web page that uses jQuery UI widgets

An introduction to the jQuery UI effects

How to use any effect

How to set the options for an effect

An introduction to jQuery plugins

How to use any plugin

The code for a sample plugin

Chapter 17 How to use jQuery mobile

An introduction to jQuery Mobile

How to redirect a user to a mobile website

What jQuery Mobile is

How Dreamweaver implements jQuery Mobile

How to create one web page with jQuery Mobile

How to use jQuery Mobile to create a mobile website

How to create multiple web pages in a single HTML file

How to use dialog boxes and transitions

How to create buttons

How to create a navigation bar

How to format content with jQuery Mobile

The default styles that jQuery Mobile uses

How to use swatches to apply themes

How to use jQuery Mobile for page layout

How to lay out your content in two columns

How to create an accordion

How to create collapsible content blocks

How to create a contents list

A mobile website that uses jQuery Mobile

Resources

Appendix A How to set up your computer for this book

How to install the Creative Cloud and Dreamweaver CC

On a Windows system

On a Mac OS X system

How to install Chrome

How to install and use the source code for this book

On a Windows system

On a Mac OS X system

 

If you aren’t already familiar with the supporting courseware that we provide for a book, please go to About our Courseware. As you will see, our courseware consists of the end-of-chapter activities in the book, the files in the student download at our retail site, and the instructor’s materials. These components provide everything that other publishers provide in a way that delivers better results.

If you are familiar with our courseware, here’s a quick summary of the courseware for this book. For a detailed description in PDF format, please read the Instructor’s Summary.

End-of-chapter activities in the book

  • Term lists
  • Chapter summaries
  • Practice exercises

Student download at our retail site

  • The folders and files for all of the examples in the book
  • The starting folders and files for the exercises in the book
  • The folders and files for the solutions to the book exercises

Appendix A in the book gives your students complete instructions for downloading and installing these items on their PC or Mac.

Instructor’s materials

  • Instructional objectives by chapter
  • PowerPoint slides for classroom presentations
  • Test banks in multiple formats
  • Additional chapter exercises that aren’t in the book, plus their solutions
  • Short exercises that aren’t in the book that can be used for added practice, quizzes, or tests, plus their solutions
  • Generic projects that offer minimal guidance as they have your students develop small websites using their own content (as a result, we don't provide solutions to these projects)
  • The files that students can download at our retail site: (1) the book examples, (2) starting points for the exercises in the book, and (3) solutions to the exercises in the book

 

On this page, we’ll be posting answers to the questions that come up most often about this book. So if you have any questions that you haven’t found answered here at our site, please email us. Thanks!

The 2014.1 and 2015 releases of Dreamweaver CC

In October 2014, a new release of Dreamweaver CC became available. In July of 2015, they released Dreamweaver CC 2015. To find out how these releases affect the material presented in our book, please view this PDF:
What's changed in Dreamweaver CC

To view the corrections for this book in a PDF, just click on this link: View the corrections

Then, if you find any other errors, please email us so we can correct them in the next printing of the book. Thank you!

Murach college books and courseware since 1974