Dreamweaver教学大纲.doc

网页制作（Dreamweaver）教学大纲第一部分 大纲说明 一、课程的性质和任务“网页制作基础教程”是中等职业学校计算机专业的一门专业课，其主要任务是使学生掌握网页制作的基础知识和基本技能，培养学生开发网站的能力，提高学生的职业技能和素质，为适应职业岗位和继续学习打下一定的基础。通过学习，学生能够达到如下的教学目标： 知道网站、网页的概念，能够确定网站的主题，画出网站结构草图； 了解Dreamweaver操作界面，能够创建网站地图； 了解各种网站和网页布局特点，能够利用表格或布局视图规划网页布局； 熟练掌握在网页中输入文字、修饰文字以及插入图片，更改背景的方法； 熟练掌握各种超级链接的插入与修改，包括图片热区等； 掌握样式表的相关概念以及使用方法；掌握层和时间轴的相关概念以及使用方法； 掌握表单的相关概念以及使用方法，能编辑确认表单； 掌握Firework和Flash的操作方法，熟练掌握两个软件与Dreamweaver的整合使用方法； 熟练掌握网站的管理以及上传到因特网上的方法。二、预备知识在学习本课程之前，最好具备以下知识和能力：（1）文本操作，例如能够使用Word创建并编辑文件等。（2）因特网使用能力，例如网页的浏览，图片的下载等。（3）计算机网络的相关知识，例如知道服务器与客户机的关系等。三、教学重难点（一）重点内容本课程的重点内容是第2章“网页的布局”、第3章“网页的编辑”和第4章“超链接的创建与管理”，在这三章中介绍了如何规划网页的布局，怎样创建图文并茂的网页以及通过超链接将各个网页连接起来。这三章是其他各章的基础，也是学习网页制作所必须熟练掌握的内容，在学习是要注意体现出这一点。（二）难点内容本课程的难点内容是第6章“层和时间轴”和第8章“图像和动画的制作与优化”。其中第6章的难点主要是层和时间轴这两个概念的理解，限于篇幅，教材并没有展开讨论。在学习中要通过操作联系去认真体会，必要时可以参考其他的资料。第8章的难点在于两个新软件的使用。在学习时要注意避开一些内容，仅仅涉及教材中介绍的相关知识即可，因为本教材的主要内容是网页的制作，不是图像的优化和动画的制作。或者说，本章的难点是如何掌握Flash和Fireworks这两个软件学习的度。多操作，细体会，举一反三是学习本章的合适策略。四、教学方法建议本课程的教学采用课堂面授，及时上机操作并结合具体的课题制作任务进行教学，及时解决设计中遇到的实际问题，以具体操作带动软件的教学，以锻炼学生动手操作能力为主。根据中专学生情况，适当降低理论知识要求，做到深入浅出、通俗易懂。后期安排集中上机，系统地运用所学软件完成一个较规范的网站建设。五、教学内容处理及要求1Dreamweaver 网页制作基本内容INTERNET的基本知识，网页设计的内容和原则、Dreamweaver的特点和性能、网页文件的基本操作、本地站点的建立、对象的插入、超链接的创建与管理、样式与行为、层与时间轴的使用、表单的设计与运用、Dreamweaver进行站点的规划与布局。2FLASH动画制作Flash 的工作环境与操作、Flash的基本概念、创建Flash对象、各种图形工具的使用、外部素材的导入、简单Flash动画的制作方法，制作与网页主题有关的网上素材。3FIREWORKS图象处理Fireworks的工作环境、Fireworks图形处理中的一些基本概念与常用参数、Fireworks图象与文字编辑、图像的基本操作、图像的蒙板、滤镜处理、图像的优化、切割图形、制作与网页主题有关的图像素材。六、课时分配表章节课程内容总学时讲课实验备注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学分。考核：课程结束时由教师设计考核方案，学生根据方案对网站做相应的完善，最终的作品应符合网页的相关技术要求。学生成绩：考勤成绩20% 平时上课表现30% 网页设计作品50%八、主要参考书目网页制作基础教程（Dreamweaver 版）（电子工业出版社）作者：黄洪杰版次：2005年2月第1版2005年2月第1次印刷书号：ISBN7-121-00631-6九、大纲说明：本大纲适应各专业的中职生。第二部分 大纲正文第1章 使用Dreamweaver建立网站本章的教学目标为：（1）了解网页和网站的概念，特别是主页的概念；能够分析网站的结构。（2）了解Dreamweaver 的操作界面。（3）学会规划网站的结构；能够画出网站结构图。（4）熟练掌握建立网站的方法。（5）能够创建网站地图；能够更改网页的标题。本章的教学建议：本章的教学核心是创建一个网站。这包括了解网站的相关概念，熟悉制作网站的工具，规划出网站结构草图，到最后创建出一个网站的全过程。对于网站、网页等概念性的东西，可以根据实际情况进行删减，毕竟对于计算机专业的学生来说，这些不是新的概念。而对于Dreamweaver操作界面的讲述需要花一些心思。怎样通过一个巧妙的例子，将Dreamweaver的操作特点讲清楚是一个难点，如果仅仅是依次介绍，就显得太枯燥了。本章还要向学生传达一个信息：制作网站前的准备工作与制作网站的操作同样重要，尤其是素材的搜集与网站结构草图的规划。要认识到制作一个网站是一个复杂的体系工程，这与使用Word制作一个文档是存在区别的。对于具体的操作步骤，教材介绍的非常详细，建议让学习者按照课本自己操作。本章的教学内容：1.1网页与制作工具1.1.1认识网页简单地说，网页就是把文字、图形、声音、影片等多种媒体形式的信息，以及分布在因特网上的各种相关信息，相互链接起来而构成的一种信息表达方式。在浏览网站时看到的每个页面则是这本书中的一页，我们称之为“网页”。在进入网站后显示的第一个页页，我们称其为“主页”。主页就像一本书的目录，它是所有网页的索引页。通过单击主页上的超级链接，可以打开这个网站中的其他网页。网页中仅仅有文字内容是不够的，还需要加入其他内容进行修饰，像图片、声音、动画等。有了这些内容的帮助，人们见到的网页才会色彩斑斓、妙趣横生。网站就是由一个个网页构成的。1.1.2 加入因特网大家庭个人主页是数字化的化身，通过它可以把个性和爱好表露出来。1.1.3 HTML语言HTML语言， Hyper Text Markup Language，即超文本标识语言。HTML语言是一种超文本标记语言，它用来描述某个事物应该如何合理地显示在计算机屏幕上。用文本文件编辑软件可以打开HTML文件或编辑HTML文件。显示HTML文件的内容必须借助Microsoft Internet Explorer或Netscape Communicator等因特网浏览器。用HTML语言来编辑网页存在许多缺点：1.1.4网页制作工具网页制作软件可以实现主页制作者与HTML语言的分离，我们只需在编辑器中输入文本或图片，网页制作软件将帮助我们将这些文本或图片转换成相应的HTML语言代码。在众多网页制作软件中，FrontPage是一种比较简单的软件。除了Frontpage 以外，还有许多制作网页的软件，如Hotdog等，其中最著名的是Macromedia 公司的Dreamweaver，它和该公司的另外两个产品Flash（动画制作工具），Fireworks（图像编辑工具）一起称为“网络三剑客”。1.2使用Dreamweaver建立一个网站1.2.1 Dreamweaver的操作界面Dreamweaver MX是一种“所见即所得”的网页制作工具，它也是目前最常用的网页制作工具之一。单击任务栏上的，把鼠标指针指向“开始”菜单中的，再将鼠标指针移动到项上，最后单击子菜单中的，启动Dreamweaver MX。Dreamweaver MX，的“插入”面板共有12个独立的选项卡，在网页编辑的过程中，可通过单击面板上的按钮来为网页添加相应的元素，如图片、表格、框架、Flash等；“属性”面板则用于显示所选中的网页元素的属性，并可在属性面板上修改。如果觉得网页的显示区域太小，可以单击浮动面板左侧的，关闭浮动面板，此时该按钮变成，单击可再次打开浮动面板。Dreamweaver MX的其它面板都在窗口右半部分，并采用了展开与折叠功能，单击可以展开面板，同时该按钮变成状，单击它可以将面板折叠起来。用鼠标单击菜单栏上的“文件”，在弹出的菜单中选择“关闭”，可以关闭打开的网页。1.2.2 画出网站结构图为全面地展示一个主题，往往需要制作若干个网页，把这些网页互相链接起来，就构成了一个网站，也称为Web站点。在开始建立网站之前，首先要确定网站的主题，根据主题确定这个网站需要由多少个网页构成，以及这些网页之间的关联关系等画出结构图，这样不但可以帮助规划网站结构，使网站条理清楚、主题鲜明，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。1.2.3建立一个网站在Dreamweaver MX工作窗口中，单击“站点”菜单中的“新建站点”命令，打开“未命名站点1的站点定义为”对话框。在“未命名站点1的站点定义为”对话框中，选中“基本”选项卡，在“您打算为您的站点起什么名字？”文本框中，输入新站点的名称，然后单击。然后选择是否需要使用服务器技术。接着选择在何处编辑网页，单击右侧的可以更改保存位置，也可以直接输入保存的位置。选择如何连接到远程服务器和打算将文件存储在服务器上的什么文件夹中选择是否让别人和你同时编辑同一个网页。最后单击，完成新建网站的操作，返回Dreamweaver MX工作窗口。1.2.4在网站中添加网页在浮动面板“文件”项的“站点”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜单中选择“新建文件”，站点文件夹被展开，同时自动建立了一个名为“untitled.htm”的网页。1.2.5更改网页名称网页建立以后，名称栏中的“untitled.htm”处在选定状态，可直接输入网页文件名。1.3创建网站地图1.3.1创建网站地图创建网站地图可以规划和管理网页之间的关系，同时实现网页之间的导航。单击“站点”选项卡中的“展开/折叠”按钮，按住“站点地图”按钮，从弹出的菜单中单击“地图和文件”，打开“站点地图”窗口。在窗口右侧文件列表中找到 “index.htm”，用鼠标右键单击该文件名，在弹出的快捷菜单中单击“设为首页”。在左侧窗口中单击“index.htm”网页文件图标，使其右边出现标志符号，拖动该标志到右侧窗口中的文件上。松开鼠标，网页文件图标出现在左侧窗口中“index.htm”图标的左下方，并与“index.htm”相连接。用同样的方法，使其他网页图标出现在左侧窗口中。1.3.2在网站地图中更改网页标题在“站点地图”窗口中双击网页文件图标，打开这个网页。在窗口顶端的“标题”栏中单击，将其中的“无标题文档”删除，输入网页的标题。单击“文件”菜单中的“保存”命令，保存所做的修改。在浮动面板“文件”项的“站点”选项卡中，单击“展开/折叠”按钮，再次打开“站点地图”窗口。单击“视图”菜单中的“显示网页标题”命令。1.3.3退出Dreamweaver 单击“文件”菜单中的“关闭”命令，或者单击网页编辑窗口右上角的，关闭这些网页窗口。单击Dreamweaver MX工作窗口右上角的，退出Dreamweaver MX。第2章 网页的布局本章的教学目标为：（1）知道网页设计中的几种常见布局和风格。（2）熟练掌握插入表格，对表格进行设置的方法。（3）知道布局视图；能够用布局视图完成网页的布局。（4）掌握表格布局与布局视图的区别。本章的教学建议：本章的重点是学习网页的风格和布局，这要比具体的操作重要的多。建议在学习的过程中熟练讲出课本中介绍的几种布局结构，并举出相应的实例，最好这些例子与课本上的例子不一样。网页制作的技能，作为纯技术层面，本教材要求并不高。而要做出一个优秀的网站，重要的一点是对网页的感觉，也就是网页的布局、颜色的搭配、文字的大小等等，这些素养的培养需要多观摩优秀的网页，吸取其精华。教材中用大量的篇幅介绍相关内容的寓意就在于此，在教学设计上要体现出这一点。作为操作技能，本章主要涉及表格和布局视图。由于Word等软件的使用，表格应该不是难点。所以要对布局视图着重介绍，最好通过比较使学生认识到表格布局与布局视图的区别。本章的教学内容：2.1网页布局实例2.1.1网页的风格针对不同的网页风格，大体可以将网页分为两大类：商业网页和个人网页。商业网站一般都有比较统一的布局设计，而个人主页由于内容专一，不可能象商业网站那样内容丰富、信息量大。但恰恰因为这个原因。个人主页的形式更灵活，更容易创造出美感。主页风格没有优劣之分，网站的性质与风格有着根本的区别。2.1.2网页布局实例1. “厂”字型结构，这种结构的特点是内容清晰，一目了然。网页最顶端是徽标和图片（广告）栏，下半部分的左边是导航链接，右边是信息发布区。这种结构非常常见。2. “同”字型结构，这是大型网站最常用的一种结构，特点是超链接多、信息量大。网站的顶端是徽标和图片（广告）栏，下部分分为三列，或者更多。两边的两列区域比较小，一般是导航超链接和小型图片广告等，中间是网站的主要内容，最下面是网站的版权信息等。3.标题正文型结构，这种结构顶端是网站标识和标题，下面是网页正文。内容非常简单。4.分栏型结构，这种结构一般分为左右（或上下）两栏，也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页，导航链接栏的内容不会发生变化。在WEB型的电子邮箱中多见这种结构。5. Flash型结构，这种结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。6.封面型结构，这种结构往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作，与Flash型不同，这种结构并不是在Flash中完成的，而是在网页制作软件中完成的。2.1.3 网页布局注意事项1.平衡性：2.对称性3.对比性4.疏密度5.反复性6.韵律感2.1.4画出网页布局草图确定网页布局。画出网页布局草图。2.2使用表格2.2.1插入表格单击“插入”面板的按钮，输入行数和列数。2.2.2插入、删除表格的行、列与单元格单击表格使光标出现在某行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单 ，在下一级菜单中单击“插入行或列”，选中“行”，在“行数”右端的栏位中输入1，然后选中“所选之下”。单击 ，在图片所在行的下面将插入一行。插入列与插入行方法相同。单击鼠标，使光标出现在该行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单 ，在下一级菜单中单击“删除行”，该行被删除。2.2.3合并与拆分单元格拖动鼠标指针选中多个单元格，移动鼠标指针到“属性”面板上，单击“合并单元格”按钮，单元格被合并。单击鼠标，使光标出现在单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮，选中“拆分为行”，在“行数”右端的栏位中输入“2”。单击 ，该单元格被分为两个单元格。2.2.4表格的嵌套单击鼠标，将光标出现在单元格中，单击“插入”面板的按钮，打开“插入表格”对话框，输入行列数，单击。2.2.5使用“表格属性”对话框对表格进行设置，主要是在属性面板中进行，注意的是选取表格与选取单元格时，属性面板的内容是不同的。在该属性面板中，能够设置框线的宽度、单元格间距，以及背景色等。2.2.6设置表格框线更改表格框线的宽度为0，可以发现表格的框线变成虚线，这样在浏览器中，表格将被隐藏。2.3布局视图2.3.1布局视图工具栏布局视图是Dreamweaver MX增强的一个功能，使用它可以非常方便地对网页布局进行规划。在完成规划后，还可以返回到表格这一大家熟悉的形式上。熟悉掌握它，非常有益。在插入面板中，单击“布局”选项卡，单击按钮，切换到布局视图。2.3.2使用布局视图规划网页布局单击绘制布局表格按钮，编辑区顶端出现“布局视图”几个字。移动鼠标到编辑区，指针变成状，按住鼠标指针拖动，画出一个绿色的表格。用同样的方法，再画布局表格。在插入面板中单击绘制布局单元格按钮，移动鼠标指针，画出单元格。第3章 编辑网页本章的教学目标为：（1）了解Dreamweaver中面板的应用特点。（2）熟练掌握在网页中输入文字，设置文字效果的方法。（3）了解图片的相关知识。（4）了解图片在网页制作中的作用。（5）掌握为网页设置背景色和背景图片的方法。（6）掌握插入图片修饰网页的方法。本章的教学建议：本章的教学内容主要是文字与图片的相关设置。由于操作界面与Word等学生熟悉的软件不同，学生在操作上可能会有所不习惯，在教学中要注意以下几个问题：1.换行操作；2.添加中文字体；3.字号的大小关系；4.行首空两格的操作；5.水平线的颜色更改。以上五个问题在操作中会使学生感到不方便，要通过练习进行加强，尽快熟悉Dreamweaver的操作特点，以免影响下面的学习。教材在讲述插入图片时，着重讲述了将图片保存在当前网站的方法。这是网站管理的内容，要使学习者认识到这种操作的重要性，以免造成文件增多而产生的麻烦。本章的教学内容：3.1字体与段落的设置3.1.1字体与字号在编辑窗口中输入文字的过程中， Dreamweaver默认的段间距比较大。用键盘操作换行有两种方法：按Enter键或按Enter+Shift组合键。按Enter键，换行的行距较大。一般换行使用Enter+Shift组合键，这样换行才是正常行距。在设置字体之前，应该先将中文字体添加到“属性面板” 字体下拉列表框中。在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，这样各个单元格间的距离更改为10像素；将“间距”值更改为10，这样表格中的文字与表格框线的距离变成10像素。拖动鼠标指针,选中表格中的各个单元格,单击属性面板“水平”框右边的，在弹出的下拉菜单内中选择“居中对齐”，单元格中文字在单元格中居中显示。拖动鼠标指针选中表格中的所有文字，在属性面板中单击“文本缩进”按钮， 将文字移动到表格中央。3.1.3文字的风格与颜色选中文字，在属性面板中单击，打开颜色板，选择颜色；单击，将文字设为加粗。3.1.4段落缩进Dreamweaver要实现在段首空两个格，应该切换到代码编辑区，在段首文字前输入代码 （注意不要漏掉；）。注意该代码只代表一个半角字符，要空出两个汉字，需要添加四个代码。3.2美化网页3.2.1插入水平线单击插入面板的按钮，网页上自动插入一条水平线。当用鼠标选取水平线时，窗口下面的属性面板显示水平线的相关内容，在该面板中可以修改水平线的宽度和高度。选中水平线，然后在水平线上右击鼠标，选择“编辑标签”命令，在左侧窗口选择“浏览器特定的”，在右侧窗口选择一种颜色，单击，可以更改水平线颜色。选中水平线，按下键盘上的“Delete”键即可删除水平线。3.2.2插入图片因特网上应用最广泛的图片格式有两种：GIF文件和JPEG文件。JPG/JPEGGIF色彩真彩色16色、256色特殊功能无透明背景、动画压缩是否有损失有损压缩无损压缩适合情景颜色丰富，有连续的色调，一般表现真实的事物颜色有限，主要以漫画图案或线条为主。一般表现建筑结构图或手绘图。近几年，PNG格式文件又开始流行。它的特点是：只需下载图像的1/64，就可以在网页上显示一个低分辨率的图片，随着图片信息的下载，图片也越来越清晰。对于网络日益拥挤的今天，这种图片格式显然更适应当前的形式。单击对象面板上的 按钮，弹出“选择图像源”对话框，选择图像文件，单击“确认”，将图片插入网页。3.2.3设置图片单击图片，图片被一个黑框框住，同时出现三个小的实心黑框。鼠标指针指向图片右下角，当鼠标指针变成双向箭头时，拖动鼠标，更改图片的大小。在单击图片时，属性面板同时被打开。在“替代”框中输入替代文字。这样，当鼠标在浏览器中移动到该图片上时，会显示替代文字。3.2.4添加网页背景在“页面属性”对话框中，单击文本右边的，将文字设置为黑色；单击背景右边的，选择一种颜色，将网页背景设置成该颜色。在“页面属性”对话框中，单击背景图像框右边的，找到存放图像的文件夹，选中要使用的图片文件，单击“确认”，单击，设置背景图片。3.2.5设置表格背景拖动鼠标选中嵌套表格中的单元格，单击属性面板上背景颜色后面的，在弹出的调色板中选择一种颜色，单元格背景颜色被改变。第4章 超链接的创建与管理本章的教学目标为：（1）掌握超链接的作用。（2）理解热区文本与热区图片的含义。（3）能够熟练掌握文本超链接的建立与修改。（4）掌握设置电子邮件超链接的方法。（5）熟练掌握设置图片超链接以及图片热区超链接的方法。（6）了解模板的作用；熟练掌握网页模板的设置与使用方法。（7）知道书签的作用，能够设置书签。本章的教学建议：本章是全书的核心，即使内容很少，颜色难看，布局混乱，只要存在超链接，就可以将其称为网页，否则就不能称其为真正意义上的网页，最多只能算是一个多媒体演示文稿。一定要讲清楚超链接的各种分类，与之相对应的应用也要练习清楚，其中的重点是锚记超链接。有的学习者可能没有接触过锚记超链接，未必能理解其中的含义，最好先浏览因特网上的实例，然后再由学生进行练习。建立超链接的方法要介绍清楚，在何种情况下用哪一种方法比较合适，最好由学习者来总结，这对于学习者归纳学习有很大帮助。本章的第4节介绍了布局模板的建立与应用，这是难点之一。因为大多数网页采用同一布局，所以使用布局模板可以减少工作量，这是它存在的意义，但为什么教材在此处讲述布局模板呢？值得学习者深思。另外，使用模板时，必须要插入可编辑区域也值得注意。本章的教学内容：4.1创建文本超链接按照链接的范围，超链接可以分为内部超链接、外部超链接和锚记超链接。内部超链接是指打开的超链接对象在本网站中；外部超链接是指打开的超链接对象在WWW其它网站中；而锚记超链接可以链接到同一网页中的不同位置，也就是书签。按照建立超链接的对象不同，可以分为文本超链接和图片超链接。4.1.1建立网站内文本超链接在网页中选取热区文本。单击“属性”面板中的“浏览文件”按钮，打开“选择文件”对话框，选择网页文件单击“确认”。还可以使用拖拽的方法，选中热区文字以后，在属性面板中单击锚记标记，拖拽到右面“文件”面板中的网页上，松开鼠标，完成超链接的建立。4.1.2创建网站外文本超链接首先选中热区文本，然后在“属性”面板的“链接”框中输入因特网地址。4.1.3创建电子邮件超链接电子邮件超链接为浏览者与网页所有者之间架起沟通的桥梁。浏览者只需单击电子邮件超链接，就可以打开电子邮件编写软件，并且自动输入电子邮件地址，非常方便。在网页中选择热区文本。单击菜单栏上的“插入”，在弹出的下一级子菜单中选择“电子邮件超链接”,打开“电子邮件超链接”对话框，在“E-mail”框中输入网页制作者的电子邮件地址，单击。直接在“属性面板”的“链接” 框中输入：mailto: 电子邮件地址，也可以达到同样的效果，注意“mailto:”与电子邮件地址之间不能有空格。4.1.4修改超链接在编辑窗口中选中错误超链接的热区文本，然后在“属性面板”的“链接”文本框中可以进行修改，完成后用鼠标在任意区域单击即可。也可以单击“修改”菜单，在弹出的菜单中单击“更改链接”命令，最后在“选择文件”对话框中重新选择链接的文件，单击“确认”按钮完成修改。4.1.5另开一个窗口超链接在建立超链接以后，在属性面板中单击目标右边的，在下拉菜单中选择“_blank”，然后将网页保存。4.2创建图片超链接4.2.1创建整个图片超链接选中图片，单击“属性”面板中的“浏览文件”按钮，打开“选择文件”对话框，选择网页文件单击“确认”，这样就为图片文件建立了超链接。4.2.2创建图片热区超链接选中整个图片，用鼠标单击“属性面板”的“矩形热点工具”按钮，在图片上拖动鼠标指针，划一个虚框，可以发现图片被选区域变虚。在“属性”面板中单击链接框右端的“浏览文件”按钮，打开“选择文件”对话框。在“选择文件”对话框中选择要链接的网页。4.3使用Flash动态文本超链接4.3.1使用Flash文本创建超链接单击“插入对象”面板中“媒体”选项卡的按钮，打开“插入Flash文本”对话框，输入文字，选择字体，字体大小。单击“转滚颜色”右边的，在调色板中选择蓝色为动态效果颜色，单击“链接”框右边的“浏览”按钮，打开“选择文件”对话框。在该对话框中，选择文件，单击“确定”按钮。这样单击Flash 文本将打开该网页。在“另存为”框中输入Flash文件名称，注意文件名不能为中文，存放路径也不能有中文，文件扩展名为:.swf，最后单击。4.3.2使用Flash按钮创建超链接在Dreamweaver中单击“插入对象”面板中“媒体”选项卡的按钮，打开“插入Flash按钮”对话框，设置按钮样式，在按钮文本框中输入按钮文本，选择字体和大小，在“链接”文本框中输入地址；在“另存为”文本框中输入Flash文件名称，注意文件名不能为中文，存放路径也不能有中文，文件扩展名为：.swf，最后单击。4.4创建并使用布局模板4.4.1创建布局模板Dreamweaver提供了强大的模板功能，在编辑窗口上面的工具面板还提供了模板工具栏，通过该工具栏可以制作各种各样的模板。在Dreamweaver中打开网页，用鼠标单击“文件”菜单，在弹出的菜单中选择“另存为模板”命令。在“另存模板”对话框中输入模板的名称，单击“保存”按钮。模板文件建立后自动处于打开状态。由于模板文件在应用后是不能编辑的，所以要为模板文件建立可编辑区域。在编辑区域顶端工具栏区域，单击“模板”选项卡，在“模板”工具栏中单击“可编辑区域”按钮，输入“可编辑区域”的名称单击“确定”按钮。4.4.2使用网页布局模板在Dreamweaver中打开网页文件。用鼠标单击“修改”菜单，在弹出的菜单中选择“模板”，最后在弹出的下一级菜单中选择“套用模板到页”命令。在弹出的对话框中选择网页模板文件，注意要选中“当模板改变时更新页面”，这样当网页制作过程中，出现问题时，可以随时更改模板，同时使用该模板的网页将自动更新。最后单击“选定”按钮。4.5使用书签4.5.1 书签所谓书签，就是到网页中某个具体位置的链接。当网页内容过长时，使用书签可以快速地浏览到所关心的信息。4.5.2使用锚记链接实现书签功能。首先在网页的顶端输入书签说明文本，这些名称将作为书签的热区文本。拖动滚动条，选中网页底部的文字，单击菜单栏上的“插入”，在弹出的下拉菜单中选择“命名锚记” ，在“命名锚记”对话框中输入锚记的名称。拖动滚动条到网页顶端，选中网页顶端的相应文字，用鼠标拖动“属性面板”中的到正文的锚记标记上。第5章 样式与行为本章的教学目标为：（1）知道样式表的作用。（2）熟练掌握创建使用HTML样式表的方法。（3）掌握创建使用CSS样式表的方法。（4）掌握使用CSS选择器使用样式表的方法。（5）知道“行为”的作用以及简单的使用。（6）能够利用行为设置网页的背景音乐以及弹出网页问候语对话框和弹出网页窗口的方法。本章的教学建议：样式分为两种，教材通过实例讲述了使用它们的相应方法，学习者可以依据教材上的讲述一步步完成相应的设置。对于CSS样式的学习，可以向学习者布置新的任务，如文字闪烁等，通过练习进行加强。行为是教学重点，因为在后面的教学中要应用到行为的应用。对于这个概念不必花太大的篇幅去讲解，着重讲解它的作用就可以了。在学习的过程中要注意到以下两点：1.选取整个网页的方法，注意不是选取整个网页的文字；2.弹出对话框和网页窗口的区别，如果同时设置，先弹出哪一个？本章的教学内容：5.1使用HTML样式5.1.1样式样式表是目前网页制作中普遍应用的一个技术，它通过设置HTML代码标签来实现对字体、颜色、填充、边距和字间距等进行格式化操作。样式表可以分为HTML样式表和CSS样式表。5.1.2使用HTML样式HTML样式表可以对整个段落或选择的相应文本进行设置。所以在使用样式表前，首先应该选择相应的段落或文本，然后在“HTML样式”浮动面板中选择相应的样式，最后单击“应用”按钮即可。5.2使用CSS样式CSS是Cascading Style Sheets（层叠样式表单）的简称。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTML调用。5.2.1使用CSS样式增大行间距在Dreamweaver中打开网页，单击窗口右边“浮动面板”中“设计”左边的，在打开的面板中单击“CSS样式”选项卡，将其打开。在“CSS样式”选项卡中，单击，打开“新建CSS样式”对话框。在名称栏中输入：.hangjv，作为样式名称。单击后，弹出“保存样式表文件为”对话框。在“文件名”右边的文本框中输入hangjv，如图5.8所示。单击，这样就在网站的目录下生成了一个叫hangjv.css的样式表文件。在“hangjv的CSS样式定义”对话框中，单击行高右边的，在下拉选项中选择“（值）”，然后单击其右边的，在下拉选项中选择“倍行高” ，将“行高”右边的文本框中的“（值）”删掉，输入“1.5”，单击。在网页中单击鼠标，使光标出现在第一段文字中，单击样式表中的样式“hangjv”，第一段文字的行间距变成1.5倍。5.2.2使用CSS样式去掉超链接下划线在网页中多数的超链接热区文本都有下划线，使用CSS可以非常轻松地将这些下划线隐藏。单击窗口右边“浮动面板”中“设计”左边的，在打开的面板中单击“CSS样式”选项卡，将其打开。在“CSS样式”选项卡中，单击，打开“新建CSS样式”对话框，选择“使用CSS选择器” ，然后单击“选择器”右边下拉框的，在下拉选项中选择“a:link”，即对于超链接进行操作，单击。在“a:link的CSS样式定义”对话框中，选择“无” ，单击。5.3行为的简单应用5.3.1行为所谓“行为”，就是响应网页中的某一事件而采取的一个动作。当把某个行为赋予网页中的某个对象时，也就定义了一个动作，以及与之相对应的事件。一个事件可以关联多个动作，每个动作的执行由浮动面板中的排列顺序决定。改变“行为”浮动面板中行为的顺序也就改变了行为的执行顺序。5.3.2为网页添加背景音乐在Dreamweaver中网页文件，单击窗口右下角的按钮，选中整个网页。单击窗口右边浮动面板中“设计”左边的，打开“设计”面板，单击“行为”，打开“行为”选项卡。然后单击，在弹出的菜单中选择“播放声音”，打开“播放声音”对话框。在“播放声音”对话框中，单击，在“选择文件”对话框中，单击“搜寻”文本框右边的，在下拉选项中选中声音文件“music.midi” ，单击。完成设置。5.4使用行为弹出信息5.4.1使用行为弹出对话框有一些网页常常强迫浏览者阅读一些信息，这些信息可以是一些友好的问候语，也可以是与网页相关的重要信息。实现这一功能有两个方法，一个是采用“弹出信息”行动；另一种方法是采用“调用JavaScript”行为。在Dreamweaver中打开网页文件，单击窗口右下角的按钮，选中整个网页。单击窗口右边浮动面板中“设计”左边的，打开“设计”面板。单击“行为”，打开“行为”选项卡。然后单击，在弹出的菜单中选择“弹出信息” ，输入要显示的信息，单击。采用“调用JavaScript”行为也可以带到同样的效果。重复上面的操作，在创建行为时选择命令“调用JavaScript” ，在“调用JavaScript”对话框中输入：alert(“提示内容”) ，最后单击。5.4.2使用行为弹出网页窗口新建一个网页文件编辑网页的内容并保存。打开主页，然后单击编辑窗口右下方的，选中整个网页。在“设计”浮动面板的“行为”选项卡中，单击，在弹出的菜单中选择“打开浏览器窗口”命令，打开“打开浏览器窗口”对话框，单击按钮，打开“选择文件”对话框，选中新建的网页文件，单击按钮，返回“打开浏览器窗口” 对话框。输入弹出窗口的大小以及窗口名称，这些值并不是网页窗口的实际大小，而是你希望它显示出的大小。单击。在Dreamweaver窗口中可以发现，“打开浏览器窗口”已经出现在“行为”选项卡中，在浏览器中预览该网页，可以发现在打开主页的同时，弹出小窗口。第6章 层和时间轴本章的教学目标为：（1）知道“层”的含义。（2）熟练掌握利用层实现图文混排的方法。（3）知道利用“层”和时间轴实现动态效果的原理。（4）掌握利用“层”和时间轴实现走马灯动态效果、页面浮动广告动态效果以及幻灯片自动播放效果的方法。本章的教学建议：层也是一个不好理解的概念，在学习时要认真体会。也可以首先不详细介绍它，在完成本章的教学内容后，再讲解，那样更容易理解它的含义。在学习过程中要注意一点：当多个层同时存在时，如何正确选取需要操作的那个层。时间轴是学习者比较感兴趣的一项内容，建议学习者通过教材自学，然后通过练习，完成学习任务。此处可以体现学习者的创造性和耐心。因为越有创造性的应用，层就越多，在时间轴上的变化就越复杂，也越出现问题。本章的教学内容：6.1使用层6.1.1层的作用利用层可以实现网页中的图文混排，由于各层的位置可以任意移动，所以层中的网页对象也可以出现在网页的任意位置。6.1.2使用层实现图文混排在Dreamweaver中打开网页文件，在编辑区域中单击鼠标，使光标出现在编辑区中，移动鼠标指针到“插入”面板的“常用”选项卡中，单击描绘层按钮，在网页编辑区中拖动鼠标，画出一个区域，该区域即为插入层的大小。每插入一个新层，在网页顶端就会增加一个层标记。单击该标记可以选中其所对应的层。单击层的外围框线，选中层。将鼠标指针移动到框线的右下角上，当鼠标指针变成时，拖动鼠标，更改层的大小。用鼠标单击“文件”菜单，在弹出的菜单中选择“保存”命令，将网页文件保存。6.2层与时间轴配合使用动态效果6.2.1时间轴时间轴在网页制作过程中主要用于动态效果的实现，它在网页中所获得的效果就是利用DHTML语言来实现的。6.2.2实现文字跑马灯效果要实现滚动文字，有多种方法，下面我们用层与时间轴结合的方法来实现这一效果。在Dreamweaver中打开网页文件，单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域， 在该层中单击鼠标，出现光标后输入要滚动的文字。选中层中的文字，在“属性”面板中设置字体颜色为红色，并加粗。单击菜单栏上的“窗口”，移动鼠标指针到下拉菜单的“其它”上，最后单击下一级菜单中的“时间轴”命令。这时，可以发现在编辑窗口下部出现“时间轴”面板。选中有滚动文本的层，拖动该层到时间轴上第一行的最左端，在该行上出现一个紫色的长条，并写有“Layer1”字样表明是第一层。其中的每一个格称为一帧。将鼠标指针移动到第15帧上，拖动鼠标，将第15帧，即最后一帧关键帧拖动到第30帧处。即将动画长度由15帧变成30帧，这样文字的滚动速度会变慢。单击第一帧，使该帧变成红色。拖动有滚动文本的层到网页的最右侧，即确定第一帧的位置。单击最后一帧，使该帧变成红色。拖动有滚动文本的层到网页的最左侧，即确定最后一帧的位置。可以发现有一条直线从网页右侧指到网页左侧。在时间轴浮动面板中选中“自动播放”和“循环” ，单击“确定”。6.2.3实现幻灯片效果首先，必须保证插入的图片大小一致，否则会影响整个网页的效果。我们制作幻灯片效果的思路是：创建三个图层，三个图层应该大小一致，并且与插入的图片大小相同，利用时间轴来隐藏图层，实现最终效果。三个图层的坐标必须一致，这样可以避免图片的跳动，所以，我们在制作时仅仅插入一个图层，然后用复制图层的方法，实现另外两个图层的插入。6.2.4创建页面浮动广告在Dreamweaver中打开网页文件“index.htm”, 单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域。在新增加的层中单击鼠标，出现光标后，单击“插入”面板 “常用”选项卡中的“插入图像”按钮。在“选择图像源”对话框中，找到存放图片的文件夹，选中要插入的图像文件，单击，拖动鼠标指针，更改层的大小，使它与图像大小一致。选中层，单击菜单栏上的“修改”，移动鼠标指针到下拉菜单的“时间轴”上，最后单击下一级菜单中的“录制层路径”命令，选中层，按照希望的路径拖动鼠标，可以看到一条粗灰线，将层拖动到合适的位置，松开鼠标，可以看见沿刚才拖动鼠标的路径出现一条细线。注意一定要选中“自动播放”和“循环”。第7章 使用表单本章的教学目标为：（1）了解Web服务器的作用。（2）了解PWS的优缺点；掌握PWS的安装方法；掌握PWS服务器的设置方法。（3）掌握更改站点设置的方法。（4）知道表单域的含义；熟练掌握各种表单栏目的插入与设置。（5）能够综合使用各种表单栏目制作留言簿。（6）知道发送表单结果的多种方法。（7）掌握验证表单的方法。本章的教学建议：七种表单元素是本章的教学重点，每一种元素的特点以及设置方法是需要花时间认真练习的。其中的重点是“域”的存在，对于其他元素来讲，它发挥重要的作用，却在网页上几乎看不见。设置Web服务器的方法，教材上使用的是PWS，这是因为考虑到学校的机房大多采用Win98的缘故。学习者如果采用Win2000可查阅相应资料。提交表单信息和检查表单是学习者感兴趣的内容，在教学设计时，要让学习者切实感受到它们的作用。本章的教学内容：7.1创建表单网页表单是用来收集站点访问者信息的域集，可实现网页与浏览者间的交互，达到收集浏览者输入信息的目的。7.1.1表单域简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。在建立表单网页之前，首先就要建立一个表单域。7.1.2单行文本框单行文本框只有一行栏位供浏览者填写，我们可以通过设定来决定栏位中最多可以输入多少字。单击“插入”面板中的“文本字段”标签，可以发现在文字后面出现一个文本框。7.1.3滚动文本框有时需要输入多行文字，而且在文字框的右侧和下方都出现滚动条。单击“插入”面板中的“文本区域”标签，可以发现在文字后面出现一个文本框，选中文本区域框，在“属性”面板中更改“类型”为多行。7.1.4单选按钮单选按钮就象单选题，浏览者只能在各种选项中选择一种。单选按钮用处十分广泛，下面我们以建立性别栏为例，说明如何建立单选按钮。单击“插入”面板中的“单选按钮”标签，可以插入一个单选按钮。7.1.5复选按钮复选框可以同时选取一至多个选项，设置方法与单选按钮类似。单击“插入”面板中的“复选框”标签，可以插入一个复选框。7.1.6下拉列表下拉列表可以显示选项列表，即为留言者提供方便，又便于对留言内容进行管理。单击“插入”面板中的“列表/菜单”标签，可以发现在文字后面出现一个文本框，在“属性”面板中选择“类型”为“列表”，单击按钮，在弹出的“列表值”对话框中输入列表值，单击左上角的按钮，重复上一步，输入其它列表值，最后单击，返回网页编辑窗口。7.1.7按钮单击“插入”面板中的“按钮”标签，可以插入一个按钮。按钮共有三种类型：“提交”按钮将表单资料传送到相应位置。“重置”按钮将表单资料全部清除，等待重新输入。 “普通”按钮可以与别的程序相连，作为启动其它程序的按钮。7.2 设置Web服务器7.2.1 Web服务器概述 Web服务器的构件需要两个必不可少的基础平台，即网络硬件平台和网络软件平台。只有完成这两个平台的建设，才可以建设Web服务器。在Window98下进行操作，可以使用个人web服务器系统PWS（Personal Web S