对话高考网（4）

新闻页面的制作与分页

这周完善了一下主页面，为页面增添了页脚元素，主要成果是大约完成了新闻页面的制作。

我将主页面的新闻板块移植了过来，为了各条新闻的美观程度，在前面加上小图标。效果如图：

该图标需要以png图片为基础，运用css样式中的background：url属性添加到页面中，示例为

background: url(./png/form.png) no-repeat 0 12px ;

在也顺便向大家这里推荐一个下载png图标资源的网站，http://www.iconfont.cn/,可自定义调节图片，方便使用。

通过网站学习，研究了一下jsp页面的分页跳转，将由数据库中读取出的数据排列并分页以及实现上一页下一页的页面跳转等，初步实现的功能如图：

在相邻页面跳转的同时使用输入页数方式实现快捷跳转，运用css与js结合的方法实现，具体代码如下：

<div class="lasttitle">
    <div>
        第1/10页  [
         <a href="#">首页</a>
         ] [
         <a href="#">上一页</a>
         ] [
         <a href="#">下一页</a>
         ] [
         <a href="#">末页</a>
         ]
         <input id = "page" name = "page" value = "1" style="width:40px;height: 18px;border: #CCCCCC solid 1px;font-size: 12px;" type="text">
         <input value=">>" style="font-size: 14px;border: #FFFFFF solid 0px;background-color: #FFFFF;" type="submit">
         <script language="JavaScript">
             function gotopage(){
                 obj = document.getElementById("page");
                 var PN = obj.value;
                 var Num = parseInt(PN);
                 if(isNaN(Num)){
                     alert("请输入有效的数字");
                     return false;
                 }
                 if (Num > 10) {
                     alert("没有那么多页");
                     return false;
                 }
                 if (Num < 1) {
                     alert("请输入有效的数字");
                     return false;
                 }
                 pagenum = (Num - 1) * 60;
                 location.replace("#"+  pagenum);

                 return false;
             }
         </script>
         <table cellspacing = "0" cellpadding="0" align="center">
             <form name = "pageform" onsubmit="return gotopage()"></form>
         </table>
     </div>

由于实现该类跳转还需要后台的配合，以上代码只是前端部分代码，后台组尚在搭建，剩余的后台部分将在以后补充呈现。

news.jsp新闻页面暂时搭建到这里，接下来主要开始学习论坛的搭建技术，这也是本网站的精髓所在，包括呈现方式与效果，我将在网上找教学视频以及经典范例进行学习与领悟。