Web page slicing_html/css_WEB-ITnose

Slicing is a skill that must be mastered by the front-end. Although it is not difficult, it is indeed quite simple. The tutorials I watched at the time, although the things in them were not standardized, but as a The overall understanding is pretty good. For some specifications and the like, it is better to follow the team's requirements, which is not absolute.

Learn DIV CSS in ten days http://www.aa25.cn (I couldn’t access it when I was writing the article. I found a chm download address on Baidu http://vdisk.weibo.com/s/uiL0Ty- gTwfb)

At that time, I also found an article about slicing, so you can still take a look at this.

It comes from the Internet, and I couldn’t find the source, so I posted it directly
In fact, the work done by standard web production is actually: psd to html. Under normal circumstances, We will get the psd of the artist. At this time, different people will have different methods:

1. Open fireworks to cut and export the image to html.

2. Drag and drop the layout directly in tools such as Dreamweaver and import related images and flash resources.

3. After completing the cutting in PS, watch the rendering step by step in the text editor.

The above are the methods that are mostly used, but they are not good:

The first method is the worst. Such code is not maintainable and readable at all.

The second method is not good either. The code will inevitably be redundant, and the things you make basically need to be checked.

The third method is not good either, because you need to look at the renderings and put them together bit by bit, which means that when writing html tags, you are constantly making assumptions about how to display this piece.

The correct approach is:

1. After getting the psd, don’t do anything else first. Write the frame of the web page directly in the text editor. Don’t assume that this piece of css will be needed in the future. No matter how you render it, it’s a completely natural tag without adding any css.

2. After writing, run it in each browser to ensure that there is no problem with the general positioning.

3. Write the overall css. The css here is only responsible for the positioning and styling of large blocks.

4. Cut out the required picture resources, construct them bit by bit in the written framework, continue to debug, and finally get the finished product.

5. Finally, add comments to your code. Add comments to your code appropriately in css and html.

In order to flexibly switch skins and let css dominate the performance, there are still many things to pay attention to, but the general process is like this. Of course, we cannot directly write html first at the beginning, but At least have this awareness and take it step by step. . .

In fact, the above-mentioned author cannot say that it is not necessary, and it is not necessarily unnecessary (when there is only 30 minutes to publish an activity page, everyone will not hesitate to use the first method... direct table Cut the picture.

I will mainly describe the above-mentioned chm examples. Please evaluate the previous basic knowledge by yourself.

The chm tutorial uses dw, because I said to use it in the interview. dw was used for development, and after being despised, I never used it again. Don’t ask me why, you need to discuss life with the interviewer. Folders and directories (generally I am used to creating them this way and developing them in my own local server environment to avoid misalignment between local static pages and online pages, as well as problems such as some online js not being executed.

----/html file

----css/css file

----js/js file

---images/picture file

---images/temp/temporary picture files (basically, you don’t need many products online, news pictures, etc.)

Okay, let’s start in earnest,

Generally first Set up the main frame of the page, the same as chm

The advantage of this is mainly that when writing the modules inside, it will not affect the overall structure, and different browsers will not Affected by this main frame, basically when each browser renders the inner module, the display may be a little bit awkward, but the main layout will not change. It is also more convenient to modify it later, because it will not affect the outside (

Of course. I think this is more reasonable, and there is hope for better suggestions

As for the html code, I will not post it, as well as whether to cut the image in PS or FW, these basic software operations. After the main structure is written, the internal modules are written (selecting the semantics and structure of the tags, this will not be explained in detail.

Supplementary notes:

Generally, only header nav aside footer article tags can add id control styles. The use of id control styles in tutorials is basically prohibited. The id is basically reserved for js for operation calls

. For how to write css, please read the previous essay [Reprinted] CSS Creation Guide (Beta) (css specification)

Please do not follow the tutorial for js related, write it inline, please import it from outside, why is this? It has to do with browser rendering, which I won’t go into details here

.

There are some things like servers at the end of the chm tutorial. In fact, development is originally done in a server environment. Please understand these by yourself. My personal opinion is that the front-end must understand the back-end, and there are some functions and performances that can be separated from the front and back. The choice of method forces oneself to have to come into contact with these things.

The last few debugging tools developed, ietest (ie compatible) firebug (js debugging)

As for ietest, let’s talk about it. Basically, it is rarely made to be compatible with ie6. For ie7, ie The built-in debug can be used for testing. For ie6, the virtual machine results are accurate, so consider ietest yourself.

Please keep the address for reprinting, thank you