web婚纱摄影网页课程设计 .doc
WEB开发使用教程课程设计报告题目：婚纱摄影目录目录2摘要31 需求分析42 系统设计42.1 系统目标42.2 关键技术53 设计与实现64 代码实现104.1 主页面代码104.2 浏览器窗口内漂浮的图片代码实现124.3注册登录页面设计134.4图片自动切换代码设计135 实验总结166 参考文献17 摘要 随着人们的生活水平的提高，人们对婚纱摄影的要求也越来越高，婚礼不仅是一个仪式，更是一段精神享受历程。世界各地各有各的美妙，各有各的精彩到处都充满着浪漫气息，我们的婚纱摄影网站详细的介绍了业务服务地区及各色套餐。这个网站方便新人挑选自己心仪的婚纱拍摄地点及婚纱款式，甄选适合自己的套餐。关键词：婚纱摄影、web、 html、网站1 需求分析婚纱摄影借助互联网，能够解决传统婚纱摄影实体店不能解决的信息跨地区推广问题；同时还由于婚纱摄影也作为一个整体的商业生态链，涉及到旅行服务机构、酒店、景区、交通等等，利用互联网可以将这些环节连成一个统一的整体，进而可以大大提高服务的水平和业务的来源。一方面，互联网为婚纱摄影宣传提供新的机遇及提高服务水平和运作水平的手段，另一方面，大多数没有开展网上业务的中小型婚纱摄影则面临严峻的挑战。网站系统解决方案提供商必须有足够的能力和经验帮助广大中小型的婚纱摄影走上电子商务的道路，同时，其提供的解决方案还必须能够同时满足复杂的B2B和B2C需求，并在稳定性、可用性、可管理性等方面具有优势。2 系统设计2.1 系统目标 1、网站主要功能模块（1）优美案例：介绍网站婚纱摄影的成功案例，提供基础婚纱摄影资料，提高品牌知名度。（2）婚纱展示：展示了一些具体的婚纱款式及价格，方便用户选购。（3）优惠套餐：提供了两种价格及其优惠的套餐活动，方便新人选购适合自己的风格。（4）关于我们：包含了网站建设以来的发展状况，业务人员水平等信息。（5）联系方式：公布了网站的联系方式，办公地点等基本信息，方便用户了解公司。（6）摄影风采：罗列了以往的经典样片，展示了摄影水平能力，有助于用户了解公司业务能力2、站点结构导航图 2.2 关键技术1.html超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果2.javascript javascript是一种轻量级的编程语言，可以嵌入到html页面中，由来浏览器来解释执行，用来实现浏览器和用于交互。 javascript是一种基于对象和事件驱动的客户端脚本语言，他可以在用户浏览器为网页添加一些动态效果，和用户交互，响应用户操作。 javascript可以用来帮助减轻服务器的压力，例如在客户端完成数据校验。 特点： (1).解释性脚本语言，javascript不需要编译，只需要嵌入到html代码中，由浏览器逐行加载解释执行。 (2).javascript是一种基于对象的语言，使用已经创建好的对象来，和面向对象的先锋需设计语言不同，javascript并不支持继承和重载。 (3).语言简单，弱类型，语法和java,C语言类似，变量不需要声明和指定类型即可使用，是一种弱类型语言。 (4).javascript语言相对来说比较安全，仅由浏览器执行，不允许javascript访问本地硬盘，以及操作服务器上的数据，只用来显示浏览器的网页效果和实时交互。 ( 5).动态性，使用javascript可以在前端实现一些和服务器完全没有联系的效果，javascript采用事件驱动的方式进行，html页面的相关控件的相关事件在处触发的时候会自动执行响应的脚本或者函数。(6).运行环境一般来说是浏览器，只需要浏览器支持即可，如果不支持（或者用户禁用了javascript），浏览器会忽略掉这些javascript代码。3.DIV+CSS DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。css是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。3 设计与实现根据上述的分析以及模块化程序设计要求，设计出如下图所示的功能模块页面图 图3-1 婚纱摄影首页展示 图3-2 婚纱销售页面展示 图3-3 优惠套餐页面展示图3-4 关于我们页面展示图3-5摄影风采展示图3-6优美案例展示图3-7联系我们页面4 代码实现 4.1 主页面代码#box1width:1330px;height:280em;padding:0;border:0px solid;margin:5px atuo;#box2width:1330px;height:10em;padding:1;border:0px solid;margin-top:0px;background-image:url(./5.jpg); background-size:100% 100%; background-position:center;#box3width:1000px;height:3em;padding:1;border:0px solid;margin-top:5px;margin-left:165px;#box3 ul padding:0px; margin:0px; list-style-type:none; #box3 ul li position:relative; float:left; width:160px; height:30px; border:1px solid white; border-width:1px 1px 0 0; line-height:30px; text-align:center; background-color:#cca; #box3 ul li ul display:none; #box3 ul li:hover ul display:block; position:absolute; top:30px; left:0px; width:160px; #box3 a display:block; text-decoration:none; color:olive; background-color:#fec;#box3 a:hovercolor:red;background-color:#dc8;<div id="box3"> <ul> <li>优美案例 <ul> <li><a href="#middle1">上海外滩</a></li> <li><a href="#middle2">爱琴海</a></li> <li><a href="#middle3">巴厘岛</a></li> </ul> </li><li>婚纱展示 <ul> <li><a href="3.html"target="_blank">婚纱销售</a></li> </ul></li><li>优惠套餐 <ul> <li><a href="5.html"target="_blank">朱颜倾城</a></li> <li><a href="6.html"target="_blank">小小新娘</a></li> </ul></li><li><a href="7.html"target="_blank">关于我们</a></li><li><a href="2.html"target="_blank">联系方式</a></li><li><a href="4.html"target="_blank">摄影风采</a></li> </ul></div>4.2 浏览器窗口内漂浮的图片代码实现 <div id="divAd" style="position: absolute;"> <a href=""><img src="40.jpg" alt="" width=120px height=60px/></a> </div> <script type="text/javascript"> var x=50,y=60; var step=1; var speed=10; var divElement=ementById("divAd"); var moveRight=true; var leftBound=0; var rightBound=tWidth; var moveDown=true; var topBound=0; var bottomBound=tHeight; function resizeHandler() clearInterval(timerID); rightBound=tWidth; bottomBound=tHeight; timerID=setInterval("moveAdvertisement()",speed); function moveAdvertisement() .left=x+"px" x=x+step*(moveRight?1:-1); if (x>rightBound) moveRight=false; else if (x<leftBound) moveRight=true; .top=y+"px" y=y+step*(moveDown?1:-1); if(y>bottomBound) moveDown=false; else if (y<topBound) moveDown=true; VartimerID=setInterval("moveAdvertisement()",speed); seover()=function() timerID=setInterval("moveAdvertisement()",speed); </script>4.3注册登录页面设计<script type="text/javascript">function contatenateText(thisForm)alert(_+.value);</script><form action="3.html"onsubmit="contatenateText(this)">登录名：<input type="text"name="login_name"value="abc">密码：<input type="password"name="pwd"value="123"><input type="submit"value="登录购买"/><input type="reset"value="重置信息"/></form>4.4图片自动切换代码设计<script type="text/javascript"> var pictureBoxWidth=600; /图片框宽度 var pictureBoxHeight=500; /图片框高度 var imgSrc=new Array("25.jpg","26.jpg","27.jpg","28.jpg");/图片 var aHref="","","","",""/图片超链接 var interval=2000;/每张图片延时时间（ms） var pictureIndex=0;/将要显示的图片编号 var imgElement=ementById("pic");/获取插入图片的img元素 var aElement=ementById("linkURL");/获取土坯昂上的超链接a元素 function init()/load时间处理函数 /设置图片框宽度和高度 var divElement=ementById("pictureBox"); .width=pictureBoxWidth+"px" .height=pictureBoxHeight+"px" /设置图片的宽度和高度 .width=pictureBoxWidth+"px" .height=pictureBoxHeight+"px" function autoChangePicture(pictureID) =imgSrcpictureID;/更换图片 =aHrefpictureID;/更换图片超链接 pictureIndex=(pictureID+1)%4; autoChangePicture(pictureIndex); /每隔interval毫秒调用一次autoChangePicture函数 var timerID=setInterval("autoChangePicture(pictureIndex)",interval); /鼠标滑过图片时，暂停图片切换 seover=function()clearInterval(timerID); /鼠标离开图片时，继续图片自动切换 seout=function()timerID= setInterval("autoChangePicture(pictureIndex)",interval);</script> 5 实验总结通过这次的课程设计，我们对网页制作有了更深层次的了解。这次的课程设计其实并没有我们想象中的难，如果我们做到了对课本上所学知识的灵活运用，许多问题都会迎刃而解。婚纱摄影网站页面课程设计基本功能已经实现，测试运行也完全正常。该网站易于使用，便于操作，用户界面明朗。在课程设计的初期阶段，我们学习了与本课题相关的理论知识，通过翻阅课本和上网查询有关内容，浏览成熟的网页布局设计，我将它应用于婚纱摄影网站中，并且按照婚纱摄影网站的具体要求进行了很多改造。它在这个阶段，由于经验不足和对开发工具的陌生，婚纱摄影网站设计遇到了很多大大小小的问题，在一次次克服困难的过程中，我收获了很多，在这段时间里我学到了很多以前没有学到的知识，同时也将以前所学过的知识运用到实践项目中，在提高理论知识的基础上，也充分地锻炼了动手能力。这次课程设计的时间虽然不算太长，但使我对很多东西有了更深刻的认识，为我们今后的学习提供了更宝贵的经验。6 参考文献1 崔敬东、徐雷. Web标准网页设计原理与制作技术,清华大学出版社，2014.2 刘增杰等. 精通HTML5+CSS3+JavaScript网页设计, 清华大学出版社，2012.8.3 赵锋. 网页设计与制作（第二版）, 清华大学出版社，2013.4 吴代文. 网站建设与管理基础及实训, 清华大学出版社，2013.5 Julie Meloni. HTML、CSS和JavaScript入门经典（第2版）， 人民邮电出版社，2015.12.6 HTML模版下载网站：.cn
