System topic file organization plan

Introduction:

In order to standardize the company's software system interface, provide users with a unified overall interface solution, strengthen the company's image, provide users with a wide range of software use experience, and produce standardized system theme file solutions.

This scheme uses the software system in the B/S architecture and the Framework interface organization scheme as the template to describe and standardize the system theme files.

I. Overall Interface Architecture

Ii. Thematic file organization plan

Iii. Notes andCSSCode Writing

4. style definitions between elements and interfaces

 

Body:

 

I. Overall Interface Architecture

In the general form, the company's software system interface architecture adopts two-column layout,

The upper part is the head area, which includes the banner and navigator. In the banner area, the system title and plug-in download icons are generally placed, and the navigator is the main navigation area.

The content in the middle is a two-bar layout, which varies with the system on the home page. the left part of the second-level page is the second-level navigation area, and the right part is the main content area.

The lower part is the foot area, which is mainly recommended for placement.

 

Ii. organization plan of each topic document (listed in different sections)

1. The system user interface is stored as a topic. We do not recommend that you apply style and layout generation to files other than a topic.

. If a special style is flexibly defined, you should comment out which element on the page to define the style before defining the style.

2. In order to give users a better user experience and form a unified product interface style, the system is divided into multiple theme solutions to provide users with different options.

3. Each topic folder in the system contains at least six files (folders): Images folder, and common.CSSInterface generic Style File, Main.CSSMain Interface Style File, subpage.CSSLevel 2 interface layout file, common. Skin common control style file, and custom. Skin custom Style File.

4. Because our software system framework is obvious, and the page grading is relatively simple. Therefore, a page style is defined at the page level. Therefore, style files are divided into three types: commom.CSS, Main.CSS, Subpage.CSS.

5. You can define the styles of certain elements on a page, but these definitions should be listed separately and placed in the topic folder.

6,ImagesFolderAs a folder for storing images and flash, in order to optimize the loading speed of the system page and reduce the number of reference errors, when the image contains more color information and requires a high display effect. other than JPG format, all others must be in. save in GIF format. Flash is stored in. swf format.

7,Commom.CSSAs a general element style definition file on the interface, the file content defines the general elements on various pages of the system, such as the link style, system font, and background.

8,Main.CSSAs an element style definition file of the system's initial interface framework.

9,Subpage.CSSAs the definition file for each element on the second-level page.

10,Common. SkinAs a specialized file for defining non-customized control styles.

11,Custom. SkinAs a specialized file for customizing the control style definition.

Iii. Notes andCSSCode writing specifications

1,Annotation Specification

1)CSSAdd the following comments to the beginning of the file:

/*

Name Date

**************************************** ****

*******CSSThe page name defined by the file *******

**************************************** ****

*/

2)CSSFile internal organization form

CSSWhen defining, integrity elements and block-level elements are defined separately, and comments are added to all levels of element definitions.

Example:

/*-----------------------

Subject

-----------------------*/

Selector {property: Value}

/*-----------------------

Block level

-----------------------*/

/*-----------------------

Block name

-----------------------*/

3) comments for each Selector

/* --------------- Name of the style element defined by the selector -----------------------*/

Selector {property: Value}

If an element is designed for a specific page, add comments before the definition.

2,CSSCode Writing example

Selector

{

Property: value;

}

3. Use a multi-dimensional selector to define a style instead of assigning an ID to each element to reduce the complexity of the ID.CSSFiles are easier to read.

 

4. style definitions between elements and interfaces

The elements are defined from the whole to the details, and are classified by file organization.

1,Commom.CSSInterface generic element style definition file

This file is a general element style definition file on the interface. Some general element style definitions in the system are recommended to be placed in

In this file. Almost every page in the system calls this style file.

Common delimiters and their attributes:

Body:Default font style (font-size, color, family, weight), layout (text-indent, align, vertical-align, word-spacing, line-height ), background, the position of the page in the screen (margin)

Link:Links can be divided into three forms: general links, main navigation links, and side navigation links.

All definitions here. The link fonts include size, color, family, and text-decoration. The link between the main navigation and the side navigation also involves the background, border, and margin of the link ). At the same time, the link style should be defined four times, and the definition sequence is fixed as A, A. Link, A. Visited, A. Active, and A. hover.

Table:A table can be roughly divided into two forms: tables that display data and tables that place forms on the page.

Tables for displaying data:The attributes mainly include the border (border-color, style, width ),HeaderStyles (thead), table meta styles (text (align, vertical-align, color, size,), and table meta-spacing (margin), table metadata (padding, border-collapse ))

Place form table:In web standards, it is not recommended to directly use the form location attributeCSSDefinition. At this time, the role of a table is obvious for the positioning of a form. Attributes mainly include borders, margin, and background ).

2,Main.CSSSystem initial interface framework element style definition file

The system's initial main interface consists of three parts: Head header, page content, and foot bottom.

1) Head

The head part is divided into two parts: banner and glonav. The banner part is subjectBackground ImageIt is an organizational element and can be directly defined. Glonav is the main navigation, which is already in common.CSSFile.

2) Page Content

The content part of the page depends on the specific form, but the table orGridviewWill be in the common.CSSAnd defined in the skin file

3) foot bottom

At the bottom of foot, there are some help and link information.

3,Subpage.CSSDefinition file for each element on the second page

The second-level page and the home page are also divided into three parts. The content of the head is the same as that of the foot. The difference is that the content of the page has two main parts: sidebar and mainbody. The side navigation of the sidebar part is already in common.CSSFile, so you only need to define the background and positioning of the sidebar.

The main content of the mainbody area. In this exampleGridviewFor example, the table where the form is placed is already in common.CSSFile, while the style definition of the form itself is defined in the skin file.

4,Common. SkinCustom control style definition files

This document mainly defines the general control styles in the system, including various forms and various controls provided by. net. The main controls used in system development and their attributes are as follows:

Button: button itselfBackground Image(Background), unselected status, move the mouse over the status (hover), click the status (visited), the size of the button can be dynamically controlled through the sliding door technology.

Treeview: Commonly Used attributes mainly include expandlevel, selectednode and color selected in the Tree View control ),

Gridview: The style definition can be defined by referring to the style definition attribute of the table where data is placed.

Common forms (text, textarea, radio, checkbox, select, and password): Form definitions include border (border-color, width, style, height,), background (background-color, image), size (width, height), font (font-color, size, family ).

In the form definition, each element definition should include the relationship between the form and other elements, that is, the margin attribute definition.

5,Custom. SkinCustom control style definition private file

The custom control style definition file specifically defines some special styles.

6,Naming rules for framework elements on the page (General ):

The category selector should be defined based on the function and should not be named as a category style to prevent the class name from being modified when the category style changes.

The name is

Page overall (body): layer container (container)

Page header: Main Menu banner)

Page: sidebar topic content (mainbody)

Bottom of the page (foot): bottom of the page

7. Some general form and control style suggestions

Forms and controls are the main components of the system. Therefore, the unified style specifications of forms or controls can unify the system interface style and increase availability. Important points are:

1. spacing between various forms

2. Spacing Between the form and the text in the form content

3. Padding containing the content table

4. The form should contain prompt text by default, which greatly increases the usability of the user's system.