LAB 6 – CSS, JAVASCRIPT and DREAMWEAVER PART 1

Last week we learned how to code HTML keeping layout structural elements (DIVs), style elements (CSS) and content separate. This is important for designing good web pages. Using this approach, it is easy to apply the same style to multiple pages, or to modify a single style sheet to change a bunch of pages at once (which is really all the same side of the coin). We have already used a bit of cascading style sheets, because the styles you applied to your DIVs used CSS styles. You also defined some styles last week for various tags for your advanced examples. However, we have yet to really talk about Cascading Style Sheets in much detail.

CSS – Cascading Style Sheets

* Styles define how to display HTML elements

* Styles are normally stored in Style Sheets

* Styles were added to HTML 4.0 to solve a problem

* External Style Sheets can save you a lot of work

* External Style Sheets are stored in CSS files

* Multiple style definitions will cascade into one

Take a look here to see a demo showing how different style sheets change the look and feel of a web page: http://www.w3schools.com/css/demo_default.htm

Please now read this page about style sheet syntax: http://www.w3schools.com/css/css_syntax.asp

And this page about how to embed style sheets into a page:

http://www.w3schools.com/css/css_howto.asp

Note the use of the LINK tag to do this. An external style sheet may be linked to an HTML document through HTML's LINK element: <LINK REL=StyleSheet HREF="style.css" TYPE="text/css">. The great advantage of an external style sheet is that you can call it over and over again on different pages of the same site. If you ever want to change the look and feel of your site entirely, you can edit this one style sheet and it will cascade into all the rest of the pages… see… CASCADING style sheet.

Please go to this page and edit style properties. http://www.w3schools.com/css/css_examples.asp
For example, in the set background color page, change the background color from yellow to red and apply the change. Please take a look at many of the examples so you know how many different kinds of styles you can set.

Try this piece of code for an HTML page, below. How do classes work to help you define general and specific implementations of styles?

<html>
<head>
<title>Stylesheet Exercise 4</title>
<style type="text/css">

</style>
</head>
<body>
<p class="general">This string of text is of class "general".</p>
<p class="important">This string of text is of class "important".</p>
<p class="quotation">This string of text is of class "quotation".</p>
</body>
</html>

Note that you have A LOT of control over the look and feel of text using CSS!

Now, make your own page with these specifications: Paragraph text is set to the color red, has a font-size of 14 pixels (px), and is of font-family arial. Heading 1 (h1) is set to the color "#660000", has a font-size of 24 points (pt), is of font-family arial, and has the property text-align set to center. Make a navigation bar for the top of the page that looks like this (your background images can be different) – hint, try three <DIVS> with background images and borders around them. Note the text above the header bar in the image below… try to replicate that too…

Take a look at this example: http://www.dynamicdrive.com/style/csslibrary/item/css_indent_menu/

Try saving the images to your desktop, and recreating this menu system locally. Note location of images to make this effect.

For reference to CSS-styles… http://www.w3schools.com/css/css_reference.asp

http://www.culturedcode.com/css/reference.html

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… 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

The point of the exercises above are to help you see what is possible with CSS, DHTML and Javascript. You are not expected to become a Javascript programmer. However, you do need to know how to develop with CSS because it is the right thing to do.

DREAMWEAVER PART 1.

Please take the following Dreamweaver tutorial as time permits. We’ll come back to this next week as well, if you run out of time.

http://www.adobe.com/devnet/dreamweaver/articles/getting_started_dreamweaver_cs3.html

Also see: http://www.adobe.com/devnet/dreamweaver/?navID=gettingstarted

For more tutorial content, especially the “Learning the basics” section, including:

Creating New Pages, Styling text using the Property inspector, Addind Images, Creating Links, and Using CSS.