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