网页设计实验报告
- 格式：doc
- 大小：80.00 KB
- 文档页数：7
 作者于2006年6月6日</font></marquee>
二、用户登录界面设计
按要求，用户登录界面本应横向布局在快速导航栏之下，但由于实验过程中发现网站主体部分右侧只有“天气预报”和“历史上今天”两个栏目，略显单调，而且形成大量空白地带，于是考虑将用户登录界面调整到此。
插入图片：loginmsn.jpg
安装完成后测试暗转是否成功，在浏览器地址栏输入http://222.20.217.210（本机IP地址）。显示Microsoft Windows XP professional主页，表明IIS设置成功。
2)IIS服务器的配置
在“开始”菜单“控制面板”中的“管理工具”，选择“Internet信息服务器”，在“默认web站点”中点击右键，选择“新建”目录下的“虚拟目录”，根据向导开始设置，别名为“archives”,路径为“F:\webdesign\myweb”，设置相关属性（IP地址、主目录中本地路径、文档属性等）。
Microsoft Office Access2007——用于建立数据库；
PhotoshopCS3、FlashCS3——用于网页中动画和图片制作处理。
二、实验操作部分
1.实验前期准备
2.实验操作过程（可用图表示）
3.实验效果图
1、实验前期准备
1)安装IIS6.0
将安装盘放入光驱，然后从操作系统【控制面板】——【添加/删除组件】——勾选【Internet信息服务器】，点击“下一步”进行安装。
账号文本框
密码框
登录、注册按钮
三、“天气预报”栏目设计：
插入“天气预报”图片
内嵌一个iframe框架，链接到特定的天气预报网站URL地址：/weather.htm
四、“历史上的今天”栏目设计：
插入背景图片，文字“历史上的今天”，用JavaScript语言编写脚本，显示当前日期。
7）网站访问计数、版权声明：
插入一行一列表格，设置背景图片guide.gif。
用JavaScript语言编写脚本，实现网站访问动态计数。代码省略。
加入浏览器分辨率信息以及版权、网站用途声明。
8）调整相关字形、字体、颜色等，为需要设置网页链接的地方添加链接。至此，网站基本设计完成。运行调试：在浏览器地址栏里输入http://222.20.217.210/myweb/index.asp，即可预览主页效果。
分别设计如下：
公告栏
内嵌一列多行表格，
用于显示“档案工作新闻”。
用户登录界面设计
（详细设计如下，下同）
图片“馆藏历史”
“天气预报”
栏目设计
图片“服务之窗”
图片“档案法规”
图片“资政新编”
“历史上的今天”
栏目设计
图片“我要投稿”
图片“网上问答”
一、公告栏设计：
小图片
公告栏
动态文字效果
先插入一张小图124.gif，然后编写代码，形成动态公告文字效果。代码如下：
5）“查档指南”、“政务公开”、“档案文摘”、“档案法规”栏目设计：
在原设计图下方插入表格，一行四列，分属四个子栏目。
各个子栏目类分别内嵌一列多行表格，列出项目内容。在此不赘述。
查档指南
更多……
政务公开
（同上）
档案文摘
（同上）
档案法规
（同上）
6）“友情链接”栏目设计：
插入一行一列表格，设置背景图片register.jpg。横向排列国内档案网站、国外档案网站、高校档案网站以及常用网站四个下拉框。
档案信息网站是网上档案信息的聚集点和辐射源，是档案馆（室）在互联的公共信息网络上建立的站点，它以主页方式提供相关信息和服务，构成公共信息网络的一个节点。档案站点建设是档案馆（室）面向网络的窗口，为更多的档案用户提供了他们所需要的服务。
本实验旨在使自己能全面掌握一个档案信息网站的制作流程，结合网站全程设计课程中学到的各章节内容，熟练掌握HTML网站设计语言基本语法、CSS样式表、JavaScript语言特效、安装IIS信息服务、创建站点、DreamweaverCS3、FlashCS3、FhotoshopCS3等网页设计软件来创建服务器和制作素材，进一歩深入掌握ASP技术和动态数据库，实现网站的动态交互，最后完成网站主页作品并在初步测试运行。
通过该实验，我了解了一个档案信息网站的制作流程，包括前期的IIS配置，网页布局，各部分设计等，复习巩固了网站全程设计课程中学到的HTML、JavaScript、ASP等技术，对网页设计一系列软件如DreamweaverCS3等的基本操作有了更进一步的了解，操作更加熟练自如。
教师
评语
指导教师年月日
教务部制表
<MARQUEE scrollAmount=2 BEHAVIOR=SCROLL direction=up onmouseover=stop() onmouseout=start() height="150" >
<font size=2>  欢迎来到教学模拟档案信息网站!<br>
 希望通过此网站，能够帮助您加深对档案、档案工作和档案工作者的了解，架起您与档案之间的桥梁。  谢谢!<br>
2、实验要求
1)熟练掌握DreamweaverCS3编辑网页的方法。
2)能运用ASP技术和数据库构建动态网站。
3)复习网站全程设计课程全部章节内容，融会贯通。
4)能制作出完整的档案信息网站，并进行调试。
3、实验环境与工具
1)开发环境：本实验操作系统为Windows XP。
2)开发工具：
DreamweaverCS3——用于建立站点和设计、布局网页元素；
2、实验操作过程
一、运行DreamweaverCS3，新建ASP JavaScript文档，保存为index.asp。
根据网页内容初步设计，编写CSS样式表，供后面调用。
二、为整个网页设置背景图片bg.gif（申明，除少数图片另外搜集以外，本试验中所用到的图片基本都取自老师提供的素材文件夹）。
三、进入【设计】视图，利用表格构建网站基本框架。以下是各部分构建步骤：
1)网站头部：
插入表格，一行两列，用于插入Flash文件和图片。左边单元格插入Flash文件2.swf，右边单元格插入背景图片school.jpg。调整高度。
Flash：2.swf
背景图片：school.jpg；
用JavaScript语言编写脚本，显示“教学模拟档案信息网站”动态文字效果，代码省略。
3.实验效果图（网站主页效果图）
三、实验效果分析（包括仪器设备等使用效果）
实验小结：
在该实验中，我设计的这个档案信息网站主页中，经过虚拟服务器测试，能够正常运行。由于时间有限，只完成了主页部分的设计，子页面的设计有待继续。
在实验过程中，遇到过很多的问题，如某些板块设计不当造成大面积空白等，但经过反复调试，最终完成了该实验，达到了实验目的，与系统设计的目的相符，在系统的使用过程中，基本顺利的完成各种操作，得到满意的实验结果。
2）插入表格，2行一列，第一行用于显示当前日期时间信息，第二行用于显示导航栏目。
用JavaScript语言编写脚本，显示当前日期、时间。代码省略。背景图片：house.gif
插入“网站主页”、“馆藏介绍”、“案卷查询”等快速导航栏。居中对齐。
背景图片：guide.gif
3）网站主体部Biblioteka 。插入表格，一行三列。武汉大学教学实验报告
信息管理学院档案学专业2009年6月22日
实验名称
档案信息网站主页构建
指导教师
陈传义
姓名
田嫚
年级
2007级
学号
200732490043
成绩
一、预习部分
1．实验目的
2．实验要求
3．实验环境与工具
1、实验目的
作为一名档案专业学生，本实验的主要目的
是通过构建一个档案信息网站主页，提升自己独立设计、制作小型档案信息网站的能力，巩固学习成果。
内嵌一个iframe框架，链接到特定的历史上的今天网站URL地址：
src=/today/today.asp
4）走马灯图片效果设计。
插入表格1行13列，宽2600，高100，各单元格内分别插入13张背景图片。
素材中已提供了JavaScript语言脚本——scrollpic.js，启用该脚本文件来形成走马灯效果图片。具体代码省略。
二、用户登录界面设计
按要求，用户登录界面本应横向布局在快速导航栏之下，但由于实验过程中发现网站主体部分右侧只有“天气预报”和“历史上今天”两个栏目，略显单调，而且形成大量空白地带，于是考虑将用户登录界面调整到此。
插入图片：loginmsn.jpg
安装完成后测试暗转是否成功，在浏览器地址栏输入http://222.20.217.210（本机IP地址）。显示Microsoft Windows XP professional主页，表明IIS设置成功。
2)IIS服务器的配置
在“开始”菜单“控制面板”中的“管理工具”，选择“Internet信息服务器”，在“默认web站点”中点击右键，选择“新建”目录下的“虚拟目录”，根据向导开始设置，别名为“archives”,路径为“F:\webdesign\myweb”，设置相关属性（IP地址、主目录中本地路径、文档属性等）。
Microsoft Office Access2007——用于建立数据库；
PhotoshopCS3、FlashCS3——用于网页中动画和图片制作处理。
二、实验操作部分
1.实验前期准备
2.实验操作过程（可用图表示）
3.实验效果图
1、实验前期准备
1)安装IIS6.0
将安装盘放入光驱，然后从操作系统【控制面板】——【添加/删除组件】——勾选【Internet信息服务器】，点击“下一步”进行安装。
账号文本框
密码框
登录、注册按钮
三、“天气预报”栏目设计：
插入“天气预报”图片
内嵌一个iframe框架，链接到特定的天气预报网站URL地址：/weather.htm
四、“历史上的今天”栏目设计：
插入背景图片，文字“历史上的今天”，用JavaScript语言编写脚本，显示当前日期。
7）网站访问计数、版权声明：
插入一行一列表格，设置背景图片guide.gif。
用JavaScript语言编写脚本，实现网站访问动态计数。代码省略。
加入浏览器分辨率信息以及版权、网站用途声明。
8）调整相关字形、字体、颜色等，为需要设置网页链接的地方添加链接。至此，网站基本设计完成。运行调试：在浏览器地址栏里输入http://222.20.217.210/myweb/index.asp，即可预览主页效果。
分别设计如下：
公告栏
内嵌一列多行表格，
用于显示“档案工作新闻”。
用户登录界面设计
（详细设计如下，下同）
图片“馆藏历史”
“天气预报”
栏目设计
图片“服务之窗”
图片“档案法规”
图片“资政新编”
“历史上的今天”
栏目设计
图片“我要投稿”
图片“网上问答”
一、公告栏设计：
小图片
公告栏
动态文字效果
先插入一张小图124.gif，然后编写代码，形成动态公告文字效果。代码如下：
5）“查档指南”、“政务公开”、“档案文摘”、“档案法规”栏目设计：
在原设计图下方插入表格，一行四列，分属四个子栏目。
各个子栏目类分别内嵌一列多行表格，列出项目内容。在此不赘述。
查档指南
更多……
政务公开
（同上）
档案文摘
（同上）
档案法规
（同上）
6）“友情链接”栏目设计：
插入一行一列表格，设置背景图片register.jpg。横向排列国内档案网站、国外档案网站、高校档案网站以及常用网站四个下拉框。
档案信息网站是网上档案信息的聚集点和辐射源，是档案馆（室）在互联的公共信息网络上建立的站点，它以主页方式提供相关信息和服务，构成公共信息网络的一个节点。档案站点建设是档案馆（室）面向网络的窗口，为更多的档案用户提供了他们所需要的服务。
本实验旨在使自己能全面掌握一个档案信息网站的制作流程，结合网站全程设计课程中学到的各章节内容，熟练掌握HTML网站设计语言基本语法、CSS样式表、JavaScript语言特效、安装IIS信息服务、创建站点、DreamweaverCS3、FlashCS3、FhotoshopCS3等网页设计软件来创建服务器和制作素材，进一歩深入掌握ASP技术和动态数据库，实现网站的动态交互，最后完成网站主页作品并在初步测试运行。
通过该实验，我了解了一个档案信息网站的制作流程，包括前期的IIS配置，网页布局，各部分设计等，复习巩固了网站全程设计课程中学到的HTML、JavaScript、ASP等技术，对网页设计一系列软件如DreamweaverCS3等的基本操作有了更进一步的了解，操作更加熟练自如。
教师
评语
指导教师年月日
教务部制表
<MARQUEE scrollAmount=2 BEHAVIOR=SCROLL direction=up onmouseover=stop() onmouseout=start() height="150" >
<font size=2>  欢迎来到教学模拟档案信息网站!<br>
 希望通过此网站，能够帮助您加深对档案、档案工作和档案工作者的了解，架起您与档案之间的桥梁。  谢谢!<br>
2、实验要求
1)熟练掌握DreamweaverCS3编辑网页的方法。
2)能运用ASP技术和数据库构建动态网站。
3)复习网站全程设计课程全部章节内容，融会贯通。
4)能制作出完整的档案信息网站，并进行调试。
3、实验环境与工具
1)开发环境：本实验操作系统为Windows XP。
2)开发工具：
DreamweaverCS3——用于建立站点和设计、布局网页元素；
2、实验操作过程
一、运行DreamweaverCS3，新建ASP JavaScript文档，保存为index.asp。
根据网页内容初步设计，编写CSS样式表，供后面调用。
二、为整个网页设置背景图片bg.gif（申明，除少数图片另外搜集以外，本试验中所用到的图片基本都取自老师提供的素材文件夹）。
三、进入【设计】视图，利用表格构建网站基本框架。以下是各部分构建步骤：
1)网站头部：
插入表格，一行两列，用于插入Flash文件和图片。左边单元格插入Flash文件2.swf，右边单元格插入背景图片school.jpg。调整高度。
Flash：2.swf
背景图片：school.jpg；
用JavaScript语言编写脚本，显示“教学模拟档案信息网站”动态文字效果，代码省略。
3.实验效果图（网站主页效果图）
三、实验效果分析（包括仪器设备等使用效果）
实验小结：
在该实验中，我设计的这个档案信息网站主页中，经过虚拟服务器测试，能够正常运行。由于时间有限，只完成了主页部分的设计，子页面的设计有待继续。
在实验过程中，遇到过很多的问题，如某些板块设计不当造成大面积空白等，但经过反复调试，最终完成了该实验，达到了实验目的，与系统设计的目的相符，在系统的使用过程中，基本顺利的完成各种操作，得到满意的实验结果。
2）插入表格，2行一列，第一行用于显示当前日期时间信息，第二行用于显示导航栏目。
用JavaScript语言编写脚本，显示当前日期、时间。代码省略。背景图片：house.gif
插入“网站主页”、“馆藏介绍”、“案卷查询”等快速导航栏。居中对齐。
背景图片：guide.gif
3）网站主体部Biblioteka 。插入表格，一行三列。武汉大学教学实验报告
信息管理学院档案学专业2009年6月22日
实验名称
档案信息网站主页构建
指导教师
陈传义
姓名
田嫚
年级
2007级
学号
200732490043
成绩
一、预习部分
1．实验目的
2．实验要求
3．实验环境与工具
1、实验目的
作为一名档案专业学生，本实验的主要目的
是通过构建一个档案信息网站主页，提升自己独立设计、制作小型档案信息网站的能力，巩固学习成果。
内嵌一个iframe框架，链接到特定的历史上的今天网站URL地址：
src=/today/today.asp
4）走马灯图片效果设计。
插入表格1行13列，宽2600，高100，各单元格内分别插入13张背景图片。
素材中已提供了JavaScript语言脚本——scrollpic.js，启用该脚本文件来形成走马灯效果图片。具体代码省略。
