The instance explains the website front-end interface development process, and the instance explains the front-end

The instance explains the website front-end interface development process, and the instance explains the front-end

The website front-end interface is the front of the website, so it is very important to design this interface! In fact, the front-end of the website is nothing more than HTML, CSS, and JS. I believe everyone understands these codes, so today I will not talk about code. The key is my idea when developing the front-end interface!

1. Select appropriate website materials for PSD design

It is impossible for us to develop a website wherever we think of it. First, we have to have a number in mind! Therefore, we should first determine the type of our website, and then use PS to design the website PSD template. After the design is complete, we can use the code to implement it! However, my PS technology has not reached the level of being able to independently design a website template (after all, those colors and things are annoying), so I found a PSD template and modified it myself, let him fit his website theme. This is a "brand new" website template! Here, the transformed template is like this!

I will post some PSD template materials in Wang yelou's personal blog for your reference. Please pay more attention to them!

2. Plan the overall layout of the web page

Here we will take the home page as an example. Before creating a webpage, we should draw the webpage frame in the brain! Of course, you can draw on the picture at the beginning! I plan the homepage of the website as follows!

After drawing these overall frameworks, I usually have two options for development! First, use DIV + CSS to draw all content blocks, and then fill in the content blocks. The second is to complete a content block and then perform the next step! I think both of them are similar. Do you care about your habits!

3. Connect to the webpage on the website

A website consists of countless webpages. In this case, we should connect all webpages! This not only facilitates SEO optimization, but also facilitates user browsing! (It is impossible for a user to enter an address every time he browses a page on your website.) So we use a navigation bar! Here, the navigation bar divides the website into several parts, and then records the Page name belonging to this part in each part, and attaches a hyperlink! No. You can see the following picture for easy understanding!

4. Content that should be placed on the front-end Homepage

As we all know, the homepage has the highest important weight, so the content placed on the homepage should attract users and search engines! The home page should also consider two points: one is more, that is, it should involve all the content of the website (note that the webpage address is not based on the website); the other is new, the content of each update should be displayed on the homepage, so that the search engine can know that your website has been updated before it can capture your Update page! Therefore, my body contains four modules, namely the news center, our customers, corporate culture, and our talent standards. I found several articles in the module to display them!

5. Details of the website front-end interface development process

1. Let's look at the things in the red box. We can use two methods for this location: one is to use margin, and the other is to use position! In fact, the effects of the two methods are the same, but I personally prefer the second method. It may be a matter of thinking when I was studying it! What I want to tell you is that the Code implementation methods are diverse and do not have to be limited to one! You can do it, you are the best!

2. PS technology must be used for website front-end services. Therefore, you should understand PS knowledge and do not need to have basic skills like professional ones! Let's take a look at the video tutorial of Li Tao PS master Road.

 

This article from Wang yelou's personal blog address: http://www.ly89.cn/detailB/51.html

You are welcome to share this article. For more information, see the source and address of this article.