现在想想一下首页放置哪些内容？由于该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页面可以正常显示，且出现导航菜单
若没有出现，请仔细阅读前面几章相关联的内容，或者在下面给我留言。
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页面
3、补充navigation.css样式
因为当鼠标放置到用户名或头像上时，它的下拉菜单“主页”、“设置”和“退出”并没有显示出来。当然使用JS也可以控制其显示，这里使用css样式来控制。在navigation.css中增加下面内容：
|
1
2
3
|
.system_menu_user:hover .system_menu_user_setting{ display: block;
} |
它的意思是说当鼠标放置在用户名或头像上时，它下层的子菜单项所对应的div就显示出来，效果如下：
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）左侧内容效果图：
（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）右侧内容效果
（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之间样式的定义。
这里把主页内容如何显示的样式和内容的大体设置出来了，但数据都是假数据，下文就涉及到数据库连接，及如何把数据从服务端读到客户端并展示。
