Tudou.com home Page Design of the production method

Do front end also has several years time, dare not say can see him to look more thoroughly, but somewhat still some own thing. Below take Tudou.com's homepage as an example, summary summary.

As far as production is concerned, I divide a page into four layers: frames, layouts, modules, lists, and blocks of data.

I. Framework

The frame of the page is basically: "Head", "main", "tail". However, for some pages such as tudou.com, due to the needs of the layout, it should also be under the "head" to add a "menu."

Second, the layout (the following use #id to represent the page element)

#Head和 #foot in the said, specific view of the demo page source.

The layout says that the contents of the #main are divided into chunks. We see tudou.com, #Main里典型的左右结构, we use #layout_1, #Layout_2表示. As shown in figure

Third, module

Layout #layout_1, #Layout_2里的块就是模块了,

According to my understanding, the module must have at least one id,class to the page design, to the need to reuse the plus.

About the module ID name, to take a meaningful name, of course lazy can use #col_1, #Col_2, ...

The class name of the module is used with the. cols_1,.cols_2.

The following diagram inside the module: