《Dreamweaver网页设计》教案设计

合集下载

DreamWeaver网页制作公开课教案

DreamWeaver网页制作公开课教案

最新DreamWeaver网页制作公开课教案第一章:DreamWeaver概述1.1 课程介绍了解DreamWeaver在网页制作中的地位和作用掌握DreamWeaver的基本功能和特点熟悉DreamWeaver的操作界面1.2 DreamWeaver的功能特点代码编辑与可视化编辑相结合丰富的网页布局功能强大的CSS样式管理支持多种编程语言跨平台兼容性1.3 DreamWeaver的操作界面掌握工具栏、菜单栏、状态栏等主要组件的使用自定义工作区布局第二章:网页制作基础2.1 HTML基础掌握HTML的基本结构熟悉常用的HTML标签及其属性了解HTML5的新特性2.2 CSS样式掌握CSS的基本语法熟悉选择器、属性和值的使用了解CSS盒模型和布局2.3 文本与图像插入与编辑文本插入与编辑图像设置图像属性了解多媒体的使用第三章:网页布局与排版3.1 表格布局创建表格调整表格大小和列宽设置表格边框和颜色掌握表格的合并与拆分3.2 框架布局创建框架设置框架属性嵌入其他网页或外部了解内联框架的使用3.3 CSS布局掌握Flexbox布局掌握Grid布局了解CSS Grid Layout与Flexbox的比较第四章:网页交互与动画4.1 表单与事件创建表单元素添加表单事件处理函数了解表单验证与提交4.2 JavaScript基础了解JavaScript语法和基本概念掌握JavaScript在DreamWeaver中的使用编写简单的JavaScript代码4.3 CSS动画与过渡掌握CSS动画的基本语法了解不同动画效果的实现熟悉过渡效果的设置第五章:网页优化与发布5.1 网页优化了解网页优化的目的和方法掌握关键词选取与优化优化图片大小与格式了解网页加载速度的优化5.2 网页发布配置网站服务器了解FTP传输协议将网页到服务器掌握网页发布的注意事项第六章:DreamWeaver 高级功能6.1 模板与库创建可重用的模板了解模板的使用和限制使用库项目保存可重复使用的元素应用库项目到多个页面6.2 组件与行为创建自定义组件了解组件的嵌套和使用添加行为以实现页面交互掌握行为的管理和删除6.3 Spry 效果和组件使用Spry菜单栏和导航栏掌握Spry选项卡和折叠面板应用Spry验证表单元素了解Spry效果的实现原理第七章:CSS 高级应用7.1 CSS 高级选择器理解伪类和伪元素选择器掌握层次选择器和属性选择器了解结构伪类选择器实践复杂选择器的应用7.2 CSS 高级布局技术使用CSS浮动和清除浮动掌握CSS定位(相对、绝对、固定)了解Flexbox和Grid布局的高级应用实践响应式设计的布局技巧7.3 CSS 预处理器了解Sass和Less等预处理器的作用掌握预处理器的基本语法将预处理器与DreamWeaver结合使用实践预处理器提高CSS的可维护性第八章:网页编程语言8.1 JavaScript 进阶理解函数和闭包掌握JavaScript对象和类学习事件处理程序和异步编程实践JavaScript在DreamWeaver中的高级应用8.2 HTML5 和CSS3了解HTML5的新特性掌握HTML5文档类型和结构学习CSS3的新特性和高级应用实践HTML5和CSS3在现代网页设计中的应用8.3 服务器端编程了解服务器端编程的基本概念学习服务器端脚本语言(如PHP、Python等)掌握服务器端编程的常见任务实践与DreamWeaver结合的服务器端编程第九章:网页项目实战9.1 项目规划与设计学习项目需求分析和规划掌握网页设计的基本原则了解设计工具(如Adobe XD、Sketch等)的使用实践完成一个简单的网页设计项目9.2 网页开发流程学习网页开发的步骤和最佳实践掌握网页编码和代码审查了解版本控制工具(如Git)的使用实践完成一个完整的网页开发项目9.3 项目部署与维护学习网页项目的部署流程掌握网站服务器的基本配置了解网站维护和更新的方法实践部署和维护一个网页项目第十章:网页设计与制作的未来趋势10.1 响应式网页设计了解响应式网页设计的重要性掌握媒体查询和响应式布局技术学习如何使用DreamWeaver进行响应式设计实践创建适用于多种设备的响应式网页10.2 前端框架和库学习流行的前端框架(如React、Vue等)掌握前端库的使用和集成了解框架和库对网页制作的影响实践使用前端框架构建复杂的网页应用10.3 网页制作的未来技术了解WebAssembly和WebGL等新兴技术掌握Web性能优化的新技术学习可访问性和用户体验的最新趋势实践探索网页制作未来的发展方向重点解析重点解析:1. DreamWeaver的基本功能和特点2. HTML标签、属性和HTML5新特性3. CSS语法、选择器和盒模型4. 表格布局、框架布局和CSS布局5. 表单与事件、JavaScript基础和CSS动画6. 模板与库、组件与行为、Spry效果和组件7. CSS高级选择器、布局技术和预处理器8. JavaScript进阶、HTML5和CSS3、服务器端编程9. 网页项目实战流程、部署与维护10. 响应式网页设计、前端框架和库、网页制作的未来技术难点解析:1. HTML5和CSS3的新特性和高级应用2. JavaScript的高级概念和异步编程3. 响应式网页设计和前端框架的使用4. 服务器端编程和版本控制工具的使用5. 网页项目规划和设计的实践应用。

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案一、教案简介二、教学目标1. 掌握Dreamweaver的界面结构和基本操作。

2. 学会使用Dreamweaver制作和管理网页布局。

3. 掌握在Dreamweaver中插入和编辑各种网页元素,如文本、图片、等。

4. 学会使用CSS样式表美化网页。

5. 掌握在Dreamweaver中进行网页代码编辑和调试。

三、教学内容1. Dreamweaver的安装和界面介绍。

2. 网页制作的基本流程和规范。

3. 文本的插入、编辑和格式设置。

4. 图片的插入、编辑和优化。

5. 的创建和管理。

四、教学方法采用讲解、演示、实践相结合的教学方法。

教师先进行理论知识讲解和操作演示,学生跟随实践,巩固所学知识。

在实践过程中,教师会提供指导和解答疑问。

五、教学环境1. 计算机房,每台计算机安装有Dreamweaver软件。

2. 投影仪或白板,用于展示操作过程。

3. 教学PPT或教案文档。

六、教学评估1. 课堂参与度:观察学生在课堂上的积极参与程度,提问和回答问题的积极性。

2. 实践操作:评估学生在实践环节中制作网页的质量和完成情况。

3. 作业和练习:布置相关作业和练习题,评估学生的理解和掌握程度。

4. 期末考核:进行期末考核,包括理论知识和实践操作,以评估学生整体学习效果。

七、教学资源1. Dreamweaver软件:确保每台计算机都安装有Dreamweaver软件,以便学生实践操作。

2. 教学PPT或教案文档:提供清晰的教学内容和操作步骤,方便学生理解和跟随。

3. 网页设计素材:提供一些图片、字体等网页设计素材,供学生自由使用。

4. 网络资源:提供一些优秀的网页设计参考案例和教程,供学生学习和参考。

八、教学进度安排1. 教案一:Dreamweaver的安装和界面介绍(1课时)2. 教案二:网页制作的基本流程和规范(1课时)3. 教案三:文本的插入、编辑和格式设置(1课时)4. 教案四:图片的插入、编辑和优化(1课时)5. 教案五:的创建和管理(1课时)6. 实践环节:学生自主制作网页(4课时)7. 作业和练习:布置相关作业和练习题,学生进行理论知识巩固(1课时)8. 教学评估:进行课堂参与度、实践操作、作业和练习的评估(1课时)9. 期末考核:进行期末考核,包括理论知识和实践操作(2课时)九、教学注意事项1. 确保学生已经掌握基本的计算机操作技能,如文本编辑、图片浏览等。

Dreamweaver网页设计- 电子教案

Dreamweaver网页设计- 电子教案

1.1 基本知识
1.1.7 HTML(超文本链接标示语言) HTML是Hypertext Markup Language的缩写。它是一种简单、通用的全置标记 语言。HTML 文档是文本格式,可以用任何一种文本编辑器对它进行编辑, 也可以借助专业HTML编辑器对它进行可视化处理,如:Dreamweaver在 UNIX平台中,HTML文档的后缀名为“.html‖,而在 WINDOWS平台中则为 “.htm‖。网站的首页一般命名为index.htm, index.html, default.htm, default.html等。 1.1.8 Java Java是一种由Sun公司提出的,从C++发展而来的新型的程序设计语言。它可以 作为一个独立的程序而不需要浏览器的支持。然而对静态网页来说Java主要 用于创建Java Applet(Java小应用程序)。 1.1.9 JavaScript JavaScript是一种在网页中使用的脚本语言,它是由Netscape公司发明的,原来 的名字叫LiveScript。 注意:JavaScript的语法类似Java,两者的名字也有几分相似。但是,如要仅凭 此就认为两者有某种关系,那就错了。它们只是名字和语法相似,除此之外, 两者没有任何联系。
2.1 安装和启动Dreamweaver
(2)接着出现欢迎使用Dreamweaver和一些版权警告信息,如图2-2所 示。
图2-2―欢迎使用和版权警告” 对话框
2.1 安装和启动Dreamweaver
(3)单击“下一步”按钮,出现Dreamweaver―许可证协议”对话框,
选择“我接收该许可证协议中的条款(A)”,如图2-3所示。
图2-7 安装完成
2.2 Dreamweaver的操作界面组成

网页设计Dreamweaver教案

网页设计Dreamweaver教案

网页设计Dreamweaver教案第一章:Dreamweaver概述1.1 课程目标了解Dreamweaver的基本功能和特点熟悉Dreamweaver的工作界面掌握Dreamweaver的基本操作1.2 教学内容Dreamweaver的功能和特点Dreamweaver的工作界面Dreamweaver的基本操作1.3 教学步骤1. 介绍Dreamweaver的功能和特点2. 演示Dreamweaver的工作界面3. 讲解Dreamweaver的基本操作4. 学生练习操作Dreamweaver1.4 作业与练习制作一个简单的网页熟悉Dreamweaver的工作界面第二章:网页设计与布局2.1 课程目标学习网页设计的基本原则掌握网页布局的方法熟悉Dreamweaver的布局工具2.2 教学内容网页设计的基本原则网页布局的方法Dreamweaver的布局工具2.3 教学步骤1. 介绍网页设计的基本原则2. 演示网页布局的方法3. 讲解Dreamweaver的布局工具4. 学生练习网页设计和布局2.4 作业与练习设计并布局一个简单的网页熟悉Dreamweaver的布局工具第三章:HTML标签与属性3.1 课程目标学习HTML标签的基本概念掌握HTML标签的属性和使用方法熟悉Dreamweaver的标签插入工具3.2 教学内容HTML标签的基本概念HTML标签的属性和使用方法Dreamweaver的标签插入工具3.3 教学步骤1. 介绍HTML标签的基本概念2. 演示HTML标签的属性和使用方法3. 讲解Dreamweaver的标签插入工具4. 学生练习插入HTML标签3.4 作业与练习插入并使用HTML标签制作一个简单的网页熟悉Dreamweaver的标签插入工具第四章:CSS样式与布局4.1 课程目标学习CSS样式的基本概念掌握CSS样式的使用方法熟悉Dreamweaver的CSS样式编辑工具4.2 教学内容CSS样式的基本概念CSS样式的使用方法Dreamweaver的CSS样式编辑工具4.3 教学步骤1. 介绍CSS样式的基本概念2. 演示CSS样式的使用方法3. 讲解Dreamweaver的CSS样式编辑工具4. 学生练习编辑CSS样式4.4 作业与练习编辑CSS样式制作一个简单的网页熟悉Dreamweaver的CSS样式编辑工具第五章:网页交互与动画5.1 课程目标学习网页交互的基本概念掌握网页交互的方法熟悉Dreamweaver的交互工具5.2 教学内容网页交互的基本概念网页交互的方法Dreamweaver的交互工具5.3 教学步骤1. 介绍网页交互的基本概念2. 演示网页交互的方法3. 讲解Dreamweaver的交互工具4. 学生练习网页交互和动画制作5.4 作业与练习制作一个带有交互和动画的网页熟悉Dreamweaver的交互工具第六章:网页素材与图像处理6.1 课程目标学习网页素材的基本概念掌握图像处理的方法熟悉Dreamweaver的图像插入和编辑工具6.2 教学内容网页素材的基本概念图像处理的方法Dreamweaver的图像插入和编辑工具6.3 教学步骤1. 介绍网页素材的基本概念2. 演示图像处理的方法3. 讲解Dreamweaver的图像插入和编辑工具4. 学生练习插入和编辑图像6.4 作业与练习插入和编辑图像制作一个简单的网页熟悉Dreamweaver的图像插入和编辑工具第七章:网页与导航7.1 课程目标学习网页的基本概念掌握网页的方法熟悉Dreamweaver的插入和管理工具7.2 教学内容网页的基本概念网页的方法Dreamweaver的插入和管理工具7.3 教学步骤1. 介绍网页的基本概念2. 演示网页的方法3. 讲解Dreamweaver的插入和管理工具4. 学生练习插入和管理7.4 作业与练习插入和管理制作一个简单的网页导航熟悉Dreamweaver的插入和管理工具第八章:表格与数据管理8.1 课程目标学习表格的基本概念掌握表格的制作和编辑方法熟悉Dreamweaver的表格工具8.2 教学内容表格的基本概念表格的制作和编辑方法Dreamweaver的表格工具8.3 教学步骤1. 介绍表格的基本概念2. 演示表格的制作和编辑方法3. 讲解Dreamweaver的表格工具4. 学生练习制作和编辑表格8.4 作业与练习制作和编辑表格展示一组数据熟悉Dreamweaver的表格工具第九章:表单与数据验证9.1 课程目标学习表单的基本概念掌握表单的制作和数据验证方法熟悉Dreamweaver的表单工具9.2 教学内容表单的基本概念表单的制作和数据验证方法Dreamweaver的表单工具9.3 教学步骤1. 介绍表单的基本概念2. 演示表单的制作和数据验证方法3. 讲解Dreamweaver的表单工具4. 学生练习制作和数据验证表单9.4 作业与练习制作和数据验证一个简单的表单熟悉Dreamweaver的表单工具第十章:网站发布与维护10.1 课程目标学习网站发布的基本概念掌握网站发布的步骤熟悉Dreamweaver的网站发布和管理工具10.2 教学内容网站发布的基本概念网站发布的步骤Dreamweaver的网站发布和管理工具10.3 教学步骤1. 介绍网站发布的基本概念2. 演示网站发布的步骤3. 讲解Dreamweaver的网站发布和管理工具4. 学生练习发布和管理网站10.4 作业与练习发布和管理一个简单的网站熟悉Dreamweaver的网站发布和管理工具重点和难点解析一、Dreamweaver概述重点和难点解析:Dreamweaver的工作界面和基本操作是初次接触该软件的学生必须要掌握的基础。

DreamWeaver网页制作公开课教案

DreamWeaver网页制作公开课教案

最新DreamWeaver网页制作公开课教案一、课程简介1. 课程目标:通过本课程的学习,使学员掌握DreamWeaver的基本操作,能够独立制作出满足需求的网页。

2. 课程内容:主要包括DreamWeaver的安装与使用、网页基本结构、HTML 代码、CSS样式、表单、JavaScript等。

3. 适用对象:无基础或有一定基础想进一步学习的网页制作爱好者。

二、教学资源1. 教材:最新版DreamWeaver教程。

2. 软件:DreamWeaver CC 2024。

3. 辅助工具:浏览器、代码编辑器。

三、教学安排1. 课时:共计30课时。

2. 上课方式:线上授课。

3. 课程进度:每课时1小时,每周安排2课时。

四、教学方法1. 讲授:讲解DreamWeaver的基本操作和功能。

2. 演示:展示实例,边操作边讲解。

3. 练习:学员跟练,老师辅导。

4. 答疑:学员提问,老师解答。

五、课程大纲1. 第一课时:DreamWeaver的安装与使用1.1 安装DreamWeaver CC 2024 1.2 启动与界面简介1.3 创建第一个网页2. 第二课时:网页基本结构2.1 HTML基本结构2.2 DreamWeaver的代码视图2.3 插入与编辑文本3. 第三课时:HTML代码3.1 标签3.2 段落与换行3.3 列表标签4. 第四课时:CSS样式4.1 了解CSS4.2 添加内部样式表4.3 应用外部样式表5. 第五课时:表单5.1 表单概述5.2 插入表单元素5.3 表单的高级应用六、第六课时:插入图像与多媒体6.1 插入图像6.2 设置图像属性6.3 插入Flash动画6.4 插入音频与视频七、第七课时:超与锚点7.1 创建超7.2 管理超7.3 创建锚点7.4 使用命名锚点八、第八课时:表格8.1 插入表格8.2 设置表格属性8.3 表格样式与布局8.4 表格排序功能九、第九课时:框架与框架集9.1 了解框架与框架集9.2 创建框架集9.3 插入框架9.4 管理框架内容十、第十课时:HTML5与CSS310.1 HTML5新特性10.2 新增HTML5标签10.3 CSS3样式10.4 响应式设计初步十一、第十一课时:响应式网页设计基础11.1 响应式网页设计概念11.2 使用DreamWeaver的Responsive Design视图11.3 媒体查询的使用11.4 实战:创建一个简单的响应式网页十二、第十二课时:移动端网页优化12.1 移动端网页设计原则12.2 触摸事件与滑动手势12.3 移动端布局技巧12.4 实战:优化一个移动端网页十三、第十三课时:网页布局与排版13.1 盒子模型13.2 浮动与清除13.3 定位与层叠13.4 实战:制作一个排版精美的网页十四、第十四课时:JavaScript基础14.1 JavaScript简介14.2 在DreamWeaver中编写JavaScript14.3 基本语法与数据类型14.4 实战:实现一个简单的JavaScript效果十五、第十五课时:综合实战与作品展示15.1 课程回顾与总结15.2 学员作品展示与点评15.3 网页制作常见问题与解决方法15.4 展望未来:网页制作与发展的趋势重点和难点解析本文主要介绍了最新DreamWeaver网页制作公开课的教案,涵盖了从安装与使用、网页基本结构、HTML代码、CSS样式、表单、JavaScript等基础知识,到响应式网页设计、移动端网页优化、网页布局与排版等高级应用。

Dreamweaver网页制作第二版教学设计

Dreamweaver网页制作第二版教学设计

Dreamweaver网页制作第二版教学设计一、课程简介本课程主要介绍如何使用Dreamweaver软件制作网页。

在课程中,学生将学习如何使用Dreamweaver的各个工具和功能来创建网页。

本课程适合初学者,不需要任何编程经验,但需要一定的电脑操作基础。

二、教学目标1.了解网页制作的基本概念和流程2.掌握Dreamweaver的主要工具和功能3.能够独立使用Dreamweaver软件制作简单的网页三、教学内容及安排第一节课:网页基础知识1.网页的组成与结构2.常用的网页文件格式3.HTML基础语法4.CSS基础知识第二节课:Dreamweaver基础1.Dreamweaver的工作界面和基本设置2.Dreamweaver常用工具介绍3.创建新网页和网页模板4.页面布局和样式编辑第三节课:网页内容编辑1.添加和编辑文本内容2.插入图片和链接3.创建表格和表单4.使用多媒体元素第四节课:网页交互特效1.JavaScript基础知识2.使用Dreamweaver创建JavaScript特效3.使用jQuery库实现动画效果第五节课:网页发布和维护1.网页上传和发布2.网站备份和恢复3.维护网站安全性和稳定性四、教学方法与手段本课程采用教师讲解和学生操作相结合的方式进行教学,注重实践操作和案例分析。

教学中将采用多媒体资料、教学PPT等方式辅助讲解,帮助学生更好地理解和掌握相关知识和技能。

五、考核方式学生将要求完成一个网页制作实践项目,根据实际情况进行评分。

六、参考资料1.《HTML&CSS设计与构建网站》(第2版),作者:Jon Duckett2.《JavaScript DOM编程艺术》(第2版),作者:Jeremy Keith /Jeffrey Sambells七、教学总结本课程旨在通过实践操作和案例分析,帮助学生掌握使用Dreamweaver制作网页的方法和技巧,为学生今后从事网页制作和相关职业打下坚实的基础。

网页设计Dreamweaver教案

网页设计Dreamweaver教案

**学院教案课程名称:网页设计 Dreamweaver 任课教师(职称):授课对象及时间:20**级**班 2022-2022学年第二学期 2 月 28 日 3、4 节授课题目(章节):第一章教具:多媒体机房课时安排:2基本教材:Dreamweaver 网页设计实用教程教学目的(分掌握、熟悉、了解三个层次):掌握 Dreamweaver CS6 基础知识掌握如何将 Photoshop设置为图象文件的外部编辑器。

掌握创建网页并插入文档教学重点*、难点#创建网页并插入文档通过打开“新建文档”对话框来设置新文件的各项参数教学主要内容与教学方法:教学主要内容通过 3 个工作任务向大家介绍 Dreamweaver CS6 的基本操作。

Dreamweaver 是一款功能强大的可视化的网页编辑与管理软件。

利用它,不仅可以轻松地创建跨平台和跨浏览器的页面,也可以直接创建具有动态效果的网页而不用自己编写一行源代码。

Dreamweaver CS6 最主要的优势在于能够进行多任务工作,并且在操作方法、界面风格方面更加人性化。

教学方法:演示法、讲授法课程作业或者思量题:教材第 28 页参考资料或者常用网址:教学后记:学生能大致了解基础知识,学生能大致了解网站的一些原理,使学生对网站的认识上了一个阶梯。

教研室主任意见:**学院教案课程名称:网页设计 Dreamweaver 任课教师(职称):授课对象及时间:20**级**班 2022-2022学年第二学期 3 月 14 日 3、4 节授课题目(章节):第二章教具:多媒体机房课时安排:2基本教材:Dreamweaver 网页设计实用教程教学目的(分掌握、熟悉、了解三个层次):掌握如何创建网站。

掌握以 FTP 连接方式并定义远程站点教学重点*、难点#控制站点结构,管理站点中的每一个文件定义远程站点教学主要内容与教学方法:教学主要内容:将通过“以 FTP 连接方式定义远程站点”和“建立 MyTestm 网站”共 2 个工作任务向大家介绍如何创建、设计网站。

Dreamweaver网页设计与制作教学大纲教案

Dreamweaver网页设计与制作教学大纲教案

《Dreamweaver网页设计与制作》教学大纲教案课程介绍:本课程是一门实践性和概念性都很强的面向实际应用的课程。

Dreamweaver CC 2019是由Adobe公司开发的网页设计与制作软件。

Adobe公司在Dreamweaver这一软件的版本上不断升级,是为了使广大从事网页制作和网页设计工作的用户拥有性能更完善的得力工具,同时也是为了使刚刚步入设计领域的初学者能够拥有更加优秀的学习软件。

本书内容的讲解均以项目任务式案例为主线,通过任务引入引导学生进入任务学习的内容;通过任务知识的解析使学生能够深入学习软件功能;通过任务实施操作可以快速熟悉软件功能和艺术设计思路;通过扩展案例和项目演练可以拓展学生的实际应用能力,增强学生的软件使用技巧。

培训目标:➢发现网页中的美——网页设计基础➢熟悉设计工具——初识Dreamweaver CC 2019➢熟悉文本编辑——文本➢掌握素材使用——图像和多媒体➢掌握目标链接关系——超链接➢掌握页面布局——使用表格➢掌握美化页面——CSS样式➢了解固定页面布局——模板和库➢掌握页面的交互性——表单与行为➢掌握商业应用——综合设计实训学习时间:60学时。

培训内容:项目一、发现网页中的美——网页设计基础1.了解网页设计的相关应用。

2.明确网页设计的工作流程。

项目二、熟悉设计工具——初识Dreamweaver CC 20191.了解软件的操作界面。

2.了解站点的创建和编辑。

3.掌握网站框架的使用方法及技巧。

项目三、熟悉文本编辑——文本在当今这个网络时代,不管网页内容多么丰富,文本自始至终都还是网页中最基本的元素。

由于文本产生的信息量大,输入、编辑起来方便,并且生成的文件小,容易被浏览器下载,不会产生太多的等待时间,因此掌握好文本的使用,对于制作网页来说是最基本的要求。

任务3.1 制作青山别墅网页1. 通过对任务的引入和设计理念的讲解,使读者掌握制作青山别墅网页的设计思路。

《Dreamweaver网页设计》教学设计方案

《Dreamweaver网页设计》教学设计方案
《Dreamweaver网页设计》第三十七讲:网站发布;
《Dreamweaver网页设计》第四讲:HTML常用标记;
《Dreamweaver网页设计》第十五讲:创建CSS样式;
第二模块:HTML语言与CSS样式
常用的网页语法标记
定义CSS样式表
创建并链接到外部CSS样式
任务1:观看第3、4、15讲视频;
任务2:学习xxx参考资料
任务1:《Dreamweaver网页设计》第三讲:HTML语言基础;
《Dreamweaver网页设计》第四讲:HTML常用标记;
《Dreamweaver网页设计》第十五讲:创建CSS样式;
第三模块:
表单元素与模板库
表单对象
创建表单
处理表单:观看第16、17、18、23、24讲视频;
任务2:学习xxx参考资料
任务1:《Dreamweaver网页设计》第十六讲:创建模板;
《Dreamweaver网页设计》第十七讲:定义模板的可编辑区域;
《Dreamweaver网页设计》第十八讲:使用库;
《Dreamweaver网页设计》第二十三讲:认识表单对象;
《Dreamweaver网页设计》第二十四讲:表单的应用;
任务2:《Dreamweaver网页设计》-课程参考资料-广告页面排版技巧;
第四模块:
行为特效与网站发布
事件、动作、行为及其之间的关系
发布网站到服务器
任务1:观看第22、25、36、37讲视频;
任务2:学习xxx参考资料
任务1:《Dreamweaver网页设计》第二十二讲:时间轴及创建时间轴动画;
《Dreamweaver网页设计》第二十五讲:行为的使用;
《Dreamweaver网页设计》第三十六讲:网站测试;

DreamWeaver网页制作公开课教案

DreamWeaver网页制作公开课教案

最新DreamWeaver网页制作公开课教案一、课程简介1. 课程目标:通过本课程的学习,使学员掌握DreamWeaver的基本操作,能够独立制作出满足需求的网页。

2. 课程内容:涵盖DreamWeaver的安装与启动、界面熟悉、基本操作、HTML 代码编辑、CSS样式设置、表单创建、特效实现等。

3. 适用对象:无网页制作经验的初学者,以及对DreamWeaver有一定了解,希望进一步提高的学员。

二、教学准备1. 软件环境:安装有最新版DreamWeaver的计算机。

2. 硬件环境:投影仪、计算机、投影屏幕等。

3. 教学资料:教案、PPT、案例文件、素材文件等。

三、教学安排1. 课时:共计10课时,每课时45分钟。

2. 课程安排:第1课时:DreamWeaver的安装与启动、界面熟悉第2课时:DreamWeaver基本操作第3课时:HTML代码编辑第4课时:CSS样式设置第5课时:表单创建与编辑第6课时:图像与多媒体操作第7课时:超的使用第8课时:表格制作第9课时:框架页面布局第10课时:综合案例实战四、教学方法1. 讲授法:讲解DreamWeaver的基本操作、功能及使用技巧。

2. 演示法:通过实际操作,展示如何制作网页,使学员更好地理解与掌握。

3. 练习法:安排课后练习,巩固所学知识,提高实际操作能力。

4. 案例教学法:通过分析与制作案例,使学员掌握网页制作的实际应用。

五、课程评价1. 课堂参与度:评估学员在课堂上的积极参与程度,提问、回答问题等。

2. 课后练习:评估学员课后练习的完成情况,包括正确性和创新性。

3. 课程总结:要求学员在课程结束后,提交一份课程总结报告,概括所学内容、收获及改进建议。

4. 综合案例实战:评估学员在综合案例实战中的表现,包括设计思路、制作技巧等。

六、教学内容1. 图像与多媒体操作插入与编辑图像插入与编辑多媒体文件图像映射的使用数据检查器的应用2. 超的使用管理超创建网站地图检查的有效性七、教学内容3. 表格制作创建表格调整表格结构应用表格样式利用表格进行页面布局4. 框架页面布局创建框架设置框架属性处理框架中的内容消除框架边框八、教学内容5. CSS样式设置CSS基本概念创建与应用样式管理样式表利用CSS进行页面美化6. 表单创建与编辑添加表单元素设置表单属性验证表单数据九、教学内容7. 网站项目管理规划网站结构管理网站资源优化网站性能部署与维护网站8. 综合案例实战案例一:个人博客页面制作案例二:产品展示页面制作案例三:在线问卷调查制作案例四:响应式网页制作十、教学内容9. 扩展学习与资源探索DreamWeaver扩展插件了解网页设计趋势与技术推荐学习资源与社区参与评估自身学习成果与设定目标10. 课程总结与反馈回顾课程重点与个人收获分析学习中的挑战与解决方案提交课程反馈与改进建议规划后续学习路径与目标设定通过上述十个章节的教学内容,学员将能够全面掌握DreamWeaver网页制作的基本技能,并能够独立完成网页设计与制作任务。

Dreamweaver网页制作教案

Dreamweaver网页制作教案

Dreamweaver网页制作教案第一章:Dreamweaver概述1.1 课程介绍了解Dreamweaver作为网页制作工具的优势熟悉Dreamweaver的工作界面1.2 创建和管理网页创建新文档打开和保存网页管理标签库1.3 实践操作制作一个简单的网页学会使用Dreamweaver的实时视图和代码视图第二章:网页基本结构2.1 网页元素文本图像表格表单2.2 排版和格式化字体和大小颜色和样式段落对齐和间距2.3 实践操作制作一个包含文本、图像和的网页学习使用Dreamweaver的排版和格式化工具第三章:CSS样式3.1 CSS介绍了解CSS的作用和优势熟悉CSS的基本语法3.2 创建和应用CSS样式创建样式表应用样式到网页元素编辑和删除样式3.3 实践操作制作一个使用CSS样式的网页学习使用Dreamweaver的CSS面板第四章:网页布局4.1 布局技术表格布局CSS布局框架布局4.2 常用布局方法固定布局可变布局响应式布局4.3 实践操作制作一个使用表格布局的网页学习使用CSS布局和响应式布局第五章:表单和交互5.1 表单元素表单标签输入框选择框文件5.2 验证和提交表单表单验证方法提交表单到服务器接收服务器返回的数据5.3 实践操作制作一个简单的表单页面学习表单的验证和交互功能第六章:Dreamweaver 网站管理6.1 网站结构规划了解网站结构的重要性学习如何规划网站结构熟悉网站的目录和文件组织方式6.2 站点设置和管理创建和定义站点管理站点文件和目录更新和网站文件6.3 实践操作规划并创建一个简单的网站结构配置和管理Dreamweaver 站点第七章:Dreamweaver 模板和框架7.1 模板的概念和应用理解模板的作用学习如何创建和使用模板掌握模板的插入点和使用技巧7.2 框架和框架集了解框架和框架集的概念学习如何创建和编辑框架掌握框架的布局和内容管理7.3 实践操作创建一个简单的模板文件使用模板创建网站的多个页面制作一个使用框架的网页布局第八章:Dreamweaver 动画和多媒体8.1 动画技术概述了解Dreamweaver 支持的视频和动画格式学习如何插入和编辑动画元素8.2 多媒体元素的应用插入图像、音频和视频设置多媒体属性和行为掌握交互式多媒体元素的制作8.3 实践操作制作一个包含动画和多媒体元素的网页学习使用Dreamweaver 的行为面板为网页添加交互功能第九章:Dreamweaver 网页编程9.1 行为和事件理解行为和事件的概念学习如何使用行为为网页添加功能掌握常见行为的使用方法9.2 JavaScript 基础了解JavaScript 的基本概念学习如何在Dreamweaver 中编写JavaScript 代码掌握Dreamweaver 的JavaScript 调试工具9.3 实践操作编写简单的JavaScript 代码为网页添加功能学习使用Dreamweaver 的JavaScript 面板和调试工具第十章:Dreamweaver 网站发布和维护10.1 网站测试学习网站在不同浏览器和设备上的测试方法掌握网站性能测试和优化技巧10.2 网站发布了解网站发布的流程和注意事项学习如何使用Dreamweaver 发布网站10.3 网站维护和更新学习网站的日常维护和更新技巧掌握网站安全和备份方法10.4 实践操作对一个网站进行全面的测试和优化发布和维护一个简单的网站第十一章:Dreamweaver 数据库和动态内容11.1 数据库基础了解数据库的概念和作用学习如何连接和操作不同类型的数据库11.2 动态内容创建学习如何创建动态网页和表单掌握Dreamweaver 内置的服务器模型和数据源11.3 实践操作连接一个数据库并创建一个动态表单使用Dreamweaver 插入动态内容到网页第十二章:Dreamweaver 扩展性和高级技巧12.1 扩展Dreamweaver学习如何安装和使用Dreamweaver 插件和扩展掌握Dreamweaver 扩展的创建和分享12.2 高级网页技术学习如何使用CSS3 和HTML5掌握响应式设计和移动网页制作技巧12.3 实践操作制作一个使用CSS3 和HTML5 的网页创建一个响应式设计的网页layout第十三章:Dreamweaver 与其他工具的集成13.1 图像和图形编辑工具学习如何使用Adobe Photoshop 和Fireworks 与Dreamweaver 协同工作掌握图像和图形的导入和编辑技巧13.2 代码编辑和调试工具学习如何使用Dreamweaver 的代码编辑功能掌握使用外部代码编辑器和调试工具的技巧13.3 实践操作使用Photoshop 和Fireworks 制作网页素材在Dreamweaver 中导入和应用图像和图形第十四章:Dreamweaver 项目管理和团队协作14.1 项目管理学习如何管理Dreamweaver 项目文件和资源掌握Dreamweaver 项目的备份和版本控制14.2 团队协作了解团队协作的重要性学习如何在团队中使用Dreamweaver 和版本控制系统14.3 实践操作管理一个Dreamweaver 项目并实现版本控制在团队中使用Dreamweaver 进行协作第十五章:Dreamweaver 综合实战项目15.1 项目规划和设计学习如何进行项目规划和设计熟悉项目的时间管理和资源分配15.2 项目实施学习如何实施Dreamweaver 项目掌握项目的时间管理和问题解决技巧15.3 项目评估和优化学习如何评估Dreamweaver 项目的效果掌握项目的优化和维护技巧15.4 实践操作完成一个Dreamweaver 综合实战项目进行项目评估和优化以提高网站质量和性能重点和难点解析重点:Dreamweaver的工作界面和基本操作网页基本结构元素的插入和编辑CSS样式的创建和应用网页布局技术,包括表格布局、CSS布局和响应式布局表单的创建和交互功能的实现网站的管理和站点的设置模板和框架的使用动画和多媒体元素的插入网页编程,包括行为和事件的应用、JavaScript基础网站的测试、发布和维护数据库连接和动态内容的创建扩展性和高级技巧的运用与其他工具的集成和项目管理的实践团队协作和综合实战项目的实施难点:CSS样式的复杂应用和调试网页布局的高级技巧,如响应式布局的实现表单验证和交互逻辑的编写网站管理和站点配置的细节处理模板和框架的精细操作JavaScript代码的编写和调试数据库连接和动态内容的管理扩展性和高级技巧的深入应用团队协作和项目管理的策略制定综合实战项目的规划和实施通过理解和掌握这些重点和难点,学生将能够熟练使用Dreamweaver进行网页制作,并能够应对真实世界的网页设计挑战。

网页设计Dreamweaver教案

网页设计Dreamweaver教案

网页设计Dreamweaver教案第一章:Dreamweaver简介1.1 课程目标了解Dreamweaver的发展历程和版本更新掌握Dreamweaver的基本功能和操作界面熟悉Dreamweaver在网页设计中的应用场景1.2 教学内容Dreamweaver的起源和发展历程Dreamweaver的版本更新及特点Dreamweaver的操作界面及功能介绍Dreamweaver在网页设计中的应用案例1.3 教学方法讲授与示范相结合,让学生了解Dreamweaver的发展历程和版本更新实践操作,让学生掌握Dreamweaver的基本功能和操作界面案例分析,让学生熟悉Dreamweaver在网页设计中的应用场景1.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例1.5 教学评估课后作业:让学生制作一个简单的网页,巩固所学内容课堂讨论:引导学生分享自己在网页设计中使用Dreamweaver的经验和心得第二章:创建和管理网页2.1 课程目标掌握Dreamweaver的网页创建和管理功能熟悉网页编辑区的基本操作了解网页、描述和关键词的设置方法2.2 教学内容Dreamweaver的网页创建和管理功能介绍网页编辑区的基本操作网页、描述和关键词的设置方法2.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver的网页创建和管理功能实践操作,让学生熟悉网页编辑区的基本操作案例演示,让学生了解网页、描述和关键词的设置方法2.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例2.5 教学评估课后作业:让学生创建一个简单的网页,并设置网页、描述和关键词课堂讨论:引导学生分享自己在网页设计中关于网页、描述和关键词设置的经验和心得第三章:编辑和排版文本3.1 课程目标掌握Dreamweaver中文本的编辑和排版功能熟悉字体、颜色、大小和样式的设置方法了解文本对齐、行间距和段落格式的设置方法3.2 教学内容Dreamweaver中文本的编辑和排版功能介绍字体、颜色、大小和样式的设置方法文本对齐、行间距和段落格式的设置方法3.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中文本的编辑和排版功能实践操作,让学生熟悉字体、颜色、大小和样式的设置方法案例演示,让学生了解文本对齐、行间距和段落格式的设置方法3.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例3.5 教学评估课后作业:让学生编辑和排版一个文本内容丰富的网页课堂讨论:引导学生分享自己在网页设计中关于文本编辑和排版的经验和心得第四章:添加图像和媒体元素4.1 课程目标掌握Dreamweaver中图像和媒体元素的操作功能熟悉图像和媒体元素的插入、编辑和格式设置方法了解图像和媒体元素在网页设计中的应用场景4.2 教学内容Dreamweaver中图像和媒体元素的操作功能介绍图像和媒体元素的插入、编辑和格式设置方法图像和媒体元素在网页设计中的应用场景4.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中图像和媒体元素的操作功能实践操作,让学生熟悉图像和媒体元素的插入、编辑和格式设置方法案例分析,让学生了解图像和媒体元素在网页设计中的应用场景4.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例4.5 教学评估课后作业:让学生添加图像和媒体元素到一个网页中,提升网页视觉效果课堂讨论:引导学生分享自己在网页设计中关于图像和媒体元素应用的经验和心得第五章:创建和应用超5.1 课程目标掌握Dreamweaver中超的创建和应用功能熟悉超的类型和创建方法了解超的目标设置和命名规则5.2 教学内容-第六章:表格和布局6.1 课程目标掌握Dreamweaver中表格的创建和编辑功能熟悉表格的布局和样式设置方法了解表格在网页设计中的应用场景6.2 教学内容Dreamweaver中表格的创建和编辑功能介绍表格的布局和样式设置方法表格在网页设计中的应用场景6.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中表格的创建和编辑功能实践操作,让学生熟悉表格的布局和样式设置方法案例分析,让学生了解表格在网页设计中的应用场景6.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例6.5 教学评估课后作业:让学生创建一个表格布局的网页,展示信息列表课堂讨论:引导学生分享自己在网页设计中关于表格布局的经验和心得第七章:表单和动画7.1 课程目标掌握Dreamweaver中表单的创建和编辑功能熟悉表单元素和属性的设置方法了解动画在网页设计中的应用场景和创建方法7.2 教学内容Dreamweaver中表单的创建和编辑功能介绍表单元素和属性的设置方法动画在网页设计中的应用场景和创建方法7.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中表单的创建和编辑功能实践操作,让学生熟悉表单元素和属性的设置方法案例分析,让学生了解动画在网页设计中的应用场景和创建方法7.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例7.5 教学评估课后作业:让学生创建一个包含表单和动画的网页,实现用户互动课堂讨论:引导学生分享自己在网页设计中关于表单和动画应用的经验和心得第八章:CSS样式和模板8.1 课程目标掌握Dreamweaver中CSS样式的创建和应用功能熟悉CSS选择器和属性的设置方法了解模板在网页设计中的应用场景和创建方法8.2 教学内容Dreamweaver中CSS样式的创建和应用功能介绍CSS选择器和属性的设置方法模板在网页设计中的应用场景和创建方法8.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中CSS样式的创建和应用功能实践操作,让学生熟悉CSS选择器和属性的设置方法案例分析,让学生了解模板在网页设计中的应用场景和创建方法8.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例8.5 教学评估课后作业:让学生创建一个CSS样式和模板应用的网页,提升网页美观度课堂讨论:引导学生分享自己在网页设计中关于CSS样式和模板应用的经验和心得第九章:网站发布和管理9.1 课程目标掌握Dreamweaver中网站的发布和管理功能熟悉FTP协议和网站方法了解网站维护和优化的基本方法9.2 教学内容Dreamweaver中网站的发布和管理功能介绍FTP协议和网站方法网站维护和优化的基本方法9.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中网站的发布和管理功能实践操作,让学生熟悉FTP协议和网站方法案例分析,让学生了解网站维护和优化的基本方法9.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例9.5 教学评估课后作业:让学生将所学网页发布到服务器,进行实际操作课堂讨论:引导学生分享自己在网站发布和管理中的经验和心得第十章:网页设计案例分析10.1 课程目标分析实际网页设计案例了解网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.2 教学内容分析实际网页设计案例讨论网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.3 教学方法讲授与示范相结合,让学生分析实际网页重点和难点解析1. 章节一和二:Dreamweaver简介和创建与管理网页重点解析:理解Dreamweaver的历史和发展,熟悉其操作界面和基本功能,以及如何有效地创建和管理网页。

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案一、教学目标1. 了解Dreamweaver的基本功能和操作界面。

2. 学会使用Dreamweaver创建、编辑和管理网页。

3. 掌握Dreamweaver中的基本标签和属性。

4. 学会使用Dreamweaver的布局功能进行网页设计。

5. 掌握Dreamweaver的预览和发布网页的方法。

二、教学内容1. Dreamweaver的基本功能和操作界面介绍Dreamweaver的启动和关闭方法,熟悉Dreamweaver的操作界面,包括菜单栏、工具栏、状态栏等。

2. 创建、编辑和管理网页学习创建新网页的方法,编辑网页的内容,删除和复制网页元素,以及管理网页的打开和保存。

3. 基本标签和属性介绍HTML基本标签,如标签、段落标签、图片标签等,并学习如何使用这些标签在Dreamweaver中创建和编辑网页内容。

4. 布局功能学习使用Dreamweaver的布局功能,包括表格、框架和Div标签,进行网页的设计和排版。

5. 预览和发布网页学习在Dreamweaver中预览网页的方法,以及如何将网页发布到互联网上。

三、教学方法1. 讲授法:讲解Dreamweaver的基本功能、操作界面和基本标签。

2. 演示法:展示如何使用Dreamweaver进行网页设计和排版。

3. 练习法:让学生动手实践,创建和编辑网页。

4. 提问法:引导学生思考和解决问题。

四、教学步骤1. 启动Dreamweaver,熟悉操作界面。

2. 创建新网页,学习编辑网页内容。

3. 学习使用基本标签,如、段落和图片标签。

4. 练习使用表格、框架和Div标签进行网页布局。

5. 预览和保存网页,了解发布网页的方法。

五、教学评价1. 课后作业:让学生独立完成一个简单的网页设计,检验对Dreamweaver的掌握程度。

2. 课堂练习:在课堂上让学生动手实践,实时评价学生的操作能力。

3. 学生互评:让学生互相评价,促进学习交流。

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案第一章:Dreamweaver简介1.1 课程目标:了解Dreamweaver的发展历程和功能特点掌握Dreamweaver的基本操作界面1.2 教学内容:Dreamweaver的历史和发展Dreamweaver的功能特点Dreamweaver的操作界面及基本操作1.3 教学方法:讲解与演示相结合学生实际操作练习1.4 教学资源:PowerPoint课件Dreamweaver软件1.5 教学评估:课堂问答学生操作练习情况第二章:网页制作基础2.1 课程目标:掌握HTML标签的使用学会使用Dreamweaver的代码视图2.2 教学内容:HTML标签的基本概念和使用方法Dreamweaver代码视图的操作方法常用的HTML标签及其功能2.3 教学方法:讲解与演示相结合学生实际操作练习2.4 教学资源:PowerPoint课件Dreamweaver软件2.5 教学评估:课堂问答学生操作练习情况第三章:图像和多媒体的使用3.1 课程目标:学会在网页中插入图像和多媒体文件了解图像和多媒体文件的基本属性设置3.2 教学内容:图像和多媒体文件在网页中的作用在Dreamweaver中插入图像和多媒体文件的方法图像和多媒体文件的基本属性设置3.3 教学方法:讲解与演示相结合学生实际操作练习3.4 教学资源:PowerPoint课件Dreamweaver软件图像和多媒体文件素材3.5 教学评估:课堂问答学生操作练习情况第四章:超的使用4.1 课程目标:学会创建和设置超了解超的类型及应用场景4.2 教学内容:超的概念和作用在Dreamweaver中创建和设置超的方法超的类型及应用场景4.3 教学方法:讲解与演示相结合学生实际操作练习4.4 教学资源:PowerPoint课件Dreamweaver软件超素材4.5 教学评估:课堂问答学生操作练习情况第五章:表格的使用5.1 课程目标:学会使用Dreamweaver创建和编辑表格了解表格的基本属性设置5.2 教学内容:表格在网页中的作用在Dreamweaver中创建和编辑表格的方法表格的基本属性设置5.3 教学方法:讲解与演示相结合学生实际操作练习5.4 教学资源:PowerPoint课件Dreamweaver软件表格素材5.5 教学评估:课堂问答学生操作练习情况第六章:CSS样式应用6.1 课程目标:掌握CSS样式的概念和作用学会在Dreamweaver中创建和应用CSS样式6.2 教学内容:CSS样式的基本概念Dreamweaver中的CSS面板操作创建和应用CSS样式的方法CSS选择器及属性设置6.3 教学方法:讲解与演示相结合学生实际操作练习6.4 教学资源:PowerPoint课件Dreamweaver软件CSS样式素材6.5 教学评估:课堂问答学生操作练习情况第七章:布局页面7.1 课程目标:学会使用Dreamweaver进行页面布局了解常用的页面布局方法7.2 教学内容:页面布局的基本概念使用Dreamweaver的布局工具进行页面布局常用的页面布局方法(如:固定布局、百分比布局、弹性布局等)7.3 教学方法:讲解与演示相结合学生实际操作练习7.4 教学资源:PowerPoint课件Dreamweaver软件页面布局素材7.5 教学评估:课堂问答学生操作练习情况第八章:表单的使用8.1 课程目标:学会在网页中创建和使用表单了解表单的基本属性设置8.2 教学内容:表单在网页中的作用在Dreamweaver中创建和编辑表单的方法表单的基本属性设置表单元素(如:文本框、复选框、单选按钮等)的使用8.3 教学方法:讲解与演示相结合学生实际操作练习8.4 教学资源:PowerPoint课件Dreamweaver软件表单素材8.5 教学评估:课堂问答学生操作练习情况第九章:Dreamweaver与服务器端编程9.1 课程目标:了解Dreamweaver与服务器端编程的关系学会在Dreamweaver中插入服务器端代码9.2 教学内容:服务器端编程语言(如:PHP、JavaScript等)的基本概念在Dreamweaver中插入服务器端代码的方法Dreamweaver与服务器端代码的交互方式9.3 教学方法:讲解与演示相结合学生实际操作练习9.4 教学资源:PowerPoint课件Dreamweaver软件服务器端代码素材9.5 教学评估:课堂问答学生操作练习情况第十章:综合案例实训10.1 课程目标:学会运用所学知识完成一个完整的网页设计项目提高实际操作能力和网页设计水平10.2 教学内容:网页设计项目的需求分析网页设计的基本流程综合运用所学知识完成网页设计项目10.3 教学方法:学生分组进行实际操作教师指导与解答疑问10.4 教学资源:Dreamweaver软件案例素材及设计工具10.5 教学评估:学生完成的项目成果展示重点和难点解析第一章:Dreamweaver简介1. Dreamweaver的功能特点2. Dreamweaver的操作界面及基本操作难点解析:Dreamweaver功能特点的深入理解,特别是与其它网页编辑器的区别。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

1 2

⏹⏹⏹⏹


⏹◆

作业:
课堂作业:1.叙述3种模式的概念及切换方法。

2.说出表格和布局表格的作用
3.叙述“表格扩展模式”的作用
4.什么是间隔图像?
书面作业:课后习题。

小结:通过与学生熟悉的word中表格的操作对照讲解,本章的讲解显得较轻松;让学生上台操作,提高了学生的学习积极性和主动性,教学效果较好。

第5章使用框架布局网页
教学目标与要求了解框架网页的概念;熟练创建、保存框架网页,并设置框架和框架集的属性;框架中超级的创建和目标属性设置
教学重点熟练创建保存框架网页,并设置框架和框架集的属性;框架中超级的创建和目标属性设置
教学难点框架网页的概念和保存;框架中超级的创建和目标属性设置
教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,提问式教学。

教学课时2学时
第5章框架网页教学提示
5.1框架和框架集的概念、结构和应用
1.基本概念
●框架网页、框架集、框架
●框架和框架集的关系
2.框架网页的结构
3.认识框架面板:
4.框架网页的应用:通常用于导航。

5.框架网页的优缺点
5.2 创建和保存框架与框架集
5.2.1 使用预设的框架集通过看看和分析知名使用框架的布局效果,引入框架和框架集的概念
1.创建新的空预设框架的具体操作步骤。

修改框架名称必须以字母开头,可以包含数字、下划线(_);但不允许是javascript中的保留字(如top或navigator)、连字符(-)、句点、空格和;而且区分大小写。

2.创建预设的框架集并在某一框架中显示现有文档
5.2.2 创建和编辑框架
1.创建框架
2.删除框架
3.建立嵌套的框架集
4.保存框架和框架集
5.3设置框架及框架集的属性
1.选择框架:通过“框架”面板来选择框架和子框架。

2.设置框架属性
⏹框架的背景颜色可以在页面属性中进行设置
⏹在框架的属性面板中进行设置框架的的名称、源文件、、边距、
滚动、边框和能否调整大小等。

3.设置框架集属性:边框、边框大小和边框颜色。

5.4设置框架集中的超级
5.4.1在框架网页中建立超
5.4.2框架网页中设置超级的目标打开方式
1.相对目标:_blank 、_top 、_parent、_self
2.绝对目标:mainframe、Leftframe、Rightframe、Topframe。

5.6课堂实例――制作一个框架网页举例演示框架的创建和保存操作
打开框架面板,查看并总结框架和框架集的属性设置及其含义
演示框架中的超级效果
举例演示框架网页的设计与制作
实用标准
第8章交互(行为、图AP元素和时间轴的综合运用,以及javascript)
教学目标与要求1.熟练地应用行为,能够随心所欲地制作出具交互功能的网
页;
2.掌握时间轴的概念和基本用法;
3.通过对行为的学习应用,增加网页设计的特殊效果,提高
学生对学习网页制作的兴趣,培养大家的动手操作能力。

4.了解java脚本的基本用法
教学重点1.行为的概念和创建,2.使用DW置的行为3.AP元素、行为和时间轴的综合运用
教学难点1.使用DW置的行为;2.高级行为的应用;3.AP元素、行为和时间轴的综合运用
教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲
授,师生互动,提问式教学;任务驱动、引导教学、理论与
操作紧密结合。

教学课时4课时
第8章交互(行为、图AP元素和时间轴的综合运用,以
及js)
教学提示
问题:大家已经会在网页中的特殊效果如:弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放等,这样的动态网页是如何制作的呢?使用行为就可以实现。

8.1.1初步认识行为
1、DW行为的引出
2、行为的概念
3、与行为相关的三个重要部分:对象、事件和动作。

4、认识行为面板
8.1.2行为的创建、修改和更新
创建行为的三个步骤
修改行为抛出问题,导入新课
举出几个典型的带有行为的网页显示行为的应用,进而引出行为的作用和相关概念(25分钟)
举例讲解行为的创建步骤。

更新行为
8.1.3使用DW置的行为
dw8.0自带的行为主要有:
1.弹出消息2、“播放声音”实例
3、跳转菜单和跳转菜单开始
4、打开浏览器窗口
5、交换图象与恢复交换图象
6、控制shockshave或flash
7、设置导航栏图像8、设置文本
9、显示弹出菜单(下拉菜单)10、显示和隐藏AP元素
11、拖动AP元素12、滚动的AP元素
8.1.4高级行为的应用
1、插入滚动字幕
示例:文本自动向上循环滚动,鼠标放到上面还会暂停
2、下载安装扩展插件
3、下载网页特效,适当修改相关代码,再把代码放到代码视图的具体位置。

举例:花瓣、棉花糖。

8.2AP元素、行为和时间轴的综合运用
1.时间轴面板
2、时间轴和图AP元素的综合运用
(1)滚动字幕(2)网页浮动动画
(3)设置文字的阴影效果(4)幻灯片效果
(5)控制图像播放动画(6)制作滚动的折叠菜单
(7)具有预览功能的电子相册效果
8.3在网页中应用javascript
1.认识代码片段面板
2.应用代码片段
3.应用举例(10分钟)
演示常用的DW置行为的操作步骤和要领,部分调整在机房讲解;(30分钟)
本部分为选讲容。

举例讲解高级行为的应用;重点讲解4种扩展插件的安装和应用效果。

(30分钟)
举典型实例演示AP元素和行为综合应用效果(40分钟)引入特效代码,举例讲解js在Dw中的应用。

(20分钟)
作业:课后习题1、2、3题
第13章综合实例——制作“宝贝爱”
教学目标与要求
1.学会编辑设置和管理站点
2.理解站点面板的设置使用
3.能打开、编辑、删除、上传站点。

教学重点创建和管理站点与站点文件
教学难点编辑、设置和管理站点
教学方法任务驱动、引导教学,学生自学为主,教师讲授为辅,简单
演示
教学课时1课时
第13章综合实例——制作“宝贝爱”教学提示13.1 规划
13.1.1 命名
一般情况下,公司直接以公司名作为名即可,个人可依自己爱好
命名。

名应该能反映出的性质。

本章要制作的是一个专营婴幼用
品的公司,名为公司名“宝贝爱”。

13.1.2 划分栏目并确定结构
如果想要使建站的过程更顺利,就必须事先规划好的栏目和结构,这样在后面的制作中才能做到有章可循。

经过对容的分析,将该划分为以下6个栏目:首页、公司简介、我们的产品、我们的服务、我们的动向和联系我们。

13.1.3 确定风格
一般情况下,要根据公司的性质或标志来确定风格。

本章要制作
一个专营婴幼用品的公司,所以选用了代表沉静、理智、诚实的
蓝色和代表生命、活力、青春的绿色作为主色调;又以浅灰色作
为点缀,不仅突出了重点,又能产生强烈的视觉效果。

整个看起
以“宝贝
爱”为例,
演示整个
的制作过
程。

来特色鲜明,生机勃勃。

13.1.4 设置本地站点目录并定义站点
在编辑网页之前,首先要定义一个站点。

站点的定义我们在前面已讲了不止一次,这里只简单地介绍一下定义过程。

14.1.5 收集和整理素材
网页设计素材的收集是相当重要的。

通常情况下,素材的来源主要有下面几种。

●客户提供的素材:主要是与产品或企业相关的图像和文字,比
如产品外观图像等,本例中主要指“我们的产品”中用到的图
片。

●网上收集的素材:主要是一些辅助性的图像,这些图像的装饰
性较强,比如背景图像等。

●独自创作的素材:主要是整个页面中视觉面积最大、最有说服
力的图像,比如广告图像、标题图片等。

13.2 制作
13.2.1制作库项目:考虑把信息制作成库项目
13.2.2制作网页模板
1.新建模板文档
2.设置模板容
3.创建可编辑区域
4.在模板中定义CSS样式表
14.2.4制作首页
在制作好网页模版后,下面在其基础上制作的首页。

13.2.4 制作一级子页
一级子页主要包括我们的产品、我们的服务和我们的动向的下级
页面,这里以我们的产品的下级页面为例,来讲解一级子页的制
作方法。

13.2.5 制作二级子页
13.2.6 设置超
超是的灵魂,有了超,才能在中的各个页面之间来回跳转。

接下
最后用15
分钟时间
总结创建
的详细步
骤。

相关文档
最新文档