page [The purpose of this article]: to share with you how to learn Web-standard web-based Web production.
[This article is suitable for the crowd]: Web making beginners. Friends who have a certain base of page making and want to learn or are learning Web standards.
[Note]:
This article only from the understanding and the concept of sharing web page production learning methods and steps. To be easy to understand, so there is no specific code, specifications, and other content, such as XHTML code specifications, CSS style manuals and other specific content I will be in the last "Recommended resource List" in the article I have seen or learned the tutorials one by one.
the new situation of Web page production and career positioning.
With the development of the network, a few years ago only foreign websites and a few personal websites in China to implement the Web standards, now is a big way. To Sina, 163 and other portals, down to just graduated from college students of the personal website. There are traces of it everywhere.
The Division of the website construction also from the original one person contract (from effect to page to program code) pattern also gradually transforms into the Web Designer + page Builder + Programer Project team cooperation development pattern. Because of the rise of web standards, the title of "page engineer" is slowly on the stage and plays a very important role.
Once in the blue Classics to see Aether posts out of Tudou (tudou.com) recruitment information, feel this recruitment information is very representative, the original text is as follows:
Page engineer, 1 people
Skill Requirements:
1. Have a deep understanding of the Web page standard (standards);
• Proficient in structural layer code (XHTML) and Style layer code (CSS).
• Profound understanding of semantic, structure and content separation;
• Familiar with JavaScript, and understanding of the behavior layer programming mechanism, and understand the background program production process.
2, there are mature works, the current will be mainly engaged in the direction of the code work;
3, proficient in JavaScript first.
Work content:
With the page architecture (Web Architect, responsible for overall planning), complete the page creation (pages Builder).
Upstream is the page design (Web Designer), downstream is the website programmer (programer).
I was very much in agreement with this career position, so I turned around. Perhaps this will be the more popular in the future of the site production process of the project team division of the model Bar.
basic features of web pages based on web-based standards
From three years ago began to contact the Web page to now, I personally experienced most of the domestic web site standard refactoring. Myself in the continuous learning process has also summed up a bit of web standards in line with the general characteristics of the page, and we share together.
1. Easy to read and understand the page code。
To give a simple example, if you want to implement the layout of a page before, usually use a table to divide the entire page. Please read and run the following code:
<textarea id="temp11251" rows="8"><table width= "100%" cellpadding= "5" cellspacing= "1" bgcolor= "Blue" ><tr><td bgcolor= "Silver" Colspan= "2" align= "right" ><table width= "90%" ><TR><TD> home </tD><TD> column one </tD> <TD> two </tD><TD> column three </tD><TD> columns four </tD></tR></tABLE></tD> </tr><tr height= "><TD" width= "25%" bgcolor= "White" > Left content </td><td width= "75%" White "> Right content </td></tr><tr><td colspan=" 2 "bgcolor=" #f8f8f8 "align=" center "> Tail Text </td ></tR></tABLE>
And we are, in general, simplifying this way:
Home
Column One
Section Two
column Three
Section four
Left-Hand content
Right-hand content
Tail content
And then through the external CSS to the elements on the page layout and beautify the effect, such code relative to the previous paragraph should be said more refined short, easier to read. And this legibility, you can also understand that the search engine is also easier to read your content, deaf and other people with disabilities can also through a number of special equipment to read your content, WAP Internet with mobile phone can also be more smooth access to your page.
2, the page becomes smaller
The same Web page is manufactured under the new standard compared to previous traditional productions, the code can generally save more than 40%, of course, due to the following reasons:
A. Usually in the standard pages, no longer directly use the <TD bgcolor= "Red" align= "center" ....> This method directly to control the display style, but placed in the CSS file outside the page to perform.
B. Discarding the way tables are used for layout, the redundant code of the N-table repeated nesting is no longer present.
C. The page is no longer directly used to decorate the picture, but the use of the CSS in the background map to achieve. Of course, the actual meaning of the picture should still exist, such as the site logo icon, advertising pictures, news pictures and other is not used to decorate the effect of the page, is part of the actual content of the type of picture.
D. A large number of JavaScript code is also ported to the outside of the page, in the page will be streamlined into .
Of course, the characteristics of the above is very superficial, but also very limited to the page code to describe the relatively simple features, for the page production staff, but also put forward higher requirements, will be in the following article to do a detailed explanation.
Interested friends can follow this effect map to use the traditional method to try to do, and then look at the page's HTML code, is it really a lot shorter?
How do you train yourself to write concise, semantically, structure-clear HTML code? In the next section, we'll discuss how to split an artwork-drawn effect map into a structure layer, a presentation layer, a behavior layer, and how to properly handle the relationships between the three.
Understanding performance and content separation
Performance is separated from content, which should be the core of the Web standards advocated. According to the standards proposed by the Consortium, the Web page is divided into three blocks, namely, structural layer, performance layer, behavior layer. Below we are also the above section of the effect diagram for example, to understand these three pieces of content. You can open this page in a new window.
HTML code: From the point of view of the page code, we should say that we can only see these things: a title, and a detailed list. So the code that's initially formed in my mind should be
Program code
title
- list Items
- list Items
- list Items
- list Items
...
- list Items
CSS code: Is the visual effect you see. By changing the CSS file, we can change the visual effects of this page arbitrarily without practicing the HTML code. All the effects should not be related to the HTML content itself. Because the visual effect is simply to make the page more beautiful and easier for users to accept.
Javascript: A careful friend will find a small triangle on the left of the title bar. By clicking on this icon, we can complete a shrink function, which is behavior and is not related to the content of the page.
The three roles are responsible for three different divisions and try not to interfere with each other.
A Web page should be based on its main content, so I stand for it. To write HTML code First, when writing HTML code, we try not to consider to cater to its manifestation, so as to write structured, semantic page code. Of course, in the CSS implementation and behavior scripts, we also allow the smallest degree to modify the existing HTML code, after all, there are many objective factors in the constraints. But this does not mean that like some Web sites, purely for the purpose of verifying through the consortium, in order to implement some unreasonable effect diagram to write similar to n div nested, full page is a div. Nowadays, a popular term "div+ css" makes a lot of beginners have a serious misunderstanding of the web standards, that is, using DIV to replace the previous table, will produce "full page with div" error conclusion.
This kind of performance and content is separated from the design idea, for page production personnel, but also put forward higher requirements:
1. Discard the "WYSIWYG" web page editing software and use handwriting instead. Personally to feel the true meaning of each HTML tag. You will find that there are so many useful tags that are not better than the table tags.
2. Previously only using DW, FP and other software to pull out countless tables and then fill something in to save as a Web page era has passed, you have to understand each HTML tag it should be placed in the location of the page.
3. Page HTML code is not responsible for the effect of the page, it just tells the browser I this page structure and content, so just at the beginning, you will feel that the standard page to make all the more ugly, it is because you have not learned CSS, even if the learned, You haven't been through many times this kind of HTML code with CSS code separately written practice.
4. Try to make every label on the page have its real meaning. Don't let HTML code live with CSS.
new knowledge of JavaScript
What is Javascript? Two years ago, I said it was a clown, because at that time in the eyes of many web-makers, it is about equal to special effects, such as the effect of the happy lights, pop-up windows, pop-up when the page is closed, and so on, there are special sites to collect JavaScript special effects, and classify it as window effects, text effects, Photo effects and so on. This is enough to show that JavaScript was a clown in the web-making field a few years ago.
But now, if you still say that JavaScript is a clown, I will object to you. Since the rise of AJAX applications, the promotion of web standards, you can say that JavaScript and ASP, ASP.net, JSP, such as background development language, in a position not to be belittled. This is the "front page development".
Web page, I think roughly can be divided into two categories: a class of content-oriented, such as the General content page. The other is to focus on the application type, such as Gmail led. Of course, the general Web pages are both there, just what is more than the weight. In the focus on the user experience, interactive today, Web page foreground script development has played a very important role.
Web page Production Industry division of labor and cooperation mode is still in the groping stage, so, for the behavior layer code writing work in the end belong to the Web page production staff or developers. I think we should look at the specifics of each development team. Anyway, as a page-maker I think I should know something about JavaScript and Dom.
the knowledge that page makers should know
If the artist is only responsible for the effect of the graph, the programmer is only responsible for data processing. Then the Web page maker has to be responsible for most of the things.
1.XHTML (This is the most fundamental and most important.) ）
2.CSS (do not learn this, you simply do not have the means to achieve the art of painting the effect of the picture.) ）
3.Javascript (although it is said to focus on the structure, performance, behavior of the separation, but many times we also need to use Javascript and CSS with the fight.) ）
4.Dom (Document Object model, used with JavaScript.) ）
The following content for personal experience, the most important is the top four points.
5.SEO (search engine optimization, although there are now specialized to do SEO company, but not every site will go to ask those people to do this kind of thing, if you will you will know in fact a lot of optimization is the page code optimization. ）
6. The usability of the website (such as the normal display in the NoScript environment). ）
7. The usability of the website (art drawing out of the picture is no behavior, and users can do things on the web, so how to make the page ease of use, this is what you should consider, unless you have a dedicated UE personnel. ）
8. Understand the background program development (background development of understanding to facilitate communication with developers, otherwise it will be very troublesome.) ）
List of tools and software I use
CSS code: Is the visual effect you see. By changing the CSS file, we can change the visual effects of this page arbitrarily without practicing the HTML code. All the effects should not be related to the HTML content itself. Because the visual effect is simply to make the page more beautiful and easier for users to accept.
Javascript: A careful friend will find a small triangle on the left of the title bar. By clicking on this icon, we can complete a shrink function, which is behavior and is not related to the content of the page.
The three roles are responsible for three different divisions and try not to interfere with each other.
A Web page should be based on its main content, so I stand for it. To write HTML code First, when writing HTML code, we try not to consider to cater to its manifestation, so as to write structured, semantic page code. Of course, in the CSS implementation and behavior scripts, we also allow the smallest degree to modify the existing HTML code, after all, there are many objective factors in the constraints. But this does not mean that like some Web sites, purely for the purpose of verifying through the consortium, in order to implement some unreasonable effect diagram to write similar to n div nested, full page is a div. Nowadays, a popular term "div+ css" makes a lot of beginners have a serious misunderstanding of the web standards, that is, using DIV to replace the previous table, will produce "full page with div" error conclusion.
This kind of performance and content is separated from the design idea, for page production personnel, but also put forward higher requirements:
1. Discard the "WYSIWYG" web page editing software and use handwriting instead. Personally to feel the true meaning of each HTML tag. You will find that there are so many useful tags that are not better than the table tags.
2. Previously only using DW, FP and other software to pull out countless tables and then fill something in to save as a Web page era has passed, you have to understand each HTML tag it should be placed in the location of the page.
3. Page HTML code is not responsible for the effect of the page, it just tells the browser I this page structure and content, so just at the beginning, you will feel that the standard page to make all the more ugly, it is because you have not learned CSS, even if the learned, You haven't been through many times this kind of HTML code with CSS code separately written practice.
4. Try to make every label on the page have its real meaning. Don't let HTML code live with CSS.
New knowledge of JavaScript
What is Javascript? Two years ago, I said it was a clown, because at that time in the eyes of many web-makers, it is about equal to special effects, such as the effect of the happy lights, pop-up windows, pop-up when the page is closed, and so on, there are special sites to collect JavaScript special effects, and classify it as window effects, text effects, Photo effects and so on. This is enough to show that JavaScript was a clown in the web-making field a few years ago.
But now, if you still say that JavaScript is a clown, I will object to you. Since the rise of AJAX applications, the promotion of web standards, you can say that JavaScript and ASP, ASP.net, JSP, such as background development language, in a position not to be belittled. This is the "front page development".
Web page, I think roughly can be divided into two categories: a class of content-oriented, such as the General content page. The other is to focus on the application type, such as Gmail led. Of course, the general Web pages are both there, just what is more than the weight. In the focus on the user experience, interactive today, Web page foreground script development has played a very important role.
Web page Production Industry division of labor and cooperation mode is still in the groping stage, so, for the behavior layer code writing work in the end belong to the Web page production staff or developers. I think we should look at the specifics of each development team. Anyway, as a page-maker I think I should know something about JavaScript and Dom.
The knowledge that page makers should know
If the artist is only responsible for the effect of the graph, the programmer is only responsible for data processing. Then the Web page maker has to be responsible for most of the things.
1.XHTML (This is the most fundamental and most important.) ）
2.CSS (do not learn this, you simply do not have the means to achieve the art of painting the effect of the picture.) ）
3.Javascript (although it is said to focus on the structure, performance, behavior of the separation, but many times we also need to use Javascript and CSS with the fight.) ）
4.Dom (Document Object model, used with JavaScript.) ）
The following content for personal experience, the most important is the top four points.
5.SEO (search engine optimization, although there are now specialized to do SEO company, but not every site will go to ask those people to do this kind of thing, if you will you will know in fact a lot of optimization is the page code optimization. ）
6. The usability of the website (such as the normal display in the NoScript environment). ）
7. The usability of the website (art drawing out of the picture is no behavior, and users can do things on the web, so how to make the page ease of use, this is what you should consider, unless you have a dedicated UE personnel. ）
8. Understand the background program development (background development of understanding to facilitate communication with developers, otherwise it will be very troublesome.) ）
List of tools and software I use
1.Editplus is used to write HTML code and JavaScript code.
2.TopStyle is used to write CSS code.
3.FrontPage Although everyone said DW is better than this, but I have been using it, now basic handwriting, but occasionally use. Have feelings.
4.Firefox Browser, the powerful plug-in features attracted me.
5.Opera Browser, a few more, look at your work in a variety of browsers are not the same.
6.vs.net projects are mostly done with vs.net, but I do not recommend you to use 2003 to do the front page, 2005 will be slightly better
