Xhtml+css layout mode is widely accepted because of its performance and content, which can improve the index efficiency of search engine, code simplicity, improve page browsing speed, easy maintenance and revision, and many other advantages. The following author combines the mobile Phone business class website, the xhtml+css layout in combination with some summary of SEO, hoping to give webmaster colleagues some useful reference.
First, do a good job of web page structure analysis, is the premise of the design of the Web page
A site with a high number of visits is a factor in the success of the site, we design the Web page in accordance with the different theme of a reasonable choice of plate and color matching, the site to achieve the publicity effect through a reasonable mix of beautiful pages to attract customers interest, prompting them to visit our website.
first, the analysis of the page plate structure
"Mobile Business Website" Mainly to promote new mobile phones and sales on the Internet mainly, the characteristics of this type of site is mainly to let people feel the rich and beautiful goods in the choice of color is mainly blue, green, small icons, small buttons, border lines and other decorative small graphics to red, orange-oriented, it appears that the page colorful, lively, generous, Strong visual impact; In addition, "mobile Business Website" Main page includes website banner, navigation bar, site search, new product picture publicity, the latest news, Web services, product information, copyright information.
Second, analyze page layout structure
The entire Web page frame is relatively simple, including banner pictures, navigation bar, search bar, page subject and copyright information. Therefore, the basic Web page frame structure is adopted. A clear and accurate architecture design is the foundation and key to the next step in the layout.
Third, according to the XHTML+CSS Layout Web page model features to achieve page of the production of modules, highlighting the advantages of layout
The overall framework of the page has a general design, the various modules for the processing, and finally unified integration, this is the design of the usual steps to create a Web site, the formation of good design habits can be practice makes perfect.
1, the use of div tags to block the page, to determine good blocks and the relationship between the sub-block based on the analysis of the layout of the page block, and the production process to note the use of annotation statements, so that the page code clear, easy to read.
2, the definition of CSS styles to achieve the design and beautification of the block effect
Page after the partition of the module, the next is to define the CSS style positioning and landscaping work, the specific operation of the entire site before the style analysis and planning work, this is the effective use of CSS style sheet premise.
1 the entire Web site to use the CSS style sheet for unified planning. From the principle of consistency of the Web site effect, the whole site's style of the system analysis and planning, detailed list of the name and style of each style content. Use attribute abbreviations in particular to minimize redundant code, such as:
margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px can be written in this format: margin:0 10px.
2 the application scope of CSS style is unified planning. The style effects you want to use for each page in your Web site (example: Common text information in each page uses a uniform size, fonts, row heights, colors, and so on) are uniformly defined in an external style sheet file to facilitate calls to individual pages, while the effects that you want to use individually on a page are defined directly in the appropriate page as nested style sheets.
3) based on SEO style naming specification
Search engine is through the crawl site source code to make intimate contact, how to better let search engine crawler more accurately aware of the relevance of the content of the site, enhance the site's search optimization? There may be unexpected gains from the basics of naming rules, The following from the perspective of the front-end design of some common naming rules, it is very good to consider the search engine preferences, in the process of page design, as far as possible to make the search engine understand, so as to achieve our design goals.
3, the overall adjustment of the page effect to ensure the coordination of the page and beautiful
After the steps of the page has been basically formed, in the final production, often also need to make some details on the page to adjust the effect. For example, whether the values of padding and margin between blocks are coordinated with the overall page, and whether the individual blocks are harmonized and so on. In addition, for fixed-width and centered plate, you need to consider adding a background to the page to fit the large display users.
Second, consider the browser compatible processing, to ensure that different users see the best page effect
In the design of Web pages, often encountered in IE made in the page to change to Firefox preview, found that the page effect changes very much. In order to solve this problem, we should do the corresponding processing when designing the webpage. Commonly used methods are: Starting from a blank page, each one small step, at the same time in various browsers to view, once found that the display effect is different, immediately find the cause, find a solution; You can also simulate the effects of web pages in a variety of browsers, such as the current IETester v0.2.3, this can be done while modifying; In addition, we should be good at summarizing some frequent problems in the process of processing methods. For example: use padding or border to avoid border overlap. You might be overwhelmed with space that you shouldn't have, or if you need a little space, you can't squeeze it out, and if you're useful to margin, it's easy to create a border overlap. And if there are some mistakes that make 50%+50% 100.1%, so that the Web page problems, then try to change these values to 49%, or even 49.9%, often this approach to solve the problem and so on.
This article from the Chinese Paper Center (www.zhonghualunwen.com) Reprint please mark! Thank you!