网页设计课程设计报告Word文件下载.docx
《网页设计课程设计报告Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计课程设计报告Word文件下载.docx（22页珍藏版）》请在冰豆网上搜索。
结合具体的开发案例，理解并初步掌握运用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.网站整体结构规划思想
网站结构图如下：
图3.1.1网站结构图
网站首页效果图如下：
图3.1.2“浪漫婚纱”首页
首页baner及logo是运用Photoshopcs5.1、Flash5.0、Firework5.0制作而成的：
图3.1.2首页baner及logo设计
2.主页设计思想
主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。
让用户一进入主页就有种宾至如归的感觉，而且“浪漫婚纱”所散发出来的时尚气息也会扣人心弦。
（1）首先，一进入首页会弹出“消息提示框”，这是为了方便用户浏览网页时需要及时知晓的一些信息，提示框里显示的信息是：
图3.2.1进入首页弹出消息提示框
这部分的代码如下：
<
scriptlanguage="
javascript"
type="
text/javascript"
>
//WindowOnload
window.onload=function（）{
fbMenuBar.importCSS（"
css.css"
）;
varfb=newfbMenuBar（"
fbmenubar"
fb.showBtn（）;
window.alert（'
温馨提示：
本站点里的所有网页可能需要在<
IE8.0以上版本>
才能正常显示，不同的IE版本对CSS的定义不同，在其他版本浏览器下可能会出现排版位置出错。
网页还添加了一首好听的背景音乐《今天你要嫁给我》。
详情请看站点文件夹下附带的《网站说明》。
'
}
/script>
（2）首页最上方是利用一个JavaScript脚本实现当前时间的显示，并仿照实现了IE、Google浏览器的“设置主页”及“收藏当前网页”的实用小功能：
图3.2.2显示当前时间及一些页面功能
tdheight="
26"
tablewidth="
900"
border="
1"
align="
center"
cellpadding="
0"
cellspacing="
bgcolor="
339966"
<
tr>
tdclass="
font_top"
欢迎光临浪漫婚纱!
今天是
<
SCRIPTlanguage=JavaScript>
today=newDate（）;
functioninitArray（）{
this.length=initArray.arguments.length
for（vari=0;
i<
this.length;
i++）
this[i+1]=initArray.arguments[i]}
vard=newinitArray（
"
星期日"
星期一"
星期二"
星期三"
星期四"
星期五"
星期六"
document.write（
fontstyle='
font-size:
9pt;
font-family:
宋体'
"
today.getFullYear（）,"
年"
today.getMonth（）+1,"
月"
today.getDate（）,"
日"
d[today.getDay（）+1],
/font>
）;
&
nbsp;
spanclass='
STYLE9'
today.getHours（）,"
:
today.getMinutes（）+1,
/span>
/SCRIPT>
/td>
<
tdwidth="
230"
class="
ahref="
浪漫婚纱首页.html"
b"
公司首页<
/a>
|<
javascript:
window.external.AddFavorite（'
'
XX一下，你就知道'
）"
收藏XX<
aclass="
href="
void（0）"
onClick="
this.style.behavior='
url（#default#homepage）'
;
this.setHomePage（'
style="
CURSOR:
hand"
设XX为首页<
/tr>
/table>
（3）首页左中间位置的文字“自下而上滚动显示”和右下角的婚纱图片“自右向左循环展示”，当鼠标移动到上面就自动停止，这部分采用的同样是JavaScript脚本：
图3.2.3“浪漫婚纱”首页图片循环显示
divid="
imgMarquee"
overflow:
hidden;
width:
570px;
padding:
2px;
onmouseover="
stopscroll（）;
onmouseout="
doscroll（）"
imgMarqueeList"
white-space:
nowrap;
0;
imgsrc="
S11203ev2-1.jpg"
width="
151"
height="
227"
/>
S11204ev2-1.jpg"
S11210ev2-1.jpg"
S11201ev4-1.jpg"
S11202ev5-1.jpg"
S11223ev3-1.jpg"
S11232ev3-1.jpg"
S11238ev2-1.jpg"
S11218ev3-1.jpg"
S11205ev3-1.jpg"
S11207ev3-1.jpg"
/div>
script>
vart=imgMarquee.scrollWidth
imgMarqueeList.innerHTML+=imgMarqueeList.innerHTML
functiondoMarquee（）
{
imgMarquee.scrollLeft=imgMarquee.scrollLeft<
imgMarquee.scrollWidth-imgMarquee.offsetWidth?
imgMarquee.scrollLeft+1:
t-imgMarquee.offsetWidth
functiondoscroll（）
sc=setInterval（doMarquee,10）
functionstopscroll（）
clearInterval（sc）
doscroll（）
（4）还有一个比较人性化的设计，就是巧妙借鉴淘宝网（）以及腾讯拍拍（）的在线客服JavaScript代码，在可联网的条件下，可以和网站管理员（也就是设计者本人）进行交流，在线咨询。
图3.2.4-1在线客服功能
这部分在首页的调用代码如下：
src="
js/qqz.js"
js.js"
其源文件在站点目录下的“动态--期末网页设计\js\qqz.js和index_qq.js”文件中，这里不再具体展示。
图3.2.4-2在线客服源文件目录
（5）最后还不得不提到的一点就是网页的背景音乐——在这里我添加的是《今天你要嫁给我》这首歌，这个就相对简单了，只要一行代码就能解决的了。
p>
bgsoundsrc="
今天你要嫁给我.swf"
loop="
-1"
/p>
其中src=***是背景音乐的源文件的相对地址；
loop=-1是指单曲循环的播放模式。
3.子页设计思想
子页的设计是对主页的更仔细地阐述，是为了更好地突出网站的主题和特色。
我本人所承担的是以下几个子页的设计和制作。
包括婚纱展示、在线订购、访客留言（留言板）、万年历查询等等……
3.1子页——婚纱展示
婚纱展示这个子页意在向人们展示“浪漫婚纱”的系列产品，以供顾客观赏和选择购买，网页采用极具个性化的效果，当鼠标移动到某张图片上面时，图片会跟着鼠标在一定范围内一起移动，单击鼠标左键可以放大图片。
如图3.3.1所示：
图3.3.1婚纱展示页面
3.2子页——在线订购
在线订购系统可以说是整个网站设计过程中尤为重要的一步，因为它直接关系到这个婚纱企业的盈利问题。
在设计这个网页的时候要搭建一个数据库平台，可以选用Access或者SQLserver建立数据表，用来保存顾客的订购信息，在第一时间反馈给销售部。
该子页效果图如下：
图3.3.2在线订购页面
3.3子页——访客留言（留言板）
访客留言这个子页就有点像论坛的味道了，这个子系统在整个动态网站的设计中可以算得上是最难的一个了。
因为它除了要求连接数据库以外，附带的各种功能也要顺利实现，包括访客登记留言、管理员登陆、管理删除/回复留言等等。
废话不多说，代码在后面的附件中会详细说明，先看效果图：
图3.3.3-1留言版首页
图3.3.3-2用户写留言页面
图3.3.3-3管理员登陆与管理页面
3.4子页——万年历查询
万年历是浪漫婚纱网站的一个附带功能，它可以提供一个包括农历、新历，包括世界各地不同国家的时区和确切时间，同时包含了中国的各个传统节日和节气，可以帮助一些准备结婚的顾客挑选良辰吉日。
效果图如下：
图3.3.4万年历查询
四、网站站点建立与数据库连接测试
在本地建立站点必须先配置好IIS服务器，然后打开DreamWeaverCS4新建站点，在IIS服务器中浏览asp动态网页，在DreamWeaverCS4中设计各个网页，包括布局和动态asp技术设计。
在此次网站设计中，一共要建立至少3个以上的数据库，里面包含了多张数据表，需要分别对其与网页进行连接并测试，不断修正错误，改进功能。
1．建立站点
（1）win7系统下IIS7.5配置，如下图所示：
图4.1.1点击鼠标右键添加网站并配置
（2）配置完成，查看网站目录下的文件，选中任意网页文件在IE浏览器中浏览效果：
图4.1.2IIS服务器站点目录配置成功
（3）在DreamWeaverCS4新建站点，步骤如下：
图4.1.3在DreamWeaverCS4新建站点
2．建立布局
建立布局通常是通过CSS格式、表格等等来规范网页界面的排版，并且尽可能地将JavaScript脚本集中在一起，方便设计人员的调试与修改，以下是首页的CSS格式代码：
styletype="
text/css"
!
--
.dx{
font-size:
12px;
.adf{
font-family:
幼圆"
14px;
color:
#010D2C;
text-align:
left;
.ad{
center;
#CCC;
.ad1{
#000;
body{
background-color:
#509090;
background-attachment:
fixed;
background-repeat:
no-repeat;
background-position:
50%50%;
.font_top{
border-color:
#92532A;
.jjj{
.kkk{
.yyy{
.ooo{
华文新魏"
方正姚体"
#360;
.ppp{
Georgia,"
TimesNewRoman"
Times,serif;
.fbmenubg1{height:
43px;
.fbmenubtn1{height:
.fbmenubg2{height:
34px;
.fbmenubtn2{height:
.fbmenubg3{height:
35px;
.fbmenubtn3{height:
-->
/style>
3．数据库连接测试
这里，我以留言板的数据库测试为例，新建一个数据库data.mdb，每次调用数据库都会间接访问conn.asp文件，这个文件就是建立服务器与数据库之间的连接。
经过反复测试，网站所涉及的多个数据库连接都是成功的。
conn.asp文件代码如下：
%
setconn=server.createobject（"
adodb.connection"
）
connstr="
Provider=Microsoft.jet.oledb.4.0;
datasource="
server.mappath（"
data.mdb"
conn.openconnstr
%>
图4.3访客留言子页面文件详情（包括数据库）
五、设计总结
历时一个多星期的动态网站课程设计终于完成了，在这次的实践中让我学到了不少东西，更让我体会到制作网站的乐趣。
下面就畅谈一下此次课程设计的心得体会和对未来的展望吧~
1.心得体会
通过这次网页课程设计进一步激发了学习兴趣，调动学习的自觉性，自己动脑动手，跟小组成员们一起讨论，运用网络资源，结合教材和老师的知道，通过自身实践，创作出极具风格的网站。
总体来说，就是让我受益匪浅。
在设计网页的这几天里，我充分利用了这次设计的机会，全身心地投入到网页设计的海洋中，不断地学习和探索网页设计的奥秘，不断地完善自我，提高设计水准。
在这个过程中，我也深深体会到，想把页面做好并非一件容易的事，它包括网站主题的选择，内容的采集，图片的处理，页面的排版等等，还包括了数据库连接测试等一系列难点。
本次课设还有许多不足的地方，还需要我不断地学习、综合运用各种知识，努力设计出更好地Web页面。
2.展望
这次动态网站的设计与制作让我对网页设计这一块有了更大的兴趣，我相信自己将来制作出来的网页会更加专业、更加完善的。
我想用一句话来表达我对未来的无限期待：
让我飞得更高，飞得更高……
非常感谢老师、同学在这次课程设计中给我的帮助和指导。
谢谢~
六、附件——关键代码片段
1、留言板管理员登陆检查（checkpass.asp）页面代码，检查通过自动跳转到管理页面。
--#includefile="
conn.asp"
%'
ASP起始
admin=request.form（"
admin"
）'
定义admin的值是表单传过来的用户名域名称admin
password=request.form（"
password"
ifadmin="
orpassword="
then'
这句的意思是假如用户名和密码没有输入的话那么执行下一句
response.Write（"
scriptlanguage=javascript>
alert（'
请填
升级会员 