藏獒宠物网站的设计与实现.docx

藏獒宠物网站的设计与实现学院：大连东软信息学院继续教育学院 专业： 计算机应用技术 层次： 专科 学号： 20101220231 姓名： 叶美樵 2010年 5月25日目录一绪论11. 网站制作的背景12. 网站功能和内容描述1二关键技术介绍11. Photoshop12. Flash13. HTML14. CSS1三网站的分析与设计21. 网站的需求分析22. 网站的可行性分析23. 网站的布局设计24. 网站的页面元素设计24.1 LOGO设计24.2 Banner设计25. 网站的栏目设计25.1 首页设计25.2 栏目页设计35.3 内容页设计3四网站的实现31. 构建本地站点32. 网站的前台设计33. 网站的特效设计3五网站的测试3六总结3基于MVC的XXXXXXX子系统的设计实现 xxxxx1绪论1. 1 网站制作的背景随着网络技术的发展，各类网站纷纷出现。个人制作自己的主页已成为一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格该网站的背景颜色采用的是黑色，给人一种霸气感 ，其它字体背景的颜色采用的深蓝色，给人一种神秘感 ，因为藏獒这种宠物有一种霸气，又神秘的感觉，所以该网站采用这两种颜色来制作背景1.2 网站功能和内容描述本网站以表格框架作为前台显示，网站栏目可以实现以下主要功能：【首页】点击后返回主网址。【藏獒简介】设子分类；介绍了藏獒种类及特征。【图片展示】设子分类；向客户展示一些藏獒类型。【联系我们】设子分类；以便客户联系卖家。【留言板】设子分类；点击留言板，可对卖家进行留言、提出意见等等。2关键技术介绍2.1 Photoshopphotoshop是ADOBE公司旗下最为出名的图像处理软件软件之一。Adobe公司成立于1982年，是美国最大的个人电脑软件公司之一。1985年，美国苹果Apple电脑公司率先推出图形界面的Macintosh麦金塔系列电脑。1987年秋天，Michigan大学的一位研究生Thomas Knoll编制了一个程序，为了在Macintosh Plus机上显示灰阶图像。最初他将这个软件命名为display，后来这个程序被他哥哥，John Knoll发现了，他哥哥就职于工业光魔（此公司曾给星战做特效），John建议Thomas将此程序用于商业价值。John也参与开发早期的photoshop软件，插件就是他开发的。在一次演示产品的时候，有人建议Thomas这个软件可以叫photoshop，Thomas很满意这个名字，后来就保留下来了，后来被Adobe收购后，这个名字仍然被保留。1988年夏天，John在硅谷寻找投资者，并找到Adobe公司，11月Adobe跟他们兄弟签署协议授权销售。1996年11月photoshop4.0发行成功，并有可能成为Adobe公司最赚钱的产品，此时Adobe才买下软件的所有权。Photoshop系列中，在中国地区使用最广泛的有Photoshop3.05、Photoshop4.0、Photoshop5.0、Photoshop7.01、Photoshop8.01、Photoshop9.01 其中8.0的官方版本号是CS、9.0的版本号是CS2 CS是Adobe Creative Suite一套软件中后面2个单词的缩写，代表“创作集合”，是一个统一的设计环境，将全新版本的 Adobe Photoshop CS2、Illustrator CS2、InDesign CS2、GoLive CS2 和 Acrobat 7.0 Professional 软件与新的 Version Cue CS2、Adobe Bridge 和 Adobe Stock Photos 相结合。 需要区别于图形创作：图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形。 运行在Macintosh和Windows平台上 应用范围：图像、图形、视频、出版等方面。 随着版本提高，功能更多，使用更简单。 从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图象的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图象合成则是将几幅图象通过图层操作、工具应用合成完整的、传达明确意义的图象，这是美术设计的必经之路。photoshop提供的绘图工具让外来图象与创意很好地融合，成为可能使图象的合成无衣无缝。 校色调色是photoshop中深具威力的功能之一，可方便快捷地对图象的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图象在不同领域如网页设计、印刷、多媒体等方面应用。 特效制作在photoshop中主要由滤镜、通道及工具综合应用完成。包括图象的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。 PhotoShop仍然是当前最优秀的图形软件，只是因为它以前的版本功能就已经非常全面，因此这次新版本的推出并没有什么非常重要的新功能出现。不过不可否认的一点是此版本确实提供了一些非常有用的小技巧，但如果你已经非常熟悉PhotoShop 4.0而且并不想再花上199美元来进行升级，那么可以说你并不会因此而失去什么。做了以上解释说明后，下面就让我们来具体看一下一张吉姆佛鲁抓取的图片：*字体类型PhotoShop中介绍的“层”技术，在新版PhotoShop中可以使用层来对图像进行编辑，这样如果你发现内容有错误，即使那是你在半小时前编写的，你仍然可以对其进行修改。但这种功能会使新建文件字节数较大，或者说至少在你执行提交层指令（此命令可隐藏底层格式，它位于层命令菜单中）之前会是这种情况。当你提交类型层后将会变为一个普通的层。*磁性套索磁性套索技术可以智能地判断你最有可能勾画的套索，并根据颜色的相似来选择可能的目标。因此例如当你想删除原有的天空图像，结果还有一棵以天空为背景的大树影响你的工作时，你不需要费尽力气勾画出大树的各个分枝，你可以在大树附近使用磁性套索勾画出大树的范围，此时磁性套索可以自动勾画出整个大树的结构。磁性套索的功能确实非常出色，它还可以允许你来控制羽化的程度，如是否进行防混叠处理，是否对宽度和频度执行磁性套索操作，还有边缘对比和描画针等具体功能。*增强型擦除工具擦除工具中有两项新增功能，它们是背景擦除器（图标是一副剪刀）和魔力擦除器（带星号的那个图标）。在背景擦除器的设置选项中，你可以选择非连续、连续和寻找边缘三种模式。寻找边缘的图标就是那个象炸弹的图形。你还记得以前曾经为擦除某个基础图像边缘花费了多少时间吗？现在你再也不会有类似的苦恼了。你只需要点取寻找边缘命令并在你需要保留的基础图像周围开始进行擦除，这时背景擦除器就可以自动执行下面繁杂的细节擦除工作了。（注：你设置的公差量越低，基础图像边缘被擦除的越少。一般情况下默认设置为50，这时的工作效果也是非常出色的。另外你还可以设置成连续执行模式。） 相同命名的连续选项将把你的选择和填充操作限制在与点击区域相连接的周边地区，非连续选项将可以选择或填充图像中所有符合要求的区域。如果你想从图像中删除某种单一颜色（或一系列非常接近的颜色），使用魔力擦除器将使你的编辑工作变得非常简单。而且你不必选择一种颜色，只需选择一些近似的颜色，这时你可以设置允许公差值并开始执行擦除工作。不过你当然只能是位业余的画家，而不可能真是一位成名的艺术家。不过使用这种艺术历史刷，你确实可以使用各种它提供的新奇功能，如压力、公差、非透明性等特效。如果你确实希望创造某种具有影响力的作品，你就应该丢弃颜料和画布，而只使用过滤器。*颜色选择器你还记得在以前PhotoShop版本中我们需要花费多大力气来计算一种具体颜色的十六进制代码值吗？虽然你可以获得三原色（RGB）值，但你需要其它程序来将颜色转换为十六进制数码（当然如果你有能力也可以通过心算得出结果）。让我们感到非常高兴的是那样的日子一去不复返了，除非你是想在自己的朋友面前炫耀你知道“红147绿23蓝89形成的颜色十六进制值为931759。当你在工具窗口中双击选择一种颜色，程序将自动显示出其对应的十六进制值，以及三原色值。应该说此工具确实为你节约了大量时间。*网页存储在很久以前，网络上的图像一般字节都很大。后来出现了DeBabelizer、Fireworks这样的一系列图形工具，它们可以通过限制图像颜色数目来降低图像字节。现在PhotoShop中已经拥有了这种功能。你可以在文件菜单下选择网页存储，而且还能够预览存储后的图像及其字节大小，并能够对其进行调整。PhotoShop可以显示出减少颜色数目的图像，你甚至可以同时列出四种不同的图像格式，并比较其图像质量、文件大小以及预估下载时间。你还可以选择将图像转存为GIF、JPEG或PNG等格式，可以为几个图像选择不同的设置（其中包括针对GIF文件的网页调色板），而且甚至还可以在浏览器中预览图片。此工具智能化程度极高，是PhotoShop和ImageReady套件中最出色的工具之一。*存在问题窗口调整：当你打开某个图像并使用Ctrl+或Ctrl-来增大或缩小图片时，图片本身将会增大或缩小，但显示窗口并不随之变化，这将迫使你不得不采取手工调整窗口大小的方式。虽然这是个很小的问题，但由于你已经在前几个PhotoShop版本中非常熟悉此项功能，这个问题不可避免地会给你造成一定的烦恼。压力感应度：在新版本的PhotoShop软件中你还需要从Adobe官方站点下载pen.dll补丁程序，从而使Wacom桌面压力感应能够正常工作。我也不清楚具体是什么原因，但似乎Adobe公司从未把pen.dll程序加入到各发布版本中。你最初选择的颜色就是将被擦除的颜色，虽然这种擦除工具并不象背景擦除器那样具有较强的平滑性和细节性，但它却具备高效的特点。你可以把它视为魔杖工具的一个变体。2.2 FlashFlash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。要在 Flash 中构建应用程序，可以使用 Flash 绘图工具创建图形，并将其它媒体元素导入 Flash 文档。接下来，定义如何以及何时使用各个元素来创建设想中的应用程序。在 Flash 中创作内容时，需要在 Flash 文档文件中工作。Flash 文档的文件扩展名为 .fla (FLA)。Flash 文档有四个主要部分：舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash 基础中将对舞台做详细介绍。时间轴用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。库面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。ActionScript 代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用 ActionScript 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash 包括两个版本的 ActionScript，可满足创作者的不同具体需要。有关编写 ActionScript 的详细信息，请参阅帮助面板中的学习 Flash 中的 ActionScript 2.0。Flash 包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将 ActionScript 添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。这些功能使 Flash 不仅功能强大，而且易于使用。完成 Flash 文档的创作后，可以使用文件发布命令发布它。这会创建文件的一个压缩版本，其扩展名为 .swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的应用程序进行播放。有关 Flash Player 的介绍，请参阅关于 Flash Player。2.3 HTMLHTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。 所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术-通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接2.4 CSSCSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来，供诸位参考。 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中都有“”，好象没什么用，不要可以吗？ 这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。 7、如何给一部分文字加背景色？ 给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色背景的CSS是这样的： 在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。 8、如何给部分文字加背景图像？ 与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的： 在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。 9、如何使页面的背景在文字“滚动”时背景图案静止不动？ 要使背景图案不随文字“滚动”的CSS是这样的： 10、如何定义字间距？ 在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下面代码是一个定义好的字间距CSS例子： 11、如何给文字加上划线、下划线、删除线和闪烁？ 在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子： 其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”定义的是文字闪烁。 12、如何使网页具有“首行缩进”功能？ 由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示： 在DW3要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。 13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？ 可以！在DW3中CSS的属性定义对话框（style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码： 14、能给某部分内容加边框吗？ 用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for .style1)的“Border”定义的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS例子： 3网站的分析与设计3.1 网站的需求分析网站是面对国外客户，还是国内客户？该网站是面对全中国的人民所需要设定的网站是服务老客户为主，还是吸引新客户？该网站是为了更方便让老客户联系到其它藏獒宠物网，而设计。也是为了吸引新客户，更多的了解藏獒。3.3 网站的布局设计网站布局设计如图3.3.1：图 网站的页面元素设计该网站的布局设计用表格框架首先是Banner，然后导航，宠物介绍，Flash,图片展示，新闻，友情链接等。页面带有神秘，霸气感，让广大爱宠物的人有新鲜感。3.4.1 LOGO设计LOGO设计，一种设计的名称，指的是商品、企业、网站等为自己主题或者活动等设计LOGO的一种行为。也有同名书籍用Photoshop制作一个微软大学LOGO。LOGO设计图3.4.1：图.2 Banner设计Banner设计如图3.4.2：图. 网站的栏目设计3.5.1 首页设计网站首页设计重要主要由以下几点：(1) 它是一个企业或个人系统主导页，起到贯通的作用，这就要求连接合理导航和理。(2) 网站首页是第一时间展现在浏览者的面前，这就好像一个人的外表一样。这是与潜在客户合作第一印象。(3) 网站首页设计的合理与否与搜索引擎的收录情况有直接关系。4网站的实现4.1 构建本地站点使用Dreamweaver 8自带的站点定义向导，可以方便地创建本地站点，具体操作步骤如下： （1）启动Dreamweaver 8，单击“站点”|“新建站点”命令，系统将弹出定义站点对