Overall site planning (webpage loading speed, how to plan static webpages) and static webpages

Overall site planning (webpage loading speed, how to plan static webpages) and static webpages

1. Related Concepts

Server: provides data-related services for computers connected to the network (Marvin considers it to be data retrieval ).

Path: Correct file writing for easy search

　　　　　　

Image path in html:

　　　　　　

Path of the CSS image in the css Folder:

　　　　　　

Naming method: for some naming items, there are camper naming methods such as headerLogo, underlined header_logo, and underlined header-logo. Naming must be semantically convenient for maintenance, such as header, subject content, tail footer,

Navigation nav, sidebar, etc.

Of course, each company has its own set of standards and cannot stand alone. The following is what a company requires for my upcoming internship:

　　　　

 

2. Website loading speed and user loss

If website A loads the same content several times faster than website B, then website B will experience fewer users over time.

(For Tom Marvin, learning opportunities cannot be missed)

For file size:

The amount of css code on a webpage must be greater than that on html. For css, we should extract public styles and propose the same CSS styles for reuse as much as possible to reduce the amount of code.

Try to use composite styles (such as font and border );

Try to find public styles and reuse code;

Group selector for the same style;

Ps: for css maintenance, you can write css into multiple modules.

1. reset area. Clear the default csss attributes that are not required.

2. public region. Public style section.

3. Subject css. Header, content, footer, etc.

For background images:

There are many places on the webpage that need images. We can combine multiple image sets into one image to locate the background-position in css, so that the image will not be loaded multiple times.

Ps: Do not use Chinese characters for image naming. Try to use English letters or pinyin. Do not add numbers at will. Do not change the case sensitivity, either uppercase or lowercase.