1《dreamweaver8网页设计》课程教案教师姓名刘丹丹所在系别软件学院授课专业软件技术专业总学时68学分4教材名称dreamweaver8网页设计案例实训教程2目录第一章遨游DREAMWEAVER8精彩世界........................................................................................3第二章创建与规划站点......................................................................................................................5第三章文本及其格式化......................................................................................................................13第四章表格..........................................................................................................................................17第五章图像..........................................................................................................................................21第六章框架..........................................................................................................................................25第七章页面布局视图的使用..............................................................................................................29第八章链接..........................................................................................................................................33第九章层与时间轴..............................................................................................................................37第十章表单..........................................................................................................................................41第十一章行为......................................................................................................................................44第十二章制作动态页面......................................................................................................................48第十三章代码片断、库项目和模板..................................................................................................52第十四章网页的制作..........................................................................................................................56第十五章网站的测试与上传..............................................................................................................60第十六章使用FIREWORKS8处理网页图像..................................................................................633第一章遨游Dreamweaver8精彩世界课题:Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8的工作界面2、建立html文档二、课型:新授课三、课时:2个课时四、教学重点与难点重点:熟悉Dreamweaver8工作界面中各个工具的作用难点:1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1、对Dreamweaver这个制作网页的工具及网页有一定的认识,激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入(1)为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品,它以程序小、运行速度快、所制作网页代码少这些优点,赢得了网页制作人员的喜爱。(2)相关工具的介绍因为这是第一节网页制作课,所以首先要简单介绍下制作网页的一些相关工具,比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。2、讲授新课(1)Dreamweaver的界面4a.文档窗口:主菜单、工具栏、底部启动条、文档编辑区b.对象面板:标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c.启动面板:站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d.属性面板:随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后,插入图像,并对图像设置对齐的方式,使之与文字呈混排的状态。3、巩固练习练习使用界面中的各个工具七、作业处理根据本节所学的内容,课堂上练习创建一个空白网页,并且输入一段文字,在文本的左边插入一张图片八、教具所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。5第二章创建与规划站点课题:规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型:新授课三、课时:2个课时四、教学重点与难点重点:1、站点组成2、如何创建静态站点难点:1、站点的定义2、编辑、删除站点五、教学目的1、掌握建立静态站点的流程2、掌握静态站点的基本操作六、教学过程1、复习引入由上节所学习的建立HTML网页引出站点概念2、讲授新课(1)站点规划概念及方法概念:所谓本地站点,就是指定本地硬盘中存放远程站点所有文档的文件夹方法:规划网站一般需要从3个方面去思考,即网站的主题、网站的内容和网站的对象。6(2)创建本地站点站点组成:Dreamweaver8站点由3部分组成,具体内容取决于环境和所开发的Web站点类型。包括本地文件夹、远程文件夹、动态页文件夹定义站点:(01)选择“站点”|“新建站点”选项,或者选择“站点”|“管理站点”选项,在弹出的“站点管理”对话框中单击“新建”按钮,弹出对话框,在“基本”选项卡的站点名称输入框中输入所要创建站点的名称,如图2-5所示(02)输入站点名称后,单击“下一步”按钮,在弹出的是否使用服务器技术对话框中,根据自己所制作网页的类型,确定是否使用服务器技术。在此制作静态页面,因此不使用服务器技术,如图2-6所示。7(03)单击“下一步”按钮,在弹出的设置站点文件夹对话框中,选择或输入一个本地文件夹作为“本地站点文件夹”,如图2-7所示。(04)选择了本地站点文件夹后,单击该对话框中的“下一步”按钮,进入设置是否与远程服务器相连的对话框,在这里选择“无”,设置为不与远程服务器相连,如图2-9所示。8(05)单击“下一步”按钮,便会显示在站点定义向导中所选择设置的详细报告,如果感觉满意,单击“完成”按钮,完成本网站的创建,如图2-10所示;否则单击“上一步”按钮重新修改各项设置。(3)站点的基本操作其基本操作包括编辑、复制、删除站点。3、巩固练习练习站点的建立,及其基本操作。七、作业处理在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹,在dreamweaver中创建一个静态站点,将站点信息存放到我的站点文件夹中。八、教具所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。9课题:搭建动态网站服务器及创建动态站点一、教学基本内容1、安装IIS2、动态站点与静态站点的区别3、搭建动态站点二、课型:新授课三、课时:2个课时四、教学重点与难点重点:动态站点与静态站点的区别难点:1、虚拟目录的概念2、动态站点的定义3、站点测试五、教学目的1、学会安装IIS,知道IIS的作用2、学会创建虚拟目录3、会创建动态站点六、教学过程1、引入先提出静态站点的作用及限制性,引入动态站点的功能2、讲授新课(1)安装并启动IIS(现场操作)(2)定义一个动态站点步骤:01设置虚拟目录。(1)在本地磁盘“C:\”下新建一个site文件夹作为本地站点的根文件夹。(2)设置web共享。找到“C:\site”文件夹,选中并右击该文件夹,从弹出的快捷菜单中选择“共享和安全”选项。在打开的“site属性”对话框中,选择“Web共享”选项卡,如图2-19所示10(3)设置“编辑别名”对话框。选中“共享文件夹”单选按钮,在弹出的“编辑别名”对话框中将“别名”设置为site;在“访问权限”中选择“读取”;在“应用程序权限”中选择“脚本”,如图2-20所示。最后单击“确定”按钮关闭对话框,便完成了定义动态站点的准备工作。02进入“高级”选项卡。(1)选择“站点”|“新建站点”选项,选择“站点定义”对话框中的“高级”选项卡。(2)从“分类”列表框中选择“本地信息”(默认选项)选项,如图2-21所示。03设置“本地信息”的各参数(见图2-221104设置“测试服务器”的各参数(见图2-23)。05显示结果。(3)测试站点01将ch02\test.asp文件复制到C:\site文件夹中,并使用Dreamweaver8打开test.asp。02单击浏览器中“预览/调试”按钮,或者按F12键在浏览器中运行test.asp页面。出现如图2-25所示的成功页面。若浏览器提示找不到服务器,则需重新搭建ASP服务器。123、巩固练习练习站点的建立,及其基本操作。七、作业处理在课堂上要求每一个同学在F盘下建立一个名为”我的动态站点”的文件夹,将其设置为虚拟目录,在dreamweaver中创建一个动态站点,将站点信息存放到我的动态站点文件夹中。八、教具所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。13第三章文本及其格式化课题:输入文本及其格式化一、教学基本内容1、输入普通文本2、插入符号、日期3、使用项目列表二、课型:新授课三、课时:2个课时四、教学重点与难点重点:1、插入符号、空格和日期