个人网站设计和实现

个人网站 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 和实现 第一张 绪论 1.1 Dreamweaver的编辑环境 1.1.1 工作去布局 在Windows 中首次启动Dreamweaver MX时，会出现“工作区设置”窗口，从中可以选择一种工作区布局，提供的三种不同的工作界面,分别是“Dreamweaver MX工作区”“Dreamweaver 4工作区”和“Homesite/Coder-Style代码编者样式”. 确定了工作区后，如果希望改为其它布局，可以选择“编辑”菜单中的“参数选择”命令，切换到不同的工作区。 1.1.2 窗口和面版概述 应用Dreamweaver MX时，首先出现的是Dreamweaver MX的操作界面窗口 现将其组成部分说明如下。 ? 插入栏:包含用于将各种类型的对象(如图像、表格和层)插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以在“插入”栏中单击“图像”图标插入一个图像。如果您愿意，可以不使用“插入”栏而使用“插入”菜单插入对象。 ? 文档工具栏:包含按钮和弹出式菜单，它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)、各种查看选项和一些普通操作(如在浏览器中预览)。 ? 文档窗口:显示您当前创建和编辑的文档。 ? 属性检查器:用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。 ? 面板组:是一组停靠在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头;若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。 ? 站点面板:使您可以管理组成站点的文件和文件夹。 ? 标题栏:显示的是页面的目录文件夹名及打开的文件名，如果文件中包含未保存的修改部分，标题栏中将在显示文件名和星号(*)。 1.2 面版的介绍 在Dreamweaver MX中，最显著的变化就是面版，文档窗口右侧的界面中包含了所有常用的面版。根据不同的需要，Dreamweaver MX将面版分为以下几大组。 设计:包含网页设计中所需要的面版，分别为CSS样式、HTML样式和行为。 代码:包含代码编辑所需要的面版，分别为标签检查器、代码片段和参考。 应用程序:包含动态网页设计所需要的面版，分别为数据库。绑定。服务器行为和组件。 文件:包含站点内资源管理所需要的面版，分别为站点和资源。 答案:这一组只有一个面版，是所有Macromedia公司系列MX软件所共有的，主要功能是提供帮助。 以上是默认状态下的面版组，除此之外，在“窗口”菜单的“其他”命令下还可以显示其他的面版，包括代码检查器、框架、历史记录、层和时间轴等。 1.2.1 面版的展开和折叠 面版全部折叠时的显示状态，此时面版占据的空间是最小的。 需要使用某一组面版时，单击面版组的标题栏部分，标题上的三角按钮从向右转为向下，面版展开，在同一个面版组中选择不同的面版时，只需要单击相应的选项卡即可。 1.2.2 设置默认面版 在文档窗口出现的面版可以通过“参数选择”对话框进行设置，具体操作步骤如下。 选择“编辑/参数选择”命令，打开“参数选择”对话框。 取消选中不希望出现的面版前面的复选框，面版就回在文档窗口中隐藏。 1.2.3 属性面版 属性面版可以显示并修改当前选定对象的属性，选择不同的对象时，在属性面版中会出现其对应的参数。选择“窗口/属性”命令或者按[ALT+F3]快捷键，可以打开或者关闭属性面版。 单击右下角的三角按钮，可以切换属性面版的常用属性和全部属性，当按钮为下三角时，属性面版中显示的为常用属性. 当按钮为上三角时，属性面版中显示的为所有属性。 单击面版右上角的“快速标签编辑器”按钮，可以添加或者编辑HTML语言。 在文档窗口中选择不同的网页对象时，属性面版中将显示相应的对象属性，下面为常见的几种对象的属性面版显示。 图象的属性面版显示 表格的属性面版显示 文字的属性面版显示 框架的属性面版显示 1.2.4插入面版 在Dreamweaver MX中将一些常用的项目，例如图象的插入、表格的设定等放置在插入面版中，这样可以十分方便快捷的进行操作，而且面版中相应的图标非常直观，应用这些快捷方式，可以使网页制作事半功倍。插入面版的位置及显示。包括常用、布局、文本、表格、框架、表单、模板、字符、媒体、文件头、脚本及应用程序。 选择“编辑”菜单下的“参数”命令，在左侧的“分类”中选择“常规”选项，在右侧的“插入面版”选项中可以选择插入面版的显示类型，默认的选择为“仅图标”，也可以选择“图标和文本”或者“仅文本”。 1. 常用插入面版 常用插入面版的显示，他主要进行各种页面内物体的操作，包括图象及超级链接的插入等。 2. 字符插入面版 应用字符插入面版可以在页面内加入各种符号。 应用时将光标停留在需要标志的位置，然后单击图标即可，在HTML页面内出现的是标志代码，在浏览器中显示的是符号。 单击“其他字符”按钮有，出现“插入其他字符”窗口。选定一个符号后，在上面的“插入”文本框内会出现此符号的名称，应用的方式与常用符号的方式是一样的。这样可以选择更多的符号加入到页面内。 3. 文件头菜单项 应用文件头菜单项插入的标签会显示于文档的头部。 1.2.5 历史记录面版 在历史记录面版中保存了Dreamweaver MX中的每一步操作，选择“窗口/其他/历史记录”命令，可以显示或者隐藏历史记录面版。 历史记录面版显示了自从创建或者打开它之后执行的所以步骤，他允许撤消一步或者更多的操作步骤，允许重复以前的操作，还可以通过创建新的命令自动操作任务。 1.2.6 标签检查器面版 在标签检查器面版中，将当前编辑页面中所以页面对象所使用的各个HTML标签按照类别排列。在这个面版中，可以方便的定位到特定的HTML标签，并对它们的属性进行编辑，这使编辑代码变得更加方便和快捷。 1.2.7 代码片段面版 代码片段面版的功能相当于库，如果设计者经常要用到一个特定的创意，可以在这个面版中将创意的过程和内容储存下来，当需要这个创意时，直接选中并将它插入到相应的页面中即可。另外，Dreamweaver MX还自带了一系列的模板库，方便设计师直接调用代码面版。 1.2.8 参考面版 参考面版可使设计者更方便的查阅各种帮助文档和技术参考，包括CFML，CSS，HTML，JAVASCRIPT，ASP和JSP等。 1.2.9 答案面版 答案面版是Dreamweaver MX新增加的面版，在面版中包括了进行版本更新的UPDATE按钮，还包括了学习软件的3个链接文件。 第二章 系统规划与分析 2.1 网站整体框架的设计 网站框架的设计包括整个网站的导航栏与页面尾部信息，使用了DreamWeaver的模板功能。 设计方法: 1. 确定整个网站的导航栏和页面尾部信息。 2. 制作只包含这两个信息的网页 3. 把这个网页另存为模板 4. 以后每制作一个网页只要应用到这个模板即可 2.2网站所实现的功能分析 ? 简介:主要介绍自己的学校情况，个人简历，个人爱好等等 ? 图片欣赏:从网上找的一些自己喜欢的图片供大家欣赏 ? 论坛:做了一个注册页面 ? 游戏介绍:介绍一些现在流行电脑游戏 2.3网站内容的布置 内容的布置是指网页文件的合理组织，一个好的站点应该是文件组织有序，分门别类的放置便于网站管理员今后对网站进行维护与更新。 2.4网站外观的调整 网页外观的控制是通过CSS(层叠样式表)来实现的。 CSS，层叠样式表，“层叠”的意思，也就是说在同一个Web文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的悠闲级，优先级高的，就会在最后显示时采用。从样式单插入的形式来看可以分为以下3中: 内联式样式单:它利用现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。 嵌入式样式单:它和Javascript一样，可以嵌入到HTML文件的头部中去(和标记之间)，使用容器装载，例如:“”，这样会对页面中所有

标记起作用。 外部式样式单:它是一种保存在外部的样式单文件，外部文件以“css”为扩展名，例如“ ”。 第三章 网站部分制作过程 使用表格设计页面布局 如果您熟悉 HTML 编码，就会知道除非您将添加到 Web 页中的文本或其他任何内容插入到一个“容器”(如层或表格)中，否则它将从一个边缘流向另一个边缘。HTML 表格是一种出色的用于设计 Web 页布局的解决 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 ，因为它们易于修改而且与大多数浏览器兼容。您可以使用表格来组织表格数据的布局或设置可视化元素(如 Flash 按钮、图像或文本段落)的显示。 Dreamweaver 有两种视图 - “ 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 ”视图和“布局”视图，您可以在这些视图中设计表格。您将学习在这两种视图中设计页面布局，在第一部分，您将在“标准”视图中工作并在页面中插入表格。在后面部分，您将在“布局”视图中工作，并且使用布局选项绘制表格和表格单元格以设计布局。 图象对齐和图象地图 在 Macromedia Dreamweaver MX 中处理图像非常容易。可以使用各种 Dreamweaver 可视工具插入图像。本教程为您提供了图像选项，将图像插入页面后就可以应用这些选项。您将学习如何对齐图像和文本以及如何设置图像周围的边距。您还将学习如何使用单个图像链接到多个Web页。 为第一次使用 Dreamweaver 的用户设计。它介绍了 Dreamweaver 中的一些基本功能，并将帮助您了解如何对齐图像以及如何创建图像地图。 使用DREAMWEAVER设计文件 Macromedia Dreamweaver MX 随附了大量的专业化设计资源 - 页面布局文档、层叠样式表 (CSS) 和代码片断。可以使用这些资源快速学习如何创建专业化设计 Web 页。 您将创建一个新文档，然后插入和修改设计元素代码片断。您还将学习如何创建自己的代码片断。 使用层叠样式表进行设计 可以在 Macromedia Dreamweaver MX 中使用层叠样式表 (CSS)，在站点的多个页面中以一致的方式应用样式元素。CSS 样式非常灵活，因为样式并不局限于文本对象。对于文本、图像、表格、层等都可以定义定位样式和格式化样式。 您可以试用几种样式，大概了解一下 CSS 为您提供的众多样式选项中的几种。 创建主详细页集 主详细页集是一种 Web 应用程序，它以两种格式提供从数据库中提取的信息。主页显示通过数据库搜索检索到的所有记录的列表。详细页从主页链接出来，通常提供有关主页中所选项目的更具体细节。 您可以在以下服务器模型中完成:ColdFusion、ASP 和 JSP。 建立插入记录页 指导您逐步完成建立向数据库中插入信息的表单的过程。随着创建插入页，您将学习如何插入和定义表单域。还将学习如何创建表单域，使用户可以使用动态生成的菜单插入信息。 在 Dreamweaver MX 支持的所有服务器模型(ColdFusion、ASP、ASP.NET、JSP 和 PHP)中都可以完成。 使用行为和动画 许多 Web 页只包含文本和图像，没有任何交互式元素。在 Dreamweaver 中使用 JavaScript 行为和分层动画时间轴，提供互动功能和动画以使访问者更感兴趣。 使用高级选项卡创建站点 选择“站点/新建站点”命令，在出现的对话框中选择“高级”选项卡。 在“站点名称”中为站点命名然后单击“本地文件夹”右侧的文件夹图标，选择目标磁盘，单击右侧的新建文件夹图标创建一个新的文件夹，并为其命名，选择文件夹后，单击“打开”按钮，然后单击“选择”按钮。如果已经准备好文件夹，直接选择即可。 设置好根文件夹后，回到上一级对话框，单击“默认图象文件夹”右侧的文件夹图标，出现如图3-3所示的对话框，选择前面设置或者选择的根文件夹，单击右侧的“新建文件夹”图标创建一个新的文件夹，并为其命名为作为默认图象文件夹。如果已经准备好文件夹，直接选择即可。 选择文件夹后，单击“打开”按钮，然后单击“选择”按钮，回到上一级对话框，选中“启动缓存”复选框。单击“确认”按钮确认设置的站点。 主页 在站点窗口中选择“文件/新建文件”命令，将文件命名为index.htm。在站点窗口中选择“文件/新建文件夹”命令，将文件夹分别命名为jianjie、imgaes、jingcaiyouxi、tupianxinshang、data、wodeluntan、xinwen。 表格 在“文档”窗口，将插入点放到文档中，然后选择“插入”>“表格”。 在插入栏的“常用”类别中，单击“表格”图标。 出现“插入表格”对话框，例如插入一行三列、一行四列、一行两列、一行六列和一行五列共五个表格，并将表格的边框属性改为“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中键入校内的几条新闻的标题，并与新闻进行了连接。 时间轴 选择“窗口”>“其他”>“时间轴”可打开“时间轴”面板。 ? 时间轴弹出式菜单:指定当前在“时间轴”面板中显示文档的哪些时间轴。 ? 播放栏:显示当前在文档窗口中显示时间轴的哪一帧。 ? 帧编号:指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。您可以通过设置帧的总数和每秒帧数 (fps) 来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率，可用于在通常的 Windows 和 Macintosh 系统上运行的大多数浏览器。 ? 行为通道:是应该在时间轴中特定帧处执行的行为的通道。 ? 动画条:显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。 ? 关键帧:是动画条中已经为对象指定属性(如位置)的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。 ? 动画通道:显示用于制作层和图像动画的条,是用于查看动画的播放选项。 ? 倒带:将播放栏移至时间轴中的第一帧。 ? 后退:将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时间轴。 ? 播放:将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间轴。 ? 自动播放:使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的 body 标签，它在页加载时执行“播放时间轴”操作。 ? 循环:使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。 时间轴只能移动层。若要使图像或文本移动，首先创建一个层，然后在该层中插入图像、文本或其他任何类型的内容步骤如下。 1. 在常用面板中选择“层”图标，在页面内拖动绘制层，在层内单击，定位插入点。 2. 单击常用面板中的“图象”图标，在层中加入图象images/120120.gif. 3. 单击层标记1选中层，然后选择“修改”>“时间轴”>“在时间轴上添加对象”，或者简单地将选定层拖至“时间轴”面板中。 4. 选中层，用鼠标在页面上将层移至它在动画结束时应处于的位置。将出现一条线，它显示文档窗口中动画的轨迹。单击时间轴面版中的“播放”按钮，就可以看见图象移动的动画效果。 5. 如果要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击 (Windows) 或按住 Command 键并单击 (Macintosh) 动画条中部的一个帧，从而在您单击的帧处添加一个关键帧，或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。 6. 单击“播放”按钮，可以预览动画效果。 做完后的时间轴的画面. 并且利用表单在主页里设计了一个搜索引擎，并建立了与国内3大网站的友情连接。 行为的使用 打开“行为”面板，请选择“窗口”>“行为”。 动作 (+) 是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。当您从此列 表中选择某个动作时，将出现一个对话框，您可以在其中指定该动作的参数。如果所有动作都灰显，则没有所选元素可以生成的事件。 删除 (-) 从行为列表中删除所选的事件和动作。 上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序 - 例如，可以更改“onLoad 事件的多个动作的发生顺序，但是所有 onLoad 动作在行为列表中都靠在一起。对于不能在列表中上下移动的动作将禁用箭头按钮。 事件(当您单击行为列表中所选事件名称旁边的箭头按钮时出现的菜单)是一个弹出式菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。如果未显示预期的事件，则检查是否选择了正确的页元素或标签。(若要选择特定的标签，请使用文档窗口底部左侧的标签选择器。)同时确保您在“显示事件”子菜单中选择了正确的浏览器。如图3-23所示 显示事件(“事件”菜单中的子菜单)指定当前行为应该在其中起作用的浏览器。您在此菜单中进行的选择确定哪些事件将显示在“事件”弹出式菜单中。通常，较早的浏览器比较新的浏览器支持的事件要少，并且在大多数情况下您选择的目标浏览器越普通，所显示的事件越少，因为只显示在所有请求浏览器中都可用的事件。例如，如果您选择“3.0 或更新的浏览器”，那么您可以选择的事件仅限于那些在所有 Netscape Navigator 和 Microsoft Internet Explorer 3.0 版和更高版本的浏览器中都可用的事件，这将是一个非常有限的事件列表。 打开主页，选中“简介”，单击动作 (+)，在弹出的菜单中点击“显示弹出式菜单”. 在“内容”的菜单中选中“文本”项，新建“学校简介”、“我的简介”和2个文本，并建立2个链接，设置完成的菜单. 在“外观”菜单中将字体设置为“默认”，大小为“12”，“加粗”，对齐方式为“居中对齐”，一般状态文本设置为“黑色”，单元格设置为“灰色”，滑过状态文本设置为“白色”，单元格设置为“蓝色”。 点击“确认”按钮完成所有设置，设置完成的行为面版. 用此方法选中“图片”建立“图片欣赏”、“美丽海景”、“世界名车”和3个弹出式菜单，选中“论坛”建立“论坛”弹出式菜单，选中“游戏”建立“单机游戏”和“网络游戏奇迹”2个弹出式菜单。 图片欣赏 图片欣赏是用Dreamweaver MX的框架做的 框架 框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文档。 框架集是 HTML 文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容，但 noframes 部分除外，框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 通过预定义的框架集，您可以很容易地选择您要创建的框架集类型。 创建预定义的框架集有两种方法:使用插入条和使用“新建文档”对话框。通过插入条，您可以创建框架集并在某一新框架中显示当前文档;“新建文档”对话框创建新的空框架集。 预定义的框架集图标(位于插入条的“框架”类别中和“新建文档”对话框的“框架集”类别中)提供应用于当前文档的每个框架集的可视化表示形式。 使用新建文档创建框架组的具体操作如下 选择“文件”>“新建”。 在“新建文档”对话框中，选择“框架集”类别。 从“框架集”列表选择框架集。 单击“创建”，出现一个新的框架页面。 框架页面创建完成后，就可以在其中加入内容了，每一个框架都是一个文档，在里面可以加入文字、图象等内容，也可以打开一个已经存在的文档。 添加内容的具体操作步骤如下。 将插入点放置在需要添加内容的框架中 将插入点放置于左侧的框架内，通过层和时间轴设计了一个滚动文字“努力创造自己的名牌”。 将插入点放置于右侧的框架内，选择“文件/在框架内打开”命令，在右侧的框架中打开个已经制作好的文档， 保存框架文件 框架页面制作完成后，框架组中包括了多个文档，所以保存时要将所有的文档都保存，在浏览器中才能够正确的显示，保存框架的所有文档的具体操作步骤如下。 选择“文件/保存全部”命令，出现所示的“保存为”对话框，依次为整个框架的左侧、上侧、右侧3个分框架命名保存，最后在整个框架组周围都出现粗边框，为整个边框组命名。 至此页面全部保存完毕。 致 谢 时间过的真快，短短的三个月过去了，我们的毕业设计制作也基本完成了。在这段时间里，我学到了DREAMWEAVER MX应用技术和知识技能，这些都与指导老师的教导和严格要求是分不开的。在此我要向我的指导老师——李铭老师表示最衷心的感谢，在整个毕业设计的制作和 论文 政研论文下载论文大学下载论文大学下载关于长拳的论文浙大论文封面下载 撰写的过程中，李老师着重培养了我的自学能力和自我解决问题的能力，使我对DREAMWEAVER MX有了一个全新的认识。李老师以其渊博的知识和独特的思维方式指导我的学习，是我受益非浅。同时我要感谢毕业设计制作过程中我们小组的全体成员，感谢他们给了我大量的 意见 文理分科指导河道管理范围浙江建筑工程概算定额教材专家评审意见党员教师互相批评意见 和帮助。 第四章 设计感想 短短的3个月即将过去，我的毕业设计已接近尾声。虽然我们设计的网站还是比较粗糙的， 但是在这段时间里，我身为组长带领着组员积极投入到网站的设计当中，遇到问题大家就一起想办法解决，然后再向老师请教～在这次毕业设计中，我们学会了很多网页设计的方法，特别是老师教了很多网页设计方面的技巧。每次小组成员的聚会，用一定的时间大家交流一下，分析网页设计中的一些问题。从更改主题、确定方向、网页架构设计、选定制作软件，到真正在网页上制作，我们把每一次讨论都记录下来，确实了解每次的进度是什么。花一些时间去收据相关的资料，浏览不同的网站找寻设计技巧，大家也学着互助、产生公识、交流，一切都是宝贵的经验 参考文献 Dreamweaver MX 中文版 标准教程 李昌隆编译 中国电力出版社 Dreamweaver MX 中文版 实用培训教程 陈笑/马万申/耿向华编译 清华大学出版社 Dreamweaver MX 中文版 实用培训教程 陈笑/马万申/耿向华编译 清华大学出版社 Dreamweaver MX中文版 完全征服手册 郭光/胡崧编著 中国青年出版社