新闻发布系统(任务三：静态布局)

新闻发布系统（任务三：静态布局）

1、顶部导航网页（top.asp）设计

1）在文件面板新建一个文件top.asp,结果如下：

2）打开top.asp文件，新建一个2行1列的表格，居中对齐，宽770象素，边框0，填充0，间距0，在第一行，插入3.jpg,2.jpg，结果如下：

3）在第二行插入一个1行7列的表格，居中对齐，宽100%，高29象素，象素，边框0，填充0，间距0，背景颜色为#cccccc结果如下：

4）分别在新插入的表格输入文字，字体大小12，颜色为黑色结果如下：

5）进入代码视图，删除标签及外部的所有代码，结果如下：

完成

2、底部版权网页（bottom.asp）

1）在文件面板新建一个文件bottom.asp,结果如下：

2）打开bottom.asp文件，新建一个1行1列的表格，居中对齐，宽770象素，高80，边框0，填充0，间距0，背景色#0066CC，结果如下：

3）单元格水平居中，垂直居中堆砌，输入文字，字体颜色为白色输入文字：“版权所有:Absoult © 2009 程序制作:Absoult”，结果如下：

4）进入代码视图，删除标签及外部的所有代码，结果如下：

完成

3、检索网页（left.asp）

1）在文件面板新建一个文件bottom.asp,结果如下：

2）打开left.asp文件，新建一个3行1列的表格，居中对齐，宽100%，边框0，填充0，间距0，结果如下：

3)将第1行的高25象素，背景色为#0066CC，字体颜色为白色，字体大小为12象素，输入文字“新闻搜索”，文字居中对齐

4）在第2行插入一个2行1列，宽度为100%的表格，边框0，填充0，间距0，结果如下：

5）在新插入的表格里面，将第一行的度为30象素，水平居中对齐，垂直居中对齐，点“”

插入文本框，命名为input

5）点“确定”，进入下图：

6）属性面板进行如下设置，

点“否”，结果如下图所示：

7）在新插入的表格里面的第2行，设置高度为30象素，水平居中对齐，垂直居中对齐，点“”插入文本框，命名为list

8)选中刚插入的列表菜单，点属性面板的“列表值”，

9）点确定，结果如下：

10）在列表菜单的右边插入一个按纽，在属性面板将名称设置为“搜索”，属性面板设置，如下：

结果如下：

11）在最初插入的表格的第3行插入一个2行2列的表格，宽度为100%的表格，边框0，填充0，间距0，结果如下：

12）最近插入的表格的第1行，水平居中对齐，垂直居中对齐，背景颜色为#0066CC，将第1行第1列的宽度82%，高25%，字体颜色为白色，大小为12，输入文字“热门新闻TOP10”，将第1行第2列的宽18%，高25%，输入文字“点击”，结果如下：

13）进入代码视图，删除标签及外部的所有代码，结果如下：

完成

4、首页（index.asp）

1) 在文件面板新建一个文件index.asp,结果如下：

2) 打开index.asp 文件，新建一个1行2列的表格，居中对齐，宽770象素，边框0，填充0，间距0，结果如下：

3）将刚插入的表格第1列，的单元格的宽170，高300，背景颜色为#efefef ，垂直顶端对齐，表格的第2列的单元格宽600，高300，垂直顶端对齐，水平左对齐，结果如下：

4）进入代码视图，在后面插入代码“”，结果如下：

5）在前面插入,结果如下：

6）光标选择左边的单元格，进入代码视图，插入代码,结果如下：

格居中对齐，结果如下：

8）在刚插入的表格的第1行里面插入一个3行3列的表格，宽度100%，结果如下：

9）在最新插入的表格的第1行第1列宽度6%，插入images下的图片sub.gif，第1行第2列宽度76%，左对齐并输入文字“最新新闻”，字体加粗，字体为“Verdana, Arial, Helvetica,

sans-serif”，第1行第3列宽度18%，输入文字“更多...”，最终结果如下：

10）在最新插入的表格的第2行高度为2象素，背景颜色为#6699cc，结果如下：

11）将最新表格的第3行合并单元格，并插入一个2行2列的表格，结果如下：

6%，右边宽度为94%，结果如下：

2列里面输入文字“[]阅读了次”，字体颜色为#cccccc，结果如下：

行，第6行，结果如下：

“国内新闻”、“专题新闻”、“社会新闻”、“文体新闻”结果如下：

16）点菜单栏的“修改” 页面属性，将网页的背景颜色设为#525252，网页的上边局设置

为0

完成！！！！

5、显示所有信息页面（showall.asp）

1) 在文件面板新建一个文件showall.asp,结果如下：

2）新建立一个1行2列的表格，宽度为770，高300，边框0，填充0，间距0，居中对齐，表格垂直顶端对齐，水平左对齐，第1列的表格宽度为170，背景色为：#efefef，第2列表格的宽度为600，结果如下：

3）在表格的第1行第2列插入一个3行1列的表格，宽度为95%，居中对齐，第1行高5象素，第3行高度为5象素，结果如下

4）在刚插入的表格后面插入一个5行2列的表格，宽度为95%，居中对齐，结果如下：

4）将刚插入表格的第2行的高度设置为2，背景颜色为#6699cc，结果如下：

5）在表格的第3行第1列插入images下的图片point.jpg，表格高度为24象素，调整表格的宽度，结果如下：