网页设计课程设计报告
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
我们小组确定设计以婚纱展示与销售为主题的“浪漫婚纱”企业门户网站，提供最时
-1-
动态网站设计与制作—课程设计报告
尚、最浪漫的婚纱礼服资讯。 主要包括：1、公司简介 2、婚纱展示 3、会员注册/登陆 4、访客留言（留言板） 5、在线订购 ……等等。 各个栏目布局合理，简约而美观，各子页面可通过导航栏/超链接作用跳转自如。
（2）首页最上方是利用一个 JavaScript 脚本实现当前时间的显示，并仿照实现了 IE、 Google 浏览器的“设置主页”及“收藏当前网页”的实用小功能：
图 3.2.2 显示当前时间及一些页面功能
这部分的代码如下：
<td height="26"><table width="900" border="1" align="center" cellspacing="0" bgcolor="339966">
1．设计要求 ..................................................1 2．描述 ......................................................1 三、网站设计思想和详细设计分析 ...................................2 1．网站整体结构规划思想 ......................................2 2．主页设计思想与分析 ........................................3 3．子页设计思想与分析 ........................................6
三、设计思想
1. 网站整体结构规划思想 网站结构图如下：
浪漫婚纱首页
公司简介
关于我们
婚纱展示
在线订购
访客留言 （留言板）
会员注册
会员登录 /员工登陆
通讯录管理
幸福度调查
万年历查询/ 友情链接
进入
进入
写留言
管理留言
返回首页
添加/删除/修改
提交
进入百度首页/ 查看日历
管理员登陆 删除/回复留言
图 3.1.1 网站结构图
</tr> </table></td> </tr>
（3）首页左中间位置的文字“自下而上滚动显示”和右下角的婚纱图片“自右向左循环展 示”，当鼠标移动到上面就自动停止，这部分采用的同样是 JavaScript 脚本：
图 3.2.3 “浪漫婚纱”首页图片循环显示
这部分的代码如下： <div id="imgMarquee" style="overflow: hidden; width: 570px; onmouseover="stopscroll();" onmouseout="doscroll()">
-1-
动态网站设计与制作—课程设计报告
一、设计目的
随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个 人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。
本课程的设计目的是通过实践使同学们经历 Dreamweaver cs4 开发的全过程和受到一次 综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解 并初步掌握运用 Dreamweaver cs4 可视化开发工具进行网页开发的方法；了解网页设计制作 过程。
<tr> <td class="font_top">欢迎光临浪漫婚纱! 今天是 <SCRIPT language=JavaScript>
today=new Date(); function initArray(){ this.length=initArray.arguments.length for(var i=0;i<this.length;i++) this[i+1]=initArray.arguments[i] } var d=new initArray( "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); document.write( "<font style='font-size:9pt;font-family: 宋体'> ", today.getFullYear(),"年", today.getMonth()+1,"月", today.getDate(),"日", d[today.getDay()+1], "</font>" ); document.write(
</SCRIPT> </td> <td width="230" class="font_top"><a href="浪漫婚纱首页.html" class="b">
公司首页</a> | <a href="javascript:window.external.AddFavorite('http://www.baidu.com', '百度 一 下 ， 你 就 知 道 ')" class="b"> 收 藏 百 度 </a> | <a class="b" href="javascript:void(0)" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.co m');" style="CURSOR: hand">设百度为首页</a> </td>
（1）首先，一进入首页会弹出“消息提示框”，这是为了方便用户浏览网页时需要及时 知晓的一些信息，提示框里显示的信息是：
图 3.2.1 进入首页弹出消息提示框
这部分的代码如下： <script language="javascript" type="text/javascript">
-3-
动态网站设计与制作—课程设计报告
-2-
动态网站设计与制作—课程设计报告
网站首页效果图如下：
图 3.1.2 “浪漫婚纱”首页
首页 baner 及 logo 是运用 Photoshop cs5.1、Flash5.0、Firework5.0 制作而成的：
图 3.1.2 首页 baner 及 logo 设计 2. 主页设计思想
主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。让用户一进入 主页就有种宾至如归的感觉，而且“浪漫婚纱”所散发出来的时尚气息也会扣人心弦。
<div id="imgMarqueeList" style="white-space: nowrap; padding: 0;"> <img src="S11203ev2-1.jpg" width="151" height="227" /> <img src="S11204ev2-1.jpg" width="151" height="227" /> <img src="S11210ev2-1.jpg" width="151" height="227" /> <img src="S11201ev4-1.jpg" width="151" height="227" /> <img src="S11202ev5-1.jpg" width="151" height="227" /> <img src="S11223ev3-1.jpg" width="151" height="227" /> <img src="S11232ev3-1.jpg" width="151" height="227" /> <img src="S11238ev2-1.jpg" width="151" height="227" /> <img src="S11218ev3-1.jpg" width="151" height="227" /> <img src="S11205ev3-1.jpg" width="151" height="227" /> <img src="S11207ev3-1.jpg" width="151" height="227" />
二、课程设计题目要求及描述
动态网站的课程设计要求网站的风格要与所建网站的主题相协调，而且还要突出独特之 处，充分体现网站的价值，既要追求人性化也要具有个性化的特点。
1．设计要求 （1）整个课程设计的各个环节都要求小组成员自己动手，并相互协作共同完成网站设 计与制作； （2）确定的网站主题应大小适中、内容健康、具有时代气息，具有一定的代表性； （3）网站提供的信息应与网站主题相符合； （4）网站 LOGO 与网页风格应该协调一致，网站结构应层次分明，内容重点突出； （5）对课程设计进行总结，撰写课程设计报告； （6）设计时限为 2 个星期。 2．描述
//Window Onload window.onload = function(){ fbMenuBar.importCSS("css.css"); var fb = new fbMenuBar("fbmenubar"); fb.showBtn(); window.alert('温馨提示：本站点里的所有网页可能需要在<<IE8.0 以上版本>>才能正常 显示，不同的 IE 版本对 CSS 的定义不同，在其他版本浏览器下可能会出现排版位置出错。 网页还添加了一首好听的背景音乐《今天你要嫁给我》。详情请看站点文件夹下附带的《网 站说明》。'); } </script>
cellpadding="0"
-4-
动态网站设计与制作—课程设计报告
" <span class='STYLE9'><font style='font-size:9pt;font-family: 宋体'> ", today.getHours(),":", today.getMinutes()+1, "</span></font>" );
动态网页设计与制作 课程设计报告
学校： 华南农业大学珠江学院
系别：
信息工程系
课题： “浪漫婚纱”动态网站设计
专业班级： 08 计算机科学与技术 1 班
姓名：
詹昌健
学Biblioteka Baidu：
200830400125
指导教师：
丁蕾
动态网站设计与制作—课程设计报告
目
录
一、设计目的 .....................................................1 二、课程设计题目要求及描述 .......................................1
通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。 根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要 求的网页设计作品。 熟练掌握 Dreamweaver cs4、Photoshop cs5.1、Flash5.0、Firework5.0、Access 2010 等软件的的操作和应用。 增强动手实践能力，进一步加强自身综合素质。 学会和团队配合，逐渐培养做一个完整项目的能力。 我们小组本次主要设计的是以“浪漫婚纱”为主题的网页，作为一个商业网站，充分体 现该公司的企业文化和商业价值，以达到预期的盈利目的。通过对"浪漫婚纱"网站结构设计、 调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力， 逐步掌握企业网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所 创作、事实求是的科学作风。
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
-1-
动态网站设计与制作—课程设计报告
尚、最浪漫的婚纱礼服资讯。 主要包括：1、公司简介 2、婚纱展示 3、会员注册/登陆 4、访客留言（留言板） 5、在线订购 ……等等。 各个栏目布局合理，简约而美观，各子页面可通过导航栏/超链接作用跳转自如。
（2）首页最上方是利用一个 JavaScript 脚本实现当前时间的显示，并仿照实现了 IE、 Google 浏览器的“设置主页”及“收藏当前网页”的实用小功能：
图 3.2.2 显示当前时间及一些页面功能
这部分的代码如下：
<td height="26"><table width="900" border="1" align="center" cellspacing="0" bgcolor="339966">
1．设计要求 ..................................................1 2．描述 ......................................................1 三、网站设计思想和详细设计分析 ...................................2 1．网站整体结构规划思想 ......................................2 2．主页设计思想与分析 ........................................3 3．子页设计思想与分析 ........................................6
三、设计思想
1. 网站整体结构规划思想 网站结构图如下：
浪漫婚纱首页
公司简介
关于我们
婚纱展示
在线订购
访客留言 （留言板）
会员注册
会员登录 /员工登陆
通讯录管理
幸福度调查
万年历查询/ 友情链接
进入
进入
写留言
管理留言
返回首页
添加/删除/修改
提交
进入百度首页/ 查看日历
管理员登陆 删除/回复留言
图 3.1.1 网站结构图
</tr> </table></td> </tr>
（3）首页左中间位置的文字“自下而上滚动显示”和右下角的婚纱图片“自右向左循环展 示”，当鼠标移动到上面就自动停止，这部分采用的同样是 JavaScript 脚本：
图 3.2.3 “浪漫婚纱”首页图片循环显示
这部分的代码如下： <div id="imgMarquee" style="overflow: hidden; width: 570px; onmouseover="stopscroll();" onmouseout="doscroll()">
-1-
动态网站设计与制作—课程设计报告
一、设计目的
随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个 人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。
本课程的设计目的是通过实践使同学们经历 Dreamweaver cs4 开发的全过程和受到一次 综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解 并初步掌握运用 Dreamweaver cs4 可视化开发工具进行网页开发的方法；了解网页设计制作 过程。
<tr> <td class="font_top">欢迎光临浪漫婚纱! 今天是 <SCRIPT language=JavaScript>
today=new Date(); function initArray(){ this.length=initArray.arguments.length for(var i=0;i<this.length;i++) this[i+1]=initArray.arguments[i] } var d=new initArray( "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); document.write( "<font style='font-size:9pt;font-family: 宋体'> ", today.getFullYear(),"年", today.getMonth()+1,"月", today.getDate(),"日", d[today.getDay()+1], "</font>" ); document.write(
</SCRIPT> </td> <td width="230" class="font_top"><a href="浪漫婚纱首页.html" class="b">
公司首页</a> | <a href="javascript:window.external.AddFavorite('http://www.baidu.com', '百度 一 下 ， 你 就 知 道 ')" class="b"> 收 藏 百 度 </a> | <a class="b" href="javascript:void(0)" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.co m');" style="CURSOR: hand">设百度为首页</a> </td>
（1）首先，一进入首页会弹出“消息提示框”，这是为了方便用户浏览网页时需要及时 知晓的一些信息，提示框里显示的信息是：
图 3.2.1 进入首页弹出消息提示框
这部分的代码如下： <script language="javascript" type="text/javascript">
-3-
动态网站设计与制作—课程设计报告
-2-
动态网站设计与制作—课程设计报告
网站首页效果图如下：
图 3.1.2 “浪漫婚纱”首页
首页 baner 及 logo 是运用 Photoshop cs5.1、Flash5.0、Firework5.0 制作而成的：
图 3.1.2 首页 baner 及 logo 设计 2. 主页设计思想
主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。让用户一进入 主页就有种宾至如归的感觉，而且“浪漫婚纱”所散发出来的时尚气息也会扣人心弦。
<div id="imgMarqueeList" style="white-space: nowrap; padding: 0;"> <img src="S11203ev2-1.jpg" width="151" height="227" /> <img src="S11204ev2-1.jpg" width="151" height="227" /> <img src="S11210ev2-1.jpg" width="151" height="227" /> <img src="S11201ev4-1.jpg" width="151" height="227" /> <img src="S11202ev5-1.jpg" width="151" height="227" /> <img src="S11223ev3-1.jpg" width="151" height="227" /> <img src="S11232ev3-1.jpg" width="151" height="227" /> <img src="S11238ev2-1.jpg" width="151" height="227" /> <img src="S11218ev3-1.jpg" width="151" height="227" /> <img src="S11205ev3-1.jpg" width="151" height="227" /> <img src="S11207ev3-1.jpg" width="151" height="227" />
二、课程设计题目要求及描述
动态网站的课程设计要求网站的风格要与所建网站的主题相协调，而且还要突出独特之 处，充分体现网站的价值，既要追求人性化也要具有个性化的特点。
1．设计要求 （1）整个课程设计的各个环节都要求小组成员自己动手，并相互协作共同完成网站设 计与制作； （2）确定的网站主题应大小适中、内容健康、具有时代气息，具有一定的代表性； （3）网站提供的信息应与网站主题相符合； （4）网站 LOGO 与网页风格应该协调一致，网站结构应层次分明，内容重点突出； （5）对课程设计进行总结，撰写课程设计报告； （6）设计时限为 2 个星期。 2．描述
//Window Onload window.onload = function(){ fbMenuBar.importCSS("css.css"); var fb = new fbMenuBar("fbmenubar"); fb.showBtn(); window.alert('温馨提示：本站点里的所有网页可能需要在<<IE8.0 以上版本>>才能正常 显示，不同的 IE 版本对 CSS 的定义不同，在其他版本浏览器下可能会出现排版位置出错。 网页还添加了一首好听的背景音乐《今天你要嫁给我》。详情请看站点文件夹下附带的《网 站说明》。'); } </script>
cellpadding="0"
-4-
动态网站设计与制作—课程设计报告
" <span class='STYLE9'><font style='font-size:9pt;font-family: 宋体'> ", today.getHours(),":", today.getMinutes()+1, "</span></font>" );
动态网页设计与制作 课程设计报告
学校： 华南农业大学珠江学院
系别：
信息工程系
课题： “浪漫婚纱”动态网站设计
专业班级： 08 计算机科学与技术 1 班
姓名：
詹昌健
学Biblioteka Baidu：
200830400125
指导教师：
丁蕾
动态网站设计与制作—课程设计报告
目
录
一、设计目的 .....................................................1 二、课程设计题目要求及描述 .......................................1
通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。 根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要 求的网页设计作品。 熟练掌握 Dreamweaver cs4、Photoshop cs5.1、Flash5.0、Firework5.0、Access 2010 等软件的的操作和应用。 增强动手实践能力，进一步加强自身综合素质。 学会和团队配合，逐渐培养做一个完整项目的能力。 我们小组本次主要设计的是以“浪漫婚纱”为主题的网页，作为一个商业网站，充分体 现该公司的企业文化和商业价值，以达到预期的盈利目的。通过对"浪漫婚纱"网站结构设计、 调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力， 逐步掌握企业网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所 创作、事实求是的科学作风。
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