Dreamweaver实训教案.doc
DREAMWEAVER电子教案
DREAMWEAVER电子教案第一章：DREAMWEAVER基础入门1.1 课程简介了解DREAMWEAVER的基本功能和应用范围熟悉DREAMWEAVER的工作界面和基本操作1.2 创建和管理网页创建新网页打开和保存网页管理网页标签和属性1.3 文本和图像编辑在DREAMWEAVER中编辑文本插入和编辑图像设置文本和图像的属性第二章：网页布局与设计2.1 表格布局创建表格调整表格的大小和属性合并和拆分表格单元格2.2 框架和iframe创建框架和iframe调整框架的大小和属性嵌套框架和iframe2.3 层和绝对定位创建层和绝对定位元素调整层和绝对定位元素的大小和位置对层和绝对定位元素应用样式第三章：CSS样式和布局3.1 CSS基本概念了解CSS的作用和基本语法创建和应用样式编辑样式表3.2 常用CSS选择器了解常用的CSS选择器应用不同选择器设置样式嵌套选择器和伪类选择器3.3 布局和响应式设计使用CSS布局技术创建响应式设计媒体查询和响应式布局移动设备和桌面设备的布局优化第四章：表单和交互设计4.1 创建表单创建表单和表单元素设置表单的属性和事件添加表单验证和提交功能4.2 表单元素和属性输入框、密码框和单选框下拉列表和多选框按钮和隐藏域4.3 表单验证和交互客户端表单验证服务器端表单处理创建动态交互效果第五章：DREAMWEAVER与数据库5.1 数据库基础了解数据库的基本概念和应用创建和管理数据库连接了解数据源和查询5.2 插入和编辑数据库内容插入和编辑数据库记录创建和应用数据表样式排序和筛选数据库内容5.3 动态网页和数据交互创建动态网页和数据交互显示和更新数据库内容创建分页和搜索功能第六章：DREAMWEAVER与多媒体6.1 多媒体元素的应用插入和编辑音频和视频文件了解不同媒体格式和兼容性应用媒体控制按钮和属性6.2 Flash动画和交互插入Flash动画和视频创建和编辑Flash按钮和交互元素ActionScript基础和简单交互6.3 动态效果和交互设计应用JavaScript和jQuery库创建滚动和动画效果实现复杂交互和用户体验第七章：DREAMWEAVER扩展和插件7.1 扩展和插件的概念了解扩展和插件的作用和类型安装和卸载扩展和插件管理扩展和插件设置7.2 常用扩展和插件应用代码自动完成和格式化工具图像编辑和处理插件网页优化和压缩工具7.3 自定义扩展和插件开发了解扩展和插件开发基础创建简单的扩展和插件发布和共享扩展和插件第八章：DREAMWEAVER与前端技术8.1 HTML5和CSS3应用了解HTML5和CSS3的新特性应用HTML5标签和CSS3样式兼容性和浏览器支持8.2 JavaScript和jQuery库了解JavaScript和jQuery的基础在DREAMWEAVER中使用JavaScript和jQuery 创建动态交互和动画效果8.3 前端框架和库了解流行的前端框架和库应用Bootstrap、Sass等工具创建响应式和移动端网页第九章：DREAMWEAVER团队协作与发布9.1 团队协作工具了解团队协作的重要性和工具使用版本控制和项目管理工具协同编辑和项目管理最佳实践9.2 网页发布和部署了解网页发布的基本流程配置服务器和FTP设置发布和维护网页9.3 网站优化和SEO了解网站优化和SEO的基本概念优化网页内容和结构提高网页在搜索引擎中的排名第十章：DREAMWEAVER项目实战10.1 项目分析和规划了解项目需求和目标制定项目计划和时间表确定项目技术和资源需求10.2 项目实施和开发使用DREAMWEAVER进行项目开发协作和集成前端技术和框架实现项目功能和交互设计10.3 项目测试和上线进行项目测试和缺陷修复优化和调整网页性能和安全性项目上线和后续维护重点和难点解析第一章：DREAMWEAVER基础入门重点：DREAMWEAVER的工作界面和基本操作难点：快速熟悉并掌握DREAMWEAVER的各种功能第二章：网页布局与设计重点：表格布局、框架和iframe的使用难点：灵活运用层和绝对定位技术进行网页设计第三章：CSS样式和布局重点：CSS选择器的应用和样式表的编辑难点：理解和应用复杂的CSS布局技术和响应式设计第四章：表单和交互设计重点：创建和配置表单元素难点：实现表单验证和提交功能，以及动态交互效果第五章：DREAMWEAVER与数据库重点：数据库连接的创建和管理难点：插入和编辑数据库内容，以及实现动态网页和数据交互第六章：DREAMWEAVER与多媒体重点：多媒体元素的应用和控制难点：Flash动画和交互设计，以及动态效果和交互设计第七章：DREAMWEAVER扩展和插件重点：扩展和插件的安装和管理难点：自定义扩展和插件的开发和发布第八章：DREAMWEAVER与前端技术重点：HTML5、CSS3、JavaScript和jQuery的应用难点：理解和应用前端框架和库第九章：DREAMWEAVER团队协作与发布重点：团队协作工具的使用和网页发布流程难点：网站优化和SEO策略的制定与实施第十章：DREAMWEAVER项目实战重点：项目分析和规划，以及项目实施和开发难点：项目测试和上线，以及后续维护和优化本教案全面覆盖了DREAMWEAVER的基础知识、网页设计、CSS样式、表单与交互、数据库应用、多媒体处理、扩展与插件使用、前端技术整合、团队协作与发布，以及项目实战等环节。
Dreamweaver全套教案
课题认识Dreamweaver一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容Dreamweaver的基本知识。
【学习步骤】1、 Dreamweaver的功能Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件，也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。
Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。
2、 Dreamweaver的窗口（1）标题栏（2）菜单栏（3）工具栏（4）视图栏（5）文件夹列表(6)工作区3.网页工作区的三个视图方式选项它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。
普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。
在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。
对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。
为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。
4.安装dreameaver的方法安装及注册5.关闭dreameaver6.保存网页的方法3、小结课题建立一个简单的站点一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容Dreamweaver的基本知识；建立一个简单的站点；进行简单的网页编辑。
【学习步骤】1、创建空白站点。
执行菜单命令“文件”—“新建”—“站点”，就会出现8中站点向导。
出于简单，可选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。
Dreamweaver教案
Dreamweaver教案一、简介Dreamweaver是一种专业的网页制作工具，可以用于设计、编辑和管理网页。
本教案将介绍和演示如何使用Dreamweaver进行网页设计和开发，帮助学生掌握网页制作的基本技能。
二、教学目标1. 了解Dreamweaver软件的基本功能和特点；2. 掌握使用Dreamweaver创建、编辑和管理网页的方法；3. 熟悉常用的网页设计和开发技巧；4. 能够制作出简单而精美的网页作品。
三、教学内容1. Dreamweaver入门1.1 Dreamweaver的安装和界面介绍1.2 新建网页和项目文件1.3 介绍工具栏和菜单栏的基本功能1.4 设置网页属性和页面布局2. 网页设计与开发2.1 使用Dreamweaver创建网页框架- 使用表格和DIV布局- 设计网页的导航栏、页眉、页脚等2.2 插入和编辑文本、图像和链接- 设置文字样式和颜色- 插入图片和调整大小- 添加超链接和锚点链接2.3 制作网页特效- 使用CSS样式设置背景、边框等- 添加滚动条和动画效果- 嵌入视频和音频文件2.4 网页互动效果的实现- 添加表单和输入字段- 设计网页的按钮和链接互动四、教学步骤1. 教学准备1.1 确保每个学生都有安装Dreamweaver软件的电脑 1.2 准备教学用的示例网页文件和图片素材2. 教学演示和操作指导2.1 通过PPT展示Dreamweaver软件的基本功能和界面2.2 指导学生按照步骤进行软件安装和设置网页属性2.3 示范演示如何创建网页框架、插入文本和图像，并设置样式2.4 分步讲解制作网页特效和互动效果的方法3. 练习与实践3.1 学生跟随指导，按照示例网页进行实操练习3.2 鼓励学生自由发挥创造力，设计和制作个人网页作品3.3 提供实时反馈和指导，帮助学生克服问题和困难五、教学评估1. 教学练习的成果评估1.1 对学生完成的示例网页进行评分并提供反馈意见1.2 鼓励学生相互展示和分享自己的网页作品2. 学生参与度和自学能力的评估2.1 观察学生在课堂上的积极参与和学习态度2.2 检查学生在自学阶段的学习成果和反馈作业的完成情况六、教学延伸1. 深入了解Dreamweaver软件的高级功能- CSS样式的应用和管理- JavaScript脚本的编写和调试- 响应式网页设计和移动端适配2. 继续学习和实践网页制作技术- 探索其他网页制作工具和软件- 学习和应用前端开发的相关技术和最佳实践七、教学资源1. Dreamweaver软件安装包和使用指南2. PPT演示文件和教学示例网页3. 学习参考书籍和在线教程八、总结通过本教案的学习和实践，学生将能够掌握使用Dreamweaver进行网页设计和开发的基本技能。
Dreamweaver教案1
文化理论课教案(首页)
审阅：
教
学环节教学内容
教学
方法
与时
间安
排
组织教学1.清点人数
2.组织纪律
3.师生问好
3min
复习旧课
导
入新课打开普通有趣的网页，引申出网页的制作，导入本节课的主要内容
讨论网页是怎么制作的
小组
讨论
5min
讲授新课Dreamweaver的简单介绍
Dreamweaver的版本有哪些，cs5,cs3,cc2017,cc2019等等Dreamweaver的用户界面
Dreamweaver的基本用途
Dreamweaver的公司是什么，Adobe Dreamweaver,
简单了解Adobe公司做什么软件的
简单的说明Adobe公司其他软件有什么用
展示一些精美网站的代码的数量，并教会学生用浏览器里面的
开发者工具。
在谷歌浏览器或者其他类型的浏览器上按F12能调出开发者工
具，查看代码
观看Dreamweaver的官方介绍视频
讲解视频内容
讲授
法，图
片展
示
30min
叫学
生做
好笔
记
年月日。
Dreamweaver教案
Dreamweaver教案教案：Dreamweaver教学指南I. 简介A. 介绍Dreamweaver的定义和作用B. 引出使用Dreamweaver的好处和重要性II. Dreamweaver界面介绍A. 工作区域1. 代码视图2. 设计视图3. 分割视图B. 标签栏和菜单栏功能解析C. 文件管理器和属性检查器的使用方法III. 创建网页文件A. 新建网页文件的步骤B. 文件保存和命名规则C. 文件类型介绍（HTML、CSS、JavaScript等）IV. 网页设计与布局A. 网页尺寸和分辨率的选择B. 页面布局和网格系统1. 响应式设计2. 网格设置和对齐方式C. 添加图片和多媒体元素1. 图片格式和优化2. 视频和音频的嵌入V. 网页内容与链接A. 文本编辑和字体样式B. 超链接的创建和管理1. 内部链接2. 外部链接3. 锚点链接C. 表格的插入和编辑1. 表格属性和样式2. 表单的设计和构建VI. 网页交互与响应A. JavaScript基础知识1. 语法和变量2. 函数和事件B. 表单验证和数据处理C. 用户反馈和交互效果1. 轮播图和画廊设计2. 动画效果和弹出窗口VII. 网页发布与维护A. 网站目录结构B. 网站的测试和调试C. 文件上传和部署到服务器D. 网站的维护和更新策略VIII. 实例演练A. 根据实际案例进行网页设计和制作B. 老师讲解演示和学生跟随实操C. 学生个人或小组自行完成一个网页项目IX. 教学方法和评估方式A. 方法：理论与实践相结合，灵活授课B. 评估：参与度和个人作品展示X. 总结和展望A. 简要回顾所学内容B. 对学生的能力提升和未来发展的展望通过以上教学指南，学生将能全面了解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实训教案讲解学习
D r e a m w e a v e r实训教案实训一、创建个人网站课时：2 任务一、规划个人网站一、提出任务1．任务目标规划个人网站。
2．解决的问题通过规划个人网站了解网站主题对于网站的意义，了解网站的栏目与目录结构之间的关系及开发网站的常用工具软件。
二、任务内容1．通过互联网浏览网站，总结所浏览网站的主题类型，至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个，记录它们的网站名称填入教材p4表JYFS1-1中：根据表格内的提示，使用搜索引擎查找相关类型网站。
每组4名同学，每人负责两个主题的网站搜索。
任务二创建站点一、提出任务1．任务目标创建个人网站站点。
2. 解决的问题使用网页制作软件Dreamweaver cs5，按照个人网站的制作要求创建网站站点。
二、任务内容1．新建一个站点，名称为“pra1-1”，使用“高级”选项卡完成新建过程，保存位置为“D:\pra1-1”，其他参数保持默认即可。
2.新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术,暂不设置远程信息与测试服务器，站点保存在“D:\pra1-2”文件夹中。
任务三管理站点一、提出任务1．任务目标管理个人网站站点。
2. 解决的问题通过完成本任务学习使用Dreamweaver cs5进行站点管理。
3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：启动Dreamweaver cs5，创建网站站点。
二、任务内容1．新建站点“pra1-5”，使用管理站点功能将其导出。
将站点导出文件通过网络或移动存储设备拷贝到其他计算机中，使用管理站点功能将其导入。
2．新建站点“pra1-3”，使用管理站点功能复制站点“pra1-3”，编辑复制的站点名称为“pra1-4”，之后删除站点“pra1-3”。
任务四创建网站目录结构一、提出任务1．任务目标创建网站目录结构。
2. 解决的问题本任务将使用“文件”面板，实现先前规划的网站目录结构，学习在本地站点建立文件和文件夹的方法，管理站点内的文件。
初中dreamweaver教案
初中dreamweaver教案课程目标：1. 让学生了解并掌握Dreamweaver的基本操作和功能。
2. 培养学生运用Dreamweaver制作网页的技能，提高学生的信息素养和审美能力。
3. 培养学生团队协作能力和创新精神，激发学生对网页设计与制作的兴趣。
教学内容：1. Dreamweaver的启动与界面认识2. 网页基本元素的操作与编辑3. 网页布局与设计4. 添加多媒体元素5. 网页代码的编辑与调试6. 网页的预览与发布教学重点与难点：1. 网页基本元素的操作与编辑2. 网页布局与设计3. 添加多媒体元素4. 网页代码的编辑与调试教学准备：1. 安装好Dreamweaver软件的计算机2. 教学PPT3. 网页素材教学过程：一、导入（5分钟）1. 向学生介绍Dreamweaver是一款优秀的网页设计与制作软件，广泛应用于网页制作领域。
2. 引导学生关注网页设计与制作在现实生活中的应用，激发学生的学习兴趣。
二、基本操作与编辑（15分钟）1. 讲解并演示Dreamweaver的启动与界面认识，让学生熟悉软件的操作环境。
2. 讲解并演示网页基本元素（如文本、图像、链接等）的操作与编辑方法。
3. 学生跟随老师一起操作，掌握基本元素的操作技能。
三、网页布局与设计（20分钟）1. 讲解并演示网页布局的方法，如表格布局、框架布局等。
2. 讲解并演示如何使用Dreamweaver的“设计”视图进行网页设计。
3. 学生跟随老师一起操作，学会网页布局与设计的基本方法。
四、添加多媒体元素（15分钟）1. 讲解并演示如何在网页中添加多媒体元素，如音频、视频、动画等。
2. 学生跟随老师一起操作，学会添加多媒体元素的方法。
五、网页代码的编辑与调试（10分钟）1. 讲解并演示如何使用Dreamweaver的“代码”视图进行网页代码的编辑。
2. 讲解并演示如何使用Dreamweaver的调试工具进行网页代码的调试。
3. 学生跟随老师一起操作，掌握网页代码的编辑与调试方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实训一、创建个人网站
课时：2 任务一、规划个人网站
一、提出任务
1．任务目标
规划个人网站。
2．解决的问题
通过规划个人网站了解网站主题对于网站的意义，了解网站的栏目与目录结构之间的关系及开发网站的常用工具软件。
二、任务内容
1．通过互联网浏览网站，总结所浏览网站的主题类型，至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个，记录它们的网站名称填入教材p4表JYFS1-1中：
根据表格内的提示，使用搜索引擎查找相关类型网站。
每组4名同学，每人负责两个主题的网站搜索。
任务二创建站点
一、提出任务
1．任务目标
创建个人网站站点。
2. 解决的问题
使用网页制作软件Dreamweaver cs5，按照个人网站的制作要求创建网站站点。
二、任务内容
1．新建一个站点，名称为“pra1-1”，使用“高级”选项卡完成新建过程，保存位置为“D:\pra1-1”，其他参数保持默认即可。
2.新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术,暂不设置远程信息与测试服务器，站点保存在“D:\pra1-2”文件夹中。
任务三管理站点
一、提出任务
1．任务目标
管理个人网站站点。
2. 解决的问题
通过完成本任务学习使用Dreamweaver cs5进行站点管理。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：启动Dreamweaver cs5，创建网站站点。
二、任务内容
1．新建站点“pra1-5”，使用管理站点功能将其导出。
将站点导出文件通过网络或移动存储设备拷贝到其他计算机中，使用管理站点功能将其导入。
2．新建站点“pra1-3”，使用管理站点功能复制站点“pra1-3”，编辑复制的站点名称为“pra1-4”，之后删除站点“pra1-3”。
任务四创建网站目录结构
一、提出任务
1．任务目标
创建网站目录结构。
2. 解决的问题
本任务将使用“文件”面板，实现先前规划的网站目录结构，学习在本地站点建立文件和文件夹的方法，管理站点内的文件。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：打开Dreamweaver cs5、管理站点知识。
二、任务内容
1．使用“文件”菜单新建“ASP JavaScript”类型的动态页，文件保存为“D:/ practice 1-1.asp”，使用属性面板修改网页标题为“ASP网页”。
2．新建站点“pra1-7”，使用“文件”面板创建一个网页文件，命名为“practice1-2.html”，
选中该文件后使用下拉菜单中的重命名选项，改名为“newpage.html”，同样使用下拉菜单中的选项预览页面后删除该页面。
实训二、添加首页内容
课时：2 任务一添加首页文本
一、提出任务
1．任务目标
完成首页文本内容。
2. 解决的问题
通过完成本任务学习修改网页标题，在网页中添加文本，分段换行和段内换行，输入连续空格，保存和预览网页等知识。
二、任务内容
1．新建一个网页“practice2-1.html”，将本单元素材“举一反三”文件夹中“practice2-1.txt”的文本内容拷贝到页面中，使用插入空格的方法修改文本，使每一行文本中的“vs”字样达到对齐的效果。
2．新建一个网页“practice2-2.html”，输入多行文字内容并进行分段和强制换行，修改网页标题为“换行效果预览”，保存后预览页面，观察在IE浏览器中标题在什么位置，浏览器窗口大小发生变化时，对三种换行方式的影响。
任务二编辑文本样式
一、提出任务
1．任务目标
完成首页文本样式设置，添加水平分隔线与列表。
2. 解决的问题
本任务通过设置首页文本样式，学习文本样式设置与应用，修改文本样式，添加水平分隔线与列表知识。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：输入文本内容的方法，段内换行与划分段落方法，输入连续空格的方法。
二、任务内容
1．新建一个网页“practice2-4.html”，插入5条水平线，使用属性面板进行不同的宽、高、对齐与阴影属性设置，预览页面并比较不同属性的设置效果。
2.新建“班级荣誉”页面，文件名为“practice2-5.html”，列举班级成员所获奖励，设置为编号列表，修改文本样式，用不同的文本大小、颜色区分奖励的等级，保存并预览页面。
尝试先设文本样式后设编号列表有何区别。
（要求各组课下搜集班级成员获奖情况，并制定一个设置方案）
任务三添加图像
一、提出任务
1．任务目标
为首页添加图像内容。
2. 解决的问题
本任务通过为首页添加图像内容，学习在网页中插入图像和编辑图像的方法。
二、任务内容
1．将本单元素材文件夹中的“jyfs1.jpg”插入到一个新建页面“practice2-7.html”
中，裁剪后宽度为200像素，高度为100像素，并设置边框宽度为5，完成后预览页面。
2．新建网页“practice2-8.html”，插入本单元素材文件夹中的“jyfs2.jpg”，尝试使用Dreamweaver 8的图像编辑功能修改图像的亮度并进行锐化设置。
任务四创建与应用CSS美化网页
一、提出任务
1．任务目标
使用CSS美化网页。
2．解决的问题
本任务通过为对首页进行美化，学习应用CSS样式。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中输入文本内容、插入图像及水平线。
二、任务内容
1．新建网页“practice2-9.html”，插入3条水平线，定义3种“类”样式“l1”、“l2”、“l3”。
定义过程中修改样式中的边框属性，使其拥有不同的效果，分别应用在各条水平线上，预览页面。
2．将本单元素材“举一反三”文件夹中的网页“practice2-11.html”拷贝到D盘根目录下，定义“标签”样式“p”，设置文本大小与颜色，保存后预览页面观察效果，之后定义“类”样式“p1”，设置不同的文本大小与颜色，并应用于页面中所插入的文本，浏览页面观察效果，总结“类”样式与“标签”样式的区别。
3．新建网页“practice2-10.html”，插入本单元素材“举一反三”文件夹中的“jyfs3.jpg”和一条水平线，定义“类”样式“line1”，修改样式中的边框属性。
分别将该样式应用在页面中的图片与水平线上，预览页面，分析样式设置的结果。
实训三、创建、编辑表格
课时：4 任务一创建表格
一、提出任务
1．任务目标
完成“作品展示”网页中表格的创建。
2．解决的问题
通过在“作品展示”网页中创建表格理解表格布局页面的重要性，学习网页的布局分析，掌握创建表格的几种方法。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在页面添加文本，设置文本格式，插入图像，设置图像格式。
二、任务内容
1．创建网页“practice3-2.html”，在网页中插入如图JYFS3-1所示的嵌套表格，保存并预览网页。
图JYFS3-1
2．创建网页“practice3-3.html”，在网页中插入如图JYFS3-2所示的嵌套表格，保存并预览网页。
图JYFS3-2
3．制作一个以环保为主题的网页，首先利用已学知识设计栏目和目录结构，创建表格布局网页。
任务二编辑表格
一、提出任务
1．任务目标
编辑已创建成的表格。
2. 解决的问题
通过对本单元任务一创建的表格进行编辑，学习更改表格边框或背景颜色，添加、删除行或列，调整行高、列宽及表格大小，拆分或合并单元格。
3. 本任务所涉及原有知识要点
完成本任务需要掌握以前学过的利用表格布局页面，创建表格等知识点。
二、任务内容
1．创建网页“practice3-5.html”，插入如图JYFS3-4所示表格并按要求设置其属性：宽400像素、高100像素、单元格间距为5像素、边框粗细为3像素、边框颜色为“#FF0000”。
表格第1、3列宽100像素、单元格的边框颜色为“#00FF00”，第2列宽100像素、单元格的边框颜色为“#0000FF”。
图JYFS3-4
2．创建网页“practice3-6.html”，插入一个4行3列的表格，按图JYFS3-5所示，对单元格进行合并与拆分。
设置表格边框粗细为1像素、颜色为“#000000”，将表格第1行的背景颜色设置为“#3399CC”，第2行与第3行的第一列单元格、第4行第1、2列单元格的背景颜色设置为“#FFFFCC”。
图JYFS3-5
3．创建网页“practice3-7.html”，插入5个表格，设置表格对齐属性及单元格内容对齐属性，使预览效果如图JYFS3-6所示。
图JYFS3-6。