Some conclusions on the design of portal website focus pictures
|
Focus images are a way of presenting content that integrates pictures, text, and dynamic interactive effects. They play a very important role in attracting attention (the so-called focus), optimizing page layout, and many other aspects. This is especially important in portal websites where content is paramount. I have accumulated some experience in this process and would like to share it with you. The template is more suitable for large portals like Sohu and Sina. It may not be right for personal websites and business websites. That is another matter. 1. The more stupid the better (combined with point 3) Editors hate HTML. In particular, for pages that are highly time-sensitive and frequently updated, it is most fatal to let editors directly copy content onto the HTML of the focus image. 2. Plug and play to prevent conflicts Don’t be afraid of making the class name (css class) too long. You can add prefixes and suffixes if you like. It’s better to make it more unique. The focus image function is relatively independent. Often, a page has been published for N days, and then you suddenly want to change the focus image. If the class name of the focus image is too common (such as title, head, main, etc.), it will be a tragedy if an inexplicable style conflict occurs when it is applied to the page. 3. Visual Designer Design a focus image designer, editors can use the designer to fill in data and quickly generate focus image code with one click. 4. Style must be separated from structure and behavior Editors can easily change font color, background color, etc. 5. Try to use HTML template technology Separate the structure (html) and behavior (js logic). You can consider the official jQuery template plugin 6. For super large portal websites (such as Sohu and Sina), SEO is often given lower priority than content. Why? Because this type of website is already known to everyone and there is no need to search for it. This determines the fact that JS can be used to dynamically generate the focus image Html code. Although this type of HTML code is SEO unfriendly! The last sentence: For the focus pictures of large portal websites, use json data combined with html template technology to dynamically generate the focus pictures with js, and put a lot of HTML codes related to the focus pictures into the page. Editors will hate it, which will affect the updating efficiency of the website content! |
<<: Detailed explanation of Vue plugin
>>: A comparison between the href attribute and onclick event of the a tag
Recommend
18 sets of exquisite Apple-style free icon materials to share
Apple Mug Icons and Extras HD StorageBox – add on...
JavaScript to achieve full screen page scrolling effect
After I finished reading JavaScript DOM, I had a ...
Common pitfalls of using React Hooks
React Hooks is a new feature introduced in React ...
Introduction to CSS BEM Naming Standard (Recommended)
1 What is BEM Naming Standard Bem is the abbrevia...
Summary of the use of CSS scope (style splitting)
1. Use of CSS scope (style division) In Vue, make...
Detailed explanation of overlay network in Docker
Translated from Docker official documentation, or...
JS 9 Promise Interview Questions
Table of contents 1. Multiple .catch 2. Multiple ...
Summary of MySQL LOAD_FILE() function method
In MySQL, the LOAD_FILE() function reads a file a...
IIS 7.5 uses URL Rewrite module to achieve web page redirection
We all know that Apache can easily set rewrites f...
Example code for implementing multiple line omissions using three methods of advanced CSS
Preface This is an old demand, but there are stil...
Native JS realizes uniform motion of various sports
This article shares with you a uniform motion imp...
Mysql solves the database N+1 query problem
Introduction In orm frameworks, such as hibernate...
In-depth understanding of the use of Vue
Table of contents Understand the core concept of ...
How to prevent computer slowdown when WIN10 has multiple databases installed
Enable the service when you need it, and disable ...
JS version of the picture magnifying glass effect
This article shares the specific code of JS to ac...