网站制作报告.docx

1、网站制作报告郑州大学信息工程学院生 产 实 习 报 告网站制作 -鲜花网学 号 ：姓 名 ：班 级 ： 本 组 成 员 ：一、实习时间：2012/8/11-2012/8/22二、实习地点：三、指导教师：四、实习目的：1.学习html、css、javascript、jsp等网页制作技术以及相关软件的使用和开发环境。2. 了解做项目的具体流程和方法，如何协调各自的分工与整体进度，以及在做的过程中遇到问题的解决方法。3.学习职业人的基本素质、职业人的品德、职业人之间的如何沟通和交流、体验职业人的生活4.以企业模式分组分工完成项目工程5. 实习过程中，同学们不仅可以复习一下以前的知识，而且可以更好的学

2、以致用，又可以锻炼一下同学们的合作能力和团队意识。五、实习内容 这次实习由组成第3组，并由（本人）来担任组长。所要完成的任务为网站制作（鲜花网），要求在6天左右的时间内完成网页的制作，并实现网站与数据库的链接，实现登陆与注册功能。我们主要使用的软件工具为Dreamweaver、MyEclipse、apache、photoshop、SQLserver等，主要的难点在于数据库连接及通过JDBC操作数据库将服务器链接返回页面，但经过大家的努力及老师的指导，问题被一一解决了。一网站的整体规划1.讨论网站主题：因为自己对商业很感兴趣，于是就想到要是一下设计一个商务销售网站（鲜花网）。2.定位网站CI形象

3、：商务网站最重要的就是是浏览者产生想去亲身购买的欲望。于是在网页设计上面，根据不同鲜花具有的不同意境，我采用的是清新隽永的CI形象。使浏览者有宾至如归的感受。3.确定栏目和板块：1首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。2其次就应该考虑导航条的设置了。3正文的框架设置 （横向因素和纵向因素交错）在浏览了很多精美的销售网站之后，再结合自己的想法，我先在草纸上画出了大体的栏目和板块。4.网站的整体风格和创意：建立一个浪漫的鲜花网站，走映像派路线，目的务必使浏览者留下映像。二网页制作的前期策划与准备1.资料的搜集：由于个人的爱好，我很早以前就收集了许多不同品种花卉的美图，这次就方便多了

4、。接着就搜集了一些有梦幻效果的网页背景，FIASH源代码、小图标和一些GIF的动画等。2.熟悉制作工具软件：主页制作的基本条件有：硬件：一台电脑(64MB以上内存，当然越大越好啦)；软件：HTML编辑软件：常用的有Frontpage、Hotdog等，我们重点学习的 Dreamweaver；图像处理软件：常用的有Photoshop、flash、Fireworks 等；文件上传软件：常用的有Cuteftp、WSftp等。3.构建站点框架。打开Dremweaver后步便是新建站点4设计主页及二级页面。5实现网页间的链接链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要

5、链接的网页单击确定便可以了。6向静太网页插入动态效果7前台：现阶段前台页面全部以静态jsp页面显示；制作首页时将页面分为三部分，top.jsp、bottom.jsp、index.jsp,方便top.jsp、bottom.jsp将在其它前台页面可以重复使用，且保证了前台页面的统一风格；8后台：实现用户的注册与登录。需注意用户的注册密码要进行二次验证，并给与用户提示。我们项目的目标该项目是建立一个以销售鲜花为主的电子商务网站。众所周知，随着网络技术的发展，电子商务逐渐走进人们生活，成为其中必不可少的一部分，鲜花的网购也逐渐被人们接受。我们的目的是建立一个专业、简洁、高效的鲜花销售网站，为消费者提供

6、给为便捷的服务。 我们网站的各页面的功能如下：首页：综合介绍本网站信息鲜花：描述本网站鲜花基本信息礼品：描述本网站礼品基本信息后台：实现用户的注册与登录会员头像、照片的上传会员：会员明细、会员头像、照片的上传留言： 介绍本网站的相关信息、售后等等联系我们：本公司的QQ、邮箱、联系电话我所做的模块首页，登录注册页面以及后期网站整合和风格统一（1）、登陆页面（由本人和共同完成）：功能：登陆页面，可以实现购买、上传照片或文字的功能。登录出错会对用户提醒，登录成功会自动跳转到首页。登陆页面的源代码：My JSP index.jsp starting page 欢迎登录本网站! 用户名：密码：(还没注册

7、？)（2）、注册（由本人和杨洸共同完成）：功能：成为我们会员的第一步，注册失败会对用户进行提醒并重新注册。注册成功后，会将用户信息写入数据库并跳转到登陆界面。（输入密码时提醒密码设置不得少于6位）注册页面的源代码：My JSP index.jsp starting pagefunction check()var f=document.form1;if(f.user_name.value=)alert(账户名不可以为空!);f.user_name.focus();return false;if(f.user_pwd.value=|f.user_pwd.value.length6)alert(密码

8、至少6位!);f.user_pwd.focus();return false;return true;欢迎注册本网站!form name=form1 method=post action=reg_chek.jsp账户密码 （3）首页： 功能：对网站的整体介绍和广告以及通向各级子网页的链接。实现过程：本次的首页是由本人独立完成，6天之中一共做了3个首页的模板。我的第一个首页作出来之后并不好看，没有吸引人的特点，图片没有和网站整体风格相容。 于是，我又设计了第二个首页模板，此次使用框架建设首页，主要分为头部，左侧导航栏以及主题。首页分为三个窗口。第一个位本网站的logo，和广告。第二个为导航栏，为

9、各个连接。第三个为主窗口，显示各个子网页。但是出来的效果并不漂亮，没有鲜花网应有的大方，典雅反而有点呆板和严肃。有了前两次的经验，第三个网页我采用了表格来制作。同时整体网页用白色做底色来突出鲜花的魅力。首页分为三个部分，头部，中间，尾部。头部：分为三层，第一层为用户区，用户可以在此登录，查询常见问题，配送范围，付款方式等等。第二层为本网站的logo和宣传口号。第三层为通向各级子页面的链接。本网站主要有鲜花区，礼品区，会员区三大块。中间：主要是大幅的活动广告图片和促销图片。之后是各种各样的新品花朵的展示。每一个展示图片都是连接，可以直接连接到具体的商品。尾部：是我们网站的服务宗旨，承诺及合作伙伴

10、等等。网站的头部和尾部位共用部分，方便在后期的整合上统一用相同的头部和尾部从而实现网站风格的一致。我们首页内容精彩丰富，简洁明快，语言风趣，通俗易懂。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。而且制作过程中，不忘以下原则：简洁实用: 这是非常重要的，网络特殊环境下

11、，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档 次。当然雅俗共赏是人人都追求的。利用我们所学的框架集，制作更完美的页面。将动态网页与静态网页结合起来再后，调试过程，好多次本来在dream里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，很不老实，经过再三调试，整理，加了好多表格，终于满意了，很是麻烦，想请问老师，为什么会出现这种情况啊，

12、还有怎么解决啊，不用这么反复调整的办法，还有什么好办法啊？还有，在最超链接过程中，明明在页面属性里设置的是超链接的文字是原色，点击链接后也是原色，可一链接上就变色了，想了老半天，也做了很多研究，实验，终于知道怎么回事了，原来应该对文字所在的单元格整体做链接，而不是只选中文字做链接。还有，这次的网站大部分用的是表格，层用的很少，因为它太灵活了，不好控制，用的很少。再后，是网页的上传与发布，用ftp将制作好的网站上传制作过程中，才发现，原来自己懂的太少了，好多不知道的地方，才赶紧查书，开始的时候只是会建立模版，可不会应用，操作，可这样要修改模版可就麻烦了，要一个网页一个的修改，于是赶紧上网学习相关

13、内容，阅览书籍，最后才知道文件这有个资源，点击进入资源面板，点击到数第二个的模版，选项，所有模版就都显示了，点击资源面板左下角的应用命令，好了，这个模版就应用到你建立的网页中去了。这只是在制作过程中出现的问题之一，其它问题也是类似相同。现在想想，自己所会的东西太少了，现在做的网站只是一些简单的网站，看到了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。需在加以刻苦钻研及学习，不断开拓视野，增强自己的实习操作

14、技能，为以后能做出出色的网页而努力。同学告诉我，要做好网页，一定要学从C+,JAVA,php，asp，数据库。以后要学的实在是太多了，而且我也很喜欢这方面，在以后的日子里，会努力填充自己，丰富自己的。希望以后有不懂的地方，老师能多多指点。首页代码： base href= My JSP index.jsp starting page !- -#floater position: absolute;left: 9px;top: 146;width: 125;visibility: visible;z-index: 10; 欢迎 登录本网站! self.onError=null;currentX =

15、 currentY = 0;whichIt = null;lastScrollX = 0; lastScrollY = 0;NS = (document.layers) ? 1 : 0;IE = (document.all) ? 1: 0;function heartBeat() if(IE) diffY = document.body.scrollTop; diffX = document.body.scrollLeft; if(NS) diffY = self.pageYOffset; diffX = self.pageXOffset; if(diffY != lastScrollY) p

16、ercent = .1 * (diffY - lastScrollY);if(percent 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.floater.style.pixelTop += percent;if(NS) document.floater.top += percent; lastScrollY = lastScrollY + percent;if(diffX != lastScrollX) percent = .1 * (diffX - lastScr

17、ollX);if(percent 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.floater.style.pixelLeft += percent;if(NS) document.floater.left += percent;lastScrollX = lastScrollX + percent;function checkFocus(x,y) stalkerx = document.floater.pageX;stalkery = document.floate

18、r.pageY;stalkerwidth = document.floater.clip.width;stalkerheight = document.floater.clip.height;if( (x stalkerx & x stalkery & y (stalkery+stalkerheight) return true;else return false;function grabIt(e) if(IE) whichIt = event.srcElement;while (whichIt.id.indexOf(floater) = -1) whichIt = whichIt.pare

19、ntElement;if (whichIt = null) return true; whichIt.style.pixelLeft = whichIt.offsetLeft;whichIt.style.pixelTop = whichIt.offsetTop;currentX = (event.clientX + document.body.scrollLeft);currentY = (event.clientY + document.body.scrollTop); else window.captureEvents(Event.MOUSEMOVE);if(checkFocus (e.p

20、ageX,e.pageY) whichIt = document.floater;StalkerTouchedX = e.pageX-document.floater.pageX;StalkerTouchedY = e.pageY-document.floater.pageY; return true;function moveIt(e) if (whichIt = null) return false; if(IE) newX = (event.clientX + document.body.scrollLeft);newY = (event.clientY + document.body.scrollTop);distanceX = (newX - currentX); distanceY = (newY - currentY);currentX = newX; currentY = newY;whichIt.style.pixelLeft += distan