facebook google plus twitter
Webucator's Free Adobe Dreamweaver CS6/CC Tutorial

Lesson: Getting Started with Dreamweaver

Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver CS6 course.

Dreamweaver is an integrated development environment (IDE) for creating web pages and websites. It was first introduced in 1997 by Macromedia, which was taken over by Adobe in 2005. Adobe has since released several versions. In this lesson, we'll introduce you to the Dreamweaver interface and get you started with your first website. Throughout the course you will see images and video presentations of both the CS6 and the Creative Cloud (CC) environment. The interfaces are very similar and any differences are pointed out.

Lesson Goals

  • Learn about the role of Dreamweaver in web development.
  • Learn about the Dreamweaver interface.
  • Create a simple web page.
  • Preview your web page in the browser.
  • Set up a website in Dreamweaver.

The Role of Dreamweaver

Experienced web developers need to know many different languages. For example, a really good client-side programmer needs to know HTML, CSS and JavaScript - three very different languages. Dreamweaver makes it possible to develop websites without knowing these languages; however, as you'll see in this course, it helps to have some understanding of how the different languages work.

Dreamweaver also can be used for writing server-side code, either using tools that hide the code or working within the code itself.

Welcome Screen

When you first open Dreamweaver, it presents you with a Welcome Screen with some quick links for opening recent items, creating new documents, and viewing video tutorials:

If you find the Welcome Screen annoying, you can prevent it from opening every time Dreamweaver starts by checking the Don't show again check box on the bottom left of the screen.

Dreamweaver Workspaces

Dreamweaver CS6 comes with several predesigned Workspace Layout options, listed below:

  • App Developer
  • App Developer Plus
  • Business Catalyst
  • Classic
  • Coder
  • Coder Plus
  • Designer
  • Designer Compact
  • Dual Screen
  • Fluid Layout
  • Mobile Applications

You can switch between workspace layouts using the drop-down on the upper right of the application bar:Switch Workspace Layouts

Dreamweaver CC comes with several predesigned Workspace Layout options, listed below:

  • Compact
  • Expanded

Switch Workspace Layouts

In this course, we will be using the Designer or Compact layout, which you can reset at any time by selecting Reset Designer.

Creating HTML Pages

There are several ways to create new HTML pages in Dreamweaver:

  1. Click on HTML under Create New on the Welcome Screen.
  2. Select New... from the File menu.
  3. Press CTRL+N on the keyboard.

The Welcome Screen option will create an HTML document using your default settings, which you can change (we will see how later in the course). The other two options will pop up the following dialog:

To create an HTML page using the default settings, simply click the Create button. We will look more into the other options later in the course.

Please note that Dreamweaver CC has fewer layout options and also the DocType is set to HTML5 by default. Even if you are using Dreamweaver CS6, you should also set your DocType to HTML5 and use compliant code.

Code View vs. Design View

There are three main views for editing documents:

  1. Code View - you work directly in the HTML code.
  2. Design View - you work in the WYSIWYG (What You See Is What You Get) interface that feels like a word processor.
  3. Split View - you easily toggle back and forth between working in Code and Design View and see your changes in both places.

Use the buttons in the upper-left of the Document toolbar to switch views: csd.

In this course, we will generally be working in Design view. You might, however, want to switch to Split view from time to time if you are interested in seeing the code that Dreamweaver is creating as you work.

Creating a Web Page

Duration: 10 to 15 minutes.

In this exercise, you will create and view a simple web page.

  1. Create a new HTML page using any of the methods described above.
  2. Place the cursor on the page and type "Hello world!".
  3. Save the page (File > Save) as hello-world.html in your ClassFiles/Dreamweaver/Exercises folder.
  4. When you are done, your page should look something like this:

Solution:

  1. Select New... from the File menu.
  2. In the New Document dialog that pops up, click Create.
  3. Type "Hello world!" in the document.
  4. Save the document as hello-world.html in your ClassFiles/Dreamweaver/Exercises folder.

The Dreamweaver Interface

Panels

All of Dreamweaver's tools are contained in various windows and panels. Panels are divided and organized into a series of Panel Groups based on the functions they contain. You can control which of these panel groups is visible by selecting and deselecting them in the Window menu. The checked items are currently showing:Insert PanelDreamweaver CS6

Insert PanelDreamweaver CC

See Installing Database Panel for CC to read about the way you may add the Database, Bindings, and Server Behaviors panels to your menu.

Insert Panel

The Insert panel (shown below) allows you to insert various "objects" (such as tables, forms, and images) into your page. You can format or set attributes for these objects as you insert them.

Insert Panel The Dreamweaver CS6 Insert panel has several groupings of related objects:

  • Common (shown above) - for most commonly used objects.
  • Layout - for divs, Spry objects, and table elements.
  • Forms - for form elements.
  • Data - for Spry data objects and other dynamic elements, such as recordsets.
  • Spry - for building Spry pages.
  • jQuery Mobile - for building jQuery Mobile pages.
  • InContext Editing - for creating InContext editable regions within pages.
  • Text - for text-centric tags (e.g., headings, lists, inline tags, etc).
  • Favorites - can be customized to display just the options that you use most often.

The Dreamweaver CC Insert panel has several groupings of related objects:

  • Common (shown above) - for most commonly used objects.
  • Structure - for divs, and lists.
  • Media - for media elements.
  • Form - for form components.
  • jQuery Mobile - for building jQuery Mobile pages.
  • jQuery UI- for building jQuery User Interface.
  • Templates - for creating template regions within pages.
  • Favorites - can be customized to display just the options that you use most often.

You can switch between these groups using the drop-down at the top-left of the Insert panel: Insert Panel

The group options are shown below:Insert PanelDreamweaver CS6

Insert PanelDreamweaver CC

You can also drag the Insert panel below the Application Bar to give it a tabbed horizontal layout:

Horizontal Insert Panel

Many of the elements available in the Insert panel will be discussed in detail throughout the course.

Collapse All Panels

To collapse all the panels in the right column, click the arrow icon shown in the image below (in red square):Collapse Panel Groups

Click the arrow again to re-open the panels.

You can also open and close panels individually by clicking on the panel name: once to open and twice to close.

To completely hide all panels, press F4. Press F4 again to reshow them.

Properties Inspector

The Properties Inspector (shown below), which appears at the bottom of Dreamweaver in the Designer workspace, is context-based, meaning it will change depending on what type of object is selected. For example, if text is selected, text properties will be visible; if an image is selected, image properties will be visible, and so on: Properties Panel

Every page element can be customized via the Properties Inspector. For example, text can have a specified font, size, and style. Images can have a specified height, width, and source. To customize an element, select it within the Document Window (the main editing area) and make alterations via the Properties Inspector.

The Properties Inspector is split into two sections: HTML and CSS. Click on the HTML or CSS icons on the left side of the inspector to switch between the two.

Note CS6: When the CSS icon is selected and you attempt to change properties of text, Dreamweaver will automatically open the New CSS Rule dialog prompting you to create a new CSS rule. These rules will all be covered later in the course.

Note CC: When the CSS icon is selected and you attempt to change properties of text, Dreamweaver will automatically create a new Inline CSS rule. These rules will all be covered later in the course.

CSS Styles Panel (CS6)

The CSS Styles panel shows up by default in the Designer workspace. We will cover CSS later in the course. For now, you can close it by double-clicking on the panel name.CSS Panel

Files Panel

The Files panel (shown below) keeps track of all of the files and folders within your site. It can also be used to browse the files on a computer or network just as Windows Explorer can be used to browse files. Files Panel

Previewing Your Page in the Browser

While you are editing a page in Design View, Dreamweaver attempts to give you a good reflection of how the page will appear in a browser, but that's not always possible (or even desirable). Dreamweaver does make it easy to view your page as it will appear in the browser either from within Dreamweaver itself or directly in one or more browsers.

Preview in Browser

Before previewing a page in a browser, you must first set up you Preview in Browser preferences in Dreamweaver:

  1. Select Preferences... from the Edit menu.
  2. From the Category list, click on Preview in Browser:You may already see one or more browsers in the Browsers list.
  3. To add a new browser to the list:
    1. Click the icon.
    2. Fill out the resulting dialog. For example:
  4. Repeat for every browser you want to be able to test. You can add as many as you like. Your primary and secondary browsers can be accessed with shortcut keys:
    • Preview in Primary Browser: F12 (Win) / Option+F12 (Mac)
    • Preview in Secondary Browser: CTRL+F12 (Win) / Command+F12 (Mac)
  5. To edit an existing browser in the list, select it and click the Edit... button.
  6. When you are done, your list might look something like this:
    • Notice that you can change your primary and secondary browsers by checking or unchecking the Defaults.
    • You can also check Preview using temporary file if you want to be able to preview files without saving them. We recommend that you leave this unchecked and instead use Live View (see below) if you ever want to see how a change will affect a page before saving.

Now you can easily preview your page in one or more web browsers either using the F12 shortcut key combinations listed above or by selecting Preview in Browser from the File menu:

Live

Live view makes it possible to view your page as it will appear in a browser from within Dreamweaver itself. Simply click on the Live button. For simple pages, you will not see much difference between Design view and Live view. In Live view, however, you will not be able to edit the page.

The Live View button in CS5 is now the Live button in CS6 and CC.

Previewing a Web Page

Duration: 5 to 10 minutes.

In this exercise, you will modify your Preview in Browser settings (if you wish) and preview a page in different browsers.

  1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already open.
  2. Preview the page in Live View.
  3. Preview the page in one or more browsers.
  4. Make some small modification to the page and preview again.

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Setting Up a Website

Follow these steps to set up your website for this course:

  1. From the Site menu, select New Site... to open the Site Setup dialog:
  2. Enter "dw-class" for the Site Name and browse to the dreamweaver folder within the course class files for the Local Site Folder:
  3. Click Save.

Your Files panel should now look like this:

Open up the Exercises folder and you should see the hello-world.html file you created in the last exercise.

Pointing to Websites

When you point your browser to a website (e.g., www.google.com), the browser fetches a page from a web server somewhere on the internet. That web server is simply a computer with some special software on it for serving web pages and associated files (e.g., images). The server can deliver pages to many different clients (browsers) at the same time as shown below:

As a web developer, you may be responsible for putting your pages onto the web server. Different organizations handle this in different ways, but one common way is via File Transfer Protocol (FTP). We will show you how to set this up in Dreamweaver; however, in this course, we will simply view the files locally.

  1. To reopen the Manage Sites dialog, select Manage Sites... from the Site menu.
  2. Select "dw-class" from the site list and click the pencil icon.
  3. Click Servers on the left, and then click the plus symbol as shown below.
  4. The options will change depending on how you connect to your website (e.g., FTP, Local/Network, WebDAV, RDS).
  5. For our purposes, you can cancel out of these dialogs as we will not need to connect to a web server for this course.

Edit Preferences

As we saw when setting our preview browsers, you can edit preferences in Dreamweaver through Edit > Preferences...

As you become more familiar with Dreamweaver, you will want to come back to these options to see if you want to make changes to your preferences.