Overview of Dream Weaver

8/9/2019 Overview of Dream Weaver

1/20

I. Overview of Dreamweaver

A. About Dreamweaver

Dreamweaver has features for both the beginning and advanced web page creator.

Dreamweaver integrates many aspects of Web development, including page creation,site management, and web server tools, giving the user a good perspective of an entireweb site. Dreamweaver also supports JavaScript and Cascading Style Sheets, along withother advanced functions.

Here is a brief summary of some of the elements that Dreamweaver offers:

Site Management - An integrated file transfer client and visual site map allow site

navigation, file linking, and uploading/synchronization of your site.

Template - Templates allow users to quickly edit all common elements, such as

navigation bars, throughout a whole site.

Cascading Style Sheets - CSS allow users to quickly change the appearance of textelements throughout the site.

JavaScript Behaviors - Dreamweaver behaviors are JavaScripts that you can apply

without having to deal with the necessary code. Each of these elements are discussedbelow.

II. Dreamweaver Tutorial - Basic Features

This section provides an overview of the basic features of Dreamweaver.

A. Defining a Site

Dreamweaver operates based upon the concept of a web site. When you first open theprogram, Dreamweaver makes you define a site. This helps you keep all files organized.With a simple web site, you will just need to keep a few files within a file folder.However, it is best to plan this out before you start, since folder maintenance will helpgreatly as your site grows and you start linking to other web pages and adding graphics.

If you are updating an existing site, you will want to use the current folder structure. If

you are working with others on a site (such as a department, special project, or studentclub) you will need to work closely so that you can coordinate your files, file structureand layout.

The instructions below assume you are using ACC's tutorial files inside a folder called MyDocuments.

Open the Site Files window. You can open this window by choosing Site > Site Files.

In the window that opens, choose Define Sites as shown below.


2/20

Choose New in the window that pops up. Select the Advanced tab in the Site Definition

window. Dreamweaver will now ask for name of the site and where it is on your harddrive. For now, just enter the Local Info. Enter the relevant information. Make sure you

enter the location of the Tutorial folder on your computer and not what is shown below.

We will look at Remote Info in the section on Site Management.

B. Dreamweaver Layout

Dreamweaver allows you to insert objects and change their attributes with the floating

panels and menu commands. Dreamweaver for Windows also has the option to havefixed panels instead of floating panels. Once objects have been inserted on the page,

they appear as they will when the web page is published online.
http://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#3Ahttp://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#3A


3/20

Once you start Dreamweaver, you may see a blank Web page with 3 floating panels:

Insert Panel: By default, this is the top menu bar on both PC and Macintosh. It hasgraphical buttons or icons for objects that can be inserted into a web page. These

include images, tables and applets. You can select different types of objects from thetabs at the top of the panel. The Common list is the default.

Properties Panel: By default, this panel is below your web page. It looks like a Word

processor formatting toolbar. When you choose an element on the Web page, you canadjust its properties here. You can toggle the advanced properties by clicking the small

white arrow in the lower right corner of the panel.

Answer Panel: By default, this panel appears at the bottom of listed panels on theright. If it does not automatically appear, click on the arrow next to Answers to maximizethe panel. You can quickly access the Dreamweaver tutorials and other information here.

All of Dreamweaver's panels can be moved, or opened and closed via the Windowmenu.

Examine the contents of Dreamweaver's drop down menus. Experiment with moving thepanel's around by dragging them by their title bars. On a Windows PC, you can close a

panel by clicking on the drop-down menu on the top right to "Close Panel Group"; on aMacintosh you can click on the red dot in the upper left corner. To reopen panels, chooseWindow on the menu bar of the blank Web page. The first 3 options are the basicfloating panels that are available. Checked items are the ones currently open. To reopena panel, just select it from the menu:

C. Basic Elements

This section covers how to insert text, hyperlinks, images, horizontal rules and tables;how to change their appearance using the Properties panel; and how to copy andimport text from Word.

We will begin building our course web site from scratch, and as we develop the site wewill use more sophisticated elements. In this section, you will make a basic page. Many

of the following steps are similar to what would be done in a normal word processing


4/20

program.

Type the title of the course in the document window:

From the File menu, Save your web page now in the Tutorial folder as start.html.

(Note: We will discuss saving and file names in more details in the next section.)

Use a soft return to separate the line into two. Move the cursor to right after the colon.While holding down the Shift key, press the Enter key.

Soft Returns and Hard Returns

Pressing the Enter key results in a hard return, and a line breakthat acts like double-space.

Holding the Shift key while pressing the Enter key results in a soft

return, and will act like a single space.

Highlight the text by clicking and holding at the beginning of the text and dragging thecursor to the end of the text.

With the text selected, change its appearance by changing its properties in the

Properties panel.

In the drop-down menu, change the format to Heading 3

In the drop-down menu, change the font to Arial, Helvetica, Sans-serif

Selecting from the four alignment buttons on the right, change the alignment to Center

The bold and italicfeatures are in this panel (underlines are conventionally reserved inWeb documents for hyperlinks). Indenting and list features are also be found here. Your
http://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#savehttp://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#save


5/20

text selection should now look like this:

The Undo Command

If you ever make a mistake, you can undo it by choosing Edit >Undo on the top menu or the equivalent keyboard shortcut (as

noted in the menu).

Enter a page title under Modify > Page Properties. You can change other pagesettings here.

Insert a horizontal rule right after the text. A horizontal rule visually divides the page up

and often makes the page more clear. Click the mouse at the end of the selected text toplace the cursor at the end of the line. Press Enter once to start a new line. From the

Insert Panel on the left, choose the object that is shown below:

Alternatively, you can insert horizontal rules by choosing Insert > Horizontal Rule

from the top menu.

Moving the cursor with the arrow keys

Right after you insert the horizontal rule, it is selected. To place thecursor right after the horizontal rule, press the -> key on your

keyboard.

Insert an image on the page. Start a new line and change the alignment to left-alignedwith the Properties panel at the bottom of the screen. From the Common tab in the

Insert menu on top, choose the object that is shown below:

(You can also choose Image from the Insert menu). A new window will appear askingyou to specify where the image file is. Navigate to the folder where you saved the

tutorial files and select the image named "collage.jpg". Select the image file and click


6/20

OK. Dreamweaver will then insert the image in the page. With each substantial imageyou insert, you should also enter an accompanying ALT tag - within the Propertiespanel - for users unable to see images.

Add an absolute hyperlink to the Haverford College home page. Start a new line andtype the words Haverford College. Now highlight these words. In the Properties panel,type in the URL of the Haverford home page, http://www.haverford.edu, in linksection. When you press Enter, the link will be added, indicated by the underline and achange in the text's color.

Note: Rather than typing "http://www.haverford.edu" you can cut and paste this from

your browser window. This will help ensure that you type the link correctly. Not all linksare eligible as hyperlinks. Some links are not stable, meaning that the same page maynot always have the same address; you cannot link to such pages directly.

About Links

When linking to another web page you can either use an absolute

link (such as http://www.haverford.edu) with the full address of afile, or a relative link (such as filename.html), which points to a file

that is on the same web site--often in the same folder or in asubfolder--relative to the page linking that file.

You can also link to a specified spot within a web page. Such a spotis called an anchor link. You need to first create an anchor in your

web page, and then link to it.

One other popular type of link is a mailto link. This type of link lets

your readers email a comment or question to the person at thelinked address.

Now is a good time to save your file and to start work on a related file. From the Filemenu select Save. (See more about saving files below.)

Create a separate file for a related web page called "about.html"

Add a description of the course, copying text from a Microsoft Word document. Start

your text editing program and open the file named "blurb.doc" (included with this
http://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#savehttp://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#save


7/20

tutorial). Highlight the text and copy it. In Dreamweaver, start a new line under theHaverford link and choose Edit > Paste.

Notice that Dreamweaver does not include any font or size attributes from the text

editor. To do so, you need to import Word HTML into Dreamweaver. We will try thatnow.

Choose File > Import > Import Word HTML (note that you can import other file

formats here as well). Open the "blurb.html" included with the tutorial file. This HTML filewas saved using Word's Save as HTML feature. In the window that opens, leave the

default selections as they are and click OK. A new Web page window opens with thedescription text which retains the font and size attributes. Highlight the text and copy it.Your Web page window is now hidden behind this new one. Close the new Web windowwithout saving. Highlight the text that we pasted before, and choose Edit > Paste.

Clean Up Word HTML

When a document is saved using MS Word's Save as HTML feature,Word imbeds many tags into the document that some programs will

not use. To remove these tags, choose Commands > Clean upWord HTML.

Because the image that was inserted takes up the whole row space it is in, there is anawkward blank space in the middle of our page. We can use tables to solve problems likethese. Using tables, textual and graphical elements can be arranged better. To positionthe cursor right before the image, click the image to select it and then press the


8/20

hyperlink and choose Edit > Cut. Click inside the left cell of the table and choose Edit >Paste (keyboard shortcuts for these commands will also work). You can also click anddrag the objects into the appropriate places. Now cut and then paste the description textinto the right cell. Your Web page should now look like this.

Check the spelling in the page.You can add words to Dreamweaver's personal dictionaryas needed.

Spell Checking

To spell-check a document, choose Check Spelling from the

Text menu.

You now have a basic Web page. To preview your Web page in a browser, choose File >

Preview in Browser > [Browser]. It is best to preview your page in several browsers(for example, Netscape and Internet Explorer). It may look different with different

browsers.

D. Save your File Locally

When you save your file, you need to consider the structure of your web site and use alegal file name. From the File menu, select Save.

Be sure to save your files into the top level of your site (the top folder) or the correctsubfolder. This should follow the structure determined during your site definition process

discussed above.

You also need to follow the general rules for filenames on the web.

1. Use proper extensions (.html, .jpeg, .gif)2. No spaces, no slashes, no colons, no percent signs, no asterisks3. If in doubt, stick with letters and numbers only4. Special file names: welcome.html, index.html

E. Publishing the Site

Once you have the page the way you want it, you are ready to post it for all to see.

There are several methods with which to post pages. Regardless of where you areposting, Dreamweaver provides a handy tool to help you with this process. In this
http://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#2Ahttp://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#2A


9/20

section we will go through the steps necessary to put a web page online usingDreamweaver.

Caution: Only use Dreamweaver site definition features you understand. There

are some features that can potentially delete or change files posted by others inyour work group.

Open the Site Files window. You can open this window by choosing Site> Site Files.

In the window that opens, choose Edit Sites as shown below.

Select the site you are using, Tutorial, and click on Edit.

Select Remote Info on the left, and enter the relevant information. The information youenter varies, depending upon the system from which you are connecting, and whetheryou are posting to an official web server, an internal web server or posting to anotherweb server elsewhere.

Make sure you enter the correct access method server name or location. In most casesyou will want to access the web server via Local/Network. However, if you are off-campus, you may need to access via FTP. Either way, you need a valid password to

access the server. If you are accessing the server via Local/Network, you may alsoneed to mount the server before you can set up or use the Dreamweaver site

management tool.

From Windows PC to an official web server

If you are posting to an official web server from a PC:
http://www.haverford.edu/acc/webdev/webdev-student.htmlhttp://www.haverford.edu/acc/webdev/webdev-student.html


10/20

Click OK.

You are ready to upload the files onto the server. Back on the Site Files window, click

on the Connect button ( ). Once connected, highlight the "start.html" file and the"download" folder. Then click on Put (the blue up arrow). Dreamweaver uses the same

directory structure that is on your computer. Your files are now online; you can use yourWeb browser to view the page by entering the correct URL. Once the file is posted, youcan use Dreamweaver's Get (the green down arrow) and Refresh (the dark blue circulararrow) buttons are used to download and synchronize files on the Web server with thoseon your computer. You can then make any changes needed to your file, and post again.This is useful for correcting any errors, or making other changes to your page(s) now, orin the future.

III. Dreamweaver Tutorial - Advanced

This section provides an overview of the advanced features of Dreamweaver. Itcontinues the tutorial from the previous section, but can also serve as Dreamweaverreference guide without requiring the tutorial files.

Aside: For HTML Programmers

To view and edit the HTML source to your Web page, select HTMLSource from the Window menu (there are also corresponding

buttons on the Document Toolbar). A split-window code and designview, color-coded HTML, and an integrated code reference are new

features in Version 4 and MX.

Dreamweaver is more forgiving than most Web editors in notadjusting the HTML coding in your documents. This is part of itsappeal to advanced Web publishers; it does not normally re-code

existing HTML (although you can select Commands > Apply

Source Formatting to make your HTML easier to read). The


11/20

drawback to this, however, is that in preserving your HTML,Dreamweaver may allow some malformed code that you or other

programs have entered to go unchecked in your documents. It will

prompt you if you do not include essential closing tags, butDreamweaver may not always rigorously reformat your HTML into a

fully compliant version.

In addition to previewing your page across all popular platforms,browsers, and screen resolutions, if you are editing the source foryour page and wish to check your work, you should, as always,

validate the HTML code in every page you publish. Validators andother HTML tools can be found at http://www.w3.org/ and

http://www.htmlhelp.com/.

A. Site Management

To make changes in all pages of your site, the Edit > Find and Replace command from

the Site Files window is useful. All other site management functions are listed inDreamweaver under the Site menu. Even if you are not using Dreamweavers FTP

functions (described above), you can still use the Edit Sites command to organize yourfiles (but not transfer them between your computer and the Web server). Also, you mustdefine your site in order to work with Templates and Library Objects.

Selecting Site > Site Map will display a folder tree of your site. From here you can dragand drop files, and delete and rename files as needed.

Dreamweaver will prompt you when you make a change that affects other pages (forexample if you rename a page that other pages in your site link to), and ask you if thefilenames and links in your site should be automatically changed. In most cases you will

want Dreamweaver to make automatic adjustments as needed. Another useful tool inthe Site menu is the Check Links Sitewide command. This is used to automaticallycheck and fix dead links within your pages (it does not check for dead links pointing toexternal sites).

B. Rollovers and JavaScript Behaviors

A rollover image is an image that changes when the mouse cursor hovers over it.

Why use Rollovers?

Web designers usually use rollovers to add interactive elements to

their web sites. Rollovers are usually used to embellish graphicnavigation menus. The downside to using many rollovers is that it

slows down the loading of a site, because two images need to beloaded for each rollover.

Start a new line after the description within the table. From the Common tab in theInsert menu on top, click the rollover button:
http://www.w3.org/http://www.htmlhelp.com/http://www.w3.org/http://www.htmlhelp.com/


12/20

In the options windows that appears, enter the following information (you can click the

Browse... button to locate and select the image files):

Click OK. That's it! To see the rollover effect, preview the page in your browser.

Rollovers are a type of JavaScript command. You can use other JavaScript commands,

such as browser checks and popup messages, using Dreamweaver's Behaviors feature.Now let's try another way of adding a rollover image by using Dreamweaver'sBehaviors. This will serve as an introduction to how to attach behaviors to objects.

Insert an image by clicking on the image object in the Insert Panel. Insert thearrow_up.GIF image.

Select the "start" graphic that was inserted and open the Behaviors window. You can

open the Behaviors window by choosing Window > Behaviors, or by clicking the smallgear icon on the bottom right of the document window. Click on the + sign and choose

Swap Image as shown below.


13/20

In the window that appears, select the arrow_down.GIF image as shown below (do not

change the other settings).

Click OK. To see the rollover effect, preview the page in your browser. If you are notcomfortable writing JavaScript code, you can use the Behaviors window to makeDreamweaver write more scripts for you.

C. Templates

In this section, you will learn how to use templates to simplify site management.Templates are useful if you have several pages that you want to contain consistent

formatting and elements. Note that you must have first defined your site (via the Sitemenu) before working with Templates.

Right now, clicking on the rollover doesn't do anything. We would like this "start" graphic

to link us to a page with more information on the course. But to make that link, we need


14/20

another Web page We could just create another Web page by going through all theinsertion steps in the beginning of the tutorial, but Dreamweaver gives us two otherways to simplify repeated elements.

What's a Template?

A Web page template is a foundation that you can use to build otherweb pages that use the same structure and elements over and overagain. A template is defined with editable and uneditable regions.Typically, Web designers want a consistent look, and templatesallow a Web designer to achieve this easily. More importantly,changing the template itself changes all pages that use the

template, making it easy to make site-wide changes.

We will first create a template of a Web page using the one we already have. ChooseFile > Save as Template. Name it "Tutorial".

We now need to tell Dreamweaver which parts of the page are editable and which areuneditable. Highlight the table by clicking on the edge, and then choose Insert>Template Objects > Editable Region. When it asks for a name, enter "table". Theother commands under Modify > Templates and Insert > Template Objects areused to define and edit regions in your template.

Editable and Uneditable Regions

Editable regions are regions that can be altered when we create aWeb page with a template. Uneditable regions are those thatindividual pages cannot alter. Uneditable regions can only be

updated site-wide when the original template is altered.

Before we create the new page with the template, we need to apply this template to thepage we already have so that it too gets updated when we change the template. Closethe template window, and open your "start.html" page. You can do this by opening theSite Files window and double clicking on the file, or by choosing File and selecting one

of the recently opened files.

With the original Web page open, choose Modify > Templates > Apply Template to

Page. Choose the Tutorial template and assign the Document Body to the Table regionand the Document Head to the Head region. Delete the parts of the document that haveduplicated. You will now find that the main part of the document is outlined in yellow,marking it as a template, and the editable regions are outlined in blue.


15/20

Save this page, replacing the one we had.

Now we will create the new Web page Choose File > New. Select the Templates tab.Select your tutorial site and the tutorial template. Click the Create button.

Highlight the description text and the rollover image and delete them (these are in the

editable region). Save the new Web page as "home.html". We will add hyperlinks aftermaking the corresponding pages.

Now we will link the rollover image from the start.html page to this page. We will makethis link using a neat feature of Dreamweaver. Open the start.html file (if you did notclose it, you can access it by choosing Window > start.html). Adjust the document

window by dragging its right edge closer to the center so it takes up about half of thescreen. Open the Site Files window by choosing Site> Site Files if it is not open.

Select the rollover graphic. In the Properties Panel, click on the compass and drag the

cursor over to the Site Files window. Keeping the mouse button down, move the cursorover the "Download" directory. The directory opens. Choose the "home.html" file as

shown below.


16/20

Suppose we now want a navigation bar right below the horizontal rule. Since this bar willbe on every page, we can add it to an uneditable region in our original template. Openthe tutorial template: from the Site File window, open the template folder and open thetutorial template (Templates are saved in their own folders named "Templates").

Move the cursor to right in front of the table by choosing the table and then pressing Template > Remove Template Markup. But nowDreamweaver has also made the table uneditable as well. So make it editable again by

choosing Insert > Template Objects >Editable Region.


17/20

Save the template. It will ask whether you want to update the pages created with thistemplate. Select Update and they will be updated automatically.

Open the start.html file. The new navigation text will be displayed.

D. Navigation Bars

You might notice that the navigation bar we created at the end of the previous section isa bit bland. Dreamweaver offers an easy way to create more exciting navigation bars.

This is very similar to the rollover images we created previously.

Open the tutorial template by going to Window -> Tutorial.dwt.

Highlight the navigation bar you created in the previous section and delete it.

Choose Insert -> Interactive Images -> Navigation bar.

Fill in the form with similar information as below using images from the downloadsfolder.

Add additional elements by clicking the + button. Change the order by clicking thearrows. Click OK when you have finished adding elements to the Navigation bar.


18/20

You can later modify the navigation bar by going to Modify -> Navigation Bar. If thenavigation bar appears as part of the editable region Table follow the previous steps tomake it uneditable.

Preview your page now to see the effect of the Navigation Bar.

When you save the template, be sure to apply it to all your pages.

E. Cascading Style Sheets

In this section, we will create a Cascading Style Sheet using Dreamweaver and use it toformat Web pages

What are Cascading Style Sheets?

Cascading Style Sheets (CSS) are tools for formatting theappearance of Web pages They do not add content to Web pages(as can JavaScript and Server-Side Includes, for example), but

rather define how page content is displayed (by choosing colors,fonts, sizes, and alignments). A style sheet works by defining theattributes of a Web page to have certain characteristics; CSS areHTML attribute definitions that can be then used to consistently

format a Web site. Changing the definition changes all text in a Website that uses that definition.

For example, on this page, all Heading 4 elements (those enclosedwithin tags) are rendered in a certain font and color. This is

accomplished with the CSS code:

h4 { font-family: "trebuchet ms", "times new roman", serif; color:#C00; background: transparent; }

You do not necessarily need to know how to code CSS, however, to

use them: Dreamweaver includes tools for making CSS (just as theWeb editor is a tool for creating pages without having to know

HTML).

When should I use them?

You will benefit most with CSS if you have similar areas throughoutyour site or page.

CSS is not fully supported by all Web browsers (and will not work atall with very old browsers), and different browsers can apply

formatting rules differently. To avoid problems displaying your Webpage, you should, as always, preview it on different browsers and

platforms before publishing it.

Open the tutorial template, then open the CSS panel can by maximizing the Design

panel on the top right and choosing the CSS Styles tab. (You can also choose CSS


19/20

Styles from the Window menu)

Choose the Attach Style Sheet icon as shown in the picture below.

We will now link a style sheet that does not exist. Doing so creates a new style sheet.Click on Link, and type in what is shown below (the *.css file extension is used for style

sheets).

Now we will create new style definitions for this style sheet. Double click the style.css toopen that sheet. In the window that appears, click New. Keep Make Custom Styleselected in the next window. (You can also create CSS definitions for HTML tags, such as

and . Select Redefine HTML tag here to do this.)

All style definitions must be preceded by a period. Type in ".grayquote" and press OK.

Enter the style settings shown below. We will change the font, size and color. Click OK.Note here that there are many more categories and types of formatting commands thatCSS can use. Remember that some of the more advanced types, however, may not besupported by all browsers.


20/20

Open start.html if it is not already open. Highlight the quote that begins the descriptiontext. Now select the .grayquote style we just defined in the CSS panel. The quote shouldnow have the styles we specified.

Now we will change the definition for ".grayquote". Double click on ".grayquote" in theCSS panel. The panel shown above appears again. Change the color to something else

and click OK. Notice that the quote in the Web page changed as well.

You can apply many more formatting commands easily and consistently across your Website by using CSS.

IV. Get Help

If you have questions about the topics covered in this guide, you can go through thetutorial while experimenting more with the described tools and options. There are also awealth of Dreamweaver options and functions not covered in this tutorial. This tutorial isalso a good stepping stone to the tutorial that comes with Dreamweaver, available fromthe Help menu.

Dreamweaver also has an extensive online help system which can be accessed by

choosing Help > Using Dreamweaver.