Advanced Topics In Web-design

Tutorial Assignment:

Advanced topics in Web-design

Introduction

In this last tutorial of our course you will learn how to combine your knowledge of HTML and FrontPage 2000 to create professionally-looking web sites containing framed pages, JavaScripts and Flash animations.

Learning Objectives

This tutorial will help you to learn:

How to crate and manage framed HTML pages
How to improve functionality of HTML code by adding scripts
How to make your pages more attractive by inserting Flash animations.
How to insert Java applets into your Web-page.

Step-by-Step Instructions

1. Creating a framed page

Using File - New menu in FrontPage choose a framed template "Banner and Contents". FrontPage will create a blank framed page with five views (Normal, No Frames, HTML, Frames Page HTML, and Preview) instead of three (Normal, HTML, Preview) as in usual cases. In the view "Frames Page HTML" the following code will be automatically generated.

<html>

<head>

</head>

</frameset>

<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>

</noframes>

</frameset>

</html>

The page is divided into frames. The collection of several frames is called a frameset. Framesets can be nested as in this case. Each frame has the default name within the frameset. Particularly, the frames are "banner", "main", and "contents". In the case if some browser does not support frames, the section <noframes></noframes> will display the appropriate message. Each frame has its default target. For example, frame "contents" has the default target "main", that means any link placed in "contents" will cause a change of contents in frame "main". The default target can be modified. Given below is a list of possible targets.

_self

_parent

_blank

_top

The target can be applied to any link as shown in this example:

<a target="_blank" href="http://www.kimep.kz"> <h1> KIMEP's Web-site </h1> </a>

Create a new framed page consisting of three sections and continue the design of the personal Web-page started in tutorial 15. You can define the initial pages for the frames in Normal or HTML view. Now your index page contains three frames and navigation through the site is more convenient.

2. Inserting scripts in HTML document

Now you will create an HTML page which allows to generate HEX color numbers by consequently clicking Red, Green and Blue scales.

Download and save on your H: drive three JPEG files showing Red, Green and Blue colors.
Copy complete page's code in TXT format.
Create an empty page in FrontPage.
Switch to HTML view and replace default code, generated by FrontPage with whose obtained from the file. Script code will be highlighted with brown, while tags are shown in blue and elements in black color.
Save your HTML file in the same place where you copied JPEG pictures (or you can modify <SRC> attributes of these images in HTML view).

Open your page in web browser (you can use File / Preview in Browser option instead) and try functionality of JavaScript. It should appear like in the picture below:

Click consequently appropriate points on each of the scales. Corresponding numbers will be placed in empty boxes. Then press button Background. Page color will change, and you get appropriate Hex color code.

Here is one more example of web page, containing JavaScript - on-line calculator.

You can copy its source code by selecting View / Source in your web browser.

3. Inserting Flash animations

You can create exciting web-pages by using Flash animations. Somehow they resemble animated GIFs,

but can be much bigger, use more colors, play sounds and even behave intellectually.

Here is a one example of Flash animation that doing on its own:

3.1 Practice inserting the following Flash animations in new web-pages:

(Right-click here to download this flash file or click for preview):

(Right-click here to download the second flash file):

(Right-click here to download flash animation, which shows current time by the clock of your computer):

Tto insert flash into your page, use the following syntax:

While inserting animations with black color, don't forget to change background of the page to black by selecting Format / Background in FrontPage.

3. Inserting Java Applets

Java applets are programs downloaded from the Web-server and executed on the Web-page. Java Applets are written in Java language and compiled with special software. Unless you are going to become a programmer or a Web designer you don't need to know how to create a Java applet. You should only know how to insert a ready Java applet into a page. An applet is represented by a file with the extension *.class. You can view some examples by clicking these links.

ANIMATOR1 , ANIMATOR2 , ANIMATOR3 , ANIMATOR4 ,

ARCTEST , BLINK , DitherTest , DRAWTEST , IMAGEMAP

Practice inserting Java applets using these code samples.

Click here to download a ZIP file containing .class, .java, sound and image files.

Then create a html document inside the folder with files and insert the following code:

1. Tic Tac Toe code sample.

<html>

<head>

<title>TicTacToe v1.1</title>

</head>

<body>

<h1>TicTacToe v1.1</h1>