Div Introductory thought Guide

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

With the impact of Web page standards and the advantages of the components of the popular, many domestic portal sites have turned to use DIV technology to rewrite the site page, and for many have been accustomed to the table layout of the programmer, to a sudden change their thinking, With a new way of thinking to face the layout of the work, there are difficulties. In order to overcome this difficult feeling, the author discusses some of his own experience.

In the past, after getting the designer to design a Web page psd file, usually we are Chettu, and then use Dreamweaver and other software, the table to create a good frame after the map, and then start the specific code to write, now we should temporarily forget this method, when you get a PSD file, First on the white paper to draw a clear picture of the structure of the page, and give each module a corresponding name.

Generally speaking, a common Web page can be divided into the following large modules: Head, logo area, navigation area, content area, Friendship link area, bottom description area. These large modules may be divided into several small modules, in the context of the case, can be divided into the first part of the focus area (Id:focus), the second part of the picture area (Id:photo), the third part of the comment area (Id:review) and so on, And the inside of each module can continue to subdivide small modules, has been subdivided into the performance of different elements of the function.

Any HTML page is composed of modules and elements that perform different functions and have different levels. The most basic elements are: Title (H1-H6), paragraph (p), Picture (IMG), animation (SWF), audio (mp3), video (MPEG, RM), and so on. In a Web page, with the same or similar performance effect, as far as possible with the same element name to define, can effectively reduce the code, but also for the future of the Web page revision.

At the same time, the process of dividing the Web module It is also a process of naming modules and elements, taking the name of the module as an example, each module is usually prefixed with its parent module name, for example, the left side of the focus area, then named Focus_left, the child module inside the picture module, is named Focus_left_photo. By adding a prefix to the parent module name, you can explicitly annotate the dependencies of each module, and allow other later-followed people to quickly understand the meaning of the module for ease of management and maintenance. (Of course this is not certain, according to the needs of personal habits to write.) )

In the early stages of learning, you can pick 10 of ready-made web pages with varying degrees of complexity, take a few days, starting from a simple page, a second element to clear the structure of each page, how each module should be named, the bottom of the elements how to define, can be said, with the gradual anatomy of the Web page structure and the various modules, The name of the element, a complete Css+div page code, at least have finished 1/3, and then gradually learn CSS properties, and compatibility, I think, such step-by-step process, will soon be able to master the Div page layout technology.

Reprint please specify the Source: Beijing website Construction http://www.beijingjianzhan.com-Sisyphus Studio.