毕业设计(论文)-个人网站的设计与实现_第1页
毕业设计(论文)-个人网站的设计与实现_第2页
毕业设计(论文)-个人网站的设计与实现_第3页
毕业设计(论文)-个人网站的设计与实现_第4页
毕业设计(论文)-个人网站的设计与实现_第5页
已阅读5页,还剩23页未读 继续免费阅读

下载本文档

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

文档简介

二七届学生毕业论文(设计)毕业设计论文论文题目个人网站的设计与实现英文PERSONALWEBSIDEDESIGNANDACCOMPLISH学院数学与计算机学院专业计算机网络技术系姓名学号指导教师个人网站的设计与实现摘要在互联网走进我们的生活之前,没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外,一个人也根本没有操作一份传播媒体的能力。现在不同了,互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件,你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的基本过程可以分为以下七个环节1了解中国网络个人主页研究背景与发展现状2系统需求分析与总体设计3熟悉网站开发模式、工具及环境4把自己的作品和想要展示的内容制作成网页5使用动态网页技术ASP,实现动态内容更新6认真地选取测试用例,进行交叉测试7网站的后期完善、宣传及发展方向其中,网页制作和使用动态网页技术ASP实现动态内容更新是网站开发的核心内容。关键词网页、制作、访问、链接ABSTRACTENTERSBEFOREOURLIFEINTHEINTERNET,NOBODYDARESTOVAINLYHOPEFORHASOWNNEWSPAPER,THEMAGAZINE,THEBROADCASTINGSTATION,THETELEVISIONSTATIONBESIDESTHEPOLICYINRESTRICTION,APERSONSIMPLYHASNOTALSOOPERATEDDISSEMINATIONMEDIATHEABILITYNOWHASBEENDIFFERENT,INTERNETHASPROVIDEDTOUS“THEEXPRESSION“FREEWORLD,YOUMAYHAVEOWNNEWSMAIL,YOUMAYESTABLISHOWNINDIVIDUALWEBSITESOLONGASYOUALSOMANAGETHESUCCESSTOBEPOSSIBLETOATTRACTTHETENSOFTHOUSANDSOFSUBSCRIBERS,THEREADER,ANDESTABLISHESONESELFINTHEMULTITUDINOUSPARTICIPANTSAUTHORITATIVESTATUSESTABLISHESINDIVIDUALWEBSITETHEUNITPROCESSTOBEPOSSIBLETODIVIDEINTOFOLLOWINGSEVENLINKS1UNDERSTANDSTHECHINESENETWORKINDIVIDUALMAINPAGERESEARCHBACKGROUNDANDTHEDEVELOPMENTPRESENTSITUATION2SYSTEMSDEMANDSANALYSISANDSYSTEMDESIGN3FAMILIARWEBSITESDEVELOPMENTSPATTERN,TOOLANDENVIRONMENT4ANDWANTSOWNWORKTHECONTENTWHICHDEMONSTRATEDTOMANUFACTURETHEHOMEPAGE5USESDYNAMICHOMEPAGESTECHNOLOGYASP,REALIZATIONDYNAMICCONTENTRENEWAL6EARNESTLYSELECTSMEASUREDTHETESTEXAMPLE,CARRIESONTHEOVERLAPPINGTEST7WEBSITESLATERPERIODSCONSUMMATE,THEPROPAGANDAANDTHEDEVELOPMENTDIRECTIONAMONGTHEM,THEHOMEPAGEMANUFACTUREANDTHEUSEDYNAMICHOMEPAGETECHNOLOGYASPREALIZESTHEDYNAMICCONTENTRENEWALISTHEWEBSITEDEVELOPMENTCORECONTENTKEYWORDHOMEPAGE,MANUFACTURE,VISIT,LINK前言随着国际互联网的普及,很多人已经不满足仅仅在INTERNET上的浏览信息,而是希望更深入的参与其中,拥有自己的WEB网站,这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚,那么企业建立网站就是必然的选择了。无论是专业的,还是业余的,很多人对网页制作颇感兴趣。事实上制作一个简单的网页并不困难,会使用WORD的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了,而DREAMWEAVER却可以满足你的愿望,它是MACROMEDIA公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器。同样出自MACROMEDIA公司的FLASH,FIREWORKS在制作网站的过程中起到了锦上添花的作用,是个人网站实现的好帮手,在制作网站的时候经常会用到这些软件。目录摘要1前言1第一章绪论311我国网络发展现状312个人网站的目的3第二章个人网站的开发环境421DREAMWEAVER简述422DREAMWEAVER的操作环境423ASP技术5第三章需求分析731概述732个人网站的问题定义与可行性分析733个人网站整体要求8第四章网站制作941站点942首页943创建其它网页11第五章网页链接的建立1251链接的概念1252创立连接1253文字链接1554影像链1655EMAIL链接1856文件下载链接2157在HTML语言中建立网页链接22第六章总结25致谢26参考文献27第一章绪论11我国网络发展现状2010年1月15日,中国互联网络信息中心(CNNIC)发布了第25次中国互联网络发展状况统计报告(以下简称报告)。报告数据显示,截至2009年12月,我国网民规模已达384亿,互联网普及率进一步提升,达到289。随着我国互联网普及率的逐年提高,互联网正在走进人们的工作与生活。CNNIC报告调查显示,在家和单位上网的网民比例在2009年有了明显的提高,有832的网民选择在家上网,另有302的网民选择在单位上网,互联网作为人们日常工具的价值正在日益提升。12个人网站的目的个人网站最开始的动机可能是出于兴趣或一种爱好,但时间一长,这些兴趣或爱好便为自己积累了许多资源,比如数量可观的访问量。当这些资源积累到一定程度的时候,商业意识比较敏感的个人网站站长便开始寻求开展电子商务,将自己手中的资源进行商业操作,从而,个人网站开始赚钱。当然,目前比较流行的个人网站赚钱方式可能更多的还是依赖于广告,但从目前个人网站的广告收入来看,它已经陷入了一个低谷。所以,如果个人网站想要得到长足的发展,或者希望自己的网站能够赚钱,那么必须主动出击事在人为,作为一个个人网站,我们可以拥有自己的产品,并把它们卖掉,依靠自己来赚钱一、个人网站自主经营的可行性网民正在不断地快速增长。另有调查表明,网民的平均收入水平提高了,也就是说网民的消费水平也提高了。我们个人网站为什么要依靠做广告来赚钱我们难道不可以转变一下思路吗打个比方,你的网站日访问量有1000左右也就是说每天有1000个人左右进入你的“商店”,做广告相当于代理别人的产品,就算卖出去了也只能返回给你一部分的利润。但是如果你的“商店”卖自己的产品,那么大部分利润就掌握在自己手中。广告赚钱只是做网站的“副产品”,真正的产品是你自己的网站。记住你的网站是一座金矿,可能你只是开采了“浏览量”这一层矿产,更深层次的矿产你可能还尚未开发出来你完全可以将你自己网站的产品进行出售,比如将你网站的精品内容印成一本书,然后在网上卖你自己的书。还有更多的经营方法,关键是你要去不断探索下面我就结合我对互联网的观察与自己的实践经验告诉大家如何经营自己的产品。对于网络经商,起初一定要抱平和的心态因为中国的网民毕竟不是很多,大家不要过分期望网络经商会给你带来很大的效益。要把网络经商作为一种锻炼,说句现实的话“现在赚小钱,以后赚大钱”。这是我对网络经商的一种“长期作战”的战略观点。第二章个人网站的开发环境21DREAMWEAVER简述DREAMWEAVER是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DREAMWEAVER是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件,随着DREAMWEAVER8的发布,更坚定DREAMWEAVER在该领域的地位。它集网页设计、网站开发和站点管理功能于一身,具有可视化、支持多平台和跨浏览器的特性,是目前网站设计、开发、制作的首选工具。DREAMWEAVER80的特点如下。1、灵活的编写方式DREAMWEAVER具有灵活编写网页的特点,不但将世界一流水平的“设计”和“代码”编辑器合二为一,而且在设计窗口中还精化了源代码,能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面DREAMWEAVER是一种所见即所得的HTML编辑器,可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写,同时亦保证了其专业性和兼容性,并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面,DREAMWEAVER都能提供便捷的方式使用户设计网页和管理网站变得更容易。3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性,可以指定何种浏览器为测试用浏览器,同时系统自动检验以确定页面有没有目标浏览器不支持的TAGS或CSS结构。动态跨浏览器有效性检查功能可以自动核对TAGS和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能6、内建的图形编辑引擎7、DREAMWEAVER的集成特性DREAMWEAVER8继承了FIREWORKS、FLASH和SHOCKWAVE的集成特性,可以在这些WEB创作工具之间自由地切换,轻松地创建美观实用的网页。8、丰富的媒体支持能力可以方便地加入JAVA、FLASH、SHOCKWAVE、ACTIVEX以及其他媒体。DREAMWEAVER具有强大的多媒体处理功能,在设计DHTML和CSS方面表现得极为出色,它利用JAVASCRIPT和DHTML语言代码轻松地实现网页元素的动作和交互操作。DREAMWEAVER还提供行为和时间线两种控件来产生交互式响应和进行动画处理。22DREAMWEAVER的操作环境我们将工作界面分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。221标题栏DREAMWEAVERMX的“标题栏”中将显示文字“MACROMEDIADREAMWEAVERMX”如果打开网页的话,在后面还会显示该网页的一些信息,如网页标题、所在位置及网页名称,右边有三个钮,分别对应DREAMWEAVERMX的最大化最小化和关闭的操作。222菜单栏“标题栏”下面就是“菜单栏”,栏中提供了“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10项菜单。单击其中任意一项菜单,随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码,这是该指令的快捷键,熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记,它代表该指令还包含下一级的指令,鼠标停留片刻即可显示。223快捷工具栏“快捷工具栏”指的是“菜单栏”下边的3排按钮,选择菜单“查看/工具栏”,勾选里面的“插入”、“文档”和“标准”3项,完整的快捷工具栏就显现出来了。224属性面板在网页编辑窗口的下面还有一个面板,它是有名的“属性面板”,它在这个软件中起到举足轻重的作用。属性面板顾名思义,就是显示,调整属性的面板,根据鼠标所选中对象的不同,“属性面板”在界面上也会有所差异,用户可以分别对不同的对象进行调整。23ASP技术ACTIVESERVERPAGES“动态服务器网页”,一般简称为“ASP”,ASP之所以能受到大家的重视与使用的原因,主要在于所产生的执行结果都是标准的HTML格式,而且这些程序是在网络服务端中执行,使用一般的浏览器(如IE或NETSCAPE)都可以正确地获得ASP的“执行”结果,并且将这ASP执行的结果直接在浏览器中“浏览”,不像VBSCRIPT或JAVASCRIPT是在客户端(CLIENT)的浏览器上执行,若使用VBSCRIPT来设计程序,客户端(CLIENT)在浏览器中可以显示程序执行的结果,可是,客户端(CLIENT)若使用NETSCAPE浏览器就无法显示VBSCRIPT的执行结果。ASP的特点如下1、任何开发工具皆可发展ASP只要使用一般的文书编辑程序,如WINDOWS记事本,就可以编辑。当然,其他网页发展工具,例如,FRONTPAGEEXPRESS、FRONTPAGE等也都可以;不过还是建议你用记事本来写,既省钱又方便,若是使用那些所见即所得的网页编辑来写,可能会发生一些意想不到的离奇状态。通过各家浏览由于ASP程序是在网络服务器端中执行,执行结果所产生的HTML文件适用于不同的浏览器。2、语言相容性高ASP与所有的ACTIVEXSCRIPT语言都相容,除了可结合HTML,VBSCRIPT、JAVASCRIPTACTIVEX服务器组件来设计外,并可经由PLUGIN(外挂组件模组)的方式,使用其他厂商(THIRDPARTY)所提供的语言。3、隐密安全性高如果我们在浏览器中直接查看网页的原始代码,就只能看到文件,原始的ASP程序代码是看不到的这是因杰程序先于网站服务(WEBSERVER)端执行后,将结果转换成标准HTML文件,再传送到客户端(CLIENT)的浏览器上,因此,我们所辛苦撰写的ASP程序并不会轻易地被看见进而被盗用。4、易于操控数据库ASP可以轻易地通过ODBCOPENDATABASECONNECTIVITY驱动程序连接各种不同的数据库,例如ACCESSFOXPRO、DBASE、ORACLE等等,另外,亦可将“文本文件”或是“EXCEL”文件当成数据库用。5、面向对象学习容易具备有面向对象(OBJECTORIENTED)功能,学习容易,提供了五种方便能力强大的内建对象REQUEST、RESPONSE、SEVER、APPLICATION以及SESSION,同时,若使用内建的“APPLICATION”对象或“SESSION”对象所撰写出来的程序可以在多个网页之间暂时保存必要的信息。6、ASP的六大内部对象对象名称功能描述REQUESTRESPONSESERVERSESSIONAPPLICATIONOBJECTCONTEXT从客户端取得信息将信息送给客户端提供一些WEB服务器工具储存在一个SESSION内的用户信息,该信息仅可被该用户访问在一个ASPAPPLICATION中让不同的客户端共享信息可以用来配合MICROSOFTTRANSACTION服务器进行分布式事务处理所以我选择了ASP结合DREAMWEAVER架构个人站点。第三章需求分析31概述需求分析最根本的任务是确定“为了满足客户的需要,系统必须做什么”。具体的说,应该确定系统必须具有的功能和性能,系统要求的运行环境,并且预测系统发展的前景。必须仔细分析系统中的资料,既要分析系统中的数据流,又要分析长期使用的资料储存。该阶段不是确定系统怎样完成它的工作,而仅仅是确定系统必须完成哪些工作,也就是对目标系统提出完整、准确、清晰、具体的要求。32个人网站的问题定义与可行性分析一、明确架设网站的目的及客户要求通常情况下,架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流,具有较强的目的性,我的个人网站一般体现在为了展示自己的风采,让大家和我一起分享我的心得与经验,让和我有共同爱好的朋友有一个倾诉的地方。二、我的个人网站概貌因为是个人网站,所以只是选择了自己擅长和喜爱的内容,在突出自己的风格和特点的同时,还应用了现在流行的网站设计技术和数据库技术。因此将网站设计分为前台页面展示平台和后台在线管理平台。三、功能划分网站设计有新闻更新,浏览者可以在首页浏览自己喜欢的新闻,并且可以在留言板和大家交流,在后台管理页面中,通过身份认证,管理员我,可以对网站信息进行管理。站内的其它页面均是我自己的精心收藏,与大家一起分享321功能定义(1)管理员权限修改所有页面内容、增删改文章、管理评论、修改公告、修改管理员自身信息、编辑各页面栏目、添加删除图片、添加删除音乐、修改版权信息等。(2)浏览者权限阅读所有页面内容、添加评论、添加留言、浏览文章、浏览图片、浏览音乐等。322可行性分析系统可行性分析主要从经济可行性、技术可行性和操作可行性三方面去分析。(1)经济可行性分析从系统的开发和效益关系上讲,采用ASP这个可以开发出交互、高性能WEB数据库应用的技术进行开发,效率较高。该系统的开发不需要花费太多的经费,只需在域名和服务器空间租用上有开销,因为个人网站不涉及超大容量的文件存储和庞大的访问量,因此对于服务器来讲,要求不会太高,开销不会很大。因此,从经济性分析是可行的。(2)技术可行性分析根据现有的技术设备条件,在技术上实现也是可行的。在设备方面,前期系统开发在本地端制作完成,只需通过FTP软件上传至服务器端即可,而软件开发所需条件相对较低,对于系统开发及运行环境均不造成任何困难。对于系统开发人员基本具备了计算机专业知识,有一定的编程基础,熟悉和掌握数据库及网络相关知识,具备开发条件。(3)操作可行性该系统操作上非常简单,对于用户来说,只要具备IE浏览器55版本以上即可通过域名搜索即可登录本站。33个人网站整体要求331功能要求(1)页面风格简洁明快,给人以较好的视觉印象。(2)用户浏览、操作均便捷,迅速。(3)用户权限、功能的设置要准确无误。332系统性能要求在目前硬件设备条件下,要求处理程序的速度相对较快。因此,在程序设计阶段,优化代码,降低处理时间是需要考虑的问题。333关于未来需求由于系统开发时间较短,可能不是很完善,在运行过程中还会遇到一些问题,所以应在系统设计过程中对未来可能需要的扩充和修改做好准备,以便及时变更第四章网站制作41站点411创建站点要制作一个网站,第一步操作都是一样的,就是要创造一个“站点”,这样可以使整个网站的脉络结构清晰地展现在面前,避免了以后再进行纷杂的管理。从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”,之后再选择其中的“站点”,再次弹出一个对话框,在文本框中输入自己已经企化好的网站名称“追梦人”。填好后,单击“下一步”,进入下一个步骤。由于我要做的是一个静态的网页,所以选择上面的一项“否,我不想使用服务器技术。”单击“下一步”,进入下一个步骤。在此选项中有两个选择,选择推荐的“编辑我的计算机上的本地副本,完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹,DREAMWEAVER将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标,新建并指定一个空的文件夹“E/DING”。之后单击“下一步“,进入下一个步骤。这一步是如何设置连接到远程服务器,弹出式菜单中有6中选择,这里选择“无”。而后“下一步”再“完成”,即可。412创建站点内容站点创建完成后,就可以创建WEB页来填充站点了。在“右侧浮动面板组”中选择“文件/文件”面板,此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择“新建文件”,新建一个文件后将其命名为“INDEXHTM或INDEXHTML,它就是未来的首页。网站分为“平面设计”、“动画制作”、“网文精品”、“经典回顾”、“个人说明“这五个大栏目,所以继续用鼠标右击右侧,在弹出的菜单中选择第二项“NEWFOLDER(新建文件夹)”。执行五次操作,新建五个文件夹,并把它们重命名为GRAPH、ANIM、BOOKS、MUSIC、LETTER,分别对应上面的五个大栏目。存放它们各自的内容。之后再次新建1个文件夹,命名为IMAGES,用来存放“所有的图象文件”的内容。之后在个栏目的文件夹里还要建立想相应的栏目网页。42首页421设置首页布局首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视SERVER端的设置,一般的有INDEXHTM,DEFAULTHTM或HOMEHTM等,目前主要以INDEXHTM的居多。当然,后缀名为HTML也是正确的。具体设置方法是右健单击“文件”浮动面板中的INDEXHTM,在弹出的菜单中选择“设成首页”。首页的布局有很多方法,在这里我所用到的是表格的“布局模式”。“布局”模式中的表格称为布局表格,单元格称为布局单元格。在绘制布局表格和布局单元格时,必须从“标准”模式切换到“布局”模式。直接单击“布局”按钮即可。操作步骤1、在“插入快捷栏”的“布局”分类中,单击“布局表格”按纽。2、将变成“”形状的鼠标光标放到编辑中网页上,在要绘制的地方进行拖动就可以进行创建了。(如果绘制的是第一个表格必须从网页的最左上角开始绘制)。3、3、在这里要绘制多个表格,可以再次单击“布局表格”按纽进行绘制,也可以按住CTRL键绘制多个表格。422设置首页的页面属性首先双击“文件”浮动面板中的INDEXHTM,进入页面的编辑窗口。右健单击空白区域,在菜单中选择“页面属性”,之后弹出“页面属性”对话框,若选择主菜单“修改/页面属性”项,也可以把打开该对话框。在“页面属性”对话框中,左侧窗口显示“分类”,其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项,右侧区域则显示各类中可以设置的项目。423查看和编辑头内容一个网页文件结构上实际是由两部分组成,头(HEAD)内容和主体(BODY)内容主体内容(BODY)是文档的主要部分,也是包含文本和图像等的可见部分。头内容(HEAD)是除文档标题外的不可见部分,包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息,这些元器并不是每个页面都需要的,例如,可以仅为主页提供关键字。下面就以首页为例,说明怎样插入较常用的头(HEAD)内容。单击“菜单拦”下面“插入快捷”的下拉列表,选择其中的HTML类,此时右侧将会显示该类中可以插入的对象快捷按钮,再次单击第2个按钮“文件头”旁边的下拉箭头,会弹出菜单,该项列出的便是即将插入的头内容。424插入图像图像是网页中不可或缺的组成成份,恰当地使用图像,可以使网站充满生活生命力与说服力,吸引更多的浏览者,加深他们欣赏你网站的意愿。另一方面,网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制,导致了下载的速度不可能太快,因此,网页的大小就不能太大,其中关键就在于图像的大小了,否则浏览者会失去等待的耐心,无论你的网站多么精彩也无济于事了。所以,在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤,以使得它们在保持图形美丽与网站风格搭配的基础上,图片文件能够变的更小。1、首先将光标停留在要插入图像的位置,然后单击“菜单栏”下面“插入快健栏”的下拉表,选择其中的“常用”类,则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像图像”按钮,单击它右侧的下拉列表,选择第1项“图像”。2、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件,或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中,可选择文件URL地址的类型,如果选择“文档”选项,表示图像地址相对于当前文档;如果选择“站点根目录”选项,表示地址相对于根目录。在这里我要插入的是网站标志LOGO,插入LOGO图象。最后单击“确定”按钮,即可完成插入图像的操作。425插入多媒体在DREAMWEAVER中,除了之前讲到的可以插入“图像”外,还可插入动画、声音、视频等媒体元素,如FLASH,SHOCKWAVE,APPLETS,ACTIEX及格MIDI声音文件等,并且还可以在DREAMWEAVER自身内插入MACROMEDIAFLASH按钮和文本对象,以及进行相关的后期处理和添加设计备注等操作。在DREAMWEAVERMX2004文档中,可以插入媒体文件包括FLASHSHOCKWAVE影片、QUICKTIME、AVIJAVA、APPLETACTIVEX控件以及各种格式的音频文件。要在浏览器中播放放FLASH动画,必须在浏览器中集成“FLASH播放器(FLASHPLAYER)”。其中,INTERNETEXPLORER通过ACTIVEX控制来实现,NETSCAPENAVIGATOR则是通过相应的插件来实现的。在最新的NETSCAPENAVIGATOR和INTERNETEXPLORER浏览器中,均已集成了FLASH动画播放功能。操场作步骤步骤1将光标停留在要插入FLASH的位置,然后单击菜单栏下面“插入快捷栏”的下拉列表,选择其中的“常用”分类,右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体”按钮,单击它右侧的下拉列表,选择第1项FLASH图标。步骤2在弹出的对话框中选择扩展名为SWF的FLASH文件,即可将其插入到DREAMWEAVER的“网页编辑窗口”中,可以看到,在这个窗口中FLASH文件的大小。在这里我的主页插入的一个动画。426插入文本在网页中,文本内容也可以说是重要的组成部分,一个网站成功与否,它是最关键的因素。在这最关键的因素。可丰富网站的文字内容,并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了,和一些文本编辑软件(如MICROSOFTWORD)的使用方法一样,选择好习惯的输入法,就可以运指如飞了。另一种是复制文本的方式。有些读者可能不喜欢使用DREAMWEAVER来进行打字的工作,而更习惯在专门的文本编辑软件中快速打字,如MICROSOFTWORD和WINDOWS自带的记事本等,又或者读者已经准备好了要放入网页的文本的电子版本,那么我们就可以直接使用DREAMWEAVER的文本复制功能,将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作,具体步骤如下。打开文本编辑软件(如MICROSOFTWORD),选中要复制的文本,它们将反白显示,执行菜单“编辑/复制”命令或直接用快捷键CTRLC,之后切换回DREAMWEAVER,将光标停留在插入文本的位置,执行主菜单“编辑/粘贴”命令或直接使用快捷键CTRLV,即可将大段的文本快速粘贴到网页中。这在我的“网文精品”中用到很多,全部是在WORD软件中排好CTRLC,然后点击要粘贴的位置,CRTLV到DREAMWEAVER即可。43创建其它网页还有其它的几个网站与主页的制作相同,一个网页是图象和文字的组合。“平面设计”中的图象插入和前面的介绍相似,并可以在属性拦中调节图象的大小。在DREAMWERVER中常常会用到FIREWORK、FLASH,它们是相辅相成,在主页中的主体部分就是用FIREWORK在“个人说明”中也用到这点,首先定好需要尺寸,在属性中设好背景,颜色等等,插入图象,输入文字,也WORD里的操作雷同。第五章网页链接的建立51链接的概念链接(或称超链接)是网页与网页之间一种单向的连接关系。也是WWW的魅力所在。为了把INTERNET上众多的网站和网页联系起来,构成一个有机的整体,就要在网页上加入链接。通过点击网面上的链接,浏览者才能在信息海洋中尽情遨游。网站实际上是由很多网页组成的,那么网页之间是如何联系的呢这就是本章要讲的内容网页的“链接”。“链接”,又称“超链接“(HYPERLINK),它作为网页的桥梁,起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在DREAMWEAVERMX2004中,如果以“链接”的媒介来划分的话,则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“EMAIL链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”,共8种。其中部分内容在之前的章节中可能接触过,这里将对其进行更深入的讲解。52创立连接521创建超链接1使用属性检查器创建链接这是最常用的一种方法。使用“属性检查器”可以把当前文档中的文本或图像链接到另一个文档。使用属性检查器创建链接的步骤如下(1)选择需要创建链接的文本或图像,例如选择文字“评审办法”如图所示(2)在“属性检查器”中的“链接”中输入要链接到的文件名称如图所示。(3)或单击浏览文件图标打开“选择文件”对话框,选择要链接的文件“HOWTOSELECTHTM”,如图所示(4)选择链接文档的载入方式。如图所示选择“_SELF”方式。注意默认情况链接的文档在当前窗口或框架中打开“_SELF”方式,“_BLANK”是将被链接文档载入到新的未命名浏览器窗口中,“_PARENT”是将被链接文档载入到父框架集或包含该链接的框架窗口中,“_TOP”是将被链接文档载入到整个浏览器窗口并删除所有框架。5设置完成,效果如图所示。2使用指向文件图标创建链接使用指向文件图标创建链接的步骤如下1在文档窗口选择文档或图像。样选择“评审办法”。2在“属性检查器”中,拖动链接域右边的指向文件图标,按住鼠标左键并拖动连向“站点面板”中的一个文档,如“INDEXHTM”。如图所示。3释放鼠标左键,链接被创建,在属性面板的链接地址框中出现已链接的地址即可。3直接为页面元素创建链接(1)在文档窗口选择文本。(2)按住SHIFT键,在选定的文本上拖动鼠标指针,拖动时指向文件图标出现,如图所示3指定链接到目标,例如链接到“INDEXHTM”,释放鼠标,链接被建立,这就样链接就被建成。结果与上面的方法相同这里不在重复。注意给图像建立链接的方法与上相同。53文字链接“文字链接”即以文字作为媒介的链接,它是网页中最常被使用的链接方式,具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例,来讲解如何为文字建立“链接”。具体操作步骤如下所述。操作步骤步骤1准备好已经制作完成的首页的各个栏目页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,这里的5个栏目“平面设计”、“动画制作”和“网文精品”、“经典回顾”、“个人说明”为例来进行讲解。步骤2在DREAMWEAVER中打开首页,之后反白选取作为“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“平面设计”设置链接,首先要反白选中“平面设计”4个文字。步骤3观察“属性面板”,其中包括一个“链接”文本框。步骤4接下来需要把链接的地址加入到文本框中,方法有3种。这里我用到的是直接点击文件夹图标,在文件夹中找到要链接的对象GRAPHHTM。这样就建立了超链接。不过有点很重要,由于大多数服务器都不支持中文文件名,而且对大小写敏感,因此采用英文文件名并统一大小写。步骤5在“链接”文本框下面还有一个“目标”下拉列表,从中可以选择链接网页显示的窗口方式,共有4种。实例中没有选择任何选项,保持空白,表示在原窗口中打开链接网页。步骤6还可以设置一些“链接”的属性,这是前面讲过的内容。单击“属性面板”中的“页面属性”,选择其中的“链接”分类,可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。步骤7至此,第1个栏目的链接就制作完毕了,按下CTRLS保存网页,再按下F12预览,测试一下,当鼠标放在“平面设计”这4个文字上时将变成手形,并且浏览器窗口下面的状态栏中会显示链接到的网页的地址,单击文字,页面会立即跳转到第1个栏目中,这表示链接已经制作成功了。步骤8同理,按照以上步骤,再为“动画制作”和“网文精品”“经典回顾“等其它栏制作指向对应栏目的链接。步骤9通常在栏目页面中还需要有“返回首页”的链接,单击其后可以跳转回首页,因此在各个栏目中还要插入“网站首页”的文字,并且制作指向首页INDEXHTML的链接,制作方法不变。至此,整个“文字链接”的实例就全就全部完成了。通过对这个实例的讲解,读者不仅应该学会如何为文字制作链接,还应用对“链接”有了更加深刻的理解,链接的目的何在它到底能够在网页的网站中发挥什么样的作用怎样才能更好地使用它这些是网页制作者更应该思考的问题。下面继续介绍其他类型的链接。54影像链接在图像的影像地图中创建链接的步骤如下1选择图像,如图所示。2单击“属性检查器”左下角的矩形热点工具按钮,在图像上拖动创建影像,如图所示。3为影像部分创建链接。到“ABOUTUSHTM”,并且设定“目标”为“_BLANK”,“替代”为“关于本次大赛”,如下图所示。、(4)设置完成后用浏览器浏览的效果如上图所示。55EMAIL链接在网页上创建电子邮件链接,方便用户意见反馈。当浏览者单击电子邮件链接时,可打开浏览器默认的电子邮件处理程序,收件人邮件地址被电子邮件链接中指定的地址自动更新,无须浏览者手工输入。使用插入邮件链接命令创建电子邮件链接的操作步骤如下1使用菜单选项(1)选择主菜单中的“插入”选项中的“电子邮件链接”如图所示(2)出现电子邮件对话框如图所示(3)单击“确定”安钮即可完成。设置后的页面显示为图2用“插入面板”中的“常用”中的“电子邮件链接”(1)选择“插入面板”中的“常用”中的“电子邮件链接”如图所示(2)单击“电子邮件链接”按钮。以后的操作与上一种方法相同这里不在重复。3使用“属性检查器”为对象加电子邮件链接。(1)选中所要链接的文本或图像如图所示。(2)在“链接”栏中输入邮箱地址MAILTOTJTTUMATCH_1163COM如图所示(3)即对所选文本或图像建立完链接。56文件下载链接“文件下载链接”的原理很简单,只要链接文件属于浏览无法识别的关型,便都会使用IE浏览器直接进行下载,并保存到本地计算机中。浏览器无法识别的文件类型有很多,这里就介绍一个最常用的,以ZIP或RAR为后缀名的压缩格式文件,这种文件可以使用主流的压缩软件(如WINZIP、WINRAR)来制作。下面我们就业以实例来说明。在前面“插入多媒体”一章中,我们曾经讲过直接链接文件的方式来插入“视频”,即直接在“链接”文本框中输入“文件名名后缀名”,如OLYMPUSWMV。单日击这个链接,经过数据下载后,WINDOWS系统将启动自带的媒体播放器WINDOWSMEDIAPLAYER来播放该视频。操作步骤步骤1先将视频文件OLYMPUSWMV通压缩成OLYMPUSRAR文件,放入站点的MEDIA文件夹下。步骤2将文件路径输入至“链接”文本框中。步骤3保存网页,按下F12预览,在浏览器中单击“下载精彩广告视频”链接文本,会弹出“文本下载”选择框,单击其中的“保存”按钮。步骤4在“另存为”对框中选择保存到本地计算机中的位置,实例中为“经典回顾”文件夹。之后单击“保存”按钮,压缩文件即保存到该位置中。至此,“文件下载链接”便制作完成了。读者可以打开“我的文档”文件夹,解压缩OLYMPUSRAR文件,随时欣赏下载影片。本设计中未用到此链接,在此只作简单介绍。57在HTML语言中建立网页链接571文字链接在HTML语言中用超链接标记指向一个目标。其基本格式为举个简单的“文本链接”的实例,该实例相对应的HTML代码如下所示。文字链接AHREF“INDEX2HTML”TARGET”BLANK”平面设计(新开窗口,BLANK动画制作(原窗口,默认为空)网文精品解释HREF是标记的一种属性,该属性中的URL等于链接目标文件的地址。TARGET也是标记的一种属性,相当于DREAMWEAVER“属性面板”中的“目标”,它的值等于BLANK,效果是在新窗口中打开。除此之外还包括其他3种PARENT,SELF和TOP。这和DREAMWEAVER中“目标”下拉列表中的内容是一模一样的。文本内容如代码实例中的“平面设计”。这些文本将放在使用了链接属性HREF和目标属性TARGET的与标记之间,产生了链接的效果。571图像链接举个简单的“图像链接”的实例。该实例相对应的代码所示。图像链接(新开窗口,BLANK)(原窗口,默认为空)AHREF”3D/3D001HTM”解释仔细观察代码可以发现,“图像链接”与“文本链接”惟一的差别就在于与之间的内容。“文本链接”中与之间的内容是文字内容,而“图像链接”中就肯定是图片内容了。之前讲过,插入图片使用“EMAIL链接给我写信解释只需使HREF等于“MAILTO邮件地址SUBJECT主题即可,其中SUBJECT为可选项,“SUBJECT主题”也可以不加。573文件下载链接“文件下载链接”实例的代码如下所述。文件下载链接下载精彩广告视频解释只需使HREF等于“文件的路径”即可。本章讲解的是网站的链接的方法和技巧。能让浏览者很轻松的地观看是很重要的,这其中的关键就再于“链接“了。第六章总结五年的学习生涯马上就要画上句号了,毕业前所有的努力与付出都凝聚在这篇论文里面。相信它虽然算不上上乘之作,但的确是我用心血浇灌的答卷。圆满看着自己亲手做的网站,心里有一种从未有过的成就感,因为我自始至终都在全力以赴。制作网站是一件很费时间与精力的事情。但只要全身心投入,所有的困难都能克服。记得当我初次接触网站制作的时候,我无从下手因此,一开始就觉得做一个像样的个人网站对我来说有点不切实际因而曾有一段时间,一想到做网站,我就特伤脑筋。但是通过参考别人的个人网站,我慢慢找到了灵感,于是开始着手设计自己的个人网站。整个过程修修补补,查找资料,终于形成自己的风格,这一切都是靠时间与精力堆砌出来的。然而,要制作一个比较理想的网站,光有时间与精力还远远不够。因为设计一个网站需要多方面的因素来支撑,如网页制作技巧、激情与灵感、细心与勤奋等等。我能够顺利完成这个网站,正是有这些不可或缺的因素在支持着。冥冥之中有一种无形的力量在牵引着我。正是这种力量给了我动力,让我勇往直前的面对挑战。我始终坚持一种信念。没有做不到,只有想不到。只要我充分发挥自己的主观能动性,就一定能设计出一个优秀的个人网站。做任何一件事,要想成功,就得保持激情。有了激情,才能激发出灵感。细心与勤奋,这是做事必须具备的基本素养。往往一个人的细心程度直接影

温馨提示

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

评论

0/150

提交评论