How to Install jQuery With Dreamweaver

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

Open a new Web page document in Dreamweaver.

Step

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

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:

Step

<script type="text/javascript" src="https://ajax.googleapis.com/ ajax/libs/jquery/1/jquery.min.js"> </script>

Step

This code makes jQuery available in the Dreamweaver document.

Step

Paste the following JavaScript code beneath the code you just added:

Step

$(function () { $('#jQueryTest').fadeOut(5000); });

Step

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

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.