Web reconstruction techniques and solutions to common problems
1. xhtml+CSS skills
●Preparatory work to be done before refactoring:
1. Get a PSD rendering, it must be PSD, so you can slice it more freely by yourself;
2. First generate a web page without slicing the PSD, and name it index_psd.html (this page is for reference);
3. Prepare several necessary folders images (for pictures), css (for css style files), and js (for js files);
●After the preparations are completed, first analyze the structure of the entire page. To analyze the structure of the page, first look at the whole and then the parts. First look at how the largest sections of the page are related, whether they are juxtaposed up and down or tiled left and right. After seeing the large section structure of the page clearly, you can build the most basic blocks of the page. For example, if our page has a top, middle, and bottom structure, we can write:
<div id=”header”></div>//Place header and navigation, etc.
<div id="content"></div>//Theme content of the page
<div id=”footer”></div>//Page footer copyright statement, etc.
●When writing CSS, you need to use the index_psd.html file. Open this file with DW and select the view mode. You can measure the length and width of each block by pulling the auxiliary lines to provide a reference for setting CSS. The advantage of this is The reconstructed page can be accurate to 1 pixel.
●Every time you write a block, you need to use IE and ff to test the effect so that problems can be discovered and solved promptly. When each block has no content, it is best to add a background color to them.
●After writing the big section, then analyze the content in the big section. The same principle is to start with the whole and then the parts. For example, the content page looks like there are two sections on the left and right. At this time, we can write the code as:
<div id=”header”></div>//Place header and navigation, etc.
<div id="content">//Theme content of the page
<div class="content-2-1"></div>//Left
<div class="content-2-2"></div>//right
</div>
<div id=”footer”></div>//Page footer copyright statement, etc.
Table 2 in content-2-1 is divided into two columns, 2-1 represents the left column, and 2-2 represents the right column. This column division method can make you more intuitive when viewing the page code. When divided into multiple columns, this The advantages are more obvious.
●News lists, article lists, etc. are best used:
<ul>
<li>News Title 1< >
<li>News Title 2< >
…………
<li>News Titlen< >
</ul>
●The column list plus description is best used:
<dl>
<dt>Column 1</dt>
<dl>Description of column 1</dl>
<dt>Column 2</dt>
<dl>Description of column 2</dl>
</dl>
●It is best to add the following statement at the beginning of the CSS file definition
body,html{ height:100%; }
*{ margin:0px; padding:0px; }
●It is best to set overflow::hidden for large blocks, so as to ensure that the container is not stretched, thereby destroying the layout of the entire page.
2. DIV+CSS issues
1. IE6 unexpected blank problem:
When several small blocks are laid side by side in a large block, the sum of the widths of the small blocks is equal to the width of the large block. This is no problem in other browsers such as FF, but in IE6 there is only one block. If it cannot be displayed, it will be pushed underneath. At this time, you can set the css of the small block to display: inline. If this doesn't work, reduce the width of each block by 1 or 2 pixels.
2. IE6 ghosting problem:
Sometimes in IE6, a few characters at the end of the div content appear repeated at the bottom of a large DIV, which does not appear in other browsers such as FF. There are two ways to solve this problem: 1) Delete the comment; 2) Add <div class="clear"></div> after this DIV. Define the CSS style of clear as:
.clear {
font-size: 1px;
clear: both;
visibility: hidden;
width: 1px;
}
It is recommended to use the second method. If the comments are removed, the readability of the code will be affected.
3． Problem with IE6 not being able to center:
Generally speaking, as long as you set the css style for a div (set its id to 1): margin:0px auto;, you can center the div in the container that holds it (set its id to 0). Their structure is as follows:
<div id="0">
<div id="1"> … </div>
</div>
But IE6 doesn't work. At this time, you can set the css of div0: text-align: center;
4. Unexpected borders appear on linked pictures in IE6
In IE6, sometimes linked images will have an ugly border, which is caused by <a>. This can be eliminated by setting a { border:0px;} in CSS.
5. The content inside the DIV in FF is derailed
Sometimes content that looks normal in IE can be seen in FF but the content inside the DIV has gone outside. This situation is especially obvious when the div has a border. This is because after the height of the div is set in IE, if the content inside the div is higher than the div, the div will automatically increase in height. But FF is not so flexible. As long as the height is limited, it will not change by itself. At this time, you can solve this problem by resetting the height, or you can set the height to automatic.
6． Area disappears unexpectedly in FF
A normal layout in IE has disappeared in FF. This problem often occurs in the copyright block at the bottom corner of the page. This can be solved by adding: clear:both; to this area.
I can't think of other problems at the moment. There will always be some inexplicable problems during the reconstruction process. As long as you are good at thinking, take the trouble to test, or search online, you will always find a solution. The solution of every problem is a big gain.