LAB 6 – CSS, JAVASCRIPT and DREAMWEAVER PART 1

LAB 7 –JAVASCRIPT and DREAMWEAVER

FROM CSS TO JAVASCRIPT:

What is javascript? NOT Java. Java is a “server-side” programming language. Javascript tell the “client” (eg. the browser) what to do. So, Javascript or JS :

* is designed to add interactivity to HTML pages

* is a scripting language

* is a lightweight programming language

* consists of lines of executable computer code

* is usually embedded directly into HTML pages

* is an interpreted language (means that scripts execute without preliminary compilation)

* usable by everyone without purchasing a license

Try this code:

<html>

<head>

<title>Untitled </title>

</head>

<body>

This is an<b onmouseout="this.style.color = 'black';" onmouseover="this.style.color

= 'red';" align="justify"> example </b>of changing the color of text using a MouseOver.

</body>

</html>

The code above works using the OnMouseOver “event” that occurs when you move your mouse over the word in question. The event that happens is actually a very very small snippet of Javascript, not CSS, that is embedded in the tag.

In most cases, you need to use a special syntax to write Javascript code. Try this snippet below:

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

Note the script tag! This tells the browser to try to execute Javascript code. In this case, the code executed is very very simple.

Javascript can do a bunch of the things that any computer language can do… evaluate expressions, declare variables, etc… The point here is not to try to teach you a whole programming language. However, one thing that is very powerful about Javascript and DHTML/CSS is that Javascript can help you change states of objects that you create using your DHTML code. We already saw an example with the OnMouseOver and OnMouseOut built in function. Here is a more complicated one. Can you figure out how it works (sort of?)

<HTML>

<HEAD>

function HideContent(d) {

if(d.length < 1) { return; }

document.getElementById(d).style.display = "none";

}

function ShowContent(d) {

if(d.length < 1) { return; }

document.getElementById(d).style.display = "block";

}

//--></script>

</head>

<body>

Click <a

onClick="ShowContent('uniquename'); return true;"

href="javascript:ShowContent('uniquename')">here</a> to see something wonderful!

<div

id="uniquename"

style="display:none;

position:absolute;

left:200px;

top:100px;

border-style: solid;

background-color: grey;

padding: 5px;">

Alright, it ain't that wonderful. Make it go <a

onClickr="HideContent('uniquename'); return true;"

href="javascript:HideContent('uniquename')">away<a/>

</div>

</body>

</html>

The first function, ShowContent, is called when click on the link here on the webpage… it changes the visibility of the DIV from display:none (ie. hidden) to display:block, which is visible. The hide function operates vice versa. There is another CSS property called visibility (visible or hidden are its properties). The display and visibility properties are similar but not identical, see: http://www.devx.com/tips/Tip/13638

You are not expected to become a Javascript programmer but the above examples hopefully give you hands on examples of how Javascript code is called and functions in pages.

DREAMWEAVER PART 1.

Please take the following Dreamweaver tutorials. First go to this site: http://www.adobe.com/devnet/dreamweaver/articles/getting_started_dreamweaver_cs3.html

Watch the following tutorials:

Setting up a site

Create a new document

Setting Page Properties

Inserting an image placeholder

Inserting Text

Inserting Images

Creating Links

Previewing the Page in your Browser

Publishing your site

For understanding how Dreamweaver deals with CSS and absolutely positioned DIVs, please see the Adobe Dreamweaver CS3 help pages here:

http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WScbb6b82af5544594822510a94ae8d65-7e13.html

in particular read: Creating a page with a CSS layout, About AP Div elements, HTML code for AP Div elements, and Insert an AP Div.

NOW IT IS TIME TO GO FROM TUTORIAL TO PRACTICE – this may end up being homework depending on how much time you have (download a free trial of Dreamweaver CS3). Replicate the following page (see below) as best you can in Dreamweaver by hand. You do not need to create actual search functionality! Just layout. Hint: search forms and buttons are something you can have Dreamweaver “create” for you. You may need to use <div>, <span> or <table> to get the layouts to work. Here there are two rows and four columns should you go the table route. You can also nest tables if you need to.