A friend who likes to make Web pages always wants his work to be perfect. However, the IE browser window is always disgraced, stereotyped. Simple Web pages can also be competent, if you encounter a strong artistic web page, IE window address bar and a variety of buttons will affect the overall effect of the page. How can the artistic effect of the Web page and the window of the browser well combine to make it more perfect? Today I'm going to introduce you to a very popular web page effect.
In the following in the production process, we need to use two HTML pages, one is the first page index.htm, click on the page of a hyperlink, you can open the window we want. The other is the content page index2.htm, which is the content page of the borderless window. In addition, we will be in the above two files in the root directory to build two folders, one of the folders used to save the implementation of the Web page effect of the JavaScript file, the folder named JS. Another picture to place the effect of a Web page, named images. The preceding JavaScript file and the page effect picture production process because the space is limited, the concrete production process is not detailed here, everybody can go to the computer enthusiast website or www.htmlcn.com to download. Considering that most netizens now like to use Dreamweaver to make the page, we choose its 4.0 version as the editing tool for this production. All preparations are in place, and the following is the beginning of production.
One: The principle of making
The window actually applies a new property fullscreen in the Windows object in IE5.5, which sets the open window first to full screen (Mansi display). Then, with the Resizto method in the Windows object to narrow the window to form a borderless window like figure one, the window only supports browsers above the IE5.5 version.
two: Start making
1: Make content page index2.htm
Open Dreamweaver4.0, press CTRL + N key to a new page. In the page to enter the desired content, here we simply enter the "beautiful New Horizon" word, of course, you can make the page is complex enough. After editing is complete, save. Then use the text Editing tool to open the file just edited in HTML code, find the seventh line of code, which defines the style rules for the BODY element, and changes the body style rule to the following:
Body {
Font-family: "The song Body";
Font-size:9pt
Scrollbar-arrow-color: #FFFFFF;
Scrollbar-track-color: #99ccff;
Scrollbar-base-color: #6666FF;
Scrollbar-face-color: #6666FF;
Scrollbar-3dlight-color: #FFFFFF;
Scrollbar-darkshadow-color: #FFFFFF;
Scrollbar-highlight-color: #6666FF;
Scrollbar-shadow-color: #6666FF}
Then save, the CSS code above controls the style of the Content window scroll bar, changing the style of the scroll bar to a rule so as to prevent too much page content from appearing in a scroll bar that does not match the color of the window, because the color of the default scroll bar is the default color of Windows. Our goal is to use the IE window color to create the color we need, so the scroll bar is no exception.
2: Make home content index.htm
First new page with Dreamweaver, enter the desired content, here we enter "super cool boundless Window" word, and then save
Download the JavaScript files and effects pictures mentioned above to the computer enthusiasts website or www.htmlcn.com.
Copy the downloaded Chromeless_30.js file to the already-built JS folder.
Then the picture of the desired effect of the borderless window is copied to the Images folder.
Then put the first page just edited with Dreamweaver Open, press the CTRL+SHIFT+W key to open the Head section of the window, click this window to make the background of the window into white. Then click on the small triangle in the upper right corner of the object panel, select the Invislbles option in the pop-up menu, and switch to the Invislblesinvislbles object panel.
Click the Insert script in the Invislbles object panel to press the button and click OK in the Insert Scripts dialog box. Click to select the last textbooks icon in the Head window.
Click the Browse folder icon at the back of the Properties Panel source text box.
Select the Chromeless_30.js under the JS folder in the Select Script File dialog box.
Click the Insert script in the object panel again to press the button to open the Insert Script dialog box. Copy all the code from the following function to the Content text box in the Insert Script dialog box. Then click OK to press the button.
The functions are as follows:
function Openit (theurl,w,h,x,y, Wname) {
Closedwn = "Images/close_dwn.gif"
Closeup = "Images/close_up.gif"
CLOSEOVR = "Images/close_ovr.gif"
Minidwn = "Images/mini_dwn.gif"
Miniup = "Images/mini_up.gif"
MINIOVR = "Images/mini_ovr.gif"
NONEGRF = "Images/none.gif"
CLOCKGRF = "Images/clock.gif"
tithtml = "<font color= ' #FFFFFF ' style= ' font-size:12px ' >:: Beautiful New Horizon::.</font>"
Titwin = ":: Beautiful New Horizon::.
Winbordercolor = "#000000"
Winbordercolorsel = "#CCCCCC"
Winbgcolor = "#6666FF"
Winbgcolorsel = "#ADC8E5"
Return openchromeless (theURL, Wname, W, H, X, Y, NONEGRF, Closedwn, closeup, CLOSEOVR, Minidwn, Miniup, MINIOVR, CLOCKGRF, Tithtml, Titwin, Winbordercolor, Winbordercolorsel, Winbgcolor, Winbgcolorsel)
}
In this function, there are 14 variables, CLOCKGRF all of these variables are the paths that define the picture of the window effect, and the variable tithtml and Titwin define the title of the window. The variable winbordercolor and variable Winbordercolorsel are defined by the color of the window border and the color of the frame when the mouse is pressed Variable Winbgcolor and Winbgcolorsel define the color of the caption section and the color of the caption section when the mouse is pressed. In addition, the function has six parameters altogether, they are theurl,w,h,x,y, wname respectively. Where theURL represents the path of the target document to open; W represents the width of the open window; h represents the height of the open window; x indicates the horizontal axis of the upper-left corner of the window in the screen; Y indicates the ordinate of the upper-left corner of the window on the screen; the parameter wname represents the name of the window.
Finally, the content of the first page "Super Cool boundless window" in a few words of the boundless window four words on the link, in the property panel in the link (link) text box to change the value of "#;", and then save.
The editor opens the home page and finds <a href= "#;" In the back and then save, note that the first item in the Openit parentheses is the path to the content page relative to the first page.
Open index.htm in the browser and click on the "Borderless window" to see the effect.
Because of my limited ability, the above production process inevitably has deficiencies. In fact, there are many ways to create a window, the simplest one is the use of Dreamweaver plug-ins to achieve. The purpose of my writing this article is to let everyone really understand the design of the boundless window, so for just contact with JavaScript users is a great help, so that after the completion of the production has a real sense of achievement. The specific effect of the window we can go to www.htmlcn.com to feel, what good advice can write chinayxf@hotmail.com contact me, today will be here.
