Category: Dreamweaver

Conditional Styling for Internet Explorer

In this tutorial I’m going to teach you how conditional stylesheets work and what are some reasons to use them. First off conditional stylesheets can target certain versions of IE or hide certain things from it. It’s a good way to work around the differences Internet Explorer uses in its browser. All the code I’m going to show you goes somewhere within the <head></head> tags in your HTML file. The example below shows how to target ALL versions of IE : <!–[if IE]> <link type=”text/css” rel=”stylesheet” href=”IE-only.css” /> <![endif]–> It is also possible to simply write the CSS for IE right in the conditional stylesheets : <!–[if IE]> <style type=”text/css”> #div_outer { margin-left: 20px; } </style> <![endif]–> Here’s how to target all versions BEFORE IE 8. The “lt” stands for Less Than : <!–[if lt IE 8]> <link type=”text/css” rel=”stylesheet” href=”IE_lessThan8.css” /> <![endif]–> Here’s how to target all versions ABOVE IE 6. The “gt” stands for Greater Than : <!–[if gt IE 6]> <link type=”text/css” rel=”stylesheet” href=”IE_greaterThan6.css” /> <![endif]–> Anyone with previos programming knowledge knows that an an exclamation point “!” means NOT. So to target everything EXCEPT Internet Explorer : <!–[if !IE]><!–> <link type=”text/css” rel=”stylesheet” href=”noIE.css” /> <!–<![endif]–> To show message only in IE 5: <!–[if IE 5]> <p>This message is only displayed in IE5.</p> <![endif]–> To show message in Browsers other than IE 5 : <!–[if !IE...

Read More

How to Send Forms Details to an Email?

In this tutorial I’m going to teach you how to create a simple contact form that you can use anywhere you want. I’ll show you how to connect your email with the contact form so that when the user wants to send you a message, all they’ll have to do is enter their email and then the message, it’s that easy. I’ve also uploaded source files so you should not be having any difficulty. Let’s get started! When a user fills out a contact for and presses submit, all the information goes through the server, so we’ll be using...

Read More

Popup Window in Dreamweaver

This is very useful technique in Dreamweaver, by using this technique you can take Large view of your thumbnails. Instead of opening picture in new window, we normally use Popup window. So very short but informative technique. 1. First of all you will need 2 images, 1 for thumbnail and other for large image. 2. Take new file in Dreamweaver and insert your thumbnail in it. 3. Select the thumbnail and run the command Windows >> Behavior or simple press Shift + F4 key. 4. Towards the right side behavior panel would come, click on the  and then select Open Browser Window: 5. Following window should come: URL to display: You can either type the URL of any website (i.e. http:www.stunningmesh.com) or you can select any file from here, like we have Large Image file, so click Browse button and select your Large View file. Window Width: Here you can write the width of Popup window. As our large image is having width of 600 so I’m going to write 600 here. Window Height: Here we will write the height of our large image. So I’m writing 400 here. Navigation toolbar: If you switch on this option then in Browser when Popup window will come you will also see Navigation bar of browsers on top. If you don’t need this just remain this option uncheck. Menu bar: If you...

Read More

Swap Image in Dreamweaver

It is just like Rollover image behavior in Dreamweaver, but normally here we use Pictures. Suppose you want to paste an image and you need to display another image when you bring your mouse pointer over it. So it is also useful for New Designers. 1. Lets start with a new HTML file. Save this file and put two images at same location where this file has been saved. I’m going to use the following two images: 2. Better to take a table before, so run the command Insert >> Table and give 1 in Rows and 1 in Columns and width as the width of image, i.e. here 289px: 3. Now click inside to table cell to bring cursor and insert your normal picture by running the command, Insert >> Picture and select the normal picture, like: 4. Keep selecting the image and run the command Window >> Behavior or just press Shift+F4 key. Click on the ‘+’ button and select Swap Image: 5. Dialogue box will appear, Click on Browse button and select the Rollover image. Check Preload images, it will download normal and rollover images at a time and Restore images onMouseOut, so that when you will drag your mouse pointer away from the picture, normal picture will come back again. See the result below: Share...

Read More

Rollover Behavior in Dreamweaver

Today we are going to do some Dreamweaver work. Though it will look basic thing which I’m going to tell you. But for new designers it will be very useful. We are going to make Rollover images in Dreamweaver. Rollover images are when you bring your mouse pointer to any button, it will change its behavior and show you another image. 1. First of all we are going to make two image, one for Normal and one for Rollover. Here are two images which I’m going to use, I’ve made these buttons in Photoshop: 2. In Dreamweaver, take any new HTML file (save it and don’t forget to paste your both images on same location where you are saving this file), Now I’m going to insert a table in which I’ll call these two images. Run the command Insert >> Table and write 1 in Row and 1 in Column, give the width of table as the width of image, as I’ve taken 200px wide image so given 200 in Table width, no need to take border so I’ve written 0 in border: 3. As the width of our image is 200px and height is 30px so I’m giving the height of table to 30px: 4. Now click inside the table to bring Cursor and run the command Insert >> Image Objects>> Rollover Image, a box will appear, give...

Read More