第一篇：电大Dreamweaver的网页设计论文
鄂尔多斯电视广播大学毕业设计
鄂尔多斯电视广播大学
毕业设计（论文）
题目：个人网站设计——个人网站建设
学 院：_鄂尔多斯电大 _ 专 业：计算机应用技术 班 级： 计算机班 姓 名：____s.____
2014年12月完成
I
鄂尔多斯电视广播大学毕业设计
摘 要
在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。网站为很多人提供了一个网络生活空间，通过其网页展示了企业介绍、城市文化、校园文化介绍、招商信息、加盟程序、留言等一系列内容的介绍。为了更好的宣传和服务于经济发展，我通过制作一个网站来介绍宣传一下我的家乡。本文比较系统的阐述了有关网站建设方面的相关理论知识及该网站开发设计，充分体现了计算机技术服务于经济建设的重要思想。
关键词: 网站建设，Internet，城市
II
鄂尔多斯电视广播大学毕业设计
目录
第一章 前言...........................................................1 1．1课题来源.......................................................1 1．2 网站开发项目需求分析.........................................1 第二章 网页制作概述....................................................2 2.1 网页的类型......................................................2 2.1.1 静态页面..................................................2 2.1.2 动态页面..................................................2 2.2 网页开发技术....................................................3 2.3 网页布局........................................................4 2.3.1 网页布局的基本概念........................................4 2.3.2网页布局方法...............................................6 2.3.2 网页布局技术..............................................8 2.4网页配色........................................................9 2.5 网页设计流程...................................................10 第三章 涉及软件......................................................11 3.1 DreamWeaVer cs5介绍...........................................11 3.2 DreamWeaVer cs5操作界面.......................................11 第四章 建立网页链接..................................................12 4.1 文字链接.......................................................12 4.2 图像链接.......................................................13 4.3在HTML语言中建立网页链接......................................14 第五章 结论........................................................16 致 谢................................................................17 参考文献..............................................................18
III
鄂尔多斯电视广播大学毕业设计
第一章 前言
1．1课题来源
随着二十一世纪新兴科技的飞速发展，如今的信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。
互联网拉近了各个领域之间的距离，如今利用互联网来宣传已经是必不可少的工具，城市发展也需要互联网的宣传来带动自身的发展。
1.2网站开发项目需求分析
一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分来自于客户的实际需求或者是出于自身发展的需要。在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。
鄂尔多斯电视广播毕业设计
第 I 条 第二章 网页制作概述
2.1 网页的类型
网页有多种分类,我们笼统意义上的分类是动态和静态的页面,原则上讲静态页面多通过网站设计软件来进行重新设计和更改,相对的比较滞后，当然现在有网站管理系统，也可以生成静态页面~我们称这种静态页面为伪静态。动态页面通过网页脚本与语言自动处理自动更新的页面。2.1.1 静态页面
静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面[3]。2.1.2 动态页面
动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能，也是我们常见的。动态网页是需要语言环境支持的，动态页面常见的扩展名有：.asp、.php、.jsp、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面[4]。
动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。可以说是一对多的关
鄂尔多斯电视广播毕业设计
系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格，只需要重新制作前台所访问的数据即可。只要数据库结构不变，可以很快的进行改版的。
2.2 网页开发技术
动态网页开发技术介绍——HTML、ASP、JSP、CGI、PHP。
HTML（HyperTextMark-upLanguage）即超文本标记语言，是www.xiexiebang.common Gateway Interface(公用网关接口)。在早期，你可以使用不同的程序编写合适的CGI程序，如Visual Basic,Delphi或C/C++等。虽然CGI技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有逐渐被新技术取代的趋势。
ASP全名Active Server Pages，是一个WEB服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。ASP采用脚本语言VB Script（Java script）作为自己的开发语言。ASP更精确的说是一个中间件，这个中间件将Web上的请求转入到一个解释器中，在这个解释器中将所有的ASP的Script进行分析，再进行执行，而这时可以在这个中间件中去创建一个*.html文件（静态网页）。PHP是一种跨平台的服务器端的嵌入式脚本语言.它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点，PHP是完全免费的[6]。
JSP 是Sun公司推出的新一代站点开发语言，他完全解决了目前ASP,PHP的一个通病－－脚本级执行（据说PHP4 也已经在Zend 的支持下，实现编译运
鄂尔多斯电视广播毕业设计
行）。Sun 公司借助自己在Java 上的不凡造诣，将Java 从Java 应用程序 和 Java Applet 之外，又有新的硕果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。
2.3 网页布局
网站主页就好象是宣传栏或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象。
一般来说，好的网站应该给人有这样的感觉：
干净整洁；
条理清楚；
网页
专业水准；
引人入胜。
网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从——离开是最好的选择，就象一些商店，播放震耳欲聋的发烧音乐，你要做的唯一决定就是离开那里，越快越好。(a)2.3.1 网页布局的基本概念
最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思，可以创造出自己的设计方案。，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西，这样你创造出来的网页才能更好的被别人接受。
（1）页面尺寸
鄂尔多斯电视广播毕业设计
由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。
（2）整体造型
造型就是创造出来的物体形象，这里是指页面的整体形象。这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
（3）页头
页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放
鄂尔多斯电视广播毕业设计
置站点名字的图片和公司标志以及旗帜广告。
（4）文本
文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
（5）页脚
页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。
（6）图片
图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
（7）多媒体
除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。(b)2.3.2网页布局方法
网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍。
（1）纸上布局法
许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。
首先，尺寸的选择。目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。
其次，造型的选择。先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一
鄂尔多斯电视广播毕业设计
开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。如图2-1和图2-2
图2-1 手绘布局图 图2-2 布局图
考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形，(也可以是一条线段)如图2-3。
图2-3 布局图的改善
然后，增加页头。一般页头都是位于页面顶部，所以我们为图3增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线，如图2-4。
图2-4 页头的图示
然后，增加文本。页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调，如图2-5。
鄂尔多斯电视广播毕业设计
图2-5 文本的图示
最后，增加图片。图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方，如图2-6。
图2-6 图片的图示
经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。
（2）软件布局法
除了纸上布局，还可以利用软件来完成这些工作。如利用Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。(c)2.3.2 网页布局技术
（1）层叠样式表的应用
在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS有点复杂，但它的确是一个好的布局方法[7]。曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。比如一些企业网站。
（2）表格布局
表格布局被广泛使用，已经成为一个潜在的标准。随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。
鄂尔多斯电视广播毕业设计
表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响[8]。对于表格布局，打开一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，会可以看到这个页面是如何利用表格的。
（3）框架布局
由于它的兼容性，框架布局并没有被所有人接受。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。
2.4网页配色
网站充斥着枯燥的设计，惠普、IBM、戴尔、微软，以及其他数不尽的网站（相似的布局，相似的配色）。这样一种标准化的界面可以使浏览更方便，但同时带给用户一种很世俗的体验，并不能与访客产生一种积极的联系。
面对这种单调的设计，有一种解决方法，就是使用颜色。可能没有其他设计元素能像颜色一样能影响人们对世界感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动[9]。在界面设计中，颜色组合对设计非常有用。可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适，更有魅力。
一旦有机会可以让网站更独特，就不能放弃。如果你的网站做的很醒目，那么用户可能会花更多时间浏览并且想是从哪里访问过来的，他们有可能记住这个网站并且下次再访问。可能没有比颜色更好的元素可以达到这样的效果了。人们会马上对颜色产生感觉：激动、高兴或者枯燥乏味。
当你试图在一个充满饱和色调的页面上浏览信息时，你的眼睛会不断地返回那些亮的颜色。最强的视觉元素是最重要的。我们趋向于忘记那些深蓝、黄色和灰色，因为每天都看到。在那些用户需要长时间在线使用的 Web 应用程序中，注意这一点尤为重要。不是很强烈的配色可以使用户专注于工作和接收重要信息。当然完美的 Web 体验不能仅仅依靠颜色，结构、交互、布局等方面也必须协同工作，来创建可用、易用的网站和应用程序。但是颜色是平衡中的重要部分，不能忽略。
鄂尔多斯电视广播毕业设计
2.5 网页设计流程
网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下：
首先，获取客户需求和资料。在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟通与交流是非常重要的。
其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制作，保证风格的和谐统一。
然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过FTP软件连接到服务器空间上，然后上传发布文件。
最后，后期维护。一般静态网站上传后，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网站，设计人员需要负责培训客户方如何使用后台管理，这样客户就可以自己通过后台管理添加信息，设计人员只要及时更正动态网站的错误即可。
鄂尔多斯电视广播毕业设计
第三章 涉及软件
3.1 DreamWeaVer cs3介绍
Dreamweaver CS3是Adobe(奥多比)公司收购Macromedia公司后推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档
3.2 DreamWeaVer cs3操作界面
DreamWeaVer cs3界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。，如图3.1所示。
鄂尔多斯电视广播毕业设计
图3.1 DreamWeaVer cs3操作界面
第四章 建立网页链接
网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容----网页的“链接”。“链接”，又称“超链接"（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。
4.1 文字链接
“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。操作步骤：
步骤1、准备好已经制作完成的首页的各个栏目页面
步骤
2、在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。步骤
3、观察“属性面板”，其中包括一个“链接”文本框。步骤
4、接下来需要把链接的位址加入到文本框中。
鄂尔多斯电视广播毕业设计
步骤
5、在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。如图：
步骤
6、还可以设置一些“链接”的属性，单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。
步骤
7、至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“放松心情”这4个文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。
步骤
8、同理，按照以上步骤，再为“闲情逸致”和“个人主页”等其它栏制作指向对应栏目的链接。
至此，整个“文字链接”的实例就全就全部完成了。
4.2 图像链接
“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。操作步骤：
步骤
1、首先仍然要准备好已经制作完成的首页和各个栏目的页面 步骤
2、在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。
步骤
3、观察“属性面板”，在“链接”文本框中输入链接的文字位址。步骤
4、如果有需要，可以在“目标”下拉列表中选择“链接”网页显示的鄂尔多斯电视广播毕业设计
窗口方式，分别为-blank、-parent、-self或 top。
步骤
5、至此，第1个栏目的图像链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“动画制作”4个文字上时将变成手形，同时浏览器窗口下面的状态区中会显示出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转到第3个栏目中，这表示链接已经制作成功了。
步骤
6、同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。步骤
7、在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。
至此，整个“图像链像”的实例就全部完成了。
4.3在HTML语言中建立网页链接
一、文字链接
在HTML语言中用超链接标记指向一个目标。其基本格式为：举个简单的“文本链接”的实例，该实例相对应的HTML代码如下所示。
a href-“index2.html”target=”-blank”>平面设计（新开窗口，-blank)
相册（原窗口，默认为空）
第二篇：Dreamweaver网页设计教学计划
《Dreamweaver网页设计》教学方案
第一部分 说明
1．课程的性质与任务
“Dreamweaver网页设计”是计算机网络技术专业（专科）的一门统设必修课。本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。
2．与相关课程的衔接、配合、分工
先修课程：计算机应用基础Photoshop图像处理等。
后续课程：Flash动画制作等。
３．课程的教学基本要求
本课程要求学生掌握基本的HTML语言。学会使用Dreamweaver开发工具进行网页设计。这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来，并且能够在此基础上有所创造、有更进一步的发挥。
4．课程教学要求的层次
1．掌握：
要求学生能够全面掌握所学内容，并能够用其分析、应用与Dreamweaver网页设计相关的问题，能够举一反三。
2．理解：
要求学生能够较好地理解与Dreamweaver网页设计相关的问题，并且能够进行简单分析和判断。
3．了解：
要求学生能够一般地了解的所学内容。第二部分 媒体使用与教学过程建议
学时分配
课程教学总学时90学时，5学分。其中授课36学时，实训54学时。
2．多种媒体教材的总体说明
1．本课程文字教材为合一型教材，文字教材作为学习的主要媒体，着重反映课程的基本知识和针对性、应用性，在形式上要便于自学。在内容上包括基本理论知识讲解和实训两部分。
2．视频媒体配合文字教材的讲授，内容重点在于实训及辅导。
3．CAI课件作为网络教学媒体，可以在互连网上使用也可以单机使用。
3．教学环节
以主教材讲授为主，其它媒体作为辅助教学资源，以学生自学为主。
4．主要教学媒体的使用与学时分配
内容
序号 1 2 3 4 5 6 7 8 9 10 11 12 13 14
第1章 Dreamweaver基础
第2章 网页设计语言基础
第3章 文本和图像处理
第4章 表格与页面布局
第5章 创建超级链接
第6章 层与层动画
第7章 框架与框架网页
第8章 创建ＣＳＳ样式表
第9章 资源、模板和库
第10章 媒体对象的应用
第11章 表单处理
第12章 创建Web站点
第13章 制作动态网站
第14章 网站的维护和上传
2学时 3学时 3学时 3学时 2学时 3学时 2学时 3学时 2学时 3学时 3学时 2学时 3学时 2学时
教学内容 理论学时
合计
36学时
第三部分 教学内容和教学要求
第1章 Dreamweaver基础（2学时）
教学内容：
Dreamweaver 的历史和简介
Dreamweaver 的安装过程
Dreamweaver 的全新界面
改进的设计与开发环境
主菜单介绍
对象控制面板介绍
教学要求：
掌握：Dreamweaver的基本特点、新增功能及界面组成。基本操作，如安装、新建、打开、导入、保存、关闭等。
理解：新增功能、界面组成的优点。
了解：Dreamweaver可以为我们做些什么。
第2章 网页设计语言基础（3学时）
教学内容：
HTML及XHTML语言介绍
常用的网页语法标记
教学要求：
理解：HTML及XHTML语言介绍，常用的网页语法标记
第3章 文本和图像处理（3学时）
教学内容：
文本属性面板
编辑文本和插入对象
设置文本的格式
编号与项目符号
在网页中插入图像
图像的应用
教学要求：
掌握：设置文本属性和格式；编号与项目符号的使用；插入、编辑和排版图像。
理解：如何进行图像调整。
第4章 表格与页面布局
教学内容：
表格的基本操作
单元格的基本操作
表格的自动套用格式
表格的创建
表格的编辑
创建布局单元和表格
教学要求：
掌握：如何插入、编辑表格，创建布局单元和表格。
理解：表格在网页排版中的作用。
了解：使用页面布局模式进行网页排版的方法。
第5章 创建超级链接（2学时）
教学内容：
（3学时）
链接分类
创建超级链接
链接的四种状态
创建Email链接
管理超级链接
教学要求：
掌握：创建超级链接和Email链接，会设置链接的各种状态。
理解：超级链接几种状态之间的差别和共同点。
了解：创建Email链接中的各种技巧。
第6章 层与层动画（3学时）
教学内容：
层的概念
创建层
层操作
层与表格的相互转换
层动画的概念与设计
教学要求：
掌握：层的概念与使用
理解：层动画的概念与设计
第7章 框架与框架网页（2学时）
教学内容：
框架的基本概念
创建框架和框架集
框架的使用
框架和框架集的属性设置
教学要求：
掌握：框架和框架集的创建；框架的使用。
理解：使用框架的优缺点。
第8章 创建ＣＳＳ样式表（3学时）
教学内容：
CSS层叠式样式表
定义CSS样式表
创建并链接到外部CSS样式
设置CSS样式的格式化参数
设置超链接显示状态
添加各种ＣＳＳ效果
教学要求：
掌握：内部ＣＳＳ和外部ＣＳＳ的添加方法，编辑ＣＳＳ属性，使用ＣＳＳ进行页面的排版，创建各种ＣＳＳ效果。
理解：使用CSS排版的优点。
了解：如何使用ＣＳＳ控制背景、鼠标以及添加其它特殊效果。
第9章 资源、模板和库（2学时）
教学内容：
资源管理
模板的创建
模板的编辑
定义模板可编辑区域
创建，管理和编辑库项目
教学要求：
掌握：模板的创建，模板的编辑，定义模板可编辑区域
理解：资源管理
了解：创建，管理和编辑库项目
第10章 媒体对象的应用（3学时）
教学内容：
插入Flash对象
插入Shockwave对象
插入视频
插入ActiveX控件与Java小程序
填加声音
教学要求：
掌握：插入Flash对象、插入Shockwave对象、插入视频、插入ActiveX控件与Java小程序、填加声音
第11章 表单处理（3学时）
教学内容：
表单概述
表单对象
创建表单
处理表单
创建动态表单
教学要求：
掌握：创建表单、处理表单和设置表单参数。
理解：表单的概念和作用。
了解：如何使用表单创建交互式界面。
第12章 创建Web站点（2学时）
教学内容：
站点规划
在Dreamweaver8中创建站点
管理站点与站点文件
使用站点地图
为网站指定服务器技术
教学要求：
掌握：规划站点、建立和管理站点；使用站点文件和地图。
理解：创建站点的必要性。
了解：服务器技术的指定。
第13章 制作动态网站（3学时）
教学内容：
Access数据库基础
ODBC数据源设置
ASP与Web服务器配置
Dreamweaver8动态网站设计
创建与数据库连接
教学要求：
掌握：数据源的设置，如何配置Web服务器，如何创建与数据库的链接。
理解：数据库在动态网站设计中角色的重要性。
了解：设置数据源和创建数据库链接的技巧
第14章 网站的维护和上传（2学时）
教学内容：
在本机中测试网站
预览网页效果
网站的查错
发布网站到服务器
教学要求：
掌握：Dreamweaver8的测试、预览和发布设置。
理解：网站排错的必要性。
了解：如何发布网站到服务器。
实训内容
（实训分为必做和选做内容，可根据实际的实验条件选做。实验总计54学时）
实训1：建立Web网页（必做）
实训2：文本及其格式化（必做）
实训3：图像（必做）
实训4：超级链接（必做）
实训5：表格和页面布局（必做）
实训6：框架（必做）
实训7：层（必做）
实训8：模板与库（必做）
实训9：表 单（必做）
实训10：行 为（必做）
实训11：多媒体组件的插入、使用代码设计网页与站点管理（必做）实验12： 动态网站制作（选做）
实验13：ASP与SQL Server数据库相连（选做）
第三篇：Dreamweaver网页设计实验报告
实验报告
专业
XXXXXX
班级
XX 班
学号
XXXXXX
姓名
XXX
报告完成日期
2012-12-26
指导教师
XXX
评语：
成绩：
批阅教师签名：
批阅时间：
一、制作时间
2012年12月18日至2012年12月26日。
二、实习内容
1、使用Dreamweaver制作网站，该网站为福建工程学院网站
2、网站不少于8个页面，主页和各模块相关页面；
3、页面中包含文字、图片；
4、使用CSS实现网页相关页面设置，要求在实现网页内能够显示文字，图片等信息；
5、使用网页浏览器进行网站测试。
三、实习环境
1、硬件环境：计算机一台；
2、软件环境：Dreamweaver cs4；
3、测试环境：IE、firework等网页浏览器。
四、网站总体设计
1、网站主题
本网页是以福建工程学院网站为主题，针对不同的年龄阶段的人给出了不同的学院的信息。
2、设计思路
首先构思了基本网页的布局，主页采取了常用的1-（1+1+1），附页采用了1-（1+1），上了多个网 最后决定参照福建工程学院的官方网站进行制作，但是布局并不相同 素材取自福建工程学院官方网站，部分图片取自百度，网站包括1个主页7个子页，子页包含了所有的学校状况，分别为：学校简介、现任校领导、教学机构、管理机构、校纪校训校歌、校园风光、新校区建设；采用了较难的二级菜单 和 JVAV技术实现导航栏上面的图片进行4张轮播。
五、制作步骤
1.首先确定网页的主题后，从网上查看各名校的网站，并从中寻找思路开始做网页。经过长时间的浏览，最终选择福建工程学院作为参照（网址：http://www.xiexiebang.com）
2.受福建工程学院主页的影响我自学了图片轮播和二级菜单，从而制作了轮播图片和二级菜单。
3.由于对于JVAV和表单的知识并不是非常了解所以有些地方需要实现的实现不出来放弃了，期中研究了最久的就是 导航轮播和下面的有块区域的图片轮播，结果因为不知道如何同时初始化2个JVAV函数 最后以失败告终 只好放弃
4.本次制作最难的地方是导航菜单的二级菜单和图片轮换
在制作过程中，遇到很多次的制作混乱，最后还是老师帮忙解决的。
5.原计划那些JVAV代码因为无法同时初始化他们放弃了 只好以一些列表代替
6.最后，将一些小细节的东西做了些处理，最后打包上交。
六、实习总结
这次是我们web的期末考试制作，通过这一次的制作，不仅巩固了以前学过的知识，还学会很多课堂上未教授的东西。通过老师的讲解、查阅资料，解决了很多制作上的困难，这一点我在这要好好感谢我们的XX老师和我们宿舍的学姐，谢谢她们帮我很大的忙。
七、参考文献
《HTML+CSS网页设计与布局》 《PHP编码》
第四篇：Dreamweaver网页设计+授课教案
Dreamweaver教案一(一课时)
教学目的：初步了解Dreamweaver的操作
教学重点：Dreamweaver的界面
教学难点：各个面板的调用
一、引入
为什么要用Dreamweaver而不用Frontpage？
Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
例一：m1.htm和f1.htm的大小比较
例二：frontpage安装程序和dreamweaver安装程序的大小比较
例三：frontpage运行和dreamweaver启动比较
二、Dreamweaver的安装
三、Dreamweaver的界面
1．文档窗口：主菜单、工具栏、底部启动条、文档编辑区
2．对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符
3．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理
4．属性面板：随目前对象不同而内容不同
四、作业
1．写出Dreamweaver对象界面中所有对象的名称
2．新建一个空白网页，写出空白网页的HTML代码
Dreamweaver教案二(一课时)
教学目的：回忆原来学过的网页的文字知识，熟悉 Dreamweaver的操作，熟悉属性面板的 1
使用，掌握页面属性、文本属性的设置
教学难点：向导图片、预格式化、图片的路径
教学重点：常用属性
一、复习引入
1．输入文本
2．回车键的作用
3．如何输入换行符：Shift+ENTER，或者是对象面板à符号
4．换行符对应的HTML标记
二、设置页面属性
1．打开页面属性对话框：右击页面，选择页面属性（page properties）
2．设置标题显示（Title）：
3．设置页面背景（Background image）：选择背景图像，注意路径
4．设置背景颜色Background：
5．设置本页面中文字的颜色Text：在没有设置其它的字体颜色前，这个文字颜色发生作用，一 旦对具体的文字设置颜色，这个设置就不起作用了
6．设置链接的各种颜色（Visited Links、Active Links、Links）
7．设置页面边界（Left Top）：使内容与边框没有空隙
8．设置文档字符集（Document Encoding）：gb2312
9．设置向导图片（Tracing Image）：用于设计时，下面的滑动条用于设置这个图片的透明度（Transparent）
三、设置文本属性
1．格式（Format）：
（1）样式：段落（Paragraph），标题（Heading1）、„„预先格式化的（preformatted）
*预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现自动换行
（2）字体：Default Font
（3）大小：Size
（4）颜色：
（5）其它：加粗、倾斜
（6）对齐：
2．链接（Link）：链接到文件，链接到地址，*相关（Relate to）：文档（Document），站根目录（SiteRoot）
3．目标（Target）：打开链接的目标_blank、_self、_parent、_top
4．项目符号、编号和缩进
四、作业
根据示例网页，制作一个网页
Dreamweaver 教案三(两课时)
教学目的：掌握网页中图片的相关操作
教学重点：dreamweaver中设置图片的属性
教学难点： 图像处理软件的使用
一、复习引入 1．网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？
RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256╳256╳256=16777216种 颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显 示时就可能发生偏差，不能正常显示。这个范围我们称之为网页安全颜色范畴 2．网页中运用颜色原则l 切忌采用过多的颜色；
l 背景颜色不要太深；
l 要保持整个网页的色调统一；
l 要围绕网页主题选择颜色
二、网页中的图像格式 *BMP：位图格式 1． GIF：Graphics Interchange Format可交换的图像格式 特点： l 只支持256种颜色 l 支持透明效果 l 可以交错下载 l 可以实现动画效果 l 文件所占用空间小 l 不能支持渐变色彩 l 更改图片大小要从原文件改起 2． JPEG：Joint Photographic Experts Group联合摄影专家组文件格式 特点： l 支持24位图像 l 有损压缩 3． GIF与JPEG比较
三、插入图像 1． 插入图像：InsertàImage；对象面板 2． 图像 属性： l 宽（W）高（H）：默认为图片的大小，可以设置 其它尺寸，但图片会变形 l 源文件（Src）： l 对齐（align）： l 链接（Link）：链接到的图片 l 替代（Alt）：图像注释，当浏览器不能正常显 示图片时所出现的文字提示 l 地图（Map）：制作映射图 l 垂直边距（V space）：与上边界的距离 l 水平边距（H space）与左边界的距离 l 目标（Target）：当链接项有设置时发生作用 l 低品质源（Low Src）：低分辨率副本文件 l 边框（Border）： l 编辑（Edit）：启动图像处理软件来对图像进行 编辑 l 重设大小（Reset size）：当用其它工具修改了 图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项
四、使用图 像处理软件
1、转换图像格式：打开，另存为
2、更改图像尺寸：
3、更改图像品质：另存为
五、作业 l 下列文件均放于同一文件夹下： 1． 在网上寻找透明背景的GIF图片5张，JPEG图片5张，其中，GIF要有动画的至少一张，JPEG要有一 张风景的。2． 将找到的图片放置在背景为蓝色的页面上 3． 改变第一 张GIF图片的大小 4． 设置第二张GIF图片的替代文字为“试一试” 5． 设 置第三张GIF图片的链接为第三张JPEG图片 6． 设置第四张GIF图片的垂直边距为5，水平边距为9 7． 对第一张JPEG图片设置映射4个，分别链接到第二、三、四、五张JPEG图片 8． 运用图像处理软件，制作风景JPEG图片的低品质图片，并对网页中该风景图片设置低 品质源 l 不看电脑，写出下列RGB值对应什么颜色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF
Dreamweaver教案四(三课时)
教学目的：掌握dreamweaver中表格的应用 教学难点：表格对应的HTML代码
教学重点：表格的编辑
一、复习引入
1． 文字的定位：空 格、回车
2． 图片的定位：垂 直边距、水平边距
二、表格
1． 插入表格：插入（Insert）à表格（table），或者在对象面板
2． 行数（row）
3． 列数（column）
4． 边距（cell padding）：单元格中的内容与单元格边框之间的距离
5． 间距（cell spacing）：单元格之间的距离
6． 宽度（width）：可以是像素（pixel）或百分比为单位（percent）
7． 边框（boder）：
8． 属性面板：只有 在选定整个表格时才出现表格属性
9． 在表格中也可以 通过右击，调出的快捷菜单中选择表格来对表格进行设置
10． 清除行高和列宽按钮
11． 改变列宽单位按钮
12． 背景颜色：
13． 边框颜色：设置整个表格的格线颜色
14． 背景图像：
三、表格所对应的HTML代码
1．表格：
2．行：
3．列：
四、选定
1． 单击表格左上角 或边框线
2． 在表格内单击表 格任一处，右击，选择表格（table）à选定表格（select table）
3． 选择所有单元格
4． 在文档窗口的左 下角选择标记
5． 选定行
6． 选定单元格
五、表格的编辑
1． 表格的嵌套
在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。
2． 复制剪切粘贴
3． 插入行、列，删 除行列
4． 合并单元格，拆 分单元格
5． 改变行、列、表 格的大小：拖放，属性面板精确定义
6． 表格模板：命令（command）à格式化表格（format table）
六、导入表格数据
1． 文件导入导入表格数据
2． 数据文件
3． 定界符
4． 表格宽度
5． 单元格边距和间距
6． 格式化首行
7． 边框
七、学习网页制作的方法
1． 学习网页制作，要先模仿
2． 在浏览到合适的 网页时，用“另存为”保存，再用dreamweaver来打开
八、作业
1． 将数据文件1.txt转为表格
2． 模仿此页制作页面
Dreamweaver教案五(两课时)
教学目的： 掌握框架
教学难点： 框架的编辑
教学重点： 框架的HTML代码
一、复习引入
回忆：Frontpage中的框架应用
二、框架的应用
1． 重复出现在不同 网页文档中的元素：网页标题、导航栏等等
三、建立框架
1． 将对象面板切换 到框架页（Frame）
2． 插入不同的框架，一个区域对应于一个页面
3． 在框架中打开原 有网页：文件（File）à在框架中打开（Open in Frame）
四、保存框架
1． 选择文件（File）/保存所有框架（Save Frameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页
2． 保存时注意名称
五、框架编辑
1． 框架面板：窗口（Windows）à其它（Other）à框架（Frame）调出框架面板
2． 选定框架组：单 击整个框架组的边框；或在框架面板中单击整个框架的边框
3． 框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等
4． 拆分框架：按 Alt键，拖动边框；修改（Modify）à框架页（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）
*注意区别：插入一个新的框架与拆分框架的区别
5． 链接打开的目标
六、框架所对应的HTML代码
1． 框架组：
2． 通过设置：rows 或cols来设定是横的还是竖的，是顶部还是底部
3． 框架组属性： frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距
4． 框架项：
5． 框架属性：src 指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小
6． 无框架提示