Design an automatically closed Web page with Dreamweaver

dreamweaver| Design | Web page

When you design a page, you often open a child window from one page for viewing by the viewer. Often, the contents of the seed window are viewed by the viewer and are no longer needed by the viewer, and they often forget to turn off these small windows, causing many browser windows to open and consume a lot of resources. So we can design the child window into a form that can be automatically closed after a period of time.

In this example, two pages are produced, as shown in Figure 1, where index.html is a page displayed in a child window, and a link to open index.html in a child window is included in a page named firstpage.html. When you click a link, the index.html opens in the child window. You can close a child window by clicking the close link in a child window, or ignore it, and the child window will automatically close after 15 seconds.

Figure 1 Pop-up page of the browser

The specific actions are as follows:

1. Generate a Smlple folder in the local site.

2. In the Smlple folder, generate a file named index.html and named Firstpage.html.

3. Double-click index.html to open the document and go to the Design view window of the document.

4. Click menu View/head Content to display the header area of the document.

5. Click the Document header pane in the Design view window. Select Menu Insert/invisible tags/script to open the Inset Script dialog box. As shown in Figure 2, select the JavaScript option in the Language Drop-down list box and enter "SetTimeout (Self.close ()", 15000) in the Coctento text box. Click the OK button to complete the script that automatically closes the child window after 15 seconds of inserting the head of the document. In your code, 15000 represents 15000 milliseconds, or 15 seconds, or you can modify it to the number of milliseconds you need.

Figure 2 Setting time

6. Enter the word "close" in the document window, and enter "###" in the Link text box on the property panel to set it to an empty link.

7. On the Quick Tag Editor at the left end of the status bar, click the Mark button. Select the close link, and then press the CTRL+T key combination to open the Quick Tag Editor and enter the edit tag mode of the Quick Tag Editor. Then type "" Before ">". As shown in Figure 3, the settings are complete, click the OK button to confirm the operation. When Index.html is opened as a child window, clicking the link closes the child window immediately.

Figure 3

8. Save the Index.html file and exit the Index.html dremweaver window.

9. Start designing the Fristpage.html page now. In the Smlple folder of the local site, double-click fristpage.html to open the document and go to the Design view window of the document.

10. In the document, enter the word "Click here to open the child window that will close automatically." Then enter "###" in the Link text box on the property panel to set it to an empty link.

11. You can set the Index.html window to open when clicking a link by applying the Open Browser window behavior for the link, but it is more convenient to take advantage of the Quick Identification editor. The method is to first place the insertion point in the link, and then on the identity selector at the left end of the status bar, click the Identification button to select the entire link. Then press the CTRL+T key combination to open the Quick Tag editor and go to the edit identification mode of the Quick Tag Editor. Enter "" Before ">" (Figure 4). Set up, press the ENTER key to confirm the operation.

Figure 4 Setting open when clicking a link

12. The above operation completes the setting of this example. You can click the menu to save the work by using File/save. Then press the F12 key to preview the page effect in the browser.