采集器模块界面设计

采集器模块设计到界面设计共有两个部分，按功能分为内容自动采集器管理界面和采集内容列表页面。

1.采集器管理界面

采集器管理管理界面通常由采集器描述、所属栏目、列表页面地址、列表页匹配描述、内容页匹配描述组成。采集器管理管理界面的HTML核心功能设计代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采集器管理</title>
    <link href="admin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table align=center cellspacing=0 cellpadding=0>
    <form method="post" action="manage.php">
        <input type="hidden" name="flag" value="1"> 
        <tr class=head>
            <td colspan="2">采集器管理</td>
        </tr>
        <tr class=line>
            <td width="11%">采集器描述</td>
            <td width="89%"><input name="Title" type="text" class="input" id="Title" size="40" value="" /></td>
        </tr>
        <tr class=line>
            <td width="11%">所属栏目</td>
            <td width="89%">
                <select name="Category">
                    <option value="1">汽车频道</option>
                </select>
            </td>
        </tr>
        <tr class=line>
            <td valign="top">列表页面地址</td>
            <td><input name="EnterUrl" type="text" class="input" value="列表页面地址" size="60" /></td>
        </tr>
        <tr class=line>
            <td valign="top">列表页匹配描述</td>
            <td><textarea name="ListPreg" cols="80" rows="4" class="input">列表页匹配描述</textarea></td>
        </tr>
        <tr class=line>
            <td valign="top">内容页匹配描述</td>
            <td><textarea name="ContentPreg" cols="80" rows="4" class="input">内容页匹配描述</textarea></td>
        </tr>
        <tr class=line>
            <td colspan="2" align="center">
                <input name="Submit" type="submit" class="btn" value="提交" />
                <input name="Submit" type="button" class="btn" value="返回" onclick="history.go(-1);">
            </td>
        </tr>
    </form>
</table>
</body>
</html>

将上面的代码保存为manage.php文件，在浏览器中加载此文件，预览效果如图1所示。

图1采集器管理界面

2. 采集内容列表页面

采集内容列表页面的设计相对简单些，主要的功能是将采集到的信息，以列表的形式输出到浏览器中，该页面同时提供内容修改功能按钮，便于内容的维护。采集内容列表页面的HTML 设计代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采集内容列表</title>
    <link href="admin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table align=center cellspacing=0 cellpadding=0>
    <tr class=head>
        <td colspan="4">栏目名称</td>
    </tr>
    <tr class=line>
        <td><strong>日期</strong></td>
        <td width="913"><strong>标题</strong></td>
        <td><strong>修改</strong></td>
       
    </tr>
    <tr class=line>
        <td width="135">日期</td>
        <td>标题</td>
        <td width="83"><input type="button" name="Submit2" class="btn" value="修改" onclick="" /></td>
       
    </tr>
    <tr class=line>
        <td colspan="4" align="center">&nbsp;</td>
    </tr>
</table>
</body>
</html>

将以上代码保存为articles.php文件，执行该文件，效果如图8.2所示。

图8.2采集内容列表页面

1.采集器管理界面

2. 采集内容列表页面

推荐

推荐资讯

热门资讯