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

个人设计与实现

【摘要】个人的设计和容由于个人的喜好和看法，而大不相同。在这次我们将设计一个

以故事为主题的个人，希望可以给用户在忙碌的生活中停下来休息的地方，可以轻松的说说各自的故事，谈谈自己的看法。

经过分析,我们使用MICROSOFT公司的Dreamweaver作为开发技术,利用其提供的各种面向对象的开发工具,以CSS为主的架构，在短时间建立一个个人。

【关键词】站点.个人.Dreamweaver

1.绪论

可以说21世纪是一个充满个性和梦想的时代，每一个人都在展示着自己的实力和自己的想法，可能这与我们得到的教育和社会进步，人对自身认识的加深有关系，但这其中不能不忽视互联网的威力。一个虚拟的空间，一个充满希望而又嫔纷多彩的世界，在这里人们随意的展示着自己的想法，每一个人都是这世界的主人。在这里,人们构造着自己的梦，写一些以前很想写但是没有舞台的故事，唱着一些想别人听见但是又地方唱的歌曲，讲着一些自己身上发生的故事，体验着每一个陌生而又熟悉的朋友的经历，一个虚构但又感觉真实的舞台。这个神奇的舞台也真的把一部分人的心愿和想法实现了出来，网络歌手，网络作家，可以说是近期最红的话题。不至如此很多人在这个还实现了自己的发财梦，明星梦。网上商店可以说是近年来年轻人创业的首选，年轻的一代也越来越接受这一种新颖而又轻松的购物方式,并且这一现象也正在向全民化普及.听说掏宝网有一亿多的注册用户，这难道不能说明网络在改变着我们的生活吗。近期很多音乐上提供了很多供个人使用的个人原创专区，这令到很多有着音乐梦想的人，有了一个展示自己的舞台，而也正有不少人由于这样成就了自己的明星梦。有人用草根明星或者草根英雄这些字眼来形容这些人，不管草根明星还是草根英雄，都是以前未尝出现过的词语，平凡确实很难和英雄，明星联上关系，但真是这种平凡给人的亲切和真实感，才是他们巨大魅力的来源。说到这里我们也来，在这虚拟的世界里找一下自己的梦想，建立一个自己的天地：一个属于我们的心情故事.

2.认识Dreamweaver的编辑环境

2.1 工作布局

在Windows 中首次启动Dreamweaver MX时，会出现“工作区设置”窗口，从中可以选择一种工作区布局，提供的三种不同的工作界面,分别是“Dreamweaver MX工作

区”“Dreamweaver 4工作区”和“Homesite/Coder-Style代码编者样式”.

确定了工作区后，如果希望改为其它布局，可以选择“编辑”菜单中的“参数选择”命令，切换到不同的工作区。

2.2 窗口和面版的概述

应用Dreamweaver MX时，首先出现的是Dreamweaver MX的操作界面窗口.

现将其组成部分说明如下:

1.插入栏：包含用于将各种类型的对象（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以在“插入”栏中单击“图像”图标插入一个图像。如果您愿意，可以不使用“插入”栏而使用“插入”菜单插入对象。

2.文档工具栏：包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些普通操作（如在浏览器中预览）。

文档窗口：显示您当前创建和编辑的文档。

3.属性检查器：用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。

4.面板组：是一组停靠在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。

5.站点面板：使您可以管理组成站点的文件和文件夹。

6.标题栏：显示的是页面的目录文件夹名及打开的文件名，如果文件中包含未保存的修改部分，标题栏中将在显示文件名和星号（*）。

2.3 面版的介绍

在Dreamweaver MX中，最显著的变化就是面版，文档窗口右侧的界面中包含了所有常用的面版。根据不同的需要，Dreamweaver MX将面版分为以下几大组。

设计：包含网页设计中所需要的面版，分别为CSS样式、HTML样式和行为。

代码：包含代码编辑所需要的面版，分别为标签检查器、代码片段和参考。

应用程序：包含动态网页设计所需要的面版，分别为数据库。绑定。服务器行为和组件。文件：包含站点资源管理所需要的面版，分别为站点和资源。

答案：这一组只有一个面版，是所有Macromedia公司系列MX软件所共有的，主要功能是提供帮助。

以上是默认状态下的面版组，除此之外，在“窗口”菜单的“其他”命令下还可以显示其他的面版，包括代码检查器、框架、历史记录、层和时间轴等。

2.3.1 面版的展开和折叠

面版全部折叠时的显示状态，此时面版占据的空间是最小的。

需要使用某一组面版时，单击面版组的标题栏部分，标题上的三角按钮从向右转为向下，面版展开，在同一个面版组中选择不同的面版时，只需要单击相应的选项卡即可。

2.3.2 设置默认面版

在文档窗口出现的面版可以通过“参数选择”对话框进行设置，具体操作步骤如下。选择“编辑/参数选择”命令，打开“参数选择”对话框。

取消选中不希望出现的面版前面的复选框，面版就回在文档窗口中隐藏。

2.3.3 属性面版

属性面版可以显示并修改当前选定对象的属性，选择不同的对象时，在属性面版中会出现其对应的参数。选择“窗口/属性”命令或者按[ALT+F3]快捷键，可以打开或者关闭属性面版。

单击右下角的三角按钮，可以切换属性面版的常用属性和全部属性，当按钮为下三角时，属性面版中显示的为常用属性.

当按钮为上三角时，属性面版中显示的为所有属性。

单击面版右上角的“快速标签编辑器”按钮，可以添加或者编辑HTML语言。

在文档窗口中选择不同的网页对象时，属性面版中将显示相应的对象属性，下面为常见的几种对象的属性面版显示。

图象的属性面版显示

表格的属性面版显示

文字的属性面版显示

框架的属性面版显示

2.3.4插入面版

在Dreamweaver MX中将一些常用的项目，例如图象的插入、表格的设定等放置在插入面版中，这样可以十分方便快捷的进行操作，而且面版中相应的图标非常直观，应用这些快捷方式，可以使网页制作事半功倍。插入面版的位置及显示。包括常用、布局、文本、表格、框架、表单、模板、字符、媒体、文件头、脚本及应用程序。

选择“编辑”菜单下的“参数”命令，在左侧的“分类”中选择“常规”选项，在右侧的“插入面版”选项中可以选择插入面版的显示类型，默认的选择为“仅图标”，也可以选择“图标和文本”或者“仅文本”。

1. 常用插入面版

常用插入面版的显示，他主要进行各种页面物体的操作，包括图象及超级的插入等。

2. 字符插入面版

应用字符插入面版可以在页面加入各种符号。

应用时将光标停留在需要标志的位置，然后单击图标即可，在HTML页面出现的是标志代码，在浏览器中显示的是符号。

单击“其他字符”按钮有，出现“插入其他字符”窗口。选定一个符号后，在上面的“插入”文本框会出现此符号的名称，应用的方式与常用符号的方式是一样的。这样可以选择更多的符号加入到页面。

3. 文件头菜单项

应用文件头菜单项插入的标签会显示于文档的头部。

2.3.5 历史记录面版

在历史记录面版中保存了Dreamweaver MX中的每一步操作，选择“窗口/其他/历史记录”命令，可以显示或者隐藏历史记录面版。