How to Use CSS Features in Adobe Dreamweaver CS4

In the CS4 version of Adobe Dreamweaver, a number of changes have been implemented for creating a new CSS Rule. This article is a summary of those changes.

1. An important new feature is two buttons in the Properties panel that allow you to switch from CSS properties for an element to HTML properties for an element.
2.
Step 2

If you add a new element to a page and want to create a CSS Rule for it, click the CSS button in the Property inspector. Choose “New CSS Rule” from the Targeted Rule menu and click on the Edit Rule button.
3.
Step 3

New CSS Rule dialog

The New CSS Rule dialog is quite different. The menu and description of Selector Type is much more accurate now. The “Advanced Selector” type is gone. The choices now include: tag, class, id and compound selector. Dreamweaver now uses the term “contextual selector” to describe what they mean by Compound Selector. Dreamweaver still suggests a selector based on the selection in the document. It also offers you a detailed description of the specificity of that selector and allows you to either make the selector Less Specific or More Specific. You can also pick the location where the new rule will be saved.

How to Set up an Ftp Connection in Adobe Dreamweaver Cs4

A Step by Step walk through to help you define a site and set up an FTP connection using Adobe Dreamweaver CS4.

  1. Open Adobe Dreamweaver CS4.Click on the “Site” tab.

    Click on “New Site…”.

  2. Step 2

    Name your website in the first box on the page.

    Enter the HTTP Address (URL) of your website in the second box on the page.

    Click the “Next” button.

  3. Step 3

    Select whether or not you want to use a server technology on your website.

    If you choose “Yes” select the appropriate server technology from the dropdown box.

    Click the “Next” button.

  4. Step 4

    Select how you want to work with your files.

    Select the folder on your computer where you wish to store your website’s files.

    Click the “Next” button

  5. Step 5

    Select FTP from the top dropdown box.

    Enter the FTP address of your website server.

    Enter the name of the folder on your website server where you will store the website files.

    Enter your FTP login name.

    Enter your FTP password, select save if you wish for dreamweaver to save your password.

    Click the “Next” button

  6. Step 6

    Enter the URL of your website.

    Click the “Next” button.

  7. Step 7

    Select to either enable or disable file check in / out.

    Click the “Next” button.

  8. Step 8

    Verify all of your FTP information.

    Click the “Done” button.

How to Make a Website With Adobe Dreamweaver CS4

Designing a website in Adobe Dreamweaver CS4 requires some understanding of web concepts but is a straightforward activity explained in the steps below. Dreamweaver CS4 provides users with scalable functionality that supports the design of a site that is capable of taking advantage of emerging Internet technology. With Dreamweaver, a user can create a simple personal or family site or a complex site with ecommerce functionality that meets the needs of a moderate-sized business.

    Designing A Site

  1. Step 1

    Open Dreamweaver CS4 and click Site and New Site as in Image 1. This will bring up a dialogue box titled “Site Definition for Dreamweaver…” Ensure that the Basic button is selected in the dialogue box also visible in Image 1.

  2. Step 2

    Begin the Site Definition process by clicking the Next button. Fill in the required information and complete the process. The final step of the Site Definition process displays a Done button at the bottom of the screen as in Image 2. Click Done.

  3. Step 3

    Click File then click New to add a page to the Dreamweaver Site. Select HTML from the available options as in Image 3. Click Create in the bottom right corner of the Dialogue Box.

  4. Step 4

    Populate the blank page with the information that users should see first when visiting the site. This page is often referred to as the “Home” or “Index” page. Save the file as index.html. Once saved, the file will appear in the site directory in the bottom right corner of the screen as in Image 4.

  5. Step 5

    Create the folders that will be used for other file types to keep the site organized. Right click on the site to see the drop down list with the New Folder option as in Image 5. Create a folder for other Pages, Images, .PDF Files and any other folder needed for the site also visible in Image 5.

  6. Step 6

    Click File then click New to add additional pages to the site. Link pages together with the “Point to File” utility at the bottom of the program. A personal site could include a “Contact” page, an “Interests” page and an “About Me” page. Other pages can be added in the same way.

  7. Step 7

    Upload the files to the web hosting directory by selecting the files to upload. Right click on the selected files and click Put from the drop down menu.

How to Use Photoshop SmartObjects in Adobe Dreamweaver CS4

Adobe Photoshop SmartObjects were introduced in Adobe Dreamweaver CS4. The SmartObject is connected to a Photoshop PSD file that can be used and modified on various pages as a web image. Here is how to work with it.

1. SmartObjects from a single PSD file can be used in multiple instances in a website. Each instance can be modified and still remain connected to the originial PSD image.
2.
Step 2

Start with a page that has been saved. Select Insert > Image or drag and drop a PSD file onto the page.
3.
Step 3

The Image Preview Dialog will appear. Here you can select the file format you want, crop, set quality and make other image optimization choices. When you are finished, click OK.
4.
Step 4

The image appears on the Dreamweaver page with a SmartObject badge in the upper left corner. The badge will notify you that the image is in sync with the original Photoshop image, or out of sync. The image shows a badge indicating “in sync.”
5.
Step 5

Here, the image is “out of sync.” When the image is out of sync, it means that the image has been modified, either in Dreamweaver or in Photoshop. Perhaps you scaled the image in Dreamweaver to be smaller than the original Photoshop object.
6.
Step 6

You have several choices in Dreamweaver when your image is out of sync. You can see them by right-clicking (Ctrl-Click on Mac) on the image to see the menu.
7.
Step 7

If you select “Update from Original” the web image will be rerendered in the selected size and optimized for that placement. You can select “Reset Size to Original” and the image will return to its original size.
8.
Step 8

If you modify the image in Photoshop, the changes are made automatically in Dreamweaver when you save in Photoshop. When a SmartObject has been modified in Photoshop, you see a red arrow at the bottom of the web image in Dreamweaver. If you choose “Update from Original” now, the image contents will update, but NOT the size being used in a particular instance of the SmartObject. So, for example, if you are using a single PSD image in a thumbnail, a sidebar graphic and a footer graphic, each will retain its size settings while updating its contents.
9.
Step 9

You can also work on SmartObjects by accessing them in the Assets panel. Using this method, you can choose “Update from Original” when an image was changed in Photoshop and all the SmartObjects will be updated at once, rather than going through the Dreamweaver pages where the SmartObjects were placed one by one.
10.
Step 10

When SmartObjects are used in Templates, updating the template’s dependent pages will update the images.

How to Add Flash SWF Files to a Page in Dreamweaver CS4

The way Dreamweaver handles embedding Flash SWF movies (in .swf format) to a page has changed in Adobe Dreamweaver CS4. It’s still very easy to do, but now it complies with web standards. Here are the steps.

  1. Either prepare a Flash animation movie yourself or download a free .swf movie from the web to use on your page.
  2. Step 2

    Open a page in Dreamweaver and place the cursor in the position where you want to insert the movie.

  3. Step 3

    Choose Insert > Media > SWF. A Select File dialog will open. Navigate to the .swf file and choose it. I suggest that you store the .swf file in the same folder as the .html file in which you are embedding it.

  4. Step 4

    Fill in Object Tag Accessibility Attributes to give your movie a title for accessibility purposes.

  5. Step 5

    Dreamweaver inserts the Flash code. You can preview it using the Play button in the Properties panel. Use the Properties panel to set the width and height for the movie and to set Loop and Autoplay the way you want it. Save your work.

  6. Step 6

    In this process you see a message from Dreamweaver telling you that you need to save the dependent files swffix_modified.js and expressinstall.swf into the Scripts folder. Click OK to do this. When you upload the page to the server, upload the HTML page, The SWF file and the Scripts folder.

Tips & Warnings
  • There was an “active content” script in older versions of Dreamweaver that required Internet Explorer users to accept the active content in order to view the movie. That is gone in the CS4 version of Dreamweaver.
  • The OBJECT tag is now used to embed the movie, rather than the deprecated EMBED tag.
  • The Express Installer script gives you an in-place Flash Player installation right on your web page.

Recent Posts

Adobe Dreamweaver CS4 Links

Other