1、婚纱摄影网站的设计论文炎黄职业技术学院信息工程系 毕业设计（论文）爱、婚纱摄影设计年 级: * 学 号: * 姓 名: * 专 业: 网络数字媒体 指导老师: * 二零一三年摘 要Internet的作用在今天显得越来越重要，的数量和规模发展迅猛。在Internet的早期，只能保存单纯的文本。经过几年的发展，图像、声音、动画、视频、甚至3D技术也开始在Internet上流行，也发展成为今天我们看到的图文并茂的样子。在制作的过程中PhotoshopDreamweaverFlash是必不可少的网页图像处理软件。PhotoshopDreamweaverFlash等软件的功能与其强大，在图像、图形、动画
2、、文字、视频等方面都有涉与，良好的运用PhotoshopDreamweaverFlash这些软件能在开发与后期发展中起到很重大的作用。对于爱婚纱摄影的而言，在制作过程中使用了PhotoshopFlashDreamweaver等软件工具，充分利用各个软件的优点，制作出动态静态的相结合的。将各个网页融汇起来。关键词： Dreamweaver； Flash； Photoshop； div+Css技术第1章 制作分析1.爱、婚纱摄影的设计思路要将丰富的意义和多样的形式组织成统一的页面结构，体现的容，通过文字、Flash动画、图形使不过于呆板。首先利用Photoshop软件制作出的各个页面，其次并使用F
3、lash软件制作动画增加的动态效果，最后在Dream waver实现整个得运作。2.爱、婚纱摄影的主题主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现婚纱摄影的优雅、浪漫。动态主页方式介绍爱、婚纱摄影，作品欣赏，关于我们、品牌服务等；动态运用flash动画给人们直观动感的效果。主页本着简单美观全面的原则，以暗绿色与灰色为背景，黄色相间，漂亮且动感的flash让你感受到温馨浪漫的气息。3.爱、婚纱摄影的容该主要拥有5个页面，包括：首页：动画和鼠标特效的结合对本进行介绍。品牌服务：此功能介绍了爱、婚纱摄影店的品质服务。联系我们：方便与时和我们进行联系和我们的最新优惠活动。关于我们
4、：传达本的有关信息，增加对爱、婚纱摄影的理解。作品欣赏：通过点击图片切换大小的方式展示我们的作品。每个页面采用不同的方式来实现出简单美观的。4.网页设计中色彩的运用色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合，搭配起来构成美丽的页面。所以在对爱、婚纱摄影店进行设计时采用了淡雅而沉静的颜色：暗绿色，灰色，浅黄色，而不是大红大紫的色彩。绿色代表生的希望，爱、婚纱摄影采用暗绿色调主要寓意着爱情的不断成长、生机勃勃。第2章 软件工具介绍2.1 Dreamweaver软件Dreamweaver软件由美国著名的应用开发软件开发工具生产商Adobe Macro
5、media于2005年6月推出并正式投入市场以来，已经发展相当成熟。Dreamweaver是一款简单的中文软件，可以在Win2003Win2000Win9xWinxp中运行。Macromedia Dreamweaver 是建立 Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的和应用程序。从对基于 CSS 的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver 与所选择的服务器技术
6、来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前设计、开发、制作的首选工具。1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamwea
7、ver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理变得更容易。3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动
8、核对tags和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能6、建的图形编辑引擎7、Dreamweaver的集成特性Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。8、丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以与其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供
9、行为和时间线两种控件来产生交互式响应和进行动画处理。9、超强的扩展能力Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。2.2 Photoshop 软件Photoshop功能丰富实用，界面简洁。集成化程度高，Photoshop可分为图像编辑器、图像合成、校色调色与特效制作部分。图像编辑器时处理图像处理的基础，可以对图像进行各种变换，如放大缩小、旋转、镜像、透视等。也可以进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、广告制作、人像处理制作中由着非常大的作用。当前很多影楼都使用了Photoshop设计婚纱照片，通过
10、Photoshop的设计能是照片更加完美。平面设计是PHOTOSHOP应用最为广泛的领域，无论是我们正在阅读的图书封面，还是大街上看到的招帖、海报，这些具有丰富图像的平面印刷品，基本上都需要PHOTOSHOP软件对图像进行处理。修复照片PHOTOSHOP具有强大的图像修饰功能。利用这些功能，可以快速修复一破损的老照片，也可以修复人脸上的斑点等缺陷。广告摄影广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往要经过PHOTOSHOP的修改才能得到满意的效果。影像创意影像创意是PHOTOSHOP的特长，通过PHOTOSHOP的处理 ，PHOTOSHOP可以将原本风马牛不相与的对象组合在一起，也
11、可以使用“狸猫换太子”的手段使图像发生面目全非的巨大变化。艺术文字当文字遇到PHOTOSHOP处理，就已经注定不再普通。利用PHOTOSHOP可以使文字发生各种各样的变化，并利用这些艺术化处理后的文字为图像增加效果。网页制作网络的普与是促使更多人需要掌握PHOTOSHOP的一个重要原因。因为在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。建筑效果图后期修饰在制作建筑效果图包括许多三维场景时，人物与配景包括场景的颜色常常需要在PHOTOSHOP中增加并调整。绘画由于PHOTOSHOP具有良好的绘画与调色功能，许多插画设计制作者往往使用铅笔绘制草稿，然后用PHOTOSHOP填色的方法来
12、绘制插画。 除此之外，近些年来非常流行的像素画也多为设计师使用PHOTOSHOP创作的作品。绘制或处理三维帖图在三维软件中，如果能够制作出精良的模型，而无法为模型应用逼真的帖图，也无法得到较好的渲染效果。实际上在制作材质时，除了要依靠软件本身具有材质功能外，利用PHOTOSHOP可以制作在三维软件中无法得到的合适的材质也非常重要。婚纱照片设计当前越来越多的婚纱影楼开始使用数码相机，这也使得婚纱照片设计的处理成为一个新兴的行业。视觉创意视觉创意与设计是设计艺术的一个分支，此类设计通常没有非常明 显的商业目的，但由于他为广大设计爱好者提供了广阔的设计空间，因此越来越多的设计爱好者开始了学习PHOT
13、OSHOP，并进行具有个人特色与风格的视觉创意。图标制作虽然使用PHOTOSHOP制作图标在感觉上有些大材小用，但使用此软件制作的图标的确非常精美。界面设计界面设计是一个新兴的领域，已经受到越来越多的软件企业与开发者的重视，虽然暂时还未成为一种全新的职业，但相信不久一定会出现专业的界面设计师职业。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是PHOTOSHOP。上述列出了PHOTOSHOP应用的13大领域，但实际上其应用不止上述这些。例如，目前的影视后期制作与二维动画制作，PHOTOSHOP也有所应用的。2.3.Flash 软件FLASH简介Flash是一种交互式矢量多媒体
14、技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。下面介绍Flash3与4版本的特点： Flash3的功能特点，总结起来有如下特点： 灵巧的绘图工具 Flash本身具有极其灵巧的图形绘制功能，更重要的是他能导入专业级绘图工具，如Macr
15、omedia FreeHand、Adobe Illustrator等绘制的图形，并产生翻转、拉伸、擦除、歪斜等效果，还可以将图形打碎分成许多单一的元素进行编辑，并改变其颜色亮度。由于Flash提供具有保真技术的绘图工具，使图形边缘在经过一系列加工后仍会保持平滑。 向量透明效果应用 Flash3可以创建透明的图形，并可以任意改变层次间透明的不同效果，如透明度、倾斜度与透明的颜色等属性。 具有动画效果的按钮和菜单 Flash采用精灵动画的方式，在Flash3中可以随意创建按钮、多级弹出式菜单、复选框、以与复杂的交互式字谜 游戏。 物体的变形和形状的渐变 在Flash3中产生物体的变形和形状的渐变非
16、常容易，其发生完全由Flash自动生成，无须人为地在两个对象间插入关键帧。 增强对图像的支持 Flash3不但可以对导入的图像（jpg、gif）产生翻转、拉伸、擦除、歪斜、改变颜色亮度等效果，还能利用新的套索工具或 魔术棒在图像中选择颜色一样的区域并创建遮罩（Mask）；将图像打碎分成许多单一的元素进行编辑，设置图像的属性，如产生平滑效果和质量损失压缩等。 声音插入 Flash3支持同步WAV (Windows) 和 AIFF(Macintosh)格式的声音文件和声音的连接，你可以用同一个主声道中的一部分来产 生丰富的声音效果，而无须改变文件量的大小。 自定义字体 Flash可以处理自定义的字
17、体与其颜色、大小、字间距、行间距 、缩进等多种格式。在Flash创建的网页中，可以加入眼花缭乱的标题和动态的文本，而数据量非常小，比位图的下载速度还快。当然为了防止客户端字体短缺，你也可以将特殊字体转换为位图图形。 模拟传输 Flash3提供了一幅设置动画播放方式的图表，你可以在此设置你的目标Modem速度，如28.8kb/s，然后进行模拟传输，检验其播放是否流畅，在参照图表中找出发生间断的位置，并进行优化。最终确保动画在客户端播放流畅。 独立性 Flash3可以将制作的影片生成独立的可执行文件（EXE文件），在不具备Flash播放器的平台上，仍可运行该影片。因此，除制作网页外还可以将其应用于
18、商业演示与电子贺卡等。 界面亲切 Flash3增加了Inspector窗口、手柄、加速锁等新功能，比以往更加易于操作。 Macromedia 6月16日发布了其新版的Flash 制作软件Flash 4，该软件的新特性将包括对高保真MP3 流式音频的集成化支持和创建互动式命令。另外，Flash 4 还包含一个改进的创作环境以满足创建高效带宽Flash的需要。 Flash 可创建基于矢量的，可以跨平台、跨浏览器地显示声音、图片、动画和交互式等容。Flash 4 中的MP3 流式音频支持可以帮助设计人创建网络音频应用程序，比如带有旁白和背景音乐的长动画，同时还可以减少文件大小以适合低带宽的网络传输。
19、 Flash 4新增加的对文本输入框的支持，让开发人可以创建网络表格、应用程序和电子商务片头。现在可以从应用了Flash 技术的网页中收集用户数据，并把信息传到服务器上。 Flash 还可以控制用户输入的信息以何种方式显示，Flash 4支持可拖动的界面组件、条件逻辑和基本数学运算，比如可以用在创建网上购物结算应用程序上。 Flash 4 创作工具的改良界面包括新的监视面板和绘图工具与更多的可直视层，它的时间安排表和智能向导可帮助用户创建动画。此外还有一个发布命令可控制Flash 支持的输出格式，包括多版本的HTML、压缩位图和新的Quicktime。2.4 Div+css技术CSS是Casc
20、ading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是 Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工 具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样容的网页，有的人做出来有 几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以与一些网友来信 提问的问题整理出来，供诸位参考。 1
21、、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？ 当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行插入方式。 2、CSS的三种用法在一个网页中要以混用吗？ 三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处理的：先检查有没有行插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可
22、看出，三种CSS的执行优先级是：行插入式、头部方式、外连文件方式。 3、在Dreamweaver3中如何使外部文件式CSS？ 在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的与之间加上一句这样的代码： 就行了。 4、如何用Dreamweaver3快速创建CSS外连式文件？ 对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于 Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作： 1）先在纸上写好在的网页中可能要用到的格名称，然后在Dreamweav
23、er3的编辑窗中调出CSS面板，一个一个地定 义，并在一个空白页上适当地写一点相关容，边定义边试用，效果不满意，立即修改； 2）全部定义好后，再用记事本创建一个空的CSS外连式文件，把在与之间的那段定义好的CSS复制 到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧？ 5、在Dreamweaver3中采用行插入式CSS要手动写代码吗？ 不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：style=，再把你刚才定义的CSS从 后面拖到这个双引号中来，把花括号以外的部分删去就行了。 6、在方档头部方式和外连文件方式的CSS中都有“”，好象没什么用，不要可以吗？ 这一
24、对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的 容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。 7、如何给一部分文字加背景色？ 给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色，却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色背景的CSS是这样的： 在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。 8、如何给部分文字加背景图像？ 与加背景色
25、操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的： 在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。 第3章 制作过程3.1的页面制作（1）index.psd的制作：新建文档1024、768，打开背景图片floor，新建图层，用矩形工具分别绘制出黑色，米黄色矩形背景底纹，并调整其位置。打开收音机图片，并添加阴影效果，同理插入铅笔图案。再次使用矩形工具绘制出中间部分，并添加阴影效果。下面打开三图片，使用裁剪工具进行裁剪并将其拖入图层，调整其大小，位置。最后制作导航条，使用圆角矩形工具绘出导航轮廓，使用油漆桶工具填充绿色，最后在
26、导航条适当位置加入导航文本。效果图如3-1所示。图3-1 index.psd效果图（2）gywm.psd的制作: 新建文档1024、768，打开背景图片，新建图层，用矩形工具分别绘制出黑色，米黄色矩形背景底纹，并调整其位置。打开收音机图片，并加入阴影效果。接下来制作中间部分，在此页面中将导航条放置于右侧改变一下版面，选取一照片，使用椭圆选框选择图片，将其拖入页面左下角，添加投影效果。效果图3-2所示： 图3-2 gywm.psd效果图（3）zpxs.psd的制作：新建文档1024、768，打开背景图片，新建图层，用矩形工具分别绘制出黑色，米黄色矩形背景底纹，并调整其位置。打开收音机图片，加入阴
27、影效果。此时将导航换掉，使用自定义形状绘制图标，调整其位置并加入导航文本。效果如图3-3所示：图3-3 zpxs.psd效果图（4）ppfw.psd的制作：新建文档1024、768，打开背景图片，背景图片换成wallpaper新建图层，用矩形工具分别绘制出黑色，米黄色矩形背景底纹，并调整其位置。打开收音机图片在本页面中，其他步骤基本一样。效果如图3-4所示：图3-4 ppfw.psd效果图（5）lxwm.psd的制作：新建文档1024、768，打开背景图片，背景图片换成wallpaper，去掉灯光效果。新建图层，用矩形工具分别绘制出黑色，米黄色矩形背景底纹，并调整其位置。打开收音机图片，并添加
28、阴影效果，再次使用矩形工具绘制出中间部分，并添加阴制作方法同上进行局部改动。在版面底部加入所有文字。效果如图3-5所示： 图3-5 lxwm.psd效果图3.2对五个页面进行切片并保存到站点下在站点下新建不同页面的文件夹，便于保存和修改。3.3制作Flash动画（1）搜集素材婚纱照片，并分类。（2）打开Flash，设置文档大小，导入舞台背景，新建图层1，在图层1上导入一婚纱照图片，在合适的位置按F6加入关键帧，右击补间动画，在第一个关键帧处调整图片的透明度为10%，在第二处关键帧的位置设置不透明度为100%，实现图片有透明到不透明的渐变；（3）新建图层2，导入一婚纱照到库，按照步骤2的基本步骤
29、制作另一图片的渐变效果（4）以此类推，新建多个图层，按照步骤3的方法，制作多图片的渐变效果。（5）测试影片，发现影片中的不足之处，进行调整修改。3.4对五个页面分别进行页面（1）在Dream waver中打开index网页，在需要地方分别进行连接，同理的方法将5个页面分别进行。在时，注意不要漏掉。（2）在代码中按Ctrl+a选中整个页面，在设计中将页面居中。每个页面依此类推。将页面居中；3.5在五个页面中分别加入特效3.5.1鼠标跟随代码爱、婚纱摄影.spanstyle COLOR: #6600cc; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: ab
30、solute; TOP: -50px; VISIBILITY: visiblevar x,yvar step=18var flag=0/ Your snappy message. Important: the space at the end of the sentence!var message=瞬间的微笑，留下永远的回忆-爱、婚纱摄影。 message=message.split()var xpos=new Array()for (i=0;i=message.length-1;i+) xposi=-50 var ypos=new Array()for (i=0;i=message.length-1;i+) yposi=-200function handlerMM(e)x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYfla
