网络设计课程设计书.doc
信息科学与工程学院课程设计任务书 题目： 企业网站设计与开发 学 号： 姓 名： 专 业： 计算机科学与技术 课 程： 动态网站与开发 指导教师： 职称： 完成时间： 2012年 6月-2012年 7 月课程设计任务书及成绩评定课程设计的任务和具体要求1、结合该课程中所学的理论知识，按要求独立设计方案，培养学生独立分析与解决问题的能力；2、学会查阅相关手册和资料，通过查阅手册和资料，进一步掌握网页设计技术；3、掌握企业网站开发的的基本过程；4、掌握数据库开发的基本过程； 5、认真撰写总结报告，培养严谨的作风和科学的态度。指导教师签字： 日期： 指导教师评语成绩： 指导教师签字： 日期： 课程设计所需软件、硬件等Dreamwaver、WPS文字、IE浏览器、PC等。课程设计进度计划起至日期工作内容备注2012.6.16-2012.6.182012.6.19-2012.6.232012.6.24-2012.6.25搜集相关资料并整理资料对整理的资料分析分类并制作网页制作课程设计文字版参考文献、资料索引序号文献、资料名称编著者出版单位1、美G.Andrew Duthie ,Microsoft ASP.NET程序设计 ,北京:清华大学出版社,2、周之英,现代软件工程,北京:科学出版社3、 覃剑锋 张钢 ,ASP网站建设专家,机械工业出版社 4、 黄明,ASP信息系统设计与开发实例,机械工业出版社 目 录一、概述.4二、前言.4三、总体结构图.5四、详细设计.6 4.1.设计主页.6 4.2.公司简介.8 4.3景区介绍.10 4.4.信息咨询.14 4.5.交通指南.15 4.6.联系我们.16五、总结.17六、心得.18企业网站设计与开发 一、概述 现今网站的开发会用到形形色色开发工具，如ASP,PHP,JSP等，包括脚本语言，以及为网站提供数据存储的数据库（Access，SQL SERVER）, ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序。ASP也不仅仅局限于与HTML结合制作WEB网站，而且还可以与XHTML和WML语言结合制作WAP手机网站。但是其原理也是一样的。是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。 培养一大批掌握和应用线代信息技术和网络技术的人才，在全球信息化的发展中占据主动地位，不仅是经济和社会发展的需要，也是计算机和信息技术教育这的历史责任。二、前言 互联网技术的迅速发展，使网络已逐渐深入人心，更是成为继报刊、电视、广播等传统媒体之后而兴起的一新传媒介质，网络宣传已成为众多宣传手段的重中之重，各种各样的网站也就应运而生：为宣传企业而制作的公司网站、可进行网上购物的电子商务网站、能及时了解到天下事的新闻网站、方便学习的教育网站，还有学校、团体、个人等等各大各小的网站，充斥着我们的视野，满足着我们的需要。网站的规划与建设，已悄然被许多人摆到了首要的迫在眉睫的位置上。现今的企业，如果仍然依靠传统的方式宣传自己企业的形象和文化、采购自己企业所需的原材料和配套部件、推销自己企业的产品，则显得十分落后而且难以适应激烈的市场竞争。因此，当代企业纷纷建立自己的网站，借助于互联网快速的信息传递加速自身的发展。一个企业网站的规划与建设，自然而然的也就成了众多类型的网站规划与建设的典范；企业网站的规划与建设这一研究课题，也自然而然地成为当今乃至今后一长段时间内，企业内部和互联网上的一个相当重要的讨论对象。三、总体结构图结构图如下：网站首页 景区介绍信息咨询交通指南联系我们 公司简介 公司荣誉 各地风景 薛城区滕州市峄城区台儿庄 市中区 山亭区 四、详细设计 4.1.设计主页 首先设计标题插入logo标志，再插入横向标题栏在第一行里插入一个天气插件，第二行插入动态图“dongtaifengjingtu” 。 根据网站构架，枣庄天润旅游的主页横向框架包括公司简介、荣誉、信息咨询以及交通指南等。然后通过修改页面属性将背景图片设置为“beijingtupian”。部分代码如下：background-image: url(sucai/beijing.jpg);background-repeat: no-repeat;</style></head><body><h1 align="center">欢迎您光临天润旅游</h1><p><img src="sucai/logo.jpg" width="331" height="91" /></p><table width="1023" height="58" border="0" cellpadding="0" cellspacing="0"><tr align="center"></tr><tr align="center"> <td width="202" align="center" bgcolor="#66FF00"><strong><a href="liuyangeiwo.asp">公司简介</a></strong></td> <td width="205" bgcolor="#66FF00"><strong><a href="minsufengqing.asp">景区介绍</a></strong></td> <td width="210" bgcolor="#66FF00"><a href="guanyuwomen.html"><strong>公司荣誉</strong></a></td> <td width="206" bgcolor="#66FF00"><a href="tianxiegerenxinxi.asp"><strong>信息咨询</strong></a></td> <td width="200" bgcolor="#66FF00"><h3><a href="</tr></table><table width="1050" height="367" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="834"><img src="sucai/dongtaitu.gif" width="1020" height="808" /></td> <td width="15" align="right"> </td> <td width="201" align="right" valign="top"><table width="181" height="71" border="0" cellpadding="0" cellspacing="0"><table width="209" height="208" border="0" cellpadding="0" cellspacing="0"> <td align="center" valign="middle" bgcolor="#FFFF00"><a href="shizhongqu.html"> </a></td><td align="center" valign="middle" bgcolor="#FFFF00"><a href="xuecheng.asp"> </a></td> <td align="center" valign="middle" bgcolor="#FFFF00"><a href="tengzhou.html"> </a></td> <td align="center" valign="middle" bgcolor="#FFFF00"><a href="taierzhuang.asp"> </a></td><td align="center" valign="middle" bgcolor="#FFFF00"><a href="shantingqu.asp"> </a></td><td align="center" valign="middle" bgcolor="#FFFF00"><a href="yichrngqu.asp"> </a></td> </tr> </table> <iframe src=" frameborder="0" scrolling="No" width="200" height="260" allowtransparency="true"></iframe></td> </tr></table><p> </p><p> </p><p align="right"></p></p></body> 4.2.公司简介 天润旅游开发有限公司是一个旅游综合开发和综合管理的股份制企业，于2011年1月24日在枣庄工商局登记注册成立，注册地址山亭区凫城乡。公司经营发展理念是“修身治企，诚信制利，厚德致远”，取法自然，和润天下，经营范围包括山茶产销，奇石开发，绿色农副产品加工销售，苗木繁育，园艺绿化。园林规划施工和生态餐饮服务等，公司初步运作了美女峰生态园餐饮服务，抱犊崮山茶产销，精品景观石，绿色农副产品加工等五个旅游综合开发项目。 创造全新的、统一的企业形象。最为有效的方式之一就是整合视觉识别系统，使用一致的设计理念，创造一个明确界定的，崭新的公司形象。部分代码如下：body background-image: url(sucai/beijing.jpg);</style>< /head><body><h1 align="center"><strong>公司简介</strong></h1><table width="661" height="160" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="238"><img src="sucai/guanyuwomen1.jpg" width="962" height="681" /></td> </tr></table> <tr> <td><img src="sucai/guanyuwomen2.jpg" width="962" height="681" /></td> </tr></table></p></body> 4.3景区介绍 将枣庄各地的美丽风景整理好，整理成文本并粘贴到此网页中。并设置背景图片为“景区介绍”。部分代码如下：<title>景区介绍</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">body background-image: url(sucai/beijing.jpg);</style></head><body><h1 align="center">景区介绍</h1><div > <p >枣庄旅游景点 </p> <table > <tr > <td width="60" valign="center" ><p >编号 </p></td> <td width="270" valign="center" ><p >景区名称 </p></td> <td width="120" valign="center" ><p >级别 </p></td> <td width="120" valign="center" ><p >正常价格（元） </p></td> </tr> <tr> <td width="60" valign="center" ><p >1 </p></td> <td width="270" valign="center" ><p >台儿庄古城 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >100元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >2 </p></td> <td width="270" valign="center" ><p >滕州微山湖湿地公园 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >60元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >3 </p></td> <td width="270" valign="center" ><p >滕州盈泰生态温泉度假村 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >68元/ 88元(假期) </p></td> </tr> <tr> <td width="60" valign="center" ><p >4 </p></td> <td width="270" valign="center" ><p >抱犊崮国家森林公园 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >60元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >5 </p></td> <td width="270" valign="center" ><p >山亭汉诺庄园温泉项目 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >20元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >6 </p></td> <td width="270" valign="center" ><p >冠世榴园（青檀寺） </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >100元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >7 </p></td> <td width="270" valign="center" ><p >台儿庄大战纪念馆 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >免费 </p></td> </tr> <tr> <td width="60" valign="center" ><p >8 </p></td> <td width="270" valign="center" ><p >熊耳山国家地质公园 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >60元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >9 </p></td> <td width="270" valign="center" ><p >莲青山风景区 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >40元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >10 </p></td> <td width="270" valign="center" ><p >墨子纪念馆 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >免费 </p></td> </tr> <tr> <td width="60" valign="center" ><p >11 </p></td> <td width="270" valign="center" ><p >李宗仁史料馆 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >10元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >12 </p></td> <td width="270" valign="center" ><p >铁道游击队纪念园 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >免费 </p></td> </tr> <tr> <td width="60" valign="center" ><p >13 </p></td> <td width="270" valign="center" ><p >滕州汉画像石馆 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >免费 </p></td> </tr> <tr> <td width="60" valign="center" ><p >14 </p></td> <td width="270" valign="center" ><p >龟山风景区 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >30元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >15 </p></td> <td width="270" valign="center" ><p >滕州刘村榴园景区 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >20元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >16 </p></td> <td width="270" valign="center" ><p >枣庄甘泉寺 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >11元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >17 </p></td> <td width="270" valign="center" ><p >凤凰城堡 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >20元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >18 </p></td> <td width="270" valign="center" ><p >仙台山温泉小镇 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >试营业 </p></td> </tr> <tr> <td width="60" valign="center" ><p >19 </p></td> <td width="270" valign="center" ><p >万福园 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >20元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >20 </p></td> <td width="270" valign="center" ><p >鲁班纪念馆 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >20元 </p></td> </tr> <tr> <td width="60" valign="center" ><p >21 </p></td> <td width="270" valign="center" ><p >滕州宾馆温泉会所 </p></td> <td width="120" valign="center" ><p > </p></td> <td width="120" valign="center" ><p >20元 </p></td> </tr> </table></div></p></body> 4.4.信息咨询. 将通过photoshop修改的图片通过建立一个两行以烈的表格将图片插入。部分代码如下：body background-image: url(sucai/beijing.jpg);</style></head><body><h1 align="center"><strong>信息查询</strong></h1><table width="661" height="160" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="238"><img src="sucai/guanyuwomen1.jpg" width="962" height="681" /></td> </tr></table> <tr> <td><img src="sucai/guanyuwomen2.jpg" width="962" height="681" /></td> </tr></table></p></body> 4.5.交通指南 对于旅游开发公司的网页在首页插入一个关于交通的网页对于浏览的人非常方便，于是就插入了这个网站方便浏览的客户使用查询各类交通方便出行 。 4.6.联系我们 设置表格一行一列，设置条件并在最低插入两个按钮“确认”“重置”，如下图：部分代码如下：<body><h2 align="center">请填写个人信息</h2><p align="center"> </p><p align="center"> </p><form name="frmInfor" method="POST" action="./网页/asp光盘/chapter4/4-5.asp"> 姓名： <input type="text" name="txtName"><br>密码：<input type="password" name="txtPwd"><br>性别：<input type="radio" name="rdoSex" value="男">男 <input type="radio" name="rdoSex" value="女">女<br>爱好：<input type="checkbox" name="chkLove" value="计算机">计算机 <input type="checkbox" name="chkLove" value="音乐">音乐 <input type="checkbox" name="chkLove" value="旅游">旅游<br>职业：<select name="sltCareer"> <option value="教育业">教育业</option> <option value="金融业">金融业</option> <option value="其他">其他</option> </select><br>简述：<textarea name="txtIntro" rows="3" cols="40"></textarea><br><input type="submit" name="btnSubmit" value=" 确 定"><input type="reset" name="btnReset" value="重新填写"></form></body> 五、总结 通过本次网站设计总结了网站设计五步骤 由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。 网站设计五步骤 ： 1.确定网站主题：网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。 2.搜集材料：明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。 3.规划网站：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。 4.选择合适的制作工具：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver
