毕业设计（论文）-企业网站设计论文.doc

企业网站论文企业网站设计论文所在系别：计算机信息技术系专业班机：07五年制系统维护学生姓名： 指导教师： 答辩时间： 2011年7月 目录摘要.1第一章dreamweaver技术简介.2第二章网站流程图简介11第三章程序详细介绍.12第四章主要程序段.17参考文献22致谢辞23摘要dreamweaver是美国macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。随着社会不断发展，网络不断普及，一家大的公司都需要一个安全、详细的网站。我做这个网站就是让人们在网络上通过我的网站更了解我们公司，网站中有公司的简介，我们产品的简介和购买的地址，用这个网站增加我们公司的竞争性。第一页第一章dreamweaver技术简介1.1软件简介dreamweaver是由macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件flash，专业网页图像设计软件fireworks，并称为“网页三剑客”；2005年4月18日，全球最大的图像编辑软件供应adobe宣布，以换股方式收购软件公司macromedia，macromedia是著名的网页设计软件dreamweaver及flash的供应商。据悉，此项交易涉及金额高达34亿美元。根据双方达成的协议，macromedia股东将以1：0.69的比例获得adobe的普通股。自此开始，dreamweaver开始属于adobe设计软件系列。 dreamweaver、flash以及在dreamweaver之后推出的针 dreamweaver对专业网页图像设计的fireworks，三者被macromedia公司称为dreamteam(梦之队)，足见市场的反响和macromedia公司对它们的自信。说到dreamweaver我们应该了解一下网页编辑器的发展过程，随着互联网(internet)的家喻户晓，html技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在word中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。第二页1.1.1经典版本macromedia dreamweaver 8.0 简体中文版 软件大小： 60.24 m 开 发 商： adobe 软件类别： 国外软件 / 网页制作 软件语言： 简体中文 应用平台： win9x/winnt/win2000/winxp 软件性质： 共享(收费)软件 界面面板初识界面安装后，它会自动在 windows 的菜单中创建程序组。与 frontpagr 有很大的不同，它 macromedia dreamweaver把工具栏省去了，然后增加了几个浮动的工具栏。在 dreamwaver3.0 中，它的工具栏全是浮动工具栏，可以将工具栏缩小，也可以关闭。在专业术语里面，他们叫“浮动面板”，利用浮动面板来控制对页面的编写，而不是利用烦琐的对话框，这是 dreamwaver3.0 编辑网页中最值得人赞赏的特性。通过在浮动面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程，提高了工作效率。但对于熟悉了微软的应用程序的用户来说，开始的时候可能很不习惯。先来介绍它的三个最重要的浮动面板。 1.1.2启动面板启动面板主要用来快速启动相应的任务，或显示/隐藏相应的浮动面板。如果启动面板是竖的，那么，可以点击它右下角的一个小按钮，它就可以变成横向的了，这时，可能会发现，它的状态栏上也有这个面板上的所有选项。这也就为网第三页页制作者提供了方便。可以直接从右下角点击相应的栏目进入想要进入的对话框。 1.1.3对象面板对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，flash 动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中，如图5。 每一个选项中都有若干个图标，只要在图表上单击一下，就可以插入想要插入的对象了。 1.1.4属性面板属性面板会随着编辑的内容而变化，这个图是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小三角箭头，单击它，会展开属性面板，它把一些不常用的属性也列出来。展开后，箭头会变成向上，单击它，又会使属性面板复原。属性面板很多，还有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选择要编辑的对象，它就会自动变化，挺方便的。用户对所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动就可以了，同理，把他们组合也是一样，用鼠标拖动后，放到上面就可以。1.1.5发展概述dreamweaver的开发者是美国的macromedia公司，macromedia公司总部设立在美国加州(加利福尼亚)三番市（旧金山），在全球50多个国家设有经营机构。macromedia公司在全球拥有300万开发和设计用户以及广大的行业合作伙伴网络，其丰富的客户机软件被98%的web应用开发人员所广泛使用，是企业、政府和教育市场客户的战略性it提供商。 2005年4月18日，adobe公司收购macromedia公司,dreamweaver，authorware等软件同归adobe公司。adobe systems是一家总部位于美国加州圣何塞的电脑软件公司。公司由乔恩沃诺克和查理斯格什克创建于1982年12月，他们先前都曾任职于施乐公司的帕洛阿尔托研究中心，离开后组建了adobe系统公司，使得postscript页描述语言得到商业化应用。 第四页adobe 解决方案现在已成为数码成像领域的金科玉律。 与此同时，adobe creative suite 代表了下一代的设计和发布平台。 adobe 智能文档技术则推动着整个企业级文档服务领域的发展，帮助各种规模的企业优化和加速文档处理流程并进一步提高效率。 1.2软件版本介绍1.2.1dreamweaverdreamweaver是美国macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 dreamweaver、flash以及在dreamweaver之后推出的针对专业网页图像设计的fireworks，三者被macromedia公司称为dreamteam(梦之队)，足见市场的反响和macromedia公司对它们的自信。说到dreamweaver我们应该了解一下网页编辑器的发展过程，随着互联网(internet) 的家喻户晓，html技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在word中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点： 一、 难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来； 二、 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的html代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的html代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在dreamweaver之前，frontpage98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在第五页dreamweaver之前，现在我无意说dreamweaver已经实现网页设计师的梦想，但我觉得dreamweaver正在努力向这个梦想一步步走去。 1.2.2adobe dreamweaver cs3dreamweaver cs3是adobe（奥多比）公司收购macromedia公司后最新推出的creative suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作web页站点,web页和web应用程序开发的理想工具。 dreamweaver，fireworks，flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档之一。 1.2.3adobe dreamweaver cs4dreamweaver cs4的界面几乎是做了一次脱胎换骨的改进，从中看到了更多的设计元素，让dw也稍稍带着点苹果的味道。如果说vista和office 2007创造了软件界面设计的新纪元，那么adobe相当于取代了苹果的设计地位而紧随ms之后。唯一的区别就是，ms老是抄人家苹果的（汗一个，微软的fans别砸我），而adobe却是实实在在的自己创造，设计界的老大地位实至名归 布局按钮：这个按钮似乎和下方的代码、分割、设计按钮功能重复，目前还不明白dw的意图，唯一增加的新功能是垂直分割，让代码和设计界面以垂直对比的方式呈现。 精简设计：它提供了更多的可视区域，同时可以把右边的菜单收缩到只剩下图标。对于习惯了adobe其他设计软件的朋友来说，这的确是非常贴心的设计。 应用程序开发增强：左上方是和数据相关的面板，包括数据库面板、数据绑定面板和行为面板；左下方则是文件与资源相关的面板，包括文件面板、相关资源面板、代码收集器等；右边则是设计相关面板，包括插入面板、css样式表面板、ap元素面板（用来为浮动层定位）。应该说这是一个万金油布局，几乎适用所有的开发者，同时，它也把大部分菜单展示在用户面前，其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。 在下方的文档面板上，dw新增加了一个实时预览功能live view。它的作用是在dw窗口中实时查看代码的效果，包括javascript特效！ 第六页1.2.4adobe dreamweaver cs52010年4月12日备受关注的adobe新一代产品creative suite 5（cs5）正式发布了。其中包括新的dreamweaver cs5。 此次dreamweaver cs5最突出的亮点有三处：1、对cms的支持功能；2、对css的校验；3、对php更好的支持。以至于国外一些同学对dreamweaver cs5的体验为more wordpressy, more firebuggy。 除此以外，cs5还内置了webkit引擎，可以模仿safari、chrome浏览器预览网页效果。 php支持也在cs5版本中得到改善，不仅可以利用代码提示在文档中查找到自定义的函数，还可以利用此功能更好地设计cms模板，减轻了广大模板设计者的痛苦。 除了以上三个亮点外，dreamweaver cs5还有一些其它新特性，比如它整合了browserlab网络服务，可以让你在链接到网络浏览器实验室，同 时使用不同浏览器检查布局，左侧是ie，右侧是firefox。1.3软件优点dreamweaver可以用最快速的方式将fireworks，freehand，或photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。dreamweaver能与您喜爱的设计工具，如playback flash，shockwave和外挂模组等搭配，不需离开dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使dreamweaver自动开启firework或photoshop来进行编辑与设定图档的最佳化。 1.3.1网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，dreamweaver 会自动更新所有连结。使用支援文字、html码、html属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 1.3.2无可比拟的控制能力dreamweaver是唯一提供roundtrip html、视觉化编辑与原始码编辑同步的设计工具。它包含homesite和bbedit等主流文字编辑器。帧(frames)第七页和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给third-party厂商，包含asp， apache，broadvision， cold fusion，icat， tango与自行发展的应用软体。当您正使用dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和xml dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出xml内容。 dreamweaver还集成了程序开发语言，对asp、.net、php、js的基本语言和连接操作数据库，都是完全支持的。1.4工具简介第一个为插入图象的按钮，点击后，会弹出对话框，标准对话框，选择想要的图象就行了。 第二个（横向走）为插入轮替图象，它弹出的对话框会让选择两副图，以及鼠标点击时的连接等。作好后，用鼠标移动到图象上面，图象就会变成另外的一副图象，点击它，就会连接到另外一个页面上去。 第三个为表格，点击后，在弹出的对话框中，添入想要的行数和列数以及表格边距颜色等。 第四个为插入表格式数据，可以将以前作成的表格形状的数据表，直接插入到网页中来，而不用做任何的修改。 第五个按钮为插入水平线按钮，插入后，在属性浮动面板上改改它的大小等。 第六个为导航条，和第二个差不多，也可以换图象，不过，比起第二个要复杂的多，但绝对简单。 第七个为插入层，这好象是 dreamweaver 特有的特性，其他的网页编辑软件中都没有这项功能。插入的层可以位于页面的任何位置。拖动就行。 第八个为插入换行符，有时网页中的文字想让它换行，按回车又太大，用换行符就是一种不错的选择。 第八页第九个为插入 email，将联系用的 email 插入网页中，只要填上 email 地址就行。 第十个为插入日期，很简单，没有什么好说的。 第十一个为插入 flash按钮，flash 是现在网页中新兴的一种多媒体，有动画，有声音，但文件很小，极适合在网上传播。 第十二个为插入 shockwave 按钮，做好了的 shockwave 直接就可以插到这儿来。 第十三个为插入制作人，亲自制作的东西不想留名吗？点它就行。 第十四为插入 firework 按钮，firework 是 macromedia 公司的又一个产品，具有制作动画图象等动态功能。也是专门为网页制作设计的。 第十五为插入 java语言编写的 applet 小程序按钮。 第十六为插入 active x控件用的按钮。 第十七为插入插件用的按钮，这儿可以插入别的插件，上面未包括的。 第十八为插入服务器端接口联系的按钮。 1.4.1插入框架第一个按钮为插入框架按钮，为插入下面的那些按钮作准备。这下面的按钮选项包括：文本框，按钮，多选按钮，单选按钮，列表，文件域，图象域，隐含域，跳转菜单等交互式网页要用到的组件，假如要制作一个交互式的网页像留言薄什么的，用它做，非常的方便快捷。 1.4.2其他按钮它还有几个选项组，但都不是那么常用了，一个就是它 character 组它是常用符号组面板，里面为收集了最长用的符号，这些，通过手工直接写，是非常麻烦的事，因为它们是源码了，而这儿，可以给直接的转换成为源码，插入就成。而 frames 组，则是对页面的分页，也就是分窗口，将一个浏览器窗口分成几个窗口，在每个窗口里加入不同网页，来达到不同的效果。它可以分的总类也如下，可以从图上直接看出来，非常的方便与快捷。而 head 组则是在网页“head”和“/head”之间加入必要的语句，可以是连接，可以是关键字，也可以是描述性的语句，还可以规定网页的刷新频率等。invisible 组则是插入网页中看不见的元素了，比如说：换行符，回车符等不可见的符号。主要由这个控制面板来插入。 1.5使用方法1.5.1网页制作新建方法，就不用多说，一般软件中的新建方法在这儿同样使用，点击菜单 file 中的 new 就行了，或者按 ctrl+n 也行。 在这儿就可以插入文字，图象，层等，反正都随，是不是也是所见既第九页所得。假如想看一下它的源文件，可以点击右下角的“”标记，也可以点击启动面板中的最后一个选项。就会弹出来一个小窗口如图：也可以打开外部编辑器来编辑它的源代码，比如说记事本。 只要点一下“external editor”按钮，wrap选项为换行，当不想横向拉动滚动条，把它选上，文字就自动会换行了，另外一个选项为行号选项，当选上它是，左边将会出项行号，这样特别便于查找，去掉后，就与普通的记事本没有什么区别了。编辑好后，关了它就可以了。 1.5.2管理站点设计好的网页，在放到网上去以前，都需要把它组建好，以便于上传，在本地机上就要组织好，而 dreamweaver 也把这想到了，点击启动面板上的 site 选项，就会弹出站点管理窗口，和文件浏览器差不多，在这儿，可以增加文件夹，删减文件，文件改名等等，只要是文件浏览器能干的事，它都能干。并且可以清楚地看到，哪个文件连接到了哪个文件，哪些文件是并列的关系，那些文件是父子关系。所做的第一步是先建立一个本地站点根目录。然后选择“new site”打开对话框，在“local root folder”中，输入本地站点根目录的位置。然后输入 http address，如果还没有该地址，随便输入一个也行，只要好记。最后，按“ok”键就可以了。以后从本地站点中删除文件，拷贝文件时，站点会自动刷新站点文件列表。其余的管理操作，与文件浏览器一样，也就不多说了。第十页第二章网站流程图简介index.html主要界面外部的销售网站产品展示生产加工销售网络联系我们企业文化质量监控企业概述花生与人体健康南瓜粉的营养成分小小松子功效大南瓜造就健康生活杏仁油与健康滚动图片连接的新闻第十一页第三章.程序详情介绍3.1使用dreamweaver创建站点：3.1.1主页命名成:index因 为 我 做 的 是 一 个 关 于 健 康 食 品 的 网 站 所 以 我 选 择 一 张 绿 色 生 态 的 图 片 作 为 我 的 背 景 ， 并 且 用 p s 做 了 一 个 广 告 标 语 来 宣 传 我 的 东 西 是 绿 色 食 品 健 康 食 品。 然 后 做 了 两 个 按 钮 一 个 用 于 进 入 我 的 网 页 另 一 个 用 于 进 入 一 个 外 部 的 销 售 网 点 这 样 做 的 目 的 是 让 一 些 已 经 了 解 我 产 品 的 人 快 速 购 买 ， 不 了 解 我 产 品 的 人 可 以 进 入 我 的 下 一 个 网 页 来 了 解 我 的 产 品。第十二页3.1.2第二个界面命名为：zhuye这 个 页 面 上 面 的 部 分 也 是 向 日 葵 的 图 片 和 广 告 标 语 ， 左 侧 是 一 片 叶 子 的 图 片 ， 用 绿 色 来 突 出 我 公 司 的 观 念 “ 绿 色 食 品 能 带 来 健 康 ” ， 右 侧 是 一 张 伸 出 大 拇 指 的 图 片 ， 我 想 用 这 张 图 片 体 现 我 公 司 信 誉 至 上 的 理 念 ， 用 我 们 的 信 誉 、 真 诚 ， 让 企 业 发 展 的 更 好 ， 更 值 得 人 们 信 任 。 在 上 部 图 片 下 有 一 排 导 航 似 的 按 钮 ， 它 们 分 别 连 接 到 别 的 分 页 上 。 中 间 左 上 侧 是 一 组 滚 动 的 图 片 ， 每 张 图 片 都 连 接 到 分 页 上 ， 中 间 右 上 侧 是 一 些 食 品 的 简 介 ， 它 们 也 都 连 接 在 别 的 分 页 上 。中 间 下 侧 是 一 个 avi 文 件 ， 我 用 a e 做 的 一 个 宣 传 似 的 小 视 频 ， 主 要 用 于 观 看 网 站 的 人 更 好 的 了 解 我 们 公司。 第十三页3.1.3下面这些分页就是用文字或图片介绍公司： 第十四页3.1.4这个页面是：chanpinjieshao我 设 计 这 个 页 面 的 时 候 没 有 简 单 的 就 把 图 片 放 在 里 面 做 些 连 接 ， 而 是 让 图 片 两 张 成 一 组 ， 在 网 站 中 间 从 下 向 上 滚 动 播 放 ， 而 且 鼠 标 放 在 上 面 图 片 停 止 滚 动 每 一 张 图 片 也 都 有 对 应 的 连 接 ， 但 这 些 连 接 都 是 直 接 连 接 到 销 售 的 网 站 上 ， 我 这 样 做 就 是 让 看 网 站 的 人 看 到 我 们 公 司 的 产 品 ，让 一 些 看 到 我 们 公 司 产 品 有 想 购 买 的 能 快 速 购 买 ， 这 样 做 的 好 处 就 是 避 免 了 一 些 消 费 者 因 没 找 到 购 买 地 址 而 对 产 品 失 去 购 买 的 欲 望 。第十五页3.1.5这个页面是：shengchanjiagong 这 个 页 面 就 是 让 几 幅 图 片 按 顺 序 从 右 至 左 滚 动 出 来，这 个 分 页 主 要 就 是 介 绍 了 我 们 公 司 的 厂 房 和 设 备 ， 当 然 干 净 和 技 术 高 的 厂 房 设 备 能 更 好 的 吸 引 那 些 为 了 吃 到 干 净 健 康 食 品 的 消 费 者 前 来 购 买。第十六页第四章.主要功能程序段这 个 是 用 dreamweaver中 的 程 序 实 现 了 多 张 图 片 在 一 起 自 动 播 放 而 且 连 接 到 指 定 分 页 上。程序：imgborder:0px;.style1height: 23px; 第十七页body margin-top:0px;var imgurl=new array();var imglink=new array();var imgtext=new array();var picnum=0;imgurl1=11.jpg;imglink1=tu.html;imgurl2=22.jpg;imglink2=tu.html;imgurl3=33.jpg;imglink3=tu.html;imgurl4=44.jpg;imglink4=tu.html;imgurl5=55.jpg;imglink5=tu.html;function nextpic() if(picnum5) picnum+ ; else picnum=