dreamweaver8网页设计教案

初识Dreamweaver 8课题：Dreamweaver8简介及创建文档一、教学基本内容1、什么是网页和网站2、网页的分类3、网页中的常用术语4、网页设计的相关知识5、认识Dreamweaver 86、Dreamweaver 8的基本操作7、Dreamweaver 8工作界面介绍二、课型：新授课三、课时：1个课时四、教学重点与难点重点：什么是网页和网站难点：1、网页的分类2、网页设计的一般步骤3、Dreamweaver 8的基本操作五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、什么是网页和网站（1）网页网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。

（2）网站网站就是一个或多个网页的集合。

从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。

◆门户网站◆职能网站◆专业网站◆个人网站2、网页的分类（1）按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。

(2)按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。

3、网页设计的相关知识（1）设计网页的原则A、整体规划B、鲜明的主题C、善用图像D、醒目的导航E、及时更新F、易记的网站名称G、通用网页H、动画适量（2）网页设计的一般步骤A、规划网站B、收集整理资源C、配置站点D、创建页面E、测试站点F、发布站点G、维护、更新站点（3）网页制作的常用工具A、网页设计软件Dreamweaver是目前使用最多的网页设计软件。

B、图像处理软件制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。

C、动画制作软件网页动画制作中最常用的软件非Flash莫属。

4、Dreamweaver 8的基本操作A、启动Dreamweaver 8B、新建空白HTML网页C、保存网页文档D、预览网页效果E、退出Dreamweaver 8第一章 Dreamweaver8概述课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：1个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。

（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。

2、讲授新课（1）Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。

3、巩固练习练习使用界面中的各个工具七、作业处理根据本节所学的内容，课堂上练习创建一个空白网页，并且输入一段文字，在文本的左边插入一张图片八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。

第二章创建与规划站点课题：规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、站点组成2、如何创建静态站点难点：1、站点的定义2、编辑、删除站点五、教学目的1、掌握建立静态站点的流程2、掌握静态站点的基本操作六、教学过程1、复习引入由上节所学习的建立HTML网页引出站点概念2、讲授新课（1）站点规划概念及方法概念：所谓本地站点，就是指定本地硬盘中存放远程站点所有文档的文件夹方法：规划网站一般需要从3个方面去思考，即网站的主题、网站的内容和网站的对象。

（2）创建本地站点站点组成：Dreamweaver 8站点由3部分组成，具体内容取决于环境和所开发的Web站点类型。

包括本地文件夹、远程文件夹、动态页文件夹定义站点：（01）选择“站点”|“新建站点”选项，或者选择“站点”｜“管理站点”选项，在弹出的“站点管理”对话框中单击“新建”按钮，弹出对话框，在“基本”选项卡的站点名称输入框中输入所要创建站点的名称，如图2-5所示（02）输入站点名称后，单击“下一步”按钮，在弹出的是否使用服务器技术对话框中，根据自己所制作网页的类型，确定是否使用服务器技术。

在此制作静态页面，因此不使用服务器技术，如图2-6所示。

（03）单击“下一步”按钮，在弹出的设置站点文件夹对话框中，选择或输入一个本地文件夹作为“本地站点文件夹”，如图2-7所示。

（04）选择了本地站点文件夹后，单击该对话框中的“下一步”按钮，进入设置是否与远程服务器相连的对话框，在这里选择“无”，设置为不与远程服务器相连，如图2-9所示。

（05）单击“下一步”按钮，便会显示在站点定义向导中所选择设置的详细报告，如果感觉满意，单击“完成”按钮，完成本网站的创建，如图2-10所示；否则单击“上一步”按钮重新修改各项设置。

（3）站点的基本操作其基本操作包括编辑、复制、删除站点。

3、巩固练习练习站点的建立，及其基本操作。

七、作业处理在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹，在dreamweaver 中创建一个静态站点，将站点信息存放到我的站点文件夹中。

八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT 课件进行演示。

课题：搭建动态网站服务器及创建动态站点一、教学基本内容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所示（3）设置“编辑别名”对话框。

选中“共享文件夹”单选按钮，在弹出的“编辑别名”对话框中将“别名”设置为site；在“访问权限”中选择“读取”；在“应用程序权限”中选择“脚本”，如图2-20所示。

最后单击“确定”按钮关闭对话框，便完成了定义动态站点的准备工作。

<02>进入“高级”选项卡。

（1）选择“站点”|“新建站点”选项，选择“站点定义”对话框中的“高级”选项卡。

（2）从“分类”列表框中选择“本地信息”（默认选项）选项，如图2-21所示。

<03>设置“本地信息”的各参数（见图2-22<04>设置“测试服务器”的各参数（见图2-23）。

<05>显示结果。

（3）测试站点<01>将ch02\ test.asp文件复制到C:\site文件夹中，并使用Dreamweaver 8 打开test.asp。

<02>单击浏览器中“预览/调试”按钮，或者按F12键在浏览器中运行test.asp页面。

出现如图2-25所示的成功页面。

若浏览器提示找不到服务器，则需重新搭建ASP服务器。

3、巩固练习练习站点的建立，及其基本操作。

七、作业处理在课堂上要求每一个同学在F盘下建立一个名为”我的动态站点”的文件夹，将其设置为虚拟目录，在dreamweaver中创建一个动态站点，将站点信息存放到我的动态站点文件夹中。

八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT 课件进行演示。

第三章文本及其格式化课题：输入文本及其格式化一、教学基本内容1、输入普通文本2、插入符号、日期3、使用项目列表二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、插入符号、空格和日期2、使用项目列表难点：1、项目列表五、教学目的1、掌握文本输入方法2、掌握日期的插入3、掌握项目列表的使用六、教学过程1、引入首先例用一个已完成的网页，让学生来看别人的设置，由此引入文本的格式化。

2、讲授新课（1）文本的输入两种方法：a:直接在文档窗口中输入文本。

即先选择要插入文本的位置，然后直接输入文本。

b:在其他编辑器中复制已经生成的文本，然后切换到Dreamweaver 8文档窗口中，将选取插入点，然后选择“编辑”|“粘贴”选项。

（2）创建项目列表类型：无序列表、有序列表、定义列表、目录列表和菜单列表。

（3）插入日期3、巩固练习练习各种项目列表的使用七、作业处理要求每一个同学建立一个名为“我的网页”的空白文档，在网页中输入文字，然后在右下角插入日期，在内容当中便用有序列表。

八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用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 常用属性与值六、教学过程向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。