The Dreamweaver Interface

from: Adobe Dreamweaver CS5: Learn by Video

Buy now

About this lesson

Dreamweaver's interface is full of powerful tools and features, yet well organized and easy to use. In this video, you'll learn about important UI elements, such as the Document window, and various panels such as the important Files and Properties panels.

From: Adobe Dreamweaver CS5: Learn by Video

This in-depth course, published in partnership with Peachpit Press, combines over 12 hours of video instruction with a 120-page full-color guide to teach you the fundamentals of Adobe Dreamweaver CS5 as well as the basic principles of web design. You’ll master the program’s interface and learn how to use essential commands and tools to design websites that combine type and images with rich media. Interactive quizzes throughout the course reinforce what you’ve learned and help you prepare for the “Web Communication Using Adobe Dreamweaver CS5 ” exam at the Adobe Certified Associate level.

$59.99

12 hrs

Buy now

Similar Courses

This section provides a crash course in HTML. Even if you are already familiar with it, you might find it worthwhile to review your knowledge.

HTML Refresher
- Understanding what a URL is composed of is key to understanding HTML, Dreamweaver and your site structure.
  
  URL Overview
  
  03:49
- The purpose of Dreamweaver is to write HTML code. Learn what HTML is, take a look at a few HTML tags, and learn how different browsers read HTML tags slightly differently.
  
  HTML Introduction
  
  04:25
- Dreamweaver creates HTML for you. This section introduces you to some basic HTML tags to give you a better idea of what Dreamweaver is doing behind the scenes.
  
  Basic HTML Tags
  
  03:38
This set of videos is all about Dreamweaver's core functionality and user interface.

Dreamweaver Introduction
- What is a WYSIWYG HTML editor anyway? This video not only provides the answer to this question, but also tells you about Dreamweaver's powerful Design, Code and Split views.
  
  WYSIWYG HTML Editor
  
  02:24
- Learn everything you need to know about the handy Welcome Screen, which is a good starting point for every Dreamweaver session.
  
  The Welcome Screen
  
  03:31
- Dreamweaver's interface is full of powerful tools and features, yet well organized and easy to use. In this video, you'll learn about important UI elements, such as the Document window, and various panels such as the important Files and Properties panels.
  
  The Dreamweaver Interface
  
  05:40
- Working with Dreamweaver means working the way you want to. Learn more about the software's workspaces and how to arrange and save your own workspace.
  
  The Workspace Switcher
  
  05:19
- Dreamweaver makes it easy to customize the workspace to suit your needs. In this video we set up the workspace area for this course.
  
  Customize Workspace
  
  05:59
- You can set up a few additional preferences to make working in the Dreamweaver interface a bit easier. This video walks you through a few preferences for this course.
  
  Dreamweaver Preferences
  
  06:08
- The Insert bar is a very important part of the Dreamweaver interface. Learn more about customizing this bar within Dreamweaver to speed up your workflow.
  
  Insert Bar
  
  03:22
Learn how to use a pre-built web page layout from Dreamweaver to create HTML files and CSS styles easily.

Getting a Quick Start
- Dreamweaver helps you build web pages, offering a host of basic layouts with CSS that you can customize to realize your creative vision.
  
  Starter Layouts
  
  05:20
- In this lesson, we use a starter layout page from Dreamweaver and begin to build a homepage for our website from that starter page.
  
  Building the Starter Layout Homepage
  
  05:52
- In this lesson, you'll learn how to set up the header area of the homepage for one of the starter layouts in Dreamweaver and modify styles within that page.
  
  Creating the Header Area
  
  06:08
- Navigation makes or breaks a website. Learn how to add a navigation bar to your web layout and apply CSS to make it look the way you want.
  
  Adding a Navigation Bar
  
  06:11
- Learn how to include and format content in your web page using CSS. Here we move the content needed for our homepage onto our starter page and see how easy it is to use CSS to format content.
  
  Adding Main Content
  
  02:30
- Learn how to add links that feature CSS formatting to match them to the look and feel of your site.
  
  Modifying Link Styles
  
  03:39
- CSS is a very flexible tool for laying out web pages. In this video, you'll learn how to modify HTML tags and the background color using CSS.
  
  Completing the Homepage
  
  03:33
- The Dreamweaver starter layouts are organized to make modifying the pages easier. In this video, we will add a border to the entire page to give our homepage a more complete look.
  
  Adding a Page Border
  
  04:13
To realize your creative vision, you need to have a good plan. Learn the nuts and bolts of planning so your project runs as smoothly as possible.

Planning Your Website
- Project management covers many aspects. This set of videos will help you get your project off to a good start—and a successful completion.
  
  Project Management
  - This video focuses on the big picture of managing a website project.
    
    Project Overview
    
    05:44
  - Each project starts with a questionnaire that helps define the scope and milestones. Here are some ideas for developing your questionnaire.
    
    Design Questionnaire
    
    04:49
  - This lesson deals with the design document, which defines your website's purpose and target audiences. It will also help you determine what technology to use to implement your plan.
    
    Design Document
    
    02:53
  - The project plan is the heart of every website project, specifying all project requirements and details. Watch this video to learn more!
    
    Project Plan
    
    04:07
  - Learn more about the many options Adobe offers to simplify communication at each stage of a project.
    
    Project Communication
    
    04:47
- This set of videos covers the key aspects of site development to make sure you don't miss anything important.
  
  Site Development
  - Planning a website project involves a lot of prep work. Learn more about important issues like usability, copyright permissions and accessibility.
    
    Site Definition & Planning
    - Copyright law may vary from country to country, but it is one of the most important aspects of website development. Learn the basics of copyright law here.
      
      Copyright
      
      05:55
    - You want to make sure your website can be used by people with disabilities, so let's take a look at the WCAG guidelines 1.0 and 2.0 for accessibility.
      
      Accessibility
      
      07:10
    - You want to make sure your website can be used by people with disabilities. Here we look at preparing your website for screen readers.
      
      Screen Readers
      
      06:48
    - Learn how to maintain design and navigation consistency on your website and how this affects the usability of the site.
      
      Maintaining Consistency
      
      05:19
    - What is meant by separating content from design? Content is based on HTML or databases, and design is mainly CSS. This video also explains absolute vs. relative positioning.
      
      Separating Content from Design
      
      05:19
    - This video explains why you have to be careful when choosing a font for your website and how to choose it.
      
      Using Standard Fonts
      
      06:45
    - Learn what web-safe colors are and what role they play in today's web design.
      
      Web-safe Colors
      
      02:51
    - If it weren't for web browsers, no one could view your website. Learn why you always need to keep an eye on browser versions when designing for the web.
      
      Browsers
      
      05:39
    - Do design principles really apply to web design? They do! Here's what you need to know and why you shouldn't create your site without them.
      
      Design Principles
      
      07:08
    - Beauty is one thing, usability another. Learn why an engaging website should be both nice to look at and easy to use.
      
      Usability and Readability
      
      06:19
  - This set of videos takes a look at essential elements of web design planning.
    
    Information Architecture
    - A sitemap is very helpful to reflect the visual structure of your website. Learn how to create one and use it.
      
      Visual Hierarchy
      
      04:30
    - This video explains what wireframes are and why they are useful for designing a website.
      
      Wireframes
      
      04:09
    - Website processes, such as the login, require careful panning in order to function efficiently. Flowcharts are a great way to assist you in documenting these processes.
      
      Flowcharts
      
      06:02
    - There are many types of storyboards. Here we look at two different ways to storyboard the design of a site.
      
      Storyboards
      
      02:24
- When it's over, it's never really over! Before you launch your site, you need to test it thoroughly. Dreamweaver offers tools that make testing reliable and easy.
  
  Site Testing
  - When testing a website prior to launch, there are many things to consider. Learn which elements should be tested and how Dreamweaver can assist you.
    
    Site Testing Overview
    
    03:19
  - One key aspect of the testing process is usability. See what makes it so important and how you can test a site's usability successfully.
    
    Usability Testing
    
    05:27
Learn why defining a site in Dreamweaver is essential and which steps you need to take to get it done.

Defining a Site in Dreamweaver
- This video explains the procedure for defining a site using Dreamweaver as well as the benefits.
  
  Introduction and Benefits
  
  02:59
- Here we will set up the website we will be using for this course and copy the course files we will be using. This folder stores all the files you need for your website.
  
  Course Setup
  
  02:57
- Dreamweaver's Site Definition dialog box consists of two tabs: Basic and Advanced. In this video, you'll learn how to define a site using the Basic tab.
  
  Defining a Site in Dreamweaver
  
  04:06
- The Files panel in Dreamweaver serves as a hub for your assets. See what features the panel offers to keep file handling simple and efficient.
  
  Using the Files Panel
  
  05:51
Everything starts with a page. Here's what you need to know about creating, naming and saving web pages in Dreamweaver.

Creating a New Web Page
- You can create a web page using the Welcome Screen, the File menu or a simple shortcut. Here's how.
  
  Creating a Web Page
  
  04:17
- Saving pages is easy in Dreamweaver. This video will show you how to save your pages and what you need to consider when specifying a name for them.
  
  Saving a Web Page
  
  03:55
- Why should every page have a proper title? This video has the answer.
  
  Assigning a Title to a Web Page
  
  03:31
- So, you have a file name and a title. What else? This video shows you what meta tags are and why they matter too.
  
  Inserting Meta Tags
  
  06:45
This set of videos will give you an insight into the tools and options Dreamweaver offers for adding and formatting text.

Adding Text Content
- Dreamweaver supports three ways to add text to your website: enter text in Design mode, copy and paste from other applications, or import text from files.
  
  Typing, Copying/Pasting, or Importing Text
  
  05:39
- You can define headings to structure your text for a easier reading. This video shows you how easy this is using Dreamweaver.
  
  Setting Headings
  
  04:42
- Dreamweaver supports three types of lists for web pages: unordered lists ordered lists, and definition lists. This video walks you through prepared unordered and ordered lists.
  
  Creating Lists
  
  07:26
- Among the many ways of highlighting text, bold and italicized styles are most common. Watch this video to learn how to apply these formatting features.
  
  Bold and Italics
  
  04:42
- Learn how to insert special characters, such as the copyright symbol or a trademark bug, properly into your text.
  
  Special Characters
  
  06:43
When it comes to controlling the appearance of web text, turn to Cascading Style Sheets (CSS). This set of videos explains how CSS can help you make your text stand out.

Formatting Text with CSS
- Watch this lesson to get an overview of the numerous text formatting options you have available with Cascading Style Sheets.
  
  Introduction to CSS
  
  06:02
- Creating styles is one thing, managing them another. Learn where you can safely store the styles for your site.
  
  Places to Store Styles
  
  06:36
- Learn how to create a .css file and how to link your web pages to it.
  
  Creating and Linking to a .CSS File
  
  10:04
- Learn how to create styles for the HTML tags in your web pages.
  
  Creating a Style for an HTML Tag
  
  07:12
- Class styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. Watch this video to learn how to create them and apply them to your text.
  
  Creating a Class Style
  
  07:27
- Watch this video to learn how to edit a style in an external .css file, unlocking the power of CSS.
  
  Editing a Style
  
  03:58
- Learn how to add your own font listings to the Dreamweaver default font list within the interface to make them available throughout all of your web sites.
  
  Custom Font Stack
  
  05:05
- This video introduces a special feature in Dreamweaver. If you use Modify > Page Properties to change settings, the software will create embedded styles.
  
  Styles Created by Page Properties
  
  05:57
- Learn how to work with CSS to create various versions of your web pages to display for printers and other types of devices such as handhelds. The Style Rendering Toolbar offers a simple way to preview the various media types within Dreamweaver.
  
  CSS for Printing
  
  08:11
- The Code Navigator displays a list of code sources related to a particular selection on your page. Once you get used to using this feature, you won't be able to live without it!
  
  Using the Code Navigator
  
  05:06
A website would be nothing but a sea of type if you weren't able to add imagery and animations. Using Dreamweaver, you can turn your website into an engaging experience.

Images and Rich Media
- There are many file formats available for online use. Here's how to pick the right one for your purpose.
  
  Web Image File Formats
  
  05:43
- Learn the many options Dreamweaver offers for inserting images into a web page. Equally important, watch why you should always add alternate text.
  
  Inserting Images and "Alt" Text
  
  05:50
- This video explains why understanding the path from your HTML page to your image file is important. See how Dreamweaver can assist you with creating these paths.
  
  Image File Path
  
  04:24
- Dreamweaver's Assets panel is an essential tool for placing images. Here's how to use it and how to add and manage favorites.
  
  Working with the Assets Panel
  
  06:42
- Even though Dreamweaver is a web editor, it supports a number of image-editing features. For example, you can crop, optimize, and sharpen images. For more complex tasks, you can turn to a professional graphics application. Watch how!
  
  Modifying Images
  
  09:06
- You're probably familiar with the Smart Object feature from Photoshop. Let this video show you that you can also work with Smart Objects in Dreamweaver to establish a live connection to a PSD file.
  
  Photoshop Smart Objects
  
  04:44
- The web would be much less entertaining without Flash. Watch this video to learn what Dreamweaver has to offer to make your website a rich media experience.
  
  Flash Files
  
  07:20
- Learn how easy it is to take advantage of one of the most common video formats on the web: Flash Video (FLV). You will also get a feel for the different types of skins you can apply to your movie.
  
  Flash Video
  
  06:32
- Watch this video to learn how the Favorites panel can help you organize your site by bookmarking images you use most frequently.
  
  Favorites
  
  04:11
This batch of videos provides expert knowledge about links and everything you need to know about Dreamweaver to create and edit them, how to define image maps, how to create rollovers, and how to insert a Fireworks navigation bar.

Creating Links
- Learn about where you can insert hyperlinks, commonly referred to as links, as well as the different types of links that you can create using Dreamweaver.
  
  Introduction
  
  06:25
- Watch this video to learn how to link a web page to a resource on the Internet.
  
  Linking to a Page on the Internet
  
  06:46
- Watch this video to learn how to create a local link, which is a link from one document to another on the same site.
  
  Linking to a Web Page in the Same Site
  
  05:40
- Watch this video to learn how to link a web page to a Microsoft Excel or Word file.
  
  Linking to a Word or Excel File
  
  04:28
- Watch this video to learn how to create a named anchor link, which jumps to a specific location within the same document.
  
  Named Anchors
  
  09:49
- Watch this video to learn how to create an e-mail link, which creates a new e-mail message with the recipient�s address already filled in.
  
  E-mail Links
  
  04:45
- Watch this video to learn how to create a clickable hotspot on an image and link that hotspot to another resource.
  
  Images and Image Mapping
  
  10:22
- Dreamweaver lets you create and edit rollovers—images which change when the pointer moves across them. Watch how easy it is to create them by letting Dreamweaver do the work for you!
  
  Creating a Rollover Image
  
  04:16
- Navigation bars help viewers move between pages and files on your site. This video explains how to create a nav bar in Fireworks and how to insert it into your Dreamweaver website.
  
  Inserting a Navigation Bar
  
  03:35
This set of videos will explain all of the important details about CSS and the best way to use CSS to enhance your web layout.

Page Layout with CSS
- CSS gives you great flexibility and control over the exact appearance of all elements on your page. Start here for important background information on CSS and what makes it ideal for web page layout.
  
  Why CSS for Page Layout
  
  03:47
- Watch this video to master the mechanics of CSS for precise web page layout.
  
  How to Use CSS for Page Layout
  
  03:05
- The box model serves as a visual design aid. This video provides details on this helpful feature.
  
  Understanding the Box Model
  
  04:24
- You can use div tags to create CSS layout blocks and position them in your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it. Here's how!
  
  Inserting <div> Tags
  
  07:16
- Learn how to add styles to your div tags so that CSS can control your page content. See how easy it is to position content using CSS!
  
  Creating a Style for a <div> Tag
  
  07:01
- See how easy it is to edit a CSS style for a div tag. Learn how to set your page's content width by defining the width of the CSS style for a div tag that "wraps around" all page content.
  
  Editing a Style for a <div> Tag
  
  10:26
- To increase efficiency, you can define a CSS style and create a div tag at the same time. Watch how!
  
  Inserting a <div> Tag with an ID
  
  04:26
- This video shows you what other options you have when creating div tags.
  
  Creating More Styles
  
  04:52
- To hone your CSS skills, you can see how to fine-tune our page easily with CSS in this video.
  
  More Practice with Styles
  
  07:51
- CSS styles are also ideal for customizing links. This video tells you how to make the links on your site visually attractive and consistent.
  
  Creating a Style for Links
  
  06:24
- Centering page content in the browser is a very misunderstood concept. This video explains how to center your page content in the browser and introduces CSS properties to do so.
  
  Center Page Content
  
  06:45
- With Dreamweaver, you can use AP elements to lay out your page, including text, images, or any other content. This video provides the details.
  
  Creating AP Layers
  
  10:48
- Dreamweaver CS5 offers new CSS inspection tools to make editing and troubleshooting CSS properties a simple process. Learn how to use these new tools to simplify the CSS process directly within Dreamweaver.
  
  CSS Inspection Tool
  
  07:26
- Learn about the four types of positioning available within CSS with a demonstration of the fixed positioning property, which prevents content from scrolling within the browser window.
  
  CSS Positioning
  
  02:56
- Dreamweaver offers easy ways to work with CSS selectors and provides tools to assist you in working with CSSs. Learn more about the selector types and how to use the Dreamweaver CSS tools for troubleshooting.
  
  CSS Selectors & Tools
  
  05:24
Tables are an important way to display data within a web page. Learn how to build a table from scratch, edit table properties using CSS, merge and split cells, modify rows and columns, and let Dreamweaver create table structure for content from a spreadsheet or any delimited text file.

Tables
- To start using tables on your website, you need to create one. This lesson shows you how easy it is in Dreamweaver.
  
  Creating a Table
  
  09:29
- HTML offers a wide variety of options to modify a table. Watch this lesson to learn more!
  
  Using Table Properties
  
  05:23
- Learn how to take advantage of CSS to match text in a table to the rest of your website.
  
  Using CSS for Formatting Tables
  
  07:24
- Learn how Dreamweaver can easily create the perfect table structure for content from a spreadsheet or any delimited text file.
  
  Importing Tabular Data
  
  07:01
- This video shows you how to merge and split cells to make your table look the way you want.
  
  Merging and Splitting Table Cells
  
  05:58
- Dreamweaver allows you to work on rows and columns. Here's how!
  
  Modifying Rows and Columns
  
  04:27
- Learn more about working with tables, including table alignment, border and background colors, and how to center your table within the web page.
  
  Aligning Tables
  
  04:41
Forms are a great way to collect data from users of your website. Learn how to create a form and add form elements, such as text fields, text areas, radio buttons, checkboxes, list menus and a submit button. Also learn how to make sure that user input is transmitted correctly.

Forms
- When it comes to using forms on a website, the HTML form tag is key. Watch this lesson to master the basics of form creation.
  
  Creating a Form
  
  06:50
- Lists, menus, radio buttons and checkboxes are common HTML form elements. This video explains how to use them.
  
  Text Fields
  
  09:22
- In this lesson, you'll learn the steps you need to take to ensure that user input gets back to you.
  
  Additional Form Fields
  
  07:51
- How do you make sure users enter the data you need? Use form validation! This lesson explains what form validation is and how you can add it to your form.
  
  Checkboxes and Submit Button
  
  05:36
- Watch this video to learn how to add validation to your forms so you receive the user input that you need.
  
  Validating Form Data
  
  06:24
- Spry is an exciting way to implement Ajax on your website. Watch why Dreamweaver's Spry features make it easy to add form validation with user-friendly messages.
  
  Using Spry for Form Validation
  
  07:28
Dreamweaver offers two great tools to facilitate and speed up site maintenance: templates and libraries. This set of videos shows you how to use them.

Reusable Content
- This video contains all you need to know about templates and library items in Dreamweaver.
  
  Template & Library Overview
  
  05:31
- Learn how to use the Library, which is a special Dreamweaver file containing a collection of assets that you can place in your web pages.
  
  Creating a Library Item
  
  08:32
- Once you have created a library item, see how easy it is to modify that library item on all of the pages that use it. Here we put the power of Dreamweaver to work to keep all pages up to date.
  
  Modifying a Library Item
  
  04:39
- A template is a special type of document that you use to design a "fixed" page layout. Here's how you convert an HTML page to a template.
  
  Converting a Page into a Template
  
  05:12
- Once you start using a Dreamweaver template for your website files, learn how to create additional pages based on that template file.
  
  Creating a Template Page
  
  03:59
- When working with templates, you can define regions as "editable" to control which page elements template users are allowed to edit. This lesson shows you how.
  
  Working with Editable Regions
  
  05:12
- Once a template has been added to your site, learn how to apply that template to an existing page.
  
  Applying a Template
  
  07:43
- Learn how to detach a page from a template in order to use an existing template to create additional templates.
  
  Detaching from a Template Page
  
  02:14
Before you push your website live, you need to test it thoroughly to make sure everything works the way you want. Dreamweaver provides a number of testing tools to help you create a reliable web experience.

Testing
- Dreamweaver has a built-in spell-checker that helps you eliminate mistakes on your pages before you publish them. See how!
  
  Spell-checking
  
  06:02
- Nothing is more frustrating for a visitor of a website to click on a link and get an error message. Watch this lesson to learn how to search your site for broken links and fix them.
  
  Checking for Broken Links
  
  08:04
- Learn how to preview your site in a web browser and how to add a browser to Dreamweaver�s browser list.
  
  Previewing Pages in the Browser
  
  03:45
- There are a number of web browsers, and each one has its own way of rendering web pages. In this video, you'll learn how Dreamweaver can help you identify and fix issues concerning browser compatibility.
  
  Checking Browser Compatibility
  
  02:40
- The sample website needs to be optimized because the nav bar is rendered differently in Internet Explorer and Firefox. This video shows you how to get it right.
  
  Browser Issues
  
  06:53
- It's important to run your own tests, but it's just as important to allow users to test your site. Here's how you can gather valuable feedback.
  
  Gathering User Feedback
  
  03:39
- It is important for your page to load quickly in the browser for the user. Learn how to keep track of the page load time and page file size within the Dreamweaver interface.
  
  Page Load Time
  
  06:01
- Dreamweaver has a built-in program that allows you to extend the features of the program. Learn how to download and install an extension to create a sitemap that allows screen readers to navigate your site in a more efficient way for accessibility.
  
  Dreamweaver Extensions
  
  05:27
Learn how to publish your site to a web server and prevent overwriting one another's edits when working in a team. And check out the video on a great new Adobe service called InContext Editing, which allows non-technical users to conveniently edit web pages.

Publishing & Maintenance
- The Files panel is key to managing files in Dreamweaver. Here you will learn how easily you can move, rename and delete project files.
  
  Managing Files
  
  04:32
- Set up your web server information so you can upload and download files for your website directly from within Dreamweaver so they can be viewed in a browser directly from your web server.
  
  Entering Web Server Information
  
  07:35
- Learn how to expand the Files Panel so you can view your web files and your local files on the web server at the same time.
  
  Expanding the Files Panel
  
  07:12
- InContext Editing is a feature that allows non-technical users to edit web pages directly through their browsers. Learn more about this service offered by Adobe.
  
  InContext Editing
  
  07:02
- Learn about Subversion integration features within Dreamweaver. These features allow you to add version control directly within Dreamweaver for team environments.
  
  Subversion Control
  
  07:56
You've come a long way, but there's even more! This training package has a few bonus videos you shouldn't miss!

Bonus Videos
- Here you will learn more about how Dreamweaver can assist you in adding JavaScript to your pages through the Behaviors panel.
  
  Creating a New Window through Behaviors
  
  04:51
- Here you will learn about Spry tabbed panels and how to work with Spry tabs.
  
  Inserting a Spry Tab Interface
  
  07:32
- This video will show you how to take an image-based Fireworks nav bar and move it into text links.
  
  Creating a CSS-based Menu
  
  13:30