Windows Desktop style page make a bit

window| Page Specific Detail performance:

The sense of a bump in a menu pair with a dialog box:

We see every day of the right menu, taskbar and Start menu, there are three-dimensional, we use CSS to achieve this effect is very easy. Specifically through the border (border), in the next set of different colors to achieve three-dimensional effect. The following example illustrates:

Style sheet:. Up{border-right: #000000 2px solid border-top: #FFFFFF 2px solid border-left: #FFFFFF 2px solid; Border-bottom: #00 0000 2px solid; Background-color: #D8D8D0}

In the three-dimensional layer to add class=up example: <div class=up style= "..." ></div>

To make the layer have a bulge, we can first select a good layer of background, the top and left frame of the layer is lighter than the background color, and the bottom and right frame of the layer is more deep than the background. Similarly, if a layer is defined with a recess, the upper and the left should be deep, and the lower and the right should be shallow. The width of the border to change the icing on the stereo. Like the Quick Start bar, the projection is not too strong, 1px is OK. You can look at a situation that doesn't have a good stylesheet defined.

Desktop icons:
From the requirements and features of the icon, it should be able to drag, double-click the open link, the appearance of the icon and linked content, and so on. This requires us to use each layer to define an icon, drag the icon is the layer of drag and the absolute positioning of the layer. The picture of the icon is preferably a transparent GIF picture, which is the same size as the icon size 32x32. We can use. ico files to convert to. gif graphics, or grab software to crawl the system desktop icon. Of course, if your image processing level is good, you can do a better look at the icon. Double-click the link, we can pass to ondblclick (double-click) mouse events to complete. The implementation of the arrangement icon is the absolute positioning of the layer again.

Menu:
Each item in the menu is also layered. Mainly uses the mouse hover (onmouseover), the mouse leaves (onmouseout) to change the layer background color, and the menu hides and displays. The menu bar of the picture with 24x24 size GIF picture, menu Next Level menu can be used 16x16 size. The same type of menu is placed in a layer to locate.

Position in Start Menu:
TOP:XX;LEFT:XX is usually used in positioning, and the Start menu is positioned with Bottom:xx, because the menu is at the bottom of the browser window, regardless of the size. Start menu in a table, divided into two cells, the left side of the site to mark the picture, right-click all menu items: Shutdown, logoff, help ...

The following illustration shows the production details of the Start menu:

Specific detail performance:

The sense of a bump in a menu pair with a dialog box:

We see every day of the right menu, taskbar and Start menu, there are three-dimensional, we use CSS to achieve this effect is very easy. Specifically through the border (border), in the next set of different colors to achieve three-dimensional effect. The following example illustrates:

Style sheet:. Up{border-right: #000000 2px solid border-top: #FFFFFF 2px solid border-left: #FFFFFF 2px solid; Border-bottom: #00 0000 2px solid; Background-color: #D8D8D0}

In the three-dimensional layer to add class=up example: <div class=up style= "..." ></div>

To make the layer have a bulge, we can first select a good layer of background, the top and left frame of the layer is lighter than the background color, and the bottom and right frame of the layer is more deep than the background. Similarly, if a layer is defined with a recess, the upper and the left should be deep, and the lower and the right should be shallow. The width of the border to change the icing on the stereo. Like the Quick Start bar, the projection is not too strong, 1px is OK. You can look at a situation that doesn't have a good stylesheet defined.

Desktop icons:
From the requirements and features of the icon, it should be able to drag, double-click the open link, the appearance of the icon and linked content, and so on. This requires us to use each layer to define an icon, drag the icon is the layer of drag and the absolute positioning of the layer. The picture of the icon is preferably a transparent GIF picture, which is the same size as the icon size 32x32. We can use. ico files to convert to. gif graphics, or grab software to crawl the system desktop icon. Of course, if your image processing level is good, you can do a better look at the icon. Double-click the link, we can pass to ondblclick (double-click) mouse events to complete. The implementation of the arrangement icon is the absolute positioning of the layer again.

Menu:
Each item in the menu is also layered. Mainly uses the mouse hover (onmouseover), the mouse leaves (onmouseout) to change the layer background color, and the menu hides and displays. The menu bar of the picture with 24x24 size GIF picture, menu Next Level menu can be used 16x16 size. The same type of menu is placed in a layer to locate.

Position in Start Menu:
TOP:XX;LEFT:XX is usually used in positioning, and the Start menu is positioned with Bottom:xx, because the menu is at the bottom of the browser window, regardless of the size. Start menu in a table, divided into two cells, the left side of the site to mark the picture, right-click all menu items: Shutdown, logoff, help ...

The following illustration shows the production details of the Start menu:

Start Menu Production Details:

Ordinal 1 is a picture, placed in a grid, the Single-cell background set to the top of the picture color, single-cell positioning for the bottom alignment, the advantage is to make when the menu length is larger than the picture, will not appear color mutation. Use FrontPage and grab tools to complete. The idea is to use a gradient color bar as the background of the table, written on the above is the desired text, adjust the color of the text, font, and then grab the map, and then through the FP inside the image tool to convert the angle.

The serial number 2 is a 24x24 gif transparent image that grabs the icon from the System menu.

Number 3 is a gap, here do not use a space, you can use a hidden text symbol to replace. This is an example:
<span style= "Visibility:hidden" >-----</span>

The arrow at ordinal 4 is the Webdings font: <font face= "Webdings" >4</font>. The background color is dark blue because the mouse is placed above and dynamically changes the style sheet of the menu layer through the mouse. For example: Onmouseover=this.classname= ' over ' onmouseout=this.classname= ' overout '

A horizontal line at ordinal 5; to make it more realistic, use the style sheet to control its style, for example:
hr{width:95%;border:1px inset #F0F0F0}

The space between the number 6 is also not used; we can use hspace (horizontal spacing), vspace (vertical spacing). In the positioning of the image, to use absolute vertical center (align= "Absmiddle"), otherwise the text will be aligned with the bottom of the image; Normal expression:

Making ideas: Position them in a table, placing a picture in each cell. This large table is positioned at the bottom, and with the bottom mentioned above, the width of the table is called Screen.width. Use different style sheets to control the appearance of the bumps in each section. Use the shape of the mouse to dynamically change the style sheet that the call has already defined. In the Quick Launch bar, use the mouse to over,out,down,up four behaviors. For example: Onmousexx=this.classname= ' XX '. The icon at the Quick Launch bar is 20x20, the cell width is greater than 24, because it is too small, of course hovering, the entire taskbar may move around.

Windows and dialog boxes:

The dialog box has a title bar you can drag, and the Close button to close the window. Drag is the layer of drag, the closing dialog box is the hidden layer. In order for the dialog window to be centered at various resolutions, we can call Screen.width, Screen.height (the width and height of the window screen), for example:

Style= "Position:absolute; Top:expression ((screen.height-150)/2); Left:expression ((screen.width-200)/2); width:200; Height:150 "

Page theme Changes:

Now many web pages have the function of skin change, so that the Web page more personalized. To make desktop-style pages have features similar to desktop themes, we can use the link to change the stylesheet file: Write a few poorly styled stylesheets and invoke them through JavaScript to change the theme.
<script language= "JavaScript" >
function Changecss (TT)
{
CSS.HREF=TT;//TT is the path to the style sheet file
}
</script>

The link reading method of the style sheet is to read: <link rel= "stylesheet" id= "CSS" type= "text/css" href= "Xx.css" > Here's id= CSS in CSS with the above JavaScript in the Css.href CSS refers to the same one. Take a look at the effects of several topics (figure):

Another way to change the style sheet is to change the classname:
<script>function C (CSS) {id.classname=css;} </SCRIPT>. You can click the Color button to see the effect:

Difficulties and Solutions:

Because of the long Web page code, use a lot of small pictures with a lot of JavaScript. The maintenance of Web page updates will be a headache.

Here are some ways to solve this problem:
For each layer, the name of the ID is based on the content of the layer. For example, the layer of personal description uses id= "Readme" Start menu id= "StartMenu" and so on. This is to better the source file for improvement and optimization. The same class of Z-index set the same, who is on, who is under, are to be considered.

For a lot of reusable code, we can use document.write to write JavaScript, like desktop icons, and here's an example:

function link (act,txt)
{document.write ("<div class=link onmouseover=this.classname= ' overlink ' onmouseout=this.classname= ' link ' style= ') Padding-left:16;padding-top:1;padding-bottom:1 ' > ' +txt+ ' </div> '}

If there are 10 places in the Web page that use this code, we're going to write 10 bold code lengths, but Universal JavaScript, we can just write 10 of these codes:
<script>link (' Pop (' id.htm ') ', ' link One ') </script>, which makes the source file clearer and easier to see.

The use of the funtion function all placed in the JS file, so that will not make the Wind page file is too large, and the phenomenon of failure, but also better management.

Insufficient

Windows desktop-style Web pages can only be a Web page, not as powerful as the Windows system, coupled with the current browser differences, in different browsers to see the effect is also widely divergent.

Harvest and experience

This page of the implementation process, but also I understand the CSS, JavaScript, HTML process, is my level of progress in the process. It also experience the fun of coding rewrite code, sometimes for a code to think for a long time, can not solve the forum for help, the problem was quickly resolved. If you are interested, you can download the source file to my Web page.

To make a desktop-style Web page, for beginners to the web, there is a certain difficulty. Maybe you are unfamiliar with the code mentioned above, it doesn't matter, as long as you are interested in Web learning, seriously learn the basics of web production, I believe that soon your hands will be born more creative pages.