12.3 实战演练（课件）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

12.3 实战演练 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 实战效果 制作要求 03 制作提示 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 能力目标 培养学生的创新意识和实践能力，为实现网络强国的梦想贡献自己的力量。 情感目标 能够根据网页设计需求选择合适的jQuery UI小部件。 能够正确编辑jQuery UI小部件的属性以实现所需功能。 能够综合运用所学知识制作具有jQuery UI小部件的网页。 掌握jQuery UI小部件的插入方法。 了解jQuery UI小部件（滑块、按钮及按钮组、复选框按钮组及单选按钮组等）的作用。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 难点 重点 1.jQuery UI小部件的插入方法及其作用。 2.实战演练中jQuery UI小部件的应用。 3.网页布局和格式化的技巧。 1.确保jQuery UI小部件在网页中的正确运行和兼容性。 2.实战演练中，如何根据网站需求选择合适的jQuery UI小部件并进行有效的布局和美化。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 导入新课 初始jQuery(站在巨人的肩膀上） jQuery基础课程学习网站 实战演练 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 本章重点 “jQuery UI”小部件的插入方法及其作用。 包括括“jQuery UI”折叠面板、选项 卡面板、进度条、对话框、滑块、验证单选按钮组和复选框 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 实战效果 根据本章所学知识 制作“jQuery基础课程学习网站” 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 制作要求 完成以上网站制作需要考虑哪些因素？ 需要考虑表网站中需求创建相应“jQuery UI”小部件以及使用正确的插入方法。 12.3 实战演练 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 11.5 实战演练 制作要求 1 页面采用选项卡进行菜单切换 注意： 使用折叠面板制作教程 页面制作以选项卡面板及折叠面板制作为重点，其他位置插入图片即可。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 制作要求 2 用表格进行基本布局 3 用CSS进行格式化 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 制作要求 网络学习中，要注重培养自己的创新意识和实践能力，为实现网络强国的梦想贡献自己的力量。 思政小课堂 学习jQuery，筑梦网络强国！ 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 编辑页眉 插入表格 编辑折叠面板内容 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 1.创建本地站点，新建主页文档index.html,设置页面属性，左边距、上边距均设置为0，标题设为“教程”；页面背景色为#EEEFF1 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 2. 插入2×1 的表格T1, 宽度为1200,设置对齐为“居中”。在第一行中输入教程名称 “<jQuery 基础课程”,选中文字，在“属性”面板中设置格式为“标题1”,在第二行中插入素 材文件夹中的图片banner.png。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 3. 在表格T1 后面插入1×3的表格T2, 宽度为1200,设置第一个单元格宽度为924,第 三个单元格宽度为259。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 4. 在第一个单元格中插入选项卡面板，分别设置其标签文字 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 操作提示 6. 逐个编辑折叠面板的内容，完成章节的制作 12.3 实战演练 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 8. 制作第三个单元格的内容，在其中嵌入3×1的表格T3, 宽度为100%,再在第 一 行 单元格中嵌入4×1的表格T4, 宽度为95%,对齐设置为“居中”,制作授课老师区块，在第 三行单元格中嵌入5×1的表格T5, 宽度为95%,对齐设置为“居中”,制作授课同学区块。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 7.完成其他选项卡内容的设置 ，WIKI 内容为无。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.3 实战演练 操作提示 正确引用jQuery和jQuery UI库 注意jQuery UI小部件的初始化 兼容性问题 性能优化 备份和版本控制 jQuery UI制作时的注意事项 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 辩一辩 在网页设计中，jQuery UI小部件的美化功能是否应该优先于其功能性？ 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 做一做 请参照实战效果图，根据制作要求，凭借制作注意事项提示，制作“jQuery基础课程学习网站” 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 练一练 什么是jQuery UI滑块（Slider）控件？ 【答案】jQuery UI滑块（Slider）控件由滑块与滑动条组成，使用Slider控件可以计算出滑块在滑动过程中占整个滑动条的比例，常用于开发中调节声音、颜色等。 2. 在Dreamweaver中保存含有“jQuery UI”小部件的页面时，为什么会弹出“复制相关文件”对话框？ 【答案】在Dreamweaver中保存含有“jQuery UI”小部件的页面时，会弹出“复制相关文件”对话框，是因为需要复制“jQuery UI”小部件所需要的CSS文件、JavaScript文件和相关图像文件到站点目录的jQueryAssets文件夹内，以保证“jQuery UI”小部件的正确运行。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 制作提示 制作要求 实战演练堂 1)页面采用选项卡进行菜单切换 2)用表格进行基本布局 3)用CSS进行格式化 实战效果 正确引用jQuery和jQuery UI库 注意jQuery UI小部件的初始化 兼容性问题 性能优化 备份和版本控制 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$