Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training 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.
Lesson Goals
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 has a Code View that can be used for writing many different client-side and server-side languages.
When you first open Dreamweaver, it presents you with a Start Screen with some quick links for opening recent items, creating new documents, and viewing video tutorials.
You may need to click Edit > Preferences... and remove the check mark from Show Start Screen in the General category if you wish to stop the screen from opening each time you open Dreamweaver.
Dreamweaver comes with predesigned Workspace Layout options, listed below:
You can switch between workspace layouts using the drop-down on the upper right of the application bar:
In this course, we will be using the Standard layout, which you can reset at any time by selecting Reset Standard.
There are several ways to create new HTML pages in Dreamweaver:
The Start 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 box:
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.
There are three main views for editing documents, plus an additional option:
Use the buttons in the center, below the toolbar to switch views: .
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.
In this exercise, you will create and view a simple web page.
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:
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.
The Dreamweaver Insert panel has several groupings of related objects, here are a few:
You can switch between these groups using the drop-down at the top left of the Insert panel:
The group options are shown below:
You can also drag the Insert panel below the Application Bar to give it a tabbed horizontal layout:
Many of the elements available in the Insert panel will be discussed in detail throughout the course.
To collapse all the panels in the right column, click the arrow icon shown in the image below (in red square):
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.
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:
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: 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.
The CSS Designer panel shows up by default in the workspace. We will cover CSS later in the course. For now, you can collapse it by double-clicking on the panel name.
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.
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. The new Live View uses Chromium Embedded Framework (CEF) to allow you to edit and make changes while getting a live view.
Before previewing a page in a browser, you must first set up you Real-time Preview preferences in Dreamweaver:
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 be able to edit the page.
Device Preview allows you to not only connect using WiFi to multiple devices, but also preview in real time so you get a good feel for how your project is coming along without having to use a test environment.
To use Device Preview, you must have the following setup:
Once that is accomplished, you may enjoy real-time edits and previews in all of your compatible devices.
You may now see a preview of an image in code view, taking the guess work out of what the image looks like and saving you time form switching back and forth from view to view. Simply hover over the reference and the preview will pop up.
In this exercise, you will modify your Real-time Preview settings (if you wish) and preview a page in different browsers.
Follow these steps to set up your website for this course:
Note: You may have stored your class files in a different location. That is okay. Simply refer to your location in Local Site Folder.
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.
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.
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.