DoNotYet.com » Dreamweaver

Dreamweaver 8.0 Tutorial —- How To Show Pop-up Windows In Appointed Size

admin — Mon, 25 Jan 2010 12:00:00 +0000

Sometimes we need to limit the size of the pop-up windows. Or you may have come across the pop-up windows with appointed size. But how can we limit the size of the pop-up windows? Of course, we can achieve it by the help with the JavaScript codes. However, we may be able to try another way to achieve it. Yes, we use the behaviors prosperities. The size-appointed windows are used for reminding the viewers of something. In normal case, it can be an ad, a reminder, or an image with a link. Now let us learn how to achieve this effect without the help of the codes. Follow me step by step.

Step1

Open a document that you have saved. The original page is like the first image.

Step2

Click the tag, beneath of the page. Then select the whole document. Like the following image.

Step3

Press [shift+ F4] key and open the behaviors inspector. Click the add behavior button. Select the open browser window command.

Step4

Select a window that will pop up in the open browser window dialog box. Click OK button and the behaviors inspector is changed and there is a onLoad event waiting to be function. Like the following image.

Step5

Save the document and press F12 to preview it in the explorer. When you load the original page, the other window will pop up in your appointed size. Like the following image.

Now, the process is finished. And compared with designing with codes, this technique is more comprehensible. You know the code design need carefulness, but using the behaviors can save us much trouble. Besides, remember some common keyboard shortcuts can help us a lot. It is necessary for us to master alterative way to achieve the same effect. Practice it more and be sure you master it absolutely.

Dreamweaver 8.0 Tutorial —- Make The Special Effect Of Wandering Leaves

admin — Sat, 23 Jan 2010 12:00:00 +0000

You may remember that we have learnt how to make the floating snow flake in the past article. Yeah, it is achieved with the help with the JavaScript codes. Now we learn how to make the special effect of wandering leaves. What’s different with the floating snow flake is that we use the timeline and layers to achieve the effect of wandering leaves. But if you have master the technique to make the flash of showing word one by one, you won’t feel difficult in learning this course. Now let us begin.

Step1

Open a new web page in Dreamweaver8.0. Draw three layers that conclude three leaves.

Step2

Select one layer and right click. Select the “add to timeline” command and open the timeline inspector.

Step3

Drag the first layer’s timeline to the thirtieth frame in the timeline inspector. Press CTRL key and add key frame at the tenth and twentieth frame at the same time.

Step4

Select the tenth frame of the first layer. Drag the layer with the tenth frame to the underside.

Step5

Select the twentieth frame of the second layer. Drag the layer to the left in the document.

Step6

Select the thirtieth of the third layer. Drag the layer to the underside of the document until disappearing. Then set the value of the “auto play” and “loop” as true. Like the following image.

Step7

Set the thirtieth frame as hidden, because the leaves can not be floating from the ground to the sky. Save the document and you can see your successful work.

Now you have mastered the basic techniques of the flash in the dreamweaver8.0. There are three key steps. First, add the key frame. Second, set the route line of the objects. Third, set the last frame as hidden state. That is all.

Dreamweaver 8.0 Tutorial —- Make A Flash Showing Words One By One In The Web Page

admin — Thu, 21 Jan 2010 12:00:00 +0000

We would like to introduce the flash function in dreamweaver8.0 to you. It is common that you make the flash in the Flash8.0, but we also can achieve the flash function in Dreamweaaver8.0. We can make the simple flash by the flash function. It can save your time and energy which are spent on the Flash software. Moreover, the complex flash will cost a lot of time to load when you view the web page. We will learn how to make a flash showing words one by one in the web page. Let us start. Follow me step by step.

Step1

Select the document you have saved. Open the insert inspector, click the draw layer button and draw a layer in the page.

Step2

Set focus on the layer. Put an image that concludes the word. Insert the other image concluding words by the same way.

Step3

Select the first layer, and drag it to the timeline inspector. Release the mouse and add a moving route line for the first layer. Drag the frame to the fifteenth. Take the same action to other layers by the same way.

Step4

Drag the fifteenth frame to the twenty-fifth frame, applying to all the layers. Select the first frame of the first layer and open the properties inspector. Set the top as -50. Rule out the same way to other layers.

Step5

Move the starting of the second layer’s timeline to the fifth frame. Select the loop checkbox and auto checkbox. Like the following picture.

Save the document and press F12 to preview it in explorer. Then you will see the word following the last one and every several second there will be a word appearing. In fact, if you are interested in it, you can make more funny flash by yourself.

Dreamweaver 8.0 Tutorial —- How To Make A Web Album

admin — Tue, 19 Jan 2010 12:00:00 +0000

We often view photos in web pages and may have own albums. When you click the photo, it will appear at a large size in another place of the web page. This special effect uses some layers, hiding or showing them. It even doesn’t need the help with JavaScript codes. You may be interested in that how we can achieve this effect. We will introduce the way to make it. It may be a boring process. Be patient with it and you will master the way to make it.

Step1

Click the table command. Insert a table with two rows and three columns. Then merge the third column.

Step2

Put four photos into the cells.

Step3

Open the insert inspector. Click the draw layer button. Then draw a new layer in the third column. Set focus on the layer and insert an image that is larger than the original one.

Step4

Repeat the same action three times. Draw three layers above the first one. And put the right photo into corresponding layer.

Step5

Press F12 to open the layers inspector. Set the second layer, the third layer and the fourth layer as invisible.

Step6

Select the first image. Open the behaviors inspector and click the add button. Select the show-hide layers command and there will be a show-hide layers dialog box appearing. Select the first layers and click the show button. Set other layers as hide. Click OK.

Rule out the same action to the other images. It means when you select an image, and the image must be set as “show” state in the show-hide dialog box.

Now you have made an album successfully. Press F12 to preview the effect. Click the small photo and you will see the same large image appearing. This effect can apply to the web page aiming to show photos.

Dreamweaver 8.0 Tutorial —- Make A Floating Advertisement For A Web Page

admin — Sun, 17 Jan 2010 12:16:53 +0000

We have learnt how to make a web page for trying on clothes in last article. Today we will learn how to make a floating advertisement for a web page. We can see many web sites having an ad floating in the web page. This effect can motivate the breeziness of the web page. Moreover, you can put the most important link in the floating ad. Is it difficult to achieve? No. we just need to add a new layer into the saved web page. Besides, the timeline is necessary. The timeline is to control the time of objects’ behaviors, as you know in Flash. Now, let us start.

Step1

Open the Insert inspector. Click the draw layer button to draw a new layer. Then put an image into the layer.

Step2

Select the layer and right click. Then select the Add to Timeline command. There will be a timeline inspector appearing.

Step3

Move the frame to the fifty-fifth. And add key frame to the thirty-third. After doing these things, you need to move the layer to the place you want it to go to. Like the following image show.

Step4

Save the document and press F12 to preview the effect in the explorer. You can see it moving along with the path you have set.

Finally, now you have master the technique to make a floating advertisement for a web page. We learned how to make the free-moving image in the web page in the past article, which is almost same with this article. But you can find the differences between them. One needs the help of the JAVASCRIPT codes, but the other depends on the timeline. One is wandering freely and the other is moving along with a stable path. These are their differences.

Dreamweaver 8.0 Tutorial —- How To Try On Clothes Online

admin — Fri, 15 Jan 2010 12:00:00 +0000

When you want to buy clothes, you must try on firstly. It is same with the online clothes. You can try on clothes in some online games or online shops. But do you know how we can make a web page that allows the viewers to try on clothes they like? In fact, it is very easy to achieve. Further, it is very common and funny. You will like to learn it. We just need to insert some layers and definite some behaviors. Now follow me and I will tell you how to make it.

Step1

Open the insert inspector. Click the Draw Layout Cell button in the Insert inspector. Then draw three layers.

Step2

Put the images into the three layers. Like the following image.

Step3

Put the mouse on the edge of the “coat” layer. Then move the “coat” layer on the “boy” layer.

Step4

Put the trousers on the “boy” layer in the same way. The effect is like the following image showing.

Step5

Set focus on the blank page, and open the behavior inspector. Then click the button, and select “Drag Layer”. Fill the drag layer dialog box like the following image. Then click OK button. Rule out the same way to the layer3.

Step6

Save the document and press F12 button to preview in the explorer.

Like the following image. When you click the coat, it will move on the boy’s body.

OK. The final effect is ready. Do you remember how to make it? Have you master the way to achieve this special effect? Let us look it back. Firstly, we need to insert three layers. Secondly, we put the images into the layers. Thirdly, we have to definite the behaviors of the layers in the drag layers dialog box. That is all. Practice it again.

Dreamweaver 8.0 Tutorial —- How To Make The Image Show As Water Wave Shape

admin — Wed, 13 Jan 2010 12:00:00 +0000

We have learnt how to set password for the web page in the last article. It needs the help of HTML codes. It is same with the ways to set password for the web page. We also need to use HTML codes to make the image show as water wave shape.

This special effect makes the web page full of livingness and vitality. Besides, it can attract viewers to pay attention. Now let us learn how to make the image show as water shape. Follow me step by step. Maybe the codes are a little difficult.

First, open the finished web page. Or build a new blank web page.

Second, click the code button, and open the code view. Put the following text codes in to the section between and .

<script language="JavaScript">
var imgsname = new Array()
imgsname[0]="images/fsy00966.jpg"
// the links of your images
var imgsurl = new Array()
imgsurl[0]="http://123.com"
var linktarget="_blank"
var pause=3
var posleft=305
var postop=530
var contentimage=""
var i_image=0
var i_stepwave=0
var i_maxstepwave=40
var imgpreload=new Array()
for (i=0;i< =imgsname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgsname[i]
}
pause=pause*1000
function initiate() {
contentimage=""+imgsname[i_image]+"' border='0'/>"

if (document.all) {

waveimage.innerHTML=contentimage

waveimage.style.posLeft=posleft

waveimage.style.posTop=postop

enlargewave()

}

if (document.layers) {

document.waveimage.left=posleft

document.waveimage.top=postop

changeimage()

}

function enlargewave() {

if (i_stepwave< =i_maxstepwave) {

waveimage.filters.wave.phase=i_stepwave

waveimage.filters.wave.strength=i_stepwave

waveimage.filters.wave.lightstrength=i_stepwave

waveimage.filters.wave.freq=i_stepwave

i_stepwave++

var timer=setTimeout("enlargewave()",50)

function reducewave() {

if (i_stepwave>0) {

waveimage.filters.wave.phase=i_stepwave

waveimage.filters.wave.strength=i_stepwave

waveimage.filters.wave.lightstrength=i_stepwave

waveimage.filters.wave.freq=i_stepwave

i_stepwave--

var timer=setTimeout("reducewave()",50)

}

else {

clearTimeout(timer)

var timer=setTimeout("enlargewave()",pause)

}

function changeimage() {

i_image++

if (i_image>=imgsname.length) {i_image=0}

contentimage=""+imgsname[i_image]+"' border='0'/>"
if (document.all) {
waveimage.innerHTML=contentimage
reducewave()
}
if (document.layers) {
document.waveimage.document.write(contentimage)
document.waveimage.document.close()
var timer=setTimeout("changeimage()",pause)
}
}
if (document.all) {
document.write('

')
}
if (document.layers) {
document.write('')
document.close()
}
window.onload=initiate
</script>

We use the enlargewave and reducewave function to define the change of the image’s wave. And we use the time function to define the time of the wave’s circle. The layer is to insert the image with water wave effect. Then the width, height, top and left will change according to the function. At last, the image with water wave effect is OK.

Third, go back to the design view. Save the document and preview the web page in the Internet Explorer. The effect is like the following picture.

Does it look like dynamic? However, unless you want to the viewers to pay attention this image especially, you’d better not use this effect. If your website is built for serious information such as government, hospital, the image with wave effect will destroy seriousness. Of course, the image with wave effect will be liked by children. The HTML codes are a little difficult. Don’t worry. you just need to understand the meaning of the codes instead of remembering all the codes.

Dreamweaver 8.0 Tutorial —- How To Set Password For The Web Page

admin — Mon, 11 Jan 2010 12:00:00 +0000

Sometimes your web pages maybe need to keep some information secret. You must want to set a password for the web page and people who know the password can view information in your web page. When you open a new web page, there will be a dialog box, asking the viewers put the right passwords. If the pass words are right, the viewers will go to your web page. If the passwords are wrong, the viewers will see the dialog box again and it asks the viewers to input password again.

You can come across this case when you view some people’s blog, or login some university’s database. Now let us learn how to add the password for our web page. Follow me step by step.

First, open the finished web page. Or build a new blank web page.

Second, click the code button, and open the code view. Put the following blue text codes in to the section between and .

<script language="JavaScript">

In the HTML codes, we definite a variable, and set the right password to it. then we define another variable, and set the viewer’s password to it. if the second variable is same with the first variable, the window will open the index.htm. if the second variable isn’t same with another, the window will rule out the “history.back” command, going back to the history.

Third, go back to the design view. Save the document and preview the web page in the Internet Explorer. There will be a message box appearing at once, asking you to put the password.

Ok, the web page with the password is ready. Have you master the way to set the password for the webpage? Practice regularly until you are familiar with the codes.

Dreamweaver 8.0 Tutorial —- How To Make The Web Page As The Home Page In The Explorer

admin — Sat, 09 Jan 2010 12:00:00 +0000

You can set any web page as your home page by setting the Internet tools. But we also can achieve this special effect in our web page. We can set a function for our web page that can let other people set our page as home page. You know if the viewers like some web pages, they must try to look for a prompt way to find these web pages. Almost all the large websites like yahoo.com have this function. So we need to master the way to achieve this special effect. Moreover, when your web pages are set as home page, your website will have more viewers. Now pay attention, we will start learning how to make the web page as the home page in the Explorer.

Step1, open a finished web page, or you can build a new webpage.

Step2, put these words in your web page: “set as your home page”. Select the right position, putting the following codes.

<a onclick="this.style.behavior='url(#default#homepage)';
this.sethomepage('http://www.yahoo.com');"href="#">Set As Home Page</a>

Step3, go back to the design view, save the document and preview in the Internet Explorer. Click the “Save As Home Page” text, and there will be a message box appearing to ask whether you want to set this page as your home page or not.

Now we have set our web page as home page successfully. We just add some HTML codes for the text. This.sethomepage is to set the http:// as the home page. You can change the address as any other links. Onclick=’url(#default#homepage)’ means the link will go to the homepage dialog box when the text is clicked. After understanding the codes, you can try to remember them. They will benefit you sooner or later. Practice it again and you will master the way to make the web page as the home page in the Explorer totally.

Dreamweaver 8.0 Tutorial —- How To Make The Web Page Refresh Automatically Every Some Time

admin — Thu, 07 Jan 2010 12:00:00 +0000

When you enter your E-mail box, you will find that your e-mail box refresh every several minutes. When you log in your blog, the message box will clue on every several seconds. All these effect are achieved by the refresh automatically. The web page refurbishing automatically can save many troubles for us. For example, when the web page can refresh automatically, you don’t worry that you can’t accept the latest message in the blog or the E-mail box. It is so common that we also need to master the ways to achieve this special effect. Don’t worry. It is so easy. we even can achieve this special effect by two different ways. Follow me now. Just need some steps.

First, open a web page you have finished in the past.

Second, select the [insert] – [HTML] – [head tags] – [refresh] command. There will be a dialog box appearing.

Third, in the dialog box, click the browse button, at the right of the go to URL textbox. There will be a select file dialog box appearing. Then select the same new web page. Set the delay as ten seconds.

Fourth, click the OK button. Save the document. Press F12 to preview its effect in Internet Explorer.

The effect can’t be showed in the static image. You can try it by yourself. This is an easy way to achieve the effect the refresh the web page automatically.

But there is the second way to achieve it. We can use the HTML codes to achieve this effect. You can put the following blue text codes into the section between and .

<script Language="JavaScript">
</script>

Then the web page will refresh automatically every five minutes.

So you can use the head tags and HRML codes to refresh the web page automatically. You can choose your favorite one.

DoNotYet.com » Dreamweaver

Dreamweaver 8.0 Tutorial —- How To Show Pop-up Windows In Appointed Size

Related Posts

Dreamweaver 8.0 Tutorial —- Make The Special Effect Of Wandering Leaves

Related Posts

Dreamweaver 8.0 Tutorial —- Make A Flash Showing Words One By One In The Web Page

Related Posts

Dreamweaver 8.0 Tutorial —- How To Make A Web Album

Related Posts

Dreamweaver 8.0 Tutorial —- Make A Floating Advertisement For A Web Page

Related Posts

Dreamweaver 8.0 Tutorial —- How To Try On Clothes Online

Related Posts

Dreamweaver 8.0 Tutorial —- How To Make The Image Show As Water Wave Shape

Related Posts

Dreamweaver 8.0 Tutorial —- How To Set Password For The Web Page

Related Posts

Dreamweaver 8.0 Tutorial —- How To Make The Web Page As The Home Page In The Explorer

Related Posts

Dreamweaver 8.0 Tutorial —- How To Make The Web Page Refresh Automatically Every Some Time

Related Posts