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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This video introduces a special feature in Dreamweaver. If you use Modify > Page Properties to change settings, the software will create embedded styles.
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.
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!
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.
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.
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!
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.
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.
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.
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.
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!
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
Learn about Subversion integration features within Dreamweaver. These features allow you to add version control directly within Dreamweaver for team environments.
Android
Apple iPad
