Home Web Front-end CSS Tutorial Web page art production specifications_CSS/HTML

Web page art production specifications_CSS/HTML

May 16, 2016 pm 12:12 PM

1. For pages that allow full-text retrieval, in order to enable search engines on the Internet to effectively retrieve them, Keywords and Description meta tags should be added between the

in the html of the channel's homepage. Don't forget to add the customer website when making the page. keyword. Especially for pages with general URLs, be sure to add keywords~! This makes it easier to promote!
Example:



2. When making a website, the page has a unified header file and tail file. Be sure to make a single top header file and bottom tail file, and then nest them in the page. This is easy to modify. Nested code:
1. (recommended)
2. (just modify the blue part when using it)

3. Use the plug-in style uniformly Table~! Related code:
Please note that the order of a:link a:visited a:hover a:actived must be consistent with the original one.
Redefine first, pseudo-class second, and customization last.
In order to ensure that the font size is consistent on different browsers, it is recommended to use points pt and pixel px to define the font size. pt generally uses 9pt and 11pt of Chinese Song Dynasty, and px generally uses Chinese Song Dynasty 12px and 14.7px. This is an optimized font size. When bolding bold fonts or Song fonts, font sizes of 11pt and 14.7px are generally more appropriate.

4. A webpage should try to avoid using an entire large table
All the content is nested within this large table, because when the browser interprets the elements of the page, it displays them one by one in units of tables. If a webpage is embedded If it is placed in a large table, the likely consequence is that when the visitor types in the URL, he will first face a blank space for a long time, and then all the web content will appear at the same time. If you must do this, use the tag to enable the large table to be displayed in chunks.
Try to control the nesting of tables within three levels
5. There are also unified specifications for how to write Width and height. Generally, for tables with only one column, width is written in the tag of . For tables with only one row, height is written in the tag of
. For tables with multiple rows and columns, Width and height are written in the
tag in the first row or column. In short, follow one principle: there should not be more than one height and width that control the size of the same cell. Ensure that any width and height are valid. That is, if you change the value of any width and height in the code, it should be in Changes are seen in the browser. It is not easy to do this, it requires a long time of practice and thinking.

◆Layout:
1. Don’t easily center the text and use bold or italic characters. In addition to visual clutter, many browsers don't display italics well and don't compensate for the change in white space caused by slanting letters.
2. Don’t use icons with different styles on each page.
3. Add alt tag to img line. This will allow readers using text-based browsers to see something other than [IMAGE], and readers using graphical browsers will also see something if the image fails to load successfully. stuff, and you can make your html files pretty neat too.
4. Don’t let something look like a button but not function as a button.

◆Techniques for web color matching
1. Use one color. This refers to selecting a color first, and then adjusting the transparency or saturation (to put it more simply, it means making the color lighter or darker) to generate a new color for use on the web page. Such a page looks uniform in color and has a sense of hierarchy.
2. Use two colors. First select a color, then select its contrasting color (press ctrl+shift+I in photoshop). This is how my homepage was decided with blue and yellow. The entire page is colorful but not overly colorful.
3. Use a color system. To put it simply, use a color that feels like light blue, light yellow, light green; or earthy yellow, earthy gray, earthy blue. The method of determining the color is different for everyone. I click on the foreground color box in Photoshop, select "Custom" in the color picker window that pops up, and then select it in the "Color Library" :)
4. Use black and one color. For example, bright red fonts with black borders feel very "popular".
In web color matching, the taboos are:
1. Don’t use all colors, try to limit it to three colors.
2. The contrast between the background and the previous text should be as large as possible (never use complicated patterns as the background) in order to highlight the main text content
◆ Flashing makes people have headaches
By using logos, you can attract visitors to Special section of your homepage, but it also creates a headache for your visitors. If you want to keep visitors coming back to your site, use this method sparingly.
◆ Animation embellishment
Use only one animation at most
“Long Live Blank”
Be careful to leave a blank space. Don’t clutter your web page with images, text, and unnecessary animated GIFs. Even if there is enough space, avoid them when designing.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte Transition Making Your First Custom Svelte Transition Mar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't Tell Show, Don't Tell Mar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

How do you use CSS to create text effects, such as text shadows and gradients? How do you use CSS to create text effects, such as text shadows and gradients? Mar 14, 2025 am 11:10 AM

The article discusses using CSS for text effects like shadows and gradients, optimizing them for performance, and enhancing user experience. It also lists resources for beginners.(159 characters)

Creating Your Own Bragdoc With Eleventy Creating Your Own Bragdoc With Eleventy Mar 18, 2025 am 11:23 AM

No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.

What the Heck Are npm Commands? What the Heck Are npm Commands? Mar 15, 2025 am 11:36 AM

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.

Let's use (X, X, X, X) for talking about specificity Let's use (X, X, X, X) for talking about specificity Mar 24, 2025 am 10:37 AM

I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and

See all articles