1
Dreamweaver Tutorial 2
Meta tags
Dreamweaver provides an easy way to enter descriptions and keywords into your web pages. These tags are invisible in the displayed page because they appear in the HEAD section of the document rather than the BODY of the page. The HEAD section may also contain scripting such as javascript. Each search engine uses a different way of indexing metatags, titles and opening parts of pages to rank your site.
Inserting Metatags
Go to the HEAD section in the code. Insert Tag HTML Tag Meta NAME: HTTP Equiv: Content Type Description: Provide 2-3 short sentences describing the purpose of this page. Use unique descriptions not included in the body of your page.
History
The history palette in Dreamweaver will let you move back several steps in your process to uindo a number of steps. Choose Window > History
Move the slider up several steps and they will be undone. Slide it back into place to redo the steps.
2
Javascript
JavaScript can greatly enhance the interactivity of your web page. Great stuff you see on the net such as image flips, drop down menu boxes, live clocks etc are all written in JavaScript. If you want your web pages to look more than just a bunch of stale and boring paper documents converted into digital form, you'll want to learn this neat programming language.
1.
Dynamically changing the document’s background color
Ok, let's begin by seeing how to change the background color of the document using JavaScript. Take a look: You can change blue to any color name, or the color's hex representation (ie: #000000).
2.
Status Bar messages
One trick you may have seen on the web is a status bar message that is initiated only when the user moves her mouse over a link: Geelong Here's the code used:
Geelong I captured the mouse's "position" by using the onMouseover and onMouseout event handlers of JavaScript. Event handlers are added directly inside certain HTML tags such as the
tag, and allows you to run code that react to a certain event (such as when the mouse moves over a link). In this case, the code displays "Click here for Geelong!" in the status bar when the surfer moves her mouse over the link "Geelong", and resets the status bar when the mouse moves out.
3.
On the fly text
JavaScript allows you to generate text on the fly. The basic way to write out text in JavaScript is by using the document.write() command. Whatever you put inside the parentheses, JavaScript displays it on the page.
3 Taking this basic idea one step further, the following script writes out the last modified date of this page. In this case a variable is created called modifieddate to hold this date. The above is a perfect example of "on-the-fly" text. The text reflects the last modified date of your page, and is updated automatically whenever you edit the page and save it!
4.
Dialog Boxes
Dialog boxes are little "pop-up" boxes that can be used to display a message, ask for confirmation, user input etc. Three types of dialog boxes exist in JavaScript- alert, confirm, and prompt. I'll show you an example of each: Alert Confirm
Prompt
4 All of the boxes allow you to customize the message simply by entering in a different text inside the function's parentheses. Go ahead, try it now on your web page!
5.
Displaying a Random Message
The following javascript allows you to display random messages on your web page. In this case there are 3 random messages (reload this web page to see another quote) The key here is the code: var whichquote=Math.round(Math.random())*3 Math.random() randomly generates a real number between 0 and 1. Math.round() rounds that number to an integer. Multiply by 3 as there are 3 Now, quotes are great, but what if you want to display a random image? Simple. Just change the text to the ![]()
tag:
6. Advanced Javascript Applications
A. Live Clock
B. Drop Down Menu Box
A drop down menu box is an efficient way of making a selection. Here is the code.
6
C. Background Colour changer
Change the background color!
D: Automatically Generating Javascript in Dreamweaver
A great deal of javacode can be created automatically within dreamweaver. The following steps will guide you through creating a menu in dreamweaver. 1. Save this image or use one of your own.
2. Create a new page and save it as menu.html. Place the image you have downloaded above inside your menu.html . Then go to Window > Behaviors to open the Behaviors panel 3. Now select your image and click on the + sign on the Behaviors panel. From the popup menu choose EFFECTS Grow/Shrink OK 4. 5. Save menu.html and open it in Internet Explorer and click on the image. Experiment with other behaviours.
E. Investigate the Javascript resources indicated on the Multimedia Authoring Web Page
References Andy’s Javascript http://www.geocities.com/SiliconValley/Station/4320/resources.htm
http://www.adesdesign.net/php/tutorials/dreamweaver/java_menu.php