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

个人设计与实现【摘要】个人的设计和容由于个人的喜好和看法，而大不相同。在这次我们将设计一个以故事为主题的个人，希望可以给用户在忙碌的生活中停下来休息的地方，可以轻松的说说各自的故事，谈谈自己的看法。经过分析,我们使用MICROSOFT公司的Dreamweaver作为开发技术,利用其提供的各种面向对象的开发工具,以CSS为主的架构，在短时间建立一个个人。【关键词】站点.个人.Dreamweaver1.绪论可以说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容器装载，例如：“stylep{color:red;font-weight:bold}/style”，这样会对页面中所有p标记起作用。外部式样式单：它是一种保存在外部的样式单文件，外部文件以“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创建主详