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