人事处网站的完善论文

PAGE摘要计算机网络特别是Internet在过去十几年经历了爆炸式的增长，网络是现代计算机业最为活跃的领域，也是发展最为迅速的领域，而网页和网站是网络特别是Internet的重要组成部分。现在，越来越多的企业、公司、学校和机构通过网站来宣传自己、介绍自己的产品和技术。学校人事处网站作为学校人事处拥有的对外媒体，网站形象是人事处形象的网络化体现。而网站形象的好坏则取决于网站建设的质量——主页设计制作是否美观、是否符合人事处形象、展示的服务是否得当、是否经常更新信息，等等。因此，要想学校的人事处网站引人注目，给人耳目一新的感觉，就必须做好以上提到的诸点。要制作出吸引人的Web网站，除了要把各方面的因素考虑进去，制作软件也是很重要的。本人选用的是被称为“网页设计最佳拍档”的Photoshop7.0、DreamweaverMX和FlashMX三个软件。本次毕业设计在原来的学校人事处网站的基础上，在保留了一些好的方面的前提下进行了重新设计和完善。努力做到美观、符合人事处形象、展示得当的服务、经常更新信息等要求。希望可以吸引他人的眼睛。关键字：网站、设计、Web、Photoshop、Dreamweaver、FlashAbstractCalculatornetworkespeciallytheInternetincreasedspeedyinpastmorethantenyears.Thenetworkisthemostactiverealminindustryinmoderncalculator,anditisalsothemostquickrealmofdevelopment.Andthat,WebpageandwebsiteareimportancepartsofnetworkespeciallytheInternet.Now,Moreandmorebusinessenterprises,companies,schoolsandorganizationspassthewebsitetodisseminatethemselves,introductiontheirproductandtechnique.Theschoolpersonneldepartmentwebsiteispersonneldepartmentownoutwardmedium.Thewebsiteimageisthenetworkofthepersonneldepartmentimage'sem-bodiment.Moreover,Thequalityofthewebsiteimagethenisdecidedbythequantityofwebsitedevelopments,suchasMainpagedesignmanufacturewhetherbeauty,whethertomatchtheserviceofthepersonneldepartmentimage,demonstrationornotwhetherproperly,whetherusuallyrenewtheinformation,andsoon.so,wanttomakethepersonneldepartmentwebsiteoftheschoolisarrestive,andgivethepersonthefellingofapleasantchangeofatmosphere,wemustdowellintheseparts.TocreateanattractivethewebsiteofWeb,apartfromtowanttoconsiderintothefactorofeveryone's,manufacturethesoftwaretoalsoisveryimportant.IchoosePhotoshop7.0,DreamweaverMXandFlashMXthreesoftwares,whosebecalled"thewebpagedesignclapsthefilebest".Thisgraduatedesignsatoriginalschoolthefoundationofthepersonneldepartmentwebsitetop,intheaspectsofreservingsomelikingofofthepremisescendedtoproceedtodesignafreshwithperfect.Iworkhardtoattainbeautiful,matchthepersonneldepartmentimageanddisplayproperlyofservice,usuallyrenewinformation,etc.Ihopeitcandrawontheeyeoftheothers.Keywords：website,design,Photoshop,Dreamweaver,Flash -PAGEi-目次第一章前言 1第二章软硬件环境 22.1硬件配置 22.2软件配置 2第三章所选软件的介绍和比较 33.1DreamweaverMX的介绍 33.1.1DreamweaveMX软件界面介绍 33.1.2DreamweaverMX的功能 73.1.3Dreamweaver与ASP 83.1.4Dreamweaver与Photoshop 93.1.5Dreamweaver与Flash 103.1.6Dreamweaver和FrontPage比较 123.2FlashMX的介绍 133.2.1FlashMX软件界面介绍 133.2.2FlashMX的新功能 143.3Photoshop7.0的介绍 143.3.1Photoshop7.0软件界面介绍 143.3.2Photoshop7.0的新功能 15第四章网站的分析和设计 164.1原人事处网站的分析 164.2网站设计构想 17第五章人事处网站的实现 205.1建立站点 205.2订立网站结构 215.3网页制作 215.3.1设置文档的页面属性 235.3.2页面的分割 235.3.3插入图片 245.3.4文本输入 255.3.5图片和文字的超链接 265.3.6插入文本域 275.3.7插入按钮 285.3.8插入FLASH 285.3.9插入列表 295.4为网站设立主页 30第六章网站的测试和完善 34小结 37参考文献 38附录 391.style.css--关于去除下划线的代码 392.rainbow.js—关于七色彩虹变换的代码 41 -PAGE23-第一章前言随着计算机网络技术的高速发展，越来越多的人沉浸于网络所带来的另一个崭新的世界里。越来越多的人已不满足仅仅是一个观赏者或使用者，而是试图参与其中，编织自己心中理想的网络世界。因此，掌握网页制作和构建网站的技术是当今青年不可缺少的素质。网页可分为静态网页和动态网页：静态网页通过链接静止地访问网页的内容，网页的内容是固定的，不随访问要求的改变而改变。文件多以htm或html为后缀。动态网页是根据访问者的不同访问请求出现变动的访问结果，其实现原理是将用户的访问请求发送到网站数据库，网站数据库根据访问请求反馈出结果并传送到网页中。这里需要注意：切莫将动态网页和网页的动感（以动画或其他效果表现）相混淆。在本次设计中本人主要负责第一个方面，主要负责静态网站的构建、静态网页的制作和完善。另外一个同学负责第二个方面，主要负责有关ASP和数据库方面的内容。本次毕业设计在原来的学校人事处网站的基础上进行了重新设计和完善。努力做到美观、符合人事处形象、展示得当的服务、经常更新信息等。希望可以令你多看一眼。第二章软硬件环境2.1硬件配置本人的计算机硬件配置为：CPU：赛扬1.7G硬盘：40G内存：128M显卡：NVIDIAGeforce2MX/MX400显示器：大水牛17寸纯平显示器键盘：大水牛仿笔记本键盘鼠标：大水牛光电鼠标光驱：SONYCD-ROMCDU5221软驱：SONY2.2软件配置本人所用的软件配置为：操作系统：WindowsXP主要制作工具：DreamweaverMX辅助制作工具：Photoshop7.0、FlashMX第三章所选软件的介绍和比较3.1DreamweaverMX的介绍工欲善其事，必先利其器。Dreamweaver是在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高（图3-1）。图3-1DreamweaverMX启动画面Dreamweave字面意思为“梦幻编织”，这一软件有着不断变化的丰富内涵和经久不衰的设计思维，它能充分展现你的创意，实现你的想法，锻炼你的能力，使你成为真正的网页设计大师。3.1.1DreamweaveMX软件界面介绍在安装DreamweaverMX之后，它会自动在Windows的“开始”菜单中创建程序组，打开“开始”菜单，选择“程序->Macromedia->MacromediaDreamweaverMX”命令，便可启动DreamweaverMX（图3-2）。软件启动后，会新建一个空白的HTML文档等候编辑。图3-2启动DreamweaverMX图3-2启动DreamweaverMX以下是Dreamweaver的工作区中提供的窗口和其他元素的简要说明。选择DreamweaverMX工作区后，将看到下面的画面（图3-3）：图3-图3-3DreamweaveMX软件界面图3-4参数选择的快捷键1、①为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区“编辑(E)”中的“参数选择(S)...CTRL+U”图3-4参数选择的快捷键在这里，可以把自己的DREAMWEAVERMX设置为自己喜欢的样式，一般使用默认就可以了，如图3-5所示：图3-5图3-5参数设置为了使用的方便，选中字体这一项目，把参数设置为上图所示的样子，因为默认的时候实在太难看了（当然也可以选自己喜欢的）。如果你浏览网页时使用的不是IE的话，请选中“在浏览器中预览”这一项（以后制作网页的时候要用到），点一下那个“＋”添加你使用的浏览器程序。2、②是插入项目选择工具(插入面板)，在②选中了某个项目，③中会出现相应的插入项目，下面详细介绍，选中“常用”这一项后图3-6所示：图3-6图3-6常用卡“锚点”用于网页中的定位，如网页的上、中、下等；“图像点位符”是用于动态交换图片的，后面再说；“FireworksHTML”为用Fireworks软件切割出来的图片；“交换图像”为鼠标移上去时变为另一图片，增强动感；“表格数据”可以将其它文件的数据转化为表格，插进网页；“标签选择器”可以插入其它不常用的HTML标签。在②中选中“布局”一项，共有“标准视图”和“布局视图”两种视图，如图3-7所示：图3-7图3-7标准视图在“标准视图”下，可以插入表格和在网页制作区画图层。切换到“布局视图”下，如图3-8所示：图3-8图3-8布局视图在“布局视图”下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到“标准视图”后，可以转化为表格，这个比较好用，可以用来排版网页。在②中选中“文本”一项，可以对文本进行格式化，如图3-9所示：图3-9图3-9文本选项卡“A”可以对字体进行全面的格式；“B”可以将字体变为粗体；“I”为斜体；“S”为加强字体；这些比较简单，可以自己一项一项慢慢试试，看看字体有什么变化。在②中选择“表单”（“表格”和“框架”两项后面再说），可以插入各种按钮，如图3-10所示：图3-10图3-10表单选项卡A为表单；B为文本框；C为隐藏域；D为文本区域；E为多选框；F为单选框；G为单选按钮组；H为列表/菜单；I为跳菜单；J为图像域；K为文本字段；L为按钮；M为标签；N为字段集。在②中选中“模版”可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。在②中选中“字符”可以插入一些特殊的字符，其中BR为换行符（快捷键为CTRL+ENTER，此项与ENTER有所不同）。在②中选中“媒体”，可以插入FLASHFLASH按扭FLASH文本Applet等插件。在②中选中“文本头”，将出现下面的画面（图3-11）：图3-11图3-11文本头选项卡“关键字”为网页的关键词，可以让搜索引擎搜索到；“说明”为网页的说明，如作者、介绍等；“刷新”可以设定多长时间后刷新网页或跳转到其它网页；“基础”为网页的基本链接，如插入一个目标为_blank基础，网页中的一切默认链接都将打开新窗口；其它比较少用不再详细讲述。在②中选中“脚本”，可以插入各种Javascript、Vbscript或其它脚本。在②中选中“ASP”（编辑ASP网页时用到），可以插入各种ASP编程里用到的标签。在②中选中“应用程序”（编辑动态网页时候用到，新手可不必理会），可以对数据库进行操作。3、对④区的详解如图3-12所示：图3-12图3-12文挡工具栏在上图中，点击带有向下小箭头的工具，会弹出更多选择。4、⑤区为网页设计区，所设计的网页或代码将出现在该区。5、⑥区为属性区(属性面板)，在该区可以对选中的对象进行一些设置。6、⑦区为卷廉面板区，在其中镶嵌着许多常用面板。3.1.2DreamweaverMX的功能MacromediaDreamweaverMX是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论是愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供有用的工具，使您拥有更加完美的Web创作体验。利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在MacromediaFireworks中创建和编辑图像，然后将它们直接导入Dreamweaver，或者直接在Dreamweaver中添加MacromediaFlash对象，从而优化开发工作的流程。Dreamweaver还包括多种与编码相关的工具和功能，其中包括代码视图中的代码编辑工具（如代码加色和标签完成）；有关HTML、CSS、JavaScript、CFML、ASP和JSP的参考资料以及一个JavaScript调试器。Macromedia的可自由导入导出HTML技术可导入手工编码的HTML文档而不会重新设置代码的格式，可以随后用首选的格式设置样式来重新设置代码的格式。Dreamweaver现在包含并扩展了MacromediaUltraDev中的所有功能，以帮助使用ASP、ASP.NET、ColdFusion标记语言(CFML)、JSP和PHP等服务器语言来生成由动态数据库支持的Web应用程序。Dreamweaver可以完全自定义。可以创建自己的对象和命令，修改键盘快捷方式，甚至编写JavaScript代码，用新的行为、属性检查器和站点报告来扩展Dreamweaver的功能。3.1.3Dreamweaver与ASP上网、泡网、网上冲浪是现时校园中流行的时尚。制作网页呢，便是近年来风行的一种高档次的时尚。不管是建立个人网页、校园网还是社会公共网都离不开网页的制作。当前顶尖级的网页设计和完善中总少不了网页的动态设计、数据流技术等，而这些工作大都由ＡＳＰ来完成。由于关于ASP方面的内容是另外一个同学负责的。本人在页面设计时留了相关的空间给他。这里也稍微提一下。ASP为什么如此受人青睐呢？ASP用于动态页面开发的最大优点在于，它抛开了CGI、ISAPI等复杂的技术,让你不需编写复杂的程序,就可以进行动态主页的开发工作。只要你学习使用VBScript或者JScript等简单的脚本(Script)语言，结合HTML语言，再插入ASP对象和内置或自行制作的动态服务器组件(ActiveXServerComponent)，即可让你产生和执行动态、交互式、高效率的站点服务器的应用程序。具有学习快、设计快、修改和维护容易等特征。可从以下的特点看出其独特的魅力来：1与浏览器无关，用端只要使用可执行HTML代码的浏览器，即可浏览ASP所设计的网页内容。ASP所使用的脚本语言均在ＷＥＢ服务器端执行，用户浏览器不需要能够执行这些脚步本语言。2使用VBScript、Javaseript等简单易懂的脚本语言结合HTML代码，即可快速地完成网站的应用程序。3使用普通的文本编辑器。如WINDOWS的记事本,即可进行编辑。4不须COMPILE编译,可在服务器端直接执行。5ASP能与任何ActiveXScripting语言相容，除了可使用VBScript语言来设计外，还通过plug-in的方式，使用由其它脚本语言如Perl、Tcl等。脚本引擎是处理程序的COM物件。ASP源程序不会被传到客户端浏览器，提高程序的安全性和保密性。可使用服务器端的脚本来产生客户端脚步本。ActiveXserverComponents(ActiveX服务器元件)具有无限可扩充性。使用VisualBasic、Jave、VisualC++等语言来编写所需要的ActiveXServerComponents。另外，用ASP与Dreamweaver结合设计和完善网页，要注意系统总体风格。1界面的风格应该采用一些符合网站的风格的网页。例如：不允许采用其他一些具有其他目的的网站风格。2页面上的修饰图片不宜过多，因为网络的传输速度是有限的，图片所占的字节比较多,传输起来占用较多的时间。因此会让用户有较多的等待，势必造成用户心理上的焦急的心情。不利于本网页为大家所喜爱。3页面上尽量拥有经常更新的内容，例如最新消息等。因为每个人都不喜欢经常见得同一内容的网页。所以，网页的内容因该能够定期的更新，但这种更新应该是有程序自动完成的,或仅需少量人工的干预，从而体现出计算机的优越性，并能够减轻没有必要的人力劳动。本节只是介绍了ＡＳＰ的一些功能及其一些在网页制作和完善中的简单应用。利用ＡＳＰ还可以制作聊天室、ＢＢＳ等。ＡＳＰ的灵活性和其强大的交互功能必然使得其在网页制作和完善中的应用越来越广泛。3.1.4Dreamweaver与Photoshop在使用Dreamweaver进行网页排版的过程中，难免有一些图片会不适合整体排版的要求。这就要用到Photoshop来进行图片的修改和完善甚至制作了。图3-13所显示的是裁切一图片的过程。图3-13裁切图片运行Photoshop，打开要修改的图片。点击工具拦中的“裁切”按钮，在图片上拖动鼠标，划定要裁切的部分。在要裁切的部分右击，选择“裁切”命令。得到图3-14。图3-14裁切的结果执行“文件/另保存为”命令，将其保存到文件夹之中。然后，Dreamweave就可以像应用其它图片一样使用修改后的图片了。3.1.5Dreamweaver与Flash为了使得用Dreamweaver制作的网页更加生动和吸引人.可以将Dreamweaver和Flash结合起来。打开Flash程序,执行“文件（File）/先建（New）”命令，建立一个新文件，存储名为Welcome.fla。在第一帧中输入红色文字WELCOME，延长到第30帧（如图3-16）。图3-16Flash制作1在第1层下建立第2层，创建一个移动渐变动画。图3-17是第1帧的图形样式，图3-17Flash制作2图3-18是第20帧的图形样式。第20帧将前面的图形进行了横向缩短。右击第一层，执行“遮盖（Mask）”命令。第一层成为第二层的遮盖层。这个小动画就制作就完成了。图3-18Flash制作3执行“控制（Control）/测试影片（TestMovie）”命令，文件自动生成一个播放格式（.swf）的同名文件，并激活播放程序，如图3-20所示。该文件可以用于Dreamweaver的程序中。图3-20Flash测试事先将生成的SWF文件放在Dreamweaver制作网页要用到的文件夹中。在Dreamweaver程序中打开要加入Flash文件的网页。在插入工具栏的“常用（Common）”选项卡中单击Flash按钮，从打开的对话框中搜索的SWF格式的动画文件“welcome”。单击“确定”。回到Dreamweaver窗口，会看到插入了一个有Flash图标的灰色方块（图3-21）。在属性面板上单击“播发（Play）”按钮，可以在窗口中看到动画效果。图3-21插入Flash3.1.6Dreamweaver和FrontPage比较Dreamweaver比FrontPage都是比较知名的网页设计软件，可称得上是网页设计中的佼佼者。但到底谁更好些呢？FrontPage占领的是中级市场，其地位犹如字处理软件中的Word，比较重视网页的开发效率、易学易用的引导过程；而Dreamweaver主攻的是网页高级设计市场，其地位犹如出版领域的PageMaker，所强调的是更强大的网页控制、设计能力及创意的完全发挥。Dreamweaver在功能的完善，使用的便捷上比FrontPage要强些。它囊括了FrontPage的所有基本操作，并开发了许多独具特色的设计新概念，诸如行为（Behaviors）、时间线（Timeline）、资源库（Library）等，还支持层叠式样表（CSS）和动态网页效果（DHTML）。而动态HTML是Dreamweaver最令人欣赏的功能，是它的最大的特色Dreamweaver与FrontPage比较，有几下几点优势：1.产生的垃圾代码少，网页可读性好，可以提高网页浏览速度；

2.通过图层功能，可以快速制作出复杂的页面，图片定位更容易；3.可基本解决IE与Netscape的兼容性；

4.设计思路广，内涵丰富，创作随意性强，可充分展现用户的创意。3.2FlashMX的介绍FLASHMX是目前非常热门，备受广大动画爱好者及网页制作者推崇的一个专业化网页制作软件。以其特有的简单易学、操作方便及适用于网络等优点，得到了广大用户的认可和接受，被广泛应用于互联网、多媒体演示及游戏软件的制作等方面。另外，由于FLASH还具有功能强大、可加入音效、生成文件小等特点，在美术设计、网页制作及教学光盘制作等诸多领域也得到了充分的应用。在FlashMX中，许多Flash5中的核心功能有所加强，扩展了一些有趣的领域，用户界面也变得更容易使用，并且具有更加强大的编程功能。3.2.1FlashMX软件界面介绍打开FlashMX后，在其界面中，包括标题栏，菜单栏，“主要”栏，绘图工具栏，“时间轴”面板，舞台，“属性”面板以及面板集等元素(如图3-22)。“主要”栏是由多个工具按钮组成，在工作界面上方，提供对常用命令的快速访问（如“新建”、“打开”、“保存”等命令）。绘图工具栏一般位于工作界面的左侧，其中包括十多种工具，主要供用户在绘制图形时使用。而舞台是进行动画创作的区域，拥护可以在其中直接勾画插图，也可以在其中安排导入的插图。与以前的Flash不同，FlashMX将多个常用面板集集成在“属性”面板中，位于舞台的下方，它可根据用户当前所选工具及进行操作的不同动态进行改变。另外FlashMX加强了面板的管理功能，将所有面板都嵌入到了一个面板集中。利用面板集可以对工作界面的面板布局进行重新组合，以适应不同用户的工作需要。另外，我个人认为“时间轴”面板是其中最重要和最复杂的了。时间轴的主要组件是图层、帧和播放头，主要用于组织和控制影片内容在一定时间内播放的层数和帧数。与胶片一样，Flash影片也将时长分为帧。图层就像层叠在一起的幻灯片一样，每个图层都包含一个显示在舞台中的不同图像。图3-22FlashMX界面3.2.2FlashMX的新功能在Macromedia公司推出的FlashMX中，改良了用户界面，重新设计了面板。对其易用性，创造性及功能性作了更进一步的增强，使其不仅可用于二维动画的制作，同时也可进行Web应用程序的开发。在FlashMX中，各个面板是编辑场景和时间线以及编写ActionScript的重要工具。设标记的面板被取消或替换，而成为能让用户按自己的喜好随意分解和组合的面板。其具各项功能也得到进一步的扩展，如将许多常用面板组合到了统一的“属性”面板中；新增了组件功能：支持视频流播放；所支持的文件类型更多；支持动态声音导入、键盘响应功能等。另外，在FlashMX中还新增了对麦克风和摄像头的支持，使用户可以直接通过麦克风和摄像头向flash中输入音频与视频。3.3Photoshop7.0的介绍Photoshop是Adobe公司开发的平面设计软件，一直受到平面设计人员的青睐。Photoshop以前的的版本虽然在图象处理方面始终占有一定的优势，但是在画笔功能和图形的制作及网络支持方面却还不够完美。Photoshop7.0是Adobe公司在2002年推出的图象编辑软件，它的功能更为强大，它将画笔的绘画功能和图形的制作功能推向更加令人振奋的高度，无论在图象处理、图形制作、文本编辑等方面，还是在新兴的网络编辑方面，其优越的性能和快捷的操作都是无可比拟的。Photoshop7.0的推出再次证明了Photoshop系统在图形图象处理领域中的重要位置。3.3.1Photoshop7.0软件界面介绍Photoshop7.0的界面主要分为菜单、工具条、选项面板、状态栏、工作区五大部分（如图3-23）。“菜单”部分在界面的正上方，囊括了所有的Photoshop命令。“工具条”在界面的靠左部分，是在设计过程中最频繁接触的部分。工具条由上至下依次分为：控制栏，程序标识图标，选择工具组，着色编辑工具组，专用工具组，导航工具组，颜色控件，快速掩膜和标准视图模式以及屏幕视图控件。图3-23Photoshop7.0的界面“选项面板”在界面的靠右部分，共计十一部分，分别是：导航（Navigator）面板，信息（Info）面板，设置（Option）面板，颜色（Color）面板，调色板（Swatches）面板，笔刷（Brushes）面板，层（Layers）面板，通道（Channels）面板，路径（Paths）面板，历史（History）面板以及动作（Actions）面板。“状态栏“是被多数人所忽略的部分，其实状态栏的功能极其重要。它位于界面的在下方，能实时地提供当前图像需要多少内存空间，多少硬盘空间等等很重要的信息。时刻了解这些信息，用户就会始终清醒地意识到如何进行操作，而不必担心系统死机。单击状态栏上的三角形即可看到它的五个部分：DocumentSizes（文档尺寸），ScratchSizes（缓存数据），Efficiency（效率），Timing（时间），CurrentTool（当前工具）。3.3.2Photoshop7.0的新功能在Photoshop7.0的所有新特性中，或许最棒的要属HealingBrush(修复画笔工具)了。它是为修整图片而设计的，可以清除图片上常见的尘迹、划痕、污渍和折纹。HealingBrush的特别之处是，在同一幅图片中或在图片与图片之间进行克隆时，它会自动地保留图像的明暗和纹理等属性。用Photoshop还可以自定制常用工具以及把所喜欢的设置状态存成新工具，以便重复使用。在Photoshop中还可以定制和储存不同类型项目的工作区。另外，Photoshop7.0的绘图引擎完全重做了。新的绘图引擎“可以创建过去在Photoshop中无法获得的特殊的图像”。它也使对工作过程的控制更为精确，如利用手写画板的压力感应,包括倾斜和喷笔指轮的特征。对于画笔，可以调整十几种设置，包括笔形、倾斜、间隔、松散度、抖动、直径、纹理、阴影等属性，而这些设置还可以存成自定制的画笔预设方案。Photoshop7.0的其他增强项还有：

分享图片前对图片加密——现在的Photoshop提供了对Acrobat5.0的安全设置的完全支持，允许在与他人在线分享PhotoshopPDF文件或将其加到AdobePDF工作流之前对其加密码或其他保护。

拼写检查——新的内建拼写检查器允许搜索和替换文本，可对同一文件中的多种语言进行拼写检查，并在同文档的一个文本层上或跨越全部文本层对拼写进行纠正。

打印省时省钱——PicturePackage的设计目的是帮助在一页上打印多个图像，以节省时间和打印耗材。可以打印成各种规格的页，如8x10、10x16和11x17；可以给每个图像加标签或文本，如版权注释和标题；可以在一页上打印一个以上的图像；并且可以按一个平面文档或者分数层输出图像。

与其他应用软件集成——Photoshop7.0在打印、网页、电子文稿和动态媒体上与其他Adobe专业图形程序紧密集成。第四章网站的分析和设计4.1原人事处网站的分析本次的毕业设计要求在原来的人事处网站的基础上进行完善。原来的人事处网站首页如图4-1和图4-2所示。现在，本人分析一下原来的人事处网站，说几点个人的想法：图4-1人事处网站首页上部图4-2人事处网站首页下部（1）原来的人事处网站首页的高度稍微过长。（2）在“人事科室”一栏下面（如图4-2），留有一大片空白，破坏了整体的平衡感。（3）“用户注册”一栏没有完成。（4）原来的“最新消息”一栏非常有新意，很吸引人。（5）“最新公告”和“最新消息”每次改换信息就要用网页编辑工具重新编辑和修改。（6）缺少一个对网站印象的留言板之类的页面。（7）“最新消息”一栏的内容太多，使得此栏的长度稍微过大。（8）“招聘信息”一栏下的“人事处网站简介”和二级网页中的“人事处网站简介”重复。可以将这一栏去掉。（9）“人事科室”一栏中的各个科室的有关消息没有添加上去。（10）“招聘信息”一栏中的有关消息也没有添加上去。当然，以上几点只是我个人的看法。4.2网站设计构想结合多种因素，本人在指导老师的指导下，重新设计和完善了人事处网站的首页（如图4-3）：校徽江大人事处FLASH欢迎二级网页按钮最新消息江大人事处简介重要消息人事处领导班子处长室人事处科室人才交流中心江大首页人事处网站简介人事处职能联系我们处长信箱计数器图4-3人事处网站首页设计草图（1）将网站首页的高度稍微减少了一些，页面居中。（2）去除在“人事科室”一栏下面的空白。（3）去除原来的“人事处网站简介”一栏。（4）减小“最新消息”一栏的的长度，以显示六七条消息为准，剩下的消息挤到MORE中。（5）保留原来的“人事科室”、“最新消息”、“招聘信息”、“人事处领导”等栏。（6）在首页中增加一个留言板按钮，以便让合作的同学加入一个留言板页面。（7）基本颜色以淡蓝色为准。下面介绍一下人事处网站的构成（如图4-4）：机构设置机构设置办公流程师资队伍规章制度文件下载招聘信息公共服务人事处网站首页处长室人才交流中心人事科劳资科师资科人事档案科网站简介人事处职能教师职工调入程序教职工调出工作程序教职工校内调配程序毕业生报到程序办理教职工婚姻状况证明程序图4-4人事处网站的构成根据图4-4可以看出，主页下面有九个二级网页。分别是机构设置、师资队伍、规章制度、文件下载、招聘信息、公共服务、办公流程、人事处职能和网站简介。其中机构设置又分处长室、人才交流中心、人事科、劳资科、师资科和人事档案科六个三级网页。办公流程又分教师职工调入程序、教职工调出工作程序、教职工校内调配程序、毕业生报到程序和办理教职工婚姻状况五个三级网页。二级网页中，机构设置介绍人事处的构成；师资队伍介绍有关师资力量的情况；规章制度介绍相关的制度和要求；文件下载主要提供相关文件的下载；招聘信息介绍相关的招聘信息；公共服务介绍人事处的服务承诺；办公流程介绍各种手续的办理流程；人事处职能显示的是人事处的主要职能；网站简介主要是简单介绍人事处网站的情况。三级网页中，处长室、人才交流中心、人事科、劳资科、师资科和人事档案科主要介绍各个科室的领导、功能和相关信息。教师职工调入程序、教职工调出工作程序、教职工校内调配程序、毕业生报到程序和办理教职工婚姻状况程序就是介绍各个程序的办理流程。

第五章人事处网站的实现5.1建立站点如果要用Dreamweaver设计编排网页，为建立网站做准备，就得预先设立站点（site）,以便所用的网页及网页中的元素有一个有效的提取路径。如果一个完成的网站，文件存放混乱，在浏览器中是无法正常分布的。打开资源管理器，在D盘上创建文件夹site，在site文件夹中增加文件夹renshi。该文件夹是存放以后将要设立的站点的所有内容的地方。回到DreamweaverMX，选择site/Newsite选项，在打开的定义站点属性对话框中（如图5-1），对将要建立的站点进行属性设置。选择“高级选项”，在“分类”选项中，单击“本地图5-1定义站点属性信息”。在“站点名称”中输入renshichu（人事处）；在“本地根文件夹”中搜索选择D:\site\renshi\；在“自动刷新本地文件列表”此选项中打上钩，一切如图5-1所示。一切设置好后，单击“确定”即可。到此，一个名为“renshichu”的站点已经建立，只不过它是一个没有内容的空的本地站点。5.2订立网站结构建立一个网站往往需要有许多相互链接的网页，每个网页还会有各种各样的插入元素。为了有效的管理这些网页和元素，必须建立一个合理的结构。在站点面板中右击文件夹site-renshi,在弹出的菜单中执行“新建文件”命令。如图5-2所显示：图5-2新建文件“新建文件”命令会增加一个没有命名的新文件。就其命名为index.htm。为文件命名一定要用小写的英文或者拼音字母。也可以右击文件夹site-renshi，在弹出的菜单中执行“新建文件夹”命令。就其命名为pic,用来存放index.htm的相关图片和文件。同样的方法，再增加机构设置、师资队伍、规章制度、文件下载、招聘信息、公共服务、办公流程、人事处职能和网站简介几个二级网页文件。将它们分别命名为jigou.htm、shizi.htm、guizhang.htm、download.htm、cpxx.htm、ggfw.htm、bangong.htm、zhineng.htm、jianjiei.htm。注意，后缀“htm”一定不能少。再增加相关文件夹,将其命名为jigou、shizi、guizhang、download、cpxx、ggfw、bangong、zhineng、jianjiei。用来存放对应页面的相关图片和文件。到此，已经有一个拥有几个网页的站点了。5.3网页制作虽然，前面已经有一个拥有几个网页的站点了，但是它是一个只有框架结构，而没有实际内容的空壳网站。为了给这个空壳网站加入内容，还得进行网页制作。打开DreamweaverMX,在站点面板中找到“renshichu”文件夹，双击新前建立的文件“index”，可以打开该文件的编辑窗口（如图5-3）。图5-3打开编辑窗口从窗口的标题栏中可以看到这个文件的名称index,在后面的括号中还有这个文件的所属说明。在属性面板的上面也能看到这个文档的标签。为了方便识别，在标准工具栏的“标题”中为这个文档输入一个标题“index”。如图5-4:图5-4文件的标题5.3.1设置文档的页面属性在页面的空白处右击在打开的菜单中，选择最下面的一项命令PageProperties(页面属性),打开“页面属性”对话框“如图5-5”。图5-5页面属性在打开“页面属性”对话框中，可以对各项页面属性进行设置。如添加背景图案或背景颜色，默认文本、链接、访问后的链接及激活链接等颜色的设置，等等。另外，为了避免网页在不同的显示器中偏左或偏右。可以将其设置为居中。方法如下：在“常用”选择卡中，点击“显示代码视图”或“显示代码视图和设计视图”按钮，打开代码窗口。找到其中最大的table，将其设为：align=“center”。5.3.2页面的分割在第三章，介绍DreamwearMX的插入工具栏中，提到“布局”一项共有“标准视图”和“布局布图”两种视图。在“标准视图”下，可以插入表格和在网页制作区画图层。在“布局视图”下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，可以再切换到“标准视图”后再转化为表格。因此，可以充分应用“标准视图”和“布局视图”这两种视图进行页面分割。1.插入表格在插入工具栏中，选择“布局”(Layout)选择项，单击“标准视图”（StandardView）按钮，再单击“插入表格”按钮，弹出表格设置窗口（如图5-6）,按照首页设计草图的要求，对表格进行设置。图5-6插入表格如果表格不合要求，可以通过属性面板进行整。在表格被选中的情况下，打开属性面板（Window/properties）。此时的属性面板即为表格的属性面板。在表格属性面板中，可以对表格进行重新设置。如缩放单元格、合并与拆分单元格、为单元格填色、为单元格填入背景图，等等。2.利用Layout(排版)进行版面设计在“布局视图”下单击“绘制布局表格”按钮，可以在网页制作区描绘表格。单击“绘制布局单元格”按钮，可以在描绘的布局表格中绘制单元格。选中描绘的布局表格或者单元格，打开属性面板，可以对属性进行重新设置。前面已经说过，Layout可以转换为表格。即在“布局视图”下单击“标准视图”按钮就可以了。这两种编辑状态是可逆的。3.层的创建在“标准视图”下，选择“插入层”按钮。将鼠标移到适当的位置，按住鼠标左键拖动，松开后就出现了一个方框。此时在叶面的左上方有一个小小的层标志。同样，也可以改变层的属性，以达到设计的要求。甚至还可以创建层中层，等等。另外，层也可以转换为表格。前提是确认所有的层没有重叠，可以在层面板中选上“防止重叠”一项。确认没有重叠后，执行“修改(Modify)／转换(Convert)／层到表格(LayerstoTable)”命令，在打开的“转换层为表格”对话框中（如图5-7所示），选取相应的选项，单击“确定”即可。图5-7转换层为表格对话框表格虽然直观，但有时不断变化的表格使得定位成为问题，常常使人头疼。而层是一个独立的区域，在定位方面较为灵活，还可以相互重叠。移动非常方便，不受限制。层虽然使用起来非常方便，但是在浏览器中的图层位置会与在编辑时的位置有所出入。因此，层的稳定性不如表格，所以，本人是将层和表格结合起来的方法，根据首页设计草图进行页面分割的。5.3.3插入图片页面分割好后，在单元格中插入图片和文本。Dreamweaver不是一个图像绘制和编辑的软件，因此网页中使用的图片要通过插入的方式，将在别的程序在生成的图象装入页面。选中要插入图片的单元格，然后在插入工具栏中选择对象选项卡中的“图像插入”按钮，打开“搜索图像”对话框，在其中选择有插入的图片，点击，插入。图5-8所显示的是在主页中插入“人事处”图片。如果插入的图片事新没有保存在“site/renshi/pic”中，会弹出提示对话框，询问是否将图片复制到“site/renshi/pic”中，选择“是”。在图片的属性面板中（图5-8），根据设计要求，可以改变图片的大小、尺寸，及对齐图片等。如果图片在网中排版中不太适合，可以用Potoshop来进行重新修改。图片的属性面板图片的属性面板图5-8插入图片5.3.4文本输入文本的输入与插入图片相似，选中要输入文本的单元格，在其中输入文本。然后在文本的属性面板中改变其属性，以达到设计的要求。还可以增加文字的样式。如图5-9所示，在文本的属性面板中选择“字体”中的编辑字体列表，打开“编辑字体列表”窗口（图5-10），选择“+”按钮，在“可用字体”中双击要用的字体，再点击“确定”就行了。图5-9增加文字样式图5-10编辑字体列表窗口5.3.5图片和文字的超链接网站中往往都不只是是一个网页，网页和网页之间需要链接，从而组成网站；网站与网站之间也要有链接，搜索网站才能发挥作用；用户要与网站之间进行互动，同样要有链接。建立超链接，可以活化网页，在网页中架起连接、沟通、互动的桥梁。超链接又可以分为对象为文件的超链接、对象为图形的超链接、对象为邮件的超链接、对象为URL的超链接四种。在网页中图片或文字都可以成为链接的媒介物，先看看如何让图片成为链接媒介物。选择要建立超链接的图片，此时，属性面板的左上角出现该图片的图标。在属性面板中单击链接（Link）栏右边的“文件搜索（SelectFile）”按钮，打开“文件搜索”对话框，寻找到将要链接的文件，单击OK按钮将其加入链接（Link）输入框中。如果是对象为邮件的超链接或者是对象为URL的超链接，则在链接（Link）输入框中输入网址或者E-mail地址就可以了。图5-11所显示的是对象为文件的超链接。在文档编辑状态下，看不到链接的结果。按F12打开浏览器窗口，将鼠标指针指向建立链接的图形，如果鼠标指针变成手形，就意味着该图形具有链接功能，单击该图形后可以链接到相应的网页文件、网站或邮件。图5-11图片的超链接让文字成为链接媒介物与让图片成为链接媒介物相似，选中要建立超链接的文字，在属性面板中的链接（Link）输入框中输入文件路径、URL或者E-mail地址就可以了。但是这样的文字超链接会有下划线，并且在超链接建成后，字体会变色。本人在网页设计中，将有些文字超链接去掉了下划线，并且当鼠标停在上面的时候，会成七彩色变换。方法如下：在代码窗口中找到title，在<title>index</title>下面加入如下代码：<Likehref=“style.css”ret=stylesheettype=text/css>/*去掉下划线*/<Scriptsrc=“raibow.js”></script>/*成七彩色变换*/关于去掉下划线和成七彩色变换的代码文件style.css和raibow.js附在后面的附录中。5.3.6插入文本域要增加“文本域”、“复选框”、“单选框”、“列表”等组件，就必须先要用到组件框，如果不事先插入组件框，就直接插入组件，Dreamweaver也会提示是否要增加组件框。插入组件框的方法如下：在“插入”工具栏中单击组件选择卡，使“插入”工具栏变为“组件”工具栏。如图5-12所示，用鼠标选中要插入组件框的单元格，再点击工具栏中最左边的“组件框”按钮。在单元格中就会出现一个红色的虚线框。这个红色的虚线框就是组件框。在默认状态下组件框不显示。只要执行“查看（View）/可视化助理（VisualAids）/不可见元素（InvisibleElements）”命令就可以看见组件框了。插好组件框后，用鼠标选中这个红色的虚线框，再点击“组件框”按钮右边的“插入文本域”按钮，在组件框中出现了一个“文字”输入框。这是一个交互式文本框，将由网上用户填写。可以在“文字”输入框的前面输入“用户名”等文字。在“文字”输入框的属性面板中可以对“文字”输入框的属性进行修改，以达到设计的要求。同理，还可以再添加一个“密码”的文本域，但最好在属性面板的“类型”中选择“密码”一项。这样，用户输入密码后，文本域显示的是“*”号。图5-12插入文本域5.3.7插入按钮仍然在相应的组件框中单击，在组件工具栏中单击“插入”按钮。在组件框中出现了一个带有Submit（提交）字样的按钮（图5-13）。图5-13插入按钮在属性面板中的Lable（标签）处输入文字“登陆”按下回车键，按钮上的字样随之改变。同理，可以再做一个“重置”的按钮，不过在属性面板的“动作”中要选择“重设表单”这一项。5.3.8插入FLASH图5-14插入FLASH预先用FlashMX做好相关的Flash动画，并保存在“site/renshi/pic”文件夹中。在Dreamweaver中点中要加入Flash动画的单元格，选择“常用”选项卡，再点击其中的“插入Flash”按钮，在打开的对话框中选择要用的Flash动画。回到Dreamweaver窗口，会看到插入了一个有Flash图标的灰色方块（图3-21）。在属性面板上单击“播放（Play）”按钮，可以在窗口中看到动画效果。如果Flash不合乎要求，在属性面板上单击“编辑（Edit）”图5-14插入FLASH5.3.9插入列表点击组件工具栏中的“列表”按钮，在组件框中插入一个列表框。选中此列表框，在属性面板上的“类型（Type）”中选择“列表（List）”,并将“高度（Height）”设为1。如图5-15所示：图5-15插入表框在属性面板的右侧点击“列表值（ListValues）”按钮，打开如图5-16所示的“列表值”对话框，输入相应的内容。输入完毕以后，单击“确定”按钮，这个列表框就完成了。在属性面板上的“初始化选定（Initiallyselected）”的列表中出现了刚刚输入的文字内容。在编辑页面中，也看到列表框中出现了文字。图5-16列表值对话框同理，再做一个“友情链接”的列表框。5.4为网站设立主页根据5.2所说的那样，补全所有的网页，再像完成主页那样完成所有的网页。到现在为止，人事处网站已经完成的差不多了。在站点面板上可以清楚的看到所有的网页文件和素材文件。然而其主页还只是名义上的，并没有进行实际的认定。在站点面板上，选择“编辑站点（Editsite）”命令。打开“站点编辑”对话框（图5-17）。选择“renshichu”,并单击“编辑（Edit）”按钮。图5-17编辑站点对话框在打开的“站点属性”对话框中（图5-18），选择“高级（Advanced）”选项卡，先在“分内（Category）”下选择“站点地图布局（SiteMapLayout）”命令，再在右侧“主页（HomePage）”栏中输入主页文档的根目录相对路径，单击“确定”按钮。图5-18站点属性对话框回到“站点编辑”对话框中（图5-17），单击“完成（Done）”按钮，完成站点属性的编辑工作。在如图5-19所示的位置上选择“本地视图（MapView）”命令将站点面板从文档视图转换为图5-19选择本地视图命令站点地图视图。此时站点面板中只出现了index一个文档的图标，位于面板上方中间的位置，说明该图5-20站点地图视图文件已经成为了人事处网站真正的主页了（图5-20）。图5-21扩大站点面板到整个窗口单击如图5-20所显示的按钮。此时站点面板扩大到整个窗口（图5-21），并形成了站点地图与文档视图并列的面板样式。单击站点地图视图中的index文档图标，右上角立即出现了圆形的链接图标。拖动圆形的链接图标到右侧文档视图中，寻找要链接的页面进行单击。站点地图视图中就多出了一个文档。按照这个方法，分别链接网站中的其它二级网页，可以形成直观的导航示意图。如图5-22所示：图5-22二级网页导航示意图单击index.htm下面的bangong.htm，在出现了链接图标后，还可以用上面的方法为bangong.htm链接下一级的网页。同理，也可以让jigou.htm去链接下一级的网页。最终形成全面的直观导航示意图（图5-23）。图5-23全面的直观导航示意图第六章网站的测试和完善由于本人从来没有设计过网页，也没有接触过有关网页设计的软件，可以说是没有任何经验可言。本次毕业设计是自己一边看书一边摸索的，做出来的东西肯定有一些不足甚至可笑之处了。本人在设计的过程中曾遇到许多的问题。如页面在显示器中总是便在一边、页面不够紧凑、整体的颜色太过鲜艳、图层的定位不是很准确、图片的应用不好，等等。后来在老师的指导下，终于一一解决。经过老师的指导和多次的修改，将本人和与我合作的同学所做的相结合起来，最终形成的页面如下（图6-1和图6-2）：图6-1首页的上部图6-2首页的下部（1）将网站首页的高度稍微减少了一些，页面居中。（2）去除了在“人事科室”一栏下面的空白。（3）去除了原来的“人事处网站简介”一栏。（4）减小了“最新消息”一栏的的长度，以显示六七条消息为准，剩下的消息挤到MORE中。（5）保留原来的“人事科室”、“最新消息”、“招聘信息”、“人事处领导”等栏。（6）完成了“用户注册”一栏。（7）“最新公告”和“最新消息”每次改换信息不必再用网页编辑工具重新编辑和修改。直接在数据库中添加就行了。（8）增加了一个对网站印象的留言板。（9）“人事科室”一栏中的各个科室的有关消息各添加了三条。（10）“招聘信息”、“处长室”、“人才交流中心”等栏中的有关消息也添加了上去。预先的设想，在网站的首页中基本上都实现了。图6-3和图6-4是二级网页中的机构设置和三级网页中的毕业生报到程序，也基本上都实现了预先的设想。图6-3二级网页中的机构设置图6-4三级网页中的毕业生报到程序二级网页中的机构设置和三级网页中的毕业生报到程序只是各级网页中所举的例子。至于其它各级的页面，也基本上都实现了预先的设想。由于页面太多和篇幅的关系，这里就不把图一一列出来了。小结本次毕业设计本人是和另一位同学合作，在原来的学校人事处网站的基础上进行了重新设计和完善。本人主要负责静态网站的构建、网页的制作和完善。另一个同学负责有关ASP和数据库方面的内容。通过本次毕业设计，使本人从原来对网页设计的一无所知，到略知一二、可以说出个所以然来。由于本人从来没有设计过网页，也没有接触过有关网页设计的软件，可以说是没有任何经验可言，再加上又缺少一些艺术细胞，做出来的东西难免有些不尽如人意。比如：主页的风格和二级三级的风格不是太一样；页面太过死板，等等。但是，本人还是庆幸可以通过本次毕业设计，了解了几个有名的软件，增强了自己的动手能力。为自己将来的生活和工作又作了一次有效的投资，为自己以后的人生又添加了一笔财富。在这里，我要衷心地谢谢林庆和吴旻两位指导老师，感谢他们在这段时间内对我的指导和不倦的教诲。万分感谢！参考文献DreamweaverUltraDev4与Flash5网页、动画、数据库完美结合洪锦魁研究室编中国青年出版社网页制作与设计教程陈语林梁建国周诚编著中国水利水电出版社DreamweaverMX标准案例教材陈青刘时燕王山编著人民邮电出版社FlashMX高级教程沈大林关点主编沈晰马广月李斌等编电子工业出版社FlashMX中文版互动实例雷波编著电子工业出版社Potoshop7.0图像艺术设计实例教程郭万军陈北京徐芹编著清华大学出版社

附录1.style.css--关于去除下划线的代码BODY{ FONT:9pt"MSSong","宋体";MARGIN:0px}TD{ COLOR:#000000;FONT:9pt"MSSong","宋体"}INPUT{ FONT:9pt"MSSong","宋体"}SELECT{ FONT:9pt"MSSong","宋体"}TEXTAREA{ FONT:9pt"MSSong","宋体"}P{ COLOR:#000000;TEXT-INDENT:2em}A.open:link{ COLOR:#ffffff;TEXT-DECORATION:none}A.open:visited{ COLOR:#87c5f8;TEXT-DECORATION:none}A.open:hover{ COLOR:#ffba4a;TEXT-DECORATION:none}A.open:active{ COLOR:#ffba4a;TEXT-DECORATION:none}A:link{ COLOR:#000066;TEXT-DECORATION:none}A:visited{ COLOR:#000066;TEXT-DECORATION:none}A:hover{ COLOR:#000066;TEXT-DECORATION:underline}A:active{ COLOR:#000066;TEXT-DECORATION:none}.small{ FONT-SIZE:9pt;LINE-HEIGHT:150%}.big{ FONT:9pt"MSSong","宋体"}.verdana{ FONT-FAMILY:verdana}.arial{ FONT-FAMILY:arial}.ll{ FONT:9pt"MSSong","宋体"}.red{ COLOR:red}.blue{ COLOR:#60cbff}.sel{ BACKGROUND-COLOR:#404040;BORDER-BOTTOM:white1pxdotted;BORDER-LEFT:white1pxdotted;BORDER-RIGHT:white1pxdotted;BORDER-TOP:white0pxdotted;COLOR:white;FONT-SIZE:9pt}.bg{ BACKGROUND-COLOR:#383838}.box{ BORDER-BOTTOM:black1pxsolid;BORDER-LEFT:black1pxsolid;BORDER-RIGHT:black1pxsolid;BORDER-TOP:black0pxsolid}.pp{ COLOR:#000066;FONT:9pt"MSSong","宋体"}HTML{ 新闻:}.newbig{ COLOR:#000000;FONT:14px/170%"MSSong","宋体"}2.rainbow.js—关于七色彩虹变换的