个人网站设计毕业设计论文

1编号 编号 贵州亚泰职业学院贵州亚泰职业学院毕业论文题 目 姓 名 学 号 专 业 指导老师 年 月 日2摘摘 要要随着现代计算机科学的发展，网络已经越来越普及，如今网络已经成为每个人生活的一部分，同时网络也提供了一种很好的信息交换平台，而个人主页是可以在网络上展示各人信息单位方便手段。本文介绍了个如何开发个人网站。首先介绍开发工具 ASP，HTML，等技术，然后详细了解个人主页的开发。关键词：关键词：个人主页、HTML 技术、ASP 技术3AbstractWith the development of modern computer science, networking has become increasingly popular, and now the network has become a part of life for everyone, while the network also provides an excellent platform for information exchange, while the personal home page is displayed on the network can be an individual a convenient means of information. This article describes how to develop personal website. Development tools, first introduces ASP, HTML and other technologies, and then explain in detail the development of personal home page. Keywords: personal home page、ASP technologies、HTML technologies4前前 言言因特网正在改变世界，它促成了网络雏形的形成，特别是电子商务正由新概念走向实用化。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已将发展成为新的传播媒体，所以几乎各个企业、机构纷纷建立自己的 Web 站点。Web 站点是向用户域或潜在客人户提供信息（包括产品和鼓舞）的一种方式。其文檔所包含的内容是由被称为超文本（Hyper Text）的文本、图形图像、声音，甚至是电影组成。使这些超文本能够有机的关联并可使浏览器识别，使通过 Html 语言（Hyper Text Markup Language 超文本标记语言）实现的。同时 CGI（Common Gateway Internet 公共网关接口）能使 Web 具有交互功能。Web 站点指引用户浏览该站点或其它站点上的分页信息，可以通过表格和电子邮件的链接提供双向交互的方式。网站是未来企业开展电子商务的基础设施和信息平台，它是“只是经济”的至高点，企业的网址犹如企业的商标和品牌一样，是反映企业的形象和文化的巨大的无形资产。5目目 录录第一章第一章 预备知识预备知识.71.11.1 什么是什么是 I INTERNETNTERNET.6 61.31.3 WWWWWW 的简介的简介 .9 91.41.4 网页基本构成元素网页基本构成元素.9 91.51.5 软件的安装与启动软件的安装与启动.10101.5.1 软件的安装.101.5.2 软件启动 .121.5.3 创建快捷方式 .131.61.6 制作网页前的准备制作网页前的准备.13131.71.7 D DREAMWEAVERREAMWEAVER 8 8 的操作环境的操作环境 .14141.7.1 标题栏.141.7.2 菜单栏.141.7.3 快捷工具栏.151.7.4 属性面板.15第二章网页的结构图第二章网页的结构图.16第三章第三章 网站制作实战网站制作实战.173.1 站点.17173.1.13.1.1 创建站点创建站点 .173.1.23.1.2 创建站点内容创建站点内容 .183.23.2 首页首页.19193.2.13.2.1 设置首页布局设置首页布局 .19193.2.23.2.2 设置首页的页面属性设置首页的页面属性.21213.2.33.2.3 查看和编辑头内容查看和编辑头内容.23233.2.43.2.4 插入图像插入图像 .23233.2.53.2.5 插入多媒体插入多媒体.24243.2.63.2.6 插入文本插入文本.262663.33.3 创建其它网页创建其它网页.2727第四章第四章 建立网页链接建立网页链接.284.14.1 文字链接文字链接.29294.24.2 图像链接图像链接.31314.34.3 E E M MAILAIL的链接的链接 .33334.44.4 文件下载链接文件下载链接.34344.54.5 在在 HTMLHTML 语言中建立网页链接语言中建立网页链接.35354.5.1 文字链接.364.5.2 图像链接.374.5.3 ail 链接.394.3.5 文件下载链接.40第五章第五章.41结束语结束语 .4242第一章第一章 预备知识预备知识1.11.1 什么是什么是 InternetInternet Internet 的中文名为“国际互联网”，又称“因特网”。 Internet 是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，它是采用开放系统协议的计算机通讯网络。然而，Internet 不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。7 要了解 Internet，就必须先了解局域网。我们可以将同一地点的许多计算机使用网线连接在一起，构成一个高效率的计算机网络，所有处于网络内的终端机或计算机都能享受网络内所有的资源，比如程序，图文数据等。这种计算机网络因为一般都局限在一定区域中，我们称之为“局域网”（Local Area Network,简称 LAN）,它是在日常工作中用得最多的一种小型计算机网络。局域网所覆盖的地理范围比较小，通常不超过几十公里，甚至只在同一座建筑物内或者邻近的几座建筑内。像常见的校园网，一座写字楼内部的网络等都属于局域网。 而 Internet 则不是指单个区域范围内的网络，而是指将全世界的各中不同类型的计算机网络连接起来的一个全球性的网络。Internet 上有取之不尽，用之不竭的信息资源。对于 Internet 中各种各样的信息，所有的人都可以通过网络的连接来共享和使用。1.21.2 InternetInternet 有那些功能有那些功能 Web 页浏览：这是目前利用最广泛、最直接的互联网服务，通过浏览 WWW（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息几乎想找到什么样的信息，就有什么信息。正是有了 WWW、Internet 才会变得如此丰富多彩，才能走进千家万户。 信息发布：通过 Internet，不仅可以浏览别人发布在 Web 页上的信息，也可以将自己要发布的信息制作成 Web 页，也即网页，然后发布到 Internet 上，供全世界的人浏览。8电子邮件：不同于传统邮件，电子邮件(E-mail)通过 Internet 传输，写信，发信，收信都在计算机上完成，一封电子邮件最短在一秒之内就可以发送出去，其效率是传统邮件无法比拟的。而且发送与接收电子邮件几乎是免费的，所以比传统邮件既节省时间又经济的多。 网上聊天：通过聊天软件（如 QQ、ICQ 等）或不同网站的聊天室，可以和世界各地的网友聊天。网友可能是远在天边的异国朋友，也可能是与你一起工作的饿同事，或者是一起生活的家人，在这里没有年龄、性别、身份、职业、国籍、肤色的限制，完全突破了交友的传统方式，人们可通过 Internet 互相了解对方，进行各种各样的交流。 电子商务：现在网上交易已经成为现实，网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色，几乎所有的专家都预测，在未来的几年内，电子商务会飞速发展。在不久的将来，您可以做在计算机前进行各种各样的商务活动。 网络游戏：通过 Internet，可以与全世界的玩家一起进行游戏对战，也可以协同作战。网络游戏已经成为信息产业全新的经济增长点，每年都为开发商带来巨额的利润。通过网络游戏，可以充分享受 Internet 给我们带来的乐趣。 网络电话：网络电话也称 IP 电话。它采用 Internet 技术，利用专门的网络电话软件，只需支付非常低廉的话费就可通话。Internet 在电信市场上的应用将越来越广泛。 91.31.3 WWWWWW 的简介的简介 WWW 的全称为 World Wide Web，含义是“环球网”，又称“万维网”、3W、Web。 WWW 是一个基于超文本（Hypertext）方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本，也就是 HTML(Hypertext Mark-up Language,超文本标记语言)文件，这些网页檔被放置到 WWW 服务器上，并且都有一定的地址。当我们想浏览某个网站时，首先要在计算机上安装浏览器，如 Internet Explorer 或 Netscape，然后在浏览器中输入网站的地址（网址），就可以进入网站进行浏览。在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图像）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间跳转，我们之所以能在 Internet 的海洋中穿梭自如，正是超连接的功劳。 WWW 为我们带来的是世界范围的超级文本服务：只须操纵鼠标，就可以通过 Internet从世界各地调来你所希望的文本、图像、动画和声音等信息。通过使用 WWW，一个不熟悉网络使用的人也可以成为 Internet 的行家。 1.41.4 网页基本构成元素网页基本构成元素 要学会制作网页，首先需要了解网页都是由什么元素构成的。 文字：文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。10 图片：正是有个各种美丽的图片，网页才变得多姿多彩。 动画：如今，网页上的动画越来越多，最常用的有 GIF 动画、Flash 动画等。 超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。 其它元素：还可以在网页中添加声音、视频等元素。 1.51.5 软件的安装与启动软件的安装与启动 要使用网站设计软件，自然先要将这些软件安装到自己的计算机中。安装完毕，还需要如何启动，如何创建快捷方式。下面就让我们来详细地看一看具体的操作步骤。 1.5.11.5.1 软件的安装软件的安装 “安装之前，需要先了解软件对系统的要求。以 Windows 为例，系统要求如下： Intel Pentium II 处理器或等效处理器，主频 300MHz 或更高。 Windows 98Windows 2000Windows NT(具有 Service Pack 3 或更高版本)、Windows Me 或 Windows XP.11 Netscape Navigator 4.0 版或更高版本或 Microsoft Internet Explorer. 96MB 的可用内存（RAM），建议采用 128MB 内存。 分辨率可达 800600 像素的 256 色显示器（建议颜色为百万颜色，分辨率达到 1024768 像素）。 CD-ROM 驱动器。 检查一下您的计算机，看是否具备了以上条件。如果具备，将“Macromedia Studio MX”程序会自动运行。如果不能自动运行，可以找到光盘放入光驱，安装程序会自动运行。可以找到光盘中的“Install Macromedia Studio MX”程序或 Autorun”程序并双击运行。 Dreamweaver 的安装比较容易，几乎可以自动完成。下面简要说明一下安装步骤。 操作步骤： 1、将安装光盘放入光驱，安装程序自动运行，并出现安装接口。如果单击安装接口上的“Macromedia STUDIO MX 安装”，那么将会安装其下方所列出的软件。所有的安装会自动完成。122、单击 Dreamweaver 8,开始安装过装过程.先是出现解压缩文件窗口,等待一会儿,便会出现安装向导对话框。单击“下一步”按钮，继续安装过程。3、出现“选择目的地位置”对话框，默认的盘是 C 盘，如果想安装到不同的位置，可以单击目的檔夹右边的“浏览”按钮，并在弹出的“选择文件夹”对话框选择不同的文件，如要安装在 D 盘则可直接将路径中的“C：”改为“D:”。也可以在下面的“目录”中选择其它的活页夹，设置完后，单击“确定”，回到“选择目的地址”对话框，单击“下一步”继续。4、而后会出现“默认编辑器”的对话框，默认为全选。如果希望让 Dreamweaver 8 成为下面所列檔类型的默认编辑器，那么可以在这里做选择。选择完毕，单击“下一步”按钮。5、出现“开始复制文件”对话框，单击“下一步”安装程序开始复制文件，过几分钟后，安装结束，单击“结束”按钮，结束安装。 1.5.21.5.2 软件启动软件启动 软件安装完毕后，我们就可以使用它了。安装程序已经自动在“开始”菜单中加入了快捷方式。13 单击“开始”菜单，将鼠标指针依次指向“程序”|“Macromedia”|“Macromedia MX”,并在上面单击鼠标左键。 1.5.31.5.3 创建快捷方式创建快捷方式 使用“开始”菜单启动程序的过程比较烦琐。可以在 Windows 桌面或快速启动栏上创建快捷方式，这样可以快速的启动程序。 具体实现方法是：在“开始”菜单中找到相应程序的快捷方式，不过这是不要用鼠标左键单击，而是用右键按住向桌面拖动，然后松开右键，会出现一个快捷菜单，在其中可以选择不同的命令，比如选择“在当前位置创建快捷方式”或“复制到当前位置”。 这样以后在运行程序时，就方便快捷的多了。 1.61.6 制作网页前的准备制作网页前的准备计算机必备：计算机速度够快，最好能够上网。操作系统：Windows 98/NT/Me/2000/XP.14软件可选：其它软件：看图软件 ACDSee、图像处理软件 Photoshop、上传工具 CuteFTP、Fireworks、动画软件 Flash 等。 1.71.7 DreamweaverDreamweaver 8 8 的操作环境的操作环境 我们将工作接口分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5 个部分来分别介绍。 1.7.11.7.1 标题栏标题栏 Dreamweaver 8 的“标题栏”中将显示文字“Macromedia Dreamweaver 8”如果打开网页的话，在后面还会显示该网页的一些信息，如网页标题、所在位置及网页名称，右边有三个钮，分别对应 Dreamweaver MX 的最大化最小化和关闭的操作。 151.7.21.7.2 菜单栏菜单栏 “标题栏”下面就是“菜单栏”，栏中提供了“檔”、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10 项菜单。单击其中任意一项菜单，随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码，这是该指令的快捷键，熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记，它代表该指令还包含下一级的指令，鼠标停留片刻即可显示。1.7.31.7.3 快捷工具栏快捷工具栏 “快捷工具栏”指的是“菜单栏”下边的 3 排按钮，选择菜单“查看/工具栏”，勾选里面的“插入”、“文檔”和“标准”3 项，完整的快捷工具栏就显现出来了。 1.7.41.7.4 属性面板属性面板在网页编辑窗口的下面还有一个面板，它是有名的“属性面板”，它在这个软件中起到举足轻重的作用。16属性面板顾名思义，就是显示，调整属性的面板，根据鼠标所选中对象的不同，“属性面板”在接口上也会有所差异，用户可以分别对不同的对象进行调整。17第二章网页的结构图第二章网页的结构图18第三章第三章 网站制作实战网站制作实战 3.13.1 站点站点3.1.13.1.1 创建站点创建站点 要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。 从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“my web”。 填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。”单击“下一步”，进入下一个步骤。 在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver 将在其中储存站点檔的本地副本。单击该文本框后面的文件夹图示，新建并指定一个空的檔夹“E:/ding”。之后单击“下一步“，进入下一个步骤。19 这一步是如何设置连接到远程服务器，弹出式菜单中有 6 中选择，这里选择“无”。而后“下一步”再“完成”，即可。3.1.23.1.2 创建站点内容创建站点内容 站点创建完成后，就可以创建 Web 页来填充站点了。在“右侧浮动面板组”中选择“檔/檔”面板，此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。 在弹出的菜单中选择“新建文件”，新建一个档后将其命名为“index.htm(或 index.html),它就是未来的首页。 由于“my web”网站分为“首页”、“相册”、“留言”、“搜索”、“登陆”“注册”这六个大栏目。之后再次新建 1 个檔夹，命名为 images,用来存放“所有的图像文件”的内容。 之后在个栏目的檔夹里还要建立想相应的栏目网页。 203.23.2 首页首页3.2.13.2.1 设置首页布局设置首页布局 每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其它 Web 页，原则上都必须通过首页来连接散播出去，可见首页是多么的重要。首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视 Server 端的设置，一般的有 index.htm,default.htm 或 home.htm 等，目前主要以 index.htm 的居多。当然，后缀名为 html 也是正确的。具体设置方法是：右健单击“檔”浮动面板中的 index.htm,在弹出的菜单中选择“设成首页”。首页的布局有很多方法，在这里我所用到的是表格的“布局模式”。“布局”模式中的表格称为布局表格，单元格称为布局单元格。在绘制布局表格和布局单元格时，必须从“标准”模式切换到“布局”模式。直接单击“布局”按钮即可。操作步骤：1、 在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。212、 将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。3、 在这里要绘制多个表格，可以再次单击“布局表格”按纽进行绘制，也可以按住 Ctrl 键绘制多个表格。“”网站首页的布局如图所示：3.2.23.2.2 设置首页的页面属性设置首页的页面属性首先双击“檔”浮动面板中的 index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。22在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5 项，右侧区域则显示各类中可以设置的项目。“my web”首页设置的属性如下图所示：233.2.33.2.3 查看和编辑头内容查看和编辑头内容一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。下面就以首页为例，说明怎样插入较常用的头（ head）内容。单击“菜单拦”下面“插入快捷”的下拉列表，选择其中的 HTML 类，此时右侧将会显示该类中可以插入的对象快捷按钮，再次单击第 2 个按钮“文件头”旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。 3.2.43.2.4 插入图像插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。另一方面，网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制，导致了下载的速度不可能太快，因此，网页的大小就不能太大，其中关键就在于图像的大小了，否则浏览者会失去等待的耐心，无论你的网站多么精彩也无济于事了。所以，24在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的基础上，图片文件能够变的更小。1、 首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第 5 个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第 1 项“图像”。2、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，或在 URL 编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中，可选择文件 URL地址的类型，如果选择“文文件”选项，表示图像地址相对于当前文檔；如果选择“站点根目录”选项，表示地址相对于根目录。在这里我要插入的是网站标志 logo，插入 logo图像，如图所示:最后单击“确定”按钮，即可完成插入图像的操作。 3.2.53.2.5 插入多媒体插入多媒体在 Dreamweaver 8 中，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频等媒体元素，如 Flash,Shockwave,Applets,ActieX 及格 Midi 声音文件等，并且还可25以在 Dreamweaver 自身内插入 Macromedia Flash MX2004 按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。在 Dreamweaver 8 文文件中，可以插入媒体文件包括 Flash Shockwave 影片、QuickTime 、AVI java、 applet Active X 控件以及各种格式的音频檔。要在浏览器中播放放 Flash 动画，必须在浏览器中集成“Flash 播放器 （Flash Player）”。其中，Internet Explorer 通过 ActiveX 控制来实现，Netscape Navigator 则是通过相应的插件来实现的。在最新的 Netscape Navigator 和 Internet Explorer 浏览器中，均已集成了 Flash 动画播放功能。操场作步骤：步骤 1 将游标停留在要插入 Flash 的位置，然后单击菜单栏下面“插入快捷栏”的下拉列表，选择其中的“常用”分类，右侧将会显示该类中可以插入的对象快捷按钮。左起第 6 个即为“媒体”按钮，单击它右侧的下拉列表，选择第 1 项 Flash 图示。步骤 2 在弹出的对话框中选择扩展名为 swf 的 Flash 檔，即可将其插入到 Dreamweaver的“网页编辑窗口”中，可以看到，在这个窗口中 Flash 文件的大小。在这里我的主页插26入的一个动画，如图所示： 3.2.63.2.6 插入文本插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。在这最关键的因素。可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式网页中需要大量的文本，我们或以通过以下两种方式插入它们。一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了，和一些文本编辑软件（如 Microsoft Word）的使用方法一样，选择好习惯的输入法，就可以运指如飞了。27另一种是复制文本的方式。有些读者可能不喜欢使用 Dreamweaver 8 来进行打字的工作，而更习惯在专门的文本编辑软件中快速打字，如 Microsoft Word 和 Windows 自带的记事本等，又或者读者已经准备好了要放入网页的文本的电子版本，那么我们就可以直接使用 Dreamweaver 的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下。打开文本编辑软件（如 Microsoft Word），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键 Ctrl+C，之后切换回 Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键 Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“网文精品”中用到很多，全部是在 word 软件中排好 ctrl+c,然后点击要粘贴的位置，Crtl+v 到 Dreamweaver 即可。 3.33.3 创建其它网页创建其它网页 还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。“留言”中的图像插入和前面的介绍相似，并可以在属性拦中调节图像的大小。 在Dreamwerver 中常常会用到 Firework、Flash，它们是相辅相成。在“注册”中也用到这点28，首先定好需要尺寸，在属性中设好背景，颜色等等，插入图像，输入文字，也 word 里的操作雷同。第四章第四章 建立网页链接建立网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容-网页的“链接”。“链接”，又称“超链接（Hyperlink）,它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在 Dreamweaver 84 中，如果以“链接”的媒29介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail 链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共 8 种。其中部分内容在之前的章节中可能接触过，这里将对其进行更深入的讲解。 4.14.1 文字链接文字链接“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。具体操作步骤如下所述。操作步骤步骤 1 准备好已经制作完成的首页的各个栏目页面（假设除了“链接”，其它内容都已经制作完成了），该网站包含 6 个栏目，这里的 5 个栏目-“相册”、“留言”和“搜索”、“登陆”、“注册”为例来进行讲解。步骤 2 在 Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第 1 个栏目“相册”设置链接，首先要反白选中“相册”这张图片。30步骤 3 观察“属性面板”，其中包括一个“链接”文本框。步骤 4 接下来需要把链接的位址加入到文本框中，方法有 3 种。这里我用到的是直接输入链接位址，在文本框中输入相对应的链接地址 http:/ 5 在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有 4 种。如图：实例中没有选择任何选项，保持空白，表示在原窗口中打开链接网页。步骤 6 还可以设置一些“链接”的属性，这是前面讲过的内容。单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。31步骤 7 至此，第 1 个栏目的链接就制作完毕了，按下 Ctrl+S 保存网页，再按下 F12 预览，测试一下，当鼠标放在“平面设计”这 4 个文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第 1 个栏目中，这表示链接已经制作成功了。步骤 8 同理，按照以上步骤，再为“留言”和“搜索”“登陆“等其它栏制作指向对应栏目的链接。步骤 9 通常在栏目页面中还需要有“返回首页”的链接，单击其后可以跳转回首页，因此在各个栏目中还要插入“网站首页”的文字，并且制作指向首页 index.html 的链接，制作方法不变。至此，整个“文字链接”的实例就全就全部完成了。通过对这个实例的讲解，读者不仅应该学会如何为文字制作链接，还应用对“链接”有了更加深刻的理解，链接的目的何在？它到底能够在网页的网站中发挥什么样的作用？怎样才能更好地使用它？这些是网页制作者更应该思考的问题。 4.24.2 图像链接图像链接“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。32操作步骤步骤 1 首先仍然要准备好已经制作完成的首页和各个栏目的页面（假设除了“链接”，其它内容都已经制作完成了），该网站包含 6 个栏目，下面我们就动手为这 6 个栏目分别制作它们的链接。步骤 2 在 Dreamweaver 中打开网站的首页，之后选取要制作“链接”的图像。实例中先为第 3 个栏目“动画制作”设置链接，因此选中包含“相册”4 个字的图像。步骤 3 观察“属性面板”，在“链接”文本框中输入链接的文字位址。可以使用之前讲过的“指向檔”和“选择檔”的方法。步骤 4 如果有需要，可以在“目标”下拉列表中选择“链接”网页显示的窗口方式，分别为-blank 、-parent 、-self 或 top。实例中使用了默认出的保留空白选项的方式。 步骤 5 另外，读者还可以为图像增加“替代”文本。实例中为第 1 个栏目增加栏目名称的“替代”文本。步骤 6 至此，第 1 个栏目的图像链接就制作完毕了，按下 Ctrl+S 保存网页，再按下 F12预览，测试一下，将鼠标放在“动画制作”4 个文字上时将变成手形，同时浏览器窗口下面的状态区中会显示出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转到第 3 个栏目中，这表示链接已经制作成功了。步骤 7 同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。33步骤 8 在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页，其制作方法不变。至此，整个“图像链像”的实例就全部完成了。 4.34.3 E E MailMail 的链接的链接E-Mail 链接，是指当浏览者单击该链接之后，不是打开一个网页文件，而是启动用户的 E- Mail 客户端软件（如 Outlook Express）,并打开一个空白的新邮件，供浏览者撰写内容来与网站联系人联系，这是一种最方便的互动方式。结合“个人说明”网页，建立 E-Mail 链接的步骤如下所述。操作步骤步骤 1 将游标停留在页面右下角要插入 E-mail 链接的位置。步骤 2 选择“插入快捷栏”中地 10 个“电子邮件链接”按钮。步骤 3 在弹出的“电子邮件链接”对话框中有两个输入项，分别是“文本”和“E-Mail” 。在“文本”项中输入链接的文字，中文、英文均可，在 E-Mail 项中输入网站联系有的电子邮件地址，如实例中的 。34步骤 4 单击“确定”按钮，具有“E-Mail 链接”属性的文本就 。插入到游标所在位置了，按下 Ctrl+S 保存网页，再按下 F12 预览查看实际效果。上面的方法只适用于文本的“E-Mail 链接”，如果想在其它的对象（如图像）上也加入这种链接，该怎办呢？下面介绍第 2 种建立“E-Mail 链接”的方法。其实很简单，与前面讲过的图像加入链接的方法基本一样。先在页面中需要的地方插入图像，之后选中图像，并在“属性面板”的“链接”文本框中输入如下语句即可-mailto: ?subject=网站的建议与第 1 种方法不同的是，E-Mail 地址前面增加了 mailto:字样。用这种方法就可以给图像等其它对象建立“E-Mail 链接”了。 4.44.4 文件下载链接文件下载链接“文件下载链接”的原理很简单，只要链接文件属于浏览无法识别的关型，便都会使用 IE浏览器直接进行下载，并保存到本地计算机中。浏览器无法识别的檔类型有很多，这里就介绍一个最常用的，以 zip 或 rar 为后缀名的压缩格式檔，这种檔可以使用主流的压缩软件（如 winzip、winrar）来制作。下面我们就业以实例来说明。在前面“插入多媒体”一章中，我们曾经讲过直接链接文件的方式来插入“视频”，即直接在“链接”文本框中输入“文件名+名后缀名”，如 olympus.wmv。单日击这个链接，经35过数据下载后，Windows 系统将启动自带的媒体播放器 Windows Media Player 来播放该视频。操作步骤步骤 1 先将视频檔 olympus.wmv 通压缩成 olympus.rar 文件，放入站点的 media 活页夹下。步骤 2 将文件路径输入至“链接”文本框中。步骤 3 保存网页，按下 F12 预览，在浏览器中单击“下载精彩广告视频”链接文本，会弹出“文本下载”选择框，单击其中的“保存”按钮。步骤 4 在“另存为”对框中选择保存到本地计算机中的位置，实例中为“经典回顾”檔夹。之后单击“保存”按钮，压缩文件即保存到该位置中。至此，“文件下载链接”便制作完成了。读者可以打开“我的文檔”檔夹，解压缩 olympus.rar 文件，随时欣赏下载影片。 本设计中未用到此链接，在此只作简单介绍。 4.54.5 在在 HTMLHTML 语言中建立网页链接语言中建立网页链接 364.5.14.5.1 文字链接文字链接在 HTML 语言中用超链接标记指向一个目标。其基本格式为：a href=”URL”文本内容举个简单的“文本链接”的实例，该实例相对应的 HTML 代码如下所示。文字链接a href-“index2.html”target=”-blank” 平面设计（新开窗口，-blank)相册（原窗口，默认为空）留言37解释 href:是标记的一种属性，该属性中的 URL 等于链接目标文件的地址。 Target:也是标记的一种属性，相当于 Dreamweaver“属性面板”中的“目标”，它的值等于-blank,效果是在新窗口中打开。除此之外还包括其它 3 种：-parent,-self 和-top。这和 Dreamweaver 中“目标”下拉列表中的内容是一模一样的。 文本内容：如代码实例中的“平面设计”。这些文本将放在使用了链接属性 href 和目标属性 target 的 与标记之间，产生了链接的效果。提示再提醒读者一下，为段落标记，在 Dreamweaver 中是由 Enter（回车）键产生的。 4.5.24.5.2 图像链接图像链接举个简单的“图像链接”的实例。该实例相对应的代码所示。图像链接38（新开窗口，-blank）（原窗口，默认为空）a href=”3d/3d-001.htm”解释仔细观察代码可以发现，“图像链接”与“文本链接”惟一的差别就在于与之间的内容。“文本链接”中与之间的内容是文字内容，而“图像链接”中就肯定是图片内容了。之前讲过，插入图片使用“img src=”图像的“”的标记，这里当然也不会例外。而是还可以使用”img 的属性，如 alt（替换文本）、width（宽）、height（高）、及 border（边框）等 394.5.34.5.3 ailail 链接链接该实例相对应的“”代码如下所述。Email 链接给我写信解释只需使 href 等于“mailto：邮件地址？subject=主题即可，其中 subject 为可选项，“？subject=主题”也可以不加。 404.3.54.3.5 文件下载链接文件下载链接“文件下载链接”实例的代码如下所述。文件下载链接下载精彩广告视频解释 只需使 href 等于“文件的路径”即可。 本章讲解的是网站的链接的方法和技巧。能让浏览者很轻松的地观看是很重要的，这其中的关键就再于“链接“了。 本次设计用 Macromedia 公司开发的专业 HTML 编辑器 Dreamweaver,对 Wed 站点、Web页和 Web 应用程序进行设计、编码和开发。 利用 Dreamweaver 中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。并且。借助 Dreamweaver，还可以使用服务器语言（例如：ASP,ASP.NET,ColdFusion 标41记语言（CFML），JSP，PHP）。本设计的页面不是很精美，这写些不足之处还待后期的开发和改进。第五章第五章结束语结束语 在做毕业设计的近几个月时间是我学生生涯中最有价值的一段时光。这里有治学严谨而不失亲切的老师，又相互帮助的同学，更有向上、融洽的学习生活气氛。借此论文之际，我想向所以人表示我的谢意。首先噶不行老师。本论文是在老师的指导下修改完成的。再次，要多他们的细心帮42助和指导表示由衷的感谢。在这段时间里，我从她们的身上不仅学到了喜多的专业知识，更感受到了她们工作中的兢兢业业，在生活中的平易近人。此外，她们严谨的治学态度和忘我的工作精神值得我去学习。还要感谢给予我帮助的我们项目小组的他成员，他们在我的毕业设计中经常给我提出许多关键性的问题，使我受益匪浅感谢三年来传授我知识的老师们，更要感谢我的家人对我学业上的主持和鼓励，感谢所有关心帮助过我的人，同时感谢大家，感谢亚泰学院。总之，在以后的学习生活中我将以加倍努力工作队给予我帮助的学校老师及同学们的回报参考文献参考文献 完美网页设计与制作 姜楠 中国青年出版社 2004 年 5 月43HTML 网页制作 王映雪等编着 上海科学普及出版社 2006网页制作方法与技巧 雁腾创作室编 机械工业出版社 2009