个人网站的设计及其实现及个人数字图书馆与机构数字图书馆_第1页
个人网站的设计及其实现及个人数字图书馆与机构数字图书馆_第2页
个人网站的设计及其实现及个人数字图书馆与机构数字图书馆_第3页
个人网站的设计及其实现及个人数字图书馆与机构数字图书馆_第4页
个人网站的设计及其实现及个人数字图书馆与机构数字图书馆_第5页
已阅读5页,还剩44页未读, 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

HYPERLINK届本科毕业设计(论文)题目:个人网站的设计与实现班级:04级计算机班学号:2姓名:指导教师:个人网站的设计与实现个人网站的设计与实现

前

言

随着国际互联网的普及,很多人已经不满足仅仅在Internet上的浏览信息,而是希望更深入的参与其中,拥有自己的Web网站,这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚,那么企业建立网站就是必然的选择了。

无论是专业的,还是业余的,很多人对网页制作颇感兴趣。事实上制作一个简单的网页并不困难,会使用Word的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了,而Dreamweaver却可以满足你的愿望,它是Macromedia公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器。

同样出自Macromedia公司的Flash,Fireworks在制作网站的过程中起到了锦上添花的作用,是个人网站实现的好帮手,在制作网站的时候经常会用到这些软件。

本文有五章,我来由浅到深介绍个人网站的设计与实现。

摘

要在互联网走进我们的生活之前,没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外,一个人也根本没有操作一份传播媒体的能力。现在不同了,互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件,你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的基本过程可以分为以下七个环节:1

了解中国网络个人主页研究背景与发展现状2

系统需求分析与总体设计3

熟悉网站开发模式、工具及环境4把自己的作品和想要展示的内容制作成网页。5

使用动态网页技术(ASP),实现动态内容更新。6

认真地选取测试用例,进行交叉测试7

网站的后期完善、宣传及发展方向其中,网页制作和使用动态网页技术(ASP)实现动态内容更新是网站开发的核心内容。

关键词:网页、制作、访问、链接

Abstract

EntersbeforeourlifeintheInternet,nobodydarestovainlyhopeforhasownnewspaper,themagazine,thebroadcastingstation,thetelevisionstation.Besidesthepolicyinrestriction,apersonsimplyhasnotalsooperateddisseminationmediatheability.Nowhasbeendifferent,Internethasprovidedtous"theexpression"freeworld,Youmayhaveownnewsmail,youmayestablishownindividualwebsite.Solongasyoualsomanagethesuccesstobepossibletoattractthetensofthousandsofsubscribers,thereader,Andestablishesoneselfinthemultitudinousparticipant'sauthoritativestatus.Establishesindividualwebsitetheunitprocesstobepossibletodivideintofollowingsevenlinks:1、understandstheChinesenetworkindividualmainpageresearchbackgroundandthedevelopmentpresentsituation2

systemsdemandsanalysisandsystemdesign3familiarwebsitesdevelopmentspattern,toolandenvironment4andwantsownworkthecontentwhichdemonstratedtomanufacturethehomepage.5usesdynamichomepagestechnology(ASP),realizationdynamiccontentrenewal.6earnestlyselectsmeasuredthetestexample,carriesontheoverlappingtest7websiteslaterperiodsconsummate,thepropagandaandthedevelopmentdirectionAmongthem,Thehomepagemanufactureandtheusedynamichomepagetechnology(ASP)realizesthedynamiccontentrenewalisthewebsitedevelopmentcorecontent.Keyword: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.1

站点2.1.1创建站点2.1.2创建站点内容2.2

首页2.2.1设置首页布局2.2.2设置首页的页面属性2.2.3查看和编辑头内容2.2.4插入图像2.2.5插入多媒体2.2.6插入文本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什么是Internet

Internet的中文名为“国际互联网”,又称“因特网”。

Internet是由众多的计算机网络互联而成的互联网,它覆盖了全世界各地,它是采用开放系统协议的计算机通讯网络。然而,Internet不仅仅是计算机的互联网,它还是全球最大的信息资源宝库,它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务,使得世界范围内的人与人之间的交流在时间和空间上变的更小了。

要了解Internet,就必须先了解局域网。我们可以将同一地点的许多计算机使用网线连接在一起,构成一个高效率的计算机网络,所有处于网络内的终端机或电脑都能享受网络内所有的资源,比如程序,图文资料等。这种计算机网络因为一般都局限在一定区域中,我们称之为“局域网”(LocalAreaNetwork,简称LAN),它是在日常工作中用得最多的一种小型计算机网络。局域网所覆盖的地理范围比较小,通常不超过几十公里,甚至只在同一座建筑物内或者邻近的几座建筑内。像常见的校园网,一座写字楼内部的网络等都属于局域网。

而Internet则不是指单个区域范围内的网络,而是指将全世界的各中不同类型的计算机网络连接起来的一个全球性的网络。Internet上有取之不尽,用之不竭的信息资源。对于Internet中各种各样的信息,所有的人都可以通过网络的连接来共享和使用。1.2

Internet有那些功能

Web页浏览:这是目前利用最广泛、最直接的互联网服务,通过浏览WWW(万维网)中的网页,可以了解世界各地的新闻,查看最新的股市行情,最新的娱乐动态、科技发明,找到众多的就业信息……几乎想找到什么样的信息,就有什么信息。正是有了才会变得如此丰富多彩,才能走进千家万户。

信息发布:通过Internet,不仅可以浏览别人发布在Web页上的信息,也可以将自己要发布的信息制作成Web页,也即网页,然后发布到Internet上,供全世界的人浏览。

电子邮件:不同于传统邮件,电子邮件(E-mail)通过Internet传输,写信,发信,收信都在计算机上完成,一封电子邮件最短在一秒之内就可以发送出去,其效率是传统邮件无法比拟的。而且发送与接收电子邮件几乎是免费的,所以比传统邮件既节省时间又经济的多。

网上聊天:通过聊天软件(如QQ、ICQ等)或不同网站的聊天室,可以和世界各地的网友聊天。网友可能是远在天边的异国朋友,也可能是与你一起工作的饿同事,或者是一起生活的家人,在这里没有年龄、性别、身份、职业、国籍、肤色的限制,完全突破了交友的传统方式,人们可通过Internet互相了解对方,进行各种各样的交流。

电子商务:现在网上交易已经成为现实,网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色,几乎所有的专家都预测,在未来的几年内,电子商务会飞速发展。在不久的将来,您可以做在电脑前进行各种各样的商务活动。

网络游戏:通过Internet,可以与全世界的玩家一起进行游戏对战,也可以协同作战。网络游戏已经成为信息产业全新的经济增长点,每年都为开发商带来巨额的利润。通过网络游戏,可以充分享受Internet给我们带来的乐趣。

网络电话:网络电话也称IP电话。它采用Internet技术,利用专门的网络电话软件,只需支付非常低廉的话费就可通话。Internet在电信市场上的应用将越来越广泛。

1.3WWW的简介

WWW的全称为WorldWideWeb,含义是“环球网”,又称“万维网”、3W、Web。WWW是一个基于超文本(Hypertext)方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本,也就是HTML(HypertextMark-upLanguage,超文本标记语言)文件,这些网页文件被放置到WWW服务器上,并且都有一定的地址。当我们想浏览某个网站时,首先要在电脑上安装浏览器,如Internet

Explorer或Netscape,然后在浏览器中输入网站的地址(网址),就可以进入网站进行浏览。在这些网页中,都有超连接,当将鼠标指针移动到某个地方(如文本或图象)时,鼠标指针就会变成一个小手形形状,单击它就可以连接到另个网页中,从而使得浏览者能在不同的信息之间跳转,我们之所以能在Internet的海洋中穿梭自如,正是超连接的功劳。

WWW为我们带来的是世界范围的超级文本服务:只须操纵鼠标,就可以通过Internet从世界各地调来你所希望的文本、图像、动画和声音等信息。通过使用WWW,一个不熟悉网络使用的人也可以成为Internet的行家。

1.4网页基本构成元素

要学会制作网页,首先需要了解网页都是由什么元素构成的。

文字:文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。

图片:正是有个各种美丽的图片,网页才变得多姿多彩。

动画:如今,网页上的动画越来越多,最常用的有GIF动画、Flash动画等。

超连接:如上所述,超连接几乎是必不可少的。一个没有超连接的网页,就如同汪洋大海中的一座孤岛,失去了与外界的一切联系。

其它元素:还可以在网页中添加声音、视频等元素。

1.5软件的安装与启动

要使用网站设计软件,自然先要将这些软件安装到自己的电脑中。安装完毕,还需要如何启动,如何创建快捷方式。下面就让我们来详细地看一看具体的操作步骤。

1.5.1软件的安装

安装之前,需要先了解软件对系统的要求。以Windows为例,系统要求如下:

IntelPentiumII处理器或等效处理器,主频300MHz或更高。

Windows98\Windows2000\WindowsNT(具有ServicePack3或更高版本)、WindowsMe或WindowsXP.

NetscapeNavigator4.0版或更高版本或MicrosoftInternetExplorer.

96MB的可用内存(RAM),建议采用128MB内存。

分辨率可达800×600像素的256色显示器(建议颜色为百万颜色,分辨率达到1024×768像素)。

CD-ROM驱动器。

检查一下您的计算机,看是否具备了以上条件。如果具备,将“MacromediaStudioMX”程序会自动运行。如果不能自动运行,可以找到光盘放入光驱,安装程序会自动运行。可以找到光盘中的“InstallMacromediaStudioMX”程序或“Autorun”程序并双击运行。

Dreamweaver的安装比较容易,几乎可以自动完成。下面简要说明一下安装步骤。

操作步骤:

1、将安装光盘放入光驱,安装程序自动运行,并出现安装界面。如果单击安装界面上的“MacromediaSTUDIOMX安装”,那么将会安装其下方所列出的软件。所有的安装会自动完成。2、单击DreamweaverMX,开始安装过装过程.先是出现解压缩文件窗口,等待一会儿,便会出现安装向导对话框。单击“下一步”按钮,继续安装过程。3、出现“选择目的地位置”对话框,默认的盘是C盘,如果想安装到不同的位置,可以单击目的文件夹右边的“浏览”按钮,并在弹出的“选择文件夹”对话框选择不同的文件,如要安装在D盘则可直接将路径中的“C:”改为“D:”。也可以在下面的“目录”中选择其它的文件夹,设置完后,单击“确定”,回到“选择目的地址”对话框,单击“下一步”继续。4、而后会出现“默认编辑器”的对话框,默认为全选。如果希望让DreamweaverMX成为下面所列文件类型的默认编辑器,那么可以在这里做选择。选择完毕,单击“下一步”按钮。5、出现“开始复制文件”对话框,单击“下一步”安装程序开始复制文件,过几分钟后,安装结束,单击“结束”按钮,结束安装。

1.5.2

软件启动

软件安装完毕后,我们就可以使用它了。安装程序已经自动在“开始”菜单中加入了快捷方式。

单击“开始”菜单,将鼠标指针依次指向“程序”|“Macromedia”|“MacromediaMX”,并在上面单击鼠标左键。

1.5.3创建快捷方式

使用“开始”菜单启动程序的过程比较烦琐。可以在Windows桌面或快速启动栏上创建快捷方式,这样可以快速的启动程序。

具体实现方法是:在“开始”菜单中找到相应程序的快捷方式,不过这是不要用鼠标左键单击,而是用右键按住向桌面拖动,然后松开右键,会出现一个快捷菜单,在其中可以选择不同的命令,比如选择“在当前位置创建快捷方式”或“复制到当前位置”。

这样以后在运行程序时,就方便快捷的多了。

1.6制作网页前的准备电脑必备:电脑速度够快,最好能够上网。操作系统:Windows98/NT/Me/2000/XP.软件可选:其它软件:看图软件ACDSee、图像处理软件Photoshop、上传工具Cute、动画软件Flash等。

1.7DreamweaverMX的操作环境

我们将工作界面分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。

1.7.1标题栏

DreamweaverMX的“标题栏”中将显示文字“MacromediaDreamweaverMX”如果打开网页的话,在后面还会显示该网页的一些信息,如网页标题、所在位置及网页名称,右边有三个钮,分别对应DreamweaverMX的最大化最小化和关闭的操作。

1.7.2菜单栏

“标题栏”下面就是“菜单栏”,栏中提供了“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10项菜单。单击其中任意一项菜单,随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码,这是该指令的快捷键,熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记,它代表该指令还包含下一级的指令,鼠标停留片刻即可显示。1.7.3快捷工具栏

“快捷工具栏”指的是“菜单栏”下边的3排按钮,选择菜单“查看/工具栏”,勾选里面的“插入”、“文档”和“标准”3项,完整的快捷工具栏就显现出来了。

1.7.4属性面板

在网页编辑窗口的下面还有一个面板,它是有名的“属性面板”,它在这个软件中起到举足轻重的作用。属性面板顾名思义,就是显示,调整属性的面板,根据鼠标所选中对象的不同,“属性面板”在界面上也会有所差异,用户可以分别对不同的对象进行调整。第二章

网站制作实战

2.1

站点2.1.1

要制作一个网站,第一步操作都是一样的,就是要创造一个“站点”,这样可以使整个网站的脉络结构清晰地展现在面前,避免了以后再进行纷杂的管理。

从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”,之后再选择其中的“站点”,再次弹出一个对话框,在文本框中输入自己已经企化好的网站名称“追梦人”。

填好后,单击“下一步”,进入下一个步骤。由于我要做的是一个静态的网页,所以选择上面的一项“否,我不想使用服务器技术。”单击“下一步”,进入下一个步骤。

在此选项中有两个选择,选择推荐的“编辑我的计算机上的本地副本,完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹,Dreamweaver将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标,新建并指定一个空的文件夹“E:/ding”。之后单击“下一步“,进入下一个步骤。

这一步是如何设置连接到远程服务器,弹出式菜单中有6中选择,这里选择“无”。而后“下一步”再“完成”,即可。2.1.2创建站点内容

站点创建完成后,就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“文件/文件”面板,此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。

在弹出的菜单中选择“新建文件”,新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。

由于“追梦人”网站分为“平面设计”、“动画制作”、“网文精品”、“经典回顾”、“个人说明“这五个大栏目,所以继续用鼠标右击右侧,在弹出的菜单中选择第二项“NewFolder(新建文件夹)”。执行五次操作,新建五个文件夹,并把它们重命名为graph、anim、books、music、letter,分别对应上面的五个大栏目。存放它们各自的内容。之后再次新建1个文件夹,命名为images,用来存放“所有的图象文件”的内容。

之后在个栏目的文件夹里还要建立想相应的栏目网页。

2.2

首页2.2.1设置首页布局

每个网站都会有一个首页,就功能上而言,它代表着一个网站的风格与特色,就网站架构上而言,它代表了网站的第一层架构,至于网站上其他Web页,原则上都必须通过首页来连接散播出去,可见首页是多么的重要。首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置,一般的有index.htm,default.htm或home.htm等,目前主要以index.htm的居多。当然,后缀名为html也是正确的。具体设置方法是:右健单击“文件”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。

首页的布局有很多方法,在这里我所用到的是表格的“布局模式”。“布局”模式中的表格称为布局表格,单元格称为布局单元格。在绘制布局表格和布局单元格时,必须从“标准”模式切换到“布局”模式。直接单击“布局”按钮即可。操作步骤:1、

在“插入快捷栏”的“布局”分类中,单击“布局表格”按纽。

2、

将变成“+”形状的鼠标光标放到编辑中网页上,在要绘制的地方进行拖动就可以进行创建了。(如果绘制的是第一个表格必须从网页的最左上角开始绘制)。

3、

在这里要绘制多个表格,可以再次单击“布局表格”按纽进行绘制,也可以按住Ctrl键绘制多个表格。追梦人”网站首页的布局如图所示:

2.2.2设置首页的页面属性首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域,在菜单中选择“页面属性”,之后弹出“页面属性”对话框,若选择主菜单“修改/页面属性”项,也可以把打开该对话框。在“页面属性”对话框中,左侧窗口显示“分类”,其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项,右侧区域则显示各类中可以设置的项目。“追梦人”首页设置的属性如下图所示:2.2.3查看和编辑头内容一个网页文件结构上实际是由两部分组成,头(head)内容和主体(body)内容主体内容(body)是文档的主要部分,也是包含文本和图像等的可见部分。头内容(head)是除文档标题外的不可见部分,包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息,这些元器并不是每个页面都需要的,例如,可以仅为主页提供关键字。下面就以首页为例,说明怎样插入较常用的头(head)内容。单击“菜单拦”下面“插入快捷”的下拉列表,选择其中的HTML类,此时右侧将会显示该类中可以插入的对象快捷按钮,再次单击第2个按钮“文件头”旁边的下拉箭头,会弹出菜单,该项列出的便是即将插入的头内容。

2.2.4插入图像图像是网页中不可或缺的组成成份,恰当地使用图像,可以使网站充满生活生命力与说服力,吸引更多的浏览者,加深他们欣赏你网站的意愿。另一方面,网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制,导致了下载的速度不可能太快,因此,网页的大小就不能太大,其中关键就在于图像的大小了,否则浏览者会失去等待的耐心,无论你的网站多么精彩也无济于事了。所以,在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤,以使得它们在保持图形美丽与网站风格搭配的基础上,图片文件能够变的更小。1、首先将光标停留在要插入图像的位置,然后单击“菜单栏”下面“插入快健栏”的下拉表,选择其中的“常用”类,则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像:图像”按钮,单击它右侧的下拉列表,选择第1项“图像”。2、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件,或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中,可选择文件URL地址的类型,如果选择“文档”选项,表示图像地址相对于当前文档;如果选择“站点根目录”选项,表示地址相对于根目录。在这里我要插入的是网站标志logo,插入logo图象,如图所示:

最后单击“确定”按钮,即可完成插入图像的操作。

2.2.5插入多媒体在DreamweaverMX2004中,除了之前讲到的可以插入“图像”外,还可插入动画、声音、视频等媒体元素,如Flash,Shockwave,Applets,ActieX及格Midi声音文件等,并且还可以在Dreamweaver自身内插入MacromediaFlashMX2004按钮和文本对象,以及进行相关的后期处理和添加设计备注等操作。在DreamweaverMX2004文档中,可以插入媒体文件包括FlashShockwave影片、QuickTime、AVIjava、appletActiveX控件以及各种格式的音频文件。要在浏览器中播放放Flash动画,必须在浏览器中集成“Flash播放器(FlashPlayer)”。其中,InternetExplorer通过ActiveX控制来实现,NetscapeNavigator则是通过相应的插件来实现的。在最新的NetscapeNavigator和InternetExplorer浏览器中,均已集成了Flash动画播放功能。操场作步骤:步骤1

将光标停留在要插入Flash的位置,然后单击菜单栏下面“插入快捷栏”的下拉列表,选择其中的“常用”分类,右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体”按钮,单击它右侧的下拉列表,选择第1项Flash图标。

步骤2

在弹出的对话框中选择扩展名为swf的Flash文件,即可将其插入到Dreamweaver的“网页编辑窗口”中,可以看到,在这个窗口中Flash文件的大小。在这里我的主页插入的一个动画,如图所示:

2.2.6插入文本文字是人类语言最基本的表达方式,在网页中,文本内容也可以说是重要的组成部分,一个网站成功与否,它是最关键的因素。在这最关键的因素。可丰富网站的文字内容,并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式网页中需要大量的文本,我们或以通过以下两种方式插入它们。一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了,和一些文本编辑软件(如MicrosoftWord)的使用方法一样,选择好习惯的输入法,就可以运指如飞了。另一种是复制文本的方式。有些读者可能不喜欢使用DreamweaverMX2004来进行打字的工作,而更习惯在专门的文本编辑软件中快速打字,如MicrosoftWord和Windows自带的记事本等,又或者读者已经准备好了要放入网页的文本的电子版本,那么我们就可以直接使用Dreamweaver的文本复制功能,将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作,具体步骤如下。打开文本编辑软件(如MicrosoftWord),选中要复制的文本,它们将反白显示,执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C,之后切换回Dreamweaver,将光标停留在插入文本的位置,执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“网文精品”中用到很多,全部是在word软件中排好ctrl+c,然后点击要粘贴的位置,crtl+v到Dreamweaver即可。

2.3创建其它网页

还有其它的几个网站与主页的制作相同,一个网页是图象和文字的组合。

“平面设计”中的图象插入和前面的介绍相似,并可以在属性拦中调节图象的大小。在Dreamwerver中常常会用到Firework、Flash,它们是相辅相成,在主页中的主体部分就是用Firework,如图所示:

在“个人说明”中也用到这点,首先定好需要尺寸,在属性中设好背景,颜色等等,插入图象,输入文字,也word里的操作雷同。

第三章建立网页链接网站实际上是由很多网页组成的,那么网页之间是如何联系的呢?这就是本章要讲的内容网页的“链接”。“链接”,又称“超链接"(Hyperlink),它作为网页的桥梁,起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在DreamweaverMX2004中,如果以“链接”的媒介来划分的话,则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”,共8种。其中部分内容在之前的章节中可能接触过,这里将对其进行更深入的讲解。

3.1文字链接“文字链接”即以文字作为媒介的链接,它是网页中最常被使用的链接方式,具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例,来讲解如何为文字建立“链接”。具体操作步骤如下所述。操作步骤步骤1

准备好已经制作完成的首页的各个栏目页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,这里的5个栏目“平面设计”、“动画制作”和“网文精品”、“经典回顾”、“个人说明”为例来进行讲解。步骤2在Dreamweaver中打开首页,之后反白选取作为“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“平面设计”设置链接,首先要反白选中“平面设计”4个文字。步骤3观察“属性面板”,其中包括一个“链接”文本框。步骤4接下来需要把链接的地址加入到文本框中,方法有3种。这里我用到的是直接点击文件夹图标,在文件夹中找到要链接的对象graph.htm。这样就建立了超链接。不过有点很重要,由于大多数服务器都不支持中文文件名,而且对大小写敏感,因此采用英文文件名并统一大小写。如图所示:

步骤5在“链接”文本框下面还有一个“目标”下拉列表,从中可以选择链接网页显示的窗口方式,共有4种。如图:

实例中没有选择任何选项,保持空白,表示在原窗口中打开链接网页。步骤6还可以设置一些“链接”的属性,这是前面讲过的内容。单击“属性面板”中的“页面属性”,选择其中的“链接”分类,可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。

步骤7至此,第1个栏目的链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,当鼠标放在“平面设计”这4个文字上时将变成手形,并且浏览器窗口下面的状态栏中会显示链接到的网页的地址,单击文字,页面会立即跳转到第1个栏目中,这表示链接已经制作成功了。步骤8同理,按照以上步骤,再为“动画制作”和“网文精品”“经典回顾“等其它栏制作指向对应栏目的链接。步骤9通常在栏目页面中还需要有“返回首页”的链接,单击其后可以跳转回首页,因此在各个栏目中还要插入“网站首页”的文字,并且制作指向首页index.html的链接,制作方法不变。至此,整个“文字链接”的实例就全就全部完成了。通过对这个实例的讲解,读者不仅应该学会如何为文字制作链接,还应用对“链接”有了更加深刻的理解,链接的目的何在?它到底能够在网页的网站中发挥什么样的作用?怎样才能更好地使用它?这些是网页制作者更应该思考的问题。下面继续介绍其他类型的链接。

3.2图像链接“图像”也是常被使用的链接媒体,它和“文字链接”非常相似。为图像加入链接,首先应该在网页中插入“图像”,有关插入“图像”或“导航条”按钮的内容,接下来以我的网站“追梦人“为例,讲解如何建立“图像链接”。操作步骤步骤1首先仍然要准备好已经制作完成的首页和各个栏目的页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,下面我们就动手为这6个栏目分别制作它们的链接。步骤2在Dreamweaver中打开网站的首页,之后选取要制作“链接”的图像。实例中先为第3个栏目“动画制作”设置链接,因此选中包含“动画制作”4个字的图像。步骤3观察“属性面板”,在“链接”文本框中输入链接的文字地址。可以使用之前讲过的“指向文件”和“选择文件”的方法。步骤4如果有需要,可以在“目标”下拉列表中选择“链接”网页显示的窗口方式,分别为-blank、-parent、-self或top。实例中使用了默认出的保留空白选项的方式。步骤5另外,读者还可以为图像增加“替代”文本。实例中为第1个栏目增加栏目名称的“替代”文本。步骤6至此,第1个栏目的图像链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,将鼠标放在“动画制作”4个文字上时将变成手形,同时浏览器窗口下面的状态栏中会显示出链接到的网页的地址,并且会显示出“替代”文本“动画制作”,单击文字,页面会立即跳转到第3个栏目中,这表示链接已经制作成功了。步骤7同理,按照以上步骤,再为其它几幅图像制作指向对应栏目的链接。步骤8在栏目页面中制作“返回首页”的链接,使得单击后可以跳转回首页,其制作方法不变。至此,整个“图像链像”的实例就全部完成了。

3.3E–Mail的链接E-Mail链接,是指当浏览者单击该链接之后,不是打开一个网页文件,而是启动用户的E-Mail客户端软件(如OutlookExpress),并打开一个空白的新邮件,供浏览者撰写内容来与网站联系人联系,这是一种最方便的互动方式。结合“个人说明”网页,建立E-Mail链接的步骤如下所述。操作步骤步骤1将光标停留在页面右下角要插入E-mail链接的位置。步骤2选择“插入快捷栏”中的“常用”分类,单击左侧第2个“电子邮件链接”按钮。

步骤3在弹出的“电子邮件链接”对话框中有两个输入项,分别是“文本”和“E-Mail”。在“文本”项中输入链接的文字,中文、英文均可,在E-Mail项中输入网站联系有的电子邮件地址,如实例中的ding_zhuimeng123@163.net。

步骤4单击“确定”按钮,具有“E-Mail链接”属性的文本就ding_zhuimeng123@163.net。插入到光标所在位置了,按下Ctrl+S保存网页,再按下F12预览查看实际效果。上面的方法只适用于文本的“E-Mail链接”,如果想在其它的对象(如图像)上也加入这种链接,该怎办呢?下面介绍第2种建立“E-Mail链接”的方法。其实很简单,与前面讲过的图像加入链接的方法基本一样。先在页面中需要的地方插入图像,之后选中图像,并在“属性面板”的“链接”文本框中输入如下语句即可mailto:ding_zhuimeng123@163.net?subject=网站的建议与第1种方法不同的是,E-Mail地址前面增加了mailto:字样。用这种方法就可以给图像等其他对象建立“E-Mail链接”了。

3.4文件下载链接“文件下载链接”的原理很简单,只要链接文件属于浏览无法识别的关型,便都会使用IE浏览器直接进行下载,并保存到本地计算机中。浏览器无法识别的文件类型有很多,这里就介绍一个最常用的,以zip或rar为后缀名的压缩格式文件,这种文件可以使用主流的压缩软件(如winzip、winrar)来制作。下面我们就业以实例来说明。在前面“插入多媒体”一章中,我们曾经讲过直接链接文件的方式来插入“视频”,即直接在“链接”文本框中输入“文件名+名后缀名”,如olympus.wmv。单日击这个链接,经过数据下载后,Windows系统将启动自带的媒体播放器WindowsMediaPlayer来播放该视频。操作步骤步骤1先将视频文件olympus.wmv通压缩成olympus.rar文件,放入站点的media文件夹下。步骤2将文件路径输入至“链接”文本框中。步骤3保存网页,按下F12预览,在浏览器中单击“下载精彩广告视频”链接文本,会弹出“文本下载”选择框,单击其中的“保存”按钮。步骤4在“另存为”对框中选择保存到本地计算机中的位置,实例中为“经典回顾”文件夹。之后单击“保存”按钮,压缩文件即保存到该位置中。至此,“文件下载链接”便制作完成了。读者可以打开“我的文档”文件夹,解压缩olympus.rar文件,随时欣赏下载影片。

本设计中未用到此链接,在此只作简单介绍。

3.5在HTML语言中建立网页链接

3.5.1文字链接在HTML语言中用超链接标记指向一个目标。其基本格式为:<ahref=”URL”文本内容</a>举个简单的“文本链接”的实例,该实例相对应的HTML代码如下所示。<html><head><title>文字链接</title></head><body><p>ahref-“index2.html”target=”-blank”>平面设计</a>(新开窗口,-blank)</p><p><ahref=”index3.html>动画制作</a>(原窗口,默认为空)</p><p><ahref=”index4.html>网文精品</a></p></body></html>解释

«

href:是<a>标记的一种属性,该属性中的URL等于链接目标文件的地址。«

Target:也是<a>标记的一种属性,相当于Dreamweaver“属性面板”中的“目标”,它的值等于-blank,效果是在新窗口中打开。除此之外还包括其他3种:-parent,-self和-top。这和Dreamweaver中“目标”下拉列表中的内容是一模一样的。«

文本内容:如代码实例中的“平面设计”。这些文本将放在使用了链接属性href和目标属性target的<a>与</a>标记之间,产生了链接的效果。提示再提醒读者一下,<p>为段落标记,在Dreamweaver中是由Enter(回车)键产生的。

3.5.2图像链接举个简单的“图像链接”的实例。该实例相对应的HTML代码所示。<html><head><title>图像链接</title></head><body><p><ahref=”web/web-001.htm”target=”-blank”><imgsrc=”images/btn-001-out.gif”alt“平面设计”=width=”85”height=”18”border=”0”></a>(新开窗口,-blank)</p><p><ahref=wallpaper/wallpaper-001.htm”><imgsrc=”images/btn-002-out.gif”alt=“原创壁纸”width=”85”height=”18”border=”0”></a>(原窗口,默认为空)</p><p>ahref=”3d/3d-001.htm”><imgsrc=”images/btn-003-out.gif”alt“三维作品”=width=”85”height=”18”border=”0”></a></p></body></html>解释仔细观察代码可以发现,“图像链接”与“文本链接”惟一的差别就在于<a>与<a/>之间的内容。“文本链接”中<a>与</a>之间的内容是文字内容,而“图像链接”中就肯定是图片内容了。之前讲过,插入图片使用“<imgsrc=”图像的URL“<”的标记,这里当然也不会例外。而是还可以使用”<img的属性,如alt(替换文本)、width(宽)、height(高)、及border(边框)等

3.5.3E-Mail链接该实例相对应的“HTML”代码如下所述。<html><head><title>Email链接</title></head><body><p><ahref=”mailto:jiangnan@?subject=网站的意见建议“>给我写信</a></p></body><html>解释只需使href等于“mailto:邮件地址?subject=主题"即可,其中subject为可选项,“?subject=主题”也可以不加。

3.3.5文件下载链接“文件下载链接”实例的代码如下所述。<html><head><title>文件下载链接</title></head></body><ahref=”media/Olympus.rar”>下载精彩广告视频</a>解释只需使href等于“文件的路径”即可。

本章讲解的是网站的链接的方法和技巧。能让浏览者很轻松的地观看是很重要的,这其中的关键就再于“链接“了。

第四章

结论

经过几周的工作,个人网站的设计与实现终于完成,本次设计基本完成任务书要求的功能。查找信息、文件共享等。由于是个人网站,在设计上就没有什么拘束和限制,完全发挥自己的想象力和创造力,展现自己的兴趣和个性。

本次设计用Macromedia公司开发的专业HTML编辑器Dreamweaver,对Wed站点、Web页和Web应用程序进行设计、编码和开发。

利用Dreamweaver中的可视化编辑功能,用户可以快速创建页面而无须编写任何代码。并且。借助Dreamweaver,还可以使用服务器语言(例如:ASP,ASP.NET,ColdFusion标记语言(CFML),JSP,PHP)。本设计的页面不是很精美,这写些不足之处还待后期的开发和改进。

HYPERLINK登陆点击左上角“数字出版平台”(红色字样)就进入了大总库新平台,之后便按照以下进行操作。(一)个人数字图书馆一、创建个人馆 在首页点击“个人数字图书馆”链接进入个人馆创建页面:第一步:填写个人馆注册信息A.填写个人注册信息,这里请填写真实姓名、工作单位和所属学科,我们会根据您提供的信息自动为您的个人馆定制专业馆、您发表的文献等信息。B.同意个人馆注册协议。C.使用快速注册快速生成个人馆,或者按步骤创建个人馆。第二步:选择关联机构馆 若已经存在与您输入的单位名称相符的机构馆,系统会提示加入机构馆。若不存在,提示该机构馆还不存在,您建完个人数字图书馆后系统自动为您创建您单位的机构馆。第三步:选择个人模板 选择与您的个人馆内容相匹配的个人馆模板:A.选择模板列表B.查看模板简介C.点击下一步,将为您选择当前模板并开始配置资源第四步:配置资源 配置资源可以在创建个人馆的过程中完成,也可以在创建完成后的个人馆后台进行。二、个人馆首页 以“光阴似金”模板个人数字馆首页为例,说明其主要功能(参见下页图示):A.个人数字图书馆banner:显示个人馆用户名、日期、天气预报等个性化信息及功能。B.个人数字图书馆菜单:包含数字出版平台主要功能链接,机构馆链接及个人馆后台管理链接。C.个人数字图书馆检索平台:包含个人定制的馆藏总库资源及检索平台。D.个人馆内的各类型定制栏目,包括自建主题资源、我关注的学者、我关注的科研项目、我关注的学者、我关注的科研机构、我收藏的文献、我发表的文献、学术会议信息等等。 下面一一介绍各个栏目的功能及配置方法。三、个人馆功能及配置方法1、定制馆藏资源及检索平台总库资源配置: 以定制学术资源为例,个人馆根据您输入的专业信息,为您定制了相关的专业馆。用户也可以自行添加其他专业的学术资源。配置方法如下: 进入个人馆管理平台,选择“资源栏目>>学术文献”,这里显示已定制的专业馆,点击“添加资源”; 显示资源专业列表,找到要定制的专业,点击“定制”; 在弹出的页面中选择“经济统计方法”的资源类型和订购时间范围,确定提交; 返回到检索平台页面,刷新后,资源已经加入到检索平台中。检索平台设置: 在个人和机构馆中,可以对检索平台的检索方式进行设置,按个人检索习惯选择定制合适的检索方式。 配置方法:在个人馆/机构馆管理平台中,选择“检索平台配置”项。在“检索方式设置”中勾选要保留的检索方式,比如,去掉“引文检索,‘知网节’检索,科研基金检索”;在“默认检索方式”中选择进入个人馆后默认显示的检索方式。在检索范围设置中选择默认的检索范围,比如设置为“中国学术文献网络出版总库”,或“提交”保存配置。2、个性化资源配置(1)定制整刊资源 学者可以在个人馆中定制关注的整刊资源:期刊、学位论文集、报纸、会议论文集、年鉴、工具书等,形成整刊“书架”。 整刊定制方法:添加子栏目:选择个人馆后台的“资源栏目>>整刊资源配置”,点击“添加子栏目”按钮。填写子栏目名称,选择子栏目类型,确定添加。 选择“期刊”子栏目,点击“添加期刊”按钮,进入添加期刊页面。 选择期刊导航,输入期刊检索条件。勾选要添加的期刊,点击定制,将其定制到个人馆中。 学位论文、报纸、会议论文、年鉴、工具书的定制方式与期刊定制相似。(2)定制自建主题资源库 自建主题资源库是用户自定义感兴趣的主题。个人馆中会显示为专题馆方式,显示每个主题所包含不同类型资源的文献数,且根据数据库中的资源动态更新。 定制方法:在个人馆管理平台中选择“资源栏目>>自建主题资源库”,点击“添加主题”。 在弹出的检索页面中,输入文献检索条件,点击“主题式检索”,若对检索结果满意,点击“定制主题资源”。 跳出主题资源定制框,输入主题资源描述,保存主题。 刷新自建主题资源库,该主题已被定制。(3)我发表的文献 个人馆根据用户提交的真实姓名和工作单位为用户找出发表的文献,您也可以在个人馆管理平台中添加或修改定制“我发表的文献”。 定制方法: 在个人馆管理平台中选择“个性化服务栏目>>我发表的文献”,点击“添加文献”按钮。 在弹出的文献检索页面中,输入文献检索条件(这里您可以输入姓名和曾工作单位全面检索),找到自己发表的文献。选择要添加的文献,点击“定制”按钮,将这些文献添加到个人馆中。(4)定制我关注的学者 您可以将自己关注的学者添加到个人馆中,及时得到学者研究成果的信息。 定制过程如下: 选择个人馆后台的“个性化服务栏目>>我关注的学者”,点击“添加学者”按钮。 在弹出的添加学者页面中,选择检索学者的范围,输入学者检索的条件进行检索。在检到的结果中选择关注的学者,点击“定制”按钮,将其定制到个人馆中。(5)定制我关注的机构 您可以将关注的科研机构(包括专业)定制到个人馆中,及时跟踪科研机构的科研人员数,发表科研成果情况等。 定制过程如下: 选择个人馆后台的“个性化服务栏目>>我关注的科研机构”,点击“添加机构”按钮。 在弹出的添加机构页面中,选择检索机构的范围,输入机构检索的条件进行检索。在检到的结果中选择关注的机构,点击“定制”按钮,将其定制到个人馆中。(6)定制我关注的科研项目 您可以将关注的科研项目定制到个人馆中,及时跟踪项目的研究人员数,发表研究成果情况等。 定制过程如下: 在个人馆管理平台选择“个性化服务栏目>>我关注的科研项目”,点击“添加科研项目”按钮。 在弹出的添加科研项目页面中,选择检索科研项目的学科范围,输入项目检索的条件,进行检索。在检到的结果中选择关注的项目,点击“定制”按钮,将其定制到个人馆中。(7)我承担的科研课题 您可以将自己承担的科研项目添加到个人馆中,进行管理,我们为您提供项目的相关同行和相关成果。 添加过程如下: 在个人馆管理平台选择“个性化服务栏目>>我承担的科研课题”,点击“添加科研课题”按钮。 在弹出的页面中输入课题名称和基本信息,将承担的科研课题添加到个人馆中。(8)定制我收藏的文献 我收藏的文献栏目,可以将学者感兴趣的文献收藏到个人馆中,您可以按照自己感兴趣的内容对文献进行分类,放入定义的子栏目中。 添加子栏目的方式与定制整刊时添加子栏目相似: 选择要“我收藏的文献”的子栏目,点击“添加文献”按钮: 在弹出的文献检索页面中,输入文献检索条件,进行检索,分组筛选找到自己关注的文献。选择要添加的文献,点击“定制”按钮,将这些文献添加到个人馆中。(9)定制学术会议信息 学术会议信息栏可定制国内外的学术会议,点击会议名称显示会议论文集。 定制过程如下: 选择个人馆后台的“个性化服务栏目>>学术会议信息”,点击“添加会议”。 在会议平台中,输入会议检索条件进行检索,选中要添加的会议,点击“定制”按钮,添加到个人馆中。(10)定制投稿期刊 投稿信息是将学者关心的投稿期刊定制到个人馆中,可及时浏览稿件征订情况。 定制过程如下: 在个人馆管理平台选择“个性化服务栏目>>投稿期刊”,点击“添加投稿”按钮。 在添加征稿期刊页面中,输入期刊检索条件,检索期刊。选中要添加的期刊,点击“定制”将其定制到个人馆中。(11)热点关键词 热点关键词是根据个人馆用户所输入的专业学科信息,推荐的热点词。在个人馆首页中点击热点关键词可浏览有关该词的文献。(12)定制学术交流区 用户可以定制关注的学术交流论坛到自己的个人馆内,在首页及时地看到学术交流区中的最近文献或在交流区中发贴。 定制过程如下: 在个人馆管理平台选择“个性化服务栏目>>学术交流区”,点击“添加学术交流”按钮。 在弹出的学术交流区列表中找到感兴趣的学术交流论坛。可以用Ctrl+F进行检索。点击论坛名称后的“定制”,将论坛定制到个人馆中。(13)我收藏的检索式 您可以将检索效果好的检索式收藏到个人馆,或定制为子栏目。3、自定义栏目 用户可以根据自己的需要自定义栏目,选择栏目类型(消息类、导航类、检索类、文献类、整刊类),定义栏目显示方式和栏目名称。添加栏目 选择“管理后台>自定义栏目>添加新栏目”,添加一个新栏目,输入栏目名称,选择栏目类型及显示方式。栏目中需添加子栏目才可添加内容。添加子栏目 点击选择左侧已添加的子栏目,在右侧显示的栏目中点击“添加子栏目”按钮,定义名称,添加一个子栏目。添加内容 在管理平台左侧选择已添加的子栏目,点击添加内容(消息、导航、检索式、文献、整刊)的按钮,可添加各种内容。4、学友管理 在学习研究过程中,我们需要与学友共同讨论,交流信息。在个人馆后台可以

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论