How To Put Javascript And Css In Dreamweaver

Nani Cheri

Jul 1 2005, 07:50 AM

HI,

If anybody worked with dreamweaver, and succesfully used JS codes and CSS in their website, please reply and tell me how to, cause when I try too put Javascripts it won't work....I also tried to put an textarea with scrollbars in a table...put in design view the content won't stay in the widths and heights I typt in...can someone help?

thanks

Reply

sachavdk

Jul 11 2005, 12:34 AM

No the best is if you work with dreamweaver (I've experienced this) to work either with code or with WYSIWYG. Not combining the two.
But if you wrote code, the best way is to test it in your webbrowser.
But what wouldn't work with your css and javascript?

Reply

sachavdk

Jul 11 2005, 12:53 AM

Since I can't edit my previous post, I'm gonna have to post another reply.
I'm sorry for that but I wanted to preview it but I posted it

.

When you are using CSS, make a stylescheet (ie in notepad) and ie name it "standard.css".

It contains this as example:

CODE

.titel {
color: 898899;
font-size: 25px;
font-family: verdana;
cursor:default;
border-style:solid;
border-width:0;
vertical-align:middle;
padding-left:10;
}
.inhoud {
color: white;
font-size: 13px;
font-family: verdana;
cursor:default;
border-width:0;
vertical-align:middle;
}
.inhoud a:link { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:visited { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:active { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:hover { color:#ffffff; text-decoration:none; font-size: 13px; }

This is a piece of a css sheet I am making.

Now in the <head></head> part of your html code you put following line of code:
<link rel="stylesheet" type="text/css" href="directory/standard.css">

that's it. Now as example I want to add the inhoud style to a tablecell.

CODE

<html>
<head>
<title>Document title</title>
<link rel="stylesheet" type="text/css" href="directory/standard.css">
</head>
<body>
<table>
<tr>
<td class="inhoud">Some text</td>
</tr>
</table>
</body>
</html>

now dreamweaver will automatically give you a list with possible css styles from the stylesheets you've included when you type class=", then you can choose your style with the up and down arrow keys and confirm with a tab-key push. Dreamweaver will automatically insert the chosen style and add the final quote (").

For you're javascript, I don't know what code you want to use but here's a little example:

CODE

<html>
<head>
<title>document title</title>
<script language="javascript" type="text/javascript">
function showexample()
{
alert("This is an example of the use of a JavaScript code");
}
</script>
</head>
<body>
<input type="button" value="Click me for the example" onClick="javascript:showexample();">
</body>
</html>

Hope this helps a bit but if you have other questions, ask

Reply

Tyssen

Jul 11 2005, 01:42 AM

QUOTE(sachavdk @ Jul 11 2005, 10:53 AM)

CODE

.inhoud a:link { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:visited { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:active { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:hover { color:#ffffff; text-decoration:none; font-size: 13px; }

Can I just point out that the reason why Cascading Style Sheets are called that is cos the styles cascade down from one element to another.
If you set a style on your <a> tag, all states of the tag will pick up that style. You only need to add additional rules for when you want something different to occur.
So taking the above example, you would be better off doing:

CODE

.inhoud a { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:visited { color: red; }
.inhoud a:active { color:green; }
.inhoud a:hover { color:black; text-decoration:underline; }

Also, you've specified a font in your .titel and .inhoud classes, whereas if you do this:

CODE

body { font-family: verdana; }

it will flow down through every element in your document and you don't have to keep repeating it.

Reply

sachavdk

Jul 11 2005, 03:39 PM

QUOTE(Tyssen @ Jul 11 2005, 03:42 AM)

Can I just point out that the reason why Cascading Style Sheets are called that is cos the styles cascade down from one element to another.
If you set a style on your <a> tag, all states of the tag will pick up that style. You only need to add additional rules for when you want something different to occur.
So taking the above example, you would be better off doing:

CODE

.inhoud a { color:#ffffff; text-decoration:none; font-size: 13px; }
.inhoud a:visited { color: red; }
.inhoud a:active { color:green; }
.inhoud a:hover { color:black; text-decoration:underline; }

Also, you've specified a font in your .titel and .inhoud classes, whereas if you do this:

CODE

body { font-family: verdana; }

it will flow down through every element in your document and you don't have to keep repeating it.

Yes, in some cases you're right. But maybe in this case this isn't really a good example. I think yours is better

. But this is a piece from a site I am making and the style MAY NOT occur on every element since I work with tables and php that generates different tables, and the style depends on the cellcontent.

But you said something I didn't knew. However I work with dreamweaver and the fill-list automatically appears when you type < I hadn't noticed the class attribute for links. So I learned something new as well

.

Reply

magiccode9

Nov 5 2005, 04:32 PM

in dreamweaver, you can add javascript and style sheet as following:

in the windows menu, open the style sheet window, then in the bottom of the small window, you can see that have some icon, hover over the mouse on each icon, a tooltip will show up that tell you what they are function. let say add new style, a window will be promped you whether to to select make a internal or external one.

about javascript, you can pop-down the menu called insert(that may be the menu on left or right, but no so far, coz i'am using it in work, not home,

), then, find an item call insert javascipt. also, a small window open that asked you to write vbscript or javsscript ( and version you use ). when you have finished it. a small achor icon will show up in you document. just like a layer.

- hope this help

Reply

Nani Cheri

Nov 6 2005, 08:28 PM

QUOTE(magiccode9 @ Nov 5 2005, 06:32 PM)

in dreamweaver, you can add javascript and style sheet as following:

in the windows menu, open the style sheet window, then in the bottom of the small window, you can see that have some icon, hover over the mouse on each icon, a tooltip will show up that tell you what they are function. let say add new style, a window will be promped you whether to to select make a internal or external one.

about javascript, you can pop-down the menu called insert(that may be the menu on left or right, but no so far, coz i'am using it in work, not home,

), then, find an item call insert javascipt. also, a small window open that asked you to write vbscript or javsscript ( and version you use ). when you have finished it. a small achor icon will show up in you document. just like a layer.

- hope this help

thanks thats really short and clear explained...Ill try that 2!! thanks everyone

Reply

andres

Nov 7 2005, 01:42 AM

sometimes when you're using dreamweaver (DW), some css styles aren't previewed (on DW window). for example, if you write as a CSS code:

a:link {color: cornflowerblue; text-decoration: none}

instead, you should use the following text to do the same and be able to preview it:

a {color: cornflowerblue; text-decoration: none}

plus, any JavaScript code can't be preview on the DW window.

Reply

cragllo

Nov 11 2005, 04:18 PM

What you see in design view often is not what it will look like in-browser, you need to test it in-browser to see the end result. But Dreamweaver 8 is getting better that this, and it even shows images that are linved via a url

Reply

Nani Cheri

Apr 2 2006, 01:11 PM

QUOTE(cragllo @ Nov 11 2005, 06:18 PM)

What you see in design view often is not what it will look like in-browser, you need to test it in-browser to see the end result. But Dreamweaver 8 is getting better that this, and it even shows images that are linved via a url

really? yeah I actually find it very bad you can't see javascript result in DW, you have to test it constantly. I have this problem to with a calendar i inserted with javacript in a table. But only in browser I saw that my table stretch with other the calendar, so some of my content in another column strech with it. And in DW itself it looks good. goes the calendar isnt visible yet. don't know what to do about that. But I think theres no solution for that right?

Reply

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE