浪漫婚纱摄影网站设计与实现的毕业论文.doc

GDGM—QR-03—077-B/1
Guangdong College of Industry & Commerce
毕业综合实践报告
Graduation Synthesis Practice Report
浪漫婚纱摄影网站设计与实现
Design and implementation of romantic wedding photography website
将该封面替换为新的模版

系 别： 计算机工程系
班 级: 14计信2班
学生姓名： 李琴滨
学 号： 1423219
指导老师： 高学勤
完成日期: 2017年5月1日

指导教师评语:
初评成绩：
指导教师签名:
年 月 日
毕业综合实践(设计）评审小组意见:
终评成绩：
组长签章：
年 月 日
备注
GDGM-QR—03—069-B/3
毕业综合实践报告
浪漫婚纱摄影网站设计与实现
系 别： 计算机工程系
班 级： 14计信2班
学生姓名： 李琴滨
学 号： 1423219
指导老师： 高学勤
完成日期： 2017年5月2号

摘要
在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分，网站的发展的速度也非常之快。网站已经可以展示企业形象、介绍产品和服务、体现企业发展战略的重要途径。所以在全球信息技术和互联网经济的高速发展，更多人通过互联网来丰富自己的生活和提高生活质量、享受生活。
浪漫婚纱摄影网站就是通过互联网对外宣传自己企业的摄影服务和宣传企业的婚纱品牌。，这样就能很好向他人其他介绍企业不同美景的婚纱摄影，吸引更多人为了纪念两个人的幸福的婚纱照来拍摄属于自己的一系列套婚纱照,这样就能达到了企业摄影的活动服务等等.
浪漫婚纱摄影网站通过Dreamweaver CS6制作网站，网站简洁大方，界面美观简洁。，能让用户产生视觉上的放松。使用Photoshop处理图像和制作logo等等，令图片更加生动逼真。网站添加了JavaScript特效和应用jQuery特效，使得页面更加生动、活泼，富有感染力。使用div+css能够使网站导航清晰，布局简单却不单调，让网页能够一目了然，方便快捷.
关键词:浪漫婚纱摄影网站 Dreamweaver CS6 JavaScript JQuery
目 录(将正文中的标题序号编码方式重新修改为论文要求的格式，并更新目录）
一、 绪论 2
（1） 婚纱摄影行业的现状 2
（2） 课题的来源 2
（3） 课题的意义 2
二、 网站设计思想 3
（1） 开发工具的选用 3
1。 DREAMWEAVER CS6的简介 3
2. ADOBE PHOTOSHOP CS6软件的简介 3
（2） WEB技术 4
1。 HTML介绍 4
2. DIV+CSS 5
3。 JAVASCRIPT 介绍 5
4. JQUERY 6
三、 网站总体分析与设计 6
（1) 网站主题的设计 6
(2） 网站的需求分析 7
（3) 总体布局 8
（4） 网站风格 9
(5） 设计思路 9
（6） 网页设计的配色风格 9
四、 网页的制作与实现 10
（1） 首页设计 10
1. LOGO的制作 12
2。 头部导航的设计 13
3. 图片轮播的实现 15
4. 图片的展示的不同效果 16
5。 在线问答的JS效果 17
6. 预定订单的效果 19
(2) 婚纱礼服的子页面--——露维娅婚纱、奈特丽婚纱、洛维思婚纱、HELLO魔镜 20
（3） 婚纱套系的子页面--—-大观世界、石门公园、百万葵园、沙面美景 22
五、 结束语 23
致 谢 24
参考文献 25

摘要
在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分，网站的发展的速度也非常之快.网站已经可以展示企业形象、介绍产品和服务、体现企业发展战略的重要途径。所以在全球信息技术和互联网经济的高速发展，更多人通过互联网来丰富自己的生活和提高生活质量、享受生活.
浪漫婚纱摄影网站就是通过互联网对外宣传自己企业的摄影服务和宣传企业的婚纱品牌。这样就能很好向其他介绍企业不同美景的婚纱摄影，吸引更多人为了纪念两个人的幸福的婚纱照来拍摄属于自己的一系列套婚纱照，这样就能达到了企业摄影的活动服务等等。
浪漫婚纱摄影网站通过Dreamweaver CS6制作网站，网站简洁大方，界面美观简洁。让用户产生视觉上的放松。使用Photoshop处理图像和制作logo等等，令图片更加生动逼真。网站添加了JavaScript特效和应用jQuery特效，使得页面更加生动、活泼,富有感染力。使用div+css能够使网站导航清晰，布局简单却不单调，让网页能够一目了然，方便快捷.
关键词：浪漫婚纱摄影网站 Dreamweaver CS6 JavaScript JQuery

目录错误！超链接引用无效。毕业综合实践报告 1
错误！超链接引用无效。摘要 2
错误!超链接引用无效。在互联网飞速发展的今天,网络已成为人们生活中不可缺少的一部分，网站的发展的速度也非常之快.网站已经可以展示企业形象、介绍产品和服务、体现企业发展战略的重要途径。所以在全球信息技术和互联网经济的高速发展，更多人通过互联网来丰富自己的生活和提高生活质量、享受生活. 2
错误!超链接引用无效。浪漫婚纱摄影网站就是通过互联网对外宣传自己企业的摄影服务和宣传企业的婚纱品牌，这样就能很好向他人介绍企业不同美景的婚纱摄影，吸引更多人为了纪念两个人的幸福来拍摄属于自己的一系列婚纱照，这样就能达到了企业摄影的活动服务等等。 2
错误！超链接引用无效。浪漫婚纱摄影网站通过DREAMWEAVER CS6制作网站，网站简洁大方，界面美观简洁，能让用户产生视觉上的放松.使用PHOTOSHOP处理图像和制作LOGO等等，令图片更加生动逼真.网站添加了JAVASCRIPT特效和应用JQUERY特效，使得页面更加生动、活泼，富有感染力。使用DIV+CSS使网站导航清晰，布局简单却不单调，让网页能够一目了然，方便快捷。 2
一、 绪论 1
(一） 婚纱摄影行业的现状 1
(二) 课题的来源 1
（三） 课题的意义 1
二、 网站设计思想 2
(一) 开发工具的选用 2
1。 Dreamweaver CS6的简介 2
2. Adobe Photoshop cs6[1］软件的简介 3
（二) Web技术 3
1。 HTML介绍 3
2. DIV+CSS 4
3。 JavaScript 介绍 5
4。 JQuery 5
三、 网站总体分析与设计 6
(一) 网站主题的设计 6
（二） 网站的需求分析 6
（三) 总体布局 7
（四） 网站风格［5] 8
(五） 设计思路 8
（六） 网页设计的配色风格[5］ 8
四、 网页的制作与实现 9
（一) 首页设计 9
1. Logo的制作 11
2。 头部导航的设计 12
3。 图片轮播的实现 13
4. 图片的展示的不同效果[2]［2] 15
5. 在线问答的js效果 16
6。 预定订单的效果 17
(二) 婚纱礼服的子页面———-露维娅婚纱、奈特丽婚纱、洛维思婚纱、HELLO魔镜 19
（三） 婚纱套系的子页面—-—-大观世界、石门公园、百万葵园、沙面美景 20
五、 结束语 22
参考文献 23
致 谢 24
一、 绪论
(一) 婚纱摄影行业的现状
现存的摄影影楼一般由传统照相馆发展而来，从产生到成熟再到发展。上世纪八九十年代照相馆遍布大街小巷，拍摄照片使用的是胶卷式照相机，拍摄成本相当高，婚纱照的拍摄对很多家庭来说还是奢侈品，自从数码相机诞生以来，婚纱摄影的成本就大大降低,而拍摄婚纱照成为人人追求的时尚。
现代婚纱摄影风格丰富和发展了传统的拍摄风格，传统的拍摄风格主要是室内拍摄,而且还是使用简单的背景布，洗出来的照片也大都是样式简单，大同小异,如今，婚纱摄影拍摄采用了内外景结合的拍摄风格,拍摄场景也都是经过精心布置的，拍摄效果更加完美且拍出来的照片更具有艺术性
(二) 课题的来源
随着计算机技术的快速发展,婚纱摄影管理网络化已成为企业影楼管理的必然选择。而目前很多婚纱影楼并没有走上网络化管理道路，这就存在很多不足之处,如因人为因素导致数据丢失而给公司带来很大的经济损失等,而通过婚纱影楼管理系统就可以提高工作效率，无论是给企业还是客户都能带来很大的便利。
随着人们生活水平的不断改善以及人们审美水平不断提高，人们用更加挑剔的眼光来审视美，在20世纪20年代时，西式婚纱摄影就在中国闪亮登场，并以自己独特的魅力逐渐的渗透到中国的婚礼文化之中,新人穿戴婚纱西装拍摄婚纱照,把那一刻的美好时光永远定格，寄托着婚姻的神圣与纯洁。
90年代初期，内地的婚纱影楼商界刮起了一股港台风。出于对美的追求，人们对拍摄新式婚纱照的激情更加高昂。婚纱写真照不仅仅是装饰外在的美丽，更是将夫妻两人的最美好的记忆永远保存下来，回味一生。正因为如此，婚纱产业则得以飞速发展。
(三) 课题的意义
Internet是世界上最大的计算机互联网,作为一种先进的信息检索手段，以惊人的速度发展成为世界上最丰富的资源海洋,所以建设一个优秀的网站对于企业来讲相当重要。随着艺术照时代的兴起,婚纱影楼行业也越来越遭到人们的重视，而传统的婚纱影楼非但管理效率底下,而且缺乏个性化精致服务，所以鉴于此，建设一个婚纱影楼网站是对消费者必不可少的，婚纱影楼网站可以方便人们对婚纱摄影的了解,和方便对人们对婚纱的向往和追求,从而提高婚纱影楼的活动等方面。.增加一下对这个网站的实际功能的描述

二、 网站设计思想
(一) 开发工具的选用
1. Dreamweaver CS6的简介
Dreamweaver CS6是Macromedia 公司开发的可视化网页设计工具，在一个集成的环境中创建管理网站及Internet应用程序。并可用于网络编程人员开发动态网页后台程序.Dreamweaver也是一个可视化的网页设计和网站管理工具，本网站开发以Dreamweaver为基本工具，从最简单的静态文本网页开始,逐步加入文本、图像、表格、排版、动画、框架、表单等Web元素，生成图文并茂的网页；然后将网站和数据库以及服务器脚本结合在一起，制作出复杂的动态网页。
Dreamweaver CS6可以轻而易举地制作出跨操作系统平台， 跨浏览器的充满动感的网页， 是目前制作 Web 页站点， Web 页和 Web应用程序开发的理想工具。 Dreamweaver， Fireworks， Flash 被称为网页制作的“三剑客"，这三款工具相辅相承， 是制作网页的最佳拍档.
Dreamweaver CS6工作区是非常灵活的。因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种:
1) 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似
2) 装载器中包含一些打开和关闭常用检查器和模板的按钮。
3) 对象工具栏包含创建不同类型的对象（例如：图像、表格和层等)的按钮。
4) 属性检查器显示选定对象的属性。
5) 快捷菜单可以使用户当前选择或区域快速执行某些命令.
6) 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。
2. Adobe Photoshop cs6［1]软件的简介
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件，是Adobe公司旗下最为出名的图像处理软件之一。
从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及功能色效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。
图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路;Photoshop提供的绘图工具让外来图像与创意很好地融合。
校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。
特效制作在Photoshop中主要由滤镜、通道及工具综合应用完成.包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop特效完成。Photoshop是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 
1) 文字处理更加方便
2) 图层集使图层管理更有序。
3) 图像的剪切和剪裁比较方便。 
4) 所有工具的选项板会出现在工具选项栏工作区顶部，方便参数的设置。 
5) 可以方便地用路径绘画，丰富的几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使矢量绘图功能得到了加强. 
(二) Web技术
1. HTML介绍
HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言。严格的来讲， HTML 不能算做一门编程语言， 因为它没有自己的数据类型，也没有分支、循环等控制结构。它的设计简单,结构灵活，允许在 Web 浏览器及其它兼容的应用程序中显示文本和图像，并且文档的某些部分可以成为超链接。 完成后把这些文档保存为*。 html 文件， 然后用浏览器打开。 HTML 是网络的通用语言, 一种简单、 通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面, 这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
HTML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。HTML的结构包括头部 (Head)、主体 （Body) 两大部分.头部描述浏览器所需的信息，主体包含所要说明的具体内容。
2. DIV+CSS
DIV+CSS［2]是WEB设计标准，它是一种网页的布局方法.与传统中通过表格（table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集)基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。CSS是层叠样式表(Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术.网页设计者必须掌握的技术之一。
以下DIV+CSS的几点优势:
（1）能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用,避免了使用table表格修改部分页面.
(2)提升了网页访问速度，div+css布局较传统的Table布局比较,减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
(3)采用div—css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取,有利于优化网页。
(4）DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同.
(5)网页不喜欢一个页面有太多的css代码，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法.
（6）CSS的极大优势表现在简洁的代码，对于一个大型网站来说,可以节省大量带宽,而且众所周知，搜索引擎喜欢清洁的代码。
(7)采用CSS布局，同样可以到达所想要的效果.如网站导航中的文字颜色变化、css下拉菜单等。
3. JavaScript 介绍
JavaScript[3]一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用,用来给HTML网页增加动态功能。
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
（1）是一种解释性脚本语言（代码不进行预编译）
（2)主要用来向HTML(标准通用标记语言下的一个应用）页面添加交互行为。
（3)可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
（4） 跨平台特性,在绝大多数浏览器的支持下，可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
4. JQuery
jQuery[5]是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59％使用了jQuery，是目前最受欢迎的JavaScript库。
Query由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手
加入其team，包括来自德国的J＆ouml；rn Zaefferer,罗马尼亚的Stefan Petre等等.jQuery是继prototype之后又一个优秀的Javascript框架.
特点：
（1）动态特效、通过插件来扩展。
（2)方便的工具 - 例如浏览器版本判断。
（3）渐进增强、链式调用.
（4）多浏览器支持。
三、 网站总体分析与设计
(一) 网站主题的设计
规划设计一个网站，首先遇到的问题就是网页定位的主题。一个网页的主题决定了这个网站的主要风格以及这个网站的主要内容。所谓主题也就是网站的题材。至今，人们对于婚纱照的要求越来越高，所以在Internet上建设网站，不仅仅能够提升公司形象，加强客户服务，而且还挖掘更多的潜在客户，获取更高的利润.随着物质和精神生活的提高，婚纱影楼网站是一种空间展示，它的设计不同于一般的作品，所以人们对它的需求越来越高，在互联网上设计婚纱摄影网站会吸引很多顾客的潮流。所以以"‘浪漫'婚纱摄影"作为网站的的主题。
(二) 网站的需求分析
在设计一个的网站时,第一件事就是确定建站目的，然后就是分析该网站功能需求,因为网站的功能强度决定了网站的规模以及投入费用。所以设计网站之前要充分分析和确定这个网站需要实现什么功能和什么效果，这样才能没有浪费精力和财力。所以
主要功能分析的设计的分为以下几点来设计整个网站：
1) 品牌：企业网站形象就是企业的招牌，顾客可以快速了解一个企业的实力以及服务等信息，最好的途径就是访问该公司的网站，所以网站建设的美丽和丰富直接关系到企业的在消费者心中的形象
2) 产品/服务的展示：人们访问网站的主要意图就是更加深入的了解该公司的产品和服务等信息，该婚纱摄影网站的主要功能就是将公司的产品、服务等充分地展示给顾客，从而可以让顾客从多方面，多角度地了解到诸如不同婚纱照的价位、最新优惠活动等信息,这样可以吸引顾客的喜欢和心动!
3) 客户在线服务：通过网站可以很方便快捷地为顾客提供在线服务和帮助信息，如免费电话咨询等，同时顾客也可以通过网上留言的方式提交自己的问题,然后由公司人员进行回应。
4) 动态新闻发布:网站是一个庞大信息库，作为一个强有力的宣传工具企业可以通过网站随时发布一些有利于宣传企业形象、顾客服务和促进销售的企业新闻动态、产品相关信息等.
(三) 总体布局
浪漫婚纱摄影网站
首页
联系我们
婚纱礼服
婚纱作品
外景展示
婚纱套系
婚纱视频

石门公园
沙面美景
百万葵园
大观世界
HELLO魔镜
奈特丽婚
纱

洛维思婚
纱

露
维
娅
婚
纱

15

(四) 网站风格[5］
设计一个网站，首先是将网站规定一个整体的风格：简洁、时尚、浪漫等，一个网站的整体风格会给人们带来视觉享受，减少视觉疲惫感.但是风格也必须与网站的主题相符，信息网站所对应的应该是简洁的风格。所以作为一个资源信息网，我认为页面必须是简洁明了，文字简短易懂,让用户在浏览时能够用最短的时间获取最有用的信息.
设计特征：
（1） 首先用DIV+CSS将首页整个页面布局好，设计网页的基本框架
（2） 网站顶部放上导航，而且将导航固定,随时跳转页面。不必拉到对顶端再跳转。
（3） 网站整体风格以白蓝红为主要色，坚持三色原则。
（4） 页面文字醒目，字体规格统一，尺寸分配不夸张。按钮为浅色背景色
(五) 设计思路
功能突出:一个网站的页面要整洁明目，各种功能要显现出来，主要体现在登录窗口还有导航栏上。
统一整体：网站的整体性统一使人不会在浏览时有障碍感，能够清晰的浏览整个网页的布局.
用色协调：协调的用色使人不会感觉到视觉疲惫，能够长时间的停留和浏览.
形象突出:突出自身行业的特点，还有自家主要的资源，使浏览者能够针对性的寻找。
交互式强：不会仅仅停留在页面上的文字叙述，内置交流功能使能够灵活的沟通。
(六) 网页设计的配色风格［5]
色彩是艺术表现的要素之一。在网页设计中,设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合．搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用.个人博客网主要靠黑色、白色和灰色来让网页更加和谐简洁，一目了然.
四、 网页的制作与实现
(一) 首页设计
1. Logo的制作
Logo的psd制作[1],首先在ps软件先新建220 X 46画布，搜索比较合适的小图片，用ps软件抠出双心的图标。双心的图标作为一个图层，然后用比较有Blackadder ITC的字体制作具有代表性的小logo—-— L&M,L＆M的logo是“浪漫”的拼音缩写的。L＆M又作为一个图层,接下来“广州浪漫婚纱摄影"作为一个图层，“~十大杰出影楼”作为一个图层,几个图层形成了一个完整的Logo。之后保存为.png格式的图片。
2. 头部导航的设计
网站的每一个页面的头部导航的都是一样的，头部导航要设计是固定在屏幕的顶部,要随着页面的滚动,顶部导航不会消失，导航还是会在页面的顶部。
导航设计还有二级导航,在网站上鼠标经过“婚纱礼服”” 婚纱套系”就会出现二级导航的目录。头部导航的div代码
<div class=”head”〉
〈div class="he_content">
〈div class="logo”>〈a href="#”></a〉〈/div〉
〈ul class=”menu">
〈li class="index”><a href=”＃” title="网站首页”>网站首页〈/a></li〉
<li><a href=”＃” title=”联系我们">联系我们〈/a〉〈/li〉
<li><a href="#" title=”婚纱作品">婚纱作品</a></li>
〈li><a href="＃” title=”婚纱礼服">婚纱礼服〈/a>
〈ul class=”submenu”>
〈li〉〈a href="wedding_dress_luweiya。html">露维娅婚纱</a〉〈/li〉
〈li〉<a href="wedding_dress_naiteli.html">奈特丽婚纱</a〉</li〉
<li>〈a href=”wedding_dress_luoweisi。html">洛维思婚纱〈/a〉</li>
<li>〈a href=”wedding_dress_hellomojing.html"〉HELLO魔镜〈/a>〈/li>
〈/ul>
〈/li>
<li>〈a href=”＃” title=”外景展示"〉外景展示〈/a〉</li〉
<li〉<a href=”＃" title="婚纱套系">婚纱套系</a>
〈ul class="submenu">
〈li〉〈a href=”them_show_shijedaguan.html">大观世界</a>〈/li>
<li>〈a href="them_show_shimengongyuan.html”>石门公园〈/a>〈/li〉
〈li〉<a href="them_show_baiwangkuiyuan.html”〉百万葵园</a></li>
〈li〉〈a href=”them_show_shamian.html">沙面美景〈/a〉〈/li〉
〈/ul〉
〈/li〉
<li><a href=”＃” title="婚纱视频”>婚纱视频〈/a></li>
<li〉<a href=”#” title=”最新活动资讯"〉最新活动资讯〈/a〉</li〉
〈/ul>
〈/div〉
〈/div>
</div〉
固定导航条的css代码如下
.head{
width： 100％；
height: 65px；
background—color： #C3A67A；
position： fixed；
z-index: 999;
}
3. 图片轮播的实现
目标：实现几张图片的自动轮播的效果［5]。为了实现这种效果，要用jQuery的插件和JavaScript的实现代码来实现的。div+css的代码如下。
先引入jQuery的插件和JavaScript文件
〈script type="text/javascript" src=”js/jquery。js">〈/script>
<script type="text/javascript" src=”js/lrtk.js">〈/script〉
<div class="clearfix”〉〈/div〉
〈div class="imddd"〉
<div class=”focus”>
〈ul class=”rslides f426x240”>
〈li><a href="#” target=”_blank"〉〈img src="images/banner1.jpg" /〉</a〉〈/li〉
〈li〉<a href="＃" target=”_blank"><img src=”images/banner2。jpg"/〉</a〉〈/li〉
〈li〉〈a href=”#” target="_blank"〉〈img src="images/banner3。jpg”/>〈/a></li〉
<li〉〈a href=”＃" target="_blank"><img src=”images/banner4。jpg" /></a〉〈/li>
〈li>〈a href=”＃" target="_blank”〉<img src=”images/banner5。jpg" />〈/a></li>
<li>〈a href=”＃" target="_blank"〉<img src="images/banner6。jpg" />〈/a>〈/li〉
</ul>〈/div〉 〈/div>
css的实现代码
。clearfix:after ｛content: ".”； display: block; height: 0; clear: both; visibility: hidden；｝
.clearfix {zoom：1；}
img｛border:0｝
.focus{width:100%;height:500px；position：relative;margin-top:60px；margin—bottom： 30px;}
.f426x240｛width:100％；height：500px；｝
。f426x240 img{width：110％;height：500px｝
.rslides｛width：100%;position:relative；list—style:none;padding:0｝
.rslides_nav｛height:65px;width：40px;position:absolute;-webkit—tap-highlight-color：rgba(0,0,0,0);
top：50%;left：0；opacity：0。5；text-indent:-9999px;overflow:hidden；
text—decoration：none;background：url（。./images/i.png） no—repeat 0 0px;margin—top：-40px;}
.rslides_nav：active｛opacity:1。0}
。rslides_nav。next{left:auto；background—position：-27px 0px；right:0｝
.rslides_tabs｛margin：12px auto；clear:both;text—align：center}
。rslides_tabs li{display：inline；float:none；_float：left;＊float：left；margin-right:5px｝
.rslides_tabs a｛text-indent：—9999px；overflow：hidden；—webkit—border—radius:15px;—moz-border—radius:15px;border—radius：15px；background：rgba（0,0,0, .2);background:#DDD；display：inline-block;_display：block；*display：block;width:9px；height：9px｝
.rslides_tabs .rslides_here a{background:rgba(0，0,0， 。6);background:#390}
4. 图片的展示的不同效果[2］
<ul class="show—list">
<li><a href=”#"〉〈img src=”images/show1.jpg"/〉〈/a>〈div class="show_hover”>
<a href="#" class="info">了解更多〈/a>〈/div>〈/li〉
〈ul class="dress-list”〉
<li〉〈a href="＃"〉<img src="images/wedding3。jpg"/〉</a〉〈div class="dress_hover”>
〈a href=”wedding_dress_naiteli。html" class="infom">奈特丽婚纱〈/a>〈/div〉</li〉
5. 在线问答的js效果
在网页中设计代码中有6条问答的信息，但是想在在首页中设计固定的宽度只显示3条信息，但是这显示三条信息是设计代码的6条信息的其中，只是让信息不断的去跳动让人们可以看到。而且信息要不断的去跳动.所以需要用js设计来实现这个效果。可以查看所有的问答信息吗，还是只能看3条，请做出进一步说明

〈script type=”text/javascript”>
$（function(){
var items=＄（”ul#answer_item li”）.length；
if （items〉3）｛
setInterval(function(）｛
var e=$("ul#answer_item li:first");
var height=e。outerHeight()+"px"；
var bak=e.clone（）；
e。animate(｛”marginTop":"—=”+height｝，function()｛
e。remove(）；
bak.appendTo（”ul＃answer_item”)；
}）；
},2000）;
｝
})；
〈/script〉
6. 预定订单的效果
把这个小图标固定在页面的旁边，然后点击后会跳出预定的订单，这种效果用jQuery可以去实现，实现的步骤就是首先要隐藏订单信息,如果点击要出现订单信息，用jQuery中fadeIn，接着设计订单中用x的小图标再一次隐藏订单信息，用jQuery中fadeOut的去实现。
<div id="order" class="order" onclick="order（this)”〉〈/div>
<div class="submit” style=”display：none” id="submit">提交订单
〈span id=”sub_lose” class="sub_lose” onclick=”order_lose（this)"〉x〈/span>
〈div class=”sb_content”〉
<table width="290” cellpadding=”9" cellspacing=”0” border="0"〉
<tr>
〈td〉您的姓名：</td〉
〈td>〈inp