Windows desktop style page production (1)

window| page idea of Windows desktop style page
About 1.5 ago, at that time Eva just learned to make a Web site soon, all day for the hard work of the Web page no one looked at, just started to use a drawing software, so in bed to think: Why not do a desktop-like page? That night because of this new idea, I really excited for a long time! This is really a good idea, many netizens see my desktop page said, they also have this idea, but for various reasons did not do it.

Features of desktop Web pages
Desktop style of the homepage or navigation bar is better, because it is concise, intuitive, when the viewer into the desktop to see what a few parts of the page. According to the content and the number of columns to determine the image of the desktop icon and how much, the same, in the menu and taskbar area, can do news, information links.

The implementation of the Web page
When I had this idea, I had no contact with Css,javascript, just use FrontPage to do simple Web pages, understand very simple HTML. Because of this desktop style of the Web page is a grasp of the software and remembered, so, start with the capture of the picture plus hot links to achieve, there is no right button menu. The following taskbar is implemented with a frames page. Strictly speaking, that is not called the Desktop style page, can only say is the picture.

For web enthusiasts with certain HTML, CSS, and JavaScript basics, it's not difficult to achieve this desktop-style Web page. The elements in the desktop: icons, menus, dialog boxes are mainly used to achieve the positioning of the layer, display hidden, drag and so on. It can be said that the style sheet in the implementation of desktop style plays a key role!

Because the desktop page than the general Web page workload much more, in order to make better improvements for the producers, the browser easier to read the source file, should be divided into parts of the Web page. From the system desktop, there are generally the following sections: desktop icons, start menus, taskbar, right-click Menu, and dialog box Windows. The same page is divided into these parts, we can first of all the parts are completed, and then put them together.

Main production Tools: Web page production Frontpage2000, grab figure hypersnap-dx 4, image processing tools, source file editing tools Notepad. (This is just the tool that I am accustomed to, you can choose the tool according to your preference)
Production environment: Windows2000 Professional Edition, IE5.0.

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}

Add a class=up example to the three-dimensional layer:

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:
-----

The arrow at ordinal 4 is the Webdings font:4. 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:

Task bar:

As you can see from the picture, the image in the taskbar is the main part.

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.

The link reading method for the style sheet is to read: The CSS in the id=css here is the same as the CSS in the css.href in JavaScript above. Take a look at the effects of several topics (figure):

Another way to change the style sheet is to change the classname:
。 You can click the Color button to see the effect:
Keyboard action:

In order to make the page more image, I can use keyboard events to do Web page operations, such as the keyboard to open the Start menu, ESC key to hide the dialog box and so on. Here's the onkeydown. Here's an example:

When you return to the current page, it opens the Web page Pottery bar http://homepage.yesky.com, where the 13 represents the ENTER key.
Saving the following code as an HTM file displays the numbers for each alphabetic code (ie applies).

Web page Progress bar:

The idea is based on the source file download process to achieve, the source file is divided into several parts, every part, add a section of code, to dynamically change the length of a picture. Displays the process and percentage of the download.

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 ("" +txt+ "")}

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:
, 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.