The Interface
Creating a New File
To get started with the Dreameaver interface, go to File > New and select HTML. The newest version of Dreamweaver, CS3, has default Layouts which can help you set up the most common web designs quickly, but for now we’ll just be working on a bare, no-Layout file.
Click thumbnail to view full image.
One of the best features about the Dreamweaver interface is that it can be customized to how you like: palettes can be moved, reordered, and even changed into toolbars. Dreamweaver likes to call interface configurations Workspaces.
The screenshots below were taken of the “default” Dreamweaver interface. You can revert to this default interface at any time by going to Window > Workspace Layout > Default.
The Design View
The most prominent aspect of the Dreamweaver interface is the large Design View:
The Design View shows you a live, “What You See is What You Get” preview of your current document. This view hides the HTML and CSS and only shows you what your visitors will see. This is how most people prefer to work on their Site: if you modify the HTML of the site by hand, the Design View is updated almost immediately to reflect those changes, and vice-versa.
Be warned, however, that the Design View isn’t a perfect rendition of your page. In most cases it does a very good job of displaying your page the same way a web browser will, but there are some cases where it fails miserably to figure out how the web page “really” looks. If you are importing an existing layout into Dreamweaver or if your page gets very complicated, you should be sure to check your site in a real browser to ensure things appear they way you are expecting. We will come back to this idea later.
Above the Design View
Between the Design View and the Insert Window is a small set of commonly-used tools:
Click thumbnail to view full image.
The far-left series of buttons, “Code”, “Split”, and “Design” allow you to toggle between ways of showing the HTML source code. The most interesting is the “Split” view which shows both the HTML and the design view simultaneously, allowing you to see how changes in the content affect the HTML and vice-versa.
The middle text box (with the tet “Untitled Document” in the screenshot) is the document’s Title. The Title will be visible in the browser’s title bar. The below document has the Title “Welcome to MyUW”:
Click thumbnail to view full image.
The green and blue arrows allow you to quickly Get and Put (upload and download) the current document to/from the server. More information on transferring files will be given on the Saving Uploading and Viewing page.
The globe icon allows you preview your document in a real web browser. As mentioned, Dreamweaver’s Design View isn’t always the most accurate rendition of your page. It is wise to preview your document in a web browser (or several web browsers as they don’t always render code the same way) after every major design change.
The other buttons on this toolbar are not pertinent to this curricula.
The Insert Window
The Insert Window allows you to insert common elements into your pages simply by clicking on them. This bar has tabs (Common, Layout, Forms, etc.) for different categories of content.
Click thumbnail to view full image.
In order from left to right, the buttons are:
-
Hyperlink
Insert a link to another page either within your Site (an Internal Link) or to a page on another web site (an External Link). Note that once a link is inserted with the Insert Window it must be edited in the Properties Inspector, which is covered in the next section.Creating links and inserting content will be covered on the next page.
-
Email Link
It is recommended that you NEVER use this button. The problem is that it puts your email address directly on the page in the clear. Spam robots crawling the internet looking for email addresses will harvest it from this link and subscribe you to spam lists. If you want to give your email address out online it is recommended that you do so discretely: Describe the email address in words. E.g.,Send your questions to my email address, lsthelp@uw.edu
It is still feasible that you might end up receiving spam, but the likelihood is greatly lessened.
-
Named Anchor
Used to set anchor points on the page that can then be scrolled to. An example is to place a Named Anchor at the top of the page called “top”. You can then create a Hyperlink that scrolls the user’s browser to that Named Anchor. -
Table
Allows you to insert tabular data into your page. Do not use this button to create a layout for your page — that’s the job of a Layer. Here is an example of a table:Item Price Pancakes $3.25 Waffles $4.50 Endoscopy $1474.99 -
Insert Div Tag
Used to insert a<div>tag — a quasi logical unit similar to Dreamweaver’s concept of a Layer but more generalized. Only use this if you are familiar with HTML and CSS. -
Images
This is actually several buttons in one: Click and hold your mouse button down to see several possibilities. This allows you to insert various kinds of images onto your page.
One of the more interesting “sub” buttons here is the Rollover Image Button that allows you to easily insert an image that changes when the mouse is over it. An example of this is to the right of this paragraph.
-
Media
Another button that is several buttons in one. Use this to insert special media objects from other programs like Adobe Flash or Java Applets (note that Java and JavaScript are not the same thing; don’t use this button to insert JavaScript.) -
Date
Allows you to insert the current date in a variety of formats. One option of the dialogue box is to have Dreamweaver automatically update the inserted date every time you save the document. This is useful for inserting a “Last Updated On…” line that automatically updates itself every time you save the page. -
Server-Side Include
Useful to include SSI content. SSI requires that you name your file with the “.shtml” extension and requires that your server supports SSI. Most web servers do support SSI (including the UW web servers), but it has generally been superseded by scripting languages like PHP and Perl. -
Comment
Insert a comment into the page’s source. Your visitors won’t see this comment unless they view the source code for the page. You can view the comments for the page by selecting View > Visual Aids > Invisible Elements and ensuring that the preferences item for comments is enabled. -
Head
This set of buttons allows you to insert common HTML<head>tag elements. Do not use this unless you are familiar with HTML and CSS. -
Script
Used to insert references to external scripts (such as JavaScript) in the page or to insert<noscript>sections that browsers without JavaScript enabled will see. Only use this if you are familiar with HTML and JavaScript. -
Templates
Used to insert the different regions used for templates, something we mention on the resources page. -
Tag Chooser
Used to insert HTML and other tags directly into the source of the page. Use this only if you are familiar with HTML.
Palettes and Tabs
The Files Palette is active.
Like many design programs, Dreamweaver features many Palettes that give you easy access to Dreamweaver’s many features. Not willing to stop there, Dreamweaver incorporates various Tabs into many of the Palettes. The Tabs are a sort of sub-Palette, if you will.
Palettes can be opened and closed by clicking on the Palette’s title and the Tabs within a Palette can be toggled by clicking on them.
In the screenshot to the right, the Files Palette is shown active while all the other Palettes are inactive. On the Files Palette, there are three tabs — Files, Assets, and Snippets. We will come back to this Palette on the Saving Uploading and Viewing page.
If your Palettes are arranged differently and you want to “start fresh”, remember You can revert to this default interface at any time by going to Window > Workspace Layout > Default.
The Properties Inspector
Once you have some content on the page, it’s feasible that you’ll want to change some of the attributes about pieces of that content. Dreamweaver calls attributes Properties, and these Properties can be changed in the Properties Inspector:
Click thumbnail to view full image.
The Properties Inspector is context-sensitive: what it displays varies widely depending on what is currently active. The “active” element on the page is usually whatever is highlighted by the cursor, but that is not always the case:
- Text is active when it is highlighted,
- Images are active when they have a single-line, solid, black border around them. An image is made active by clicking on it, and
- Layers are active when they have a thick, blue border around them. Discussion on how to make a Layer active is given on the Layers page.
- Paragraph Blocks are active when the cursor is inside them. Note that the Properties Inspector shows both properties of the active Paragraph Block and the active Text simultaneously. We will discuss which properties refer to which elements on a later page.
The following graphic summarizes the notion of active Text and active Paragraph Blocks:
In fact, the Properties Inspector’s set of Properties even changes wildly depending on what type of element is active. For example, it wouldn’t make sense to have “Bold” and “Italics” buttons for images; and it wouldn’t be sensical to have text rollover options. Thus, the general methodology for using the Properties Inspector is to
- Find the element whose properties you wish to change,
- Highlight it (or click on it in the case of an image or a Paragraph Block to make it active), and to then
- Change the properties to suit your needs.
Try it Out
Click thumbnail to view full image.
Armed with an overview knowledge of the Dreamweaver interface, you are encouraged to “play” with it for a while before continuing: see if you can’t figure out how to insert an ordered list like the one above. We’ll cover how to do it on the next page if you want to cheat.
