The way of the page maker's practice

Page

The purpose of this article is to share with you how to learn web-based Web-standard Web page production.
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 is just to share the learning methods and steps of web production from understanding and concept. 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.

First, 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:

Reference :
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.

The 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:

Run Code Box

<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& GT Section two </TD> <TD> column three </TD> <TD> column four </TD> </TR> </TABLE> </TD></TR&G T;<tr height= "> <td width=" 25% "bgcolor=" White "> Left content </TD> <td width=" 75% "bgcolor=" white " > Right content </TD></TR><TR> <td colspan= "2" bgcolor= "#f8f8f8" align= "center" > Tail Text </TD> </TR></TABLE>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

And we are, in general, simplifying this way:

<div id= "Header" >
<menu>
<li> Home </li>
<li> Column One </li>
<li> Section Two </li>
<li> column Three </li>
<li> Section four </li>
</menu>
</div>
<div id= "left" > Left-Hand content </div>
<div id= "Right" > Right-hand content </div>
<div id= "Bottom" > Tail content </div>

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:

• Usually in the standard pages, no longer directly use the <TD bgcolor= "Red" align= "center" ....></td> This method directly to control the display style, but placed in the CSS file outside the page to show.
• After discarding the way that tables are used for layout, redundant code that is nested repeatedly in n tables is no longer present.
• The page is no longer directly using the image to decorate, but the use of 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.
• A large number of JavaScript code is also ported to the outside of the page, in the page will be reduced to <script type= "Text/javascript" src=. /js/**.js "></script>.

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.

Iii. 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 initial code in mind should be:

<ul>
<li> list Items </li>
<li> list Items </li>
<li> list Items </li>
<li> list Items </li>
...
<li> list Items </li>
</ul>

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" has caused many beginners to have a serious misunderstanding of the web standards, that is, using DIV to replace the previous table, will produce a "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 :

• Discard "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.
• Previously only using DW, FP and other software to pull out countless tables and then fill something in to save as a Web page of the past, you have to understand each HTML tag it should be placed in the location of the page.
• Page HTML code is not responsible for the effect of the page, it just tells the browser i the structure and content of the page, so at the beginning, you will feel that the standard page to make a very 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.
• Try to make every label on the page have its real meaning. Don't let HTML code live with CSS.

Iv. Re-understanding 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 the page producer 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 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 (though it's about structure, performance, and behavior), it's a lot of times we need to work with JavaScript and CSS. ）
4. Dom (Document Object model, used with JavaScript.) ）
   The following is a 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 ease of use of the site (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. Understanding Background Program Development (background development understanding is conducive to communication with developers, otherwise it will be troublesome.) ）

List of tools and software I use

1. EditPlus: Used to write HTML code and JavaScript code.
2. TopStyle: Used to write CSS code.
3. FrontPage: Although it is said that DW is better than this, but I have been using it, now basic handwriting, but occasionally use. Have feelings.
4. Firefox: Browser, a powerful plug-in feature attracts me.
5. Opera: Browser, put a few more, look at your work in a variety of browsers are not the same.
6. Vs.net: Most projects are done with vs.net, but I do not recommend you to use 2003 to do the front page, 2005 will be slightly better.

List of resources I recommend

Website:

http://www.w3.org
Http://www.blueidea.com
http://www.w3cn.org
http://www.csszengarden.com/
http://yuntian.cnblogs.com/
http://sheneyan.com/
http://andy.andymao.com/
http://www.forest53.com/

Tutorial:

Style sheet Chinese manual-Su Ying
Style sheet Filter Chinese manual-Su Ying
Document Object Model Chinese manual-Su Ying
Create a more approachable website within 30 days
Website refactoring
"The CSS website layout record"
JavaScript Treasure (Fourth edition)