Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> How To Put Javascript And Css In Dreamweaver
Nani Cheri
post Jul 1 2005, 07:50 AM
Post #1


Super Member
*********

Group: Members
Posts: 370
Joined: 22-April 05
Member No.: 6,024
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

(list)

Go to the top of the page
 
+Quote Post
sachavdk
post Jul 11 2005, 12:34 AM
Post #2


Member [Level 1]
****

Group: Members
Posts: 62
Joined: 11-July 05
Member No.: 9,266
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?

(list)

Go to the top of the page
 
+Quote Post
sachavdk
post Jul 11 2005, 12:53 AM
Post #3


Member [Level 1]
****

Group: Members
Posts: 62
Joined: 11-July 05
Member No.: 9,266
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 unsure.gif .

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 wink.gif

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Jul 11 2005, 01:42 AM
Post #4



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
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.

(list)

Go to the top of the page
 
+Quote Post
sachavdk
post Jul 11 2005, 03:39 PM
Post #5


Member [Level 1]
****

Group: Members
Posts: 62
Joined: 11-July 05
Member No.: 9,266
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 wink.gif. 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 smile.gif.

(list)

Go to the top of the page
 
+Quote Post
magiccode9
post Nov 5 2005, 04:32 PM
Post #6


Premium Member
********

Group: Members
Posts: 162
Joined: 1-November 05
From: SATA II
Member No.: 13,683
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, sad.gif ), 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

(list)

Go to the top of the page
 
+Quote Post
Nani Cheri
post Nov 6 2005, 08:28 PM
Post #7


Super Member
*********

Group: Members
Posts: 370
Joined: 22-April 05
Member No.: 6,024
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, sad.gif ), 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

(list)

Go to the top of the page
 
+Quote Post
andres
post Nov 7 2005, 01:42 AM
Post #8


Newbie [Level 1]
*

Group: Members
Posts: 14
Joined: 11-October 05
Member No.: 12,798
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.

(list)

Go to the top of the page
 
+Quote Post
cragllo
post Nov 11 2005, 04:18 PM
Post #9


Sorry for not being active, Uni :(
********