In the previous article, we analyzed the structure of the UI Layer and the pagebase class. Today we are moving our attention to the page. The figure below shows the final result of our system:
Of course this is not what I did, and I cannot do it either :), but I would like to give a general introduction to the page creation process and some experience and skills:
-
- The requirement analyst analyzes and determines which pages are required. Sometimes (most of the time) only consider the home page, because the home page can determine the system style. Setting other pages on the home page will basically fall.
-
- The Style and tone of the requirement analysis personnel and the customer discussion page. The style of the system is usually some adjectives, such as simple and bright. A good way is to prepare a lot of images (better webpage templates) for the user to choose, so that you can intuitively understand what style of pages the user needs. In addition, this image or template can be used as the basis for creating the page for the artist.
-
- The requirement analysts discuss with users and determine what is included in the page. For example, the latestArticleList, popular article list, login box, and so on. If you lack experience in this area, we should guide the user, for example, to provide a list of possible content for the user to select.
-
- Coordinate the user's requirements with the staff. Of course, if you can involve the artist in step 1-3, this step is saved and the effect is better.
-
- The artist makes a PSD and communicates with the user to modify the PSD until the customer is satisfied. There is a problem here, that is, the user is usually not satisfied with the design of the page you come up with, or even disappointed, and the comments of the artist for the customer are easy to contradict, the demand personnel (you) it is difficult to solve the problem. The solution is to let the artist come up with 3-5 la s during the first design, with 2-3 colors for each layout. This is not difficult for a skilled artist. Then, I will discuss over a dozen of the solutions with the users. This has the following benefits: first, the user thinks that you are very serious and responsible, and has a good impression on you, which in turn affects his impression on page design, it is true that sometimes things are so incredible. Second, if a user makes a choice between multiple pages and satisfies his desire to make a decision, he will rarely make any changes. Third, for the artist, the total workload is the same (or even less), but it feels better. Fourth, redundant pages will not be wasted, and future project changes can be used.
- Split the PSD to generate HTML, CSS, and JavaScript. There is no problem with this step. The problem is, who will do this step? The artist is familiar with PS and understands HTML and CSS, so Javascript is not always necessary. More importantly, the HTML written by the artist will not be considered.CodeFill in the limit, letProgramThe programmer is very embarrassed, while the programmer understands HTML, CSS, and JavaScript, but it is a little reluctant to cut the PSD. Solution: the artist and the programmer work together.
-
- Enter the Page code.
Now, let's go back to the project with so many additional questions. In this set of pages, the top banner and the right sidebar are the same in all pages, while the main part on the left is changed. The unchanged part can be abstracted into a master page. Then, we need a masterbase similar to pagebase. The Code is as follows:
1:Using...
10:
11:NamespaceDongblog. UI
12:{
13:/// <Summary>
14:/// Base class of the master page
15:/// </Summary>
16:Public ClassMasterbase: masterpage
17:{
18:PrivateIdatabase _ database = databasegateway. getnewdatabase ();
19:
20:/// <Summary>
21:/// Obtain Database Access
22:/// </Summary>
23:ProtectedIdatabase Database
24:{
25:Get {Return_ Database ;}
26:}
27:}
28:}
This class is identical to pagebase except for its name and inheritance in masterpage. Then we can create a master page based on this class: Main. Master, and the first contentpage: default. aspx on this page. Next, copy the desired image to the project and write HTML and CSS. See the code for specific HTML.
Today, in the next article, we will analyze the controls on the page.
Code download
