Adobe Dreamweaver Classroom in a Book (2020 release)

Adobe Dreamweaver Classroom in a Book (2020 release)

by Jim Maivald
Released March 2020
Publisher(s): Adobe Press
ISBN: 9780136412243

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Adobe Dreamweaver CC Classroom in a Book (2020 release) is the best-selling guide to Adobe’s powerful web design application, fully updated. The 12 project-based lessons in this book show students step-by-step everything they need to know in order to create a professional website without having to write code by hand. Because it’s often useful to understand the code underlying a web site, the book starts with primers on HTML and CSS (the building blocks of website code) and shows students how to plan a web site. They then learn to design individual web pages, adding styled text, images, and interactive elements to make their designs attractive and engaging. Along the way, the book provides guidance and best practices for working with code, and in the end shows how to publish a finished site to the Web.

The online companion files include all the necessary assets for students to complete the projects featured in each chapter as well as eBook updates when Adobe releases new features for Creative Cloud customers. And all buyers of the book get full access to the Web Edition: a Web-based version of the complete eBook enhanced with video and interactive multiple-choice quizzes.

Table of contents

  1. Cover
  2. Title Page
  3. Copyright Page
  4. Where are the Lesson Files?
  5. Contents
  6. Getting Started
    1. About Classroom in a Book
    2. TinyURLs
    3. Prerequisites
    4. Conventions used in this book
      1. Bolded text
      2. Code font
      3. Strikethrough
      4. Missing punctuation
      5. Element references
    5. Windows vs. macOS instructions
    6. Installing the program
    7. Updating Dreamweaver to the latest version
    8. Online content
      1. Lesson files
      2. Web Edition
      3. Accessing the lesson files and Web Edition
    9. Recommended lesson order
    10. Bonus material
    11. On first launch
    12. Choosing the program color theme
    13. Setting up the workspace
    14. Defining a Dreamweaver site
    15. Checking for updates
    16. Additional resources
      1. Adobe Authorized Training Centers
  7. 1. Customizing your Workspace
    1. Touring the workspace
    2. Using the Start Screen
      1. Quick Start
      2. Starter Templates
      3. Create New and Open
    3. Exploring the New Feature guides
    4. Setting interface preferences
    5. Switching and splitting views
      1. Code view
      2. Design view
      3. Live view
      4. Split view
      5. Live Code mode
      6. Inspect mode
    6. Selecting a workspace layout
      1. Standard workspace
      2. Developer workspace
    7. Working with panels
      1. Minimizing panels
      2. Closing panels and panel groups
      3. Dragging
      4. Floating
      5. Grouping, stacking, and docking
    8. Personalizing Dreamweaver
      1. Saving a custom workspace
    9. Working with toolbars
      1. Document toolbar
      2. Standard toolbar
      3. Common toolbar
    10. Creating custom keyboard shortcuts
    11. Using the Property inspector
      1. Using the HTML tab
      2. Using the CSS tab
      3. Accessing image properties
      4. Accessing table properties
    12. Using the Related Files interface
    13. Using tag selectors
    14. Using the CSS Designer
      1. Sources
      2. @Media
      3. Selectors
      4. Properties
      5. All and Current modes
    15. Using the Visual Media Query (VMQ) interface
    16. Using the DOM Viewer
    17. Using element dialogs, displays, and inspectors
      1. Position Assist dialog
      2. Element Display
      3. Image Display
      4. Text Display
    18. Setting up version control in Dreamweaver
    19. Exploring, experimenting, and learning
    20. Review questions
    21. Review answers
  8. 2. HTML Basics
    1. What is HTML?
    2. Where did HTML begin?
      1. Basic HTML code structure
    3. Frequently used HTML elements
      1. HTML tags
      2. HTML character entities
    4. What’s new in HTML5
      1. HTML5 tags
      2. Semantic web design
      3. New techniques and technology
    5. Review questions
    6. Review answers
  9. 3. Working with Code
    1. Creating HTML code
      1. Writing code manually
      2. Writing code automatically
    2. Working with multicursor support
    3. Commenting your code
    4. Working with CSS preprocessors
      1. Enabling a preprocessor
      2. Creating the CSS source file
      3. Compiling CSS code
      4. Nesting CSS selectors
      5. Importing other style sheets
      6. Learn more about preprocessors
      7. Linting support
    5. Selecting code
      1. Using line numbers
      2. Using tag selectors
      3. Using parent tags
    6. Collapsing code
    7. Expanding code
    8. Accessing Split Code view
    9. Previewing assets in Code view
    10. Review questions
    11. Review answers
  10. 4. CSS Basics
    1. What is CSS?
    2. HTML vs. CSS formatting
    3. HTML defaults
      1. HTML5 defaults?
      2. Browser antics
    4. CSS box model
    5. Applying CSS styling
      1. Cascade theory
      2. Inheritance theory
      3. Descendant theory
      4. Specificity theory
      5. Code Navigator
      6. CSS Designer
    6. Multiples, classes, and ids, oh my!
      1. Applying formatting to multiple elements
      2. Using CSS shorthand
      3. Creating class attributes
      4. Creating id attributes
      5. CSS3 features and effects
      6. CSS3 overview and support
    7. Review questions
    8. Review answers
  11. 5. Web Design Basics
    1. Developing a new website
      1. What is the purpose of the website?
      2. Who is the audience?
      3. How do they get here?
    2. Scenario
    3. Working with thumbnails and wireframes
      1. Creating thumbnails
      2. Creating a page design
      3. Creating wireframes
      4. Designing for mobile devices
      5. The third way
    4. Review questions
    5. Review answers
  12. 6. Creating a Page Layout
    1. Evaluating page design options
    2. Working with predefined layouts
    3. Styling a predefined layout
    4. Styling elements using the Extract panel
    5. Troubleshooting CSS conflicts
    6. Extracting text from a Photoshop mockup
    7. Deleting components and attributes from a template
    8. Inserting new menu items
    9. Creating new elements with the DOM panel
    10. Creating menu items with copy and paste
    11. Extracting text styling
    12. Creating a gradient background using Extract
    13. Extracting image assets from a mockup
    14. Creating new Bootstrap structures
    15. Adding a background image to the header
    16. Finishing up the layout
    17. Review questions
    18. Review answers
  13. 7. Working with Templates
    1. Creating Dreamweaver templates
    2. Removing unneeded components
    3. Modifying a Bootstrap layout
    4. Modifying text formatting in a Bootstrap element
    5. Adding template boilerplate and placeholders
    6. Fixing semantic errors
    7. Inserting metadata
    8. Validating HTML code
    9. Working with editable regions
      1. Image carousel
      2. Card-based section
      3. List-based section
      4. Inserting a new Bootstrap element
      5. Inserting an editable region
      6. Inserting an optional editable region
    10. Working with child pages
      1. Creating a new page
      2. Adding content to child pages
      3. Adding metadata to a child page
    11. Updating a template
      1. Removing an optional region from a child page
      2. Removing unused sections from a child page
    12. Review questions
    13. Review answers
  14. 8. Working with Text, Lists, and Tables
    1. Previewing the completed file
    2. Creating and styling text
      1. Importing text
      2. Duplicating Bootstrap rows
      3. Deleting unused Bootstrap components
    3. Creating lists
    4. Basing content structures on lists
      1. Pasting multiple elements in Live view
      2. Creating new list-based items
    5. Creating and styling tables
      1. Creating tables from scratch
      2. Copying and pasting tables
      3. Styling tables with CSS
      4. Styling table cells
      5. Adding header rows to tables
      6. Controlling table display
      7. Inserting tables from other sources
      8. Creating semantic text structures
      9. Adding and formatting caption elements
    6. Spell-checking webpages
    7. Finding and replacing text
    8. Review questions
    9. Review answers
  15. 9. Working with Images
    1. Web image basics
      1. Vector graphics
      2. Raster graphics
      3. Raster image file formats
    2. Previewing the completed files
    3. Inserting an image
    4. Inserting images in Design view
    5. Optimizing images with the Property inspector
    6. Inserting non-web file types
    7. Working with Photoshop Smart Objects (optional)
    8. Copying and pasting images from Photoshop (optional)
    9. Inserting images using the Asset panel
    10. Adapting images to mobile design
    11. Using the Insert menu
    12. Working with the Insert panel
    13. Inserting images in the site template
    14. Adding CSS classes to template structures
    15. Adding images to a Bootstrap carousel
    16. Styling headings and text in a Bootstrap carousel
    17. Self-paced exercise: Inserting images in child pages
    18. Review questions
    19. Review answers
  16. 10. Working with Navigation
    1. Hyperlink basics
      1. Internal and external hyperlinks
      2. Relative vs. absolute hyperlinks
    2. Previewing the completed files
    3. Creating internal hyperlinks
      1. Creating relative links
      2. Creating a home link
      3. Updating links in child pages
    4. Creating an external link
      1. Creating an absolute link in Live view
    5. Setting up email links
    6. Creating an image-based link
      1. Creating image-based links using the Element Display
      2. Creating text links using the Text Display
    7. Targeting page elements
      1. Creating internal targeted links
    8. Creating a destination link in the Element Display
      1. Targeting id-based link destinations
    9. Locking an element on the screen
    10. Styling a navigation menu
    11. Adding a telephone link
    12. Checking your page
    13. Self-paced exercise: Adding additional links
    14. Review questions
    15. Review answers
  17. 11. Publishing to the Web
    1. Defining a remote site
      1. Setting up a remote FTP site (optional)
    2. Cloaking folders and files
    3. Wrapping things up
      1. Creating a home page
      2. Completing the home page
    4. Putting your site online (optional)
    5. Synchronizing local and remote sites
    6. Review questions
    7. Review answers
  18. Appendix: TinyURLs
  19. Index
  20. Production Notes
  21. 12. Working with Mobile Design
    1. Responsive design
      1. Mobile-first design
      2. Testing responsiveness in Dreamweaver
    2. Media type properties
    3. Media queries
    4. Media query syntax
    5. Working with the Visual Media Query interface
    6. Introducing web frameworks
    7. Setting up web-hosted fonts
      1. Setting the base font
      2. Building font stacks with web-hosted fonts
      3. Specifying font size
    8. Creating custom media queries
      1. Adding rules to a media query
      2. Controlling text styling with media queries
      3. Changing component visibility with media queries
    9. Controlling Bootstrap element alignment
    10. Revising Bootstrap template structure
    11. Adapting content to mobile design
      1. Checking pages for design conflicts
      2. Making tables responsive
    12. Previewing pages using Real-Time Preview
    13. Fixing issues for mobile design and desktop
    14. Review questions
    15. Review answers
  22. 13. Working with Web Animation and Video Bonus
    1. Understanding web animation and video
    2. Previewing the completed file
    3. Adding web animation to a page
    4. Making the animation responsive
      1. Applying image dimensions
      2. Adding a video poster
      3. Setting HTML5 video options
      4. Making the video responsive
    5. Don’t host your own videos
    6. Review questions
    7. Review answers

Product information

  • Title: Adobe Dreamweaver Classroom in a Book (2020 release)
  • Author(s): Jim Maivald
  • Release date: March 2020
  • Publisher(s): Adobe Press
  • ISBN: 9780136412243