dreamweaver8网页设计教案

1、初识Dreamweaver8课题：Dreamweaver8简介及创建文档一、教学基本内容1、什么是网页和网站2、网页的分类3、网页中的常用术语4、网页设计的相关知识5、认识Dreamweaver86、 Dreamweaver8的基本操作7、 Dreamweaver8工作界面介绍二、课型：新授课三、课时：1个课时四、教学重点与难点重点：什么是网页和网站难点：1、网页的分类2、网页设计的一般步骤3、 Dreamweaver8的基本操作五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六

2、、教学过程1、什么是网页和网站（1）网页网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。(2)网站网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。门户网站职能网站专业网站个人网站2、网页的分类(1)按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。(2)按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。3、网页设计的相关知识(1)设计网页的原则A、整体规划B、鲜

3、明的主题C、善用图像D、醒目的导航E、及时更新F、易记的网站名称G、通用网页H、动回适量(2)网页设计的一般步骤A、规划网站B、收集整理资源C、配置站点D、创建页面E、测试站点F、发布站点G、维护、更新站点(3)网页制作的常用工具A、网页设计软件Dreamweaver是目前使用最多的网页设计软件。B、图像处理软件制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。C、动画制作软件网页动画制作中最常用的软件非4、Dreamweaver 8的基本操作A、启动 Dreamweaver 8B、新建空白HTML网页C、保存网页文档D、预览网页效果E、退出 Dre

4、amweaver 8Flash莫属。丰E吐H 3J7 *TI?-1v*til ml'li ®|'E> >1 - Q? *1 7印 工/G * Cl q由知 wni 舸即卯fahu&wMgirlc冬久 U.; Tm 口勺官口勺曰gm0口已 .a a Q 岗中5E>I"IF 赳圮田 也 期 IIku *«* HfelRisT-Er B< - IHtirl:L KHiriLfl FL |!P *第一章Dreamweaver8概述课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8的工作界

5、面2、建立html文档二、课型：新授课三、课时：1个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用FrontpageDreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。（2）相关工具的介绍因为这是第

6、一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。2、讲授新课（1）Dreamweaver的界面a文档窗口：主菜单、工具栏、底部启动条、文档编辑区b.对象面板：标准、表格、表单、框架、特殊、文件廷一隐藏、字符c.启动面板：站点管理、代码检查、HTML样式、CSS羊式、行为、历史记录、资源管理d属性面板：随目前对象不同而内容不同（2）创建HTML网页（3）在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。3、巩固练习练习使用界面中的各个工具七、作业处理根据本节所学的内容，

7、课堂上练习创建一个空白网页，并且输入一段文字，在文本的左边插入一张图片八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第二章创建与规划站点课题：规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、站点组成2、如何创建静态站点难点：1、站点的定义2、编辑、删除站点五、教学目的1、掌握建立静态站点的流程2、掌握静态站点的基本操作六、教学过程1、复习引入由上节所学习的建立HTML网页引出站点概念2、讲授新课（1）站点规划概念及方法概念：所谓本地

8、站点，就是指定本地硬盘中存放远程站点所有文档的文件夹方法：规划网站一般需要从3个方面去思考，即网站的主题、网站的内容和网站的对象。国21网站34方面的闲互关系(2)创建本地站点站点组成：Dreamweaver8站点由3部分组成，具体内容取决于环境和所开发的Web站点类型。包括本地文件夹、远程文件夹、动态页文件夹定义站点：(01)选择站点”|新建站点”选项，或者选择站点”1管理站点”选项，在弹出的站点管理”对话框中单击新建”按钮，弹出对话框，在基本”选项卡的站点名称输入框中输入所要创建站点的名称，如图2-5所示(02)输入站点名称后，单击下一步”按钮，在弹出的是否使用服务器技术对话框中，根据自己

9、所制作网页的类型，确定是否使用服务器技术。在此制作静态页面，因此不使用服务器技术，如图2-6所示。(03)单击下一步”按钮，在弹出的设置站点文件夹对话框中，选择或输入一个本地文件夹作为本地站点文件夹”，如图2-7所示图7设置本地站点交件夹(04)选择了本地站点文件夹后，单击该对话框中的下一步”按钮，进入设置是否与远程服务器相连的对话框，在这里选择无”，设置为不与远程服务器相连，如图2-9所示。图设置为不与远程服莠器相连(05)单击下一步”按钮，便会显示在站点定义向导中所选择设置的详细报告，如果感觉满意，单击完成”按钮，完成本网站的创建，如图2-10所示；否则单击上一步”按钮重新修改各项设置。咨

10、中»ism再WKtM»l止猛*Au1隼3MUE.ifU-WMWIHM上士超alIU*iIt*-t'E32-10完成本网站的创建(3)站点的基本操作其基本操作包括编辑、复制、删除站点。3、巩固练习练习站点的建立，及其基本操作。七、作业处理在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹，在dreamweaver中创建一个静态站点，将站点信息存放到我的站点文件夹中。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：搭建动态网站服务器及创建动态站点一、教学基本内容1、安装IIS2、动态站点与静态站点的区别

11、3、搭建动态站点二、课型：新授课三、课时：2个课时四、教学重点与难点重点：动态站点与静态站点的区别难点：1、虚拟目录的概念2、动态站点的定义3、站点测试五、教学目的1、学会安装IIS,知道IIS的作用2、学会创建虚拟目录3、会创建动态站点六、教学过程1、引入先提出静态站点的作用及限制性，引入动态站点的功能2、讲授新课（1）安装并启动IIS（现场操作）（2）定义一个动态站点步骤：<01>设置虚拟目录。（1）在本地磁盘“C”:下新建一个site文件夹作为本地站点的根文件夹。（2）设置web共享。找到“Cs:ite文件夹，选中并右击该文件夹，从弹出的快”捷菜单中选择共享和安全”选项。在打

12、开的“site!性”对话框中，选择“We我享选项卡，如图2-19所示匡3-支9银:HWet."室(3)设置编辑别名”对话框。选中共享文件夹”单选按钮，在弹出的编辑别名对话框中将别名”设置为site；在访问权限”中选择馍取"；在应用程序权限中选择脚本”，如图2-20所示。最后单击确定”按钮关闭对话框，便完成了定义动态站点的准备工作。5I2-2C设置"铜辑别名R对话把<02>进入高级”选项卡。(1)选择站点”|新建站点”选项，选择站点定义”对话框中的高级”选项卡(2)从分类”列表框中选择本地信息”(默认选项)选项，如图2-21所示。512-21选连露面级选

13、项卡中的“丰地信息,逸项<03>设置本地信息”的各参数(见图2-22国2-22 奈成本地信息参澈的咨置<04>设置 测试服务器”的各参数(见图2-23)。2-23谡宣泄试眼终招客金级<05>显示结果。(3)测试站点<01>将ch02文件复制到C:site文件夹中，并使用Dreamweaver8打开。<02>单击浏览器中预览/调试”按钮，或者按F12键在浏览器中运行页面。出现如图2-25所示的成功页面。若浏览器提示找不到服务器，则需重新搭建ASP服务器。图工”成功页面3、巩固练习练习站点的建立，及其基本操作。七、作业处理在课堂上要求每一

14、个同学在F盘下建立一个名为"我的动态站点”的文件夹,将其设置为虚拟目录，在dreamweaver中创建一个动态站点，将站点信息存放到我的动态站点文件夹中。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第三章文本及其格式化课题：输入文本及其格式化一、教学基本内容1、输入普通文本2、插入符号、日期3、使用项目列表二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、插入符号、空格和日期2、使用项目列表难点：1、项目列表五、教学目的1、掌握文本输入方法2、掌握日期的插入3、掌握项目列表的使用六、教学过程1、引入首先例用一个已完成的

15、网页，让学生来看别人的设置，由此引入文本的格式化。2、讲授新课（1）文本的输入两种方法：a:直接在文档窗口中输入文本。即先选择要插入文本的位置，然后直接输入文本。b:在其他编辑器中复制已经生成的文本，然后切换到Dreamweaver8文档窗口中，将选取插入点，然后选择“编辑”|粘贴“”选项。（2）创建项目列表类型：无序列表、有序列表、定义列表、目录列表和菜单列表。（3）插入日期3、巩固练习练习各种项目列表的使用七、作业处理要求每一个同学建立一个名为“我的网页”的空白文档，在网页中输入文字，然后在右下角插入日期，在内容当中便用有序列表。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的

16、工具均在计算机上用PPT课件进行演示。课题：csS羊式一、教学基本内容1 、演示并讲解cSS的应用2 、cSS的基本概念3 、cSS的特点4、CSS样式定义5、CSS常用属性与值二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、掌握CSS样式定义2、掌握CSS常用属性与值难点：1、掌握CSS样式定义2、CSS常用属性与值3、能独立完成CSS样式的应用五、教学目的1、掌握CSS的基本概念2、掌握CSS样式定义3、掌握CSS常用属性与值六、教学过程向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作

17、业，教师实施指导。第一步：演示并讲解用CSS样式制作的网页。第二步：分步演示并讲解CSS样式的基本概念。第三步：讲解并分析CSS常用属性与值。第四步：结合CSS样式的使用制作网页第四步：课程小结。七、作业处理课堂上进行计论：第一步：演示并讲解用CSS样式制作的网页。第二步：分步演示并讲解CSS样式的基本概念。第三步：讲解并分析CSS的知识点。第四步：结合CSS样式的使用制作网页第四步：课程小结。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第四章表格课题：表格创建及设置一、教学基本内容1 、创建表格2 、添加表格对象3 、自动套用表格格式二、

18、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、创建表格2、自动套用表格格式难点：套用表格格式五、教学目的1 、掌握创建表格的基本方法2 、会使用自动套用表格格式六、教学过程1、引入网页需要进行排版，由报纸的排版引入网页的排版，由此提出表格的作用2、讲授新课（1）创建表格步骤：<01>将光标停放在页面需要创建表格的位置。<02>如果未打开“插入”工具栏，可以在文档窗口单击按钮。如果在文档窗口中找不到该按钮，可使用Ctrl+F2快捷键切换“插入”工具栏的显示或隐藏状态，<03>在“常用”标签中，单击“表格”按钮<04>弹出“表格”对话框输

19、入要插入表格的行数，在此输入2。列数输入要插入表格的列数，在此输入3<05>单击“确定”按钮(2)套用表格格式3、巩固练习创建一个表格，练习格式的套用。七、作业处理在课堂上创建一个五行四列的表格，要求边框为0，宽150，高254的表格。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：表格的应用一、教学基本内容1、设置单元格2、表格的基本操作二、课型：新授课三、课时：2个课时四、教学重点与难点重点：表格的编辑难点：排序表格五、教学目的1 、掌握表格的基本操作2 、能够熟练设置单元格格式六、教学过程1、引入（ 1）文字的定位：空格

20、、回车（ 2）图片的定位：垂直边距、水平边距2、表格插入表格：插入（Insert）表格（table）,或者在对象面板行数（row）列数（column）边距（cellpadding）：单元格中的内容与单元格边框之间的距离间距（cellspacing）：单元格之间的距离宽度（width）:可以是像素（pixel）或百分比为单位（percent）边框（boder）：属性面板：只有在选定整个表格时才出现表格属性在表格中也可以通过右击，调出的快捷菜单中选择表格来对表格进行设置清除行高和列宽按钮改变列宽单位按钮背景颜色：边框颜色：设置整个表格的格线颜色背景图像：3、表格所对应的HTML代码表格：table

21、/table行：tr/tr列：td/td4、表格的编辑（ 1） 表格的嵌套（ 2） 在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。（2）复制剪切粘贴（ 3） 插入行、列，删除行列（ 4） 合并单元格，拆分单元格（ 5） 改变行、列、表格的大小：拖放，属性面板精确定义（ 6） 表格模板：命令（command）格式化表格（formattable）七、作业处理根据课本上的实训作出一个精美课程表网页八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示第五章图像课题：图像插入及属性设置一、教学基本内容1、图像的类型2、插入鼠标经过图像

22、二、课型：新授课三、课时：2个课时四、教学重点与难点重点：插入图像难点：图像属性五、教学目的1 、掌握图像的插入方法2 、掌握图像属性设置六、教学过程1、引入网页的页面背景颜色和文本颜色在HTML代码中是如何表示的RGB方式表示颜色：红绿兰，0表示最弱，255表示最强一共可以表示：256K256X256二种颜色由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。这个范围我们称之为网页安全颜色范畴网页中运用颜色原则：切忌采用过；背景颜色不要太深；要保持整个网页的色调统一；要围绕网页主题选择颜色2、讲授新课（1）网页中的图像格式

23、*BMP：位图格式GIF：GraphicsInterchangeFormat可交换的图像格式特点：只支持256种颜色支持透明效果、可以交错下载、可以实现动画效果、文件所占用空间小、不能支持渐变色彩、更改图片大小要从原文件改起JPEGJointPhotographicExpertsGrou限合摄影专家组文件格式特点：支持24位图像、有损压缩。（2）插入图像3、巩固练习练习设置图像的属性。七、作业处理在表格中插入一张背景图像。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：制作地图网页及电子相册一、教学基本内容1、制作地图网页2、电子相册二、

24、课型：实验课三、课时：2个课时四、教学重点与难点重点：制作地图网页难点：热点选择五、教学目的1 、掌握图像使用2 、掌握图像的其它操作六、教学过程此节是实验课，实验步骤为：（01）启动Dreamweaver8，打开文件。（02）选中该文档中“丝绸之路示意图”图像。（03）在菜单栏中依次选择窗口”|属性”选项或按下Ctrl+F3组合键，打开属性”面板，如果没有显示图像地图制作工具，单击“属性”面板右下角的扩展箭头，（04）在“属性”面板中的“地图”文本框中输入图像地图名称。（05）创建图像地图（热区），可根据地图中不同的形状选择不同的热区工具，在所选定图像上拖动鼠标指针，便可完成图像地图的创建。

25、（06）图像地图创建完成后，选中所创建的热区，打开“属性”面板。在热点“属性”面板的“链接”文本框中输入链接文件的名称，或者单击文件夹图标并通过浏览选择在用户单击该热点时要打开的文件。在“目标”下拉列表中，选择用于打开该文件的窗口。（07）在“地中海”创建一个矩形热区，在“替换”框中输入“关于地中海的论述”替代文本，并设置好链接（链接到）。08）按照相同的方法分别为不同的路线或地名创建热区，并输入不同的链接和替代文字，保存并预览。当鼠标指针移到图像地图中时将显示“替换”框中的内容，如果设置有链接，单击便可进入所链接的文档。（9）完成创建。第六章框架课题：框架集的创建及其基本操作一、教学基本内容

26、1 、演示并讲解用框架制作的网页2 、框架的基本结构3 、框架的各种属性4 、框架结构之间的链接二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、框架的各种属性2、框架结构之间的链接难点：1、框架的各种属性2、框架结构之间的链接五、教学目的1 、掌握框架的基本结构2 、掌握框架的各种属性3 、掌握框架结构之间的链接六、教学过程1、复习引入回忆：Frontpage中的框架应用2、框架的应用重复出现在不同网页文档中的元素：网页标题、导航栏等等3、建立框架（ 1） 将对象面板切换到框架页（Frame）（2）插入不同的框架，一个区域对应于一个页面（3）在框架中打开原有网页：文件（File）

27、6在框架中打开（OpeninFrame）4、保存框架（ 1） 选择文件（File）/保存所有框架（SaveFramese）t，先保存框架文件，接着会出现提示，逐个保存框架中的网页（ 2） 保存时注意名称5、框架编辑框架面板：窗口（Windows）a其它（Other）&框架（Frame）调出框架面板选定框架组：单击整个框架组的边框；或在框架面板中单击整个框架的边框框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等拆分框架：按Alt键，拖动边框；修改（Modify）a框架页（Frameset）a拆分左/右/上/下（splitframetop/bot

28、tom/left/right）*注意区别：插入一个新的框架与拆分框架的区别6、框架所对应的HTML代码框架组：通过设置rows或cols来设定是横的还是竖的，是顶部还是底部框架组属性：frameborder框架是否有边框，border边框的宽度多少,framespacing框架间距框架项：框架属性：src指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小七、作业处理1、建立框架页面如图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开2、建立左右型的框架，并在其中的左框架中插入上下型的框架3、建立左右型框架，并将左边的框架拆分为上下型八

29、、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示课题：创建电子图书一、教学基本内容利用框架制作电子图书网页二、课型：实验课三、课时：2个课时四、教学重点与难点重点：框架结构之间的链接难点：框架集五、教学目的1 、掌握框架的运用2 、掌握框架结构之间的链接六、教学过程步骤：（01）打开或新建一个空白的文档，在该文档中创建一个框架集。（02）命名框架。将左列框架命名为index、右列上部框架命名为_top、右列下部框架命名为main。（03）保存框架。将框架集保存为06A.asp文档，index框架保存为文档，_top框架保存为06C.asp文档，ma

30、in框架保存为，文档均保存在ch06文件夹下。（04）设置框架的行或列。将index框架的列设置为150像素，_top框架的行设置为90像素。（05）设置页面的配色方案。单击“属性”面板中的“页面属性”按钮，将index框架的文档的文本颜色设置为#669966,背景颜色设置为#FFCC99（06）将链接颜色按图6-14右侧图进行设置，然后单击“确定”按钮。（07）定义样式。选择文本”|"CSSL'|新建”选项，将index框架的文档的tr标签定义为宋体9points。（08）填充页面。在index框架文档中输入如图6-15所示的文本并插入一个9行1列的表格。其中“休闲娱乐”文

31、本为隶书5号字体，颜色为#66CC00；表格边框的颜色为白色；单元格的高度为30像素，单元格的对齐方式为水平居中、垂直居中。（09）在“页面属性”对话框中将_top框架的标题设置为“标题栏”，将所有边界都设置为0（10）将光标停留在_top框架中，输入文本并插入images文件夹下的图像，其中文本为4号宋体，颜色为#66CC00。（11）设置链接。选中左边框架（index）中目录下的考试作弊”文本，在属性“面板中的链接”框中设置与之对应的笑话内容（WJ/）的链接。这时目标”框变为激活状态，从“目标”下拉列表框中选择链接的目标为main。（12）使用相同的方法设置其他“笑话”目录所链接的内容和链

32、接目标，其他的链接目标均为main框架。笑话目录各项和WJ文件夹中是一一对应的关系。（13）指定框架源文件。选中main框架，在“属性”面板中的“源文件”文本框中设置框架的源文件。单击旁边的文件夹，选择WJ文件夹中文件（14）在文档窗口的菜单栏中选择“文件”|保存全部“”选项，将所有的框架进行保存。（15）按F12键便可预览该实例第七章页面布局视图的使用课题：布局表格和布局单元格的基本知识及操作一、教学基本内容1、布局表格和布局单元格的基本知识2、布局表格和布局单元格的创建二、课型：新授课三、课时：2个课时四、教学重点与难点重点：创建布局表格和布局单元格难点：布局表格的使用五、教学目的1、掌握

33、布局的基本知识2、熟练运用布局表格和布局单元格六、教学过程1、引入在第四章学习过了表格的布局，用表格与布局表格相比，看其特点，从而使学生更加了解什么是布局表格和布局单元格。2、讲授新课（1）布局表格的基本知识（2）布局表格和布局单元格的基本操作选择布局表格：须要执行下列操作之一：a:双击所绘制的布局表格中的标志。b:单击文档窗口左下角的table标签，如图7-3所示。调整布局单元格的大小:具体操作步骤如下：（01）选中要调整的布局单元格。（02）选择布局单元格边线上的调整手柄，拖动鼠标便可调整布局单元格的大小移动布局表格和布局单元格:（01）选中要移动的布局表格或布局单元格。（02）使用方向键

34、便可移动布局表格或布局单元格了，但这样每次只能移动1像素的距离；如果是在按下Shift键的同时再利用方向键移动，每次可移动10像素的距离。设置布局宽度为固定宽度:具体操作步骤如下：（01）选择要设置固定宽度的布局表格。（02）在菜单栏中选择“窗口”|属性“”选项，打开“属性”面板。（03）在“属性”面板中选择“固定”单项按钮，并在后面的文本框中输入一个数值，在此输入640，其单位在默认的条件下是像素。七、作业处理进入布局模式，练习布局与布局单元格八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示课题：制作完整页面一、教学基本内容利用布局制作完整页面

35、二、课型：实验课三、课时：2个课时四、教学重点与难点重点：布局表格的创建难点：布局单元格的使用五、教学目的1 、掌握布局表格的运用2 、掌握布局单元格的作用六、教学过程步骤：（01）选中在布局表格中所绘制的布局单元格，在“属性”面板中将该布局单元格的宽度也设置为775像素，高度为68像素。（02）将光标停留在布局单元格内，选择菜单栏中的“插入”|图像“”选项，在弹出的选择图像源文件”对话框中，选择存放在ch07IMAGES文件夹下的图像（03）选择图像文件后，单击“确定”按钮，便可在布局单元格内插入该图像文件（04）单击“绘制布局单元格”按钮，在已经插入图像的布局表格下面绘制3个布局单元格（0

36、5）分别选中所绘制的布局单元格，并打开“属性”面板，将布局单元格的宽度和高度分别设置为：（156、40）、（338、40）、（199、40）。（06）在所绘制布局单元格1和2内分别输入文本“生活空间”和“音乐天地”，并在布局单元格3内插入存放在ch07IMAGES文件夹下的图像（07）在其下绘制2个布局单元格，分别选中并同时打开“属性”面板，将单元格的宽度和高度分别设置为：（148、326）、（516、326），如（08）在图7-17所示布局单元格（1）中绘制4个宽度为136像素，高度为34像素的布局单元格，并在其单元格内分别输入文本，（09）填充布局单元格内容。完成所对应的布局单元格文本的输

37、入（10）最后将“布局模式”转化为“标准模式”。在“标准模式”中根据自己的审美观进行调整，可为布局单元格的边框进行修饰第八章链接课题：链接与路径介绍一、教学基本内容1、链接的基本知识2、路径的基本知识二、课型：新授课三、课时：2个课时四、教学重点与难点重点：链接与路径的概念难点：路径的理解五、教学目的1 、掌握路径的类型2、能够正确运用路径六、教学过程1、引入在打开一个文件或插入一张图片的时候都会用到路径，由此来引入究竟什么是路径。2、讲授新课（1） URL简介URL（UniformResourceLocator,统一资源定位符）主要用于指定欲取得因特网上资源的位置与方式。一个URL的构成如下

38、：资源取得方式：db），单击“完成”按钮。05）这时会发现系统数据源名称中已经多了一个的数据库。（04）在弹出的“ODBMicrosoftAccess安装”对话框中，数据源名”文本框中输入dwmx,单击数据库”栏中的选择”按钮，选择网站根目录中的。单击确定,按钮。dwmx,这就是接下来要使用（06）单击确定”按钮，完成对DSN数据源的创建。定义数据库连接的方法：（01）在Dreamweaver8面板组中，打开“应用程序”面板组。选择“数据库”面板，（02）在“数据库”面板中单击按钮，在弹出的快捷菜单中选择“数据源名称选项，弹出数据源名称（DSN）以寸话框。（03）在“连接名称”文本框中输入ds

39、dwx。（04）单击对话框中的“测试”按钮来测试是否可以跟数据库正确连接。（05）单击“确定”按钮，再单击“数据源名称（DSN）”对话框中的“确定”按钮，便完成数据库连接的设定。七、作业处理随堂练习数据源的连接。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课程：注册、登录页面、服务器端验证一、教学基本内容1、客户注册页的基本知识2、客户登录页的基本知识3、登录验证二、课型：实验课三、课时：2个课时四、教学重点与难点重点：1、记录的插入2、用户身份验证难点：记录集五、教学目的掌握插入记录的方法，能够正确运用记录集。六、教学过程注册页面的创建步

40、骤：（01）启动Dreamweaver8，打开文件（02）检查注册表单。选择新客户注册页面中的注册表单。按Shift+F4组合键打开“行为”面板，在“行为”面板中单击按钮，从弹出的菜单中选择“检查表单”选项，弹出“检查表单”对话框。（03）单击“确定”按钮，完成检查表单设置，并将该行为的事件设置为onSubmit。（04）插入客户注册信息到数据库表中。（05）使用“检查新用户名”服务器行为，防止客户注册的用户名重复。在“服务器行为”面板中单击按钮，从弹出的快捷菜单中依次选择“用户身份验证”|检“查新用户名”选项，在弹出的“检查新用户名”对话框中做如书上的设置。（06）单击“确定”按钮返回。（0

41、7）对完成的注册页面进行保存，便完成了注册页面的制作。登录页面的建立：（01）打开文件。（02）选择“窗口”|行为“”选项，打开“行为”面板。（03）选中需要验证表单的form标签，再单击行为”面板上的添加”按钮，从弹出的菜单中选择“检查表单”选项。（04）在“检查表单”对话框中，把“命名的栏位”列表框中与登录相关的两项设置为必需的就可以了。（05）单击“确定”按钮返回。在“行为”面板中将触发事件设置为onSubmit。（06）这样便完成了在客户端验证的行为设置。保存文件之后，按F12键进行浏览。如果用户所输入的“登录信息”不完整或不正确，系统将出现提示对话框，提示用户输入完整的登录信息。七、

42、作业处理依据书上的案例，做出一个留言页面，要求能够显示和删除留言。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第十三章代码片断、库项目和模板课题：代码片断创建与使用一、教学基本内容1、代码片断的概念及意义2、代码片断的创建与使用3、库项目的创建与使用二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、代码片断的创建2、库项目的创建难点：代码的编写五、教学目的掌握代码片断的使用方法，熟练运用库项目。六、教学过程1、代码片断使用代码片断，可使所存储的内容快速地被重复使用。可以创建和插入HTML、JavaScriptCFMLASRJSP

43、lM弋码片断。Dreamweaver8本身还包含一些预定义的代码片断，也可以使用这些预定义的代码片断作为起始点，通过对这些代码片断进行再编辑或修改以满足自己页面的需要。2、代码片断的创建新建代码片断文件夹，具体操作步骤如下：（01）启动Dreamweaver8，在菜单栏中选择“窗口”|代码片断“”选项，打开“代码片断”面板。（02）在空白位置单击一下来选择存放新文件夹的位置，否则新文件夹将成为子文件夹。（03）单击“代码片断”面板右上角的按钮，从弹出的快捷菜单中选择“新建文件夹”选项。（04）为新建的“未命名”的代码片断文件夹命名即可，如输入“我的代码片断”作为该文件夹的名称。新建代码片断：利

44、用输入代码创建代码片断，具体操作步骤如下：（01）启动Dreamweaver8，在菜单栏中选择“窗口”|代码片断“”选项，打开“代码片断”面板。（02）右击“我的代码片断”文件夹，从弹出的菜单中选择“创建新代码片断”选项。（03）弹出“代码片断”对话框。（04）根据步骤3中论述，完成的设置。（05）单击“确定”按钮，便可完成该代码片断的创建，并在“我的代码片断”文件夹中显示出来。七、作业处理做一个显示当前日期的代码片断，使之插入到页面的合适位置。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：模板使用一、教学基本内容1、模板的创建与使用2

45、、利用模板更新页面二、课型：新授课三、课时：2个课时四、教学重点与难点重点：模板的创建与使用难点：使用模板更新页面五、教学目的掌握模板的使用方法，伟用模板更新页面。六、教学过程1、模板特点使用模板创建文档可以使网站和网页具有统一的结构和外观，如果有多个网页想要用同一风格来制作，用模板绝对是最有效，并且也是最快的方法。模板实质上就是作为创建其他文档的基础文档。在创建模板时，可以说明哪些网页元素应该长期保留，不可编辑，哪些网页元素可以编辑修改。2、在模板中定义新的可编辑区域定义新的可编辑区域的具体步骤如下：（ 01）打开模板文件，在文档中选择要定义为可编辑区域的文本（或其他内容），这里选择页眉区的

46、标题文本。（ 02）右击从弹出菜单中选择“模板”|新建可编辑区域“”选项，弹出“新建可编辑区域”对话框。（ 03）在“新建可编辑区域”对话框中，为可编辑区域输入名称。命名一个可编辑区域时不能使用单引号（'）、双引号（"）、尖括号（<>）和&。（ 04）在模板中，可编辑区域被突出显示，并显示出可编辑区域的名称。七、作业处理针对书上案例实训2做模板的演练八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第十四章网页的制作课题：个人主页制作流程一、教学基本内容1 、建站流程2 、在网页中设置各种元素二、课型：新授课

47、三、课时：2个课时四、教学重点与难点重点：1、建站流程2 、网站的定位3 、熟练掌握在网页中添加文字等元素难点：1、网站的定位2、网页风格的设计五、教学目的1 、熟练掌握建站流程2 、掌握网站的定位3 、掌握网站风格的设计4 、熟练掌握在网页中添加各元素六、教学过程向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。第一步：讲解建站的流程。第二步：讲解市场调查与分析。第三步：讲解建站内容。第四步：讲解功能框架。第五步：讲解界面设计。第六步：演示站点框图。第七步：演示网站截图。第八步：讲解并

48、演示在网页中添加元素。七、作业处理根据以上各章所讲的内容，设计一个个人主页。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：网页特效一、教学基本内容1、墨林老人代码2、飘动图层代码二、课型：实验课三、课时：2个课时四、教学重点与难点重点：特效的使用难点：代码的理解五、教学目的掌握网页特效的添加方法。六、教学过程墨林老人代码：<objectclassid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081Fid=ricci></object><scriptclass="

49、fsttd1">varMerlinID;varMerlinACS;=true;MerlinLoaded=LoadLocalAgent(MerlinID,MerlinACS);Merlin="Surprised");("欢迎来到");("GestureLeft");("这里是家庭百科！")；("Pleased");。有什么问题请到论坛发言");("GestureDown");("谢谢大家光临与支持！")；();functionLoadLocalAgent(CharID,CharACS)LoadReq=CharACS);return(true);</script>七、作业处理在上节完整页面上，添加特效代码，实现案例中的效果。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第十五章网站的测试与上传课题：网站测试一、教