毕业论文-个人网站的设计与实现

《毕业论文-个人网站的设计与实现》由会员分享，可在线阅读，更多相关《毕业论文-个人网站的设计与实现（11页珍藏版）》请在金锄头文库上搜索。

1、 个人网站设计与实现【摘要】个人网站的设计和内容由于个人的喜好和看法，而大不相同。在这次我们将设计一个以故事为主题的个人网站，希望可以给用户在忙碌的生活中停下来休息的地方，可以轻松的说说各自的故事，谈谈自己的看法。经过分析,我们使用 MICROSOFT公司的Dreamweaver作为开发技术,利用其提供的各种面向对象的开发工具,以CSS为主的网站架构，在短时间内建立一个个人网站。 【关键词】站点.个人网站.Dreamweaver1.绪论 可以说21世纪是一个充满个性和梦想的时代，每一个人都在展示着自己的实力和自己的想法，可能这与我们得到的教育和社会进步，人对自身认识的加深有关系，但这其中不能不

2、无视互联网的威力。一个虚拟的空间，一个充满希望而又嫔纷多彩的世界，在这里人们随意的展示着自己的想法，每一个人都是这世界的主人。在这里,人们构造着自己的梦，写一些以前很想写但是没有舞台的故事，唱着一些想别人听见但是又地方唱的歌曲，讲着一些自己身上发生的故事，体验着每一个陌生而又熟悉的朋友的经历，一个虚构但又感觉真实的舞台。这个神奇的舞台也真的把一局部人的心愿和想法实现了出来，网络歌手，网络作家，可以说是近期最红的话题。不至如此很多人在这个还实现了自己的发财梦，明星梦。网上商店可以说是近年来年轻人创业的首选，年轻的一代也越来越接受这一种新颖而又轻松的购物方式,并且这一现象也正在向全民化普及.听说掏

3、宝网有一亿多的注册用户，这难道不能说明网络在改变着我们的生活吗。近期很多音乐网站上提供了很多供个人使用的个人原创专区，这令到很多有着音乐梦想的人，有了一个展示自己的舞台，而也正有不少人由于这样成就了自己的明星梦。有人用草根明星或者草根英雄这些字眼来形容这些人，不管草根明星还是草根英雄，都是以前未尝出现过的词语，平凡确实很难和英雄，明星联上关系，但真是这种平凡给人的亲切和真实感，才是他们巨大魅力的来源。说到这里我们也来，在这虚拟的世界里找一下自己的梦想，建立一个自己的天地：一个属于我们的心情故事网站. 2.认识Dreamweaver的编辑环境 2.1 工作布局 在Windows 中首次启动Dre

4、amweaver MX时，会出现“工作区设置窗口，从中可以选择一种工作区布局，提供的三种不同的工作界面,分别是“Dreamweaver MX工作区“Dreamweaver 4工作区和“Homesite/Coder-Style代码编者样式. 确定了工作区后，如果希望改为其它布局，可以选择“编辑菜单中的“参数选择命令，切换到不同的工作区。 2.2 窗口和面版的概述 应用Dreamweaver MX时，首先出现的是Dreamweaver MX的操作界面窗口.现将其组成局部说明如下:1.插入栏：包含用于将各种类型的对象如图像、表格和层插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它

5、时设置不同的属性。例如，您可以在“插入栏中单击“图像图标插入一个图像。如果您愿意，可以不使用“插入栏而使用“插入菜单插入对象。2.文档工具栏：包含按钮和弹出式菜单，它们提供各种“文档窗口视图如“设计视图和“代码视图、各种查看选项和一些普通操作如在浏览器中预览。文档窗口：显示您当前创立和编辑的文档。3.属性检查器：用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。4.面板组：是一组停靠在某个标题下面的相关面板的集合。假设要展开一个面板组，请单击组名称左侧的展开箭头；假设要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。5.站点面板：使您可以管理组成站点的文件和文件夹。6.标题栏

6、：显示的是页面的目录文件夹名及翻开的文件名，如果文件中包含未保存的修改局部，标题栏中将在显示文件名和星号*。 2.3 面版的介绍 在Dreamweaver MX中，最显著的变化就是面版，文档窗口右侧的界面中包含了所有常用的面版。根据不同的需要，Dreamweaver MX将面版分为以下几大组。设计：包含网页设计中所需要的面版，分别为CSS样式、HTML样式和行为。代码：包含代码编辑所需要的面版，分别为标签检查器、代码片段和参考。应用程序：包含动态网页设计所需要的面版，分别为数据库。绑定。效劳器行为和组件。文件：包含站点内资源管理所需要的面版，分别为站点和资源。答案：这一组只有一个面版，是所有M

7、acromedia公司系列MX软件所共有的，主要功能是提供帮助。 以上是默认状态下的面版组，除此之外，在“窗口菜单的“其他命令下还可以显示其他的面版，包括代码检查器、框架、历史记录、层和时间轴等。 面版的展开和折叠 面版全部折叠时的显示状态，此时面版占据的空间是最小的。需要使用某一组面版时，单击面版组的标题栏局部，标题上的三角按钮从向右转为向下，面版展开，在同一个面版组中选择不同的面版时，只需要单击相应的选项卡即可。 2.3.2 设置默认面版 在文档窗口出现的面版可以通过“参数选择对话框进行设置，具体操作步骤如下。选择“编辑/参数选择命令，翻开“参数选择对话框。取消选中不希望出现的面版前面的复

8、选框，面版就回在文档窗口中隐藏。 属性面版 属性面版可以显示并修改当前选定对象的属性，选择不同的对象时，在属性面版中会出现其对应的参数。选择“窗口/属性命令或者按ALT+F3快捷键，可以翻开或者关闭属性面版。单击右下角的三角按钮，可以切换属性面版的常用属性和全部属性，当按钮为下三角时，属性面版中显示的为常用属性.当按钮为上三角时，属性面版中显示的为所有属性。 单击面版右上角的“快速标签编辑器按钮，可以添加或者编辑HTML语言。在文档窗口中选择不同的网页对象时，属性面版中将显示相应的对象属性，下面为常见的几种对象的属性面版显示。图象的属性面版显示表格的属性面版显示文字的属性面版显示框架的属性面版

9、显示 插入面版 在Dreamweaver MX中将一些常用的工程，例如图象的插入、表格的设定等放置在插入面版中，这样可以十分方便快捷的进行操作，而且面版中相应的图标非常直观，应用这些快捷方式，可以使网页制作事半功倍。插入面版的位置及显示。包括常用、布局、文本、表格、框架、表单、模板、字符、媒体、文件头、脚本及应用程序。选择“编辑菜单下的“参数命令，在左侧的“分类中选择“常规选项，在右侧的“插入面版选项中可以选择插入面版的显示类型，默认的选择为“仅图标，也可以选择“图标和文本或者“仅文本。1. 常用插入面版常用插入面版的显示，他主要进行各种页面内物体的操作，包括图象及超级链接的插入等。2. 字符

10、插入面版应用字符插入面版可以在页面内参加各种符号。应用时将光标停留在需要标志的位置，然后单击图标即可，在HTML页面内出现的是标志代码，在浏览器中显示的是符号。单击“其他字符按钮有，出现“插入其他字符窗口。选定一个符号后，在上面的“插入文本框内会出现此符号的名称，应用的方式与常用符号的方式是一样的。这样可以选择更多的符号参加到页面内。3. 文件头菜单项应用文件头菜单项插入的标签会显示于文档的头部。 历史记录面版 在历史记录面版中保存了Dreamweaver MX中的每一步操作，选择“窗口/其他/历史记录命令，可以显示或者隐藏历史记录面版。 历史记录面版显示了自从创立或者翻开它之后执行的所以步骤

11、，他允许撤消一步或者更多的操作步骤，允许重复以前的操作，还可以通过创立新的命令自动操作任务。 1.标签检查器面版 在标签检查器面版中，将当前编辑页面中所以页面对象所使用的各个HTML标签按照类别排列。在这个面版中，可以方便的定位到特定的HTML标签，并对它们的属性进行编辑，这使编辑代码变得更加方便和快捷。 2.代码片段面版 代码片段面版的功能相当于库，如果设计者经常要用到一个特定的创意，可以在这个面版中将创意的过程和内容储存下来，当需要这个创意时，直接选中并将它插入到相应的页面中即可。另外，Dreamweaver MX还自带了一系列的模板库，方便设计师直接调用代码面版。 参考面版 参考面版可使

12、设计者更方便的查阅各种帮助文档和技术参考，包括CFML，CSS，HTML，JAVASCRIPT，ASP和JSP等。 答案面版 答案面版是Dreamweaver MX新增加的面版，在面版中包括了进行版本更新的UPDATE按钮，还包括了学习软件的3个链接文件。3.系统规划与分析 3.1网站整体框架的设计 网站框架的设计包括整个网站的导航栏与页面尾部信息，使用了DreamWeaver的模板功能。设计方法： 1. 确定整个网站的导航栏和页面尾部信息。 2. 制作只包含这两个信息的网页 3. 把这个网页另存为模板 4. 以后每制作一个网页只要应用到这个模板即可 3.2网站所实现的功能分析 简介：主要介绍

13、自己的学校情况，个人简历，个人爱好等等 图片欣赏：从网上找的一些自己喜欢的图片供大家欣赏 论坛：做了一个注册页面 游戏介绍：介绍一些现在流行电脑游戏 3.3网站内容的布置 内容的布置是指网页文件的合理组织，一个好的站点应该是文件组织有序，分门别类的放置便于网站管理员今后对网站进行维护与更新。 3.4网站外观的调整 网页外观的控制是通过CSS层叠样式表来实现的。CSS，层叠样式表，“层叠的意思，也就是说在同一个Web文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的悠闲级，优先级高的，就会在最后显示时采用。从样式单插入的形式来看可以分为以下3中：内联式样式单：它利用现有的HTML标

14、记，把特殊的样式参加到那些由标记控制的信息中。嵌入式样式单：它和Javascript一样，可以嵌入到HTML文件的头部中去和标记之间，使用和容器装载，例如：“pcolor:red;font-weight:bold，这样会对页面中所有标记起作用。外部式样式单：它是一种保存在外部的样式单文件，外部文件以“css为扩展名，例如“。4. 网站局部制作过程 4.1使用表格设计页面布局 如果您熟悉 HTML 编码，就会知道除非您将添加到 Web 页中的文本或其他任何内容插入到一个“容器如层或表格中，否那么它将从一个边缘流向另一个边缘。HTML 表格是一种出色的用于设计 Web 页布局的解决方案，因为它们易于修改而且与大多数浏览器兼容。您可以使用表格来组织表格数据的布局或设置可视化元素如 Flash 按钮、图像或文本段落的显示。 Dreamweaver 有两种视图 - “标准视图和“布局视图，您可以在这些视图中设计表格。您将学习在这两种视图中设计页面布局，在第一局部，您将在“标准视图中工作并在页面中插入表格。在后面局部，您将在“布局视图中工作，并且使用布局选项绘制表格和表格单元格以设计布局。 4.2图象对齐和图象地图 在 Macromedia Dreamweaver MX 中处理图像非常容易。