Matlab精品课程网站的设计

Matlab精品课程网站的设计 - 17 - 毕 业 论 文题 目：Matlab精品课程网站的设计 学 院： 物理与电子工程学院 专 业： 电子信息工程 毕业年限： 2009届 学生姓名： 高 峰 学 号： 200572020107 指导教师： 严春满 题目：Matlab精品课程网站的设计学生姓名：高峰 指导老师：严春满毕业届时：2009届 专业：电子信息工程班级：电子一班 学号：200572020107摘要：课程教学网站的建设是精品课程建设的重要内容之一，也是高等学校教学质量与教学改革工程的重要组成部分。Matlab精品课程网站的设计以Windows XP为网络平台，web服务器为IISV5.1，以Dreamwveaver8.0为开发工具，并以Flash、Fireworks为辅助工具。Matlab是一种功能非常强大的科学计算软件，它具有强大的数值计算和图形可视化功能、简洁易学的工作环境和编程语言，Matlab可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程序等，主要应用于工程计算、控制设计、信号处理与通讯、图像处理、信号检测、建模设计与分析等领域。本课程网站全面展示了本课程的教学大纲、教学方法、课程描述、电子教案、教学课件、教学资源。关键词：Dreamweaver、Matlab、fireworks、网站Abstract: Teaching web site construction is the building of quality courses important, but also the quality of teaching and teaching reform, an important component of the project. Matlab Design Courses Web site for the network to Windows XP platform, web server IISV5.1, to Dreamwveaver8.0 for the development of tools, and Flash, Fireworks for aids. Matlab is a very powerful scientific computing software, it has a powerful numerical computing and graphical visualization capabilities, simple to learn the working environment and programming language, Matlab matrix operations can be conducted, and data mapping function, the realization of algorithms, to create user interface, connected to other procedures, such as programming language, mainly used in engineering calculations, control design, signal processing and communications, image processing, signal detection, modeling, design and analysis and other fields. The course web site a comprehensive picture of the course syllabus, teaching methods, course description, e-lesson plans, teaching, teaching resources.Key word：Dreanweaver Matlab Fireworks Web site目 录摘要-1关键词-1引言-31、网站开发环境及工具介绍-31、1 所用工具简介-31、1、1 Dreamweaver简介-41、1、2 Fireworks简介-51、2 开发环境的建立-61、2、1 系统软件要求-61、2、2 IIS（Internet信息服务）的配置-72、网站的实现-82、1站点的建立-82、2 页面制作-102、2、1 模版的制作-102、2、2 主页的制作-122、2、3 模版的嵌套-132、2、4 制作html页面-132、2、5 添加超级链接-14总结-15致谢-16参考文献-16引言：伴随着我国经济的飞速发展和互联网的普及，对于高质量、高水平的教育资源的需求也日趋旺盛。信息技术的迅速发展和广泛应用，引起教学理念、教学模式、教学环境和教学手段的重大变革，为学校精品课程的实施提供了可靠的技术保证。精品课程是指具有一流教师队伍、一流教学内容、一流教学方法、一流教学资源和一流教学管理等特点的示范性课程。数字信号处理精品课程网站利用互联网来搭建一种跨地域、跨时空共享教学资源的平台，以提高高等院校教学质量。在科学研究与工程应用过程中，人们往往会遇到大量繁重的数学运算和数值分析，传统的高级语言如FORTRAN、C等虽然能够在一定的程度上减轻运算量，但它们均要求应用人员具有较强的编程能力和对算法有深入的研究。此外，对大多数科学工作者而言，若要运用这些高级语言对计算结果进行可视化分析以及对计算的图形进行处理，也不是一件轻松的事情。 MATLAB正是在这一应用要求背景下产生的数学类科技应用软件。它具有强大的数值计算和图形可视化功能、简洁易学的工作环境和编程语言，从根本上满足了高校师生和科技人员对工程计算的要求，将他们从繁重的数学运算中解放出来，现已风靡世界，受到越来越多科技人员的喜爱和欢迎。MATLAB 的应用范围非常广，包括信号和图像处理、通讯、控制系统设计、测试和测量、建模和分析以及计算生物学等众多应用领域。附加的工具箱（单独提供的专用 MATLAB 函数集）扩展了 MATLAB 环境，以解决这些应用领域内特定类型的问题。Dreaweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。本课程网站以Dreamweaver作为主要开发工具，以Fireworks和Flash为辅助工具，全面展示了Matlab课程的教学大纲、教学方法、课程描述、电子教案、教学课件、教学资源。1、网站开发环境及工具介绍1、1 所用工具简介1、1、1 Dreamweaver简介Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。利用Dreamwver中的可视化编辑功能，可以快速创建web页面而无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中，可以在macromedia fireworks或其它图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver，从而优化开发工作流程。Dreamweaver还提供了其它工具，可以简化向web页中添加Flash资源的过程。Dreamweaver还提供了功能全面的编码环境，其中包括代码编辑工具（例如代码颜色、标签完成、“编码”工具栏和代码折叠）；有关层叠样式表（CCS）、Javascript、coldfusion标记语言（CFML）和其它语言的语言参考资料。Dreamwver还可以使用服务器技术（如CFML、ASP、ASP.NET、JSP和PHP）生成动态的、数据表的web应用程序。Dreamweaver8中增加了一些新功能，主要有：“缩放”工具和辅助线，可视化XML数据绑定，新的CSS样式面板，CSS布局的可视化，代码折叠，“编码”工具栏，后台文件传输，“插入Flash视频”命令等，只需花费最少的时间和精力便可生成web站点和应用程序。Dreamweaver使复杂的技术变的简单而方便，以达到事半功倍的效果。1、1、2 Fireworks简介Macromedia Fireworks 8 是用来设计和制作专业化网页图形的终极解决方案。它是第一个可以帮助网页图形设计人员和开发人员解决所面临的特殊问题的制作环境。使用 Fireworks，您可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。Fireworks 使您可以在单个应用程序中创建和编辑位图和矢量两种图形。并且所有元素都可以随时被编辑。除此之外，工作流可以实现自动化，从而满足耗费时间的更新和更改要求。Fireworks 与多种产品集成在一起，包括 Macromedia 的其它产品（如 Dreamweaver、Flash、FreeHand 和 Director）和其它您喜欢的图形应用程序及 HTML 编辑器，从而提供了一个真正集成的 Web 解决方案。利用为您所使用的 HTML 编辑器自定义的 HTML 和 JavaScript 代码，您可以轻松地导出 Fireworks 图形。在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。对 ActionScript 和 CSS（层叠样式表）格式的新增支持使 Fireworks 能够更有效地与 Dreamweaver 和 Flash 一起工作。对新文件格式的支持、新增面板和极为优化的工作流程可使您在最有效的时间内制作效果最佳的图像。众所周知，在网页上的jpg图片如果过大，会严重影响页面的打开速度，Fireworks提供优化图片的功能，即缩小图片的KB，而且不影响画面的质量（除非放大了与原图对比）。由于很多人喜欢用photoshop制作jpg图片，所以它的容量会很大（因为它是适合处理印刷品，要求比较清晰），最终还是要用Fireworks来处理一下。1、2 开发环境的建立1、2、1 系统软件要求本网站将运行在Windows XP操作系统上，由IIS Web服务器建立web站点，通过Dreamweaver8.0开发页面。软件环境列表软件应用Windows XP操作系统IIS5.0Web服务器Dreamweaver8.0动态页面设计1、2、2 IIS（Internet信息服务）的配置打开【控制面板】,找到【添加/删除程序】【添加/删除WINDOWS组件】，弹出【Windows 组件向导】，选择【Internet 信息服务（IIS）】，插入安装盘，按【下一步】开始安装。如下图所示： 按向导指示，完成对IIS的安装，安装成功后，就可以按照自己的要求配置IIS了，在这里采用默认的配置。IIS在我们使用的过程中充当着一个虚拟的角色。所以我们访问“服务器”上的内容（虽然它存在本机上）时，要通过类似于访问网站的模式去访问。IIS的默认目录安装在系统盘：inerpubwwwroot里，虚拟目录http:/localhost或其实是执行机器上物理路径为系统盘：inetpubwwwroot上的内容，现在我们就可以利用IIS+IE进行ASP的调试了。打开IE，在地址栏里输入：http:/localhost/mysite/admin文件名或/mysite/admin文件名，如果文件名是/index.asp,那么文件名可以省略不填，在地址栏中输入http：/localhost/mysite/admin/就可以打开这些文件了。2、网站的实现2、1站点的建立用Dreamweaver制作网页时，首先要在硬盘上定义一个本地站点，作为一个网站，里面有很多网页文件、图片甚至flash动画等等，如果不进行管理归档，分布在硬盘的各个地方就不能方便进行网页的发布。定义本地站点就是在网站上定义一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。执行站点管理站点命令，或者在右侧文件面板中单击蓝色的“管理站点”文字，弹出管理站点对话窗如图：单击新建按钮，选择站点，出现了站点定义的对话窗，给站点起个名字，就用自己的姓名作为站点的名字了，以便确认。单击下一步按钮继续，选择否，我不想使用服务器技术：单击下一步按钮继续，现在我们要选择把文件存在计算机上的什么位置，单击右边的文件夹图标，来选择站点根文件夹，我们选择D:毕业设计2gaof，当然可根据需要来选择根目录。单击下一步按钮继续，选择无最后单击完成按钮，结束站点定义。返回到站点管理对话窗，我们可以看到左边出现了站点“gaof”单击完成按钮，在文件面板下也相应出现了相关信息，站点gaof。为了方便，我们把图片放到一个文件夹下，右击鼠标，选择新建文件夹命名为：images,新建网页为首页，命名为：index.html,这样一个网站的站点就建立了。2、2 页面制作2、2、1 模版的制作要制作模版，就先要进行网页的布局。进入Dreamweaver，新建一个html文档，选Dreamweaver中“插入”工具栏中的“布局”模式，点“插入”工具栏中“布局表格”按钮，进行定位布局，再点“布局单元格”按钮，绘制三个单元格，其中最上为头部，中间位可编辑区域，下部为尾部，然后退出布局模式。先在布好的第一个单元格中插入背景图片，然后插入一个三行的表格。滚动字幕的制作，将光标插入点昉到第一行单元格，单击“文档”工具栏的“拆分”按钮，进入拆分视图，在代码窗口中插入，将插入点置于标签中间，输入“Matlab课程设计”字样，将插入点置于标签中的“”前，展开“标签检查器”中的“属性”面板，单击“刷新”按钮。将align设置为left,将behavior设置为scroll，将direction设置为left，将height设置为50，将hspace设置为50，将scrollamount设置为2，将scrolldelay设置为1，将vspace设置为20，将width设置为400，设置完成后刷新。导航条图片的制作，在Fireworks中打开已经存储好的用来做导航条的图片，图片大小为150*30利用横排文字工具添加文字，设置适当的字体以及大小颜色等，保存该图像以作为导航条的状态图像，再利用样式绘制从前景到背景的渐变，分别作为鼠标经过时的图像和按下时的图像，其效果如下图所示：将光标插入点放到第一个布局单元格中表格的第三行中，点“插入”菜单的“图像对象”“导航条”命令，打开对话框在这个对话框中分别一条一条输入“状态图像”、“鼠标经过图像”、“按下图像”、“按下时鼠标经过图像”，最后点“确定”。在表格的第二行中分成三列，分别插入校徽、文字、动态图片。将滴二个布局单元格设置为可编辑区域，点“插入”“模版对象”“可编辑区域”命令。将第三个布局单元格作为网页的尾部，添加版权信息。在保存的时候，点“文件”“保存为模版”，这样，网页模版就做成了。2、2、2 主页的制作新建一个html文档，点“修改”“模版”“套用模版到页”命令，将刚才做好的模版加载到页面中。在可编辑区域中，新建一个表格，分为5行，每一行都用蓝色的水平条隔开，第一行分为两列，左边插入图片，右边插入关于Matlab的文字简介。如此，依次做出下面的“课程大纲”、“课程教案”、“课程教材”等。2、2、3 模版的嵌套在做“课程教案”的时候，需要用到模版的嵌套。新建一个html文档，先套用以前做好的模版，在可编辑区域中，绘制一个三行的表格，在第一行中添加“课程教案”图片，在第二行中加入图片选定图片，点击属性面板左下角的添加热点按钮，在每一个文字上添加热点，并为每个热点添加链接。将表格的第三行设置为可编辑区域，并将文档保存为模版。2、2、4 制作html页面新建html文档，套用以前做好的模版，在可编辑区域中编辑文本。为了使文本内容便于控制，整个文档使用统一的风格，可以使用CSS样式表进行设置。CSS样式全称cascading style sheet(层叠样式表单)，在网页设计中为了操作简便，常用CSS样式来控制字体的大小、行间距、背景图像的调用、表格效果的设置等。可以把CSS样式编码写在一个以.css为扩展名的文本文件中，要在一个网页中使用外部样式表，我们就在和之间加入类似的代码:，外部样式表的好处就是我们不要过多的编辑CSS编码，能在多个网页中链接同一个css，就能保持网页外观如文字大小、背景颜色的一致性。点击窗口右边浮动面板的CSS面板，点右上角的三角，新建一个CSS样式输入名称，选择“类”，点击“确定”，进入编辑CSS对话框编辑完成后，点“确定”，一个CSS样式就完成了，以后的文本就套用这个样式就可以了。2、2、5 添加超级链接网站是由多个