Note: Tmall activity page development_html/css_WEB-ITnose

1. Young me

"No one can do business". If an e-commerce website wants to start, it is essential to carry out activities (introducing traffic, increasing user stickiness, and activating the website atmosphere) , discount today and red envelope tomorrow.

(Beginning of Autumn Event, right)

As a front-end, of course I have to talk about how to make the event page from a technical point of view, how to do it? When I first arrived, my first task on Tmall was to create an event page (about Beginning of Autumn ingredients). Because I was too young, I followed my ex and took a look at the screen of the designer girl. Well, not bad, she is so beautiful, haha ​​(you can understand it). Closer to home, I thought this page was quite simple at the time. I just cut out a picture and played with it for a day or two. I was still too young.

I was not in a hurry the past two days and was calm. Until the deadline is approaching, the correction begins. The front was very smooth, the frame was set up in a few seconds, and then I cut the pictures and filled them with materials (the size of each picture is required not to exceed 50k). I cut and cut, and I felt something was wrong. I have played with PS but never played it like this. The result is that it doesn't work. I cut it again, it doesn't work, and I cut it again. The next one, it doesn't work, I cut it again.... The most troublesome thing is the page. The head (difficulties will be discussed in detail below), after a day of cutting, there were still gaps, so I had to ask a senior for advice. Before you know it, the time is coming. The designer, after reading the design draft, is like this... Okay, you write a document on what you want to change. Later, when I wanted to put it into an online pre-release environment, I discovered another problem, that is, the local links of the pictures had to be replaced with online ones. Damn, isn’t this a scam (there are dozens of pictures)? I tried asking some seniors, and they said there is no such tool (actually there is, but I asked the wrong person). Okay, so I wrote a tool to automatically replace image links... I won’t go into details about the rest, this is the price of growth. (Insufficient communication, blind confidence without understanding the environment, still too young).

2. "I want to hit ten!"

Later, I made some activity pages and slowly gained some experience. To sum up,

Activity pages are often very large in volume and have a lot of personalization. According to students in the activity group (there can be hundreds a week), "I want to hit ten!" A sentence that often echoes among them.

The event page involves several important parts, including composition, pictures, and components (including templates).

1. Composition

When you get a psd, how do you start cutting it? This is the process of composition. You can pull out auxiliary lines to help compose the picture, and then use the slicing tool to separate the large picture into several demarcated small pictures. I focus on the most troublesome header cutting,

Method 1, center division:

Features: The layout is relatively easy, but it is difficult to be precise when cutting (even if Accurate) It is also difficult to completely match the two backgrounds, and gaps will appear at this time. Solving this problem requires cutting a few more pixels when cutting.

Method 2, level:

Features: Cutting is simple, but the layout is relatively complex and requires more DOM elements.

Note: (There are two layout methods here, use pictures as background, or use absolute, 50% layout, or it is very effective in avoiding gaps between pictures.)

Layout: contianer{width:100%;backgorund:url center;}

or inner{pos:absolute;left:50%;margin-left:-(width/2)px;}

Of course, there are many other ways.

3. Pictures:

1) Commonly used picture formats are gif, jpg, png (png8, png24). For the background image of the event, the color is usually not particularly bright. In this case, using gif will have better results. Its quality is close to the highest quality of jpg, but the current size is equivalent to the medium quality of jpg. (The picture is blurred in medium quality)

2), use web image format (ps, ctrl alt s), the same format will have a smaller image size.

3) Transparency

Use Png8 on the mobile side to achieve transparency, with low quality and good support.

On the PC side, except for IE6, Png32 is used to achieve transparency. Under IE6, Png8 is used, followed by Gif.

3. Components and templates

Reusing components and templates can speed up page development, while activities are less personalized and more repetitive (fixed navigation, image hotspots, tab switching, voting, sharing). If the components and templates are well laid out, it will be very easy to build the page framework and add functions.