Web design using frame and sliding door technology

Source: Internet
Author: User

Have seen a number of similar articles, but these articles in theory, the text is more, not from the technical point of view to analyze and realize the sliding door effect, some time ago on the whim of this made a special study, here will be my income dedicated to everyone.

One, what is sliding door technology?

Navigation buttons

As pictured above, simply put, sliding door technology is: when clicked on the navigation button on the page after the navigation button's CSS features changed, so different from the group's other navigation buttons, prompted to the operator, the current browsing content is the CSS feature changes in the button pointing to the content. One of the great benefits of this effect is that you can clearly reflect what columns or classes The current browsing content is on a multiple-navigation page, while giving a visually pleasing, clear, and clear visual feel. The leading actor of the sliding door technology is the manipulated object, this is the object that is clicked here, the CSS feature is mainly refers to the navigation button including the other elements of the property changes, of course, this button can be in the form of buttons, A, TD can even be a P or div such a closed element, Their properties mainly refers to the elements of the border, background, font color, size, thickness and outer and inner spacing, and so on, in short, all of its own "status" can be distinguished from the other properties of the main may be used in sliding door technology.

Ii. when to use sliding door technology?

Observation found that many large web site channel navigation or column navigation will appear on its content page or the final level page, in fact, these so-called channel navigation or column navigation on each content page is the same, that is, these content is repeated, then, Each time the browser client loads the content, it is actually downloading the same content repeatedly. This not only waste a lot of bandwidth, but also to the content of the loading of the page has a great impact (because the navigation content is generally placed at the beginning of the page, page loading is also in accordance with the order from top to bottom reprint, If the part of the navigation that is the top of the page is not loaded, the bottom of the page is not loaded. As a result, traditional web design (aside from the search engine support) actually has a lot of drawbacks and unscientific. Of course, if you use the traditional web design approach, the application of sliding door technology is actually not very meaningful, because each page has its own navigation part, as long as the navigation part of the page to do some action can be very obvious to achieve the effect of sliding door, but this is only a pseudo effect, And the way this is handled is very low-level. Now all we have to do is to have the properties of the navigation buttons in the navigation group automatically adapt to the current content page display. That is, when the "News" navigation button is clicked, the "News" navigation button on the content page automatically shows the sliding door effect, rather than manually modifying its CSS properties beforehand. This effect is best achieved by using a frames page.

Of course, you may be opposed to the frames page, you will say that in this search engine rampant era use frames page is undoubtedly suicide, but in fact, when you say this words are already in the weak, the real strong dare to defy the search engine and even dare to challenge search engines, Really good web Designer is not to cater to the needs of the search engine to the maximum, but to meet the needs of users, that is, to maximize the user experience, this is what our web design really need to do.

The advantages of sliding door technology used in frames Web pages

While many people are opposed to using frames to lay out pages, in fact, the framework has the best support for the layout of the page. First of all, eliminates the repeated loading of different content pages of the same content of time and bandwidth, improve the page load speed, give people a no refresh page load feeling. Secondly, the combination of frame and sliding door technology is more advantageous to improve the user experience, on the surface, the use of frame and sliding door technology of each frame page in the process of user action is changing, for the navigation framework is the operation of the object's style changes, to the content page refers to the content of the change, and in depth, The data in the navigation frame is still the original data and has not been downloaded from the server again.

Today's Ajax technology is seen by many as a model of high technology, everyone wants to go to arty, in fact, Ajax technology is also not supported by search engines, Ajax is the most bright point is not repeated loading of duplicate data and no refresh load data, in fact, "no refresh" The three words are somewhat reluctant to say, As long as there are updates to the data are to be refreshed, here "no refresh" refers to the entire page without refreshing rather than local content without refreshing. The same effect is achieved by using frames to divide the pages, so here's what I say: The framework's support for web design is more likely to achieve the desired effect of Ajax if the same effect is achieved.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.