Dreamweaver教学大纲.docx

1、Dreamweaver教学大纲网页制作（Dreamweaver）教学大纲第一部分 大纲说明 一、课程的性质和任务“网页制作基础教程”是中等职业学校计算机专业的一门专业课，其主要任务是使学生掌握网页制作的基础知识和基本技能，培养学生开发网站的能力，提高学生的职业技能和素质，为适应职业岗位和继续学习打下一定的基础。通过学习，学生能够达到如下的教学目标： 知道网站、网页的概念，能够确定网站的主题，画出网站结构草图； 了解Dreamweaver操作界面，能够创建网站地图； 了解各种网站和网页布局特点，能够利用表格或布局视图规划网页布局； 熟练掌握在网页中输入文字、修饰文字以及插入图片，更改背景的方法；

2、 熟练掌握各种超级链接的插入与修改，包括图片热区等； 掌握样式表的相关概念以及使用方法；掌握层和时间轴的相关概念以及使用方法； 掌握表单的相关概念以及使用方法，能编辑确认表单； 掌握Firework和Flash的操作方法，熟练掌握两个软件与Dreamweaver的整合使用方法； 熟练掌握网站的管理以及上传到因特网上的方法。二、预备知识在学习本课程之前，最好具备以下知识和能力：（1）文本操作，例如能够使用Word创建并编辑文件等。（2）因特网使用能力，例如网页的浏览，图片的下载等。（3）计算机网络的相关知识，例如知道服务器与客户机的关系等。三、教学重难点（一）重点内容本课程的重点内容是第2章“网

3、页的布局”、第3章“网页的编辑”和第4章“超链接的创建与管理”，在这三章中介绍了如何规划网页的布局，怎样创建图文并茂的网页以及通过超链接将各个网页连接起来。这三章是其他各章的基础，也是学习网页制作所必须熟练掌握的内容，在学习是要注意体现出这一点。（二）难点内容本课程的难点内容是第6章“层和时间轴”和第8章“图像和动画的制作与优化”。其中第6章的难点主要是层和时间轴这两个概念的理解，限于篇幅，教材并没有展开讨论。在学习中要通过操作联系去认真体会，必要时可以参考其他的资料。第8章的难点在于两个新软件的使用。在学习时要注意避开一些内容，仅仅涉及教材中介绍的相关知识即可，因为本教材的主要内容是网页的制

4、作，不是图像的优化和动画的制作。或者说，本章的难点是如何掌握Flash和Fireworks这两个软件学习的度。多操作，细体会，举一反三是学习本章的合适策略。四、教学方法建议本课程的教学采用课堂面授，及时上机操作并结合具体的课题制作任务进行教学，及时解决设计中遇到的实际问题，以具体操作带动软件的教学，以锻炼学生动手操作能力为主。根据中专学生情况，适当降低理论知识要求，做到深入浅出、通俗易懂。后期安排集中上机，系统地运用所学软件完成一个较规范的网站建设。五、教学内容处理及要求1Dreamweaver 网页制作基本内容INTERNET的基本知识，网页设计的内容和原则、Dreamweaver的特点和性

5、能、网页文件的基本操作、本地站点的建立、对象的插入、超链接的创建与管理、样式与行为、层与时间轴的使用、表单的设计与运用、Dreamweaver进行站点的规划与布局。2FLASH动画制作Flash 的工作环境与操作、Flash的基本概念、创建Flash对象、各种图形工具的使用、外部素材的导入、简单Flash动画的制作方法，制作与网页主题有关的网上素材。3FIREWORKS图象处理Fireworks的工作环境、Fireworks图形处理中的一些基本概念与常用参数、Fireworks图象与文字编辑、图像的基本操作、图像的蒙板、滤镜处理、图像的优化、切割图形、制作与网页主题有关的图像素材。六、课时分配

6、表章节课程内容总学时讲课实验备注1网站的建立422必做2网页的布局422必做3网页的编辑1024机动44超链接的创建与管理826必做5样式与行为624必做6层与时间轴624必做7表单的使用422必做8图像与动画的制作与优化1248必做9网页的管理422必做10网页的上传422选做综合利用Dreamweaver、Fireworks、Flash制作网页（教师提出要求，学生自己制作网站）3224机动8考核22必做总计962262机动12 注：以上课时分配仅供参考，教学中可根据教学的安排再做调整。 七、教学总课时、学分及考核方式 中职第二学期开设，本课程共96课时。学分：3学分。考核：课程结束时由教师

7、设计考核方案，学生根据方案对网站做相应的完善，最终的作品应符合网页的相关技术要求。学生成绩：考勤成绩20% 平时上课表现30% 网页设计作品50%八、主要参考书目网页制作基础教程（Dreamweaver 版）（电子工业出版社）作者：黄洪杰版次：2005年2月第1版2005年2月第1次印刷书号：ISBN7-121-00631-6九、大纲说明：本大纲适应各专业的中职生。第二部分 大纲正文第1章 使用Dreamweaver建立网站本章的教学目标为：（1）了解网页和网站的概念，特别是主页的概念；能够分析网站的结构。（2）了解Dreamweaver 的操作界面。（3）学会规划网站的结构；能够画出网站结构

8、图。（4）熟练掌握建立网站的方法。（5）能够创建网站地图；能够更改网页的标题。本章的教学建议：本章的教学核心是创建一个网站。这包括了解网站的相关概念，熟悉制作网站的工具，规划出网站结构草图，到最后创建出一个网站的全过程。对于网站、网页等概念性的东西，可以根据实际情况进行删减，毕竟对于计算机专业的学生来说，这些不是新的概念。而对于Dreamweaver操作界面的讲述需要花一些心思。怎样通过一个巧妙的例子，将Dreamweaver的操作特点讲清楚是一个难点，如果仅仅是依次介绍，就显得太枯燥了。本章还要向学生传达一个信息：制作网站前的准备工作与制作网站的操作同样重要，尤其是素材的搜集与网站结构草图的

9、规划。要认识到制作一个网站是一个复杂的体系工程，这与使用Word制作一个文档是存在区别的。对于具体的操作步骤，教材介绍的非常详细，建议让学习者按照课本自己操作。本章的教学内容：1.1网页与制作工具1.1.1认识网页简单地说，网页就是把文字、图形、声音、影片等多种媒体形式的信息，以及分布在因特网上的各种相关信息，相互链接起来而构成的一种信息表达方式。在浏览网站时看到的每个页面则是这本书中的一页，我们称之为“网页”。在进入网站后显示的第一个页页，我们称其为“主页”。主页就像一本书的目录，它是所有网页的索引页。通过单击主页上的超级链接，可以打开这个网站中的其他网页。网页中仅仅有文字内容是不够的，还需

10、要加入其他内容进行修饰，像图片、声音、动画等。有了这些内容的帮助，人们见到的网页才会色彩斑斓、妙趣横生。网站就是由一个个网页构成的。1.1.2 加入因特网大家庭个人主页是数字化的化身，通过它可以把个性和爱好表露出来。1.1.3 HTML语言HTML语言， Hyper Text Markup Language，即超文本标识语言。HTML语言是一种超文本标记语言，它用来描述某个事物应该如何合理地显示在计算机屏幕上。用文本文件编辑软件可以打开HTML文件或编辑HTML文件。显示HTML文件的内容必须借助Microsoft Internet Explorer或Netscape Communicator

11、等因特网浏览器。用HTML语言来编辑网页存在许多缺点：1.1.4网页制作工具网页制作软件可以实现主页制作者与HTML语言的分离，我们只需在编辑器中输入文本或图片，网页制作软件将帮助我们将这些文本或图片转换成相应的HTML语言代码。在众多网页制作软件中，FrontPage是一种比较简单的软件。除了Frontpage 以外，还有许多制作网页的软件，如Hotdog等，其中最著名的是Macromedia 公司的Dreamweaver，它和该公司的另外两个产品Flash（动画制作工具），Fireworks（图像编辑工具）一起称为“网络三剑客”。1.2使用Dreamweaver建立一个网站1.2.1 Dr

12、eamweaver的操作界面Dreamweaver MX是一种“所见即所得”的网页制作工具，它也是目前最常用的网页制作工具之一。单击任务栏上的，把鼠标指针指向“开始”菜单中的，再将鼠标指针移动到项上，最后单击子菜单中的，启动Dreamweaver MX。Dreamweaver MX，的“插入”面板共有12个独立的选项卡，在网页编辑的过程中，可通过单击面板上的按钮来为网页添加相应的元素，如图片、表格、框架、Flash等；“属性”面板则用于显示所选中的网页元素的属性，并可在属性面板上修改。如果觉得网页的显示区域太小，可以单击浮动面板左侧的，关闭浮动面板，此时该按钮变成，单击可再次打开浮动面板。Dr

13、eamweaver MX的其它面板都在窗口右半部分，并采用了展开与折叠功能，单击可以展开面板，同时该按钮变成状，单击它可以将面板折叠起来。用鼠标单击菜单栏上的“文件”，在弹出的菜单中选择“关闭”，可以关闭打开的网页。1.2.2 画出网站结构图为全面地展示一个主题，往往需要制作若干个网页，把这些网页互相链接起来，就构成了一个网站，也称为Web站点。在开始建立网站之前，首先要确定网站的主题，根据主题确定这个网站需要由多少个网页构成，以及这些网页之间的关联关系等画出结构图，这样不但可以帮助规划网站结构，使网站条理清楚、主题鲜明，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。1.2.3建

14、立一个网站在Dreamweaver MX工作窗口中，单击“站点”菜单中的“新建站点”命令，打开“未命名站点1的站点定义为”对话框。在“未命名站点1的站点定义为”对话框中，选中“基本”选项卡，在“您打算为您的站点起什么名字？”文本框中，输入新站点的名称，然后单击。然后选择是否需要使用服务器技术。接着选择在何处编辑网页，单击右侧的可以更改保存位置，也可以直接输入保存的位置。选择如何连接到远程服务器和打算将文件存储在服务器上的什么文件夹中选择是否让别人和你同时编辑同一个网页。最后单击，完成新建网站的操作，返回Dreamweaver MX工作窗口。1.2.4在网站中添加网页在浮动面板“文件”项的“站点

15、”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜单中选择“新建文件”，站点文件夹被展开，同时自动建立了一个名为“untitled.htm”的网页。1.2.5更改网页名称网页建立以后，名称栏中的“untitled.htm”处在选定状态，可直接输入网页文件名。1.3创建网站地图1.3.1创建网站地图创建网站地图可以规划和管理网页之间的关系，同时实现网页之间的导航。单击“站点”选项卡中的“展开/折叠”按钮，按住“站点地图”按钮，从弹出的菜单中单击“地图和文件”，打开“站点地图”窗口。在窗口右侧文件列表中找到 “index.htm”，用鼠标右键单击该文件名，在弹出的快捷菜单中单击“设为首

16、页”。在左侧窗口中单击“index.htm”网页文件图标，使其右边出现标志符号，拖动该标志到右侧窗口中的文件上。松开鼠标，网页文件图标出现在左侧窗口中“index.htm”图标的左下方，并与“index.htm”相连接。用同样的方法，使其他网页图标出现在左侧窗口中。1.3.2在网站地图中更改网页标题在“站点地图”窗口中双击网页文件图标，打开这个网页。在窗口顶端的“标题”栏中单击，将其中的“无标题文档”删除，输入网页的标题。单击“文件”菜单中的“保存”命令，保存所做的修改。在浮动面板“文件”项的“站点”选项卡中，单击“展开/折叠”按钮，再次打开“站点地图”窗口。单击“视图”菜单中的“显示网页标题

17、”命令。1.3.3退出Dreamweaver 单击“文件”菜单中的“关闭”命令，或者单击网页编辑窗口右上角的，关闭这些网页窗口。单击Dreamweaver MX工作窗口右上角的，退出Dreamweaver MX。第2章 网页的布局本章的教学目标为：（1）知道网页设计中的几种常见布局和风格。（2）熟练掌握插入表格，对表格进行设置的方法。（3）知道布局视图；能够用布局视图完成网页的布局。（4）掌握表格布局与布局视图的区别。本章的教学建议：本章的重点是学习网页的风格和布局，这要比具体的操作重要的多。建议在学习的过程中熟练讲出课本中介绍的几种布局结构，并举出相应的实例，最好这些例子与课本上的例子不一样

18、。网页制作的技能，作为纯技术层面，本教材要求并不高。而要做出一个优秀的网站，重要的一点是对网页的感觉，也就是网页的布局、颜色的搭配、文字的大小等等，这些素养的培养需要多观摩优秀的网页，吸取其精华。教材中用大量的篇幅介绍相关内容的寓意就在于此，在教学设计上要体现出这一点。作为操作技能，本章主要涉及表格和布局视图。由于Word等软件的使用，表格应该不是难点。所以要对布局视图着重介绍，最好通过比较使学生认识到表格布局与布局视图的区别。本章的教学内容：2.1网页布局实例2.1.1网页的风格针对不同的网页风格，大体可以将网页分为两大类：商业网页和个人网页。商业网站一般都有比较统一的布局设计，而个人主页由

19、于内容专一，不可能象商业网站那样内容丰富、信息量大。但恰恰因为这个原因。个人主页的形式更灵活，更容易创造出美感。主页风格没有优劣之分，网站的性质与风格有着根本的区别。2.1.2网页布局实例1. “厂”字型结构，这种结构的特点是内容清晰，一目了然。网页最顶端是徽标和图片（广告）栏，下半部分的左边是导航链接，右边是信息发布区。这种结构非常常见。2. “同”字型结构，这是大型网站最常用的一种结构，特点是超链接多、信息量大。网站的顶端是徽标和图片（广告）栏，下部分分为三列，或者更多。两边的两列区域比较小，一般是导航超链接和小型图片广告等，中间是网站的主要内容，最下面是网站的版权信息等。3.标题正文型结

20、构，这种结构顶端是网站标识和标题，下面是网页正文。内容非常简单。4.分栏型结构，这种结构一般分为左右（或上下）两栏，也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页，导航链接栏的内容不会发生变化。在WEB型的电子邮箱中多见这种结构。5. Flash型结构，这种结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。6.封面型结构，这种结构往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作，与Flash型不同，这种结构并不是在Flash

21、中完成的，而是在网页制作软件中完成的。2.1.3 网页布局注意事项1.平衡性：2.对称性3.对比性4.疏密度5.反复性6.韵律感2.1.4画出网页布局草图确定网页布局。画出网页布局草图。2.2使用表格2.2.1插入表格单击“插入”面板的按钮，输入行数和列数。2.2.2插入、删除表格的行、列与单元格单击表格使光标出现在某行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单 ，在下一级菜单中单击“插入行或列”，选中“行”，在“行数”右端的栏位中输入1，然后选中“所选之下”。单击 ，在图片所在行的下面将插入一行。插入列与插入行方法相同。单击鼠标，使光标出现在该行中。然后单

22、击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单 ，在下一级菜单中单击“删除行”，该行被删除。2.2.3合并与拆分单元格拖动鼠标指针选中多个单元格，移动鼠标指针到“属性”面板上，单击“合并单元格”按钮，单元格被合并。单击鼠标，使光标出现在单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮，选中“拆分为行”，在“行数”右端的栏位中输入“2”。单击 ，该单元格被分为两个单元格。2.2.4表格的嵌套单击鼠标，将光标出现在单元格中，单击“插入”面板的按钮，打开“插入表格”对话框，输入行列数，单击。2.2.5使用“表格属性”对话框对表格进行设置，主要是在属性面板中进行，注

23、意的是选取表格与选取单元格时，属性面板的内容是不同的。在该属性面板中，能够设置框线的宽度、单元格间距，以及背景色等。2.2.6设置表格框线更改表格框线的宽度为0，可以发现表格的框线变成虚线，这样在浏览器中，表格将被隐藏。2.3布局视图2.3.1布局视图工具栏布局视图是Dreamweaver MX增强的一个功能，使用它可以非常方便地对网页布局进行规划。在完成规划后，还可以返回到表格这一大家熟悉的形式上。熟悉掌握它，非常有益。在插入面板中，单击“布局”选项卡，单击按钮，切换到布局视图。2.3.2使用布局视图规划网页布局单击绘制布局表格按钮，编辑区顶端出现“布局视图”几个字。移动鼠标到编辑区，指针变

24、成状，按住鼠标指针拖动，画出一个绿色的表格。用同样的方法，再画布局表格。在插入面板中单击绘制布局单元格按钮，移动鼠标指针，画出单元格。第3章 编辑网页本章的教学目标为：（1）了解Dreamweaver中面板的应用特点。（2）熟练掌握在网页中输入文字，设置文字效果的方法。（3）了解图片的相关知识。（4）了解图片在网页制作中的作用。（5）掌握为网页设置背景色和背景图片的方法。（6）掌握插入图片修饰网页的方法。本章的教学建议：本章的教学内容主要是文字与图片的相关设置。由于操作界面与Word等学生熟悉的软件不同，学生在操作上可能会有所不习惯，在教学中要注意以下几个问题：1.换行操作；2.添加中文字体；

25、3.字号的大小关系；4.行首空两格的操作；5.水平线的颜色更改。以上五个问题在操作中会使学生感到不方便，要通过练习进行加强，尽快熟悉Dreamweaver的操作特点，以免影响下面的学习。教材在讲述插入图片时，着重讲述了将图片保存在当前网站的方法。这是网站管理的内容，要使学习者认识到这种操作的重要性，以免造成文件增多而产生的麻烦。本章的教学内容：3.1字体与段落的设置3.1.1字体与字号在编辑窗口中输入文字的过程中， Dreamweaver默认的段间距比较大。用键盘操作换行有两种方法：按Enter键或按Enter+Shift组合键。按Enter键，换行的行距较大。一般换行使用Enter+Shif

26、t组合键，这样换行才是正常行距。在设置字体之前，应该先将中文字体添加到“属性面板” 字体下拉列表框中。在Dreamweaver中选择文字，然后，在“属性面板”中选择字体和字号。 文字字号的下拉选框有无、1、2、3、4、5、6、7、+1、+2、+3、+4、+5、+6、+7、-1、-2、-3、-4、-5、-6、-7等选项。无表示使用浏览器默认字号（一般为3），单独的数字表示字号，数字前有+号和-号表示相对于默认字号的字号大小。例如，5表示5号字，+3表示默认字号大小加上3，-2表示默认字号大小减去2。3.1.2文字的对齐方式选中整个表格，将属性面板中的“填充”值更改为10，这样各个单元格间的距离更

27、改为10像素；将“间距”值更改为10，这样表格中的文字与表格框线的距离变成10像素。拖动鼠标指针,选中表格中的各个单元格,单击属性面板“水平”框右边的，在弹出的下拉菜单内中选择“居中对齐”，单元格中文字在单元格中居中显示。拖动鼠标指针选中表格中的所有文字，在属性面板中单击“文本缩进”按钮， 将文字移动到表格中央。3.1.3文字的风格与颜色选中文字，在属性面板中单击，打开颜色板，选择颜色；单击，将文字设为加粗。3.1.4段落缩进Dreamweaver要实现在段首空两个格，应该切换到代码编辑区，在段首文字前输入代码 （注意不要漏掉；）。注意该代码只代表一个半角字符，要空出两个汉字，需要添

28、加四个代码。3.2美化网页3.2.1插入水平线单击插入面板的按钮，网页上自动插入一条水平线。当用鼠标选取水平线时，窗口下面的属性面板显示水平线的相关内容，在该面板中可以修改水平线的宽度和高度。选中水平线，然后在水平线上右击鼠标，选择“编辑标签”命令，在左侧窗口选择“浏览器特定的”，在右侧窗口选择一种颜色，单击，可以更改水平线颜色。选中水平线，按下键盘上的“Delete”键即可删除水平线。3.2.2插入图片因特网上应用最广泛的图片格式有两种：GIF文件和JPEG文件。JPG/JPEGGIF色彩真彩色16色、256色特殊功能无透明背景、动画压缩是否有损失有损压缩无损压缩适合情景颜色丰富，有连续的色

29、调，一般表现真实的事物颜色有限，主要以漫画图案或线条为主。一般表现建筑结构图或手绘图。近几年，PNG格式文件又开始流行。它的特点是：只需下载图像的1/64，就可以在网页上显示一个低分辨率的图片，随着图片信息的下载，图片也越来越清晰。对于网络日益拥挤的今天，这种图片格式显然更适应当前的形式。单击对象面板上的 按钮，弹出“选择图像源”对话框，选择图像文件，单击“确认”，将图片插入网页。3.2.3设置图片单击图片，图片被一个黑框框住，同时出现三个小的实心黑框。鼠标指针指向图片右下角，当鼠标指针变成双向箭头时，拖动鼠标，更改图片的大小。在单击图片时，属性面板同时被打开。在“替代”框中输入替代文字。这样

30、，当鼠标在浏览器中移动到该图片上时，会显示替代文字。3.2.4添加网页背景在“页面属性”对话框中，单击文本右边的，将文字设置为黑色；单击背景右边的，选择一种颜色，将网页背景设置成该颜色。在“页面属性”对话框中，单击背景图像框右边的，找到存放图像的文件夹，选中要使用的图片文件，单击“确认”，单击，设置背景图片。3.2.5设置表格背景拖动鼠标选中嵌套表格中的单元格，单击属性面板上背景颜色后面的，在弹出的调色板中选择一种颜色，单元格背景颜色被改变。第4章 超链接的创建与管理本章的教学目标为：（1）掌握超链接的作用。（2）理解热区文本与热区图片的含义。（3）能够熟练掌握文本超链接的建立与修改。（4）掌握设置电子邮件超链接的方法。（5）熟练掌握设置图片超链接以及图片热区超链接的方法。（6）了解模板的作用；熟练掌握网页模板的设置与使用方法。（7）知道书签的作用，能够设置书签。本章的教学建议：本章是全书的核心，即使内容很少，颜色难看，布局混乱，只要存在超链接，就可以将其称为网页，否则就不能称其为真正意义上的网页，最多只能算是一个多媒体演示文稿。一定要讲清楚超链接的各种分类，与之相对应的应用也要练习清楚，其中的重点是锚记超链接。有的学