班级主页设计实验报告.doc

班级主页设计实验报告

———————————————————————————————— 作者：
———————————————————————————————— 日期：

2

个人收集整理 勿做商业用途

WEB动态网页设计
实验报告

学院：计算机科学与技术学院
专业:网络工程
姓名：寿夏辉
学号：2010212112
指导老师：代宇

目录
设计背景 3
设计题目 3
网站内容介绍 3
技术分析 4
主要制作过程 6
运行效果 16
心得体会 18

一、 设计背景
在Internet飞速发展的今天，我们每个人都离不开网络,离不开它带给人们的便捷的信息服务。我们大学生更是Internet的受益者，身为大学生，我们发现同学之间的交流变少了，大家更多的时间愿意宅在寝室,很少参加班级活动。所以,我和周洪瑶决定建设一个班级主页，建设一个属于班级的小家庭，希望这个网站能带给同学家的感觉，带给同学们即时的信息，同时增进同学之间的交流。
同时，我希望通过这次课程设计熟练掌握Photoshop, Dreamweaver软件的使用以及动态脚本语言的运用.

二、 设计题目
《重庆邮电大学10级0431003班级主页》

三、 网站内容介绍
选定题目后，我们决定展开需求分析。通过查阅资料和实际调查,我们了解到同学们对网站中想获得的信息。于是,我们决定建设一个可行性较高的网站，我们设置了登录权限，它只能允许注册了班级账户的同学登录班级网站,登录成功后就进入了班级主页.班级主页主要提供了班级新闻、班级相册、科技赛事、班级留言等信息以及管理后台等交互界面的链接.该网站的整体结构如下图:
开发团队
关于我们
联系我们
考研专栏
管理入口

同学录
留言板
友情链接
就业星空
科技赛事
最新相册
班级留言
班级相册
班级新闻
班级主页
网页logo
导航
页脚链接
页面文本
0431003班级主页

四、 技术分析
1. 层的使用
当需要在Dreamweaver软件中插入的图片中显示文字信息时，可以选择插入 布局对象 层,然后在新建的层中添加文本信息.
2。Photoshop软件的使用
由于Dreamweaver软件中的文字工具提供的字体种类很少，不能编辑艺术字,所以当我们需要在图片中插入一些色彩鲜艳的艺术字体时，可以使用Photoshop工具，在图片中添加文本;同时,Photoshop中有许多渐变图片，可以制作美观的艺术图片;由于涉及班级主页需要大量的图片素材，网上下载的图片并不一定能满足网站的需求，所以用Photoshop进行图片的裁切、仿制图章等.
3.创建具有动态效果的导航条
如果我们需要创建动态的导航条效果，即鼠标经过导航条时呈现不同的图片时,我们可以在Dreamweaver软件中插入 图像对象 鼠标经过图像，然后在原始图像和鼠标经过图像中插入不同的图像文件就可以实现动态的导航条。
4。创建脚本链接
当网站需要实现用户收藏功能时或者实现弹出信息行为时，使用不同的脚本语言链接.
5.添加超级链接
添加超级链接可以实现不同网页之间的跳转。
6。图像热区链接
点击图片可以实现跳转.
7。内部链接、外部链接以及链接样式
实现内网和外网的链接以及链接的效果设置。
8.邮件链接
点击可以发送outlook邮件
9。插入滚动文字
10.数据库的连接
通过数据库的连接实现页面的动态效果,页面文本的更新,用户登录权限的设置，留言板的添加等.
11.创建站点文件夹
合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，这对以后网站的制作是极其有利的。

五、 主要制作过程
1.服务器的配置与站点的建立
单击【开始】｜【控制面板】|【管理工具】|【Internet 信息服务（IIS)管理器】命令，打开【Internet信息服务】窗口。新建立一个网站并且设置站点根目录位置，以后所涉及的站点文件都在这个根目录下

打开dreamweaver,新建站点—〉news

对站点进行设置

站点的设置基本完成
2. 登录界面的设置
通过在插入背景图片后再插入层,将表格和按钮插入，完成了登录界面。

当然，所有的学号和密码是储存在数据库中的，如果输入错误，无法进入主页

3。进入主页设置后，首先进行布局，先插入表格再插入图片.
下图为用photoshop制作的主页Logo

同时，我在图片中创建了一个脚本链接“收藏我们”，具体做法是双击收藏我们,然后在下方的链接处添加脚本语言javascript:window。external。addFavorite（'http：//localhost/index。asp’，’0431003班级主页')
经过测试，脚本链接成功

下面我们创建导航条
首先插入一行四列的表格,然后在表格中插入用photoshop合成的导航条，由于要设置动态导航条，我们选择插入 图像对象 鼠标经过图像，进行如下设置：

于是,我们创建了导航条

同时,我在班级主页导航上添加了脚本链接,鼠标点击时可以弹出信息行为。具体设置为双击导航条，在下方的链接输入脚本语言：javascript:alert('您当前所在的页面就是班级主页！’)
效果如下：

接着，我们开始设计网页的主体部分
首先,插入一个布局为3行3列的表格，然后分块布局.
（相册模块)

同时在相册的图片设置图像热点链接,链接至班级相册二级页面

(科技赛事模块）
由于要引用数据库的数据,所以文本框显示的不是文本，而是数据库的记录集。因为数据库主要是由我的搭档周洪瑶完成的，所以数据库的链接和建立我就不详细介绍了.
在软件中设计如下：

在IE浏览器下显示的区域如下：

(考研专栏模块）
设计：

预览：

（就业星空模块)

（友情链接模块）
设计:

在链接中我们设这了链接样式，当点击某个链接后，链接颜色发生变化，以示区分，操作方法为点击下方的页面属性

效果:

（留言板模块）
设计：

效果：

文本区域设置结束后,在最下方设置页脚。
我们插入经过photoshop处理后的图片

对同学录、开发团队、联系我们、关于我们、管理入口分别建立超链接，其中，联系我们的链接方法为选中图像区域热点后，设置链接至mailto:1486625183@
效果预览:

最下方设置了滚动文字条

代码为< marquee >欢迎光临0431003班级主页</ marquee >
至此主页面的设置结束，我们可以看到通过主页面的链接可以跳转至其他二级网页。
如点击留言板或班级留言后跳转的页面为：

点击班级新闻后跳转的页面为：

点击添加新闻后跳转至:

至此,我设计的部分基本完工。

六、 整体效果展示
（登陆界面）

（主页面）

七、 心得体会
通过这次的动态网页课程设计，我积累了网站设计的经验和教训，提高了自己的实际动手能力，下面我将自己的经验总结如下：
（1） 使用Dreamweaver软件设计网页的第一步配置服务器和新建站点非常重要，它为之后的网页设计打下基础。如果配置错误，之后的网页设计根本无法进行。同时，我们应该学会整理站点文件夹中的文件，由于是一个站点,所以应该包含不同的网页和图片，我们可以把每一个二级网页都创建一个文件夹,同时为所有的图片创建一个文件夹，还可以为所有的数据库建立一个文件夹，方便文件管理.
（2） 通过网页制作，由于需要大量图片素材，我也学会了使用photoshop的基本图片处理方法，现在能够熟练地掌握图片的裁切、仿章工具的使用、添加文本的操作、渐变工具、色调工具、聚焦工具的使用，可谓一举两得啊!
（3） 主页的设计一定要具有布局思想，在设计之前应首先合理地布局页面，为之后的模块化操作奠定基础.
（4） 网页中设置一定的脚本链接可以增强网页的使用性能,同时设置适量的动态效果（如插入flash、插入背景音乐、添加浮标等）可以增强网页的吸引力。
（5） 数据库的建立与链接同样很重要,只有将数据库和网页链接起来才能实现真正的动态，真正地与用户进行交互。网站的交互功能十分重要。但是由于数据库这一部分主要是由我的搭档完成的，所以我并不是很熟悉操作，今后要加强这方面的锻炼。
21