个人网站的设计与实现

1、二七届学生毕业论文（设计）毕业设计(论文)论文题目 个人网站的设计与实现英文 Personal Webside Design and accomplish学 院 数学与计算机学院专 业 计算机网络技术系姓 名 学 号 指导教师 个人网站的设计与实现摘 要 在互联网走进我们的生活之前，没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外，一个人也根本没有操作一份传播媒体的能力。现在不同了，互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件，你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的基

2、本过程可以分为以下七个环节：1. 了解中国网络个人主页研究背景与发展现状2. 系统需求分析与总体设计3. 熟悉网站开发模式、工具及环境4. 把自己的作品和想要展示的内容制作成网页5. 使用动态网页技术(ASP) ，实现动态内容更新6. 认真地选取测试用例，进行交叉测试7. 网站的后期完善、宣传及发展方向其中 ,网页制作和使用动态网页技术(ASP) 实现动态内容更新是网站开发的核心内容。关键词：网页、制作、访问、链接AbstractEnters before our life in the Internet, nobody dares to vainly hope for has own new

3、spaper, the magazine, the broadcasting station, the television 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 establis

4、h own individual website.So long as you also manage 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 fol

5、lowing seven links：1. understands the Chinese 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 manu

6、facture the homepage5. uses dynamic homepages technology (ASP), realization dynamic content renewal6. 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

7、the use dynamic homepage technology (ASP) realizes the dynamic content renewal is the website development core content.Key word: Homepage, manufacture, visit, link前 言 随着国际互联网的普及，很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web网站，这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚，那么企业建立网站就是必然的选择了。 无论是专业的，还是业余的，很多人对网页制作颇感兴趣

8、。事实上制作一个简单的网页并不困难，会使用Word的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了，而Dreamweaver却可以满足你的愿望，它是Macromedia公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器。 同样出自Macromedia公司的Flash,Fireworks在制作网站的过程中起到了锦上添花的作用，是个人网站实现的好帮手，在制作网站的时候经常会用到这些软件。目 录摘要-1前言-1第一章：绪论-31.1 我国网络发展现状-31.2 个人网站的目的-3第二章：个人网站的开发环境-42.1 Dreamweaver简述-42.2 Dreamweaver的操作环境

9、-42.3 ASP技术-5第三章：需求分析-73.1 概述-73.2个人网站的问题定义与可行性分析-73.3 个人网站整体要求-8第四章：网站制作-94.1站点-94.2首页-94.3创建其它网页-11第五章：网页链接的建立-125.1 链接的概念-125.2 创立连接-125.3文字链接-155.4影像链-165.5 Email链接-185.6文件下载链接-215.7在HTML语言中建立网页链接-22第六章：总 结-25致谢-26参考文献-27第一章 绪论1.1 我国网络发展现状 2010年1月15日，中国互联网络信息中心（CNNIC）发布了第25次中国互联网络发展状况统计报告（以下简称报告

10、）。报告数据显示，截至2009年12月，我国网民规模已达3.84亿，互联网普及率进一步提升，达到28.9%。随着我国互联网普及率的逐年提高，互联网正在走进人们的工作与生活。CNNIC报告调查显示，在家和单位上网的网民比例在2009年有了明显的提高，有83.2%的网民选择在家上网，另有30.2%的网民选择在单位上网，互联网作为人们日常工具的价值正在日益提升。1.2 个人网站的目的个人网站最开始的动机可能是出于兴趣或一种爱好，但时间一长，这些兴趣或爱好便为自己积累了许多资源，比如数量可观的访问量。当这些资源积累到一定程度的时候，商业意识比较敏感的个人网站站长便开始寻求开展电子商务，将自己手中的资源

11、进行商业操作，从而，个人网站开始赚钱。当然，目前比较流行的个人网站赚钱方式可能更多的还是依赖于广告，但从目前个人网站的广告收入来看，它已经陷入了一个低谷。所以，如果个人网站想要得到长足的发展，或者希望自己的网站能够赚钱，那么必须主动出击！事在人为，作为一个个人网站，我们可以拥有自己的产品，并把它们卖掉，依靠自己来赚钱！一、个人网站自主经营的可行性 网民正在不断地快速增长。另有调查表明，网民的平均收入水平提高了，也就是说网民的消费水平也提高了。我们个人网站为什么要依靠做广告来赚钱？我们难道不可以转变一下思路吗？打个比方，你的网站日访问量有1000左右(也就是说每天有1000个人左右进入你的“商店

12、”)，做广告相当于代理别人的产品，就算卖出去了也只能返回给你一部分的利润。但是如果你的“商店”卖自己的产品，那么大部分利润就掌握在自己手中。广告赚钱只是做网站的“副产品”，真正的产品是你自己的网站。记住：你的网站是一座金矿，可能你只是开采了“浏览量”这一层矿产，更深层次的矿产你可能还尚未开发出来！你完全可以将你自己网站的产品进行出售，比如将你网站的精品内容印成一本书，然后在网上卖你自己的书。还有更多的经营方法，关键是你要去不断探索！下面我就结合我对互联网的观察与自己的实践经验告诉大家如何经营自己的产品。对于网络经商，起初一定要抱平和的心态！因为中国的网民毕竟不是很多，大家不要过分期望网络经商会

13、给你带来很大的效益。要把网络经商作为一种锻炼，说句现实的话：“现在赚小钱，以后赚大钱”。这是我对网络经商的一种“长期作战”的战略观点。第二章 个人网站的开发环境2.1 Dreamweaver简述Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用 它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。

14、它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。Dreamweaver8.0的特点如下。1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用

15、户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性Dreamweaver 8继承了Fireworks、Flash和Shock

16、wave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。8、丰富的媒体支持能力 可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。2.2 Dreamweaver的操作环境我们将工作界面分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。

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

18、边会有一个小黑三角的标记，它代表该指令还包含下一级的指令，鼠标停留片刻即可显示。2.2 .3快捷工具栏“快捷工具栏”指的是“菜单栏”下边的3排按钮，选择菜单“查看/工具栏”，勾选里面的“插入”、“文档”和“标准”3项，完整的快捷工具栏就显现出来了。2.2 .4属性面板在网页编辑窗口的下面还有一个面板，它是有名的“属性面板”，它在这个软件中起到举足轻重的作用。属性面板顾名思义，就是显示，调整属性的面板，根据鼠标所选中对象的不同，“属性面板”在界面上也会有所差异，用户可以分别对不同的对象进行调整。2.3 ASP技术Active Server Pages：“动态服务器网页”，一般简称为“ASP”，A

19、SP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”，不像VBScript或 JavaScript是在客户端（Client）的浏览器上执行，若使用VBScript来设计程序，客户端（Client）在浏览器中可以显示程序执行的结果，可是，客户端（Client）若使用Netscape浏览器就无法显示VBScript的执行结果。ASP的特点如下：1、任何开发工具皆可发展ASP只要使用一般的文书编辑程序，

20、如Windows记事本，就可以编辑。当然，其他网页发展工具，例如，FrontPage Express、 FrontPage等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是使用那些所见即所得的网页编辑来写，可能会发生一些意想不到的离奇状态。通过各家浏览由于ASP程序是在网络服务器端中执行，执行结果所产生的HTML文件适用于不同的浏览器。2、语言相容性高ASP与所有的ActiveX Script语言都相容，除了可结合HTML，VBScript、Java script Active X服务器组件来设计外，并可经由plug-In（外挂组件模组）的方式，使用其他厂商（Third Party）所

21、提供的语言。3、隐密安全性高如果我们在浏览器中直接查看网页的原始代码，就只能看到文件，原始的ASP程序代码是看不到的！这是因杰程序先于网站服务（Web Server）端执行后，将结果转换成标准HTML文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的ASP程序并不会轻易地被看见进而被盗用。4、易于操控数据库ASP可以轻易地通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Access fox pro、dBase、Oracle等等，另外，亦可将“文本文件”或是“Excel” 文件当成数据库用。5、面向对象学习容易具备有面向

22、对象（object-Oriented）功能，学习容易，提供了五种方便能力强大的内建对象：Request、Response、Sever、Application以及Session，同时，若使用内建的“Application”对象或“Session”对象所撰写出来的程序可以在多个网页之间暂时保存必要的信息。6、ASP的六大内部对象对象名称 功能描述Request Response Server Session Application Object Context 从客户端取得信息将信息送给客户端提供一些Web服务器工具储存在一个Session内的用户信息，该信息仅可被该用户访问在一个ASP-Appl

23、ication中让不同的客户端共享信息可以用来配合Microsoft Transaction 服务器进行分布式事务处理所以我选择了ASP结合Dreamweaver架构个人站点。第三章 需求分析3.1 概述 需求分析最根本的任务是确定“为了满足客户的需要，系统必须做什么”。具体的说，应该确定系统必须具有的功能和性能，系统要求的运行环境，并且预测系统发展的前景。必须仔细分析系统中的资料，既要分析系统中的数据流，又要分析长期使用的资料储存。该阶段不是确定系统怎样完成它的工作，而仅仅是确定系统必须完成哪些工作，也就是对目标系统提出完整、准确、清晰、具体的要求。3.2个人网站的问题定义与可行性分析一、明

24、确架设网站的目的及客户要求 通常情况下，架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流，具有较强的目的性，我的个人网站一般体现在：为了展示自己的风采，让大家和我一起分享我的心得与经验，让和我有共同爱好的朋友有一个倾诉的地方。二、我的个人网站概貌因为是个人网站，所以只是选择了自己擅长和喜爱的内容，在突出自己的风格和特点的同时，还应用了现在流行的网站设计技术和数据库技术。因此将网站设计分为前台页面展示平台和后台在线管理平台。三、功能划分网站设计有新闻更新，浏览者可以在首页浏览自己喜欢的新闻，并且可以在留言板和大家交流，在后台管理页面中，通过身份认

25、证，管理员我，可以对网站信息进行管理。站内的其它页面均是我自己的精心收藏，与大家一起分享3.2.1 功能定义（1）管理员权限：修改所有页面内容、增删改文章、管理评论、修改公告、修改管理员自身信息、编辑各页面栏目、添加删除图片、添加删除音乐、修改版权信息等。（2）浏览者权限：阅读所有页面内容、添加评论、添加留言、浏览文章、浏览图片、浏览音乐等。3.2.2 可行性分析系统可行性分析主要从经济可行性、技术可行性和操作可行性三方面去分析。（1）经济可行性分析 从系统的开发和效益关系上讲，采用asp这个可以开发出交互、高性能Web数据库应用的技术进行开发，效率较高。该系统的开发不需要花费太多的经费，只需

26、在域名和服务器空间租用上有开销，因为个人网站不涉及超大容量的文件存储和庞大的访问量，因此对于服务器来讲，要求不会太高，开销不会很大。因此，从经济性分析是可行的。（2）技术可行性分析根据现有的技术设备条件，在技术上实现也是可行的。在设备方面，前期系统开发在本地端制作完成，只需通过ftp软件上传至服务器端即可，而软件开发所需条件相对较低，对于系统开发及运行环境均不造成任何困难。对于系统开发人员基本具备了计算机专业知识，有一定的编程基础，熟悉和掌握数据库及网络相关知识，具备开发条件。（3）操作可行性 该系统操作上非常简单，对于用户来说，只要具备IE浏览器5.5版本以上即可通过域名搜索即可登录本站。3

27、.3 个人网站整体要求3.3.1 功能要求（1）页面风格简洁明快，给人以较好的视觉印象。（2）用户浏览、操作均便捷，迅速。（3）用户权限、功能的设置要准确无误。3.3.2 系统性能要求在目前硬件设备条件下，要求处理程序的速度相对较快。因此，在程序设计阶段，优化代码，降低处理时间是需要考虑的问题。3.3.3关于未来需求由于系统开发时间较短，可能不是很完善，在运行过程中还会遇到一些问题，所以应在系统设计过程中对未来可能需要的扩充和修改做好准备，以便及时变更第四章 网站制作4.1 站点4.1.1 创建站点要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地

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

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

30、Folder（新建文件夹）”。执行五次操作，新建五个文件夹，并把它们重命名为graph、anim、books、music、letter，分别对应上面的五个大栏目。存放它们各自的内容。之后再次新建1个文件夹，命名为images,用来存放“所有的图象文件”的内容。之后在个栏目的文件夹里还要建立想相应的栏目网页。4.2首页4.2.1 设置首页布局首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。当然，后缀名为html也是正确的。具体设置方法是：右健单击“文

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

32、。4.2.2设置首页的页面属性 首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。 在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。4.2.3查看和编辑头内容一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文档的主要部分，也是包含文本和图像等的可见部分。头内容（head）是除文档标题外的不可见

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

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

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

36、romedia Flash按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。 在Dreamweaver MX 2004文档中，可以插入媒体文件包括Flash Shockwave影片、QuickTime 、AVI java、 applet Active X控件以及各种格式的音频文件。要在浏览器中播放放Flash 动画，必须在浏览器中集成“Flash 播放器 （Flash Player）”。其中，Internet Explorer通过ActiveX控制来实现，Netscape Navigator则是通过相应的插件来实现的。在最新的Netscape Navigator和Internet E

37、xplorer浏览器中，均已集成了 Flash动画播放功能。操场作步骤：步骤1 将光标停留在要插入Flash的位置，然后单击菜单栏下面“插入快捷栏”的下拉列表，选择其中的“常用”分类，右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体”按钮，单击它右侧的下拉列表，选择第1项Flash图标。步骤2 在弹出的对话框中选择扩展名为swf 的Flash文件，即可将其插入到Dreamwe aver的“网页编辑窗口”中，可以看到，在这个窗口中Flash文件的大小。在 这里我的主页插入的一个动画。4.2.6插入文本 在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。

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

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

40、并可以在属性拦中调节图象的大小。 在Dreamwerver中常常会用到Firework、Flash，它们是相辅相成，在主页中的主体部分就是用Firework在“个人说明”中也用到这点，首先定好需要尺寸，在属性中设好背景，颜色等等，插入图象，输入文字，也word里的操作雷同。第五章 网页链接的建立5.1 链接的概念 链接（或称超链接）是网页与网页之间一种单向的连接关系。也是WWW的魅力所在。为了把Internet上众多的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网面上的链接，浏览者才能在信息海洋中尽情遨游。网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就

41、是本章要讲的内容-网页的“链接”。“链接”，又称“超链接（Hyperlink）,它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver MX2004中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。其中部分内容在之前的章节中可能接触过，这里将对其进行更深入的讲解。5.2 创立连接 5.2.1 创建超链接1. 使用属性检查器创建链接 这是最常用的一种方法。使用“属性检查器”可以把当前文档中的文本或

42、图像链接到另一个文档。使用属性检查器创建链接的步骤如下：（1）选择需要创建链接的文本或图像，例如选择文字“评审办法”如图所示（2）在“属性检查器”中的“链接”中输入要链接到的文件名称如图所示。 （3）或单击浏览文件图标打开“选择文件”对话框，选择要链接的文件“howtoselect.htm”，如图所示（4）选择链接文档的载入方式。如图所示选择“_self”方式。注意：默认情况链接的文档在当前窗口或框架中打开“_self”方式，“_blank”是将被链接文档载入到新的未命名浏览器窗口中，“_parent”是将被链接文档载入到父框架集或包含该链接的框架窗口中，“_top”是将被链接文档载入到整个浏

43、览器窗口并删除所有框架。 (5)设置完成，效果如图所示。 2. 使用指向文件图标创建链接使用指向文件图标创建链接的步骤如下：(1)在文档窗口选择文档或图像。样选择“评审办法”。(2)在“属性检查器”中，拖动链接域右边的指向文件图标，按住鼠标左键并拖动连向“站点面板”中的一个文档，如“index.htm”。如图所示。 (3)释放鼠标左键，链接被创建，在属性面板的链接地址框中出现已链接的地址即可。 3. 直接为页面元素创建链接（1）在文档窗口选择文本。（2） 按住Shift键，在选定的文本上拖动鼠标指针，拖动时指向文件图标出现，如图所示：(3)指定链接到目标，例如链接到“index.htm”，释放

44、鼠标，链接被建立,这就样链接就被建成。结果与上面的方法相同这里不在重复。注意：给图像建立链接的方法与上相同。 5.3文字链接“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。具体操作步骤如下所述。操作步骤步骤1 准备好已经制作完成的首页的各个栏目页面（假设除了“链接”，其他内容都已经制作完成了），该网站包含6个栏目，这里的5个栏目-“平面设计”、“动画制作”和“网文精品”、“经典回顾”、“个人说明”为例来进行讲解。步骤2 在Dreamweaver 中打开首页，之后反白选取作为

45、“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“平面设计”设置链接，首先要反白选中“平面设计”4个文字。步骤3 观察“属性面板”，其中包括一个“链接”文本框。步骤4 接下来需要把链接的地址加入到文本框中，方法有3种。这里我用到的是直接点击文件夹图标，在文件夹中找到要链接的对象graph.htm。这样就建立了超链接。不过有点很重要，由于大多数服务器都不支持中文文件名，而且对大小写敏感，因此采用英文文件名并统一大小写。步骤5 在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。实例中没有选择任何选项，保持空白，表示在原窗口中打开链接网页。

46、步骤6 还可以设置一些“链接”的属性，这是前面讲过的内容。单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。步骤7 至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“平面设计”这4个文字上时将变成手形，并且浏览器窗口下面的状态栏中会显示链接到的网页的地址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。步骤8 同理，按照以上步骤，再为“动画制作”和“网文精品”“经典回顾“等其它栏制作指向对

47、应栏目的链接。步骤9 通常在栏目页面中还需要有“返回首页”的链接，单击其后可以跳转回首页，因此在各个栏目中还要插入“网站首页”的文字，并且制作指向首页index.html的链接，制作方法不变。至此，整个“文字链接”的实例就全就全部完成了。通过对这个实例的讲解，读者不仅应该学会如何为文字制作链接，还应用对“链接”有了更加深刻的理解，链接的目的何在？它到底能够在网页的网站中发挥什么样的作用？怎样才能更好地使用它？这些是网页制作者更应该思考的问题。下面继续介绍其他类型的链接。5.4影像链接在图像的影像地图中创建链接的步骤如下：(1) 选择图像，如图所示。 (2) 单击“属性检查器”左下角的矩形热点工具按钮，在图像上拖动创建影像，如图所示。 (3) 为影像部分创建链接。到“aboutus.htm”，并且设定“目标”为“_blank”，“替代”为“关于本次大赛”，如下图所示。 、 （4）设置完成后用浏览器浏览的效果如上图所示。 5.5 Email链接在网页上创建电子邮件链接，方便用户意见反馈。当浏览者单击电子邮件链接时，可打开浏览器默认的电子邮件处理程序，收件人邮件地址被电子邮件链接中指定的地址自动更新，无须浏览者手工输入。 使用插入邮件链接命令创建电子