Adobe Dreamweaver I - Part I

Introduction

Dreamweaver Logo

Adobe’s Dreamweaver is a “What You See is What You Get” (“WYSIWYG”) web design program. Dreamweaver allows you to build a complete Web site from scratch without having to write much (if any) HTML or CSS. This makes it possible for non-coders to create web content.

Dreamweaver replaced Adobe’s GoLive software when Adobe acquired Macromedia in 2005. At the time of this writing, the most current version of Dreamweaver is CS3. CS3 allows you to use Spry widgets and data fields: dynamic, reusable elements that can interact with the user or with a database. CS3 also offers tighter integration with Photoshop and better support of CSS.

This workshop covers the basics of Dreamweaver: how to add content and set up a preliminary page layout. We mention the value of Styles and Templates (and occasionally cover them in class if there is time), but we leave alone the Spry framework, Data sets, and several other advanced features. We do, however, provide resources that may be useful in these regards.

You are highly encouraged to review the materials from the Web Publishing at the UW before continuing with this workshop.

What is Dreamweaver?

“So really, what is Dreamweaver?”

The common (mis)conception with Dreamweaver is that Dreamweaver is designed to or is even capable of completely removing the agency of HTML and CSS coding from web design. This is like saying that a nail-gun can completely replace a hammer. A nail-gun will nail the boards together, but it is an imprecise tool, and there is a certain amount of danger while using it. If you can’t occasionally fall back on the hammer for more detail-oriented work, then there’s a definite limit to what you can build. A skilled carpenter knows how to use the hammer and occasionally does so when the nail-gun just isn’t doing what is intended.

Dreamweaver, like the nail-gun, is designed to make your life easier. You may never learn HTML or CSS, but without knowing them, you are limited to Dreamweaver’s way of doing things. This is not altogether a bad thing: it is simply a slightly narrow perspective on a large field.

Extolling the Virtues

  1. Writing Content 
    HTML can be cumbersome. Dreamweaver writes (for the most part) good, valid HTML using an easy point-and-click interface.

  2. Managing Files 
    Unless you are using a scripting language like PHP, managing a large site with many pages and files can quickly become a mess. Dreamweaver has built-in dependency tracking that will automatically manage your files and will update your pages accordingly. Many people use Dreamweaver just for its built-in synchronization tool.

  3. Preliminary Page Layout 
    Dreamweaver has good tools to assist you in laying out your site. There are also a lot of “pre-fab” layouts and templates available as starting points in Dreamweaver CS3.

    Dreamweaver’s layout features are, however, somewhat limiting. Some designs are simply impossible to achieve using the built-in layout tools. In these cases, you can go in and manually edit the HTML and CSS that Dreamweaver produces to tweak to exactly what you need.

What Isn’t Dreamweaver?

Dreamweaver is not designed to completely remove the agency of HTML and CSS: it is meant to assist you with your HTML and CSS and to make some of the more mundane aspects of Web Publishing less terrible.

That said, however, it is definitely possible to get a very decent-looking Web site up quickly and easily using Dreamweaver without ever learning a bit of HTML or CSS. Barring knowledge of HTML and CSS, however, you will be limited in your ability to make your site very customized or very easy to maintain.

Setting Up Sites

A Web Page is an element of a Site. Dreamweaver allows you to put all your web page files together for easy access and editing. It will help you create a new folder in which all the files will be located and referenced from.

It is important that you review the UW Web Publishing Services page from the Web Publishing at the UW online curriculum. In particular, it will tell you how to activate your web publishing services if you have not done so already. It also covers which server you’ll connect to (e.g. Dante or Homer) and which folder on that server you’ll put your Site in (e.g. public_html or student_html).

Getting Started

This tutorial is designed for students, staff, and faculty of the University of Washington, but can be used to work with any similar web host server.

The first step is to create the Site. There are two methods to do this. One method is at the Splash Page and the other method is from the Menu:

  1. New Site Splash Page

    Splash Page

    At the splash page under the ‘Create New’ column select ‘Dreamweaver Site’. 
     
     
     
     
     
     

     
     
     
     
     

  2. New Site Menu

    Menu

    Select the ‘Site’ menu and select ‘Manage Site’, when the dialog box appears select ‘New’. 

     
     
     
     
     
     
     

 

 

Whichever method you used, you should be at the same point and from here all the steps will be the same.

Site Definition Name Page

Settings Part 1

Now give your web site a name. This name is arbitrary and will not be seen by anyone else other than those working on it. It is generally a good idea to name your site in a way that describes what your site will be about.

After giving your site a name, input the URL you will be using. The URL is the address that you type in to access your site from the web. (Note: MX 2004 users will have to click the advanced tab at the top of the dialog box to input the URL.)

When you are finished select the ‘Next’ button to continue.

Settings Part 2

The next screen asks if you want to enable server technologies. Server technologies are usually for specific scripts like PHP, MySQL, Perl, etc. Unless you know what these are and intend to use them on your site, you should avoid them and select No. Click ‘Next’.

Settings Part 3

Now you have 2 options for where you want to work on your web site:

  1. Edit local copies on my machine… 
    This is the first option and the recommended option. What it means is that your documents will be stored on the local computer to begin with and they will not be uploaded to the web server until you decide to. This is the recommended setting.

  2. Edit directly on server… 
    This is the second option. Working off the server means that you are saving your data directly to the server removing the need to upload, but depending how you have it set up, your documents might be displayed live on the web. If chose to work locally, below you will have to specify what directory you want to use.

Select ‘Next’ to continue.

Settings Part 4

Site Definition Connection Information Page

Here we can setup our connection to the web server. The values that are used here a designed to be used by University of Washington students, staff, and faculty. If you have a different web server that you want to connect to contact your web host to find out what those values are.

(Note that your values for hostname and folder may well differ from what is depicted in the screen shot.)

The first drop down menu lets you choose how you want to connect to the server. Click the drop down menu and select FTP. FTP stands for File Transfer Protocol and is the method to connect to your server account with your UWNetID.

Essentially Dreamweaver acts like an FTP (or in our case an SFTP program) to connect to your UW file space and put files into your web site’s folder on your Dante or Homer account. Which server you connect to and which folder you select to put your Site into are covered on the UW Web Publishing Services page of the Web Publishing at the UW online curriculum. The server is usually either dante.u.washington.edu or homer.u.washington.edu.

In the next field, “…hostname…”, you will choose where on your server you want to save the document when you do upload it. Just like above there are different naming conventions to use when using different servers. Again, this is covered on the UW Web Publishing Services page of the Web Publishing at the UW online curriculum. This field is usually either public_html or student_html.

Now in the ‘FTP login:’ field you want to enter your UWNetID as the username.

Just below that enter your UWNetID password. Only leave the “Save” checkbox selected so that you will not have to re-enter your password when you upload and download your files from the server.

Then MAKE SURE YOU CHECK “USE SECURE FTP” (SFTP). The UW servers are encrypted and you must use some Secure FTP connection in order for them to work correctly.

Now click ‘Test Connection’. You should get confirmation if you connected successfully. If not carefully check your steps, make sure words are capitalized or not where appropriate. If you are still having difficulties connecting and have checked your settings, you should contact your host to ensure you have the proper connection information. You could also send an email to Catalyst for a fast response via email. Please see the bottom of the Help Center for the email address.

When you are finished, click ‘Next’.

Settings Part 5

The next page is about checking in and checking out. This tells Dreamweaver to treat the files on your Site like library books. When you open a file for editing it is “checked out” and nobody else can edit it until you close it or “check it in.” This is useful if there may be more than one person working on the Site at once as it prevents two people from editing files at the same time.

All Together Now

Here all your settings are shown. If you are not satisfied with your settings, simply click the back button to redo that step that you want to change. When you are done click ‘Done’.

Now you are ready to start creating pages for your web site!

Getting Started

Much of the difficulty in using a program like Dreamweaver comes from understanding how the program breaks down the project into logical units. This page describes the “philosophy” of Dreamweaver and how to problem-solve in its mindset.

Sites vs. Pages vs. Layers vs. Paragraph Blocks

Building Blocks BreakdownDreamweaver breaks down your content into several logical “building blocks” — units that group common things together. You are already using the biggest logical unit — the Site.

A Site houses one or more Pages. These pages house one more Layers which in turn house one or more Paragraph Blocks. The Paragraph Blocks then contain the actual content: the actual text and images.

The following schematic to the right shows how these different entities are related.

We will go over how to create pages later on this page. Discussion of layers is covered in Working with Layers and discussion of Paragraph Blocks can be found in the Adding Content section.

Pages vs. Files

When you navigate to http://google.com/, for example, what is it showing you? Surely the code and images that make up the Google home page must be in some files somewhere, right?

In fact, what you are being shown is a file called index.html on thegoogle.com server. Try it out — go to http://google.com/index.html and see that what it shows you is in fact the same.

There are two things to take away from this example:

  • Pages on Web Sites are just files 
    All the pages on web sites are in fact simply files. In the same way that word processors typically create .doc files, Dreamweaver creates .html files for your Pages.

    (Some sites do not have a separate file for every page as in the case where the contents are dynamic, but that needn’t concern us at this point.)

  • index.html is assumed 
    When you ask for http://google.com/, you’re not requesting any particular file: you’re requesting a folder, namely /. If we had been requesting a file (and not a folder), then the address would be something like http://google.com/index.html.

    (Remember that slashes in a URL indicate folders in the same way that they indicate folders on your computer.)

More on index.html

Recall that if you have a folder of Word documents on your desktop, the folder itself doesn’t have the text of your term paper as its contents. Rather, the text of your paper is actually the content of a file within the folder.

So when you go to an address ending with a /, why do we see text and images instead of a list of files? The answer is subtle but important:

Tip: If the web server receives a request for a folder instead of a file, it assumes that the requester wanted a file in that folder called *index.html*. If the web server receives a request for a folder instead of a file, it assumes that the requester wanted a file in that folder called *index.html*.

So what if there is no index.html file in a folder? In this case, the web server does what your computer does — it gives a listing of all the files in that folder!

CAUTION: If you don’t want visitors to be able to see a listing of all the files in one of your site’s folders, you should put an *index.html* file in that folder. This file can be blank, but it must be there to prevent the server from listing all the files in the directory. 

So there is this special file called “index.html” inside most of the folders on web sites. This file might better be called home_page.html or landing_page.html as those names more accurately describe what contents typically reside in an index.html file, but the name is special and means something to the server.

Next we’ll talk about the Dreamweaver interface and how to get comfortable with its many tools and dialogue boxes.

The Interface

Creating a New File

Create New HTML Page

To get started with the Dreamweaver 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.

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

Blank Design View Page

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

Design View Toolbar

Between the Design View and the Insert Window is a small set of commonly-used tools:

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.

MyUW Preview

The middle text box (with the text “Untitled Document” in the screenshot) is the document’s Title. The Title will be visible in the browser’s title bar. The right image has the Title “Welcome to MyUW”:

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 in the Saving Uploading and Viewing section.

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

Insert Window Toolbar

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.

In order from left to right, the buttons are:

  1. 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.

  2. 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.

  3. 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.

  4. 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
  5. 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.

  6. Rollover Image Example

    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.

  7. 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.)

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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.

  13. Templates 
    Used to insert the different regions used for templates, something we mention in the resources section.

  14. 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

Files Palette

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 — FilesAssets, and Snippets. We will come back to this Palette in the Saving Uploading and Viewing section.

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 Files Palette is active in the image to the right.

The Properties Inspector

Properties InspectorOnce 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:

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 in the Layers section.
  • 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.

Active Text and Paragraph Blocks Example

The graphic to the right 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 make sense to have text rollover options. Thus, the general methodology for using the Properties Inspector is to

  1. Find the element whose properties you wish to change,
  2. Highlight it (or click on it in the case of an image or a Paragraph Block to make it active), and to then
  3. Change the properties to suit your needs.

Try it Out

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 below. We’ll cover how to do it in the next section if you want to cheat.

Adding Content

We’re finally ready to start adding content to our Site! This page is perhaps more tedious than it needs to be, but please stick with it! The theory laid down is important for later subjects.

The Dreamweaver Method

Active Text and Paragraph Blocks Example

In the previous section, we asked you to experiment a bit with Dreamweaver by posing that you see if you can’t figure out how to insert an ordered list like the one [to the right] before continuing.

So how do we go about doing this? The key is to follow “the Dreamweaver method”:

  1. Enter the content without regard to formatting,
  2. Select the elements whose formatting you wish to change, then
  3. Change the formatting using the Properties Inspector.

This is a general approach to getting “correct” results in Dreamweaver. Essentially its philosophy is that content is paramount and definition is secondary. Or, “you are more important than what you do.” The you is the content; the what you do are the properties of that content, visible and controlled via the Properties Inspector.

How to Create a List

The screencast video to the right demonstrates how to insert this content.

(Note that although the screencast is shot using the PC version of Dreamweaver, there is little distinction between the PC version and the Mac version.)

Entering Text: More on Paragraph Blocks

As we mentioned in the Getting Started section, Dreamweaver’s
“logical unit” for content is the Paragraph Block. A Paragraph Block is considered to be a single cohesive group of content.

To create a new Paragraph Block hit the Enter key. This behavior is not what you might expect: it’s not how most word processors handle the Enter key - they are likely to simply break the line as opposed to creating a new paragraph block.

(You can break the line by holding down Shift while hitting Enter.)

To the uninitiated, this may seem like a distinction without a difference: how does a line-break differ from a separation of Paragraph Blocks? The two screen shots below illustrate the difference.

Text with Line Breaks Example

Text with Line Breaks

Line Breaks:

 

 

 

 

 

 

Text with Paragraph Blocks Example

Text with Paragraph Blocks

Paragraph Blocks:

 

 

 

 

 

 

The distinction visually between these two versions is about a 12-point-high bit of whitespace between the lines in the version with Paragraph Blocks while there is no space between the lines in the version with line breaks. The important distinction, however, is the meaning of the two versions:

When writing a paper, a break in the paragraph is used to separate ideas or transition subjects while a break in the line is purely a formatting issue: the line is too long, perhaps, for the page. This is the same distinction made by Dreamweaver. Use Paragraph Blocks to group together paragraphs (logically connected units) on the page; use line breaks to break the line (as in the case of lyrics or lines of a poem).

Changed Text Width Example

CAUTION: Do not use line breaks to control the width of your text! In general, you have no idea how wide your visitor’s screen is going to be! There is no way to reliably say if your visitor is looking at your site on a 30" monitor or a 2.5" cellphone.

If you want to change the width of a block of text like in the screenshot to the right, you should do so with Layers. Reserve line breaks for separating lines of prose.

Paragraph Blocks and the Properties Inspector

Remember from our discussion on the Dreamweaver Interface that Paragraph Blocks are considered “active” in the eyes of the Properties Inspector when the cursor is inside them. This is opposed to text inside of a particular Paragraph Block-text inside of a Paragraph Block is active when it is highlighted.

Changing Existing Properties With the Properties Inspector

The observant viewer will notice that the screenshot to the right depicts an ordered list while the screencast video depicts an unordered list:

Ordered List Example

To the right is the finished product at the end of the screencast. (The difference being that an unordered list uses “discs” as bullets while an ordered list uses numbers as bullets.)

While the process for creating an ordered list is the same as creating an unordered list (except for pressing the “Ordered List” button instead),converting between the two formats isn’t so obvious.

Again, we refer back to “the Dreamweaver method”:

  1. Enter the content without regard to formatting,
  2. Select the elements whose formatting you wish to change, then
  3. Change the formatting using the Properties Inspector.

Notice, however, that the first step, Enter, is already done. So then how to change existing content in Dreamweaver is simply a matter of following steps (2) and (3) from the above:

Ordered List Step 1

Step 1

  1. Select the text whose properties you wish to change, and then...

     
     
     
     
     
     
     
     
      
     

  2. Ordered List Step 2

    Step 2

    Change the desired properties in the Properties Inspector.

     
     
     
     

       
     

Header and Link Properties Example

We can do a lot more with the Properties Inspector than simply insert and change lists: we can change the meaning of a whole manner of content. Try creating the following document in Dreamweaver using only the Design View and the Properties Inspector:

Do not simply make the “Optimus vs. Amazon” text large and bold. The important thing about this text is that it is a Header. Rather, make it a “Heading 1” by changing its Paragraph Block’s “Format” Property. Also make the text “Amazon” link to, say, http://amazon.com/.

The Solution

Again following “the Dreamweaver Method” from the first section on this page, we

  1. Create Paragraph Block Step 1

    Step 1

    Create the content without regard to its properties, hitting the Enter key after “Optimus vs. Amazon” to create a new Paragraph Block for the text proceeding it. Then we... 
     
     
     
     
     
     
     
     

  2. Heading Selection Step 2

    Step 2

    Select the content whose properties we wish to change. In this case, we first wish to change the “Optimus vs. Amazon” line into a heading.

    Being a heading or simply a paragraph text is a property of the entire Paragraph Block, not certain elements of it. So we simply put the cursor in the first Paragraph Block and select “Heading 1” from the “Format” dropdown in the Properties Inspector. This defaults to “Paragraph” for all Paragraph Blocks.

    Tip: Note that a Paragraph Block is always a Paragraph Block. It may, however, have a Format of a Heading or a List Item, etc. The term “Paragraph Block”, then, is somewhat of a misnomer. It might better be called a “Block.” We’ll continue to call these elements Paragraph Blocks, however.

    The Format of a Paragraph Block defines how that Paragraph Block relates to the rest of the page as a whole.

  3. Now we’ve made the “Optimus vs. Amazon” Paragraph Block into a “Heading 1.” We’ve also made the “Battle of the Primes” text italicized. Now we’d like to make the text “Amazon” into a Link. 

    Target Property Example

    Select the text to turn into a link.

    It turns out that this is something that can be done with the Properties Inspector. That is, the “Link” is the Property of text (or other content such as images) that tells the browser to redirect the user to another page when the text is clicked by the user. Thus, we can highlight the text we want to make into a link and simply change its “Link” Property in the Properties Inspector to the address of the page to which we’d like our text to link. 

    The “Target” Property only exists when there is something in the Link Property. The Target allows you specify the window in which a link will open Selecting a Target of “_blank” will make the link open in a new window. The other Targets in this dropdown have to deal with HTML frames and are beyond the scope of this curriculum. 

    You can “unlink” content (make it into normal content and not sensitive to moues-clicks) at any time by simply deleting its Link property in the Properties Inspector. 

    Change Link Property

    Change its Link Property in the Properties Inspector.

    The moral of the story is that the Dreamweaver Method, as mentioned at the top of this page, allows you to create web content by first inserting your content as “non-web” content and to then “webify” it by changing its various Properties in the Properties Inspector. 

    When you are inserting links within your Pages, it is important to remember how paths on the internet work. This is discussed at some length in the File Referencing section of the Web Publishing at the UW online curriculum.

Inserting Images and Other Content

The previous sections covered how to change the properties of existing text; they didn’t cover how to insert new content.

Adding new content in Dreamweaver is quite simple: you’ve already experienced how to insert text. Inserting other kinds of content is equally simple. As you might have imagined, inserting content such as images simply involves using the Insert Window that we discussed in the Interface section.

Bunny Picture

When using the Insert Window, Dreamweaver asks you to describe the content you’re adding in one or more dialogue boxes. Mostly these are self-explanatory. We’ll go over how to add an image:

  1. Save the image you want to add to your Desktop (or some other easy-to-find location). We’ll be using the image at the right in our example. If you are on a Mac or a PC, you can drag the image onto your desktop directly from this site if you are using a modern web browser. 
     

  2. Text Before Bunny Picture

    Enter the text around where you want the image to be in the Design View, and place your cursor where you want the image to be placed:

    Notice that we’re going to be putting the image in its own Paragraph Block. This is not a requirement-you could put the image directly inline with the rest of the text (perhaps surrounded by line breaks, as discussed at the beginning of this page).
     
      

     

  3. Insert Image Sub MenuInsert Image Sub Button

    Remember that the Insert Image button actually has several “sub” buttons to insert various image-related elements into the page.

    Click the downward-pointing arrow next to the Insert Image button (depicted to the right) and hold the mouse down. Let go on the “Image” item on the menu that appears.
     
     
     
     
      
     
     

  4. Select Image Page

    Find the image on your computer you wish to insert:

    There is an important point to make about the path of your image here. If you get a dialogue box like the following then you must click “Yes” to ensure the image gets copied to your Site’s folder and uploaded with your page. If you were to click “No”, then you are in effect relying on all the visitors to your site also having that same image on their desktop, which is probably not a likely event. 
      
      
      
     

    Copy to Root Folder Path

    In the next dialogue box, the “Copy File As” dialogue box, you are given the option to copy the image to your Site’s root folder as a different file name. 
    This allows you to have a file on your desktop called “DSC009334.jpg”, for example, and to add it to your site as “dudeigotadell.jpg” or any other easier-to-read name.  
     
     
     
     
     

  5. Alternate Text Box

    Enter the Alternate text for your image in the next dialogue box:

    The Alternate text is sort of a textual backup of the image: if the image can’t be found (e.g. you delete the image) or if it can’t be displayed (the user’s screen doesn’t display images or the user is using a screen-reading program), then the alternate text will be used instead. You should describe the image briefly in the Alternate text field. Accessibility standards say that if an image contributes to the content of the page (i.e. it’s not used solely for visuals or layout), then it must have a relevant Alternate text field.

    Bunny Picture Complete

    The Long description is a URL (web address) of a page describing the image in more detail. This is useful if the image is not summarized easily in a sentence or two. Not all images are required to have a Long description.

    Once you have filed this information out, select “OK,” and the image will be inserted into the page:

Editing Image Properties

Now that we have an image on the page, now we want to manipulate it in some way: maybe change its size, maybe make it into a link; maybe something else. As you probably guessed, this again comes back to using our good friend, the Properties Inspector.

CAUTION: Note that it may seem very convenient to simply resize an image in Dreamweaver and leave it at that, it is not considered a good idea. When you resize an image in Dreamweaver, all Dreamweaver does is tell the web browser to display the same image in a smaller space: it doesn’t actually resize the image in the way that Photoshop or ImageReady would.

Bunny Picture Complete with Border

Border Example

Remember from our discussion on the Properties Inspector in our discussion on the Dreamweaver Interface that in order to view the properties of an image in the Properties Inspector, all we have to do is click on the image whose properties we wish to edit. Upon doing so, Dreamweaver gives the image a black border with black boxes at the image’s corners and midway between them.

 

Perhaps more importantly, however, is the difference in the Properties Inspector, which, as we recall, is context sensitive and thus now displays the various properties that pertain to the selected image.

In light of our discussion on making text into a link, how might we make this image into a link? That is, how do we make this image “clickable” so that when a user clicks on it, he or she is taken to another page?

Image Properties Inspector

Properties Inspector

The answer, of course, is to simply change the image’s Link property in the Properties Inspector. You’ll notice that as soon as you do this and move your cursor of the image that the image will be given a thick blue border. This is the default style for how a linked image should be displayed. You can manually get rid of this border by setting the Border property to “0” in the Properties Inspector.

What’s Next

There are of course other kinds of elements to be inserted in a Web Site, and we’ll cover some more of them as they come up. Before we continue much further developing our site, however, we’d like to take a bit of a detour and talk about how to save your work and upload it onto your public server. This and more covered in our next section, Saving, Uploading, and Viewing.

Try it Out

Before continuing to the next page, try to reproduce our example (without making the image into a link) without referring back to this tutorial. When you are finished save this file as “index.html” and continue to the next section.

Last modified: April 29, 2014