《web婚纱摄影网页课程设计资料》由会员分享，可在线阅读，更多相关《web婚纱摄影网页课程设计资料（17页珍藏版）》请在金锄头文库上搜索。
1、 WEB开发使用教程课程设计报告题目：婚纱摄影目录目录2摘要31 需求分析42 系统设计42.1 系统目标42.2 关键技术53 设计与实现64 代码实现104.1 主页面代码104.2 浏览器窗口内漂浮的图片代码实现124.3注册登录页面设计134.4图片自动切换代码设计135 实验总结166 参考文献17 摘要 随着人们的生活水平的提高，人们对婚纱摄影的要求也越来越高，婚礼不仅是一个仪式，更是一段精神享受历程。世界各地各有各的美妙，各有各的精彩到处都充满着浪漫气息，我们的婚纱摄影网站详细的介绍了业务服务地区及各色套餐。这个网站方便新人挑选自己心仪的婚纱拍摄地点及婚纱款式，甄选适合自己的套餐
2、。关键词：婚纱摄影、web、 html、网站1 需求分析婚纱摄影借助互联网，能够解决传统婚纱摄影实体店不能解决的信息跨地区推广问题；同时还由于婚纱摄影也作为一个整体的商业生态链，涉及到旅行服务机构、酒店、景区、交通等等，利用互联网可以将这些环节连成一个统一的整体，进而可以大大提高服务的水平和业务的来源。一方面，互联网为婚纱摄影宣传提供新的机遇及提高服务水平和运作水平的手段，另一方面，大多数没有开展网上业务的中小型婚纱摄影则面临严峻的挑战。网站系统解决方案提供商必须有足够的能力和经验帮助广大中小型的婚纱摄影走上电子商务的道路，同时，其提供的解决方案还必须能够同时满足复杂的B2B和B2C需求，并在
3、稳定性、可用性、可管理性等方面具有优势。2 系统设计2.1 系统目标 1、网站主要功能模块（1）优美案例：介绍网站婚纱摄影的成功案例，提供基础婚纱摄影资料，提高品牌知名度。（2）婚纱展示：展示了一些具体的婚纱款式及价格，方便用户选购。（3）优惠套餐：提供了两种价格及其优惠的套餐活动，方便新人选购适合自己的风格。（4）关于我们：包含了网站建设以来的发展状况，业务人员水平等信息。（5）联系方式：公布了网站的联系方式，办公地点等基本信息，方便用户了解公司。（6）摄影风采：罗列了以往的经典样片，展示了摄影水平能力，有助于用户了解公司业务能力2、站点结构导航图 2.2 关键技术1.html超级文本标记语
4、言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果2.javascript javascript是一种轻量级的编程语言，可以嵌入到html页
5、面中，由来浏览器来解释执行，用来实现浏览器和用于交互。 javascript是一种基于对象和事件驱动的客户端脚本语言，他可以在用户浏览器为网页添加一些动态效果，和用户交互，响应用户操作。 javascript可以用来帮助减轻服务器的压力，例如在客户端完成数据校验。 特点： (1).解释性脚本语言，javascript不需要编译，只需要嵌入到html代码中，由浏览器逐行加载解释执行。 (2).javascript是一种基于对象的语言，使用已经创建好的对象来，和面向对象的先锋需设计语言不同，javascript并不支持继承和重载。 (3).语言简单，弱类型，语法和java,C语言类似，变量不需要声
6、明和指定类型即可使用，是一种弱类型语言。 (4).javascript语言相对来说比较安全，仅由浏览器执行，不允许javascript访问本地硬盘，以及操作服务器上的数据，只用来显示浏览器的网页效果和实时交互。 ( 5).动态性，使用javascript可以在前端实现一些和服务器完全没有联系的效果，javascript采用事件驱动的方式进行，html页面的相关控件的相关事件在处触发的时候会自动执行响应的脚本或者函数。(6).运行环境一般来说是浏览器，只需要浏览器支持即可，如果不支持（或者用户禁用了javascript），浏览器会忽略掉这些javascript代码。3.DIV+CSS DIV+C
7、SS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。css是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。div+c
8、ss结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了之上及之上及之外，其它全是，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。3 设计与实现根据上述的分析以及模块化程序设计要求，设计出如下图所示的功能模块页面图 图3-1 婚纱摄影首页展示 图3
9、-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-p
10、osition: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; tex
11、t-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; 优美案例 上海外滩 爱琴海 巴厘岛
12、婚纱展示 婚纱销售 优惠套餐 朱颜倾城 小小新娘 关于我们联系方式摄影风采 4.2 浏览器窗口内漂浮的图片代码实现 var x=50,y=60; var step=1; var speed=10; var divElement=document.getElementById(divAd); var moveRight=true; var leftBound=0; var rightBound=document.documentElement.clientWidth-divElement.offsetWidth; var moveDown=true; var topBound=0; var bottomBound=document.documentElement.clientHeight-divElement.offsetHeight;
