个人网页设计毕业论文3.docx

1、个人网页设计毕业论文3个人网页设计毕业论文3序 言 目前，Internet网络正以人们难以想象的速度发展，无论是公司，企业和个人的简单宣传，网页都能体现它的无与伦比的魅力。不管是在Internet中的网页，还是要在上面发布自己主页，都需要选用一款 web页制作工具，在众多的网页制作工具中Microsoft公司FrontPage是最常见也是最受欢迎的。 在Frontpage的众多版本中，FrontPage 2000是现在的主流软件，它将Frontpage Explorer和Frontpage Editor合二为一。这也许是Frontpage2000与Frontpage98相比最大的变化了。这样以

2、来我们更方便的使用两者，使管理站点与编辑站点有机的结合在一起。在管理站点的时候如果使用“报表”服务，可以更加明了的知道站点的情况，哪些是没有连接上的文件，哪些文件属于慢速网页。Frontpage2000在对新技术的支持上面也有了很大的加强。比如:CSS，DHTML等。当然在设计网页时还需用到其它的软件为辅助工具，如Dreamwear、Photoshop、flash等，我这次毕业设计的题目就制作网页，我花了近一个月的时间进行选题，制作，尽量将自己的网页制作的完美一些，也是一次很好锻炼自己的机会。 欢迎浏览我的网页，但是我的网站还不够完善，还有许多不足，希望老师多 提宝贵意见。 第一章 Front

3、Page 2000 概述 1.1 FrontPage 2000功能简介 1.2 启动FrontPage 2000 第二章 个人网页的构架与内容 2.1 网站的总体结构 2.2 结构模块的功能简介 第三章 网页的创建 3.1 建立新站点 3.2 创建网页 3.3 文本的输入与修改 3.4 图片的导入与编辑 3.5 设置网页背景 3.6 网页中的超连接 3.7 表格与表单 第四章 网页特效与组件制作 4.1 动态HTML效果 4.2 网页过渡效果 4.3 悬停按钮 4.4 设置移动字幕 4.5 特殊按钮的制作 第五章 实习心得 参考文献 第一章FrontPage 2000 概述 几年前，许多人还不

4、知道什么Internet，现在，在任何一个地方，任何一个时间，都会听到人们在谈论着互联网，Modem，Home page等这些在字典里都找不到的新名词。网络的到来，带给人们的不只是快捷，方便，它带来的是划时代的进步。现在，每一个在网上冲浪者，只要愿意都可以在网络上免费申请一个空间，将自己的作品和个性展现给世界，如何在网络上创建站点，发表文章呢,FrontPage的诞生，使这一切都变的易如反掌。 FrontPage首先是一个编辑工具，它可以编辑Internet上以HTML格式保存的所有文件(称为网页)，并可以利用PhotoDraw和Microsoft GIF Animator编辑处理图像和动画，

5、此外还可以在网页中插入各种插件，包括:Java，ActiveX，JavaScript，以产生各种特殊效果。与FrontPage 98相比，FrontPage 2000对动态HTML的支持更加完善，无需任何插件，就可以产生各种动画效果。FrontPage 2000是一个管理站点的工具，可以利用不同的方式查看各个网页之间的关系，调整站点的组织结构，使整个站点的条理清晰。FrontPage 2000还是一个Internet出版工具，利用它提供的网络发布工具，可以轻松完成站点的发布过程。 1.1 FrontPage 2000功能简介 1( 简易的操作界面 FrontPage编辑器和FrontPage资

6、源管理器已经被集成了，所以可以在一个应用程序中创建和管理站点。 由于FrontPage 2000已被微软纳入了Office家族，因此不论是在外观及操作上，都和Office的其他软件十分相似，进入FrontPage 2000，就会看到熟悉的工具栏、图形化的操作界面，只要使用过Office家族产品，就能轻易地学会FrontPage 2000，并能结合原有的Office文件，将之放入网页中。Office 2000和FrontPage 2000共享一般主题、工具栏、菜单和快捷方式，以及诸如格式刷、HTML帮助和背景拼写检查等工具。 2( 所见即所得的编辑环境 FrontPage 2000具备所见即所得

7、的功能，也就是说，设计者不需使用记事本、Word等文字编辑工具撰写HTML语言，也无需凭空推测页面文件的内容。在编辑的过程中，只要使用工具栏或功能表，FrontPage 2000就会自动将所做出的页面文件编译为HTML文件，你只要专心设计网页就行了。 3( HTML的编辑功能 FrontPage 2000也提供直接编辑HTML源代码的功能，如果你会编写HTML语法，就可以在HTML编辑环境中进行修改。FrontPage 2000还提供了Microsoft脚本编辑器，在编辑器中，可以编写HTML语法，当HTML又有新的规格出现时，也可以在编辑器中加入FrontPage原本不支持的语法。 4( 模

8、板与向导 既然FrontPage 2000是属于Microsoft Office家族的一员，那么在Office中被广泛使用的“模板”及“向导”在FrontPage 2000中也不会被漏掉。为了帮助你创建具有专业化外观并且设计完善的网页，FrontPage提供了多种网页模板。例如，当你想建立一个新站点时，可以先利用向导，建立一个商业或个人用途的站点结构。也可以利用FrontPage的模板来创建两列式的网页或带有搜索表单的网页。使用FrontPage 2000编辑新页面时，也可以用打开新文件的方式，套用更多的模板样式，让使用者在构建站点或编辑网页时变得更为容易。 5.主题 如果你自认为没有美术天份

9、，无法做出精致的网页，那么FrontPage的主题功能将为你解除这个烦恼。FrontPage 2000内置60种主题。主题是一组可应用在网页上的设计元素和颜色方案，主题赋予网页一致的和引人注目的外观。使用主题是快速容易地加入精采的网页内容和赋予网页专业外观的方法。每种主题都包括不同的背景、字型、配色、动态按钮等，这样就再也不必为了设计网页而伤脑筋了。 6(绘制表格 在FrontPage 2000中建立表格是非常容易的事情，除了可以指定表格的行数、列数之外，还可以使用工具按钮直接绘制表格框线或者清除不要的部分，就好像在纸上绘制表格一样简单 7(文件管理功能 FrontPage 2000有强大的文

10、件管理功能，就好比Windows 95中的资源管理器一样，站点内所有文件的移动、复制、删除、更名等操作，都可在FrontPage 2000中完成。 8(自动更新链接 不论一个Web Page的规模大小也不论它包含几个网页，都必定有不少的链接标记。这些链接不只是网页与网页间的超链接，还包括网页中的文字、图片及其他文件与页面间的链接，这些链接信息少则数十成百、而且稍具规模的站点链接信息甚至可达数万之多。在这样的情况下，如果随便更改一个图形名称，可能就有一些链接信息要跟着变动。 以图片的链接来说，我们所看到图文并茂的网页画面，其实是一个纯文字的HTML文件。文件中除了网页的文字内容外，还用了一些标记

11、式(TAG)的语法，注明每张图片的名称及存放位置，然后浏览器再来解读这些语法，并依照链接位置去找图片，最后一一放到画面上形成完整的网页。因为图片并不是内嵌在文件之中，所以一旦图片的文件名或存放位置变了，浏览器就找不到它，而造成链接断开。以往我们必须手动来修复这些断开的地方，但是在FrontPage 2000中做这些修改工作，它便会自动测试有哪些链接需要修改，并且快速地帮你更新。 9(轻松建立站点结构 以前规划站点时，总是先要在纸上画出一个树状的结构组织图，再根据草图在每个页面中加入互相链接的标记。现在使用FrontPage 2000可以直接在屏幕上建立组织图，并且自动在页面中加入链接导航栏 1

12、0(工作进度 对于公司企业或是小型工作室来说，往往是好几个人联手建立一个站点，此时分工合作就显得特别重要了。FrontPage具有指派工作的功能，可以根据需求来分配每个人的任务，例如交待某人要更新哪一个网页，并且随时检查工作完成状况，以免有两个人做同样的事情或某些事情没有人做。 11(支持多种网络技术 为了增强网页的生动性，FrontPage可以把ActiveX控件、插件、Java Applet和PowerPoint动画加到网页中，并且支持在HTML中嵌入JavaScript、VBScript等脚本语言。此外，FrontPage 更内建了许多Dynamic HTML 的命令，可以让你的网页充满

13、动态效果，并支持CSS样式表，网页编排将更有弹性等等。这些是HTML最新的规则，FrontPage 2000也全力支持。 12(其他特色 当然FrontPage的功能不仅仅如此，它可以将你的站点发布到Internet，还可以建立表单、加入声音、图像、滚动式的分割帧(Frame)等强大功能，这些功能会让你发现制作网页就是这么简单。 1.2 启动FrontPage 2000 如果FrontPage 2000安装完毕，可以按下列步骤启动FrontPage 2000: 1) 单击“开始”按钮，在“开始”菜单中单击“程序”。 2) 在“程序”菜单中单击Microsoft FrontPage。 3) 打开

14、的FrontPage 2000窗口。 FrontPage 2000的界面与FrontPage 98有所不同，它把原来的FrontPage Explorer和FrontPage Editor合并在一起，这样更方便我们管理和编辑网页文件。 1.3 退出FrontPage 2000 在退出FrontPage 2000前应先把自己所作的网页存盘，然后在退出。 选取“文件”菜单下的“保存”或“另存为”进行网页的保存。然后选取“文件”菜单下的“退出”选项退出。 第二章 网页构架及内容介绍 2(1 总体结构 我的网站选题是根据自己的爱好文学兴趣选取的，主题为 “文学驿站”，主要内容包括一些好的小说、散文、诗

15、歌等，还有一些其它的服务，比如一些友情链接、好的网站的介绍等。下面列出的是主页的主体构架: 诗歌 文章目录 散文 文学欣赏 文章正文 小说 与我联系 著名作家著作 经典文学 文章正文 本站公告 多来米中文网 友情链接 新海天书苑 榕树下 本站调查 新浪文化 文章推荐 全景中文网 设为主页 图1 2.2各部分的功能介绍: 1( 关于本站 关于本站即是本站的首页，包括本站的介绍和一些主要的目录链接信息。如图所示: 其中文学欣赏的页面中包括一些好的文章、小说等，并且左面有它的目录。 如图: 2(“设为首页”，是将自己的网站设成IE的主页，以便以后方便浏览自己的网站。 3(“与我联系”，主要设给我的朋

16、友或是给我提意见的人，使用它直接可以发电子邮件到我的邮箱。 4(“添加到收藏夹”，是为了方便那些感觉我的网页还不错的人，以后需要的时候随时可以调出来，不用记住网址，以方便浏览或参考。 5(“本站公告”是为发布一些本站最新的消息，比如说现在网络上流行什么文章，什么歌曲或是什么病毒，或是本网站增加了哪些栏目等。 6(“本站更新”主要是本站的文章的更新。 7(“酷站推荐” 这是我从网上找到的一些好的文学网站和服务网站，包括同学录等。它们的网址分别是: 9(“本站调查”，是通过数据库来统计浏览本站的人对本站的看法，可以看看在家的评价，同时也可以统计本站的访问率，通过这些多找自己的不足，使网站越办越好。

17、在浏览本站时你就可以投票来表示你对本站的看法。 10(“文章推荐”主要列出一些好的文章的部分内容，通过这些可以很方便的浏览自己想看的文章。 11(“友情链接”主要是方便一些喜欢文学的朋友浏览其它好的文学网站，把我自己常去的认为比较好的网站推荐给大家。 第三章 网页的创建 3.1 建立新站点 启动FrontPage 2000之后，就可以在其中建立一个新站点，或者打开一个存在的站点。如果要建立一个新站点，可以按下列步骤执行: 1) 从“文件”菜单的“新建”子菜单中选择“站点”命令。 2) 在打开的“新建”对话框中，选择要用来创建新站点的模板或向导。 3) 在“指定新网站的位置”框中，键入或选择新站

18、点的名称。 , 也可以用别的方法创建一个新站点，如:从本地计算机、网络或全球广域网导入一个站点，将文件夹转换为站点。 , 创建一个子站点的步骤和创建一个站点是相同的。 创建只有一个网页的站点 对于想从头开始创建网站全过程的用户，可以从建立单网页站点开始逐步地增加内容和网页，然后建立网页之间的链接。 1) 从“文件”菜单的“新建”子菜单中选择“站点”命令。 2) 出现“新建”对话框，选择“只有一个网页的站点”选项，在“指定新站点的位置”选项栏中输入新站点的地址。 3) 单击“确定”按钮。FrontPage自动建立一个只有一个网页的站点，并激活此网页等待添加具体内容。 3.2 创建网页 3.3 文

19、本的输入与修改 文字的常见应用方式如下: , 标题 在一个站点的主页中，通常会放一个醒目的标题，告诉浏览者这个站点的名字，我的网站的名字是“文学驿站” 只不过是通过Photoshop处理过的一个图片。 , 大小 在网页页面中，可以通过调整文字大小，让文章编排更为活泼，以使网页更加生动。 , 层次 整个段落内缩可以使网页具有层次感。 , 样式 粗体、斜体、下划线是最基本的文字样式，但是，“下划线”样式会让人误以为是超链接。 另外，在适当的地方换上不同的字体，也能让网页更具有吸引力。我的网页的正文全是采用12px的大小，标题除外。 , 颜色 色彩并不是图片的专利，也可以为文字加上颜色，强调文章的重

20、点，并使网页更为绚丽。不过最好注意一下颜色的搭配，而且不要滥用，以免使网页整体效果看上去不协调，我的网页经过多次调整，最终我决定全部使用桔黄色，这样的颜色比较柔和，还比较朴素。 中文的输入 有了页面的构想之后，就要把文件内容输入，由于我们建立的是一个中文站点，在输入中文之前，必须先将页面的编码设置成简体中文的编码方式，这样页面才能正确的显示中文，否则可能会看到一堆乱码。 换行与段落 在输入文字时，若一行长度超过屏幕的显示范围，FrontPage会自动换行，不需另外使用其他按键换行。 设置文字格式 在FrontPage 2000中，对文字的格式提供了相当完整的设定功能，文字格式的变化也因此多种多

21、样。在FrontPage 2000中的“格式”工具栏上面包含了许多工具按钮，这些按钮可以快速地改变文字的外观。 设置字体 在“字体”按钮下拉列表中，列出了目前你的计算机中所安装的所有字体，只要选定要变化字体的文字，再选择所需的字体，就可以快速地将文字设置为各种不同的字体，使页面看起来更加活泼生动。 设置字型 如果想要加强某句话的语气时，可以使用“格式”工具栏上的“加粗”按钮、“斜体”按钮、“下划线”按钮，在文字上增加粗体、斜体或是下划线的效果，让浏览者能明显感受到这些文字样式的变化 设置字号 使用“格式”工具栏上的“字号”按钮可以改变字体的大小。 字体颜色 为了让网页充满活力，可以为文字加上颜

22、色。选定页面中要设置字体颜色的文本，单击“格式”工具栏上的“字体颜色”按钮下拉箭头，就会打开一个颜色下拉框在标准颜色中选择颜色。如果标准颜色中没有需要的颜色，选择“其他颜色”命令，在出现的“其他颜色”对话框中选取所需的颜色。 设置字体效果 同Office其他应用程序一样，FrontPage 2000也提供了许多特殊的文字效果。 设置字符间距 在FrontPage 2000中也可以通过调整字符间距来设置文字的特殊效果。 段落格式的设置 一个网页的外观取决于对文字，尤其是个别段落应用的格式编排。 设置对齐方式 对段落设置对齐方式是最常见的格式编排手段。 更改行距或间距 可以通过调整段落的行距或段前

23、段后的间距来设置网页的页面布局。 在文本周围添加边框 你可以在文本周围添加边框，然后设置边框的样式、颜色、边距和宽度。 给文本添加底纹 你可以给文本添加底纹。底纹(如同网页背景)可以是颜色或图片。 3.4 图片的导入与编辑 3.4.1图片的导入 只有文字的网页会显得单调，达不到所需的感官效果。因此在制作网页时，都要在页面加上适当的图片。我先在Photoshop中将图片处理好，然后根据需要导入当前的位置。 , 导入当前站点中的图片 如果要插入的图片已经存在于当前的站点中，可以在当前站点中直接导入图片。 1) 将插入点设置在要插入图片的位置。 2) 从“插入”菜单的“图片”子菜单中选择“来自文件”

24、命令。 3) 出现“图片”对话框，当前站点中的所有图片都会显示在文件列表中，选择所需的图片文件。 4) 单击“确定”按钮，所选图片出现在插入点位置。 , 在计算机中选择图片文件 也可以在计算机中的文件夹中选择图片插入到文档中。 1) 将插入点设置在要插入图片的位置。 2) 从“插入”菜单的“图片”子菜单中选择“来自文件”命令。 3) 出现“图片”对话框，单击“从计算机上选择一个文件”按钮。 4) 出现“选择文件”对话框，在“搜索”框中选择图片所在的文件夹在文件列表中选择所需的图片文件。 5) 单击“确定”按钮，选择的图片出现在插入点位置。 , 使用Web浏览器来选择网页和文件 在Interne

25、t上有许多专门搜集图片的站点，可以直接连接到这些站点去寻找图片。 1) 从“插入”菜单的“图片”子菜单中选择“来自文件”命令。 2) 出现“图片”对话框，单击“使用Web浏览器来选择网页或文件”按钮。 3) 打开FrontPage 2000预设的浏览器，通常是Internet Explorer和Netscape。在浏览器中，用鼠标将网页上的图片直接拖拽到所需位置即可 , 加入GIF动画 为了让网页的设计能更活泼生动，可以在页面中加入一些简单的动画。一般来说，简单的动画大多保存为GIF89a的格式，因此要在页面中加入动画，其步骤和插入图片一样。 1) 将插入点设置在要插入动画的位置。 2) 单击

26、“常用”工具栏上的“插入文件中的图片”按钮。 3) 出现“图片”对话框，在文件列表中选择所需的GIF动画文件。 单击“确定”按钮。 , 保存文件 在网页中加入了适当的图片以后，保存文件时，会出现“保存嵌入式文件”对话框，询问是否要将图片保存在Web页中。 如果是从网络上插入的图片，就不会出现“保存嵌入式文件”对话框，而是直接将图片的路径保存下来。也因为这样，当图片的网址路径发生变动时，会因找不到该图形文件而显示不出图片 3.4.2编辑图片 , 调整图片大小 插入图片的大小如果不符合页面的要求，可以在要调整的图片上单击一下鼠标选定图片，用鼠标按住图片四周的任一控点向外拖拽，到达适当大小后，放开鼠

27、标即可放大图片;如果向图片中心拖拽的话，可以缩小图片。 , 移动图片的位置 如果要移动图片的位置，请先选定图片，再将图片拖拽到想要放置的位置，放开鼠标即可。 , 在图片中加上文字 选择要加入文字的图片，然后单击“图片”工具栏上的“文本”按钮，此时图片中即会出现文字框，直接在文字框中输入文字，输入完成后，单击文字框以外的地方即可。 注意:要在图片中加入文字，必须先将图片转为GIF格式。 , 制作透明图 你可以选择图片中的一种颜色为透明的，然后在该颜色出现的任何地方，背景都会直接显示出来。图片只能有一种透明色。若你为一个已经指定了透明色的图片选择透明色，则原始的透明色就不再是透明的。 , 剪裁图片

28、 选定要剪裁的图片，单击“图片”工具栏上的“剪裁”按钮，在图片上会出现一个裁剪框首先按照调整图片大小的方法，拖拽剪裁框四周的控点，将剪裁框调至适当大小，然后在“常用”工具栏中单击“剪裁”按钮，剪裁框外的部分将被裁掉。 , 冲蚀及黑白图 使用“图片”工具栏中的“冲蚀”按钮及“黑白模式”按钮，可以将图片洗白或是转换成黑白图。 , 调整图片的对比及亮度 使用“图片”工具栏中的“增加对比度”按钮可以增加图片的对比度使用“图片”工具栏中的“减低对比度”按钮可以降低图片的对比度。 , 设置替代图及替代文字 当我们在Internet上浏览时，有时图片文件会因为某些原因无法读取，或是在图片文件未下载完全时，页

29、面上会以一些低分辩率的图片或简单的文本来取代原来的图片文件，这 样不会因为无法看到图片而影响到对整个页面的了解。 3.5 设置网页背景 在制作网页时，如果对网页的背景感到不满意时，可以对网页背景进行重新设置。 用图片作为背景 将图片作为网页背景的操作步骤如下: 1) 从“格式”菜单中选择“背景”命令。 2) 出现“网页属性”对话框，选中“背景”选项卡。 3) 在“格式”区域中选择“背景图片”复选框，然后单击“浏览”按钮，选择所需的背景图片。 4) 单击“确定”按钮。图片应用在网页的背景上 实例2:设置网页背景 1)打开相关的Web站点，在文件夹列表中选择要设置背景的网页，进入编辑状态2)使用鼠

30、标右键单击网页，在出现的快捷菜单中选择“网页属性”命令。出现“网页属性”对话框，选中“背景”选项卡。选中“背景图片”复选框3)单击“浏览”按钮，在出现的“选择背景图片”对话框中选择背景图片文件;如果列表中没有所需的图片文件，可以单击按钮使用浏览器查看网上图片;也可以单击按钮，在本地计算机硬盘其它目录下选择图片文件。单击“确定”按钮应用所选的图片。4)网页应用了所选的图片作为背景。背景在Web网页中起着非常重要的作用。它可以体现出网页的整体风格，还能控制网页的整体布局。 5)单击“保存”按钮，保存制作好的网页，此时会出现“保存嵌入式文件”对话框，保存嵌入的背景图片。 3.6网页中的超连接 3.6

31、.1超链接的组成 超链接包含两个部分:链接的载体以及链接的目标地址。 链接的载体 链接的载体指的是显示链接的部分，也就是指包含超链接的图像或文字。 1( 文字链接 以文字作为链接的载体就是文字链接。 2( 图像链接 以图像做为链接的载体就是图像链接。 用浏览器观看一个超链接的时候，它通常采用与普通文本不同的颜色显示，而且加上了下划线，网页设计者可以决定超链接采用什么颜色，以及是否显示下划线。此外，将鼠标移到一个超链接上方时，鼠标指针会变成一个手掌形状。同时，与这个超链接相对应的全部或部分URL也会在窗口底部的状态栏显示出来。 链接的目标地址 链接的目标地址指的是单击超链接后所显示的内容，有可能是进入这个网站的另一个网页，也有可能是进入另一个站点的另一个网页，也可能是下载文件，甚至是打开电子邮件信箱。 在加入超链接之前，必须先设计好链接的载体和链接的目标地址，是以文字来建立链接，还是以图片来建立链接，而这个链接又要连到哪里去，怎样做才能符合浏览者的需求，这都是必须考虑的地方。 3.6.2创建超链接 网页中的超链接一般有三种: 一种是在同一站点内的网页之间的超链接;一种是站点外部的超链接，例如，从你的站点上链接到微软公司的主页:;还有一种是同一网页中的超链接，也就是书签。 站点内部网页的超链接 1(链接到已有的页面 建