文档介绍：该【毕业论文-个人网站的设计与实现 】是由【青山代下】上传分享，文档一共【10】页，该文档可以免费在线阅读，需要了解更多关于【毕业论文-个人网站的设计与实现 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:..个人网站设计与实现【摘要】个人网站的设计和内容由于个人的喜好和看法,而大不相同。在这次我们将设计一个以故事为主题的个人网站,希望可以给用户在忙碌的生活中停下来休息的地方,可以轻松的说说各自的故事,,我们使用MICROSOFT公司的Dreamweaver作为开发技术,利用其提供的各种面向对象的开发工具,以CSS为主的网站架构,在短时间内建立一个个人网站.【关键词】。绪论可以说21世纪是一个充满个性和梦想的时代,每一个人都在展示着自己的实力和自己的想法,可能这与我们得到的教育和社会进步,人对自身认识的加深有关系,但这其中不能不忽视互联网的威力。一个虚拟的空间,一个充满希望而又嫔纷多彩的世界,在这里人们随意的展示着自己的想法,,人们构造着自己的梦,写一些以前很想写但是没有舞台的故事,唱着一些想别人听见但是又地方唱的歌曲,讲着一些自己身上发生的故事,体验着每一个陌生而又熟悉的朋友的经历,一个虚构但又感觉真实的舞台。这个神奇的舞台也真的把一部分人的心愿和想法实现了出来,网络歌手,网络作家,可以说是近期最红的话题。不至如此很多人在这个还实现了自己的发财梦,明星梦。网上商店可以说是近年来年轻人创业的首选,年轻的一代也越来越接受这一种新颖而又轻松的购物方式,并且这一现象也正在向全民化普及。听说掏宝网有一亿多的注册用户,这难道不能说明网络在改变着我们的生活吗。近期很多音乐网站上提供了很多供个人使用的个人原创专区,这令到很多有着音乐梦想的人,有了一个展示自己的舞台,,不管草根明星还是草根英雄,都是以前未尝出现过的词语,平凡确实很难和英雄,明星联上关系,但真是这种平凡给人的亲切和真实感,才是他们巨大魅力的来源。说到这里我们也来,在这虚拟的世界里找一下自己的梦想,建立一个自己的天地:。1工作布局在Windows中首次启动DreamweaverMX时,会出现“工作区设置”窗口,从中可以选择一种工作区布局,提供的三种不同的工作界面,分别是“DreamweaverMX工作区”“Dreamweaver4工作区工作区和“Homesite/Coder-Style代码编者样式”。确定了工作区后,如果希望改为其它布局,可以选择“编辑”菜单中的“参数选择”命令,切换到不同的工作区。,:1:..1。插入栏:包含用于将各种类型的对象(如图像、表格和层)插入到文档中的按钮。每个对象都是一段HTML代码,,您可以在“插入”栏中单击“图像”图标插入一个图像。如果您愿意,可以不使用“插入”栏而使用“插入”。文档工具栏:包含按钮和弹出式菜单,它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)、各种查看选项和一些普通操作(如在浏览器中预览)。文档窗口:显示您当前创建和编辑的文档。3。属性检查器:用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。:,请单击组名称左侧的展开箭头;若要取消停靠一个面板组,请拖动该组标题条左边缘的手柄。:使您可以管理组成站点的文件和文件夹。:显示的是页面的目录文件夹名及打开的文件名,如果文件中包含未保存的修改部分,标题栏中将在显示文件名和星号(*)。,最显著的变化就是面版,文档窗口右侧的界面中包含了所有常用的面版。根据不同的需要,DreamweaverMX将面版分为以下几大组。设计:包含网页设计中所需要的面版,分别为CSS样式、HTML样式和行为。代码:包含代码编辑所需要的面版,分别为标签检查器、代码片段和参考。应用程序:包含动态网页设计所需要的面版,分别为数据库。绑定。服务器行为和组件。文件:包含站点内资源管理所需要的面版,分别为站点和资源。答案:这一组只有一个面版,是所有Macromedia公司系列MX软件所共有的,,除此之外,在“窗口”菜单的“其他”命令下还可以显示其他的面版,包括代码检查器、框架、历史记录、层和时间轴等。。1面版的展开和折叠面版全部折叠时的显示状态,此时面版占据的空间是最小的。需要使用某一组面版时,单击面版组的标题栏部分,标题上的三角按钮从向右转为向下,面版展开,在同一个面版组中选择不同的面版时,只需要单击相应的选项卡即可。2。“参数选择”对话框进行设置,具体操作步骤如下。选择“编辑/参数选择”命令,打开“参数选择”对话框。取消选中不希望出现的面版前面的复选框,面版就回在文档窗口中隐藏。2。,选择不同的对象时,“窗口/属性”命令或者按[ALT+F3]快捷键,可以打开或者关闭属性面版。单击右下角的三角按钮,可以切换属性面版的常用属性和全部属性,当按钮为下三角时,,属性面版中显示的为所有属性。单击面版右上角的“快速标签编辑器”按钮,可以添加或者编辑HTML语言。2:..在文档窗口中选择不同的网页对象时,属性面版中将显示相应的对象属性,下面为常见的几种对象的属性面版显示。,例如图象的插入、表格的设定等放置在插入面版中,这样可以十分方便快捷的进行操作,而且面版中相应的图标非常直观,应用这些快捷方式,。包括常用、布局、文本、表格、框架、表单、模板、字符、媒体、文件头、脚本及应用程序。选择“编辑”菜单下的“参数命令,在左侧的“分类中选择“常规”选项,在右侧的“插入面版”选项中可以选择插入面版的显示类型,默认的选择为“仅图标”,也可以选择“图标和文本”或者“仅文本”。1。常用插入面版常用插入面版的显示,他主要进行各种页面内物体的操作,包括图象及超级链接的插入等。2。字符插入面版应用字符插入面版可以在页面内加入各种符号。应用时将光标停留在需要标志的位置,然后单击图标即可,在HTML页面内出现的是标志代码,“其他字符”按钮有,出现“插入其他字符”窗口。选定一个符号后,在上面的“插入”文本框内会出现此符号的名称,应用的方式与常用符号的方式是一样的。这样可以选择更多的符号加入到页面内。3。文件头菜单项应用文件头菜单项插入的标签会显示于文档的头部。,选择“窗口/其他/历史记录录命令,,他允许撤消一步或者更多的操作步骤,允许重复以前的操作,还可以通过创建新的命令自动操作任务。1。标签检查器面版3:..在标签检查器面版中,,可以方便的定位到特定的HTML标签,并对它们的属性进行编辑,,如果设计者经常要用到一个特定的创意,可以在这个面版中将创意的过程和内容储存下来,当需要这个创意时,直接选中并将它插入到相应的页面中即可。另外,DreamweaverMX还自带了一系列的模板库,方便设计师直接调用代码面版。2。3。6参考面版参考面版可使设计者更方便的查阅各种帮助文档和技术参考,包括CFML,CSS,HTML,JAVASCRIPT,ASP和JSP等。,在面版中包括了进行版本更新的UPDATE按钮,。,使用了DreamWeaver的模板功能。设计方法:。。把这个网页另存为模板4。:主要介绍自己的学校情况,个人简历,个人爱好等等图片欣赏:从网上找的一些自己喜欢的图片供大家欣赏论坛:做了一个注册页面游戏介绍:,一个好的站点应该是文件组织有序,(层叠样式表)来实现的。CSS,层叠样式表,“层叠的意思,也就是说在同一个Web文档中可以有多个样式单存在,这些样式单根据所在的位置,拥有不同的悠闲级,优先级高的,就会在最后显示时采用。从样式单插入的形式来看可以分为以下3中:内联式样式单:它利用现有的HTML标记,:..嵌入式样式单:它和Javascript一样,可以嵌入到HTML文件的头部中去(〈html>和〈body>标记之间),使用〈style〉和</style〉容器装载,例如:〈“style>p{color:red;font—weight:bold}</style>”,这样会对页面中所有<p〉标记起作用。外部式样式单:它是一种保存在外部的样式单文件,外部文件以为扩展名,例如“〈linkrel=style=stylesheet—”〉〉。4。,就会知道除非您将添加到Web页中的文本或其他任何内容插入到一个“容器(如层或表格)中,否则它将从一个边缘流向另一个边缘。HTML表格是一种出色的用于设计Web页布局的解决方案,因为它们易于修改而且与大多数浏览器兼容。您可以使用表格来组织表格数据的布局或设置可视化元素(如Flash按钮、图像或文本段落)的显示。Dreamweaver有两种视图—“标准”视图和“布局”视图,,在第一部分,您将在“标准”视图中工作并在页面中插入表格。在后面部分,您将在“布局”视图中工作,并且使用布局选项绘制表格和表格单元格以设计布局。。,。您还将学****如何使用单个图像链接到多个Web页。为第一次使用Dreamweaver的用户设计。它介绍了Dreamweaver中的一些基本功能,并将帮助您了解如何对齐图像以及如何创建图像地图。使用DREAMWEAVER设计文件MacromediaDreamweaverMX随附了大量的专业化设计资源—页面布局文档、层叠样式表(CSS)和代码片断。可以使用这些资源快速学****如何创建专业化设计Web页。您将创建一个新文档,。(CSS),在站点的多个页面中以一致的方式应用样式元素。CSS样式非常灵活,因为样式并不局限于文本对象。对于文本、图像、表格、层等都可以定义定位样式和格式化样式。您可以试用几种样式,大概了解一下CSS为您提供的众多样式选项中的几种。,它以两种格式提供从数据库中提取的信息。主页显示通过数据库搜索检索到的所有记录的列表。详细页从主页链接出来,通常提供有关主页中所选项目的更具体细节。您可以在以下服务器模型中完成:ColdFusion、ASP和JSP。4。5建立插入记录页5:..指导您逐步完成建立向数据库中插入信息的表单的过程。随着创建插入页,,使用户可以使用动态生成的菜单插入信息。在DreamweaverMX支持的所有服务器模型(ColdFusion、ASP、、JSP和PHP)中都可以完成。,没有任何交互式元素。在Dreamweaver中使用JavaScript行为和分层动画时间轴,提供互动功能和动画以使访问者更感兴趣。“站点/新建站点命令,在出现的对话框中选择“高级”选项卡。在“站点名称”中为站点命名然后单击“本地文件夹”右侧的文件夹图标,选择目标磁盘,单击右侧的新建文件夹图标创建一个新的文件夹,并为其命名,选择文件夹后,单击“打开”按钮,然后单击“,直接选择即可。设置好根文件夹后,回到上一级对话框,单击“默认图象文件夹”右侧的文件夹图标,出现如图3—3所示的对话框,选择前面设置或者选择的根文件夹,单击右侧的“新建文件夹图标创建一个新的文件夹,并为其命名为作为默认图象文件夹。如果已经准备好文件夹,,单击“打开”按钮,然后单击“选择”按钮,回到上一级对话框,选中“启动缓存”“确认”按钮确认设置的站点。4。8主页在站点窗口中选择“文件/新建文件”命令,。在站点窗口中选择“文件/新建文件夹命令,将文件夹分别命名为jianjie、imgaes、jingcaiyouxi、tupianxinshang、data、wodeluntan、。1表格在“文档”窗口,将插入点放到文档中,然后选择“插入”>“表格”。在插入栏的“常用”类别中,单击“表格”图标。出现“插入表格”对话框,例如插入一行三列、一行四列、一行两列、一行六列和一行五列共五个表格,并将表格的边框属性改为“0”。我在主页中插入的主要是4个表格。在表格1中键入“南京广播电视大学”“2001级计算机应用”“顾翔”等字样,字体、颜色默认。在表格第1行插入images/,在表格第2行的第2列插入了几个flash按钮和键入了我的Email,如图3-“简介”“图片”“论坛”“游戏”字样,建立与各个页面的超连接。在表格3中键入“常用软件常用软件腾讯如图3—9所示。选中表格,将表格的背景颜色设为“蓝色”.建立5个链接到“acdsee。rar”“flash。。。。提供WINRAR压缩格式的应用程序下载。6:..在表格4中键入校内的几条新闻的标题,并与新闻进行了连接。4。8。2时间轴选择“窗口”〉“其他”〉“时间轴”可打开“时间轴”面板。时间轴弹出式菜单:指定当前在“时间轴”面板中显示文档的哪些时间轴。播放栏:显示当前在文档窗口中显示时间轴的哪一帧。帧编号:指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。您可以通过设置帧的总数和每秒帧数(fps),:是应该在时间轴中特定帧处执行的行为的通道。动画条:显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。:是动画条中已经为对象指定属性(如位置)的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。动画通道:显示用于制作层和图像动画的条,是用于查看动画的播放选项。倒带:将播放栏移至时间轴中的第一帧。后退:将播放栏向左移动一帧。单击“:将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间轴。自动播放:使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的body标签,它在页加载时执行“播放时间轴”操作。循环:使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为通道中。在“行为”通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。时间轴只能移动层。若要使图像或文本移动,首先创建一个层,然后在该层中插入图像、文本或其他任何类型的内容步骤如下:1。在常用面板中选择“层”图标,在页面内拖动绘制层,在层内单击,。单击常用面板中的“图象图象图标,在层中加入图象images/。3。单击层标记1选中层,然后选择“修改”〉“时间轴”>“在时间轴上添加对象在时间轴上添加对象,或者简单地将选定层拖至“时间轴”。选中层,用鼠标在页面上将层移至它在动画结束时应处于的位置。将出现一条线,它显示文档窗口中动画的轨迹。单击时间轴面版中的“播放按钮,就可以看见图象移动的动画效果。5。如果要让层沿曲线移动,请选择其动画条,然后按住Ctrl键并单击(Windows)或mand键并单击(Macintosh)动画条中部的一个帧,从而在您单击的帧处添加一个关键帧,或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。“播放”按钮,,并建立了与国内3大网站的友情连接。4。:..打开“行为”面板,请选择“窗口”〉“行为动作(+)是一个弹出式菜单,其中包含可以附加到当前所选元素的多个动作。当您从此列表中选择某个动作时,将出现一个对话框,,则没有所选元素可以生成的事件。删除(—)。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序-例如,可以更改“onLoad事件的多个动作的发生顺序,但是所有onLoad动作在行为列表中都靠在一起。(当您单击行为列表中所选事件名称旁边的箭头按钮时出现的菜单)是一个弹出式菜单,其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同,显示的事件也有所不同。如果未显示预期的事件,则检查是否选择了正确的页元素或标签。(若要选择特定的标签,请使用文档窗口底部左侧的标签选择器。)同时确保您在“显示事件子菜单中选择了正确的浏览器。如图3-23所示显示事件(“事件”菜单中的子菜单)指定当前行为应该在其中起作用的浏览器。您在此菜单中进行的选择确定哪些事件将显示在“事件”弹出式菜单中。通常,较早的浏览器比较新的浏览器支持的事件要少,并且在大多数情况下您选择的目标浏览器越普通,所显示的事件越少,,如果您选择“3。0或更新的浏览器”,,这将是一个非常有限的事件列表。打开主页,选中“简介”,单击动作(+),在弹出的菜单中点击“显示弹出式菜单”。在“内容”的菜单中选中“文本项,新建“学校简介”、“我的简介我的简介和2个文本,并建立2个链接,设置完成的菜单。在“外观”菜单中将字体设置为“默认”,大小为“12”,“加粗”,对齐方式为“居中对齐居中对齐,一般状态文本设置为“黑色,单元格设置为“灰色”,滑过状态文本设置为“白色”,单元格设置为“蓝色”。点击“确认确认按钮完成所有设置,设置完成的行为面版。用此方法选中“图片”建立“图片欣赏”、“美丽海景”、“世界名车”和3个弹出式菜单,选中“论坛”建立“论坛”弹出式菜单,选中“游戏建立“单机游戏”和“网络游戏奇迹”2个弹出式菜单。4。9图片欣赏图片欣赏是用DreamweaverMX的框架做的4。、每个区域都可以显示不同HTML文档的方法。使用框架的最常见的情况就是,一个框架显示包含导航控件的文档,而另一个框架显示含有内容的文档。框架是浏览器窗口中的一个区域,:..框架集是HTML文件,它定义一组框架的布局和属性,包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容,但noframes部分除外,框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。通过预定义的框架集,您可以很容易地选择您要创建的框架集类型。创建预定义的框架集有两种方法:使用插入条和使用“新建文档”对话框。通过插入条,您可以创建框架集并在某一新框架中显示当前文档;“新建文档对话框创建新的空框架集。预定义的框架集图标(位于插入条的“框架”类别中和“新建文档”对话框的“框架集类别中)提供应用于当前文档的每个框架集的可视化表示形式。使用新建文档创建框架组的具体操作如下选择“文件”>“新建”。在“新建文档”对话框中,选择“框架集”类别。从“框架集”“创建”,出现一个新的框架页面。框架页面创建完成后,就可以在其中加入内容了,每一个框架都是一个文档,在里面可以加入文字、图象等内容,:将插入点放置在需要添加内容的框架中将插入点放置于左侧的框架内,通过层和时间轴设计了一个滚动文字“努力创造自己的名牌”。将插入点放置于右侧的框架内,选择“文件/在框架内打开在框架内打开命令,在右侧的框架中打开个已经制作好的文档,。2保存框架文件框架页面制作完成后,框架组中包括了多个文档,所以保存时要将所有的文档都保存,在浏览器中才能够正确的显示,“文件/保存全部”命令,出现所示的“保存为对话框,依次为整个框架的左侧、上侧、右侧3个分框架命名保存,最后在整个框架组周围都出现粗边框,。9:..。结束语时间过的真快,短短的三个月过去了,我们的毕业设计制作也基本完成了。在这段时间里,我学到了DREAMWEAVERMX应用技术和知识技能,这些都与指导老师的教导和严格要求是分不开的。在整个毕业设计的制作和论文撰写的过程中,老师着重培养了我的自学能力和自我解决问题的能力,使我对DREAMWEAVERMX有了一个全新的认识。老师以其渊博的知识和独特的思维方式指导我的学****是我受益非浅。6。设计感想短短的3个月即将过去,我的毕业设计已接近尾声。虽然我们设计的网站还是比较粗糙的,但是在这段时间里,我身为组长带领着组员积极投入到网站的设计当中,遇到问题大家就一起想办法解决,然后再向老师请教!在这次毕业设计中,我们学会了很多网页设计的方法,特别是老师教了很多网页设计方面的技巧。每次小组成员的聚会,用一定的时间大家交流一下,分析网页设计中的一些问题。从更改主题、确定方向、网页架构设计、选定制作软件,到真正在网页上制作,我们把每一次讨论都记录下来,确实了解每次的进度是什么。花一些时间去收据相关的资料,浏览不同的网站找寻设计技巧,大家也学着互助、产生公识、交流,一切都是宝贵的经验参考文献DreamweaverMX中文版标准教程李昌隆编译中国电力出版社DreamweaverMX中文版实用培训教程陈笑/马万申/耿向华编译清华大学出版社DreamweaverMX中文版实用培训教程陈笑/马万申/耿向华编译清华大学出版社DreamweaverMX中文版完全征服手册郭光/胡崧编著中国青年出版社10