Some suggestions on front-end design of web pages

Last Update:2017-02-28 Source: Internet

Author: User

Tags copy end

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

But in this restoration process should also need some basic process and attention to something.

1. What do we usually do when we get the design drawing?

Perhaps we will be in the picture after apart, directly to the effect of the map, the code from scratch to the feet?

Please say to this procedure no!

We recommend that you get the design plan, do not rush to start production, first look carefully (not to see how beautiful ^_^). As Sunding, he saw not a simple cow, but the mechanism of the bovine body. And we want to see is the design of the skeleton, only the skeleton, to know the structure of this diagram should be how to write. After grasping the overall structure, start knocking on the code to avoid knocking on the code, knocking and pausing to think about how the area should be written.

2, to the structure of the idea, whether you can knock code?

No, we seem to have some things to forget to do. For example, what techniques are needed to implement some of the effects of a design manuscript? Or some part of it, how it needs to be done. We only have a general understanding of the entire design to know what to do with this page, what needs to be used, and what to prepare.

And after we have done some of the above things, then the work will be a lot smoother to knock code. Because your mind is already working, for each part of the design is already clear on the chest, knocking code, of course, will be like God help.

3, usually, we can write a fixed HTML frame in advance, in preparation for the future work of high-frequency use. copy content to clipboard

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title></title>
<meta http-equiv="imagetoolbar" content="no" />
<meta name="Robots" content="all" />
<meta name="Author" content="" />
<meta name="Copyright" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link type="text/css" rel="stylesheet" href="skin/layout.css" media="all" />
<body>
<!--从这里敲你的代码-->
</body>
In this way, you can save time to find and copy these things every time you go to another page. Of course, if you are using some Ides, it may automatically help you generate, but automatically generated things may not necessarily suit you. 
 
4, the same, there will be a similar CSS framework 
 
Say the framework seems a bit inappropriate, this so-called CSS framework, in fact, is just some common, reusable style collection, such as some of the reset style or other. This eliminates the need to repeat the same things every time, reducing the time you play the style and improving your productivity. Of course, this collection should be a collection that fits your job needs, not a collection that is written for a set, and that doesn't bring convenience to your work, and if so, don't write. 
 
Is there a reference standard for the quality of HTML and CSS styles? 
 
Should say is not, 
 
But a good HTML structure, I think at least need to have the following elements: 
For a page with short time, less modification and a fixed structure, need to be concise, clear, for the timeliness of long, frequent changes and more structural changes in the page, also need to make the HTML structure as concise as possible, clear, but more important is to have strong scalability (in the page has a larger change, will not bones, Can be easier to handle). 
 
Then a good CSS, and what is it? 
 
A good CSS file, should have high multiplexing, low coupling, of course, also need to pay attention to simplicity, can abbreviate abbreviations to reduce bytes. There is also a very important, is the name. Good naming, can be common, such as #header, as long as the development, not limited to the front end, is the back end, can also be able to know at a glance that this refers to the "head", which enhances the readability of your code. Of course, since everyone's style is different, this may require a specification. The benefits of which are self-evident. There is also the hack, this dongdong, although can help us solve a lot of problems, but can not try not to use, because it will not only damage the readability of the code, but also increases the later maintenance costs, and is not conducive to backward compatibility. 
 
These are the most important things for group work. Because a team, inevitably have the replacement of personnel, it is inevitable that a project will change more than one receiver. At this point, a specification, or a good readability of the page structure and CSS, can allow the new person to quickly enter the project when you do the state, to improve the efficiency of a great help, but also the whole team's code style of formation and writing habits have a greater help. 
 
Say these, actually also need to pay attention to is the structure of semantics, of course, there are some micro-format. SEO is now hot to fry, but semantic and SEO does not conflict, and do a good job of the structure of the semantic, in fact, SEO is also a great help, and now an overall trend is standardized, for this large environment, is the heavyweight search engine will not despise, spiders on the structure of the page is also very sensitive. Real SEO is not just a loophole, but to return to the root causes.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More