web开发使用教程课程设计报告web婚纱摄影网页设计_第1页
web开发使用教程课程设计报告web婚纱摄影网页设计_第2页
web开发使用教程课程设计报告web婚纱摄影网页设计_第3页
web开发使用教程课程设计报告web婚纱摄影网页设计_第4页
web开发使用教程课程设计报告web婚纱摄影网页设计_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、 WEB开发使用教程课程设计报告题目：婚纱摄影目录目录2摘要31 需求分析42 系统设计42.1 系统目标42.2 关键技术53 设计与实现64 代码实现104.1 主页面代码104.2 浏览器窗口内漂浮的图片代码实现12注册登录页面设计13图片自动切换代码设计135 实验总结166 参考文献17 摘要 随着人们的生活水平的提高，人们对婚纱摄影的要求也越来越高，婚礼不仅是一个仪式，更是一段精神享受历程。世界各地各有各的美妙，各有各的精彩到处都充满着浪漫气息，我们的婚纱摄影网站详细的介绍了业务效劳地区及各色套餐。这个网站方便新人挑选自己心仪的婚纱拍摄地点及婚纱款式，甄选适合自己的套餐。关键词：婚

2、纱摄影、web、 html、网站1 需求分析婚纱摄影借助互联网，能够解决传统婚纱摄影实体店不能解决的信息跨地区推广问题；同时还由于婚纱摄影也作为一个整体的商业生态链，涉及到旅行效劳机构、酒店、景区、交通等等，利用互联网可以将这些环节连成一个统一的整体，进而可以大大提高效劳的水平和业务的来源。一方面，互联网为婚纱摄影宣传提供新的机遇及提高效劳水平和运作水平的手段，另一方面，大多数没有开展网上业务的中小型婚纱摄影那么面临严峻的挑战。网站系统解决方案提供商必须有足够的能力和经验帮助广阔中小型的婚纱摄影走上电子商务的道路，同时，其提供的解决方案还必须能够同时满足复杂的B2B和B2C需求，并在稳定性、可

3、用性、可管理性等方面具有优势。2 系统设计2.1 系统目标 1、网站主要功能模块1优美案例：介绍网站婚纱摄影的成功案例，提供根底婚纱摄影资料，提高品牌知名度。2婚纱展示：展示了一些具体的婚纱款式及价格，方便用户选购。3优惠套餐：提供了两种价格及其优惠的套餐活动，方便新人选购适合自己的风格。4关于我们：包含了网站建设以来的开展状况，业务人员水平等信息。5联系方式：公布了网站的联系方式，办公地点等根本信息，方便用户了解公司。6摄影风采：罗列了以往的经典样片，展示了摄影水平能力，有助于用户了解公司业务能力2、站点结构导航图 2.2 关键技术超级文本标记语言是标准通用标记语言下的一个应用，也是一种标准

4、，一种标准， 它通过标记符号来标记要显示的网页中的各个局部。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容如：文字如何处理，画面如何安排，图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果 javascript是一种轻量级的编程语言，可以嵌入到html页面中，由来浏览器来解释执行，用来实现浏览器和用于交互。 jav

5、ascript是一种基于对象和事件驱动的客户端脚本语言，他可以在用户浏览器为网页添加一些动态效果，和用户交互，响应用户操作。 javascript可以用来帮助减轻效劳器的压力，例如在客户端完成数据校验。 特点： (1).解释性脚本语言，javascript不需要编译，只需要嵌入到html代码中，由浏览器逐行加载解释执行。 (2).javascript是一种基于对象的语言，使用已经创立好的对象来，和面向对象的先锋需设计语言不同，javascript并不支持继承和重载。 (3).语言简单，弱类型，语法和java,C语言类似，变量不需要声明和指定类型即可使用，是一种弱类型语言。 (4).javasc

6、ript语言相对来说比拟平安，仅由浏览器执行，不允许javascript访问本地硬盘，以及操作效劳器上的数据，只用来显示浏览器的网页效果和实时交互。 ( 5).动态性，使用javascript可以在前端实现一些和效劳器完全没有联系的效果，javascript采用事件驱动的方式进行，html页面的相关控件的相关事件在处触发的时候会自动执行响应的脚本或者函数。(6).运行环境一般来说是浏览器，只需要浏览器支持即可，如果不支持或者用户禁用了javascript，浏览器会忽略掉这些javascript代码。+CSS DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格table布局

7、定位的方式不同，它可以实现网页页面内容与表现相别离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML标准通用标记语言的子集根底上优化和改良的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。css是层叠样式表Cascading Style Sheets的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变

8、得更小。div+css结构清晰、精简，不意味着可以全部用div+css结构，比方通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。3 设计与实现根据上述的分析以及模块化程序设计要求，设计出如下列图所示的功能

9、模块页面图 图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:1

10、00% 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;

11、 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:#d

12、c8;<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> </

13、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.htm

14、l"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.h

15、tml"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

16、> <script type="text/javascript"> var x=50,y=60; var step=1; var speed=10; var divElement=("divAd"); var moveRight=true; var leftBound=0; var rightBound=document.documentElement.clientWidth-divElement.offsetWidth; var moveDown=true; var topBound=0; varvElement.offsetHeig

17、ht; function resizeHandler() clearInterval(timerID); rightBound=document.documentElement.clientWidth-divElement.offsetWidth; bottomBound=document.documentElement.clientHeight-divElement.offsetHeight; timerID=setInterval("moveAdvertisement()",speed); function moveAdvertisement() =x+"px

18、" x=x+step*(moveRight?1:-1); if (x>rightBound) moveRight=false; else if (x<leftBound) moveRight=true; =y+"px" y=y+step*(moveDown?1:-1); if(y>bottomBound) moveDown=false; else if (y<topBound) moveDown=true; VartimerID=setInterval("moveAdvertisement()",speed); ()=f

19、unction() timerID=setInterval("moveAdvertisement()",speed); </script>注册登录页面设计<script type="text/javascript">function contatenateText(thisForm)alert(alue);</script><form action="3.html"onsubmit="contatenateText(this)">登录名：<input type=

20、"text"name="login_name"value="abc">密码：<input type="password"name="pwd"value="123"><input type="submit"value="登录购置"/><input type="reset"value="重置信息"/></form>图片自动切换代码设计<scr

21、ipt type="text/javascript"> var pictureBoxWidth=600; /图片框宽度 var pictureBoxHeight=500; /图片框高度 var imgSrc=new Array("25.jpg","26.jpg","27.jpg","28.jpg");/图片 var aHref="","","","",""/图片超链接 var interva

22、l=2000;/每张图片延时时间ms var pictureIndex=0;/将要显示的图片编号 var imgElement=("pic");/获取插入图片的img元素 var aElement=("linkURL");/获取土坯昂上的超链接a元素 function init()/load时间处理函数 /设置图片框宽度和高度 var divElement=("pictureBox"); =pictureBoxWidth+"px" =pictureBoxHeight+"px" /设置图片的宽度和

23、高度 =pictureBoxWidth+"px" =pictureBoxHeight+"px" function autoChangePicture(pictureID) =imgSrcpictureID;/更换图片 =aHrefpictureID;/更换图片超链接 pictureIndex=(pictureID+1)%4; autoChangePicture(pictureIndex); /每隔interval毫秒调用一次autoChangePicture函数 var timerID=setInterval("autoChangePicture(pictureIndex)",interval); /鼠标滑过图片时，暂停图片切换 =function()clearInterval(timerID); /鼠

人人文库> 全部分类> 专业文献 > 工程机械

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论