Introduction

This tutorial will list the varous meta tags used and their purpose. We will discuss how search engines use meta tags and why its important to have meta tags. Although much discussion has recently arose about the need for meta tags, we still need to use them when making webpages. We’ll list the different types of meta tags and their format. We’ll also explain what each one is used for and their importance in web design and development.

Lets start by listing their format:

<meta name="stuff" content="content">

This is what the meta tag will look like . Where stuff is the name of the meta tag. Which can be any of the meta tag names listed below. And content is .. well you guessed it the content . Content holds the value of the meta tag. For instance if our meta tag was for keywords, it would look like this:

<meta name="keywords" content="web design development css tag script">

*Note that the keywords meta tag , its optional to use commas*

The List of Different Meta Tags

author - Tells the author of the webpage or document

copyright - Tells who owns the copyright to the document

audience - Tells the documents audience (ie. General)

company - Tells the company that owns the document

keywords - Lists keywords of the document. (ie this doc would have ‘tutorial, meta,tags, info, free’)

description - Tells a short description of the document

reply_to - Gives the email for users to contact the author ( Warning: This will give you spam if you use it)

publisher - Tells the publisher of the document

page_topic - Tells the topic of the page

page_type - Tells the type of page it is (ie. tutorial)

rating - Tells the page rating (ie. All)

title - Tells the title of the page ( Note this can be different than the title tag )

robots - Tells a search engine robot what to index and what not to.

Why use meta tags?

The answer is simple. To gain search engine exposure which in turn will increase traffic to your site. Some search engines give little importance to meta tags now, almost completely overlooking them. However, there are stull search engines that do use them. Because of that, they need to be used. Not all are as important as others. For instance, using the ‘reply_to’ meta tag will only generate spam to your inbox. While the ‘description’ is one of the most important. Using meta tags are still important and need to be utilized properly.

Closing and Copyright

this tutorial was written for PrimeGraphix Web Design and Development. Any questions or comments can be directed to the contact form on our website : http://www.primegraphix.com . For reprint rights, please contact us. This tutorial is copyright 2005 by PrimeGraphix.com and may not be used without consent from the author.

Although many users have the time set to display in their taskbar, some web designers want to include it into their page. This tutorial will show you how to do just that using PHP and the date() function. We will also explain some of the formatting used for displaying the date in your way. First we’ll explain what the date() function is and how to call it.

The date function is just like any other function in PHP. You would call it just like you would time(), etc. The following would display the date in the format ‘month . day . Year’.

<?

$current_date = date(”m.d.Y”);

echo $current_date;

?>

As always the <? and ?> are just the opening and closing PHP tags. All PHP scripts must start with the opening and closing tags. First we start off with the variable $current_date. What’s happening here is we’re using the assignment operator ‘=’ to assign a value to $current_date. The value is going to be the result of the function date(). date() is a function call, and will return the current system date. The stuff on the inside of the parenthesis is arguments we send to the function. If we wanted to change the way the date is displayed, we would change to argument passed to the date function. date(”Y”) would only return the current year. Following is the arguments that date() will accept:

a - “am” or “pm”

A - “AM” or “PM”

d - day of the month, 2 digits with leading zeros; i.e. “01″ to “31″

D - day of the week, textual, 3 letters; i.e. “Fri”

F - month, textual, long; i.e. “January”

h - hour, 12-hour format; i.e. “01″ to “12″

H - hour, 24-hour format; i.e. “00″ to “23″

g - hour, 12-hour format without leading zeros; i.e. “1″ to “12″

G - hour, 24-hour format without leading zeros; i.e. “0″ to “23″

i - minutes; i.e. “00″ to “59″

j - day of the month without leading zeros; i.e. “1″ to “31″

l (lowercase ‘L’) - day of the week, textual, long; i.e. “Friday”

L - boolean for whether it is a leap year; i.e. “0″ or “1″

m - month; i.e. “01″ to “12″

n - month without leading zeros; i.e. “1″ to “12″

M - month, textual, 3 letters; i.e. “Jan”

s - seconds; i.e. “00″ to “59″

S - English ordinal suffix, textual, 2 characters; i.e. “th”, “nd”

t - number of days in the given month; i.e. “28″ to “31″

U - seconds since the epoch

w - day of the week, numeric, i.e. “0″ (Sunday) to “6″ (Saturday)

Y - year, 4 digits; i.e. “1999″

y - year, 2 digits; i.e. “99″

z - day of the year; i.e. “0″ to “365″

Z - time zone offset in seconds (i.e. “-43200″ to “43200″)

As you can see there are many ways you can display the date. How you want to is totally up to you. Now we’ll get back to the example. Once the date function is called we terminate the line using a semicolon ‘;’ Now we have our variable $current_date we can write it to a database, display it, etc. In this example we are just going to display it. We make it display by using ‘echo’ Using echo prints the variable $current_date which, you guessed it, contains the results of our date function. This line is also terminated using the semicolon ‘;’. The results of our script would be something like this:

11.21.2005

It doesn’t seem like much, but can be used in so many ways. A more practical example follows:

<?

$current_date = date(”a”);

if($current_date == “am”) {

echo “Good Morning”;

} elseif ($current_date == “pm”) {

echo “Good Evening”;

}

?>

That is just a simple script that will greet the user depending on if its am or pm and display the appropriate greeting. For more information on PHP and the date function, you can visit the PHP website and PrimeGraphix website.

This tutorial was written for PrimeGraphix Web Design and Development. If you would like to reprint this article, please contact us for licensing details. This tutorial is copyright 2005 by PrimeGraphix.com.

Step 1 - Create a new file.

Step 2 - Type some text on your canvas.

Step 3 - Locate your properties window and click the color fill button. Now click fill options.

Step 4 - Where it says solid, click that drop down box. Select the Gradient option, below that will be another drop down box, select the Linear option.

Step 5 - Click on Edit. In this box you will have the option of selecting your colors for the text.

Step 6 - You will see two little crayon looking icons. Click on them to select the color of your choice.

Step 7 - After you have selected the two colors of your choice, slide those crayons all the way to the middle, almost on top of each other.

Step 8 - Click on the text on your canvas to exit out of that dialog box. A long line will appear across your text.

Step 9 - Using your mouse, drag the square end of the line towards the circle end. Make the line about an inch long.

Step 10 - Now take the circle end and drag it to the top of your text.

Step 11 - Place your cursor in the middle of the line until it turns into a half circle. Drag your mouse to make the square end of the line straight down.

You can shorten the line or make it longer, according to how big or small your text is.

Step 1 - Create a new file in Fireworks.

Step 2 - Type some text on the canvas.

Step 3 - Select your text and locate the color changer in the properties window.

Step 4 - Click the color changer, instead of choosing a color click “Fill Options” on the bottom of the panel.

Step 5 - On the new box where it says “Solid”, drop that box down and select pattern.

Step 6 - You can choose a pattern from fireworks or you can use your own image.

Step 7 - To use your own image, click “Other” in the bottom of the pattern window, locate your image and click OK.

You have now added a pattern to your text. You can play around with it by moving the two lines on the text and by playing with the font and font size.

Follow the steps below to decrease the file size of an image. First you will need to open fireworks. Once fireworks is open follow the steps below.

Step 1 - Click File / Open

Step 2 - Find the image that you want to decrease the filesize on. Once you have located the file, click open.

Step 3 - Click the scale tool in the tool bar and size the image down to the size you want it.

Step 4 - Click File / Export Preview. The Export Preview dialog box will appear.

Step 5 - In the left window you will see your image. At the top of the image you will see JPEG - Quality 80 (or some number) - The size of the image and how long it takes to load it. Over to the right you will see Format and Quality. Choose your format and bring the quality
down some. I usually drop it to about 60 and use a JPEG format. Keep an eye on your image, you don’t want to make it look faded or terrible looking. Once you have sized it down, click Export.

Step 6 - Save your image to the location of your choice.

That is all you have to do to decrease the size of an image.

Step 1 - Place your cursor in the location where you want your jump menu to appear.

Step 2 - At the top of your window click Insert / Form Objects / Jump Menu. The Insert Jump Menu dialog box will appear.

Step 3 - You can add items by clicking the plus sign and adding the label of the menu items in the text field.

Step 4 - In the URL field, type in the URL that that menu item will use. You can type in the URL or click browse to locate the file you want to use.

Step 5 - You can choose to open the URL in the main window or a new window.

Step 6 - Type in the name of your menu in the Menu Name Field.

Step 7 - By inserting a go button, users will be able to click the button to choose the first choice.

Step 8 - Once you have created the menu to suit your site, click OK.

Step 9 - Click File / Save.

You have just created your first jump menu. You can easily edit your jump menu at any time by highlighting your jump menu, click windows / behaviors. In the behaviors panel, double click the jump menu behavior to launch the original jump menu dialog box. From there you can
edit what ever you need.

Step 1 - Place your cursor on the page where you want to insert your flash button. Make sure your document is saved before you start working with your new button.

Step 2 - At the top of your window click Insert / Interactive Images / Flash Button. The Flash Button dialog box will appear. As you work with your button you will be able to preview it in the window at the top of the dialog box.

Step 3 - Click through the buttons to find the style that you want to use. Once you have made your choice, move on to Step 4.

Step 4 - Type the name that you want displayed on the button in the button text field.
Ex. If that is the Home button, type Home.

Step 5 - Choose the font and size of the text that will be displayed on your button.

Step 6 - In the link field, type in the url that will be assigned to that button.

Step 7 - Choose the background color of your button.
Tip: Select the same color background as your webpage that the button will be displayed on.

Step 8 - Click Apply and then OK.

Step 9 - Click File / Save.

To make a menu of buttons, follow the steps above and change the text and link fields. When you return to your page you will notice a flash element inserted into your page. This is your button. You can preview your button by pressing F12. That will open your page in your default
browser.

What is Mapping an Image?
Mapping an image is when you use the mapping tool in Dreamweaver to draw a shape over an image or a certain part of an image.  You can choose from three shapes: square, circle, or polygon. The polygon shape can be used to freely draw a map over an image.

What does Mapping an Image do?
By mapping an image you can turn that image into a link. For example, if your logo is an image, you can map your logo to make it a workable link. Many sites map their logo and link it to their homepage. So if you’re surfing their site you can click their logo and return to their home page.

Now that we have covered what mapping an image is and what it does, we’ll move on to how to map an image. First you will need to open the image that yo want to map.

Step 1 - Click on the image that you want to map.

Step 2 - Locate your properties panel. In your properties panel, below “Map”, you will see an arrow, a square, a circle, and a polygon.

Step 3 - Choose the shape that best fits your image. Once you have chose your shape, place your mouse over the image waiting to be mapped.

Step 4 - Hold the left mouse button down and drag your mouse over the image. Once the shape is covering the image, release the mouse.

Step 5 - Now go back to your properties panel and fill in the information that you wish to apply to this image. To link this image you need to fill in the URL in the link field.

Step 6 - When you have finished filling in the fields in the properties panel, click File / Save.

Now your image is mapped. To preview your mapped image press F12. Once you have uploaded your page you will be able to click the image and it will carry you to the URL that you assigned to it. Mapping an image can also be used to link to other sites.