《Dreamweaver网页设计》教案设计
- 格式:doc
- 大小:2.18 MB
- 文档页数:34
最新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网页设计》教案一、教案简介二、教学目标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 课程目标了解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网页制作公开课教案一、课程简介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的各个工具和功能来创建网页。
本课程适合初学者,不需要任何编程经验,但需要一定的电脑操作基础。
二、教学目标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 任课教师(职称):授课对象及时间: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 CC 2019是由Adobe公司开发的网页设计与制作软件。
Adobe公司在Dreamweaver这一软件的版本上不断升级,是为了使广大从事网页制作和网页设计工作的用户拥有性能更完善的得力工具,同时也是为了使刚刚步入设计领域的初学者能够拥有更加优秀的学习软件。
本书内容的讲解均以项目任务式案例为主线,通过任务引入引导学生进入任务学习的内容;通过任务知识的解析使学生能够深入学习软件功能;通过任务实施操作可以快速熟悉软件功能和艺术设计思路;通过扩展案例和项目演练可以拓展学生的实际应用能力,增强学生的软件使用技巧。
培训目标:➢发现网页中的美——网页设计基础➢熟悉设计工具——初识Dreamweaver CC 2019➢熟悉文本编辑——文本➢掌握素材使用——图像和多媒体➢掌握目标链接关系——超链接➢掌握页面布局——使用表格➢掌握美化页面——CSS样式➢了解固定页面布局——模板和库➢掌握页面的交互性——表单与行为➢掌握商业应用——综合设计实训学习时间:60学时。
培训内容:项目一、发现网页中的美——网页设计基础1.了解网页设计的相关应用。
2.明确网页设计的工作流程。
项目二、熟悉设计工具——初识Dreamweaver CC 20191.了解软件的操作界面。
2.了解站点的创建和编辑。
3.掌握网站框架的使用方法及技巧。
项目三、熟悉文本编辑——文本在当今这个网络时代,不管网页内容多么丰富,文本自始至终都还是网页中最基本的元素。
由于文本产生的信息量大,输入、编辑起来方便,并且生成的文件小,容易被浏览器下载,不会产生太多的等待时间,因此掌握好文本的使用,对于制作网页来说是最基本的要求。
任务3.1 制作青山别墅网页1. 通过对任务的引入和设计理念的讲解,使读者掌握制作青山别墅网页的设计思路。
最新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网页制作的基本技能,并能够独立完成网页设计与制作任务。
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
分钟时间
总结创建
的详细步
骤。