Web page Making Tutorials: frames, layouts, modules, lists, and blocks of data

Do front end also has several years time, dare not say can see him to look more thoroughly, but somewhat still some own thing. 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 view the page design, to 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

Iv. lists and blocks of data

The body of a module is made up of lists, and the list contains blocks of data.

As I understand it, the information on the page is actually a list of different types. We should extract the typical list form and put it in a common style (PUBLIC.CSS).

In tudou.com, for example, you need to define the list in Public.css to have at least three of the following:

1. List-v Vertical list mode (picture and text in vertical order) 2. List-h Horizontal list (picture and text are arranged horizontally) 3. list-t Text List Way

Data blocks are actually a disguised application of a micro-format, which defines a fixed structure for different data elements.

Tudou.com the data blocks that need to be defined are:

1. Mvideo (VIDEO) 2. Mlist (Bean list) 3. Muser (user)

For example, Mvideo should be like this:

<div class= "Mvideo" > <div class= "P" ><a href= "title=" "></a></div> <div class= "D" > <div class= "D_name" ><a href= "title=" "> Union and wounded are expected to start war bulls </a></div> <div class= "D_user" ><a href= "title=" "> Union and wounded are expected to start war bulls </a></div> <div class= "D_length" >06:88</div> <div class= "D_time" > Release time: <span>2007-10-08 14:31</span></div> <div class= "D_intro" > Arab Union again wounded Arab Union again wounded Arab Union again wounded </div> <div class= "D_honor" > Honors: <span></span></div>" <div class= "D_view" > Popularity:<span>222</span></div> <div class= "D_comment" > Reviews:<span>323</span></div> <div class= "D_favorite" > Collection:<span>32</span></div> <div class= "D_type" > Type: <span><a href= "title=" ">µçó°</a><a href=" "title=" ">µçÊÓ¾ç" </a></span></div> <div class= "D_tag" > tags: <span><a href= "title=" ">twins</a><a href=" "title=" ">Ñݳª»á" </a></span></div> <div class= "D_subject" > Special topics: <span><a href= "" title= "" >±¬ÁÏ</a></span></div> </div> </div>

Finally, the list of keys is appended with the ID and class name for the public definition.

Id

1. #B-*//Body 2. #Head, #Main, #Foot//Layout ID 3. #Message//System message Use 4. #Logo, #Toolbar, #Search, #Menu//head elements 5. #Layout_ *, #Group_ *, #Col_ *//main elements 6. #Links, #CopyRight//foot elements 7. #B *//advertising position, combined with class= "B" 8. #Plugin//Banner

Class

1. txt,. btn,. Label_checkbox,. Label_input,. Handle//form inner element 2. Meat//Module BODY element 3. list_* (. List_v, List_h,. list-t,. List_top, ...)//list elements, see "list" 4.. m//More, can be extended to "absolutely positioned in the upper right corner" element 5. S1,. S2,..///////////////////////////// 6. S//special element, if an element is special relative to the sibling node, the 7. b//Advertising position 8. P,. D,. d_*,. h//data block elements, respectively, for pictures, detailed, detailed elements, operations 9. Handle//Operation elements M_* (. Mvideo,. Mcomment,. Muser, ... msubject, ...)//data block elements A. *_fix//* element's patch Element Current//Present element