第9章 模板和库 实战Dreamweaver8网页制作教程电子教案
- 格式:ppt
- 大小:876.50 KB
- 文档页数:16
网页制作基础(Dreamwaver 8 教程)第一章Dreamweaver8.0的操作环境第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一起来理解Dreamweaver8的操作环境,完成站点的创建。
一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框,在对话框左侧是Dreamweaver8的设计视图,右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。
我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页,能够勾选这个窗口下面的“不在显示此对话框”来隐藏它。
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目,建议大家保留。
新建或打开一个文档,进入Dreamweaver8的标准工作界面。
Dreamweaver8的标准工作界面包括:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏启动Macromedia Dreamweave 8后,标题栏将显示文字Macromedia Dreamweave 8.0,新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。
2、菜单栏Dreamweave 8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和协助。
其中,编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
文件:用来管理文件。
例如新建,打开,保存,另存为,导入,输出打印等。
编辑:用来编辑文本。
例如剪切,复制,粘贴,查找,替换和参数设置等。
查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。
修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。
《Dreamweaver网页设计》课程标准适用专业:电子商务专业学分数:7总学时数:108 理论课时:64 实践课时:44一、理论教学部分(一)课程的性质和任务1.课程性质:《Dreamweaver网页设计》本课程是计算机各专业的一门实践性很强的技术基础课,是一门必修的专业课。
主要学习如何利用Dreamweaver这个软件进行网页的设计与制作。
2.课程任务:本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计,包括新建、编辑和设置一个Web站点;如何对页面属性进行基本的设置,如何设置、编辑CSS层叠式样式表;如何排版文字、表格和层;如何进行基本的图像处理;建立框架;模板和库的使用和编辑;网站的发布与维护等基本知识与应用。
目的是通过本课程的学习,培养学生的实际动手能力和计算机的操作能力,能够运用所学的知识进行网页设计。
(二)教学内容和教学要求第一章 Dreamweaver基础(2学时)【教学内容】一、Dreamweaver 的历史和简介;二、Dreamweaver 8.0的安装过程;三、Dreamweaver 8.0 的全新界面;四、改进的设计与开发环境;五、主菜单介绍;六、对象控制面板介绍。
【教学目的与教学要求】掌握Dreamweaver的基本特点、新增功能及界面组成。
基本操作,如安装、新建、打开、导入、保存、关闭等;理解新增功能、界面组成的优点;了解Dreamweaver可以为我们做些什么。
第二章网页设计语言基础(7学时)【教学内容】一、HTML及XHTML语言介绍;二、常用的网页语法标记。
【教学目的与教学要求】理解HTML及XHTML语言介绍,常用的网页语法标记。
第三章文本和图像处理(4学时)【教学内容】一、文本属性面板介绍;二、编辑文本和插入对象;三;设置文本的格式;四、编号与项目符号;五、在网页中插入图像;六、图像的应用。
【教学目的与教学要求】掌握设置文本属性和格式,编号与项目符号的使用,插入、编辑和排版图像;理解如何进行图像调整。
DREAMWEAVER8教案多媒体课件制作教案使用专业:教育学、心理学使用年级:三年级撰写人:潘威课程性质:选修课使用教材:授课时数:34第一章网页制作概述 2学时教学目的:了解网页及网站基本概念及网页的基本要素分析及网站设计流程教学重点与难点:网页、网站设计流程,网页基本要素第一节网页和网站一、网页网页又称为Web页,是网站的基本信息单位二、网站互联网上服务器所承载的一组相关网页。
三、网页的基本功能第二节网页中的主要元素一、文本网页发布信息所用的主要形式。
二、图像网页上的图形格式一般使用JPEG和GIF,四、链接标志通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站。
链接有网页外、网页内、邮件链接五、其他的基本要素第三节网页制作工具一、网页编辑工具二、网页图像编辑工具三、动态网页技术第四节网页设计的基本流程一、网站的设计流程二、网页的设计与制作三、网页的测试四、网页上传和发布第二部分 FRONTPAGE讲解 16学时第三部分DREAMWEAVER讲解 16学时第一章 Dream weaver基础 2学时教学目的:了解DW8的操作界面及常用命令,掌握规划和创建站点的操作,掌握基本的网页操作知识。
教学重点与难点:规划站点的结构、网页的基本操作第一节 Dream weaver 8工作界面一、启动和退出Dreamweaver二、Dreamweaver8操作界面第二节规划与创建站点一、规划网站的整体结构规划站点结构是设计站点的必要前提,其操作是将不同的文件分类存放在文件夹中以便于设计者管理。
●在制作站点之前需要先建立一个文件夹以保存在网页制作过程中产生的文件,从而方便管理。
发布站点时只需将这个文件夹上传到WEB服务器上即可。
●在制作网页过程中合理地命名文件和文件夹是很重要的,一般以易于记忆和理解的英文或汉语拼音命名。
站点规划好后,可以绘制网站结构草图。
还需要确定整个网站的风格和样式,颜色及页面的布局等。
教学进度计划表周周节教学内容备注7 6 1、第1章Dreamweaver8简述和操作界面2、第2章规划站点3、第3章创建文档8 6 1、第4章编辑文本2、第5章图像的应用9 6 1、第6章使用CSS样式2、第7章网络多媒体应用10 6 1、第8章使用链接2、第9章使用表格11 6 1、第10章使用表格的“布局模式”2、第11章层的使用12 6 1、第12章创建交互式菜单2、第13章使用行为13 6 1、第14章使用框架和框架集2、第15章使用模板和库14 6 1、第16章站点管理2、第17章综合实例(课程设计)课题第1章Dreamweaver8简述和操作界面课时 2 日期10月.9 课节 3.4教学目的1、了解Dreamweaver 8 的界面组成以及面板的使用方法。
2、掌握Dreamweaver 8 工作区的布局,并能够使用工具栏中的快速按钮以及界面板组。
重点与难点Dreamweaver 8 的操作界面及界面板组教学方法讲授与演示法教学内容及过程与环节备注要从事网页设计工作,就必须学习如何制作网页。
在过去,只有掌握了HTML(超文本标记语言)才能编写出网页。
如今,即使不了解任何网页编写语言,也一样可以快速地创建出精美的网页。
1.1教学目标1、了解Dreamweaver 8 的界面组成、新增功能以及面板的使用方法。
2、掌握Dreamweaver 8 工作区的布局,并能够使用工具栏中的快速按钮以及界面板组。
1.2 理论指导1.2.1 Dreamweaver 8 简述使用Dreamweaver 不仅可以制作出任何结构复杂的静态网页,而且在以下几个方面也有着强大的功能。
完美的操作界面强大的模板功能创建动态网页强大的代码编辑功能1.2.2 Dreamweaver 8 的新功能1. 新的工作流程2. 增强的CSC支持3. 快速的文件传输功能4. 对XML/XSLT的远景支持1.2.3 Dreamweaver 8 的操作界面1. 查看Dreamweaver 8 的操作界面Dreamweaver 8 的操作界面由“文档”窗口、工具栏、状态栏、上下文菜单、工具栏和属性检查器等部分组成。
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简介1.1 课程目标:了解DREAMWEAVER的发展历程和功能特点掌握DREAMWEAVER的基本操作和界面布局1.2 教学内容:DREAMWEAVER的发展历程DREAMWEAVER的功能特点DREAMWEAVER的基本操作DREAMWEAVER的界面布局1.3 教学方法:讲解演示学生实操问答互动1.4 课后作业:熟悉DREAMWEAVER的界面布局练习基本的DREAMWEAVER操作第二章:网页设计与制作基础2.1 课程目标:了解网页设计的基本原则掌握HTML和CSS的基础知识学会使用DREAMWEAVER制作基本网页元素2.2 教学内容:网页设计的基本原则HTML和CSS的基础知识使用DREAMWEAVER制作、段落、和图片等基本网页元素2.3 教学方法:讲解演示学生实操问答互动2.4 课后作业:学习HTML和CSS的基础知识练习使用DREAMWEAVER制作基本网页元素第三章:布局与排版3.1 课程目标:了解网页布局的基本方法掌握DREAMWEAVER的布局工具学会使用CSS进行页面排版3.2 教学内容:网页布局的基本方法DREAMWEAVER的布局工具:表格、div、框架等使用CSS进行页面排版3.3 教学方法:讲解演示学生实操问答互动3.4 课后作业:练习使用DREAMWEAVER的布局工具进行网页布局学习CSS进行页面排版第四章:网页交互与动画4.1 课程目标:了解网页交互的基本概念掌握DREAMWEAVER的交互功能学会制作网页动画4.2 教学内容:网页交互的基本概念DREAMWEAVER的交互功能:表单、行为、组件等制作网页动画:Flash、GIF等4.3 教学方法:讲解演示学生实操问答互动4.4 课后作业:练习使用DREAMWEAVER的交互功能学习制作网页动画第五章:网页发布与维护5.1 课程目标:了解网页发布的流程掌握DREAMWEAVER的站点管理功能学会网页的维护和更新5.2 教学内容:网页发布的流程DREAMWEAVER的站点管理功能:创建站点、文件等网页的维护和更新:备份、修复、更新等5.3 教学方法:讲解演示学生实操问答互动5.4 课后作业:练习使用DREAMWEAVER的站点管理功能学习网页的维护和更新的方法第六章:响应式网页设计6.1 课程目标:理解响应式网页设计的重要性学习媒体查询和移动设备适配技术掌握DREAMWEAVER的响应式设计工具6.2 教学内容:响应式网页设计的概念与原则CSS媒体查询的使用移动设备适配技术DREAMWEAVER的响应式设计工具使用6.3 教学方法:讲解演示学生实操问答互动6.4 课后作业:练习使用媒体查询进行样式调整设计并实现一个简单的响应式网页第七章:网页前端技术进阶7.1 课程目标:学习前端开发的高级技术掌握DREAMWEAVER的高级功能了解现代前端框架和库7.2 教学内容:前端开发高级技术:JavaScript、jQuery、Ajax等DREAMWEAVER的高级功能:代码视图、代码片段、代码提示等现代前端框架和库:React、Vue、Angular等7.3 教学方法:讲解演示学生实操问答互动7.4 课后作业:学习并实践JavaScript基础使用jQuery或现代前端框架制作互动网页第八章:网页后端技术概述8.1 课程目标:理解网页后端技术的作用学习服务器端编程基础掌握DREAMWEAVER与服务器端技术的集成8.2 教学内容:网页后端技术概述服务器端编程语言:PHP、、Node.js等DREAMWEAVER与服务器端技术的交互:服务器行为、数据库连接等8.3 教学方法:讲解演示学生实操问答互动8.4 课后作业:了解服务器端编程语言的基础练习在DREAMWEAVER中设置服务器行为第九章:网页项目实战9.1 课程目标:培养学生独立完成网页项目的能力学习项目规划和管理掌握网页项目的最佳实践9.2 教学内容:项目规划和管理网页项目设计流程最佳实践:代码规范、团队协作、版本控制等9.3 教学方法:讲解演示学生实操问答互动9.4 课后作业:完成一个个人网页项目的设计和开发第十章:电子教案的制作与发布10.1 课程目标:学习电子教案的设计原则掌握DREAMWEAVER制作电子教案的方法了解电子教案的发布和应用10.2 教学内容:电子教案的设计原则使用DREAMWEAVER制作电子教案:页面布局、内容组织、交互设计等电子教案的发布和应用:到学习平台、分享给学生等10.3 教学方法:讲解演示学生实操问答互动10.4 课后作业:设计并制作一个简单的电子教案练习将电子教案到学习平台进行分享重点和难点解析重点环节一:DREAMWEAVER的基本操作和界面布局重点:熟悉DREAMWEAVER的界面布局,包括各种面板和工具栏的功能。
dreamweaver8教案第1课Dreamweaver8基础知识教学目的:对Dreamweaver8有总体了解,掌握Dreamweaver8工作界面的组成。
教学重点:掌握工作界面的快捷工具栏,网页编辑窗口,属性面板和浮动面板显示及使用。
教学难点:快捷工具栏的显示及组成、使用,浮动面板的显示与隐藏教学方式:多媒体演示,教师讲解、演示,学生思考分析、记忆。
教学课时:2课时教具使用:多媒体教室投影显示教学内容及过程:1、导入新课:提问学生对网站的了解,internet网与我们生活的联系及重要性。
引发学生思考,带着颖问进入教学课题。
2、讲授新课:多媒体教师操作演示讲解和幻灯片的演示或板书:一、简介Dreamweaver8是著名的“所见即所得”的可视化网站开发工具,是国内外普遍应用的专用网页设计软件。
在国内,它被称为“织梦者”,它不仅提供了强大的网页编辑功能,而且提供了完善的站点管理机制,可以说,它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。
Dreamweaver8优势:1、所见即所得与兼顾HTML源代码两种模式相互切换编辑。
2、不仅有同类软件的所有功能,而且有自身的许多出色设计理念。
3、无需手写代码,就能轻松创建各种动态效果。
4、有强大的自定义及扩展功能,提高了工作效率。
5、支持跨浏器和层叠样式表。
6、Dreamweaver8最新版本,采用多种先进技术,能够高效地创建极具表现力和动感效果的网页。
7、易学,易用,初学者也可制作精致的网页。
二、Dreamweaver8工作环境1、启动Dreamweaver8从开始菜单启动,出现工作区设置对话框,选择设计器工作区。
设计器是标准的工作区。
2、Dreamweaver8工作界面认识Dreamweaver8工作界面,对掌握和提高制作效率是关键的一步。
(1)、标题栏:左侧有网页标题,所在位置及文件名称,右侧有最小化,最大化和关闭。
(2)、菜单栏:有“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”。