PDA

View Full Version : How to insert Java Scripts when working in Dreamweaver CS3



Johnny Tie
11-11-2010, 10:40 PM
I'm currently learning web design, but at the same time, I'm doing the ambitious task of also creating a personal website of my work. I came across Dynamic Drive.com while looking up tutorials for making slide show banners. Anyways, long story short; I'm using Dreamweaver CS3 to create my website and I'm using both HTML and CSS coding to do it. My question to the forum is if these scripts are compatible when using Dreamweaver, and if so, is there a chance anyone could perhaps direct me to any information or tutorials in how I can implement those scripts into the HTML and CSS coding part? For example; right now would like to use The Ultimate Fade-in slideshow (v2.4) found in the Dynamic Drive Script library, here's the link:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

In order to do a slide show style banner on my main page. I will forever be grateful if I can get a quick response back in how to install this script as well as the general knowledge of doing the same with any other script.

Thank you! :D

-Johnny!

ddadmin
11-12-2010, 06:54 AM
While I'm not directly familiar with DW and its interface, the idea should be the same across most HTML editors. Simply follow the instructions on the script page as is:

1) Download the .js and .css files associated with the script to the same directory as where your page resides in.

2) In DW's code view, add the code of Step 1 inside the textarea to the HEAD section of the page, and Step 2's code in the BODY, respectively.

Save your page and verify the script works locally when the page is viewed in your favorite browser.

Johnny Tie
11-12-2010, 07:39 PM
While I'm not directly familiar with DW and its interface, the idea should be the same across most HTML editors. Simply follow the instructions on the script page as is:

1) Download the .js and .css files associated with the script to the same directory as where your page resides in.

2) In DW's code view, add the code of Step 1 inside the textarea to the HEAD section of the page, and Step 2's code in the BODY, respectively.

Save your page and verify the script works locally when the page is viewed in your favorite browser.
Hey, thanks alot for getting back to me soon. But I'm afraid I'm still having difficulty understanding those directions. Like I said, I'm just starting to learn web design and I'm doing so on my own, so I'm a lil new to the lingo used. When you said to download the .js and .css to the directory, is that to the file folders labeled css or perhaps straight into the site folder that contains the index page? As for inserting the codes into the HEAD and BODY of the page, I see two sets of them in the code view. Would it be the very first HEAD and BODY found in the beginning of the code, or since I'm working with Div tags, does it have to be at the beginning of a new div tag? Can you give me an example of a coding with the inserted script? You kinda have to dumb it down for me a bit -___-

-Johnny!

ddadmin
11-12-2010, 07:46 PM
When you said to download the .js and .css to the directory, is that to the file folders labeled css or perhaps straight into the site folder that contains the index page?

Both files should go straight to the folder that contains the index page, or to be more precise, the page that will display the slideshow. You can save these files in a different directory as well, though at this point it might just confuse things a bit for you.


Can you give me an example of a coding with the inserted script? You kinda have to dumb it down for me a bit -___-

Take a look at the developer's view version (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow_dev.htm) of the sldieshow script- notice where each block of code should go within the webpage.

Johnny Tie
11-12-2010, 08:05 PM
Both files should go straight to the folder that contains the index page, or to be more precise, the page that will display the slideshow. You can save these files in a different directory as well, though at this point it might just confuse things a bit for you.



Take a look at the developer's view version (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow_dev.htm) of the sldieshow script- notice where each block of code should go within the webpage.
Ok, I see what you mean. But here's another thing; I have made a drop down menu on the page and DW has provided the coding, so there's already scripts inserted into the HEAD and BODY. Do I just insert these new scripts after the other ones in both the HEAD and BODY?

As for the .js and .css, you say they can be sourced out from a different directory? Personally, I would like to also make this as clean as possible. So if I can create new folders, please let me know how to do that.

-Johnny!

ddadmin
11-13-2010, 12:56 AM
Do I just insert these new scripts after the other ones in both the HEAD and BODY?

Yep.


As for the .js and .css, you say they can be sourced out from a different directory? Personally, I would like to also make this as clean as possible. So if I can create new folders, please let me know how to do that.

Sure, in that case, you just need to modify the path to the .js inside the code you add to the HEAD section of your page so it points to where the .js file is located. Use an absolute URL if you're not sure the correct path, for example:


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

<script type="text/javascript" src="http://mysite.com/myscriptsdirectory/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>