文档介绍：WEB动态网页设计
实验报告
学院:计算机科学与技术学院
专业:网络工程
姓名:寿夏辉
学号:2010212112
指导老师:代宇
目录
设计背景 3
设计题目 3
网站内容介绍 3
技术分析 4
主要制作过程 6
运行效果 16
心得体会 18
设计背景
飞速发展的今天,我们每个人都离不开网络,离不开它带给人们的便捷的信息服务。的受益者,身为大学生,我们发现同学之间的交流变少了,大家更多的时间愿意宅在寝室,很少参加班级活动。所以,我和周洪瑶决定建设一个班级主页,建设一个属于班级的小家庭,希望这个网站能带给同学家的感觉,带给同学们即时的信息,同时增进同学之间的交流。
同时,我希望通过这次课程设计熟练掌握Photoshop, Dreamweaver软件的使用以及动态脚本语言的运用。
设计题目
《重庆邮电大学10级0431003班级主页》
网站内容介绍
选定题目后,我们决定展开需求分析。通过查阅资料和实际调查,我们了解到同学们对网站中想获得的信息。于是,我们决定建设一个可行性较高的网站,我们设置了登录权限,它只能允许注册了班级账户的同学登录班级网站,登录成功后就进入了班级主页。班级主页主要提供了班级新闻、班级相册、科技赛事、班级留言等信息以及管理后台等交互界面的链接。该网站的整体结构如下图:
开发团队
关于我们
联系我们
考研专栏
管理入口
同学录
留言板
友情链接
就业星空
科技赛事
最新相册
班级留言
班级相册
班级新闻
班级主页
网页logo
导航
页脚链接
页面文本
0431003班级主页
技术分析
层的使用
当需要在Dreamweaver软件中插入的图片中显示文字信息时,可以选择插入布局对象层,然后在新建的层中添加文本信息。
由于Dreamweaver软件中的文字工具提供的字体种类很少,不能编辑艺术字,所以当我们需要在图片中插入一些色彩鲜艳的艺术字体时,可以使用Photoshop工具,在图片中添加文本;同时,Photoshop中有许多渐变图片,可以制作美观的艺术图片;由于涉及班级主页需要大量的图片素材,网上下载的图片并不一定能满足网站的需求,所以用Photoshop进行图片的裁切、仿制图章等。
如果我们需要创建动态的导航条效果,即鼠标经过导航条时呈现不同的图片时,我们可以在Dreamweaver软件中插入图像对象鼠标经过图像,然后在原始图像和鼠标经过图像中插入不同的图像文件就可以实现动态的导航条。
当网站需要实现用户收藏功能时或者实现弹出信息行为时,使用不同的脚本语言链接。
添加超级链接可以实现不同网页之间的跳转。
点击图片可以实现跳转。
、外部链接以及链接样式
实现内网和外网的链接以及链接的效果设置。
点击可以发送outlook邮件
通过数据库的连接实现页面的动态效果,页面文本的更新,用户登录权限的设置,留言板的添加等。
合理地创建站点文件夹可将网站文档分门别类,井井有条地放置其中,这对以后网站的制作是极其有利的。
主要制作过程
单击【开始】|【控制面板】|【管理工具】|【信息服务(IIS)管理器】命令,打开【信息服务】窗口。新建立一个网站并且设置站点根目录位置,以后所涉及的站点文件都在这个根目录下
打开dreamweaver,新建站点—>news
对站点进行设置
站点的设置基本完成
登录界面的设置
通过在插入背景图片后再插入层,将表格和按钮插入,完成了登录界面。
当然,所有的学号和密码是储存在数据库中的,如果输入错误,无法进入主页
,首先进行布局,先插入表格再插入图片。
下图为用photoshop制作的主页Logo
同时,我在图片中创建了一个脚本链接“收藏我们”,具体做法是双击收藏我们,然后在下方的链接处添加脚本语言javascript:('http://localhost/','0431003班级主页')
经过测试,脚本链接成功
下面我们创建导航条
首先插入一行四列的表格,然后在表格中插入用photoshop合成的导航条,由于要设置动态导航条,我们选择插入图像对象鼠标经过图像,进行如下设置:
于是,我们创建了导航条
同时,我在班级主页导航上添加了脚本链接,鼠标点击时可以弹出信息行为。具体设置为双击导航条,在下方的链接输入脚本语