婚纱摄影网站设计毕业论文.doc 21页

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