You are previewing Dreamweaver CC Digital Classroom.
O'Reilly logo
Dreamweaver CC Digital Classroom

Book Description

Learn Adobe Dreamweaver CC with this full-color book and DVD training package

You may be eager to learn how to use Adobe Dreamweaver CC (Creative Cloud) to create great websites, but you'd like to tackle it at your own speed. If so, this book-and-DVD learning combo is perfect for you. More than 16 lessons, each including step-by-step instructions and lesson files backed by video tutorials, guide you smoothly through website design to implementation to maintenance, helping you build solid skills at your own pace. It's like having your own personal Dreamweaver instructor at your side.

  • Combines a full-color, step-by-step instructional print book along with lesson files and video training on DVD, to teach readers how to use Adobe Dreamweaver CC

  • Provides thorough training from a team of expert instructors from American Graphics Institute (AGI)

  • Covers essential topics such as applying style sheets, using dynamic HTML, adding style with images and multimedia, publishing and maintaining websites, using hyperlinks to navigate, and using databases to create dynamic websites

  • You'll be building websites, formatting web pages, and creating forms in no time with Adobe Dreamweaver CC Digital Classroom.

    Note: DVD and other supplementary materials are not included as part of the e-book file, but are available for download after purchase

    Table of Contents

    1. Contents
    2. Starting up
      1. About Dreamweaver Digital Classroom
      2. Prerequisites
        1. System requirements
      3. Starting Adobe Dreamweaver
        1. Windows
        2. Windows 8
        3. Mac OS
      4. Access lesson files & videos any time
      5. Resetting the Dreamweaver workspace
      6. Loading lesson files
      7. Hosting your websites
      8. Additional resources
        1. Additional Adobe Creative Cloud Books
        2. On-demand video training from the authors
        3. Training from the Authors
        4. Seminars and conferences
        5. Resources for educators
    3. Lesson 1: Dreamweaver CC Jumpstart
      1. Starting up
      2. What is Dreamweaver?
        1. Design and layout tools
        2. Site management and File Transfer Protocol
        3. Coding environment and text editor
        4. Mobile design and development features
        5. Who uses Dreamweaver?
      3. Dreamweaver’s workspace features
      4. Live View and Live Code
        1. CSS Inspection and the Enable/Disable feature
      5. Related files
      6. Code Navigator
      7. Photoshop smart objects
      8. Support for Content Management Systems
      9. HTML5, CSS3, and PHP code hinting
      10. HTML and CSS Starter Pages
      11. Subversion
      12. Business Catalyst integration
      13. How websites work
        1. A simple flow chart
        2. Domain names and IP addresses
        3. Servers and web hosts
        4. The role of web browsers
      14. An introduction to HTML
        1. Tag structure and attributes
        2. The structure of an HTML document
        3. Placing images in HTML
        4. Colors in HTML
        5. Case sensitivity and whitespace rules
        6. Element hierarchy
        7. HTML5
        8. Explorations in code
      15. A look at the Welcome Screen
      16. Creating, opening, and saving documents
        1. Creating new documents
      17. Self study
      18. Review
        1. Answers
    4. Lesson 2: Setting Up a New Site
      1. Starting up
      2. Creating a new site
        1. Advanced site-creation options
      3. Adding pages
        1. Saving a page to your site
      4. Defining page properties
      5. Work views
      6. A deeper look into the Files panel
        1. Viewing local files
        2. Selecting and editing files
      7. Self study
      8. Review
        1. Answers
    5. Lesson 3: Adding Text and Images
      1. Starting up
      2. Typography and images on the Web
      3. Adding text
      4. An introduction to styles
      5. Previewing pages in a web browser
      6. Understanding hyperlinks
      7. Creating hyperlinks
        1. Relative versus absolute hyperlinks
        2. Linking to an e-mail address
      8. Creating lists
      9. Using the Text Insert panel
      10. Inserting images
        1. Image resolution
        2. Image formats
        3. Creating a simple gallery page
      11. Linking images
      12. Editing images
        1. Adjusting brightness and contrast
        2. Optimizing images
        3. Updating images
      13. Self study
      14. Review
        1. Answers
    6. Lesson 4: Styling Your Pages with CSS
      1. Starting up
      2. What are Cascading Style Sheets?
        1. CSS replaces inefficient HTML styling
        2. The benefits of CSS styling
        3. How do you create CSS rules in Dreamweaver?
        4. Understanding Style Sheets
        5. Understanding why they’re called Cascading
      3. Creating and modifying styles
        1. Creating a class style with the CSS Designer panel
        2. Creating and modifying styles
        3. Advanced text formatting with CSS
        4. Fine-tuning page appearance with contextual and pseudo-class selectors
      4. Div tags and CSS IDs
        1. Internal versus external style sheets
        2. Attaching an external style sheet to your page
        3. Modifying attached style sheets
        4. Creating a new .css file (external style sheet)
      5. Self study
      6. Review
        1. Answers
    7. Lesson 5: Creating Page Layouts with CSS
      1. Starting up
      2. The CSS Box model
        1. The basics of CSS margins, padding, and borders
        2. Reviewing the <div> element
        3. Reviewing the ID selector
      3. Creating a centered container for your page
        1. Absolute versus relative positioning
      4. Creating a header using a relative positioned div
      5. Positioning content with absolute-positioned divs
        1. Adding an introduction section to your page
        2. Adding images to your layout
        3. Photoshop integration
        4. Adding Main and Sidebar content areas
        5. Adding additional content and styles
      6. Setting margins and borders
        1. Overriding default margins in CSS
        2. Adding borders to elements
        3. Future proofing your layout
      7. The pros and cons of Absolutely Positioned CSS layouts
      8. Self study
      9. Review
        1. Answers
    8. Lesson 6: Advanced Page Layout
      1. Starting up
      2. Layout with absolute-position divs versus layout with floats
        1. Creating a floated image
      3. Creating columns with HTML and CSS
        1. Creating the structure with divs and HTML5 semantic elements
        2. Setting the width and floating the columns
        3. Using the clear property
      4. Creating a list-based CSS navigation bar
      5. Changing column layout and size
      6. Creating the appearance of equal height columns
      7. Applying finishing touches
      8. Creating more sophisticated layouts
      9. Dreamweaver Fluid Grid Layout
      10. Self study
      11. Review
        1. Answers
    9. CSS3 Transitions and Styles
      1. Starting up
      2. Understanding the role of CSS3
      3. Adding a CSS Transition
      4. Modifying a CSS Transition
      5. Adding CSS Transitions to a navigation menu
      6. Adding a CSS Gradient
      7. Applying a CSS Gradient to the page background
      8. Creating rounded borders
      9. Self study
      10. Review
        1. Answers
    10. Lesson 8: Using Web Fonts
      1. Starting up
      2. The basics of web fonts
      3. Web Fonts in Dreamweaver CC
      4. Using Adobe Edge Web Fonts
      5. Creating a custom font stack using web fonts
      6. Styling your content with Adobe Edge Web Fonts
      7. Adding local web fonts with @font-face
      8. Styling your heading with a local web font
      9. Self study
      10. Review
        1. Answers
    11. Lesson 9: Working with Tables
      1. Starting up
      2. Using tables in web design
      3. Importing table data
      4. Selecting table elements
      5. Modifying table size
      6. Modifying table structure
      7. Creating a table
      8. Formatting and styling tables in HTML
      9. Formatting and styling tables with CSS
      10. Advanced CSS styling of tables
      11. Controlling cell alignment, padding, and borders with CSS
      12. Creating alternate row styling with CSS
      13. Reusing CSS for other tables
      14. Data sorting tables
      15. Self study
      16. Review
        1. Answers
    12. Lesson 10: Fine-Tuning Your Workflow
      1. Starting up
      2. Customizing panels and panel groups
      3. Using the Favorites tab on the Insert bar
      4. Resizing the document window
      5. Using guides
      6. Using grids
      7. The tag selector
      8. Tiling documents
      9. Self study
      10. Review
        1. Answers
    13. Lesson 11: Adding Video, Audio and Interactivity
      1. Starting up
      2. Making web content interesting
      3. Adding video
        1. HTML5 video
        2. Flash video
        3. QuickTime and Windows Media
      4. Inserting Flash animations
      5. Inserting Edge Animate animations
      6. Inserting sound with the HTML5 audio element
      7. Self study
      8. Review
        1. Answers
    14. Lesson 12: Maximizing Site Design
      1. Starting up
      2. Creating modular page elements
      3. Introducing snippets
        1. The Snippets panel
        2. Creating new snippets
      4. Introducing library items
        1. Modifying and updating library items
      5. Introducing templates
        1. Creating a new template
        2. Working with editable regions
        3. Creating new pages from templates
      6. Modifying templates
      7. Repeating regions
        1. Putting repeating regions into action
        2. Detach from Template command
      8. Self study
      9. Review
        1. Answers
    15. Lesson 13: Working with Code-editing Features
      1. Starting up
      2. Working with code
        1. Accessing code with the Quick Tag editor
      3. Using HTML5 code-hinting
      4. Working in the Code view
        1. Modifying the Code view workspace
        2. The Coding toolbar
        3. Collapsing and expanding tags and code blocks
      5. Validating your code
        1. Highlighting and correcting invalid code
        2. Running a report
      6. Formatting code
        1. Indenting
      7. Self study
      8. Review
        1. Answers
    16. Lesson 14: Building HTML5 Web Forms
      1. Starting up
      2. The basics of HTML5 forms
        1. How forms work
      3. Building a contact form
        1. Inserting the <form> tag
        2. Setting form properties
      4. Adding form elements
        1. Adding text fields
        2. Adding a new HTML5 text field
        3. Adding check boxes
        4. Adding radio buttons
        5. Adding radio groups
        6. Adding lists and menus
        7. Adding a Text Area
        8. Adding a File Upload field
        9. Creating Submit and Reset buttons
      5. Styling forms with CSS
        1. Attaching external styles
        2. Setting a background color
        3. Styling form elements
      6. Form processing and validation
      7. HTML5 validation
      8. The Validate Form behavior
        1. A look at the Behaviors panel
        2. Setting an event or trigger
      9. Validating form fields
        1. Changing a form field’s behavior order
        2. Verifying field contents
      10. Self study
      11. Review
        1. Answers
    17. Lesson 15: Adding Interactivity with the jQuery UI Library
      1. Starting up
      2. Introducing the jQuery UI Widgets
        1. The jQuery UI Library
      3. A look at the project
      4. The jQuery Tabbed panel
      5. Styling jQuery UI widgets with CSS
      6. The jQuery UI Accordion panel
      7. Create a single collapsible panel
      8. Self study
      9. Review
        1. Answers
    18. Lesson 16: Responsive Design and Layout for Mobile Devices
      1. Starting up
      2. The rise of the mobile web
        1. Dreamweaver tools for mobile layout
        2. Mobile website features in Dreamweaver
        3. Previewing your web page using window sizes
        4. Media Queries defined
        5. Creating media queries
        6. Creating a layout optimized for mobile
        7. Creating styles for navigation and a single-column layout
        8. The basics of Fluid Grid Layout
        9. Creating your mobile layout
        10. Creating a tablet layout
        11. Creating a three-column fluid layout for the desktop
        12. Styling elements in your fluid grid layout
      3. Self study
      4. Review
        1. Answers
    19. Lesson 17: Managing your Website: Reports, Optimization, and Maintenance
      1. Starting up
      2. Working with the Files panel
        1. Creating a remote connection
        2. Viewing files on a remote web server
        3. Transferring files to and from a remote server with Get and Put
      3. Using Check In/Check Out and Design Notes
        1. Check In and Check Out
        2. Checking files in and out
        3. Using Design Notes
        4. Sharing Design Notes
        5. Displaying Design Notes in the Files panel
      4. Testing site integrity
        1. Checking links sitewide
      5. Generating site reports
        1. Understanding report results
        2. Addressing a listed item
      6. Optimizing pages for launch
        1. Search engine visibility and Search Engine Optimization
        2. Titling your documents with the <title> tag
        3. Adding meta keywords and descriptions
      7. Launching your site
        1. Site launch checklist
        2. Uploading your site
      8. Getting help
        1. Suggested next steps
        2. Website design resources
      9. Self study
      10. Review
        1. Answers
    20. Lesson 18: Dreamweaver CC New Features
      1. Starting up
      2. What’s new in Dreamweaver CC?
        1. CSS Designer panel
        2. CSS3 transitions and styles
        3. jQuery UI widgets
      3. Additional new features in Dreamweaver CC
        1. Adobe Edge Web Fonts
        2. Faster HTML5 elements insertion
        3. Streamlined HTML5 audio and video
        4. Edge Animate composition support
        5. Additional features
    21. About the Authors
    22. Acknowledgments
      1. Adobe® Dreamweaver® CC Digital Classroom®
    23. Credits