What is DIV+CSS? What are the advantages?

For beginners or beginners, there are often questions about these aspects:

What is DIV+CSS? What is the essence?

What are the advantages of DIV+CSS?

Beginners Learn div+css, how to get started?

What software is used to layout pages and edit CSS?

Can you provide a few examples to explain how to achieve?

Such questions are the most frequently asked by beginners. The answer to these questions is also in the beholder. But from a strict point of view, the name of Div+css is wrong, but like our rookie class are called, accustomed to it.

1. What do you mean by div+css? What is the essence?

To understand this meaning, first of all, you have to have a certain understanding of the Web page, and div relative to the table layout has a good understanding, so understand it is not difficult.

Div+css is one of the commonly used terms in Web site standards (or "web standards"), usually to illustrate the difference in how tables are positioned in the HTML web design language, because the XHTML web design standard does not use the table positioning technique, but instead uses the div+ CSS way to achieve a variety of positioning. The div box model structure is used to divide the parts into different blocks, then the position, size, frame, inner and outer margins and arrangement of the box model are defined with CSS.

CSS is an abbreviation for English cascading style Sheets (cascading style forms), a computer language used to represent file patterns such as HTML or XML. When we use table layout, we have contacted and applied to CSS.

A DIV element is an element that provides a structure and a background for the contents of a chunk (Block-level) within an HTML document. All the content between the start and end tags of a div is used to make up this block, where the attributes of the contained elements are controlled by the attributes of the div tag, or by formatting the block with a style sheet.

Simply put, Div is used to build Web site structure (framework), CSS used to create site performance (style/beautification), in essence, using XHTML to standardize the site, use CSS to separate performance from content, facilitate site maintenance, simplify HTML page code, Can get a better website structure for future maintenance, collaborative work and search engine spiders crawl.

Of course, not all of the pages need to use div layout, such as data pages, reports and other pages of the time or will use the Table,web standard does not say to abandon table. The so-called div+css layout called people more worried, do not let div become a substitute for table, multi-layer nested div will seriously affect the readability of the code, using HTML to provide us with the tag bar.

2. What are the advantages of DIV+CSS?

1: Performance and content phase separation

The design part is stripped out and placed in a stand-alone style file, where only textual information is stored in the HTML file. Meet the standards of the Consortium, Microsoft and other companies are the support of the consortium. This is most important because it guarantees that your site will not be eliminated because of future upgrades to your Web applications.

2: Improve indexing efficiency of search engines on Web pages

Using HTML that contains only structured content instead of nested tags, search engines will more effectively search your Web content and may give you a higher rating.

3: Code concise, improve page browsing speed

For the same page visual effects, the use of Css+div refactoring page capacity is much smaller than the table-encoded paging file capacity, the code is more concise, the former generally only the latter 1/2 size. For a large web site, you can save a lot of bandwidth. and support the browser's backward compatibility, that is, regardless of the future of the browser war, victory is IE7 or Firefox, your site can be very good compatibility.

4: Easy Maintenance and revision

The adjustment of the style is more convenient. The separation of content and style makes it easier to adjust pages and styles. You can redesign the entire site's pages by simply modifying a few CSS files. Now YAHOO,MSN and other international portals, NetEase, Sina and other domestic portals, and the mainstream of the WEB2.0 site, are using the DIV+CSS framework model, more confirmed that DIV+CSS is the general trend.

3, Novice learning div+css, how to get started?

Learning anything is the same, from primary school, middle School, university, in addition to learning knowledge is to learn methods! To learn the standardized layout of Web pages, we must first discard the traditional table layout of the form of fixed thinking, with div layout, starting from the content. and must have a good understanding of HTML tags, at least see how it is used, what to do. Because a style it is impossible to break out of the HTML page, HTML does not combine with the style, CSS lost the meaning of existence. Next is the CSS, you must be able to write the style of common CSS.

Learning methods can be found on the internet today's tutorials or materials, such as the site September 2010 new ten-day Web Standards (DIV+CSS), June new "Novice FAQ Series Video Tutorials" and the previous CSS page layout introductory tutorial, DIV+CSS Web Design Video Tutorials ( Behind the two series is a bit old, suggest learning the front, are very good tutorials, I believe that through this series of learning, you can quickly get started.

Also recommend a few books: "The CSS Authoritative guide" "website Refactoring" "Website layout record" "HTML Reference Encyclopedia." Reading a book, in general, the first time to read through the entire book, do not understand also to look down, in the process of looking down you may find the answer to the question. After reading you have a general impression, but there must be a lot of do not understand the place, it does not matter, continue to look down. The second time you're going to look around and do your study notes, and write down the parts that you think are important. Also, you feel the part of the doubt to write down, with questions to see, if there is no answer, you can go to the BBS to send a post, kind-hearted people or a lot of, prompted a sentence: "must learn how to ask questions!". You also have to go to the computer to practice the example in the book, the most confusing: "One can not remember, the other is the concept of the wrong understanding (this may be a bad translation of the book, the other is your understanding of the wrong)", for the first one you have to build confidence, adhere to go on. When you get to the finish line, you find that everything is logical. Because you work hard, there will be rewards and results.

4. What software is used to layout pages and edit CSS?

On this issue, as long as you can reach the level of handwriting, with any software, such as Notepad. For beginners, it is recommended to use Dreamweaver (the homepage of this site provides download access), Microsoft's FrontPage alternatives Microsoft Expression Web or TopStyle.

5. Can you provide a few examples to explain how to achieve?

About the case, the site launched a detailed from the production of Effect map, page cutting, div layout, CSS positioning and beautification, and so on from beginning to end of the detailed tutorial: http://www.aa25.cn/div_css/911.shtml, a total of three pieces, I hope to help you. If it's hard to learn this article directly, start learning on the first day of the ten-day Web Standard (DIV+CSS).