Adobe Dreamweaver CS4

How to Update Web Pages in Adobe Dreamweaver CS4

While you could update your website by simply uploading one or more pages at a time, if there have been many changes on multiple pages, then it makes more sense to update the entire site in one step. Using the Dreamweaver synchronization method provides more control over the updating and keeps local and remote files in proper order. Other considerations may be involved as well, such as whether you are using additional features such as Spry widgets, CSS files or Library template elements kept in separate folders.

Update web pages from your local computer to the live website by synchronizing files. Click on “Site” in the Dreamweaver top menu. If you have more than one site, click “Manage Sites” first from the drop-down menu and select the correct Website. Click “Done.” This will work in all three versions of Dreamweaver.
Step 2

Click “Site” again and select “Synchronize Sitewide.” From the window that opens, there are two choices for how to synchronize. Synchronizing the entire site is the default. Click on the down arrow next to this option to see the other choice. Select one of three options in the second box on this window: “Put newer files to remote,” “Get newer files from remote,” and “Get and Put newer files.” The only choice that makes sense when updating from a local PC to a remote site is “Put newer files to remote.” Select the “Preview” option to check how this is going to work.
Step 3

Continue with the synchronization by clicking “OK” on the new window that appears after Dreamweaver scans all the pages for a creation date. If you chose to synchronize local files only, then scan through the list and select “Put” using the upload icon for specific files.
Step 4

Update any “Library” elements in Dreamweaver, which hold reusable elements similar to templates and may appear in multiple pages with a separate process.
Step 5

Click “Modify” in the Dreamweaver top-level menu. Select “Library” from the list, then choose either “Update Current Page” or “Update Pages” to update pages containing Library elements.
- Use the synchronization process regularly for web updating to ensure both local and remote pages are the same.
- If you are using additional features like Spry widgets or CSS styles kept in separate folders, be sure to include these in the updates.
- As a quick alternative to the above steps, you might be tempted to select all the Web pages you want to update from the Local Files list that appears on the right of the Dreamweaver screen by holding down the Control Key and highlighting each one. When selected, right click and choose “Put.” However, this gives you less control over the process and may cause problems if some files do not updating correctly.

How to Create a Pop-Up Menu in Adobe Dreamweaver CS4

A pop-up menu on a web page stays hidden until a visitor hovers over it with their mouse, which activates the drop-down list containing the website links. These menus are an effective method for providing all of your page’s links in a compact and accessible way for your viewers. If you have the Adobe Dreamweaver application, you can take advantage of this dynamic feature by creating your own pop-up menus using the tools that this software provides.

Dreamweaver 9 or Later

Step 1

Launch your Dreamweaver application and create a new page or open an existing one. Click “File” then “New or File” and “Open.”
Step 2

Place your cursor in the area that you want your drop-down menu to appear, click the “Spry” tab in the “Insert” inspector and then click the “Spry Menu Bar” button. Choose a horizontal or vertical layout in the prompt that appears and click the “OK” button when finished. This action creates the default menu in the design view.
Step 3

Use the “Properties” inspector to add or subtract the number of list items in the menu by highlighting an item and clicking the plus or minus sign.
Step 4

Assign a web address to each menu item by highlighting it and typing in the “Text,” “Link” and “Title” information in the provided text boxes. This process creates the settings that take the user to the designated pages when they click on them.
Step 5

Save your file and click the “Preview/Debug in Browser” button or select the “Preview in Browser” option under the “File” menu to view the pop-up menu.

Dreamweaver 8 or Earlier

Step 1

Launch your Dreamweaver application and create a new page or open an existing one. Click “File,” then “New or File” and “Open.”
Step 2

Create a link to begin creating your pop-up menu by typing the desired text in the design view, highlighting it and clicking the “Hyperlink” button in the “Insert” inspector. Alternately, you can choose this option from the “Insert” drop-down menu. Enter the prompted information, such as the URL address, in the provided text fields.
Step 3

Select the link and assign a “behavior” by clicking the “Behaviors” option in the “Windows” menu. A “behavior” allows you to assign the pop-up action to your link.
Step 4

Click the plus sign button on the “Behaviors” tab and navigate to “~Deprecated” and then “Show Pop-Up Menu.” If you have created a pop-up menu in your version of Dreamweaver in the past, the “~Deprecated” title does not show.
Step 5

Assign the required data, such as a name and URL, for each of your menu items under the “Contents” heading and then set the display of the text under “Advanced” section. Continue by specifying the orientation of the menu by choosing an option under the “Position” heading and then format the appearance of the menu, such as the height and color, under the “Advanced” section.
Step 6

Save your file and view the pop-up menu on the page by selecting the “Preview in Browser” option under the “File” menu.

How to Switch From Adobe Dreamweaver MX to Dreamweaver CS4

Originally developed and released by Macromedia, Dreamweaver is now owned by Adobe Systems. The program allows users to design and develop websites using its visual design interface, its code view interface or a split-screen combination of the two. It also supports browser-side scripting languages such as JavaScript and CSS, along with server-side languages like PHP, ColdFusion and ASP.Net. Switching from the older MX version of the program to the newer CS4 version is a quick process for users of all skill levels.

Open Macromedia Dreamweaver MX.
Step 2

Click “Site” in the top menu bar and then select “Manage Sites.”
Step 3

Highlight the name of a site in the list on the left-hand side of the dialog box, then click the “Export” button. Select the first option in the resulting dialog box, then click “OK.” Give the exported site definition a name, select your desired save location, then click the “Save” button when prompted. Repeat the process for each site you want to import into Dreamweaver CS4.
Step 4

Close Macromedia Dreamweaver MX.
Step 5

Insert your Adobe Dreamweaver CS4 installation disc into your computer’s disc drive. Follow the on-screen prompts to input your product serial number, agree to Adobe’s product license terms, select your installation options, install the product, then register it with Adobe.
Step 6

Open Dreamweaver CS4.
Step 7

Click “Site” in the top menu bar and select “Manage Sites.”
Step 8

Click the “Import” button, locate the site definition file you exported in Step 3, then double-click its icon. Your site’s settings are automatically imported into Dreamweaver CS4 and are ready to use. Repeat the process for any additional sites you wish to import.

How to use Adobe Dreamweaver CS4 to Back up your Files

In this eHow article, you will learn how to use Dreamweaver to backup files onto a thumb drive or portable hard drive. Dreamweaver has a built in FTP (File Transfer Protocol) features which have the capability to synchronize files so that you always have a backup of your recent files. If you already own Dreamweaver, you will save a lot of time and effort by using its built in features for backing up your files. In this example, the local and remote folders will both be named Backup. You can name them whatever you want. This tutorial was created using Adobe Dreamweaver CS4. You can complete these steps with previous versions of Adobe Dreamweaver.

1. Open Dreamweaver. Go to Site, New Site. In the Site name field, type the name of your site. This site is named Backup. In the Local root folder field, click on the folder icon. Browse to the location on your computer where the Backup folder is located. If you do not already have a Backup folder, you can create one during this step.
2.
Step 2

Select the Remote Info category. Select Local/Network from the drop down menu. In the Remote folder field, click the folder icon. Browse to the location on your thumb drive or portable hard drive where a Backup folder is located. If you do not already have a Backup folder, you can create one during this step. Be sure that the Maintain synchronization check box is selected. This allows Dreamweaver to remember which files are newer – the local or remote ones. Click OK when finished.
3.
Step 3

In the Files Panel, click on the Connect to remote host button which resembles a plug. Then, click the Expand to show local and remote sites button on the right side of the Files Panel.
4.
Step 4

You are now able to see the files on your remote drive on the left and on your computer’s hard drive on the right. Synchronizing files is the best way to back them up. That is because the newer files will replace the older ones. Then, the files on your computer will match those on your thumb drive or portable drive.
5.
Step 5

Select Synchronize from the Site menu. In the Synchronize drop-down menu, select Entire ‘Backup’ site. In the Direction drop-down menu, select Get and Put newer files. Click the Preview button. This will allow you to see all of the files which will be transferred. ‘Get’ is transferring files from the remove drive to your local drive. ‘Put’ is transferring files from your local drive to your remote drive. Click OK in the Synchronize dialog box to start the process. To repeat this process, Open Dreamweaver, Open your site in the Files Panel and synchronize your files.

How to Use the Related Files Bar in Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 introduced the related files bar. It appears at the top of each document window and lists all CSS and JavaScript files that are related to the web page. Here is how to work with it.

In this example page (see image) there is only one related file. You see a link for source code (the HTML of the page) and style.css, the related file.
Step 2

Notice in the image in Step 1 that another new feature in Dreamweaver CS4 is also shown. That is vertical split view. In this view you see code and design side by side.
Step 3

If you click any one of the related files links (in this example, only styles.css) you see that on the code side of the vertical split view.
Step 4

By making changes on the code side you see the results on the design side–so in this example you could change the CSS code and see the changes take place visually on the Design side of the split view.

How to Use the Spry Tooltip Widget in Adobe Dreamweaver CS4

One of the new Spry tools in Adobe Dreamweaver CS4 is the tooltip widget. The Adobe Spry framework uses a combination of CSS and JavaScript to enhance web page features. The tooltip widget is similar to what happens when you use a title attribute in a tag, except this Spry tooltip has a style sheet and a JavaScript file attached to it that you can customize. Here is how to work with it.

Create the text in Dreamweaver where you want to add the tooltip. In this example I highlighted the acronym STEM.
Step 2

In the Spry category of the Insert bar, select the Spry Tooltip icon. In the classic workspace layout of the Insert bar it’s the last Spry icon on the right.
Step 3

The term gets wrapped in a span tag in the code that will trigger the tooltip. A div containing the tooltip contents (hidden by the CSS until needed) is also added to the page. In Design view you see a blue box with the Spry Tooltip label where you type the content that you want to appear in the tooltip. Note that the box for the tooltip contents would normally appear at the very bottom of the page, which you might have to scroll to find. It’s near the example sentence here because that’s the entire content of the example page.
Step 4

Save the page. Dreamweaver will notify you that there are two dependent files needed. Click OK and the files will be added to a folder called SpryAssets at the site root level. Remember to upload this folder to the server.
Step 5

You can set some properties for the tooltip using the Properties. Click on the blue tooltip label to see the tooltip Property inspector. For example, you can set horizontal offset and mouse behavior in the Properties.
Step 6

You’ll see a new CSS file in your CSS panel called SpryTooltip.css. Use this stylesheet to set colors and background color and other properties related to the appearance of the tooltip.

How to Use the Dreamweaver CS4 HTML/CSS Properties Toggle

A set of buttons that allow you to toggle between HTML properties and CSS properties in the Dreamweaver CS4 Property inspector is a great feature in Adobe Dreamweaver CS4. Here is how to work with it.

1. Open a page in Dreamweaver. The Properties panel (or Property inspector) in Dreamweaver CS4 contains two new buttons. One is called CSS. The other is called HTML.
2.
Step 2

When an element in the document window is selected, or when a tag is selected from the Tag selector, you can choose the properties you want to view for the element by clicking in the Properties panel.
3.
Step 3

HTML button selected

To see the HTML properties, click the button on the Property inspector that says HTML.
4.
Step 4

CSS button selected

To see the CSS properties for the same element, click the button for CSS. You can edit the rule using the edit button, if needed.
5.
Step 5

It takes a bit of getting used to at first to remember to toggle between HTML and CSS depending on what you’re doing, but it is a great convenience.

How to Use Code Navigator in Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 includes a handy new feature for users with programming skills called Code Navigator. Code Navigator lets you open any page of code linked to your HTML page right in Dreamweaver. Here is how.

1. Open a page in Dreamweaver. In Design View you choose View > Code Navigator to see the Code Navigator options.
2.
Step 2
Code Navigator Icon

In Code View you click a little icon that looks like a ship’s wheel to see the Code Navigator options.
3.
Step 3
Code Navigator Dialog

Code Navigator connects you to all the code linked to a page. You can pull it up in a Dreamweaver window and edit it right there. Here’s how it looks in Code View.
4.
Step 4

Code Navigator Dialog
5.
Step 5

All the listed files are linked and clickable. It’s contextual. Click in the appropriate spot and you can see JavaScript links. In addition, if you hover over a CSS rule, but don’t click, you see all the properties for that selector.
6.
Step 6

You can see code related to all of the following using Code Navigator: CSS, server-side includes, JavaScript files, parent template files, library files and iframe source files.

How to Use Adobe Dreamweaver CS4 Horizontal and Vertical Split View

In Adobe Dreamweaver CS4 there are new ways to view both code and design or just code. You can even view the same page of code in two windows. Read on to learn how.

1. Open a page in Dreamweaver. To view Code and Design, you can click the Split button that has been in use in Dreamweaver for several versions–or now you can choose View > Split Vertically and see Code and Design side by side.
2.
Step 2

As in previous versions of Dreamweaver, a change in one view is instantly changed in the other.
3.
Step 3

When you make a change in the Code, you still have to click in the Design window to see the change take effect.
4.
Step 4
Code Split Vertical

When viewing just the Code, you can also choose View > Split View or View > Split Vertically. You can copy and paste from one window to another. Anything you change in one window is also immediately changed in the other.

How to Use the Adobe Dreamweaver CS4 Application Bar

In Adobe Dreamweaver CS4, there’s an item called Application Bar. It behaves differently in Windows and Mac. It contains some time-saving options. Here is how to use the Application Bar.

1. The Application Bar is a little different in Windows and Mac than in Dreamweaver CS4. This is what it looks like on a Mac.
2.
Step 2

It’s placed across the top. It contains a workspace switcher, menus (Windows only) and other application controls. On the Mac you can show or hide it using the Window menu. Other Creative Suite CS4 tools also contain an Application Bar now.
3.
Step 3

Starting from the left, here’s what the icons represent. On the far left, of course, you see the Dreamweaver logo telling you which app you are using. The pull-down menu next to that allows layout choices. You can select from Code, Split Code, Design or Code and Design. The circular gear icon is Extend Dreamweaver. That pull-down menu allows access to the Extension Manager or you can Browse for Web Widgets or Browse for more extensions. The icon that looks vaguely like a wireframe site diagram is the Site icon, where you can define a new site or manage sites.
4.
Step 4

Workspace Menu

Where you see the word “Classic” in the Application Bar image in Step 1 there is a pull-down menu to choose a workspace configuration. There are several new choices in CS4. The default workspace is called Designer. In the Designer workspace, the Insert menu is in a panel that takes up a great deal of screen space when compared with the more compact “classic” Insert bar arrangement. The full menu choice for workspace configurations is shown in the image. You can create your own optimal workspace for your setup using the “New Workspace” option. Once you define it you can set it as your default.

Tips & Warnings

*
Not being a Windows user, I can’t tell you what the Menus option of the Application Bar offers.

« Earlier Posts