Redirection based on browser type

Intro: This tutorial will teach you how to make a script that will redirect users based on their browser type to different pages or url. It is restricted to two browser types only which are Internet Explorer and Netscape Navigator. You are not going to learn how to write this script, but learn how to use Dreamweaver to make such a script.

1:- First open Dreamweaver and make a new page. Go to Window > Behaviors if your behaviors panel is not open. Then click on the + sign and choose Check Browser

2:-You will be shown this window when you choose the Check Browser Option.

Here you should make your choices, I have chosen here if the Browser is:

Netscapte Navigator 4.0 and later - go to www.yahoo.com and if it is Netscape www.google.com
After you make your selection Click OK

3:-Make sure onLoad option is chosen under the Events, we want users to be redirected when this page loads.

You are done, preview your page and see where you are redirected based on your Browser Type.

4:- You could as well redirect all the users who are using Netscape Navigator to one page and Internet Explorer user to other. This way if you have two versions of you website for specific browser types, you could redirect them to respectie pages which are viewed best by their specific browser types. It is matter of how you use this script.

5:-Another option is redirect all four options to one page, then it would become a normal redirection script that all the users to one specific page.

Here is the code that is generated by Dreamweaver after this tutorial:

How to open a Fixed (size) Window

1:-Opening a fixed window can be very useful especially if you want a user to see some useful things in that particular window, it can be a photo gallery or Rules & Regulations that you want to display when the user clicks...etc. You can display anything on it and you can specify the size as well, so that the window size corresponds to the content size. Let's get started.

Open a new page in your Dreamweaver and put a button, download the button below for your working purposes or put your own button if you have one ready. Save the page as fixed_window.html

2:-Now click on the button that you have just inserted to the page, and go to Behaviors Panel. If Behaviors Panel is not open go to Window > Behaviors (Shift + F3) to open it. Click on the plus (+) sign and choose Open Browser Window.

3:-Now, you should see a pop-up window, as shown below.

For URL to Display opton you can enter a Web Address or a page name. For the size of the window you can specify the width and height in pixels. I have specified 500 pixels for width and 400 pixels for height. I know it will be a small window for a page like Google so I have ticked the Resize Handlers. This will display Resize Handlers to the user so that he can adjust it. If you don't tick this it will be a fixed size window 500 by 400 which will not be resizable. Other options are pretty understandable, you can just try them if you don't know what are they for

Click OK.

4:-Now you have almost completed your pop-up window, there is one more thing left which is assiging action to your button. You need to specify an action to your button, whether you want a user to click to see the window, or mouse over it...etc. See your Behaviors Panel again and you should see that the action is already specified, in my case it is onMouseOver. If you want to choose any other action just click on the triangle on the right and you will be displayed with other Actions to choose from.

If you want to Edit your window preferences, such as changing the size or url...etc. Just double click on the Open Browser Window word on the right, in Behaviors Panel.

Now, You are done! That was pretty easy isn't it?

Create Rollover/MouseOver effect

This tutorial will teach you how to do a MouseOver effect on your buttons.
1:-

Download these two buttons to do this tutorial or use your own buttons if you have one.
2:- Open a new page in Dreamweaver, and and press Rollover Image button on the Common panel.

3:- After you have clicked the Rollover Image you should see this pop-up window.

Fill in the empty fields with the respective texts. Give your image a name, if it is a menu item such as About Us in our case, give it "About Us" name. Original Image field is the field which should contain your initial image. Rollover Image field should contain your second image which should show when the user MouseOvers. The last two fields are self explanatory.

Once you finish click OK and save your page. Hit F12 to see your page.

4:-You can see your rollover actions in Behaviors Panel. Go to Window > Behaviors to open the panel if it is not already open. To edit double click on the actions on the right side.

Creating CSS in Dreamweaver MX 2004

1:- I hope you know the advantages of using CSS instead of tags for your texts and even for your overall website designs. I am not going to discuss that here, if you would like to tknow more on CSS advantages please visit CSS Zen Garden. In this tutorial I will discuss how to create CSS tags in Dreamweaver and apply them to texts.

2:- There are two types of CSS creation, one is to create inside the html page and apply to the same page and another to create it as a separate .css file. If you are working with a single page, then it is better to create CSS inside the page, but if you are working with many pages then it is better to create a separate file because that way you can apply this file to your other pages. That will save you time, you will not have to create it again and again for every page. Later it will save you time in updating your page in case if you want to change the size of your text, you just have to change in one file and all the pages will be updated automatically.
3:- To apply CSS to your current working page, please go to Edit > Preferences > General and tick where it says Use CSS instead of HTML tags and click OK. See below.

Once you make these changes in preferences dreamweaver will apply CSS to your texts whenever you change font size, color, face...etc And it will create CSS codes accordingly under the name style1, style2...etc You can change these names to meaningful words if you want.
4:- To see how it works, open a new page and type some words in the page and change font size or color, and see how it has created a CSS style and applied it to your text. You can see it from properties box as shown below. You can see your CSS styles in your CSS Styles Panel. Go to Window > CSS Styles if the panel is not already open. In CSS Styles Panel you can edit your styles, if you want to edit just right click on your CSS style and choose Edit... and you will be displayed with a pop-up window, where you can specify properties.

5:- We have learned how to create a CSS style inside the page in the previous page, now we will learn how to create a separate CSS file. Open your CSS Styles Panel and click on the New CSS Style button.

6:- You will be shown a new pop-up window like below. Choose a name for your CSS style. For the Selector Type: use Class (can apply to any tag) , and for Define in: use (New Style Sheet File). Press OK.

7:- Give your CSS file a name and Press Save. In step 6 you gave a name to your CSS Style, here you are giving a name to your CSS File. Please note that in one CSS File you can have many CSS Styles, so don't confuse these namings.

8:-Once you press save you will be shown another pop-up window where you define your CSS properties. Please see below. Once you define the properties of your text, Press OK.

After you press OK your new CSS Style will appear in the CSS Styles Panel.

9:-To apply your new CSS Style to any text, just highlight the text and choose your style from Properties Panel.