收发室网站网站策划与编辑理念论文.doc

《收发室网站网站策划与编辑理念论文.doc》由会员分享，可在线阅读，更多相关《收发室网站网站策划与编辑理念论文.doc（42页珍藏版）》请在三一办公上搜索。

1、 北京林业大学 网站策划与编辑理念论文题 目 收发室网站 专 业 机械设计制造及其自动化 2011年 4月 26 日前言随着现代计算机科学的发展，网络已经越来越普及，如今网络已经成为每个人生活的一部分，同时网络也提供了一种很好的信息交换平台，成为各个单位进信息交流和提高工作效率的有效手段。然而，我们学校的收发室对报刊信件的收发仍然采用比较传统的方式。通过书写纸条，放入信箱，通知收件人，等待取信件的人来取。一方面，信件传送的效率比较低，另一方面，工序多，容易出错。而且没有写信箱的信件没法通知，造成延误。基于此背景，我决定设计收发室信件收发的网站，方便师生的信件收发。目 录第一章 网站策划的背景及

2、定位7第二章 网页的结构图16第三章 网站各版块分析173.1 站点173.1.1 创建站点173.1.2 创建站点内容183.2 首页193.2.1 设置首页布局193.2.2设置首页的页面属性213.2.3查看和编辑头内容233.2.4 插入图像233.2.5插入多媒体243.2.6插入文本263.3创建其它网页27第四章 建立网页链接284.1文字链接294.2图像链接314.3 E Mail的链接334.4文件下载链接344.5在HTML语言中建立网页链接354.5.1文字链接364.5.2图像链接374.5.3 ail链接394.3.5文件下载链接40第五章41结束语42第一章网站策

3、划的背景及定位1，背景学校的收发室对报刊信件的收发仍然采用比较传统的方式。通过书写纸条，放入信箱，通知收件人，等待取信件的人来取。信件传送的效率比较低，工序多，容易出错 。无信箱信件没法通知，造成延误。网络发展迅速，利用网上进行信息的发布通知学校师生进行邮件的收发，方便快捷。2，定位此网站为校园内部网站，目的在于方便本校师生邮件的收取。为非盈利性网站。第二章网页的结构图根据功能的需求进行网站结构的设计，所得结构如下： Internet的中文名为“国际互联网”，又称“因特网”。 Internet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，它是采用开放系统协议的计算机通讯网络。然而，

4、Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。 要了解Internet，就必须先了解局域网。我们可以将同一地点的许多计算机使用网线连接在一起，构成一个高效率的计算机网络，所有处于网络内的终端机或计算机都能享受网络内所有的资源，比如程序，图文数据等。这种计算机网络因为一般都局限在一定区域中，我们称之为“局域网”（Local Area Network,简称LAN）,它是在日常工作中用得最多的一种小型计算机网络。局域网所覆盖的地理范围比较小，通常不超过几

5、十公里，甚至只在同一座建筑物内或者邻近的几座建筑内。像常见的校园网，一座写字楼内部的网络等都属于局域网。 而Internet则不是指单个区域范围内的网络，而是指将全世界的各中不同类型的计算机网络连接起来的一个全球性的网络。Internet上有取之不尽，用之不竭的信息资源。对于Internet中各种各样的信息，所有的人都可以通过网络的连接来共享和使用。1.2 Internet有那些功能 Web页浏览：这是目前利用最广泛、最直接的互联网服务，通过浏览WWW（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息几乎想找到什么样的信息，就有什么信息

6、。正是有了WWW、Internet才会变得如此丰富多彩，才能走进千家万户。 信息发布：通过Internet，不仅可以浏览别人发布在Web页上的信息，也可以将自己要发布的信息制作成Web页，也即网页，然后发布到Internet上，供全世界的人浏览。电子邮件：不同于传统邮件，电子邮件(E-mail)通过Internet传输，写信，发信，收信都在计算机上完成，一封电子邮件最短在一秒之内就可以发送出去，其效率是传统邮件无法比拟的。而且发送与接收电子邮件几乎是免费的，所以比传统邮件既节省时间又经济的多。 网上聊天：通过聊天软件（如QQ、ICQ等）或不同网站的聊天室，可以和世界各地的网友聊天。网友可能是远

7、在天边的异国朋友，也可能是与你一起工作的饿同事，或者是一起生活的家人，在这里没有年龄、性别、身份、职业、国籍、肤色的限制，完全突破了交友的传统方式，人们可通过Internet互相了解对方，进行各种各样的交流。 电子商务：现在网上交易已经成为现实，网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色，几乎所有的专家都预测，在未来的几年内，电子商务会飞速发展。在不久的将来，您可以做在计算机前进行各种各样的商务活动。 网络游戏：通过Internet，可以与全世界的玩家一起进行游戏对战，也可以协同作战。网络游戏已经成为信息产业全新的经济增长点，每年都为开发商带来

8、巨额的利润。通过网络游戏，可以充分享受Internet给我们带来的乐趣。 网络电话：网络电话也称IP电话。它采用Internet技术，利用专门的网络电话软件，只需支付非常低廉的话费就可通话。Internet在电信市场上的应用将越来越广泛。1.3 WWW的简介 WWW的全称为World Wide Web，含义是“环球网”，又称“万维网”、3W、Web。 WWW是一个基于超文本（Hypertext）方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本，也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件，这些网页檔被放置到WWW服务器上，并且都有一定的

9、地址。当我们想浏览某个网站时，首先要在计算机上安装浏览器，如Internet Explorer或Netscape，然后在浏览器中输入网站的地址（网址），就可以进入网站进行浏览。在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图像）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间跳转，我们之所以能在Internet的海洋中穿梭自如，正是超连接的功劳。 WWW 为我们带来的是世界范围的超级文本服务：只须操纵鼠标，就可以通过Internet从世界各地调来你所希望的文本、图像、动画和声音等信息。通过使用WWW，一个不熟悉网络使用的人也可以

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

11、就让我们来详细地看一看具体的操作步骤。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内存。 分辨率可达 800600像素的256色显示器（建议颜

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

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

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

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

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

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

18、3.1 站点3.1.1 创建站点 要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。 从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“my web”。 填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。”单击“下一步”，进入下一个步骤。 在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘

19、上指定一个文件夹，Dreamweaver将在其中储存站点檔的本地副本。单击该文本框后面的文件夹图示，新建并指定一个空的檔夹“E:/ding”。之后单击“下一步“，进入下一个步骤。 这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。而后“下一步”再“完成”，即可。3.1.2 创建站点内容 站点创建完成后，就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“檔/檔”面板，此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。 在弹出的菜单中选择“新建文件”，新建一个档后将其命名为“index.htm(或index.html),它就是未来的首页。 由于“my

20、 web”网站分为“首页”、“相册”、“留言”、“搜索”、“登陆”“注册”这六个大栏目。之后再次新建1个檔夹，命名为images,用来存放“所有的图像文件”的内容。 之后在个栏目的檔夹里还要建立想相应的栏目网页。 3.2 首页3.2.1 设置首页布局每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其它Web页，原则上都必须通过首页来连接散播出去，可见首页是多么的重要。首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm

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

22、 在这里要绘制多个表格，可以再次单击“布局表格”按纽进行绘制，也可以按住Ctrl键绘制多个表格。“”网站首页的布局如图所示：3.2.2设置首页的页面属性首先双击“檔”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。“my web”首页设置的属性如下图所示：3.2.3查看和编辑头内容一个网页文件结构上实际是由两部

23、分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。下面就以首页为例，说明怎样插入较常用的头（ head）内容。单击“菜单拦”下面“插入快捷”的下拉列表，选择其中的HTML类，此时右侧将会显示该类中可以插入的对象快捷按钮，再次单击第2个按钮“文件头”旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。 3.2.4 插入图像图像是网

24、页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。另一方面，网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制，导致了下载的速度不可能太快，因此，网页的大小就不能太大，其中关键就在于图像的大小了，否则浏览者会失去等待的耐心，无论你的网站多么精彩也无济于事了。所以，在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的基础上，图片文件能够变的更小。1、 首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用

25、”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。2、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中，可选择文件URL地址的类型，如果选择“文文件”选项，表示图像地址相对于当前文檔；如果选择“站点根目录”选项，表示地址相对于根目录。在这里我要插入的是网站标志logo，插入logo图像，如图所示:最后单击“确定”按钮，即可完成插入图像的操作。3.2.5插入多媒体在Dreamweaver 8中，除了之前讲到的可以插入“图像”外，还可

26、插入动画、声音、视频等媒体元素，如Flash,Shockwave,Applets,ActieX及格Midi声音文件等，并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。在Dreamweaver 8文文件中，可以插入媒体文件包括Flash Shockwave影片、QuickTime 、AVI java、 applet Active X控件以及各种格式的音频檔。要在浏览器中播放放Flash 动画，必须在浏览器中集成“Flash 播放器 （Flash Player）”。其中，Internet Expl

27、orer通过ActiveX控制来实现，Netscape Navigator则是通过相应的插件来实现的。在最新的Netscape Navigator和Internet Explorer浏览器中，均已集成了 Flash动画播放功能。操场作步骤：步骤1 将游标停留在要插入Flash的位置，然后单击菜单栏下面“插入快捷栏”的下拉列表，选择其中的“常用”分类，右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体”按钮，单击它右侧的下拉列表，选择第1项Flash图示。步骤2 在弹出的对话框中选择扩展名为swf 的Flash檔，即可将其插入到Dreamweaver的“网页编辑窗口”中，可以看到，在

28、这个窗口中Flash文件的大小。在这里我的主页插入的一个动画，如图所示：3.2.6插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。在这最关键的因素。可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式网页中需要大量的文本，我们或以通过以下两种方式插入它们。一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了，和一些文本编辑软件（如Microsoft Word）的使用方法一样，选择好习惯的输入法，就可以运指如飞了。另一种是复制文本的方式。有些读者可能不喜欢使用Dreamweave

29、r 8来进行打字的工作，而更习惯在专门的文本编辑软件中快速打字，如Microsoft Word和 Windows自带的记事本等，又或者读者已经准备好了要放入网页的文本的电子版本，那么我们就可以直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下。打开文本编辑软件（如Microsoft Word），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。

30、这在我的“网文精品”中用到很多，全部是在word软件中排好ctrl+c,然后点击要粘贴的位置，Crtl+v到Dreamweaver即可。3.3创建其它网页 还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。“留言”中的图像插入和前面的介绍相似，并可以在属性拦中调节图像的大小。 在Dreamwerver中常常会用到Firework、Flash，它们是相辅相成。在“注册”中也用到这点，首先定好需要尺寸，在属性中设好背景，颜色等等，插入图像，输入文字，也word里的操作雷同。第四章 建立网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容-网页的“链接

31、”。“链接”，又称“超链接（Hyperlink）,它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 84中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。其中部分内容在之前的章节中可能接触过，这里将对其进行更深入的讲解。4.1文字链接“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建

32、立“链接”。具体操作步骤如下所述。操作步骤步骤1 准备好已经制作完成的首页的各个栏目页面（假设除了“链接”，其它内容都已经制作完成了），该网站包含6个栏目，这里的5个栏目-“相册”、“留言”和“搜索”、“登陆”、“注册”为例来进行讲解。步骤2 在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“相册”设置链接，首先要反白选中“相册”这张图片。步骤3 观察“属性面板”，其中包括一个“链接”文本框。步骤4 接下来需要把链接的位址加入到文本框中，方法有3种。这里我用到的是直接输入链接位址，在文本框中输入相对应的链接地址步骤5 在“

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

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

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

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

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

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

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

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

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

42、t=”-blank” 平面设计（新开窗口，-blank)相册（原窗口，默认为空）留言解释 href:是标记的一种属性，该属性中的URL等于链接目标文件的地址。 Target:也是标记的一种属性，相当于Dreamweaver“属性面板”中的“目标”，它的值等于-blank,效果是在新窗口中打开。除此之外还包括其它3种：-parent,-self和-top。这和Dreamweaver中“目标”下拉列表中的内容是一模一样的。 文本内容：如代码实例中的“平面设计”。这些文本将放在使用了链接属性href和目标属性target的 与标记之间，产生了链接的效果。提示再提醒读者一下，为段落标记，在Dreamw

43、eaver中是由Enter（回车）键产生的。4.5.2图像链接举个简单的“图像链接”的实例。该实例相对应的代码所示。图像链接（新开窗口，-blank）（原窗口，默认为空）a href=”3d/3d-001.htm”解释仔细观察代码可以发现，“图像链接”与“文本链接”惟一的差别就在于与之间的内容。“文本链接”中与之间的内容是文字内容，而“图像链接”中就肯定是图片内容了。之前讲过，插入图片使用“img src=”图像的“”的标记，这里当然也不会例外。而是还可以使用”img 的属性，如alt（替换文本）、width（宽）、height（高）、及border（边框）等4.5.3 ail链接该实例相对应的“”代码如下所述。Email链接给我写信解释只需使href 等于“mailto：邮件地址？subject=主题即可，其中subject为可选项，“？subject=主题”也可以不加。4.3.5文件下载链接“文件下载链接”实例的代码如下所述。文件下载链接下载精彩广告视频解释