毕业论文个人网站的设计和实现.doc

个人网站设计与实现【摘要】个人网站设计和内容由于个人喜好和看法，而大不相似。在这次咱们将设计一种以故事为主题个人网站，但愿可以给顾客在忙碌生活中停下来休息地方，可以轻松说说各自故事，谈谈自己看法。通过度析,咱们使用 MICROSOFT公司Dreamweaver作为开发技术,运用其提供各种面向对象开发工具,以CSS为主网站架构，在短时间内建立一种个人网站。 【核心词】站点.个人网站.Dreamweaver1.绪论 可以说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中每一步操作，选取“窗口/其她/历史记录”命令，可以显示或者隐藏历史记录面版。 历史记录面版显示了自从创立或者打开它之后执行因此环节，她容许撤除一步或者更多操作环节，容许重复此前操作，还可以通过创立新命令自动操作任务。 1.标签检查器面版 在标签检查器面版中，将当前编辑页面中因此页面对象所使用各个HTML标签按照类别排列。在这个面版中，可以以便定位到特定HTML标签，并对它们属性进行编辑，这使编辑代码变得更加以便和快捷。 2.代码片段面版 代码片段面版功能相称于库，如果设计者经常要用到一种特定创意，可以在这个面版中将创意过程和内容储存下来，当需要这个创意时，直接选中并将它插入到相应页面中即可。此外，Dreamweaver MX还自带了一系列模板库，以便设计师直接调用代码面版。 2.3.6参照面版 参照面版可使设计者更以便查阅各种协助文档和技术参照，涉及CFML，CSS，HTML，JAVASCRIPT，ASP和JSP等。 2.3.7 答案面版 答案面版是Dreamweaver MX新增长面版，在面版中涉及了进行版本更新UPDATE按钮，还涉及了学习软件3个链接文献。3.系统规划与分析 3.1网站整体框架设计 网站框架设计涉及整个网站导航栏与页面尾部信息，使用了DreamWeaver模板功能。设计办法： 1. 拟定整个网站导航栏和页面尾部信息。 2. 制作只包括这两个信息网页 3. 把这个网页另存为模板 4. 后来每制作一种网页只要应用到这个模板即可 3.2网站所实现功能分析 简介：重要简介自己学校状况，个人简历，个人兴趣等等 图片欣赏：从网上找某些自己喜欢图片供人们欣赏 论坛：做了一种注册页面 游戏简介：简介某些当前流行电脑游戏 3.3网站内容布置 内容布置是指网页文献合理组织，一种好站点应当是文献组织有序，分门别类放置便于网站管理员此后对网站进行维护与更新。 3.4网站外观调节 网页外观控制是通过CSS（层叠样式表）来实现。CSS，层叠样式表，“层叠”意思，也就是说在同一种Web文档中可以有各种样式单存在，这些样式单依照所在位置，拥有不同悠闲级，优先级高，就会在最后显示时采用。从样式单插入形式来看可以分为如下3中：内联式样式单：它运用既有HTML标记，把特殊样式加入到那些由标记控制信息中。嵌入式样式单：它和Javascript同样，可以嵌入到HTML文献头部中去（和标记之间），使用和容器装载，例如：“pcolor:red;font-weight:bold”，这样会对页面中所有标记起作用。外部式样式单：它是一种保存在外部样式单文献，外部文献以“css”为扩展名，例如“”。4. 网站某些制作过程 4.1使用表格设计页面布局 如果您熟悉 HTML 编码，就会懂得除非您将添加到 Web 页中文本或其她任何内容插入到一种“容器”（如层或表格）中，否则它将从一种边沿流向另一种边沿。HTML 表格是一种出众用于设计 Web 页布局解决方案，由于它们易于修改并且与大多数浏览器兼容。您可以使用表格来组织表格数据布局或设立可视化元素（如 Flash 按钮、图像或文本段落）显示。 Dreamweaver 有两种视图 - “原则”视图和“布局”视图，您可以在这些视图中设计表格。您将学习在这两种视图中设计页面布局，在第一某些，您将在“原则”视图中工作并在页面中插入表格。在背面某些，您将在“布局”视图中工作，并且使用布局选项绘制表格和表格单元格以设计布局。 4.2图象对齐和图象地图 在 Macromedia Dreamweaver MX 中解决图像非常容易。可以使用各种 Dreamweaver 可视工具插入图像。本教程为您提供了图像选项，将图像插入页面后就可以应用这些选项。您将学习如何对齐图像和文本以及如何设立图像周边边距。您还将学习如何使用单个图像链接到各种Web页。为第一次使用 Dreamweaver 顾客设计。它简介了 Dreamweaver 中某些基本功能，并将协助您理解如何对齐图像以及如何创立图像地图。 使用DREAMWEAVER设计文献Macromedia Dreamweaver MX 随附了大量专业化设计资源 - 页面布局文档、层叠样式表 (CSS) 和代码片断。可以使用这些资源迅速学习如何创立专业化设计 Web 页。 您将创立一种新文档，然后插入和修改设计元素代码片断。您还将学习如何创立自己代码片断。 4.3使用层叠样式表进行设计 可以在 Macromedia Dreamweaver MX 中使用层叠样式表 (CSS)，在站点各种页面中以一致方式应用样式元素。CSS 样式非常灵活，由于样式并不局限于文本对象。对于文本、图像、表格、层等都可以定义定位样式和格式化样式。 您可以试用几种样式，大概理解一下 CSS 为您提供众多样式选项中几种。 4.4创立主详细页集 主详细页集是一种 Web 应用程序，它以两种格式提供从数据库中提取信息。主页显示通过数据库搜索检索到所有记录列表。详细页从主页链接出来，普通提供关于主页中所选项目更详细细节。 您可以在如下服务器模型中完毕：ColdFusion、ASP 和 JSP。 4.5建立插入记录页 指引您逐渐完毕建立向数据库中插入信息表单过程。随着创立插入页，您将学习如何插入和定义表单域。还将学习如何创立表单域，使顾客可以使用动态生成菜单插入信息。在 Dreamweaver MX 支持所有服务器模型（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中键入“南京广播电视大学”“级计算机应用”“顾翔”等字样，字体、颜色默认。在表格第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/10.gif.3. 单击层标记1选中层，然后选取“修改”“时间轴”“在时间轴上添加对象”，或者简朴地将选定层拖至“时间轴”面板中。4. 选中层，用鼠标在页面上将层移至它在动画结束时应处在位置。将浮现一条线，它显示文档窗口中动画轨迹。单击时间轴面版中“播放”按钮，就可以看见图象移动动画效果。5. 如果要让层沿曲线移动，请选取其动画条，然后按住 Ctrl 键并单击 (Windows) 或按住 Command 键并单击 (Macintosh) 动画条中部一种帧，从而在您单击帧处添加一种核心帧，或者单击动画条中部一种帧并从上下文菜单中选取“添加核心帧”。6. 单击“播放”按钮，可以预览动画效果。做完后时间轴画面.并且运用表单在主页里设计了一种搜索引擎，并建立了与国内3大网站情谊连接。 4.8.3行为使用 打开“行为”面板，请选取“窗口”“行为”。动作 (+) 是一种弹出式菜单，其中包括可以附加到当前所选元素各种动作。当您从此列表中选取某个动作时，将浮现一种对话框，您可以在其中指定该动作参数。如果所有动作都灰显，则没有所选元素可以生成事件。删除 (-) 从行为列表中删除所选事件和动作。上下箭头按钮将特定事件所选动作在行为列表中向上或向下移动。给定事件动作是以特定顺序执行。可觉得特定事件更改动作顺序 - 例如，可以更改“onLoad 事件各种动作发生顺序，但是所有 onLoad 动作在行为列表中都靠在一起。对于不能在列表中上下移动动作将禁用箭头按钮。事件（当您单击行为列表中所选事件名称旁边箭头按钮时浮现菜单）是一种弹出式菜单，其中包括可以触发该动作所有事件。只有在选取了行为列表中某个事件时才显示此菜单。依照所选对象不同，显示事件也有所不同。如果未显示预期事件，则检查与否选取了对的页元素或标签。（若要选取特定标签，请使用文档窗口底部左侧标签选取器。）同步保证您在“显示事件”子菜单中选取了对的浏览器。如图3-23所示显示事件（“事件”菜单中子菜单）指定当前行为应当在其中起作用浏览器。您在此菜单中进行选取拟定哪些事件将显示在“事件”弹出式菜单中。普通，较早浏览器比较新浏览器支持事件要少，并且在大多数状况下您选取目的浏览器越普通，所显示事件越少，由于只显示在所有祈求浏览器中都可用事件。例如，如果您选取“3.0 或更新浏览器”，那么您可以选取事件仅限于那些在所有 Netscape Navigator 和 Microsoft Internet Explorer 3.0 版和更高版本浏览器中都可用事件，这将是一种非常有限事件列表。打开主页，选中“简介”，单击动作 (+)，在弹出菜单中点击“显示弹出式菜单”.在“内容”菜单中选中“文本”项，新建“学校简介”、“我简介”和2个文本，并建立2个链接，设立完毕菜单.在“外观”菜单中将字体设立为“默认”，大小为“12”，“加粗”，对齐方式为“居中对齐”，普通状态文本设立为“黑色”，单元格设立为“灰色”，滑过状态文本设立为“白色”，单元格设立为“蓝色”。点击“确认”按钮完毕所有设立，设立完毕行为面版.用此办法选中“图片”建立“图片欣赏”、“美丽海景”、“世界名车”和3个弹出式菜单，选中“论坛”建立“论坛”弹出式菜单，选中“游戏”建立“单机游戏”和“网络游戏奇迹”2个弹出式菜单。 4.9图片欣赏 图片欣赏是用Dreamweaver MX框架做 4.9.1框架 框架提供将一种浏览器窗口划分为各种区域、每个区域都可以显示不同 HTML 文档办法。使用框架最常用状况就是，一种框架显示包括导航控件文档，而另一种框架显示具有内容文档。框架是浏览器窗口中一种区域，它可以显示与浏览器窗口别的某些中所显示内容无关 HTML文档。框架集是 HTML 文献，它定义一组框架布局和属性，涉及框架数目、框架大小和位置以及在每个框架中初始显示页面 URL。框架集文献自身不包括要在浏览器中显示 HTML 内容，但 noframes 某些除外，框架集文献只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档关于信息。通过预定义框架集，您可以很容易地选取您要创立框架集类型。创立预定义框架集有两种办法：使用插入条和使用“新建文档”对话框。通过插入条，您可以创立框架集并在某一新框架中显示当前文档；“新建文档”对话框创立新空框架集。预定义框架集图标（位于插入条“框架”类别中和“新建文档”对话框“框架集”类别中）提供应用于当前文档每个框架集可视化表达形式。使用新建文档创立框架组详细操作如下选取“文献”“新建”。在“新建文档”对话框中，选取“框架集”类别。从“框架集”列表选取框架集。单击“创立”，浮现一种新框架页面。框架页面创立完毕后，就可以在其中加入内容了，每一种框架都是一种文档，在里面可以加入文字、图象等内容，也可以打开一种已经存在文档。添加内容详细操作环节如下:将插入点放置在需要添加内容框架中 将插入点放置于左侧框架内，通过层和时间轴设计了一种滚动文字“努力创造自己名牌”。将插入点放置于右侧框架内，选取“文献/在框架内打开”命令，在右侧框架中打开个已经制作好文档， 4.9.2保存框架文献 框架页面制作完毕后，框架组中涉及了各种文档，因此保存时要将所有文档都保存，在浏览器中才可以对的显示，保存框架所有文档详细操作环节如下。选取“文献/保存所有”命令，浮现所示“保存为”对话框，依次为整个框架左侧、上侧、右侧3个分框架命名保存，最后在整个框架组周边都浮现粗边框，为整个边框组命名。至此页面所有保存完毕。5.结 束 语时间过真快，短短三个月过去了，咱们毕业设计制作也基本完毕了。在这段时间里，我学到了DREAMWEAVER MX应用技术和知识技能，这些都与指引教师辅导和严格规定是分不开。在整个毕业设计制作和论文撰写过程中，教师着重培养了我自学能力和自我解决问题能力，使我对DREAMWEAVER MX有了一种全新结识。教师以其渊博知识和独特思维方式指引我学习，是我受益非浅。6.设计感想短短3个月即将过去，我毕业设计已接近尾声。虽然咱们设计网站还是比较粗糙，但是在这段时间里，我身为组长带领着成员积极投入到网站设计当中，遇到问题人们就一起想办法解决，然后再向教师请教！在这次毕业设计中，咱们学会了诸多网页设计办法，特别是教师教了诸多网页设计方面技巧。每次小构成员约会，用一定期间人们交流一下，分析网页设计中某些问题。从更改主题、拟定方向、网页架构设计、选定制作软件，到真正在网页上制作，咱们把每一次讨论都记录下来，的确理解每次进度是什么。花某些时间去收据有关资料，浏览不同网站找寻设计技巧，人们也学着互助、产生公识、交流，一切都是宝贵经验参照文献Dreamweaver MX 中文版 原则教程 李昌隆编译 中华人民共和国电力出版社Dreamweaver MX 中文版 实用培训教程 陈笑/马万申/耿向华编译 清华大学出版社Dreamweaver MX 中文版 实用培训教程 陈笑/马万申/耿向华编译 清华大学出版社Dreamweaver MX中文版 完全征服手册 郭光/胡崧编著 中华人民共和国青年出版社