网页设计课程设计报告.docx

网页设计课程设计报告.docx

《网页设计课程设计报告.docx》由会员分享，可在线阅读，更多相关《网页设计课程设计报告.docx（26页珍藏版）》请在冰豆网上搜索。

网页设计课程设计报告

动态网页设计与制作

课程设计报告

学校：

华南农业大学珠江学院

系别：

信息工程系

课题：

“浪漫婚纱”动态网站设计

专业班级：

08计算机科学与技术1班

姓名：

詹昌健

学号：

200830400125

指导教师：

丁蕾

目录

一、设计目的.....................................................1

二、课程设计题目要求及描述.......................................1

1．设计要求..................................................1

2．描述......................................................1

三、网站设计思想和详细设计分析...................................2

1．网站整体结构规划思想......................................2

2．主页设计思想与分析........................................3

3．子页设计思想与分析........................................6

3.1子页——婚纱展示......................................7

3.2子页——在线订购......................................7

3.3子页——访客留言（留言板）.............................8

3.4子页——万年历查询....................................9

四、网站站点建立与数据库连接测试................................10

1．建立站点.................................................10

2．建立布局.................................................12

3．数据库连接测试...........................................14

五、设计总结....................................................15

1.心得体会.................................................15

2.展望.....................................................15

六、附件——关键代码片段........................................15

参考文献:

.......................................................18

一、设计目的

随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。

本课程的设计目的是通过实践使同学们经历Dreamweavercs4开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。

结合具体的开发案例，理解并初步掌握运用Dreamweavercs4可视化开发工具进行网页开发的方法；了解网页设计制作过程。

通过设计达到掌握网页设计、制作的技巧。

了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Dreamweavercs4、Photoshopcs5.1、Flash5.0、Firework5.0、Access2010等软件的的操作和应用。

增强动手实践能力，进一步加强自身综合素质。

学会和团队配合，逐渐培养做一个完整项目的能力。

我们小组本次主要设计的是以“浪漫婚纱”为主题的网页，作为一个商业网站，充分体现该公司的企业文化和商业价值，以达到预期的盈利目的。

通过对"浪漫婚纱"网站结构设计、调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握企业网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。

二、课程设计题目要求及描述

动态网站的课程设计要求网站的风格要与所建网站的主题相协调，而且还要突出独特之处，充分体现网站的价值，既要追求人性化也要具有个性化的特点。

1．设计要求

（1）整个课程设计的各个环节都要求小组成员自己动手，并相互协作共同完成网站设计与制作；

（2）确定的网站主题应大小适中、内容健康、具有时代气息，具有一定的代表性；

（3）网站提供的信息应与网站主题相符合；

（4）网站LOGO与网页风格应该协调一致，网站结构应层次分明，内容重点突出；

（5）对课程设计进行总结，撰写课程设计报告；

（6）设计时限为2个星期。

2．描述

我们小组确定设计以婚纱展示与销售为主题的“浪漫婚纱”企业门户网站，提供最时尚、最浪漫的婚纱礼服资讯。

主要包括：

1、公司简介

2、婚纱展示

3、会员注册/登陆

4、访客留言（留言板）

5、在线订购

……等等。

各个栏目布局合理，简约而美观，各子页面可通过导航栏/超链接作用跳转自如。

三、设计思想

1.网站整体结构规划思想

网站结构图如下：

浪漫婚纱首页

万年历查询/友情链接

会员登录

/员工登陆

访客留言

（留言板）

幸福度调查

通讯录管理

会员注册

公司简介

在线订购

婚纱展示

关于我们

添加/删除/修改

进入

进入

进入XX首页/查看日历

提交

返回首页

管理留言

写留言

管理员登陆

删除/回复留言

图3.1.1网站结构图

网站首页效果图如下：

图3.1.2“浪漫婚纱”首页

首页baner及logo是运用Photoshopcs5.1、Flash5.0、Firework5.0制作而成的：

图3.1.2首页baner及logo设计

2.主页设计思想

主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。

让用户一进入主页就有种宾至如归的感觉，而且“浪漫婚纱”所散发出来的时尚气息也会扣人心弦。

（1）首先，一进入首页会弹出“消息提示框”，这是为了方便用户浏览网页时需要及时知晓的一些信息，提示框里显示的信息是：

图3.2.1进入首页弹出消息提示框

这部分的代码如下：

//WindowOnload

window.onload=function（）{

fbMenuBar.importCSS（"css.css"）;

varfb=newfbMenuBar（"fbmenubar"）;

fb.showBtn（）;

window.alert（'温馨提示：

本站点里的所有网页可能需要在<>才能正常显示，不同的IE版本对CSS的定义不同，在其他版本浏览器下可能会出现排版位置出错。

网页还添加了一首好听的背景音乐《今天你要嫁给我》。

详情请看站点文件夹下附带的《网站说明》。

'）;

}

（2）首页最上方是利用一个JavaScript脚本实现当前时间的显示，并仿照实现了IE、Google浏览器的“设置主页”及“收藏当前网页”的实用小功能：

图3.2.2显示当前时间及一些页面功能

这部分的代码如下：

欢迎光临浪漫婚纱!

今天是

today=newDate（）;

functioninitArray（）{

this.length=initArray.arguments.length

for（vari=0;i

this[i+1]=initArray.arguments[i]}

vard=newinitArray（

"星期日",

"星期一",

"星期二",

"星期三",

"星期四",

"星期五",

"星期六"）;

document.write（

"

9pt;font-family:

宋体'>",

today.getFullYear（）,"年",

today.getMonth（）+1,"月",

today.getDate（）,"日",

d[today.getDay（）+1],

""）;

document.write（

" 

9pt;font-family:

宋体'>",

today.getHours（）,":

",

today.getMinutes（）+1,

""）;

公司首页|

window.external.AddFavorite（'','XX一下，你就知道'）"class="b">收藏XX|

void（0）"onClick="this.style.behavior='url（#default#homepage）';this.setHomePage（''）;"style="CURSOR:

hand">设XX为首页

（3）首页左中间位置的文字“自下而上滚动显示”和右下角的婚纱图片“自右向左循环展示”，当鼠标移动到上面就自动停止，这部分采用的同样是JavaScript脚本：

图3.2.3“浪漫婚纱”首页图片循环显示

这部分的代码如下：

hidden;width:

570px;padding:

2px;"onmouseover="stopscroll（）;"onmouseout="doscroll（）">

nowrap;padding:

0;">