Adobe Dreamweaver CC web design software provides an intuitive visual interface for making and editing HTML websites and mobile apps. This course will provide web designers with the knowledge and hands-on practice they need to build and manage professional websites.
Who Should Attend
This course is for people new to web design and development and want to use Dreamweaver CC to build intuitive, attractive and accessible websites.
Prerequisites
- Practical working knowledge of Mac OS X or Windows
- Students should have a working knowledge of HTML, CSS, or Javascript.
Course Outline
Note: The curricula below comprise activities typically covered in a class at this skill level. The instructor may, at his/her discretion, adjust the lesson plan to meet the needs of the class.
Lesson 1: Customizing Your Workspace
- Using the Start Screen
- Exploring New Feature guides
- Working with toolbars
- Switching and splitting views
- Selecting a workspace layout
- Working with panels
- Personalizing Dreamweaver
- Working with Extract
- Creating custom keyboard shortcuts
- Using the Property inspector
- Using the Related Files interface
- Using tag selectors
- Using the CSS Designer
- Using the Visual Media Query interface
- Using the DOM Viewer
- Using the heads-up displays
- Exploring, experimenting, and learning
Lesson 2: HTML Basics
- What is HTML?
- Where did HTML begin?
- Frequently used HTML 4 codes
- Introducing HTML5
Lesson 3: CSS Basics
- What is CSS?
- HTML vs. CSS formatting
- HTML defaults
- CSS box model
- Applying CSS styling
- Multiples, classes, and ids, on my!
Lesson 4: Web Design Basics
- Developing a new website
- Scenario
- Working with thumbnails and wireframes
Lesson 5: Creating a Page Layout
- Evaluating page design options
- Working with predefined layouts
Lesson 6: Working with a Web Framework
- Creating a navigation menu
- Creating header content
- Building semantic content
- Managing Bootstrap component width
- Inserting HTML entities
- Creating global type styles
Lesson 7: Design for Mobile Devices
- Responsive design
- Adapting the site to different screen sizes
- Working with media queries
- More information on media queries
Lesson 8: Working with Templates
- Creating a template from an existing layout
- Inserting editable regions
- Inserting metadata
- Producing child pages
Lesson 9: Working with Text, Lists, and Tables
- Previewing the completed file
- Creating and styling text
- Creating lists
- Creating and styling tables
- Copying and pasting tables
- Spell-checking webpages
- Finding and replacing text
- Optional self-paced exercise
Lesson 10: Working with Images
- Web image basics
- Previewing the completed file
- Inserting an image
- Adjusting image positions with CSS classes
- Working with the Insert panel
- Using the Insert menu
- Inserting non-web file types
- Working with Photoshop Smart Objects ( optional)
- Copying and pasting images from Photoshop ( optional)
- Inserting images by drag and drop
- Optimizing images with the Property inspector
Lesson 11: Working with Navigation
- Hyperlink basics
- Previewing the completed file
- Creating internal hyperlinks
- Creating an external link
- Setting up email links
- Creating an image-based link
- Targeting page elements
- Checking your page
- Adding destination links to the same page ( optional)
Lesson 12: Adding Interactivity
- Learning about Dreamweaver behaviors
- Previewing the completed file
- Working with Dreamweaver behaviors
- Working with Bootstrap Accordion widgets
Lesson 13: Publishing to the Web
- Defining a remote site
- Cloaking folders and files
- Wrapping things up
- Putting your site online (optional)
- Synchronizing local and remote sites
Lesson 14: Working with Code
- Creating HTML code
- Working with multi-cursor support
- Commenting your code
- Working with CSS preprocessors
- Selecting code
- Collapsing code
- Expanding code
- Accessing split Code view
- Previewing assets in Code view
- Appendix TinyURLs
Lesson 15: Working with Web Animation and Video
- Understanding web animation and video
- Previewing the completed file
- Adding web animation to a page
- Adding web video to a page
- Don’t host your own videos