web婚纱摄影网页课程设计

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

3、时满足复杂的 B2B 和 B2C 需求，并在稳定性、可用性、可 管理性等方面具有优势。2 系统设计2.1 系统目标1、网站主要功能模块（1）优美案例：介绍网站婚纱摄影的成功案例，提供基础婚纱摄影资料， 提高品牌知名度。（2）婚纱展示：展示了一些具体的婚纱款式及价格，方便用户选购。（3）优惠套餐：提供了两种价格及其优惠的套餐活动，方便新人选购适合 自己的风格。（4）关于我们：包含了网站建设以来的发展状况，业务人员水平等信息。（5）联系方式：公布了网站的联系方式，办公地点等基本信息，方便用户 了解公司。（6）摄影风采：罗列了以往的经典样片，展示了摄影水平能力，有助于用 户了解公司业务能力2、站点结

4、构导航图优美案例先于费们分页婚纱展示2.2 关键技术1. html超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种 标准， 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一 种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内 容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读 网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指 出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因 和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完 全相同的解释，因而可能会有不同的显

5、示效果2. javascriptjavascript是一种轻量级的编程语言，可以嵌入到html页面中，由来浏览 器来解释执行，用来实现浏览器和用于交互。javascript是一种基于对象和事 件驱动的客户端脚本语言，他可以在用户浏览器为网页添加一些动态效果，和用 户交互，响应用户操作。javascript可以用来帮助减轻服务器的压力，例如在 客户端完成数据校验。特点：(1) .解释性脚本语言，javascript不需要编译，只需要嵌入到html代码中， 由浏览器逐行加载解释执行。(2) .javascript 是一种基于对象的语言，使用已经创建好的对象来，和面 向对象的先锋需设计语言不同，ja

6、vascript并不支持继承和重载。(3) .语言简单，弱类型，语法和java,C语言类似，变量不需要声明和指定 类型即可使用，是一种弱类型语言。(4) .javascript 语言相对来说比较安全，仅由浏览器执行，不允许 javascript 访问本地硬盘，以及操作服务器上的数据，只用来显示浏览器的网 页效果和实时交互。(5) .动态性，使用javascript可以在前端实现一些和服务器完全没有联系 的效果，javascript采用事件驱动的方式进行，html页面的相关控件的相关事 件在处触发的时候会自动执行响应的脚本或者函数。(6) .运行环境一般来说是浏览器，只需要浏览器支持即可，如果不

7、支持(或 者用户禁用了 javascript)，浏览器会忽略掉这些javascript代码。3. DIV+CSSDIV+CSS 是 WEB 设计标准，它是一种网页的布局方法。与传统中通过表格 (t able)布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起 DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML (标准通用标记语言的 子集)基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力, 适应未来网络应用更多的需求。css是层叠样式表(Cascading Style Sheets)的缩写，用于定义HTML元 素的显示形式，是W3C推出的格式化网页内

8、容的标准技术。网页设计者必须掌握 的技术之一。样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内 可以同时使用三种方法。div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo, 降低网页大小，让网页体积变得更小。div+css结构清晰、精简，不意味着 可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了head 之上及body之上及之外，其它全是div，就如同整个HTML是一万个毫不 相干的内容拼装起来，或者通篇是divulli结构的，就如同这个页面 所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了 “DIV+CSS”的 真实含义，也许

9、根本就不应该有这个说法，因为一个完整页面几乎不可 能仅仅 DIV+CSS就能完成。3 设计与实现根据上述的分析以及模块化程序设计要求，设计出如下图所示的功能模块页面图蚌RA I-隔关于囱i张鞭料愛卑受的膿十里洋場外灘霸杜确了赭就卿,粋譌勰5,帝蹄駅I亂务制扫瀚,89瞒斓|轴诙IWh聽碣陀肚即寂暉關I删因jJlDO HWY GOODE rD k CUO1 Fii gi4 肿 厲 曲M 崗观地H 戚IQlWll 旣 Zl序K.站LNiK讥予讯打HOi当吧闻HjfflT kJ虧卫出曲人肓廿丄叮唸閉何旳站下师*宇宙曲i sft-閃利门肮1用汕好丁凤4.n ERE L111L HE AT HAST 2

10、TIMES 区1R LFR.1IMEHJJ!IXIVLHKA1DL1&.& rUSlKUlklWLREl5U1I DU囲THMIL10800图 3-1 婚纱摄影首页展示f身蛊斟诡趙，m导常户團養生由培休曜敖噩-蛊牌臥窖常求进时咗尹剧那.视作朝剧瘵 和灵D曙伊齿懷唏剧作老繭时.取雪耒 临工瘾收氣眾疇伊貞品制作党武冶，成啧警锂孰煤 滋您蠹可衣金人4曲歩盘。空顏參就別晞窃店.峯褪址捋噹总回请。 若尺吗N协身，可覚赞畜籲字坟址块尺图 3-2 婚纱销售页面展示图 3-3 优惠套餐页面展示关于酬読恼司由-騁麹影并賄多斩业鱷的有活九时尚解轻膜仏专业从鞍骗前业的连锁貓发艇路既 牆多年耕鼠歩軌真稳戲気苦中国婚纱

11、疆帝业躺较强觴响九 題内领先的勧翳品碟连龜的办沁山轴我们坚持以必本朋务理盘 储地网精真關服务，轆騎U注化粘，-肝的专属鵰创作团曲館 删 消翹竄我皿坚强駝打造鞠歸妙也馳恳心灵呈殲幅鯛爱漏融料M记录我憤初的感机鞠勰 追求时搐 轄*也 齣唯気是-融爱生敬后年臥炯肌用赵记就帕青蒂超下躺脚认定歸麴瞬 同；聰馳艺欖言来鉀輛，觸麺，完成自酥肌不肚摊,更是灿灵的超曲在新人的笑容中鬭存翻 虜訓毎-烦黠是挟是懾雕铀美：棘敝01号山东交通学底图3-4关于我们页面展示图 3-5 摄影风采展示图 3-6 优美案例展示值班热线:010-12345678-2345传真电话：010-12345678产齬服务热线;010-23

12、456789公司办公地址：山东省济南市长清区海棠路5001号山东交通学院图 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;#box3w

13、idth: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; backgr

14、ound-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;优美案例上海外滩 爱琴海 巴厘岛 婚纱展示 婚纱销售 优惠套餐 朱颜倾城 a href=6.h tml tar