毕业设计个人网站的设计与实现

《毕业设计个人网站的设计与实现》由会员分享，可在线阅读，更多相关《毕业设计个人网站的设计与实现（14页珍藏版）》请在装配图网上搜索。

1、毕业设计(论文)个人网站的设计与实现 题目：个人网站的设计与实现 个人网站的设计与实现 个人网站的设计与实现前 言随着国际互联网的普及，很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web网站，这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚，那么企业建立网站就是必然的选择了。无论是专业的，还是业余的，很多人对网页制作颇感兴趣。事实上制作一个简单的网页并不困难，会使用Word的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了，而Dreamweaver却可以满足你的愿望，它是Macromedia公司开发的集网页制作和网站管理于一身的所见即所得的

2、网页编辑器。同样出自Macromedia公司的Flash,Fireworks在制作网站的过程中起到了锦上添花的作用，是个人网站实现的好帮手，在制作网站的时候经常会用到这些软件。 摘 要在互联网走进我们的生活之前，没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外，一个人也根本没有操作一份传播媒体的能力。现在不同了，互联网给我们提供了一个“表达自我的自由天地,你可以拥有自己的新闻邮件，你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的根本过程可以分为以下七个环节 :1 了解中国网络个人主页研究背景与开展现状2

3、 系统需求分析与总体设计3 熟悉网站开发模式、工具及环境4 把自己的作品和想要展示的使用动态网页技术(ASP) ，实现动态认真地选取测试用例，进行交叉测试7 网站的后期完善、宣传及开展方向其中 ,网页制作和使用动态网页技术(ASP) 实现动态内容更新是网站开发的核心内容。关键词：网页、制作、访问、链接AbstractEnters before our life in the Internet, nobody dares to vainly hope for has own newspaper, the magazine, the broadcasting station, the televi

4、sion station. Besides the policy in restriction, a person simply has not also operated dissemination media the ability. Now has been different, Internet has provided to us "the expression" free world,You may have own news mail, you may establish own individual website.So long as you also m

5、anage the success to be possible to attract the tens of thousands of subscribers, the reader,And establishes oneself in the multitudinous participants authoritative status. Establishes individual website the unit process to be possible to divide into following seven links:1 、understands the Chinese

6、network individual main page research background and the development present situation2 systems demands analysis and system design3 familiar websites developments pattern, tool and environment4 and wants own work the content which demonstrated to manufacture the homepage.5 uses dynamic homepages tec

7、hnology (ASP), realization dynamic content renewal.6 earnestly selects measured the test example, carries on the overlapping test7 websites later periods consummate, the propaganda and the development directionAmong them,The homepage manufacture and the use dynamic homepage technology (ASP) realizes

8、 the dynamic content renewal is the website development core content.Key word: Homepage, manufacture, visit, link 目 录第一章 引言1.1 什么是Internet1.2 Internet有哪些功能1.3 www简介1.4 网页根本构成元素1.5 软件的安装与启动1.5.1 软件的安装1.5.2 软件的启动1.5.3 创立快捷方式1.6 制作网页前的准备1.7 Dreamweaver的操作环境1.7.1标题栏1.7.2菜单栏1.7.3快捷工具栏1.7.4属性面板第二章 网站制作实战2

9、.1 站点2.1.1创立站点2.1.2 创立站点首页2.2.1 设置首页布局2.2.2 设置首页的页面属性2.2.3 查看和编辑头创立其它网页第三章 建立网页链接3.1 文字链接3.2 图像链接3.3 E-Mail链接3.4 文件下载链接3.5 在HTML语言中建立网页链接3.5.1 文字链接3.5.2 图像链接3.5.3 E-Mail链接3.6.4 文件下载链接第四章 结论致 谢参考文献 第一章 预备知识1.1 什么是InternetInternet的中文名为“国际互联网，又称“因特网。Internet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，它是采用开放系统协议的计算机通讯

10、网络。然而，Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的效劳，使得世界范围 要了解Internet，就必须先了解局域网。我们可以将同一地点的许多计算机使用网线连接在一起，构成一个高效率的计算机网络，所有处于网络 Internet有那些功能Web页浏览：这是目前利用最广泛、最直接的互联网效劳，通过浏览WWW万维网中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技创造，找到众多的就业信息几乎想找到什么样的信息，就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩，才能走进千家

11、万户。信息发布：通过Internet，不仅可以浏览别人发布在Web页上的信息，也可以将自己要发布的信息制作成Web页，也即网页，然后发布到Internet上，供全世界的人浏览。电子邮件：不同于传统邮件，电子邮件(E-mail)通过Internet传输，写信，发信，收信都在计算机上完成，一封电子邮件最短在一秒之 电子商务：现在网上交易已经成为现实，网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色，几乎所有的专家都预测，在未来的几年内，电子商务会飞速开展。在不久的将来，您可以做在电脑前进行各种各样的商务活动。网络游戏：通过Internet，可以与全世界的

12、玩家一起进行游戏对战，也可以协同作战。网络游戏已经成为信息产业全新的经济增长点，每年都为开发商带来巨额的利润。通过网络游戏，可以充分享受Internet给我们带来的乐趣。网络 ：网络 也称IP 。它采用Internet技术，利用专门的网络 软件，只需支付非常低廉的话费就可通话。Internet在电信市场上的应用将越来越广泛。1.3 WWW的简介WWW的全称为World Wide Web，含义是“环球网，又称“万维网、3W、Web。 WWW是一个基于超文本Hypertext方式的信息检索效劳工具。我们上网浏览到的网页就是这样的超文本，也就是HTML(Hypertext Mark-up Langu

13、age,超文本标记语言)文件，这些网页文件被放置到WWW效劳器上，并且都有一定的地址。当我们想浏览某个网站时，首先要在电脑上安装浏览器，如Internet Explorer或Netscape，然后在浏览器中输入网站的地址网址，就可以进入网站进行浏览。在这些网页中，都有超连接，当将鼠标指针移动到某个地方如文本或图象时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间跳转，我们之所以能在Internet的海洋中穿梭自如，正是超连接的功绩。WWW 为我们带来的是世界范围的超级文本效劳：只须操纵鼠标，就可以通过Internet从世界各地调来你所希望的文本、

14、图像、动画和声音等信息。通过使用WWW，一个不熟悉网络使用的人也可以成为Internet的行家。 1.4网页根本构成元素要学会制作网页，首先需要了解网页都是由什么元素构成的。文字：文本是构成网页的根本元素。一个最简单的网页可以只有几行文本。 图片：正是有个各种美丽的图片，网页才变得多姿多彩。动画：如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。 超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。其它元素：还可以在网页中添加声音、视频等元素。 1.5软件的安装与启动要使用网站设计软件，自然先要将这些软件安装到自

15、己的电脑中。安装完毕，还需要如何启动，如何创立快捷方式。下面就让我们来详细地看一看具体的操作步骤。1.5.1软件的安装安装之前，需要先了解软件对系统的要求。以Windows为例，系统要求如下： Intel Pentium II处理器或等效处理器，主频300MHz或更高。Windows 98Windows 2000Windows NT(具有Service Pack 3 或更高版本)、Windows Me或Windows XP.Netscape Navigator 4.0版或更高版本或Microsoft Internet Explorer. 96MB的可用内存RAM，建议采用128MB内存。分辨率

16、可达 800600像素的256色显示器建议颜色为百万颜色，分辨率到达1024768像素。CD-ROM 驱动器。检查一下您的计算机，看是否具备了以上条件。如果具备，将“Macromedia Studio MX程序会自动运行。如果不能自动运行，可以找到光盘放入光驱，安装程序会自动运行。可以找到光盘中的“Install Macromedia Studio MX程序或“Autorun程序并双击运行。Dreamweaver的安装比拟容易，几乎可以自动完成。下面简要说明一下安装步骤。操作步骤：1、将安装光盘放入光驱，安装程序自动运行，并出现安装界面。如果单击安装界面上的“Macromedia STUDIO

17、 MX安装，那么将会安装其下方所列出的软件。所有的安装会自动完成。2、单击Dreamweaver MX,开始安装过装过程.先是出现解压缩文件窗口,等待一会儿,便会出现安装向导对话框。单击“下一步按钮，继续安装过程。3、出现“选择目的地位置对话框，默认的盘是C盘，如果想安装到不同的位置，可以单击目的文件夹右边的“浏览按钮，并在弹出的“选择文件夹对话框选择不同的文件，如要安装在D盘那么可直接将路径中的“C：改为“D:。也可以在下面的“目录中选择其它的文件夹，设置完后，单击“确定，回到“选择目的地址对话框，单击“下一步继续。4、而后会出现“默认编辑器的对话框，默认为全选。如果希望让Dreamweav

18、er MX成为下面所列文件类型的默认编辑器，那么可以在这里做选择。选择完毕，单击“下一步按钮。5、出现“开始复制文件对话框，单击“下一步安装程序开始复制文件，过几分钟后，安装结束，单击“结束按钮，结束安装。 1.5.2 软件启动软件安装完毕后，我们就可以使用它了。安装程序已经自动在“开始菜单中参加了快捷方式。单击“开始菜单，将鼠标指针依次指向“程序|“Macromedia|“Macromedia MX,并在上面单击鼠标左键。 1.5.3 创立快捷方式使用“开始菜单启动程序的过程比拟烦琐。可以在Windows桌面或快速启动栏上创立快捷方式，这样可以快速的启动程序。具体实现方法是：在“开始菜单中找

19、到相应程序的快捷方式，不过这是不要用鼠标左键单击，而是用右键按住向桌面拖动，然后松开右键，会出现一个快捷菜单，在其中可以选择不同的命令，比方选择“在当前位置创立快捷方式或“复制到当前位置。 这样以后在运行程序时，就方便快捷的多了。 1.6 制作网页前的准备电脑必备：电脑速度够快，最好能够上网。操作系统：Windows 98/NT/Me/2000/XP.软件可选：其它软件：看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。 1.7 Dreamweaver MX的操作环境我们将工作界面分成了“标题栏、“菜单栏、“快捷工具栏、“属

20、性面板、“浮动控制面板5个局部来分别介绍。 1.7.1 标题栏Dreamweaver MX的“标题栏中将显示文字“Macromedia Dreamweaver MX如果翻开网页的话，在后面还会显示该网页的一些信息，如网页标题、所在位置及网页名称，右边有三个钮，分别对应Dreamweaver MX的最大化最小化和关闭的操作。 1.7.2 菜单栏“标题栏下面就是“菜单栏，栏中提供了“文件、“编辑、“查看、“插入、“修改、“文本、“站点、“窗口、“帮助10项菜单。单击其中任意一项菜单，随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码，这是该指令的快捷键，熟练使用快捷键将会有助于提高工作效

21、率。有些指令的右边会有一个小黑三角的标记，它代表该指令还包含下一级的指令，鼠标停留片刻即可显示。1.7.3 快捷工具栏“快捷工具栏指的是“菜单栏下边的3排按钮，选择菜单“查看/工具栏，勾选里面的“插入、“文档和标准3项，完整的快捷工具栏就显现出来了。 1.7.4 属性面板在网页编辑窗口的下面还有一个面板，它是有名的“属性面板，它在这个软件中起到举足轻重的作用。属性面板顾名思义，就是显示，调整属性的面板，根据鼠标所选中对象的不同，“属性面板在界面上也会有所差异，用户可以分别对不同的对象进行调整。第二章 网站制作实战 2.1 站点2.1.1 创立站点要制作一个网站，第一步操作都是一样的，就是要创造

22、一个“站点，这样可以使整个网站的脉络结构清晰地展现在面前，防止了以后再进行纷杂的管理。从菜单中选择“站点/管理站点在弹出的对话框中选择“新建，之后再选择其中的“站点，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“追梦人。填好后，单击“下一步，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用效劳器技术。单击“下一步，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到效劳器。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标，新建并指定

23、一个空的文件夹“E:/ding。之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程效劳器，弹出式菜单中有6中选择，这里选择“无。而后“下一步再“完成，即可。 2.1.2 创立站点内容站点创立完成后，就可以创立Web页来填充站点了。在“右侧浮动面板组中选择“文件/文件面板，此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择“新建文件，新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。由于“追梦人网站分为“平面设计、“动画制作、“网文精品、“经典回忆、“个人说明“这五个大栏目，所以继续用鼠标右击右侧，在弹出的菜单中

24、选择第二项“New Folder新建文件夹。执行五次操作，新建五个文件夹，并把它们重命名为graph、anim、books、music、letter，分别对应上面的五个大栏目。存放它们各自的 首页2.2.1 设置首页布局每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其他Web页，原那么上都必须通过首页来连接散播出去，可见首页是多么的重要。首页是翻开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.h

25、tm的居多。当然，后缀名为html也是正确的。具体设置方法是：右健单击“文件浮动面板中的index.htm,在弹出的菜单中选择“设成首页。 首页的布局有很多方法，在这里我所用到的是表格的“布局模式。“布局模式中的表格称为布局表格，单元格称为布局单元格。在绘制布局表格和布局单元格时，必须从“标准模式切换到“布局模式。直接单击“布局按钮即可。操作步骤：1、 在“插入快捷栏的“布局分类中，单击“布局表格按纽。2、 将变成“+形状的鼠标光标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创立了。如果绘制的是第一个表格必须从网页的最左上角开始绘制。3、 在这里要绘制多个表格，可以再次单击“布局表格按纽

26、进行绘制，也可以按住Ctrl键绘制多个表格。追梦人网站首页的布局如下图： 2.2.2设置首页的页面属性首先双击“文件浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性，之后弹出“页面属性对话框，假设选择主菜单“修改/页面属性项，也可以把翻开该对话框。在“页面属性对话框中，左侧窗口显示分类，其中包括了“外观、“链接、“标题、“标题/编码、“跟踪图像5项，右侧区域那么显示各类中可以设置的工程。“追梦人首页设置的属性如下列图所示： 2.2.3查看和编辑头内容一个网页文件结构上实际是由两局部组成，头head内容和主体body内容主体内容body是文档的主要局部

27、，也是包含文本和图像等的可见局部。头内容head是除文档标题外的不可见局部，包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键字。下面就以首页为例，说明怎样插入较常用的头 head内容。单击“菜单拦下面“插入快捷的下拉列表，选择其中的HTML类，此时右侧将会显示该类中可以插入的对象快捷按钮，再次单击第2个按钮“文件头旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。2.2.4 插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣

28、赏你网站的意愿。另一方面，网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制，导致了下载的速度不可能太快，因此，网页的大小就不能太大，其中关键就在于图像的大小了，否那么浏览者会失去等待的耐心，无论你的网站多么精彩也无济于事了。所以，在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的根底上，图片文件能够变的更小。1、 首先将光标停留在要插入图像的位置，然后单击“菜单栏下面“插入快健栏的下拉表，选择其中的“常用类，那么右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像按钮，单击它右侧的下拉列表，

29、选择第1项“图像。2、随即弹出“选择图像源文件对话框。从计算机磁盘中选择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。下面的“相对于下拉表框中，可选择文件URL地址的类型，如果选择“文档选项，表示图像地址相对于当前文档；如果选择“站点根目录选项，表示地址相对于根目录。在这里我要插入的是网站标志logo，插入logo图象，如下图：最后单击“确定按钮，即可完成插入图像的操作。2.2.5插入多媒体在Dreamweaver MX2004中，除了之前讲到的可以插入“图像外，还可插入动画、声音、视频等媒体元素，如Flash,Shockwave,Applets,ActieX及格Midi声音文件

30、等，并且还可以在Dreamweaver自身将光标停留在要插入Flash的位置，然后单击菜单栏下面“插入快捷栏的下拉列表，选择其中的“常用分类，右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体按钮，单击它右侧的下拉列表，选择第1项Flash图标。 步骤2 在弹出的对话框中选择扩展名为swf 的Flash文件，即可将其插入到Dreamwe aver的“网页编辑窗口中，可以看到，在这个窗口中Flash文件的大小。在 这里我的主页插入的一个动画，如下图： 2.2.6插入文本文字是人类语言最根本的表达方式，在网页中，文本内容也可以说是重要的组成局部，一个网站成功与否，它是最关键的因素。在这

31、最关键的因素。可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式网页中需要大量的文本，我们或以通过以下两种方式插入它们。一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最根本的输入方式了，和一些文本编辑软件如Microsoft Word的使用方法一样，选择好习惯的输入法，就可以运指如飞了。另一种是复制文本的方式。有些读者可能不喜欢使用Dreamweaver MX2004来进行打字的工作，而更习惯在专门的文本编辑软件中快速打字，如Microsoft Word和 Windows自带的记事本等，又或者读者已经准备好了要放入网页的文本的电子版本，那么我们就可以直接使用

32、Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下。翻开文本编辑软件如Microsoft Word，选中要复制的文本，它们将反白显示，执行菜单“编辑/复制命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将光标停留在插入文本的位置，执行主菜单“编辑/粘贴命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“网文精品中用到很多，全部是在word软件中排好ctrl+c,然后点击要粘贴的位置，crtl+v到Dreamweaver即可。 2.3创立其它网页还有其它的几个网站与主页的制作相同，一个网页是图象和文

33、字的组合。“平面设计中的图象插入和前面的介绍相似，并可以在属性拦中调节图象的大小。 在Dreamwerver中常常会用到Firework、Flash，它们是相辅相成，在主页中的主体局部就是用Firework,如下图： 在“个人说明中也用到这点，首先定好需要尺寸，在属性中设好背景，颜色等等，插入图象，输入文字，也word里的操作雷同。 第三章 建立网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容-网页的“链接。“链接，又称“超链接"Hyperlink,它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以参加“链接属性。在Dreamweave

34、r MX2004中，如果以“链接的媒介来划分的话，那么“链接可以分为“文字链接、“图像链接、“图像地图链接、“内部链接和外部链接、“E-mail链接、“命名锚记链接、“文件下载链接和“跳转菜单，共8种。其中局部内容在之前的章节中可能接触过，这里将对其进行更深入的讲解。 3.1文字链接“文字链接即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接。具体操作步骤如下所述。操作步骤步骤1 准备好已经制作完成的首页的各个栏目页面假设除了“链接，其他内容都已经制作完成了，该网站包含6个栏目，这里的5个栏目

35、-“平面设计、“动画制作和“网文精品、“经典回忆、“个人说明为例来进行讲解。步骤2 在Dreamweaver 中翻开首页，之后反白选取作为“链接的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“平面设计设置链接，首先要反白选中“平面设计4个文字。步骤3 观察“属性面板，其中包括一个“链接文本框。步骤4 接下来需要把链接的地址参加到文本框中，方法有3种。这里我用到的是直接点击文件夹图标，在文件夹中找到要链接的对象graph.htm。这样就建立了超链接。不过有点很重要，由于大多数效劳器都不支持中文文件名，而且对大小写敏感，因此采用英文文件名并统一大小写。如下图： 步骤5 在“链接文本框下

36、面还有一个“目标下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。如图： 实例中没有选择任何选项，保持空白，表示在原窗口中翻开链接网页。步骤6 还可以设置一些“链接的属性，这是前面讲过的内容。单击“属性面板中的“页面属性，选择其中的“链接分类，可以进行的设置有“链接字体、“大小、“链接颜色、“变换图像链接颜色、“已访问链接颜色、“活动链接颜色及“下划线样式。 步骤7 至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“平面设计这4个文字上时将变成手形，并且浏览器窗口下面的状态栏中会显示链接到的网页的地址，单击文字，页面会立即跳转到第1个栏

37、目中，这表示链接已经制作成功了。步骤8 同理，按照以上步骤，再为“动画制作和“网文精品“经典回忆“等其它栏制作指向对应栏目的链接。步骤9 通常在栏目页面中还需要有“返回首页的链接，单击其后可以跳转回首页，因此在各个栏目中还要插入“网站首页的文字，并且制作指向首页index.html的链接，制作方法不变。至此，整个“文字链接的实例就全就全部完成了。通过对这个实例的讲解，读者不仅应该学会如何为文字制作链接，还应用对“链接有了更加深刻的理解，链接的目的何在？它到底能够在网页的网站中发挥什么样的作用？怎样才能更好地使用它？这些是网页制作者更应该思考的问题。下面继续介绍其他类型的链接。 3.2图像链接“

38、图像也是常被使用的链接媒体，它和“文字链接非常相似。为图像参加链接，首先应该在网页中插入“图像，有关插入“图像或“导航条按钮的内容，接下来以我的网站“追梦人“为例，讲解如何建立“图像链接。操作步骤步骤1 首先仍然要准备好已经制作完成的首页和各个栏目的页面假设除了“链接，其他内容都已经制作完成了，该网站包含6个栏目，下面我们就动手为这6个栏目分别制作它们的链接。步骤2 在Dreamweaver中翻开网站的首页，之后选取要制作“链接的图像。实例中先为第3个栏目“动画制作设置链接，因此选中包含“动画制作4个字的图像。步骤3 观察“属性面板，在“链接文本框中输入链接的文字地址。可以使用之前讲过的“指向

39、文件和“选择文件的方法。步骤4 如果有需要，可以在“目标下拉列表中选择“链接网页显示的窗口方式，分别为-blank 、-parent 、-self或 top。实例中使用了默认出的保存空白选项的方式。步骤5 另外，读者还可以为图像增加“替代文本。实例中为第1个栏目增加栏目名称的“替代文本。步骤6 至此，第1个栏目的图像链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“动画制作4个文字上时将变成手形，同时浏览器窗口下面的状态栏中会显示出链接到的网页的地址，并且会显示出“替代文本“动画制作，单击文字，页面会立即跳转到第3个栏目中，这表示链接已经制作成功了。 步骤7

40、同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。步骤8 在栏目页面中制作“返回首页的链接，使得单击后可以跳转回首页，其制作方法不变。至此，整个“图像链像的实例就全部完成了。 3.3E Mail的链接E-Mail链接，是指当浏览者单击该链接之后，不是翻开一个网页文件，而是启动用户的E- Mail客户端软件如Outlook Express,并翻开一个空白的新邮件，供浏览者撰写内容来与网站联系人联系，这是一种最方便的互动方式。结合“个人说明网页，建立E-Mail链接的步骤如下所述。操作步骤步骤1 将光标停留在页面右下角要插入E-mail链接的位置。步骤2 选择“插入快捷栏中的“常用分类，

41、单击左侧第2个“电子邮件链接按钮。步骤3 在弹出的“电子邮件链接对话框中有两个输入项，分别是“文本和“E-Mail 。在“文本项中输入链接的文字，中文、英文均可，在E-Mail项中输入网站联系有的电子邮件地址，如实例中的 ding_zhuimeng123。 步骤4 单击“确定按钮，具有“E-Mail链接属性的文本就ding_zhuimeng123。插入到光标所在位置了，按下 Ctrl+S保存网页，再按下F12预览查看实际效果。 上面的方法只适用于文本的“E-Mail链接，如果想在其它的对象如图像上也参加这种链接，该怎办呢？下面介绍第2种建立“E-Mail链接的方法。其实很简单，与前面讲过的图像

42、参加链接的方法根本一样。先在页面中需要的地方插入图像，之后选中图像，并在“属性面板的“链接文本框中输入如下语句即可-mailto: ding_zhuimeng123 ?subject=网站的建议与第1种方法不同的是，E-Mail 地址前面增加了mailto:字样。用这种方法就可以给图像等其他对象建立“E-Mail链接了。 3.4文件下载链接“文件下载链接的原理很简单，只要链接文件属于浏览无法识别的关型，便都会使用IE浏览器直接进行下载，并保存到本地计算机中。浏览器无法识别的文件类型有很多，这里就介绍一个最常用的，以zip或rar为后缀名的压缩格式文件，这种文件可以使用主流的压缩软件如winzi

43、p、winrar来制作。下面我们就业以实例来说明。在前面“插入多媒体一章中，我们曾经讲过直接链接文件的方式来插入“视频，即直接在“链接文本框中输入“文件名+名后缀名，如olympus.wmv。单日击这个链接，经过数据下载后，Windows系统将启动自带的媒体播放器Windows Media Player 来播放该视频。操作步骤步骤1 先将视频文件olympus.wmv通压缩成olympus.rar文件，放入站点的media文件夹下。步骤2 将文件路径输入至“链接文本框中。步骤3 保存网页，按下F12预览，在浏览器中单击“下载精彩广告视频链接文本，会弹出“文本下载选择框，单击其中的“保存按钮。步

44、骤4 在“另存为对框中选择保存到本地计算机中的位置，实例中为“经典回忆文件夹。之后单击“保存按钮，压缩文件即保存到该位置中。至此，“文件下载链接便制作完成了。读者可以翻开“我的文档文件夹，解压缩olympus.rar文件，随时欣赏下载影片。本设计中未用到此链接，在此只作简单介绍。 3.5在HTML语言中建立网页链接 3.5.1文字链接在HTML语言中用超链接标记指向一个目标。其根本格式为：<a href=URL文本内容</a>举个简单的“文本链接的实例，该实例相对应的HTML代码如下所示。<html><head><title>文字链接<

45、;/title></head><body><p>a href-“index2.htmltarget=-blank> 平面设计</a>新开窗口，-blank)</p><p><a href=index3.html>动画制作</a>原窗口，默认为空</p><p><a href=index4.html>网文精品</a></p></body></html>解释 href:是<a>标记的一种属性，该属性中

46、的URL等于链接目标文件的地址。“ Target:也是<a>标记的一种属性，相当于Dreamweaver“属性面板中的“目标，它的值等于-blank,效果是在新窗口中翻开。除此之外还包括其他3种：-parent,-self和-top。这和Dreamweaver中“目标下拉列表中的 文本内容：如代码实例中的“平面设计。这些文本将放在使用了链接属性href和目标属性target的 <a>与</a>标记之间，产生了链接的效果。提示再提醒读者一下，<p>为段落标记，在Dreamweaver中是由Enter回车键产生的。3.5.2图像链接举个简单的“图像链

47、接的实例。该实例相对应的代码所示。<html><head><title>图像链接</title></head><body><p><a href=web/web-001.htmtarget=-blank><img src=images/btn-001-out.gifalt“平面设计=width=85height=18border=0></a>新开窗口，-blank</p><p><a href=wallpaper/wallpaper-001.htm&

48、gt;<img src=images/btn-002-out.gifalt=“原创壁纸width=85height=18border=0></a>原窗口，默认为空</p><p>a href=3d/3d-001.htm><img src=images/btn-003-out.gifalt“三维作品=width=85height=18border=0></a></p></body></html>解释仔细观察代码可以发现，“图像链接与“文本链接惟一的差异就在于<a>与<

49、a/>之间的内容。“文本链接中<a>与</a>之间的内容是文字内容，而“图像链接中就肯定是图片内容了。之前讲过，插入图片使用“<img src=图像的“<的标记，这里当然也不会例外。而是还可以使用<img 的属性，如alt替换文本、width宽、height高、及border边框等 3.5.3ail链接该实例相对应的“代码如下所述。<html><head><title>Email链接</title></head><body><p><a href=mailto

50、:jiangnansohou ?subject=网站的意见建议“ >给我写信</a></p></body><html>解释 只需使href 等于“mailto：邮件地址？subject=主题即可，其中subject为可选项，“？subject=主题也可以不加。 3.3.5文件下载链接“文件下载链接实例的代码如下所述。<html><head><title>文件下载链接</title></head></body><a href=media/Olympus.rar>

51、;下载精彩广告视频</a>解释 只需使href等于“文件的路径即可。本章讲解的是网站的链接的方法和技巧。能让浏览者很轻松的地观看是很重要的，这其中的关键就再于“链接“了。 第四章 结论经过几周的工作，个人网站的设计与实现终于完成，本次设计根本完成任务书要求的功能。查找信息、文件共享等。由于是个人网站，在设计上就没有什么拘束和限制，完全发挥自己的想象力和创造力，展现自己的兴趣和个性。本次设计用Macromedia公司开发的专业HTML编辑器Dreamweaver,对Wed站点、Web页和Web应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，用户可以快速创立

52、页面而无须编写任何代码。并且。借助Dreamweaver，还可以使用效劳器语言例如：ASP,ASP.NET,ColdFusion标记语言CFML，JSP，PHP。本设计的页面不是很精美，这写些缺乏之处还待后期的开发和改良。 致谢繁忙的设计终于完成了，在设计期间我受到了来自四面八方的帮助和支持。首先要感谢指导老师，感谢 在百忙中抽空对我们的设计和论文提出建议。特别要感谢的是程老师对我们严格的要求，严谨的治学态度。接下来要感谢我的同学给我的大力支持，是他们在设计之初协助我掌握了Dreamweaver的使用方法。在设计中他们给我提了不少的意见，还帮助我解决了很多技术上的问题。最后还要感谢这些年来给予

53、我淳淳教导的各位老师，他们给予了我的知识让我收益一生，谢谢！ 参考文献1姜楠 完美网页设计与制作 中国青年出版社 2004年5月2欧阳峰，陈朝荣 电子商务技术 中国财政经济出版社 2001年8月3中国IT培训工程编委会 Flash Mx实例教程 珠海出版社 2003年1月4赵子江 多媒体技术应用教程4版 机械工业出版社 2004年8月第4版5李东博 杜学智李增辉 精彩网页制作三剑客 西安电子科技大学出版社 2003年10月6贺凯 焦超 Flash Mx 2004动画制作典型范例 中国出版社 2005年2月 芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿

54、薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃

55、莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀

56、膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄

57、蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈

58、芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃

59、蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇

60、莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁

61、膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆

62、蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂薇衿羀莈薆羁膅芄薅螁羈芀薄袃芃膆薃羅肆蒅薂蚅节莁薁螇肄芇蚁袀芀膃蚀羂肃蒁虿蚁袆蒇蚈袄肁莃蚇羆羄艿蚆蚆腿膅蚅螈羂蒄蚅袀膈莀螄羃羀芆螃蚂膆膂螂螅罿薁螁羇膄蒇螀聿肇莃蝿蝿节芈莆袁肅膄莅羄芁蒃莄蚃肄荿蒃螅艿芅蒃袈肂膁蒂肀袅薀蒁螀膀蒆蒀袂羃莂葿羄膈芈蒈蚄羁膄薇螆膇蒂