现在想想一下首页放置哪些内容？由于该WEB应用的聚集点在“斗”上，也就是对医术的探讨方面，个人认为应该是对展示较新的或评价较好的病症药方的展示方面。这里包含两部分：（1）数据的获取，即动态读取较好或评价较好的药方数据；（2）页面的展示，即静态页面布局和数据显示。

对于第一个问题会涉及到数据库的访问和接口封装，会在下次专门处理，本文主要承接《【斗医】【6】Web应用开发50天》介绍页面方面的处理。由于个人做C/S应用系统时间太长的原因，对系统的第一个页面是“登陆”有不同意见，所以该系统的首页决定设计为任何人都可以查看。


五、斗医系统首页

关于系统的目录规划在上文中已说明：module放置功能页面；js放置功能脚本；theme放置样式文件。

1、在D:\medical\war\module\main下创建main.html文件

（1）为便于搜索引擎查询，在main.html中填写如下内容：

1
2
< meta  name = "description"  content = "斗医是一个医学交流平台"  />
< meta  name = "keywords"  content = "医学,交流,讨论"  />


（2）html页面不缓存，每次数据都重新从服务端读取，在main.html中填写如下内容：

1
2
3
< meta  http-equiv = "pragma"  content = "no-cache"  />
< meta  http-equiv = "cache-control"  content = "no-cache,must-revalidate"  />
< meta  http-equiv = "expires"  content = "Wed, 26 Feb 1997 08:21:57 GMT"  />


（3）设置页面编码为UTF-8，在main.html中填写如下内容：

1
< meta  http-equiv = "content-type"  content = "text/html;charset=utf-8"  />


（4）为了在main.html页面显示导航菜单，需要把上节的common.js引进过来，同时由于common.js依赖于jquery.js和navigation.css，所以在引common.js之前引入jquery.js、navigation.css，在main.html中填写如下内容：

1
2
3
< link  rel = "stylesheet"  type = "text/css"  href = "theme/navigation/navigation.css" >
< script  src = "js/common/jquery.js" ></ script >
< script  src = "js/common/common.js" ></ script >


（5）在D:\medical\war\js\main下生成main.html的动作交互文件main.js，并在main.html中引入此文件：

1
< script  src = "js/main/main.js" ></ script >

在main.html页面加载完之后，使用main.js把全局系统菜单绑定到id为system_navigation_menu的<div>块上，在main.js中填写如下内容：

1
2
3
4
5
6
( function ( window){
     $(document).ready( function ()
     {
         generateSystemMenu();
     });
})( window );


（6）为main.html定义id为system_navigation_menu的<div>，在其中填写如下内容：

1
2
3
4
5
6
7
< body >
     <!--系统导航菜单-->
     < div  id = "system_navigation_menu" ></ div >
     <!--系统内容部分-->
     < div  class = "system_content" >
     </ div >
</ body >


在测试之前修改D:\medical\war\WEB-INF\config\sm\system-action.xml文件，把名称为"index"的business-class配置项移除，同时删除Demo.java文件。启动Tomcat服务，在浏览器中输入http://localhost:8080/medical/index.act地址，正常情况下main.html页面可以正常显示，且出现导航菜单

221502214.png

若没有出现，请仔细阅读前面几章相关联的内容，或者在下面给我留言。


2、设置“首页”菜单被选中

（1）修改common.js的generateSystemMenu()方法，为菜单的<li>标签指定id，其部分内容如下：

1
2
3
4
systemMenu += '< li  id = "system_home_menu" >< a  href = "#" >首页</ a ></ li >';
systemMenu += '< li  id = "system_expert_menu" >< a  href = "#" >专家</ a ></ li >';
......
systemMenu += 'div class="system_menu_user_wrapper" id="system_login_menu">';


（2）在common.js中增加selectSystemMenu(menuId)方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
  * 设置指定的菜单项被选中
  */
function  selectSystemMenu(menuId)
{
     var  menuArray =  new  Array( "system_home_menu" ,  "system_expert_menu" ,  "system_login_menu" );
     for ( var  i = 0; i < menuArray.length; i++)
     {
         if (menuArray[i] == menuId)
         {
             $( "#"  + menuArray[i]).css({ "background-color" :  "#ff901d" });
         }
         else
         {
             $( "#"  + menuArray[i]).css({ "background-color" :  "" });
         }
     }
}


（3）在main.js中调用selectSystemMenu()方法

1
2
3
4
5
6
7
8
9
( function ( window){
     $(document).ready( function ()
     {
         // 生成系统菜单
         generateSystemMenu();
         // 设置"首页"菜单选中
         selectSystemMenu( "system_home_menu" );
     });
})( window );


启动Tomcat服务后在浏览器中输入http://localhost:8080/medical/，查看main.html页面

224049642.png


3、补充navigation.css样式

因为当鼠标放置到用户名或头像上时，它的下拉菜单“主页”、“设置”和“退出”并没有显示出来。当然使用JS也可以控制其显示，这里使用css样式来控制。在navigation.css中增加下面内容：

1
2
3
.system_menu_user:hover .system_menu_user_setting{
     display :  block ;
}

它的意思是说当鼠标放置在用户名或头像上时，它下层的子菜单项所对应的div就显示出来，效果如下：

223537174.png


4、定义公共页面内容样式

一般的页面框架都都分为左右两部分或者左中右三部分，该系统的页面我想这样安排内容：左侧放置主题，右侧放置用户相关信息和系统动态。

（1）在main.html中追加如下内容：

1
2
3
4
5
6
7
<!--系统内容部分-->
< div  class = "system_content" >
     < div  class = "system_content_left" >xxxxx
     </ div >
     < div  class = "system_content_right" >yyy         
     </ div >
</ div >


（2）在navigation.css中追加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.system_content{
     width :  1000px ;
     margin :  0  auto ;
     clear :  both ;
     background-color :  blue ;
}
.system_content_left, .system_content_right{
     float :  left ;
     margin-top :  0px ;
}
.system_content_left{
    width :  660px ;
}
                                                                                                                                                                                                                                                                                                                                         
.system_content_right{
     width :  330px ;
     margin-left :  8px ;
}

【备注】：上面的css样式之所以放在navigation.css文件中，是因为想把这些样式全局使用


5、定义主页面左侧内容

（1）左侧内容效果图：

221230373.png

（2）为了快速完成效果图，个人建议先在main.html中直接定义标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< div  class = "main_item" >
     < i  class = "main_item_icon" ></ i >
     < div  class = "main_item_content" >
         < div  class = "main_item_wrapper" >
             < div  class = "main_item_title" >
                 < a  href = "#" >头病发热的中医药方</ a >
             </ div >
             < div  class = "main_item_time" >2013年11月19日
             </ div >
         </ div >
         < div  class = "main_item_wrapper" >
             < label  class = "main_item_author" >陈许诺，
             </ label >
             < label  class = "main_item_nickname" >中医拯救人类
             </ label >
         </ div >
         < div  class = "main_item_wrapper" >
             < div  class = "main_item_substance" >
                 红糖30克、鲜姜、红枣30克。以水三碗煎至过半，顿服，服后出微汗即愈。驱风散寒
             </ div >
         </ div >
         < div  class = "main_item_wrapper" >
             < div  class = "main_item_attach" >
                 < a  href = "#" >< i  class = "main_item_attention" ></ i >关注</ a >
                 < a  href = "#" >< i  class = "main_item_discuss" ></ i >20人评论</ a >
                 < a  href = "#" >< i  class = "main_item_share" ></ i >分享</ a >
                 < a  href = "#" >< i  class = "main_item_collection" ></ i >收藏</ a >
             </ div >
         </ div >
     </ div >
</ div >


（3）定义CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/*************************************************************************/
/*                               主页记录项样式                          */
/*************************************************************************/
.main_item + .main_item{
     border-top :  1px  solid  #CCC ;
}
.main_item_icon{
     width :  48px ;
     height :  48px ;
     float :  left ;
     background-image :  url (./main.png);
}
.main_item_content{
     width :  600px ;
     margin-left :  58px ;
}
.main_item_wrapper{
     /*清除孩子浮动对父div产生的影响*/
     overflow :  hidden ;
}
/*************************************************************************/
/*                               标题和日期样式                          */
/*************************************************************************/
.main_item_title, .main_item_time{
     height :  25px ;
     line-height :  25px ;
}
.main_item_title{
     float :  left ;
     left :  0px ; 
}
.main_item_title a{
     color :  #259 ;
     font-size :  15px ;
     font-weight :  bold ;
}
.main_item_time{
     float :  right ;
     right :  0px ;
     color :  #999 ;
     font-size :  13px ;
}
/*************************************************************************/
/*                            作者、昵称、内容样式                       */
/*************************************************************************/
.main_item_author, .main_item_nickname{
     font-size :  14px ;
     font-weight :  bold ;
     height :  25px ;
     line-height :  25px ;
}
.main_item_substance{
     font-size :  13px ;
     line-height :  1.7 ;
     color :  #222 ;
}
/*************************************************************************/
/*                               附属内容样式                            */
/*************************************************************************/
.main_item_attach, .main_item_attach *{
     font-size :  13px ;
     height :  30px ;
     line-height :  30px ;
     color :  #999 ;
}
.main_item_attach span, .main_item_attach a{
     margin-right :  10px ;
}
.main_item_attach a:hover{
     color :  #698EBF ;
}
.main_item_attention, .main_item_discuss, .main_item_share, .main_item_collection{
     background-image :  url (../navigation/navigation.png);
     background-repeat :  no-repeat ;
     width :  9px ;
     height :  9px ;
     margin-right :  3px ;
     /*使图片显示出来*/
     display : inline- block ;
}
.main_item_attention{
     background-position :  -97px  -23px ;
}
.main_item_discuss{
     background-position :  -28px  -22px ;
}
.main_item_share{
     width :  11px ;
     background-position :  -67px  -22px ;
}
.main_item_collection{
     width :  7px ;
     background-position :  -56px  -22px ;
}


（4）删除掉main.html示例内容

把第（2）步中的html示例内容删除掉，改为使用JS动态生成

【备注】：由于JS生成内容时，需要从服务端读取数据，由于服务端处理还有写逻辑，所以这里暂时不实现，会在下一文实现


6、定义主页面右侧内容

（1）右侧内容效果

112857164.png

（2）在main.html中定义如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< div  class = "system_content_right" >
     < div  class = "main_user_wrapper" >
         < ul >
             < li >< a  href = "#" >能量币：200</ a ></ li >
             < li >< a  href = "#" >智慧币：300</ a ></ li >
             < li >< a  href = "#" >等级：副院长</ a ></ li >
         </ ul >
     </ div >
     < div  class = "main_user_wrapper" >
         < ul >
             < li >< a  href = "#" >< i  class = "main_user_medical" ></ i >< label >我的药方</ label ></ a ></ li >
             < li >< a  href = "#" >< i  class = "main_user_favority" ></ i >< label >我的收藏</ label ></ a ></ li >
             < li >< a  href = "#" >< i  class = "main_user_answer" ></ i >< label >我的回答</ label ></ a ></ li >
             < li >< a  href = "#" >< i  class = "main_user_message" ></ i >< label >我的消息</ label ></ a ></ li >
         </ ul >
     </ div >
</ div >


（3）在main.css中定义如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.main_user_wrapper{
     margin-left :  20px ;
     padding-left :  10px ;
}
.main_user_wrapper + .main_user_wrapper{
     border-top :  1px  solid  #CCC ;
}
.main_user_wrapper li{
     height :  30px ;
     line-height :  30px ;
     cursor :  pointer ;
}
.main_user_wrapper li:hover{
     background-color :  #ff901d ;
}
.main_user_wrapper a{
     color :  #999 ;
     font-size :  13px ;
}
.main_user_wrapper a:hover{
     color :  #259 ;
}
.main_user_wrapper label{
     padding-left :  10px ;
}
.main_user_medical, .main_user_favority, .main_user_answer, .main_user_message{
     background-image :  url (../navigation/navigation.png);
     background-repeat :  no-repeat ;
     width :  14px ;
     height :  14px ;
     vertical-align :  -2px ;
     /*使图片显示出来*/
     display : inline- block ;
}
.main_user_medical{
     background-position :  -217px  -3px ;
}
.main_user_favority{
     background-position :  -167px  -4px ;
}
.main_user_answer{
     background-position :  -200px  -4px ;
}
.main_user_message{
     background-position :  -251px  -4px ;
}

【备注】：对于一些常见的CSS样式，建议多看一些别人网站，记住其用法，如上面CSS样式的.main_user_wrapper + .main_user_wrapper就意味着两个class之间样式的定义。


这里把主页内容如何显示的样式和内容的大体设置出来了，但数据都是假数据，下文就涉及到数据库连接，及如何把数据从服务端读到客户端并展示。