dreamweaver8网页实用设计教案.docx

1、dreamweaver8网页实用设计教案第一章 遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而

2、不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。 2、讲授新课（1）Dreamweaver的界面 a文档窗口：主菜单、工具栏、底部启动条、文档编辑区 b对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符 c启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理 d属性面板：随目前对象不同而

3、内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。3、巩固练习练习使用界面中的各个工具七、作业处理根据本节所学的内容，课堂上练习创建一个空白网页，并且输入一段文字，在文本的左边插入一张图片八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第二章 创建与规划站点课题：规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、站点组成2、如何创建静态站点难点：1、站点的定义 2

4、、编辑、删除站点五、教学目的 1、掌握建立静态站点的流程 2、掌握静态站点的基本操作六、教学过程 1、复习引入由上节所学习的建立HTML网页引出站点概念 2、讲授新课 （1）站点规划概念及方法概念：所谓本地站点，就是指定本地硬盘中存放远程站点所有文档的文件夹方法：规划网站一般需要从3个方面去思考，即网站的主题、网站的内容和网站的对象。（2）创建本地站点站点组成：Dreamweaver 8站点由3部分组成，具体内容取决于环境和所开发的Web站点类型。包括本地文件夹、远程文件夹、动态页文件夹定义站点：（01）选择“站点”|“新建站点”选项，或者选择“站点”“管理站点”选项，在弹出的“站点管理”对话

5、框中单击“新建”按钮，弹出对话框，在“基本”选项卡的站点名称输入框中输入所要创建站点的名称，如图2-5所示（02）输入站点名称后，单击“下一步”按钮，在弹出的是否使用服务器技术对话框中，根据自己所制作网页的类型，确定是否使用服务器技术。在此制作静态页面，因此不使用服务器技术，如图2-6所示。（03）单击“下一步”按钮，在弹出的设置站点文件夹对话框中，选择或输入一个本地文件夹作为“本地站点文件夹”，如图2-7所示。（04）选择了本地站点文件夹后，单击该对话框中的“下一步”按钮，进入设置是否与远程服务器相连的对话框，在这里选择“无”，设置为不与远程服务器相连，如图2-9所示。（05）单击“下一步”

6、按钮，便会显示在站点定义向导中所选择设置的详细报告，如果感觉满意，单击“完成”按钮，完成本网站的创建，如图2-10所示；否则单击“上一步”按钮重新修改各项设置。（3）站点的基本操作其基本操作包括编辑、复制、删除站点。3、巩固练习练习站点的建立，及其基本操作。七、作业处理在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹，在dreamweaver中创建一个静态站点，将站点信息存放到我的站点文件夹中。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：搭建动态网站服务器及创建动态站点一、教学基本内容1、安装IIS2、动态站点与静态站点

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

8、e属性”对话框中，选择“Web共享”选项卡，如图2-19所示（3）设置“编辑别名”对话框。选中“共享文件夹”单选按钮，在弹出的“编辑别名”对话框中将“别名”设置为site；在“访问权限”中选择“读取”；在“应用程序权限”中选择“脚本”，如图2-20所示。最后单击“确定”按钮关闭对话框，便完成了定义动态站点的准备工作。进入“高级”选项卡。（1）选择“站点”|“新建站点”选项，选择“站点定义”对话框中的“高级”选项卡。（2）从“分类”列表框中选择“本地信息”（默认选项）选项，如图2-21所示。设置“本地信息”的各参数（见图2-22设置“测试服务器”的各参数（见图2-23）。显示结果。（3）测试站点

9、将ch02 test.asp文件复制到C:site文件夹中，并使用Dreamweaver 8 打开test.asp。单击浏览器中“预览/调试” 按钮，或者按F12键在浏览器中运行test.asp页面。出现如图2-25所示的成功页面。若浏览器提示找不到服务器，则需重新搭建ASP服务器。3、巩固练习练习站点的建立，及其基本操作。七、作业处理在课堂上要求每一个同学在F盘下建立一个名为”我的动态站点”的文件夹，将其设置为虚拟目录，在dreamweaver中创建一个动态站点，将站点信息存放到我的动态站点文件夹中。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行

10、演示。第三章 文本及其格式化课题：输入文本及其格式化一、教学基本内容1、输入普通文本2、插入符号、日期3、使用项目列表二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、插入符号、空格和日期 2、使用项目列表难点：1、项目列表五、教学目的1、掌握文本输入方法2、掌握日期的插入3、掌握项目列表的使用六、教学过程1、引入首先例用一个已完成的网页，让学生来看别人的设置，由此引入文本的格式化。2、讲授新课（1）文本的输入两种方法：a:直接在文档窗口中输入文本。即先选择要插入文本的位置，然后直接输入文本。b:在其他编辑器中复制已经生成的文本，然后切换到Dreamweaver 8文档窗口中，将选

11、取插入点，然后选择“编辑”|“粘贴”选项。（2）创建项目列表类型：无序列表、有序列表、定义列表、目录列表和菜单列表。（3）插入日期3、巩固练习练习各种项目列表的使用七、作业处理要求每一个同学建立一个名为“我的网页”的空白文档，在网页中输入文字，然后在右下角插入日期，在内容当中便用有序列表。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：CSS样式一、教学基本内容1 、演示并讲解 CSS 的应用 2 、 CSS 的基本概念 3 、 CSS 的特点 4 、 CSS 样式定义 5 、 CSS 常用属性与值二、课型：新授课三、课时：2个课时四、教

12、学重点与难点重点：1、掌握 CSS 样式定义 2、掌握 CSS 常用属性与值 难点：1、掌握 CSS 样式定义 2、CSS 常用属性与值 3、能独立完成 CSS 样式的应用五、教学目的1 、掌握 CSS 的基本概念 2 、掌握 CSS 样式定义 3 、掌握 CSS 常用属性与值六、教学过程向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。第一步：演示并讲解用 CSS 样式制作的网页。第二步：分步演示并讲解 CSS 样式的基本概念。 第三步：讲解并分析 CSS 常用属性与值。第四步：结合

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

14、、掌握创建表格的基本方法 2 、会使用自动套用表格格式六、教学过程1、引入网页需要进行排版，由报纸的排版引入网页的排版，由此提出表格的作用2、讲授新课（1）创建表格步骤：将光标停放在页面需要创建表格的位置。如果未打开“插入”工具栏，可以在文档窗口单击按钮。如果在文档窗口中找不到该按钮，可使用Ctrl+F2快捷键切换“插入”工具栏的显示或隐藏状态，在“常用”标签中，单击“表格”按钮 弹出“表格”对话框输入要插入表格的行数，在此输入2。列数 输入要插入表格的列数，在此输入3单击“确定”按钮(2)套用表格格式3、巩固练习创建一个表格，练习格式的套用。七、作业处理在课堂上创建一个五行四列的表格，要求边

15、框为0，宽150，高254的表格。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：表格的应用一、教学基本内容1、设置单元格2、表格的基本操作二、课型：新授课三、课时：2个课时四、教学重点与难点重点：表格的编辑难点：排序表格五、教学目的1 、掌握表格的基本操作2 、能够熟练设置单元格格式六、教学过程1、引入 （1）文字的定位：空格、回车 （2）图片的定位：垂直边距、水平边距2、表格 插入表格：插入（Insert）表格（table），或者在对象面板 行数（row） 列数（column） 边距（cell padding）：单元格中的内容与单元格

16、边框之间的距离 间距（cell spacing）：单元格之间的距离 宽度（width）：可以是像素（pixel）或百分比为单位（percent） 边框（boder）： 属性面板：只有在选定整个表格时才出现表格属性 在表格中也可以通过右击，调出的快捷菜单中选择表格来对表格进行设置清除行高和列宽按钮 改变列宽单位按钮 背景颜色： 边框颜色：设置整个表格的格线颜色 背景图像：3、表格所对应的HTML代码 表格：table/table 行：tr/tr 列：td/td 4、表格的编辑（1） 表格的嵌套（2） 在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。 （2）复制剪切粘贴（3

17、） 插入行、列，删除行列（4） 合并单元格，拆分单元格（5） 改变行、列、表格的大小：拖放，属性面板精确定义（6） 表格模板：命令（command）格式化表格（format table）七、作业处理根据课本上的实训作出一个精美课程表网页 八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第五章 图像课题：图像插入及属性设置一、教学基本内容1、图像的类型2、插入鼠标经过图像二、课型：新授课三、课时：2个课时四、教学重点与难点重点：插入图像难点：图像属性五、教学目的1 、掌握图像的插入方法2 、掌握图像属性设置六、教学过程1、引入网页的页面背景颜色和

18、文本颜色在HTML代码中是如何表示的？RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256256256=16777216种颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜色范畴 网页中运用颜色原则：切忌采用过；背景颜色不要太深；要保持整个网页的色调统一；要围绕网页主题选择颜色2、讲授新课（1）网页中的图像格式 *BMP：位图格式 GIF：Graphics Interchange Format可交换的图像格式 特点：只支持256种颜色支持透明效果、可以交错下载、可

19、以实现动画效果、文件所占用空间小、不能支持渐变色彩、更改图片大小要从原文件改起 JPEG：Joint Photographic Experts Group联合摄影专家组文件格式 特点：支持24位图像、有损压缩。（2）插入图像3、巩固练习练习设置图像的属性。七、作业处理在表格中插入一张背景图像。 八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：制作地图网页及电子相册一、教学基本内容1、制作地图网页2、电子相册二、课型：实验课三、课时：2个课时四、教学重点与难点重点：制作地图网页难点：热点选择五、教学目的1 、掌握图像使用2 、掌握图像的其它

20、操作六、教学过程此节是实验课，实验步骤为：（01）启动Dreamweaver 8，打开ch05SAMPLE01MAP.ASP文件。（02）选中该文档中“丝绸之路示意图”图像。（03）在菜单栏中依次选择“窗口”|“属性”选项或按下Ctrl+F3组合键，打开“属性”面板，如果没有显示图像地图制作工具，单击“属性”面板右下角的扩展箭头， （04）在“属性”面板中的“地图”文本框中输入图像地图名称。（05）创建图像地图（热区），可根据地图中不同的形状选择不同的热区工具，在所选定图像上拖动鼠标指针，便可完成图像地图的创建。（06）图像地图创建完成后，选中所创建的热区，打开“属性”面板。在热点“属性”面板

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

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

23、 4、保存框架 （1） 选择文件（File）/保存所有框架（Save Frameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页（2） 保存时注意名称5、框架编辑框架面板：窗口（Windows）其它（Other）框架（Frame）调出框架面板选定框架组：单击整个框架组的边框；或在框架面板中单击整个框架的边框框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等拆分框架：按Alt键，拖动边框；修改（Modify）框架页（Frameset）拆分左/右/上/下（split frame top/bottom/left/right） *注意区别：插入一

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

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

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

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

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

29、：新授课三、课时：2个课时四、教学重点与难点重点：创建布局表格和布局单元格难点：布局表格的使用五、教学目的1 、掌握布局的基本知识2 、熟练运用布局表格和布局单元格六、教学过程1、引入在第四章学习过了表格的布局，用表格与布局表格相比，看其特点，从而使学生更加了解什么是布局表格和布局单元格。2、讲授新课（1）布局表格的基本知识（2）布局表格和布局单元格的基本操作选择布局表格：须要执行下列操作之一：a:双击所绘制的布局表格中的 标志。b:单击文档窗口左下角的标签，如图7-3所示。调整布局单元格的大小:具体操作步骤如下：（01）选中要调整的布局单元格。（02）选择布局单元格边线上的调整手柄，拖动鼠标便可调整布局单元格的大小移动布局表格和布局单元格:（01）选中要移动的布局表格或布局单元格。（02）使用方向键便可移动布局表格或布局单元格了，但这样每次只能移动1像素的距离；如果是在按下Shift键的同时再利用方向键移动，每次可移动10像素的距离。设置布局宽度