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