Today, I’m going to teach you to how to create a simple website using CSS, or Cascading Style Sheets. CSS was developed to allow web designers to save time when wanting to change the look of their website.
CSS uses the syntax:
Selector { property: value; }
When put into practice, this looks something like:
h1 { color: #000000; }
There are two ways to place CSS in a website : using a <style> tag in the head of the document, or creating a separate CSS document to be retrieved by the page as it loads. The latter is significantly more efficient and allows the creator to make changes across the entire site instantaneously.
First, let’s make a simple CSS page that changes <h1> to cream and any <p> tags to bold. Let’s also change the font throughout the page to Verdana.
body{ font-family:Verdana, Arial, Helvetica, sans-serif; }
h1 { color:#FFFF99; }
p { font-weight: bold; }
To allow the page to find the CSS document, save it to the site and go to the page to which it should be applied. The following code allows for the page to read and execute the CSS document:
<link rel="stylesheet" type="text/css" href="cssTutorial.css" />
When used on a page, the CSS we created should look like this:
Hello world!
Home || Attendance Pages: 1 2 3 4 5 6 7 8 9 10 11 || Top of page
<script language="JavaScript" type="text/javascript">
In order to find the images, we must place the images in question in an array. Telling the computer how many images are to be in the array is also important. Therefore, we need a variable (let's call it "ic" for "images contained" and name the array "imageArray")
After filling the array with images (the locations of which should be of the format "(imageLocation)/(fileName)"), we set up the random number generator and tell the computer to make the choice. The final code should look something like this:
<script language="JavaScript" type="text/javascript">
var ic = 4;
var imageArray = new Array(ic);
imageArray[0] = "images/shad01.jpg";
imageArray[1] = "images/shad02.jpg";
imageArray[2] = "images/shad03.jpg";
imageArray[3] = "images/shad04.jpg";
function pickRandom(range) {
return Math.round(Math.random() * (range-1));}
var choice = pickRandom(ic);
</script>
Placing the image inside the site is only slightly more difficult than normal, because we have to once again enter Javascript. All we have to do is tell the script to write a line of HTML that reads exactly like a normal line of code, making the choice during the writing of the line. This code should look something like this:
<SCRIPT LANGUAGE="JavaScript">
document.writeln('<img src='+ imageArray[choice] +' height="200" width="150" align="center" />');
</SCRIPT>
Finally, at long last, the final product will look like this:
(Click refresh to cycle randomly through the images)
Home || Attendance Pages: 1 2 3 4 5 6 7 8 9 10 11 || Top of page
In this, our last Dreamweaver and HTML tutorial, I will show you how to create an image map that allows the user to navigate around a page. While these in-page links can cause confusion to the user, since usually a link will bring up a new page, they are useful when there is a need to jump through a long web page or back to the top of the page.
The image map will use the circle, rectangle and polygonal area shapes. The image we will be creating the map for is the following:
... where the circle sends the viewer to the top of the page, the square sends them to the first waypoint and the pentagon sends them to the second waypoint.
First, we need to set some waypoints. For the top, that waypoint is already placed. The HTML waypoint "#TOP" will always go to the top of the document. We can also place waypoints within the document using the <a> tag. To do so, all we have to do is give the tag a name that will later be called upon by a link. For instance:
<a name="numOne"> </a>
... placed anywhere in the document would provide the waypoint for any time we called "#numOne" in a link. By placing two of these such tags throughout the document (with different names, of course), we have seeded the site for the next section of this tutorial.
Creating an image map is suprisingly easy. Knowing that we will be using a circle, square, and polygon (in this case, a pentagon). Using the <map> and <area> tags, we can create a map that looks like this:
<map name="tutorial3">
<area shape="circle" coords="10,10,20" href="#TOP" />
<area shape="rect" coords="40,40,30" href="#numOne" />
<area shape="poly" coords="50,1,70,1,80,10,70,20,50,20" href="#numTwo" />
</map>
In order to place this section of code onto an image, all we need to do is add the usemap attribute. It is important to remember to use a pound sign (#) when calling the name, or else the internet will not be able to recognize the map. When used on our image, this map looks like this:
Since we are using Dreamweaver, we can then take the mapped sections and move the points around, allowing us to create the shapes where we want them without sitting around and tweaking the code. After moving the points around to make them sit where they should, the final product will be able to let the user navigate around the page like the image below:
Stay tuned in the next lessons as we begin learning how to use Flash to make a website even better!
Home || Attendance Pages: 1 2 3 4 5 6 7 8 9 10 11 || Top of page
Dyanamic Text and Input Text are two of the most important, fundamental things a person can learn in Flash, especially at the beginning. And that is a fantastic place to start.
Dynamic text is text that can change within the program. Input text can be changed by the user. In this tutorial, we are going to create an input text area, a dynamic text area and a button that links the two. In the first frame of a new document, create a textbox. In the bottom left of the screen is a menu.
chg_btn.addEventListener(MouseEvent.CLICK, chg_f);And there you have it, a simple text field that changes to the user's input. Here's what the finished product will look like:
function chg_f(event:MouseEvent):void{
dyn.text = inp.text;
}
Home || Attendance Pages: 1 2 3 4 5 6 7 8 9 10 11 || Top of page
Masks are suprisingly simple. The major things to remember when planning on using a mask are as follows:
With those notes in mind, let's start putting them to use in a new document. Make a shape on a layer labeled "Masked". Create another layer named "Mask" and place another shape in it, preferably one that is not the exact same as the previous layer. Now, to create the map, simply right click (or Ctrl-Click on a Mac) on the upper layer and click "Mask" in the menu that appears.
And there you have it, a masked layer. Simple, huh?
Home || Attendance Pages: 1 2 3 4 5 6 7 8 9 10 11 || Top of page
There are two types of tweening: Motion and Shape. Motion tweening is used for objects, while Shape tweening is used for fills. Creating either is extremely simple.
Create a new file with two layers. First, we'll deal with Shape tweening. Create a shape on the stage. Go further down the timeline, say to frame twenty, and create a keyframe (right click, add keyframe). Return to the first keyframe and in the properties bar, select "Shape" from the tween drop-down menu. Return to the final frame and move the shape. You can even change the shape entirely. This will not affect the tweening.
Home || Attendance Pages: 1 2 3 4 5 6 7 8 9 10 11 || Top of page