Web page Slicing

Web page Slicing

The skills that the front-end must master, slice, although difficult to say, simple is indeed quite simple. At that time, I saw the tutorial, although the content is still not standardized, but as a whole, it is still good to understand. For some standards, follow the requirements of the team. It is not absolute.

Ten days to learn DIV + CSS http://www.aa25.cn (when writing an article can not, I Baidu A chmhttp: // vdisk.weibo.com/s/uiL0Ty-gTwfb)

At that time, I found a slice. You can take a look at this.

It comes from the network, and I can't find the source, So I simply paste it.
In fact, the work completed by the standard network is: psd to html. In general, we will get the psd of the artist. At this time, different people will have different practices:
1. Open fireworks to cut the image and export it as html.
2. Drag the layout directly using tools such as dreamweaver and import related images and flash resources.
3. Cut the graph in ps, and then watch the step-by-step creation in the text editor.
Most of the above methods are used, but they are not good:
The first method is the worst. Such code is not maintainability and readable.
The second method is not good, and the code will inevitably be redundant. You need to troubleshoot the issues.
The third method is also not good, because you need to look at a little bit of competition, that is to say, when writing html tags, you are constantly assuming how to display this part.
The correct method is:
1. after obtaining the psd, do not do anything else. Write the webpage framework directly in the text editor. Do not assume that the css will be rendered in the future, and the labels will be completely natural without any css.
2. After writing, make sure that there is no problem with the general positioning after the various browsers run.
3. Write the overall css. the css here is only responsible for positioning and styles of large blocks.
4. Cut out the required image resources, construct them in the Framework, debug them continuously, and finally make them finished.
5. Finally, add comments to your code. In css and html, add comments to your code as appropriate.
There are still many things to pay attention to in order to flexibly switch the skin and make css dominant, but the general process is like this. Of course, we cannot directly write html at the beginning, but at least we need to have this awareness, step by step...

In addition, the authors mentioned above may not have to say that they do not need to use it. (when there is only 30 minutes to get an activity page, everyone will not hesitate to use the first method · directly partition the table.

I will describe the above chm instances as follows. Please measure the previous basic knowledge.

In the chm tutorial, dw is used for development. As I interviewed that dw is used for development, I have never used it again after being despised. Don't ask me why. You need to discuss your life with the interviewer.

 

In the tutorial, the website is established, in fact, the folder directory and so on (I am used to this establishment and development in my local server environment, to avoid misplacement of local static pages and online pages, there are also some problems such as the failure to execute online js.

----/Html file

---- Css/css file

---- Js/js File

--- Images/image files

--- Images/temp/Temporary image files (many products, such as news images, are not used when the file is launched)

Let's get started,

Generally, the main framework of the page is set up first, which is the same as chm.

The main advantage of this is that the overall structure is not affected when writing the module, but the main framework is not affected under different browsers. When rendering the module in each browser, the display may be a little different, but the main layout will not change. Later, the internal modification is also convenient, because it will not affect the external. (Of course, I think this is more reasonable, and it is better to propose

As for what html code, I will not post it, and there will also be ps cut graph or fw cut graph, these basic software operations.

After the subject structure is compiled, the internal modules are compiled (the semantics and structure of tags are selected, which is not detailed.

Additional Notes:

Generally, only the header nav aside footer article labels may add id control styles. In this tutorial, using id control styles is basically forbidden, id is basically reserved for js for Operation call

For css writing, please watch the previous article [reprint] CSS creation Guide (Beta) (css Specification) http://www.cnblogs.com/moki/p/4362961.html

Js-related files should not be written as inline files according to the tutorial. Please introduce them externally. For this reason, it is related to browser rendering. This will not be detailed here.

Some servers and other things will appear after the chm tutorial. In fact, they were originally developed in the server environment. Please understand these things on your own. My personal opinion is that the front-end must understand the backend, there are also some functional performance methods to choose between the frontend and backend separation, so that you have to touch these things.

Finally, some developed debugging tools, ietest (ie compatible) firebug (js debugging)

As for ietest, it is still rare to implement ie6 compatibility. For ie7, debug provided by ie can be tested. For ie6, the result of the virtual machine is accurate, so consider ietest.

 

Reprinted. Please keep the address. Thank you.