Macromedia Dreamweaver Basics

I nfoS heet

Macromedia Dreamweaver Basics Boston College

Introduction Macromedia Dreamweaver 2.0 is a full-featured professional web development tool which is easy to use. It includes WYSIWYG ("what you see is what you get") editing, HTML code editing, round trip HTML (it won't change your code on existing pages), advanced table editing, site management tools, built in FTP client, support for animation, DHTML and third-party tags, including ASP, Apache, Cold Fusion, Tango, and many others. For a full list of features, see the Macromedia Dreamweaver 2.0 web page at URL: http:// www.macromedia.com/software/dreamweaver/ This InfoPage assumes that you are familiar with the basics of HTML and web page authoring. This page will explain how Dreamweaver can be used to put a web page together, but will not explain HTML code or web page objects (forms, tables etc). Tutorials on HTML and related items can be found on the Web Development Resources page http://www.bc.edu/cwis/web_development.html

Starting Dreamweaver l

Follow the vendor instructions for installing Dreamweaver on your computer.

l

When you have finished, double click the dreamweaver icon or choose the program from the Start--Programs menu (Windows 95) to start the program.

l

When Dreamweaver first opens, a couple windows and several palettes may open at the same time. The appearance of your starting environment can be controlled by preferences which you set. The different preferences will be covered later in this document.

l

The only window you need for now is the Site Files window. If you do not see a window which says "Site" in the title bar, select Site Files from the Windows menu. If there is a blank window called "Untitled" on your screen close it. The only window you want to see is one called "Site" and the various floating palettes.

On-Line Help If at any time while you are using Dreamweaver you have a question about how to do something, excellent online help is available in HTML format. l

Click the Help button in any dialog box or select Dreamweaver Help Pages from the Help menu. (on the Macintosh the help menu is a question mark icon in the upper right).

An example of the help contents is shown below. Some of the help windows, in particular the Dreamweaver tutorial section, include shockwave animation to augment the information. To view these you need to have shockwave installed on your computer. A copy should have come on your Dreamweaver CD or you can download shockwave from the Internet at www.shockwave.com.

Februrary, 1999

Page 1

I nfoS heet

Macromedia Dreamweaver Basics Boston College

Creating a New Site To start working with Dreamweaver, you need to define your "site" which is composed of the remote web server directory where the page you want to edit is located or will be located and the local directory on your hard drive where you will keep the working copies of your web pages. l

Select New Site from the Site menu. In the example below we are setting up a site to edit web pages on the www.bc.edu web server (InfoEagle). The Site Definition box will open. Along the left hand site you will see the categories which you need to define.

l

Click on Local Info. This will define the information about your local hard drive directory which will contain the web pages you work on.

l

In the Site Name box enter a name for your site.

l

It's a good idea to name your site after either the web server you will be connecting to or the name of the web project you will be working on. For our example we'll enter www.bc.edu as the Site Name. If you were a commercial web page designer and you were working on a set of pages for a client such as the store Mammoth Mart, you might enter the name Mammoth Mart into the Site Name box.

l

In the Local Root Folder directory, enter the path to the folder on your hard drive where you will store the files for this web site. You can click the yellow folder to the right of the field to use the directory browse function to locate your directory or you can type the directory path in by hand. In our example we have entered D:\webpages\ which means we have a folder on our D: drive called webpages where we will store the pages for the web site www.bc.edu. Because we are using a Windows 95 operating system for our example, our path looks like that. If you are using a Macintosh, the path will look similar to MacintoshHD:HTML:Web Pages (note that the Macintosh uses the colon (:) character to separate directories, not a slash.)

Februrary, 1999

Page 2

I nfoS heet

Macromedia Dreamweaver Basics Boston College

l

If your web site is such that it will contain only one home page, you can enter that home page web address into the HTTP Address field. If you might be working on more than one web site on the same web server or you aren't sure what the home page is yet, you can leave that blank.

l

Click Web Server Info on the left column. This will define the information about your remote web server directory where you will place your completed web pages for viewing on the Internet.

l

From the Server Access menu choose FTP. This means you will use FTP (file transfer protocol) to move your files to/from the web server.

l

In the FTP Host field enter the server name of the web server where you will be placing your web pages. In our example, the web server would be www.bc.edu

l

In the Host Directory field you need to enter the path on the web server to the directory where your web pages will be placed. You would obtain this information from your web adminsitrator when you are given an account on the server. In our example, the path to the main web directory on www.bc.edu is /usr/eaglenet/www/data/bc_org. Enter the directory path you were given by the web administrator.

l

In the Login field, enter your username for the web server. At BC, usernames are no more than 8 characters. Enter the name in all lowercase.

l

In the password field you will enter your password to the web server, but it will not display. You have the option of saving your password so you do not have to enter it in the future. DO NOT DO THIS. It is a security risk to save your password on the computer. Anyone using your computer would then have access to your web account and could tamper with your web pages.

l

Make sure the box next to the Password field which says Save is unchecked.

l

Leave Use Firewall unchecked unless you are connecting to the web server from behind a firewall (you will need to consult your network administrator for the preferences to set). Users at Boston College and most outside commercial ISPs do not need to set firewall preferences.

l

The Check In/Out feature is for sharing files on a server between more than one dreamweaver user so that one person can have the file open at a time. You can read more about that in the on-line help. For our example, we do not need to configure that as we will not be sharing any files.

Februrary, 1999

Page 3

I nfoS heet

Macromedia Dreamweaver Basics Boston College

l

Click on the Site Map Layout category on the left. This enables Dreamweaver to create a visual site map for your web site if you want. In order for this feature to be available, you need to insert the local folder path to your web site's home page in the Home Page field. If you don't know this information yet, you can leave this blank. You can always enter this information at a later time.

l

The Site preferences are fully editable after the initial set up so anything you want to change/add later can be done. Click OK to create the site.

l

Dreamweaver will come back and ask "Would you like to create a cache for this site?" This improves performance and allows Dreamweaver to automatically update links etc.. Click the Create button.

l

When your site is set up you will see the Site window with your remote site listed on the left and your local site listed on the right. The contents of the remote site will not show up until you log into the remote web server. You can expand or compress the size of this window to fit your monitor comfortably.

Februrary, 1999

Page 4

I nfoS heet

Macromedia Dreamweaver Basics Boston College

Creating a New Page l

From the File menu select New (Macintosh) or New Window (Windows) A new blank window will appear where you can start building a web page. Dreamweaver is fully WYSIWYG (what you see is what you get) so you can type in the window as you do in a word processor and be assured that what you see on this screen is what you will see on the web (with a few exceptions relating to web browser versions - more on that later).

l

To add a title to your page, select Page Properties from the Modify menu. Through this menu you can also change the background color (or insert a background image) and adjust the colors of links.

The Floating Palettes

Launcher

Mini-Launcher

The Launcher The launcher has buttons for opening and closing frequently accessed palettes and windows. The icons are repeated in the mini-launcher palette at the bottom right hand side of the screen so if your screen isn't very large, you can close this palette without losing any functionality.

The Object Palette The Object palette contains buttons for placing various types of objects on your web page such as images, tables, layers, etc. The Objects palette is divided into 4 groups of buttons which you can toggle through by using a drop down menu at the top of the current palette. Each button has context sensitive help so if you place your cursor on a button without clicking, a text box will appear telling you what that button does. The button groups are shown below: menu--->

Common Objects

Februrary, 1999

Forms Objects

Head Objects

Invisible Objects

Page 5

I nfoS heet

Macromedia Dreamweaver Basics Boston College

The Property Inspector The property inspector palette displays properties for a selected object. As you select different objects, this palette automatically changes to show you the properties available for the object you have selected. Like the Objects palette, the Property Inspector has context sensitive help. Place your cursor over any of the buttons or text in the Property Inspect and help text will pop up to tell you what that item does. The figure below shows the cursor over the Text Color box in the Property Inspector. l

Now that you understand what the various palettes do, you should organize your screen by dragging the palettes and resizing the edit window into positions that are most comfortable to you.

l

Then start working on your page. If you place your cursor in the new window and start typing, the text will appear on the screen. Use the various palettes to add objects or format the text as you are working. A note about cutting and pasting: when you select text and cut it, the underlying HTML tags are also copied. This can be convenient if you are placing the text in another part of the web page and you want to retain the formatting. However, there may be times when you want to copy or paste just the text and do not want the HTML tags. Dreamweaver allows you to do this with the commands Copy Text Only and Paste as Text, available in the Edit menu.

Saving Your Page You should save your work often. l

To do this select Save As from the File menu and give your file a name. Windows will automatically add the extension .HTM to your file. If you are on a Macintosh, you should add the extension .htm or .html when you type in the file name. To continue saving after you having given your file a name, select Save from the File menu.

Checking Your Page in a Web Browser When your page is finished and you are ready to put it on the web, you should first preview it in a web browser. Dreamweaver offers you the ability to set up previews in as many browsers as you have installed on your computer. l

While still looking at the editing window, select Preview in Browser from the File menu. If you have any browsers defined in our Dreamweaver preferences, they will show up under this menu.

Februrary, 1999

Page 6

I nfoS heet

Macromedia Dreamweaver Basics Boston College

l

To define a new browser for previewing, select Edit Browser List from the Preview in Browser subnenu. The dialog box for Dreamweaver preferences will open with the category for Preview in Browser pre-selected.

l

Click the Add button to define a browser preference.

l

In the Add Browser dialog box, enter the name of the browser you are defining (e.g Netscape 4.0.5) and then use the Browse button (Windows) or the Choose button (Macintosh) to locate the browser on your hard drive. This will place the path to the browser in the dialog box. Check off the Primary or Secondary browser boxes if you want this browser to have one of those designations. Click OK when done. The browser you defined will now show up in the Preview in Browser menu under File.

l

From that menu, choose the name of the browser to preview your page before placing it on the web server. NOTE: If your web page will be viewed by a wide audience, it is a good idea to preview it in the most popular browses and versions currently in use. At this time those browsers are: Netscape 3.0x and 4.x, Internet Explorer 3.x and 4.x. If you are able to, previewing your page on both a Windows and a Macintosh computer is also important since the different platforms display some colors and objects differently.

Februrary, 1999

Page 7

I nfoS heet

Macromedia Dreamweaver Basics Boston College

Placing your Page on the Web You have saved your editing changes, previewed your file and feel it's ready for the public. Now it's time to put your file on the web server so the world can see it. l

Close the editing window. If you have not saved changes, Dreamweaver will prompt you to do so.

l

You will see the Site Management window. At the top of the site window before the Connect button is a drop-down menu which contains the names of the web sites you have defined. Make sure the name of the site where you want to place the page you just edited is showing in that box. Click the Connect button. You will be asked for your password.

l

Enter your password but do NOT check the save password box or you risk someone else access your account without your knowledge.

l

Once your password is accepted you should see the list of files on the web server on the left hand side of the screen. NOTE: If you have trouble connecting, you need to check your site preferences to make sure you have the server name, the path on the server and your username correct. From the Site menu select Define Sites to return to the screen where you originally placed this information.

l

On the right hand side of the screen, locate the file you edited. Then on the left hand side of the screen open the folder were you want to place the new file.

l

Once you have the two locations visible, drag the icon for the new file from the right column (your hard drive) to the left column (the web server) and place it in the folder where it belongs.

l

As you drag the file, an outline will show on the screen to help you position it in the correct location.

l

As Dreamweaver starts to upload the page, it will ask you if you want to also upload any related items. This includes any graphics or files on your hard drive you may have linked to in the new document.

l

If you are starting a brand new site, clicking Yes is a quick way to get all those files up on the web server at the same time.

l

If you are just uploading a page you made some minor changes to and you know that all the linked items are already on the server, click No. Your page is now on the web server.

Februrary, 1999

Page 8

I nfoS heet

Macromedia Dreamweaver Basics Boston College

l

To check that the results were as expected you should launch a web browser and put in the URL (the page address which begins with http://) to your web page and see how it looks to the "public".

l

If there are any problems, simply reopen the web page file you have on your hard drive using Dreamweaver, make the changes, save them, then follow the above steps to copy the updated version to the server and look at it again in the browser.

Downloading a Web Page to Edit Downloading a file from the web server is the reverse of placing a file on the web server. l

Go to the Site Management window in Dreamweaver. At the top of the site window before the Connect button is a drop-down menu which contains the names of the web sites you have defined. Make sure the name of the site where you want to get the page from is showing in that box. Click the Connect button. You will be asked for your password.

l

Enter your password but do NOT check the save password box or you risk someone else access your account without your knowledge.

l

Once your password is accepted you should see the list of files on the web server on the left hand side of the screen.

l

Locate the file on the server that you want to edit. Then on the right hand side of the screen open the folder were you want to place the new file.

l

Once you have the two locations visible, drag the icon for the file you want to edit from the left column (the web server) to the right column (your hard drive) and place it in the folder where it belongs. As you drag the file, an outline will show on the screen to help you position it in the correct location.

l

As Dreamweaver starts to download the page, it will ask you if you want to also download any related items. This includes any graphics you may have linked to in the document or other web pages linked to this document. If you want to have a copy of the entire on your hard drive, or you want to be able to see any linked graphics as you work in the local copy, clicking Yes is a quick way to get all those files downloaded at the same time. If you are just downloading a page to make some minor changes and you don't need to see the linked items, click No. This will save disk space as well as download time if you are working on a large site or over a modem.

l

Double click the file on the right hand side (the local copy) to open the edit window and begin working. Repeat the steps in the previous section for Placing a File on the Web Server to put the edited file back on the server.

l

Alternative download method: If you double click on a file on the web server instead of dragging the file to a particular location on your hard drive site, Dreamweaver will automatically download the file and create on your hard drive the same folder structure if finds on the web server. This can be useful for keeping the remote and local web sites in synch.

Februrary, 1999

Page 9

I nfoS heet

Macromedia Dreamweaver Basics Boston College

For example, if we opened the tvp folder on www.bc.edu and doubleclicked on the file testfile.html to download that html file to edit, Dreamweaver would make the following directory path in the D:\webpages\ directory that is defined as our local site: D:\webpages\bc_org\tvp\testfile.html because the path to that document on the server is www.bc.edu/bc_org/tvp/testfile.html

Editing the Raw HTML Code While Dreamweaver is fully WYSIWYG, it also allows you to edit the underlying (or "raw") HTML code which makes up the web page. This can be useful for tweaking complicated pages where you want absolute HTML precision. It also allows you to enter your own tags if you use advanced HTML, XML or DHTML. l

To view the HTML code, open the document.

l

Click the < > button on the floating Launcher palette or the mini-Launcher at the bottom of the edit window. The HTML code window will appear.

l

This window does not have any functions other than to let you see and edit your HTML code. There are no buttons to automatically insert tags for you; you type all code by hand. If you would like to work in HTML code but want to have the program offer you buttons for inserting tags, Dreamweaver gives you the ability to launch an external editor with more HTML editing features.

l

If you purchase the full version of Dreamweaver, BBEdit is included with the Macintosh version and Allaire HomeSite is included with the Windows version.

l

Click the External Editor button in the upper left to access the external program.

l

If you have no external editor defined yet, the Preferences window will open and the External Editors category will be pre-selected.

l

Use the Browse button next to the HTML Editor field to locate the external browser program. This will place the path to the program in the field.

l

You can also specify an external image editor in this window as well.

l

Click OK when done and the external editor will load. The external editor will not load your page automatically. You need to go to the program's File menu and use the Open command to begin editing your web page in this program.

Februrary, 1999

Page 10

I nfoS heet

Macromedia Dreamweaver Basics Boston College

When you finish, save the changes and quit the external editor. When you return to Dreamweaver, it will auto-detect if the file you had open at the time you went to the External Editor has changed and will prompt you to reload it. Click Yes.

l

Working with Templates Dreamweaver includes a system for creating and using templates.You can create new pages from a template or create a template after a page has been finished and then apply that template to the pre-existing page. One of the benefits of using templates is that if you later want to change the template, Dreamweaver will offer you the chance to automatically update all pages in your site that were created with that template. This can save you much editing time.

Creating a New Template l

Open a new document and select Save As Template from the File menu.

l

Select the Site you want to use this template for from the drop down menu at the top of the dialog box. This is very important. What Dreamweaver will do is create a folder called Templates (if it doesn't already exist) at the local root level of the site you selected and place the new template file in this folder. If the Templates folder does not exist at the site's root level, it will not be available to use on that site. The template will have the extension .DWT. The .DWT extension indicates that this file is a Dreamweaver Template file. (the same is true on the Macintosh) For example, we'll create a new template called main_page. Our site www.bc.edu has a local root path defined at D:\webpages\ so when we create a new template for the www.bc.edu site, a folder called Templates will be placed inside the folder called webpages and then will be available when we choose the www.bc.edu site in the site window. The template will then be located in the path D:\webpages\Templates\main_page.DWT.

l

Edit the page as you would any other web page. When you are finished with the content of the template, you are read to designate which areas are editable and which are locked.

l

Select the piece of the page you want the user to be able to edit.

l

Go to the Modify menu and select Templates.

l

From the Templates sub-menu select Mark Selection as Editable.

l

A dialog box will appear asking you to name the area you selected. Type in a name and click OK. The selected area will be highlighted (usually in green).

l

Repeat the above steps until you have marked all the areas on the template that someone using the template can edit.

Februrary, 1999

Page 11

I nfoS heet

Macromedia Dreamweaver Basics Boston College

NOTE: The page title is always editable, you do not need to indicate that separately. l

Save your changes by selecting Save from the File menu and close the edit window.

l

To test the template follow the instructions below.

Creating a New Page from a Template l

Select New from Template from the File menu.

l

Select the site where the template you want to use is located. A list of the templates will appear in the Templates field.

l

Click on the template file you want to use as the basis for your new file and click Select.

l

A new document will appear with the locked areas colored (usually in red). You can edit text in the nonhighlighted areas only.

Applying a Template to a Pre-Existing Page l

Open the pre-existing page in Dreamweaver.

l

Select Templates from the Window menu.

l

A list of the available templates should appear in the Templates window.

Februrary, 1999

Page 12

I nfoS heet

Macromedia Dreamweaver Basics Boston College

l

Click on the template you want to apply to the page and drag it's icon onto the page. (you may need to rearrange the windows so you can see both the Templates window and the edit window at the same time.)

l

Dreamweaver will attempt to match the parts of the pre-existing document to the editable areas of the template. If it cannot determine exactly where the contents of the existing page should go in the template, it will bring up a dialog box asking you where to place the contents. Usually your template will have a large editable area. If in doubt, you can choose that and then rearrange the pieces after the template has been applied. Do NOT select None or you will lose content.

l

More detailed information on the use of templates is included in the On-line Help. To get the most out of templates, it is strongly suggested that you consultant that information.

Sharing Templates with Other Dreamweaver Users Dreamweaver templates can only be used by other Dreamweaver users because the code in the template file will only be recognized by the Dreamweaver program. l

When you created a new template, a folder called Templates was placed at the root level of the site you created the template for.

l

To share that template with another user, ask the user to create a folder called Templates (if it doesn't already exist) at the root level of the site where the template will be used.

l

Copy the .DWT file from your Templates folder that you want to share on to a floppy disk.

l

Ask the other user to then copy the .DWT file from the floppy disk into his/her Templates folder.

l

When the user starts a new document and opens Templates from the Windows menu, the copied template file will be available to use.

Februrary, 1999

Page 13

I nfoS heet

Macromedia Dreamweaver Basics Boston College

Dreamweaver Preferences l

Select Preferences from the Edit menu.

Below are summaries of the options offered in the Preferences categories which were not covered in previous sections. For more detailed information, click the Help button in the Preferences dialog box.

General The General category offers you options for changing the appearance of the user interface. Recommended settings are to have Update Links set to prompt, have Faster Table Editing on and have Show Only Site Window on Startup on. The others are personal preference.

Floating Palettes This preference allows you to indicate which paletts always appear in the document window.

Highlighting Dreamweaver allows you to create web page templates which you can give to other dreamweaver users to create pages from. The highlighting preference lets you customize the colors used when designating the different regions in the templates. You can set up a template with a "locked" region that is not editable (usually red) and an unlocked region which is editable (usually green)

Fonts / Encoding This is used to set the default fonts and font encoding.

HTML Colors This allows you to set the default colors for document background, text, comments, and tags.

Februrary, 1999

Page 14

I nfoS heet

Macromedia Dreamweaver Basics Boston College

HTML Format This allows you to set the default formatting for the raw HTML code; indenting of table tags, wrapping, line breaks (LF UNIX is recommended for working with BC web server) and letter case.

HTML Rewriting When Dreamweaver opens an existing web page, it can fix minor errors caused by bad HTML (tags not closed for example) as the file is opening. This preference allows you to turn this feature on or off.

Invisible Elements This allows you to display or hide the symbols for invisible items such as named anchors, line breaks, comments etc. When you are starting out in HTML, having these symbols on is a good idea. Line break symbols can crowd the page so unless you really need to see where your BR tags are, you should turn this one off.

Layers This preference is used to define the default settings for new layers.

Site FTP This preference is used to set up the appearance of the Site window and configure FTP settings not included in the New Site dialog box (such as firewall settings).

Status Bar This preference sets the option for the status bar at the bottom of the document window. The connection speed setting is used in the calculation of download time estimations.

Style Sheet Format This preference controls how Dreamweaver write the code that defines the styles.

Translation This preference controls when Dreamweaver translates server-side-include commands. The default is to translate SSI in all documents.

Februrary, 1999

Page 15