How to Install jQuery With Dreamweaver

By Kevin Lee

The jQuery JavaScript library performs many complex yet common scripting tasks automatically and quickly, saving website developers and designers time and effort. The jQuery source files sit outside the HTML or CSS design of the website, usually on the same server but sometimes from a third-party resource. Add a jQuery library to an Adobe Dreamweaver website design project by linking pages to the server file that contains the source code.

Step 1

Open a new Web page document in Dreamweaver.

Step 2

Type "This is a test" on the document, and then highlight the text using your mouse. Type "jQueryTest" in the **ID** text box at the bottom of Dreamweaver to assign an ID value to the text.

Step 3

Click the **Code** tab to view the document's HTML code. Locate the **<head>** tag within the code, and paste the following text below that tag:<script type="text/javascript" src=""> </script>This code makes jQuery available in the Dreamweaver document.

Step 4

Paste the following JavaScript code beneath the code you just added:$(function () {$('#jQueryTest').fadeOut(5000);});This is a simple jQuery animation function, which allows you to verify that jQuery works. The function fades out the text you typed when the Web page loads. The fadeout effect takes 5,000 milliseconds.

Step 5

Click the **Design** tab to return to design view. Click the **Live Preview** tab, which emulates how the page will look in a Web browser. The text should fade out in 5 seconds, verifying that jQuery works. Add additional jQuery code as needed to the Web page.

Tips & Warnings

  • Remember that no JavaScript or jQuery code works if users disable JavaScript in their browsers. When creating Web applications, try to create alternative ways to handle critical functions without relying on JavaScript or jQuery alone.
  • Access a large numer of jQuery scripts from various free, online Web design libraries to add useful functions, widgets and graphical effects to your website or blog.