Course Features:
Live Instructor Teaching
Certificate of Completion
Digital Badge
Courseware: Print
Free 6 Month Online Retake
Hands-On Learning?: Yes
Software Lab Included?: Yes
Delivery Methods:
Individuals and Groups
@ Your Location
Group Teams
@ Your Organization
This is an instructor-led course. It is taught by an instructor
live online or at organizations for groups.
For
team training, we can teach onsite at your office or private live online.
Course Overview
This 3-day course teaches key techniques for working in Dreamweaver while editing and creating HTML and Cascading Style Sheets (CSS). Learn how to create web pages for the modern web; use and customize popular web frameworks to build web pages for a wide variety of desktop computers and mobile devices with a minimum of hand coding; incorporate graphics and text; add links to text and images; add interactive elements to your pages, such as HTML5-compatible interactivity; work with the latest HTML5 and CSS3 code and structures; and publish a finished site to the web.
Register Early: Registration Deadline is 2 Weeks Prior to Class Start.
Course Notes
Adobe Versions That Can Attend: CC 2022, 2021, 2020, 2019, & 2018 (Microsoft Windows PC or Macintosh)
Course Taught With: CC version 2022 (Microsoft Windows PC) Software
Related Certifications
ACP: Adobe Dreamweaver Certification
Certification Notes: Certification exams are administered by third party testing companies. Our courses prepare you for the certification exam, which is an additional fee paid to the testing provider. You must contact the corresponding testing provider to take a certification exam.
Course Topics
Chapter 1: Customizing your workspace - 16
Touring the workspace
Using the Start Screen
• Quick Start
• Starter Templates
• Create New and Open
Exploring the New Feature guides
Switching and splitting views
• Code view
• Design view
• Live view
• Split view
Working with panels
• Minimizing panels
• Closing panels and panel groups
• Dragging
• Floating
• Grouping, stacking, and docking
Personalizing Dreamweaver
• Saving a custom workspace
Working with toolbars
• Document toolbar
• Standard toolbar
• Common toolbar
Creating custom keyboard shortcuts
Using the Property inspector
• Using the HTML tab
• Using the CSS tab
• Accessing image properties
• Accessing table properties
Using the Related Files interface
Using the Tag Selector interface
Using the CSS Designer
• Sources
• @Media
• Selectors
• Properties
• All and Current modes
Using the Visual Media Query (VMQ) interface
Using the DOM Viewer
Using element dialogs, displays, and inspectors
• Position Assist dialog
• Element Display
• Image Display
• Text Display
• Setting up version control in Dreamweaver
Exploring, experimenting, and learning
Review questions
Review answers
Chapter 2: HTML basics - 48
What is HTML?
Where did HTML begin?
• What comprises HTML?
Frequently used HTML elements
• HTML tags
• HTML character entities
What’s new in HTML5
• HTML5 tags
• Semantic web design
• New techniques and technology
Review questions
Review answers
Chapter 3: CSS basics - 60
What is CSS?
HTML vs. CSS formatting
HTML defaults
• HTML5 defaults?
• Browser antics
CSS box model
Applying CSS styling
• Cascade theory
• Inheritance theory
• Descendant theory
• Specificity theory
• CSS Designer
Multiples, classes, and ids, oh my!
• Applying formatting to multiple elements
• Using CSS shorthand
• Creating class attributes
• Creating id attributes
• CSS3 features and effects
• CSS3 overview and support
Review questions
Review answers
Chapter 4: Working with code - 86
Creating HTML code
• Writing code manually
• Writing code automatically
Working with multicursor support
Commenting your code
Working with CSS preprocessors
Enabling a preprocessor
• Creating the CSS source file
• Compiling CSS code
• Nesting CSS selectors
• Importing other style sheets
• Learning more about preprocessors
• Using linting support
Selecting code
• Using line numbers
• Using tag selectors
• Using parent tag selectors
Collapsing code
Expanding code
Accessing Split Code view
Previewing assets in Code view
Review questions
Review answers
Chapter 5: Web design basics - 124
Developing a new website
• What is the purpose of the website?
• Who is the audience?
• How do they get here?
Scenario
Working with thumbnails and wireframes
• Creating thumbnails
• Creating a page design
• Creating wireframes
• Designing for mobile devices
• The third way
Review questions
Review answers
Chapter 6: Creating a page layout - 138
Evaluating page design options
Working with predefined layouts
Styling a predefined layout
Styling elements using the Extract panel
Troubleshooting CSS conflicts
Extracting text from a Photoshop mockup
Deleting components and attributes from a template
Inserting new menu items
Creating new elements with the DOM panel
Creating menu items with copy and paste
Extracting text styling
Creating a gradient background using Extract
Extracting image assets from a mockup
Creating new Bootstrap structures
Adding a background image to the header
Finishing up the layout
Review questions
Review answers
Chapter 7: Working with templates - 188
Creating Dreamweaver templates
Removing unneeded components
Modifying a Bootstrap layout
Modifying text formatting in a Bootstrap element
Adding template boilerplate and placeholders
Fixing semantic errors
Inserting metadata
Validating HTML code
Working with editable regions
• Image carousel
• Card-based section
• List-based section
• Inserting a new Bootstrap element
• Inserting an editable region
• Inserting an editable optional region
Working with child pages
• Creating a new page
• Adding content to child pages
• Adding metadata to a child page
Updating a template
• Removing an optional region from a child page
• Removing unused sections from a child page
Review questions
Review answers
Chapter 8: Working with text, lists, and tables - 236
Previewing the completed file
Creating and styling text
• Importing text
• Duplicating Bootstrap rows
• Deleting unused Bootstrap components
Creating lists
Basing content structures on lists
• Pasting multiple elements in Live view
• Creating new list-based items
Creating and styling tables
• Creating tables from scratch
• Copying and pasting tables
• Styling tables with CSS
• Styling table cells
• Adding header rows to tables
• Controlling table display
• Inserting tables from other sources
• Creating semantic text structures
• Adding and formatting caption elements
Spell-checking webpages
Finding and replacing text
Review questions
Review answers
Chapter 9: Working with images - 294
Web image basics
• Vector graphics
• Raster graphics
• Raster image le formats
Inserting an image
Inserting images in Design view
Resizing images
Inserting Photoshop Images
Inserting images using the Assets panel
Adapting images to mobile design
Using the Insert menu
Working with the Insert panel
Inserting images into the site template
Adding CSS classes to template structures
Adding images to a Bootstrap carousel
Styling headings and text in a Bootstrap carousel
Self-paced exercise: Inserting images in child pages
Review questions
Review answers
Chapter 10: Working with navigation - 340
Hyperlink basics
• Internal and external hyperlinks
• Relative vs. absolute hyperlinks
Previewing the completed files
Creating internal hyperlinks
• Creating relative links
• Creating a home link
• Updating links in child pages
Creating an external link
• Creating an absolute external link in Live view
Setting up email links
Creating an image-based link
• Creating image-based links using the Element Display
• Creating text links using the Text Display
Targeting page elements
• Creating internal targeted links
Creating a destination link in the Element Display
• Targeting id-based link destinations
Locking an element on the screen
Styling a navigation menu
Adding a telephone link
Checking your page
Self-paced exercise: Adding additional links
Review questions
Review answers
Chapter 11: Publishing to the web - 386
Defining a remote site
• Setting up a remote FTP site (optional)
Cloaking folders and files
Wrapping things up
• Creating a home page
• Completing the home page
Putting your site online (optional)
Synchronizing local and remote sites
Review questions
Review answers
Chapter 12 Working with mobile design - 414
Responsive design
• Mobile-first design
• Testing responsiveness in Dreamweaver
Media type properties
Media queries
Media query syntax
Working with the Visual Media Query interface
Introducing web frameworks
Setting up web-hosted fonts
• Setting the base font
• Building font stacks with web-hosted fonts
• Specifying font size
Creating custom media queries
• Adding rules to a media query
• Controlling text styling with media queries
• Changing component visibility with media queries
Controlling Bootstrap element alignment
Revising Bootstrap template structure
Adapting content to mobile design
• Checking pages for design conflicts
• Making HTML tables responsive
Previewing pages using Real-Time Preview
Fixing issues for mobile design and desktop
Review questions
Review answers
Course FAQs
What are the available class formats?
This course is taught by a live instructor and is available in two class formats:
- Live Online for Individuals
- Onsite/Online for Private Groups
What is the Adobe Dreamweaver workspace?
Adobe Dreamweaver is a powerful web development application that offers an intuitive workspace to help streamline the website creation process. The workspace provides quick access to all of the necessary tools and features needed to create, design, code and publish professional websites. With its user-friendly interface and simple drag-and-drop functionality, Adobe Dreamweaver makes it easy for users to design and collaborate on their web projects. The workspace includes several panels, such as the Properties Inspector, which provides a detailed view of the HTML elements in your webpage; the Insert panel which allows you to quickly add new elements like images or videos; and the Files panel which gives you an overview of all the files connected to your project. Adobe Dreamweaver also features a live view of the page you’re editing, so you can see changes in real time. With its comprehensive workspace, Adobe Dreamweaver has become a favorite among web developers for creating and managing professional websites with ease.
What is Adobe Dreamweaver code view?
Adobe Dreamweaver Code View is a powerful tool for creating and managing HTML, CSS, JavaScript, and other coding languages. It allows web developers to quickly design HTML code with less effort than if they were writing it by hand. The code view provides an intuitive user interface that makes working with complex coding languages easier than ever before. It also allows developers to quickly debug their code and make changes as needed. By taking advantage of the powerful coding tools offered by Adobe Dreamweaver Code View, web developers can be sure they are creating high-quality websites that are optimized for search engine results.
What is page layout in Adobe Dreamweaver?
Page layout in Adobe Dreamweaver is a powerful tool for designing and coding web pages. It allows users to quickly create complex page designs with features such as HTML, CSS, JavaScript, and more. With its drag-and-drop interface, users can easily place elements on the page, including text boxes, images, videos, and tables. It also offers a range of features for customizing the look and feel of web pages, including color pickers, font styles, and more. Adobe Dreamweaver makes it easy to create professional-looking page layouts with minimal effort. Furthermore, its intuitive design allows users to quickly create complex page designs with complete control over details such as HTML tags or Cascading Style Sheets (CSS). With its expansive array of tools and features, Adobe Dreamweaver is the perfect choice for web developers and designers looking to create engaging page layouts for their websites.
What are Adobe Dreamweaver templates?
Adobe Dreamweaver templates are web page designs created in the Adobe Dreamweaver software. These templates provide a foundation for web developers and designers to quickly create custom websites with professional looking results. With the help of these templates, users can easily set up the basic look and feel of a website without needing to start from scratch. They also allow for customization to match the website's content and branding. This makes Adobe Dreamweaver templates an invaluable tool for web developers and designers, saving them time while creating beautiful websites.
What are text, lists and tables features in Adobe Dreamweaver?
Adobe Dreamweaver is a powerful web development tool that allows users to create and maintain websites. It offers several features such as text, lists, tables, and more to help build attractive and dynamic websites.
Text formatting tools in Adobe Dreamweaver enable you to customize the look of your content by changing font sizes, colors and styles, and adjusting line spacing. You can also add hyperlinks to create clickable text and images. Lists help you organize content into bullet points or numbered items for easy readability, while tables let you layout your content in an organized manner. With Adobe Dreamweaver, you have the power to turn simple text, lists and tables into an eye-catching and engaging website.
Adobe Dreamweaver offers the flexibility to customize these features in a variety of ways. You can choose from an array of fonts, adjust font sizes and add borders, background colors and more to personalize your text. Lists can be formatted into bullet points or numbered items with options for spacing between items. Tables can be created with variable cell sizes and borders, background colors and more to make your content look professional.
What are the image features in Adobe Dreamweaver?
Adobe Dreamweaver offers several image features that make it simple to create and manage high-quality images in webpages. These include the ability to compress, resize and crop photos; adjust brightness, contrast and color saturation; add borders and shadows; apply filters such as blurring and sharpening; insert text captions; and even save images as a copy in web-friendly formats such as JPEG, PNG or GIF. All of these features make it easy to create attractive images for websites and other digital projects. Additionally, Adobe Dreamweaver allows users to embed external images into their HTML code, including images from stock photography sites or other sources. With the help of these tools, designers and developers can create stunning images to enhance their web content.
What navigation features are in Adobe Dreamweaver?
Adobe Dreamweaver provides a comprehensive set of navigation features to help users create and manage websites. These navigation features allow users to create menus, link content between pages, and create custom navigation paths for their visitors. The integration with Adobe Creative Cloud makes it easy to collaborate on projects with team members. Additionally, the real-time preview feature allows users to quickly view the changes they make in real time and test the effects of their navigation decisions. With Adobe Dreamweaver, users can create powerful and engaging websites with advanced navigation features.
What publishing options are are in Adobe Dreamweaver?
Adobe Dreamweaver is a powerful web design and development tool that provides an array of publishing options for developers. Once you have completed your website project, you can publish it locally or remotely via FTP, FTPS or SFTP. You can also use Adobe Dreamweaver's built-in WebDAV client to upload files to a WebDAV server. In addition, Dreamweaver supports publishing to an Amazon S3 account and configuring websites for Microsoft IIS Web Server and Apache. After the website is published, Adobe Dreamweaver also allows you to preview the site in different browsers on your local computer, or test it remotely via a URL. You can even deploy sites to mobile devices with Adobe Edge Inspect. With all of these publishing options available, you have the flexibility to create and deliver a website that meets your requirements.
What mobile design features are in Adobe Dreamweaver?
Adobe Dreamweaver has a range of mobile design features to help create and optimize websites for mobile devices. These features allow users to preview their website designs on different devices, adjust the layout and content according to device dimensions and add interactive elements including touch gestures, menus and navigation bars. Adobe Dreamweaver also supports HTML5 and CSS3 web standards, enabling developers to quickly and easily create websites that are optimized for mobile devices. In addition, it has built-in support for Adobe PhoneGap which helps developers package their website into a native app that can be downloaded from mobile app stores. With these features and more, Adobe Dreamweaver is an excellent choice for creating and optimizing websites for mobile devices.
Explore Dreamweaver Training Classes Near Me: