Detailed explanation of front-end page development steps

The boss or Party A is the real initiator of the demand and a dreamer of basic ideas. The product is responsible for professional sorting of the demand or effective evaluation and refinement of the demand, It is the upstream of the front end, and the front end is the downstream of design. The purpose of design work is to professionally process the macroscopic thinking results of the product, because according to general habits, the final result of the product is a prototype, and the prototype can be understood as a sketch of the design,

For real users , this sketch is too simple or does not conform to the user's operating habits, so it requires professional processing by the designer, such as color matching, layout separation, and sometimes it is also part of the interactive work, setting up the booking process for the user to interact with the page,

Then someone asked, doesn’t it work without designing? It’s not enough to just let the front-end write the page. You also need to trouble the designer to make a picture.

Because there is a concept of cost risk control here, because in the early stage, especially in design, subjective feelings are greater than rational thinking, so the results are different every day, so designers need to digest this part of subjective feelings. The misunderstandings brought about,And from a cost perspective, it is easier for some scene designers to control the changes of pictures than the code.

The designer’s result is a psd file, which is the result of many layers superimposed together, while the front-end work result html page is a process of organically organizing the effects of many layers using html.

The front end is to hand over the converted HTML to the downstream server development engineer, or called backend development. This HTML includes some interactive js files, etc. In general, the front-end is a position that connects the past and the future. Some companies also enlarge the responsibilities of the front-end and are responsible for the development of the entire front-end view layer page. The pros and cons of this have been discussed in the previous article, so I will not list them one by one.

background attribute

The background attribute is a commonly used and important attribute in CSS. It is responsible for setting the background image and background color for the box. Background is a composite attribute that can It is broken down into the following settings:

　 a. background-color sets the background color

　 b. background-image sets the background image address

　 c. background-repeat sets how the background is repeatedly tiled

d. background-position setting The position of the background image

e. background-attachment Set whether the background image is fixed or scrolls with the scroll bar

In actual application, we can use the background attribute to put all the above setting items together, and it is also recommended to do so , which has higher performance and better compatibility.

For example: background:#f00 url(bg.png) no-repeat left center fixed

　background:#f00 url(bg.png) no-repeat 10px 25px fixed

front-end page Development process

　a. Create a page project directory.

　 b. Use Photoshop to cut out the renderings and cut out the small pictures needed for web page production.

　c. Combine decorative images to create a sprite image.

　d. Combine Photoshop and code editor, refer to the renderings, write html and css codes, and create pages.

The above is the detailed content of Detailed explanation of front-end page development steps. For more information, please follow other related articles on the PHP Chinese website!