班级主页设计实验报告

《班级主页设计实验报告》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、WEB动态网页设计实验报告学院：计算机科学与技术学院专业：网络工程姓名：寿夏辉学号：2010212112指导老师：代宇19目录设计背景3设计题目3网站内容介绍3技术分析4主要制作过程6运行效果16心得体会1819一、设计背景在Internet飞速发展的今天，我们每个人都离不开网络，离不开它带给人们的便捷的信息服务。我们大学生更是Internet的受益者，身为大学生，我们发现同学之间的交流变少了，大家更多的时间愿意宅在寝室，很少参加班级活动。所以，我和周洪瑶决定建设一个班级主页，建设一个属于班级的小家庭，希望这个网站能

2、带给同学家的感觉，带给同学们即时的信息，同时增进同学之间的交流。同时，我希望通过这次课程设计熟练掌握Photoshop,Dreamweaver软件的使用以及动态脚本语言的运用。二、设计题目《重庆邮电大学10级0431003班级主页》三、网站内容介绍选定题目后，我们决定展开需求分析。通过查阅资料和实际调查，我们了解到同学们对网站中想获得的信息。于是，我们决定建设一个可行性较高的网站，我们设置了登录权限，它只能允许注册了班级账户的同学登录班级网站，登录成功后就进入了班级主页。班级主页主要提供了19班级新闻、班级相册、科技

3、赛事、班级留言等信息以及管理后台等交互界面的链接。该网站的整体结构如下图：开发团队关于我们联系我们考研专栏管理入口同学录留言板友情链接就业星空科技赛事最新相册班级留言班级相册班级新闻班级主页网页logo导航页脚链接页面文本0431003班级主页一、技术分析1.层的使用当需要在Dreamweaver软件中插入的图片中显示文字信息时，可以选择插入布局对象层，然后在新建的层中添加文本信息。2.Photoshop软件的使用由于Dreamweaver软件中的文字工具提供的字体种类很少，不能编辑艺术字，所以当我们需要在图片中插入

4、一些色彩鲜艳的艺术字体时，可以使用Photoshop工具，在图片中添加文本；同时，Photoshop中有许多渐变图片，可以制作19美观的艺术图片；由于涉及班级主页需要大量的图片素材，网上下载的图片并不一定能满足网站的需求，所以用Photoshop进行图片的裁切、仿制图章等。3.创建具有动态效果的导航条如果我们需要创建动态的导航条效果，即鼠标经过导航条时呈现不同的图片时，我们可以在Dreamweaver软件中插入图像对象鼠标经过图像，然后在原始图像和鼠标经过图像中插入不同的图像文件就可以实现动态的导航条。4.创建脚本链

5、接当网站需要实现用户收藏功能时或者实现弹出信息行为时，使用不同的脚本语言链接。5.添加超级链接添加超级链接可以实现不同网页之间的跳转。6.图像热区链接点击图片可以实现跳转。7.内部链接、外部链接以及链接样式实现内网和外网的链接以及链接的效果设置。8.邮件链接点击可以发送outlook邮件9.插入滚动文字10.数据库的连接通过数据库的连接实现页面的动态效果，页面文本的更新，用户登录权限的设置，留言板的添加等。11.创建站点文件夹19合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，这对以后网站的制作是极其有

6、利的。一、主要制作过程1.服务器的配置与站点的建立单击【开始】

7、【控制面板】

8、【管理工具】

9、【Internet信息服务（IIS）管理器】命令，打开【Internet信息服务】窗口。新建立一个网站并且设置站点根目录位置，以后所涉及的站点文件都在这个根目录下打开dreamweaver，新建站点—>news19对站点进行设置站点的设置基本完成1.登录界面的设置19通过在插入背景图片后再插入层，将表格和按钮插入，完成了登录界面。当然，所有的学号和密码是储存在数据库中的，如果输入错误，无法进入主页3.进入主页设置后，首先进行布

10、局，先插入表格再插入图片。下图为用photoshop制作的主页Logo19同时，我在图片中创建了一个脚本链接“收藏我们”，具体做法是双击收藏我们，然后在下方的链接处添加脚本语言javascript:window.external.addFavorite('http://localhost/index.asp','0431003班级主页')经过测试，脚本链接成功下面我们创建导航条首先插入一行四列的表格，然后在表格中插入用photoshop合成的导航条，由于要设置动态导航条，我们选择插入图像对象鼠标经过图像，进行如下设置

11、：于是，我们创建了导航条同时，我在班级主页导航上19添加了脚本链接，鼠标点击时可以弹出信息行为。具体设置为双击导航条，在下方的链接输入脚本语言：javascript:alert('您当前所在的页面就是班级主页！')效果如下：接着，我们开始设计网页的主体部分首先，插入一个布局为3行3列的表格，然后分块布局。（相册模块）19同时在相册的图片设置图像