网页设计与制作（微课版）-教案_第1页
网页设计与制作（微课版）-教案_第2页
网页设计与制作（微课版）-教案_第3页
网页设计与制作（微课版）-教案_第4页
网页设计与制作（微课版）-教案_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与制作——DreamweaverCC+HTML5+CSS3（微课版）》配套教学教案课时内容DreamweaverCC基础入门授课时间90分钟课时2教学目标认识网页与网站网络基本术语常见的网站类型DreamweaverCC的启动与退出DreamweaverCC的工作界面设置首选参数可视化辅助工具教学重点认识DreamweaverCC的工作环境掌握DreamweaverCC首选参数的设置标尺、网格与辅助线的应用教学难点对网站与网页的关系有充分的了解。教学设计1.教学思路：（1）知识点讲解：详细介绍每个概念和技术细节；（2）实战演练：安排实际操作练习，帮助学生巩固所学知识；（3）疑难解答：课程结束后进行答疑，解决学生的疑问。2.教学手段：（1）使用案例演示讲解基础知识，讲解结束后进行疑难解答与课后实训；（2）内容由浅入深，从基础到制作，层层递进。3.教学资料及要求：学生需阅读教材中的实例，并自行探索其他优秀网页设计案例。教学内容讨论问题：1、什么是网站与网页？2、学生思考网络基本术语在实际生活中的应用？内容大纲：具体可结合本章的PPT课件进行配合讲解。1.1认识网页与网站1.1.1什么是网页1.1.2网页与网站的关系1.2网络基本术语1.2.1域名1.2.2HTTP协议1.2.3FTP协议1.2.4超链接1.2.5站点1.3常见的网站类型1.3.1门户网站1.3.2企业网站1.3.3个人网站1.3.4娱乐网站1.3.5机构网站1.3.6电子商务网站1.4DreamweaverCC的启动与退出1.4.1启动DreamweaverCC1.4.2退出DreamweaverCC1.5DreamweaverCC的工作界面1.5.1菜单栏1.5.2工具栏1.5.3文档窗口1.5.4“属性”面板1.5.5面板组1.6设置首选参数1.6.1常规参数1.6.2代码格式1.6.3代码颜色1.6.4复制/粘贴1.6.5在浏览器中预览1.6.6字体1.7可视化辅助工具1.7.1标尺工具1.7.2网格工具1.7.3辅助线工具小结分析不同类型的网站特点。掌握DreamweaverCC的基础操作。思考及作业想一想：除了课本中提到的网站类型外，你还能想到哪些特殊用途的网站类型？请举例说明。练一练：根据个人偏好调整软件设置，以提高工作效率。

课时内容站点的创建与管理授课时间90分钟课时2教学目标学生能够深入理解站点规划的重要性及原则，准确阐述文档分类保存、合理命名文件名称和本地与远程站点结构统一的具体要求。熟练掌握在DreamweaverCC中创建站点的操作流程，包括设置站点名称、本地站点文件夹路径等关键步骤。学会使用站点面板进行文件管理，如选择站点、切换视图、连接远程服务器、上传下载文件等操作。掌握站点的导出和导入方法，能够在不同计算机或版本间迁移站点。熟练运用编辑、复制、删除等操作对站点进行有效的管理和维护。教学重点站点规划的原则和方法，如文档分类保存、合理命名文件名称以及本地与远程站点结构统一的具体实施。站点面板的功能及使用方法，特别是与文件管理相关的操作。站点的导出、导入以及管理操作，如编辑、复制、删除站点等。教学难点如何引导学生根据实际需求，合理规划站点结构，确保文件分类清晰、易于管理。教学设计教学思路：（1）以实际案例引入课程，让学生了解站点创建与管理在网页设计中的重要性；（2）按照从理论到实践的顺序，先讲解站点规划的原则，再逐步介绍创建、管理站点的具体操作；（3）通过课堂练习和课后作业，让学生巩固所学知识，提高实际操作能力；（4）在教学过程中，注重引导学生思考和讨论，培养学生的自主学习能力。教学手段：（1）采用讲授法，系统讲解知识点，确保学生掌握理论知识；（2）运用演示法，在DreamweaverCC软件中实际操作，展示创建、管理站点的步骤，让学生更直观地学习。教学资料及要求：准备DreamweaverCC软件及相关案例文件；要求学生提前预习课程内容，对站点创建与管理有初步的认识。。教学内容知识回顾：在前面讲解DreamweaverCC基础入门操作。讨论问题：1、网站的结构和内容组织方式是怎样的？2、如果要创建一个网站，应该如何组织文件和资源？内容大纲：具体可结合本章的PPT课件进行配合讲解。2.1站点的规划2.2站点面板2.2.1课堂案例——创建我的第一个站点2.2.2认识站点面板2.3导出和导入站点2.3.1导出站点2.3.2导入站点2.4管理站点2.4.1课堂案例——管理网页文档2.4.1编辑站点2.4.2复制站点2.4.3删除站点小结1.站点规划是网站建设的基础，合理的规划能使网站结构清晰、便于管理和维护。2.DreamweaverCC提供了丰富的工具和功能，帮助我们创建、管理站点，熟练掌握这些操作是进行网页设计的关键。3.在站点管理过程中，要注意操作的规范性，避免因误操作导致数据丢失或损坏。思考及作业想一想：（1）在站点规划中，如果有大量的多媒体文件，应该如何分类保存？（2）当站点文件较多时，如何更高效地使用站点面板进行管理？练一练：（1）对课堂创建的个人站点进行完善，添加至少3个网页文件，并运用所学的站点管理知识，对站点进行优化。（2）尝试在不同计算机上导出和导入站点，观察操作过程中可能出现的问题，并思考解决方法。课时内容HTML5基础授课时间180分钟课时4教学目标学生能够准确阐述HTML5的概念、特点及在网页制作中的作用。熟练掌握HTML5文档的基本结构。学会使用HTML5的常用标签。能够运用所学知识创建简单的HTML5页面，实现基本的页面布局和内容展示。教学重点HTML5的基本概念和特点。HTML5文档的基本结构，包括<head>、<body>、<title>等标签的使用。常用HTML5标签的功能和用法，如标题标签<hn>、段落标签<p>、换行标签等。创建和编辑HTML5文档的方法，包括使用文本编辑器和DreamweaverCC等工具。教学难点理解HTML5标签的嵌套关系和属性设置，确保文档结构的合理性。能够根据页面设计需求，合理选择和运用HTML5标签进行页面布局和内容呈现。

培养学生在实际操作中发现问题、解决问题的能力，如代码错误的排查和调试。教学设计教学思路：（1）以实际案例引入课程，激发学生的学习兴趣，让学生了解HTML5在网页制作中的应用；（2）按照从基础概念到实际操作的顺序，逐步讲解HTML5的知识体系；（3）通过课堂练习和课后作业，让学生巩固所学知识，提高实践能力；（4）引导学生自主探索和小组合作，培养学生的自主学习能力和团队协作精神。教学手段：（1）采用讲授法，系统讲解HTML5的理论知识，确保学生掌握基本概念和原理；（2）运用演示法，在文本编辑器和DreamweaverCC中实际操作，展示HTML5文档的创建、编辑过程，让学生更直观地学习；（3）组织学生进行实践操作，通过课堂练习和课后作业，让学生在实践中加深对知识的理解和掌握。教学资料及要求：准备文本编辑器（如记事本）、网页设计软件DreamweaverCC；提供丰富的HTML5案例文件，供学生参考和练习。教学内容知识回顾：前面讲解了站点的创建与管理。讨论问题：1、观察网站网页的内容和结构是怎样的？2、网页是如何制作出来的？内容大纲：具体可结合本章的PPT课件进行配合讲解。3.1HTML5概述3.1.1课堂案例——编写HTML53.1.2什么是HTML3.1.3HTML的基本结构3.2HTML的常用标签3.2.1课堂案例——输入古诗3.2.2<html>…</html>3.2.3<head>…</head>3.2.4<body>…</body>3.2.5<title>…</title>3.2.6<hn>…</hn>3.2.7<br>3.2.8<p>…</p>3.2.9<align=#>3.3练习案例3.3.1练习案例——排版网页3.3.2练习案例——网页内容居中显示小结1.HTML5是网页制作的基础语言，掌握其基本概念、结构和常用标签是进行网页设计的关键。2.在实际编写HTML5代码时，要注意标签的正确使用和文档结构的合理性，以确保网页的正常显示。3.通过不断练习和实践，可以提高对HTML5的掌握程度，为后续学习更复杂的网页设计知识打下坚实的基础。思考及作业想一想：在HTML5中，如果要在网页中插入一张本地图片，应该使用什么标签和属性？练一练：使用所学的HTML5知识，制作一个个人简介页面，包含标题、段落、换行等元素。课时内容创建HTML5网页中的文本与图像授课时间180分钟课时4教学目标了解HTML5网页中文本和图像的基础概念，包括文本的作用、图像的格式等。掌握在网页中创建文本、设置文本样式（如颜色、字号、字体等）的方法，学会插入特殊字符和使用列表。学会在网页中插入图像，掌握图像的基本格式、属性设置（如大小、对齐方式等）以及图像与文字的排版技巧。能够运用所学知识制作包含文本和图像的简单网页，提升实践操作能力。教学重点熟练掌握文本的各种设置方法，如设置颜色、字号、字体、样式等。掌握在网页中插入图像的方法，以及图像属性和对齐方式的设置。学会使用水平线分隔网页内容，提升网页的布局效果。教学难点理解并灵活运用各种文本和图像的设置属性，以实现预期的网页效果。掌握图像与文本的合理排版，使网页布局美观、协调。教学设计1、教学思路：（1）先介绍HTML5网页中文本和图像的重要性，引发学生兴趣；（2）详细讲解文本的创建和设置方法，通过课堂案例让学生实践操作，加深理解；（3）接着介绍图像的插入和相关设置，同样以案例驱动，让学生动手操作；（4）最后安排练习案例，巩固所学知识，培养学生综合运用能力。2、教学手段：（1）采用理论讲解与实践操作相结合的方式，边讲边练，让学生及时掌握知识点；（2）通过展示示例代码和网页效果，直观呈现知识点的应用，便于学生理解；（3）针对学生在操作过程中遇到的问题，及时进行答疑和指导。3、教学资料及要求：（1）准备相关的教学PPT，包含知识点讲解、示例代码和网页效果展示；（2）提供课堂案例和练习案例的素材文件，方便学生实践操作；（3）要求学生提前预习相关知识，在课堂上积极参与实践操作，认真完成练习任务。教学内容知识回顾：简单回顾HTML5的基本概念和常用标签，为学习文本和图像的创建做铺垫。讨论问题：观察并思考文本和图像在网页中的作用？内容大纲：具体可结合本章的PPT课件进行配合讲解。TOC\o"1-3"\n\u4.1网页中的文本4.1.1课堂案例——输入文本并设置颜色4.1.2设置文字字号4.1.3设置文字的字体与样式4.1.4设置字体的颜色4.1.5文本的上标和下标4.1.5插入特殊字符4.1.6列表4.2水平线4.2.1课堂案例——在网页中插入水平线4.2.2水平线标签<hr>4.2.3标签<hr>线段粗细的设定4.2.4标签<hr>线段长度的设定4.2.5标签<hr>线段排列的设定4.3网页中的图像4.3.1课堂案例——在网页中插入图像4.3.2图像的基本格式4.3.3设置图像属性4.3.4图像与网页文字的对齐方式4.3.5图像与文字之间的距离4.3.6图形按钮（图像链接）4.4练习案例4.4.1练习案例——将图像设置为网页背景4.4.2练习案例——金鱼喂养问答网页小结回顾本节课所学的重点知识，包括文本的创建与设置、水平线的插入与属性设置、图像的插入与属性设置以及图像与文本的排版技巧。强调各知识点之间的联系，鼓励学生在课后多练习，熟练掌握这些技能，为制作更复杂的网页打下基础。思考及作业想一想：在实际的网页设计项目中，如何平衡文本内容和图像元素的比例？练一练：制作一个个人简介网页，要求包含文本（姓名、年龄、爱好等）、图像（个人照片）和水平线，合理设置文本和图像的样式。思考如何优化网页中图像的加载速度，查阅资料了解相关方法。课时内容创建HTML5网页中的表格与表单授课时间180分钟课时4教学目标了解表格和表单在HTML5网页中的作用和基本概念。熟练掌握创建表格的方法，包括设置表格标题、尺寸、边框、间距、内容对齐方式以及跨行列单元格的操作。掌握插入表单及各种表单对象（文本域、密码域、单选按钮、复选框、表单按钮等）的方法。能够运用表格与表单知识制作具有实际功能的网页模块，如在线调查表、注册网页等。教学重点表格的创建与各种属性设置，如标题位置、尺寸、边框、间距、内容对齐方式等。表单的插入以及表单对象（文本域、密码域、单选按钮、复选框、按钮）的使用方法。教学难点理解并灵活运用表格的跨行列单元格设置，实现复杂表格布局。掌握表单中不同表单对象的特点和使用场景，以及表单与服务器端交互的原理。教学设计1、教学思路：（2）通过展示实际网页案例，引出表格与表单在网页设计中的重要性，激发学生学习兴趣；（2）采用理论讲解与实践操作相结合的方式，详细介绍表格和表单的相关知识，每讲解一个知识点，安排学生进行相应的实践练习；（3）引导学生完成课堂案例和练习案例，培养学生综合运用知识解决实际问题的能力；（4）在教学过程中，及时解答学生的疑问，鼓励学生积极思考和探索。2、教学手段：（1）利用多媒体教学设备，通过PPT演示、代码展示和网页效果预览，让学生直观地理解知识点；（2）提供课堂案例和练习案例的源代码及素材，方便学生进行实践操作。3、教学资料及要求：（1）准备教学PPT，包含表格与表单的概念、语法、示例代码及网页效果展示；（2）要求学生提前预习相关知识，在课堂上认真听讲、积极参与实践操作，课后完成布置的作业。教学内容知识回顾：回顾HTML5的基础知识，如常用标签、文本和图像的插入方法等，为学习表格与表单做铺垫。讨论问题：如何通过表格设置提升网页的数据展示和布局效果？内容大纲：具体可结合本章的PPT课件进行配合讲解。5.1表格5.1.1课堂案例——创建网页中的表格5.1.2表格的标题5.1.3表格的尺寸5.1.4表格的边框尺寸5.1.5表格的间距调整5.1.6表格内容与格线之间的宽度5.1.7表格内数据的布局对齐5.1.8跨多行、多列的单元格5.2表单5.2.1课堂案例——制作在线调查表5.2.2表单概述5.2.3文本域5.2.4密码域5.2.5单选按钮5.2.6复选框5.2.7表单按钮5.3练习案例5.3.1练习案例——制作导航栏5.3.2练习案例——制作注册网页小结回顾本节课所学的表格和表单的重点知识，包括表格的创建与属性设置、表单的插入与表单对象的使用。强调表格和表单在网页设计中的重要性，鼓励学生在课后多练习，提高网页设计能力。思考及作业想一想：在实际的网页设计项目中，如何平衡表格布局和表单交互的比例？练一练：（1）制作一个课程表网页，要求使用表格展示课程安排，设置表格的标题、边框、间距等属性，使表格布局合理、美观。（2）制作一个用户反馈表单网页，包含文本域、单选按钮、复选框、提交按钮和重置按钮等表单对象。

课时内容HTML5中的超链接授课时间90分钟课时2教学目标学生能够理解超级链接的概念、作用及在HTML5网页中的重要性。掌握URL的组成结构，理解通信协议、主机域名和目标资源路径的含义。熟悉超级链接路径的分类（绝对路径、相对文档路径、相对于站点根目录的路径）及其适用场景。了解图像链接、下载链接、锚点链接和电子邮件链接的特点及创建方法。教学重点超级链接的基本设置方法，包括<a>标签的使用，href、target等属性的设置。URL的组成及各部分的含义，以及不同通信协议的用途。不同类型超级链接路径（绝对路径、相对文档路径、相对于站点根目录的路径）的特点和使用场景。教学难点解并正确选择和使用超级链接路径，尤其是相对文档路径和相对于站点根目录的路径，以及在实际项目中根据文件位置变化进行路径调整。教学设计1、教学思路：（1）通过展示实际网页案例，引入超级链接的概念，让学生直观感受超级链接在网页中的应用和作用，激发学生的学习兴趣；（2）采用理论讲解与实践操作相结合的方式，详细讲解超级链接的相关知识，每讲解一个知识点，安排学生进行相应的实践练习，及时巩固所学内容；（3）引导学生完成课堂案例和练习案例，培养学生综合运用知识解决实际问题的能力。在教学过程中，设置问题引导学生思考，鼓励学生自主探索和小组合作交流。2、教学手段：（1）利用多媒体教学设备，通过PPT演示、代码展示、网页效果预览等方式，直观地呈现教学内容，帮助学生理解抽象概念和复杂操作；（2）提供课堂案例和练习案例的源代码及素材，方便学生进行实践操作。同时，在学生实践过程中，通过网络教室软件进行实时监控和指导，及时解决学生遇到的问题。3、教学资料及要求：（1）提供课堂案例和练习案例的完整代码及所需素材文件，如图像、压缩文件等，让学生能够直接参考和使用；（2）推荐相关的在线教程、技术论坛等学习资源，供学生课后拓展学习；（3）要求学生提前预习相关知识，了解超级链接的基本概念。在课堂上认真听讲，积极参与实践操作，按照要求完成课堂案例和练习案例。课后及时复习所学内容，完成布置的作业。教学内容知识回顾：之前学习了HTML5网页中文本、图像、表格和表单的相关知识。讨论问题：1、如何为网页中文本与图像设置跳转链接？内容大纲：具体可结合本章的PPT课件进行配合讲解。TOC\o"1-3"\n\p""\u6.1设置超级链接6.1.1课堂案例——在新窗口中打开网页6.1.2创建超级链接6.1.3URL6.1.4超级链接路径6.2图像链接与下载链接6.2.1课堂案例——点击小图查看大图6.2.2图像链接6.2.3下载链接6.3锚点链接6.4电子邮件链接6.5练习案例6.5.1练习案例——返回网页顶部6.5.2练习案例——精美壁纸下载小结1、掌握添加锚点链接的方法。2、掌握添加电子邮件链接的方法。3、掌握创建下载链接的方法。思考及作业想一想：不同类型超级链接的特点和使用场景？练一练：制作点击小图跳转到大图的效果。制作一个旅游景点介绍网页，要求包含景点图片链接、景点详情页面链接、景点相关资料下载链接。

课时内容HTML5网页中的音频与视频授课时间90分钟课时2教学目标理解音频和视频元素在HTML5网页中的作用和重要性。掌握<audio>和<video>标签的基本语法和常用属性，如src、autoplay、controls、loop、muted、width、height、poster等。了解不同音频和视频文件格式在网页中的支持情况。教学重点<audio>和<video>标签的使用方法及属性设置，如设置音频和视频的源文件路径、控制播放行为等。不同音频和视频文件格式的特点及在网页中的适用性。综合运用音频、视频与其他HTML元素进行网页设计。教学难点理解并灵活运用<audio>和<video>标签的各种属性，以实现特定的音频和视频播放效果，如同时设置多个属性时的相互影响。在实际网页设计中，根据网页的主题和需求，合理选择和搭配音频、视频元素，提升网页的整体质量。教学设计1、教学思路：（1）以展示丰富多样的多媒体网页案例作为课程导入，激发学生的学习兴趣和好奇心，让学生直观感受音频和视频在网页中的魅力，引出本节课的主题；（2）采用理论讲解与实践操作相结合的方式，先详细讲解<audio>和<video>标签的语法、属性及相关知识，然后通过课堂案例演示，让学生观察实际效果，加深理解。接着安排学生进行实践操作，在实践过程中教师进行巡视指导，及时解决学生遇到的问题；（3）组织学生进行小组讨论和交流，分享在添加音频和视频过程中的经验和问题，促进学生之间的相互学习。最后通过练习案例巩固所学知识，提升学生综合运用能力。2、教学手段：（1）利用多媒体教学设备，通过PPT演示、代码展示和网页效果预览，直观地呈现教学内容，帮助学生更好地理解抽象概念和复杂操作；（2）提供课堂案例和练习案例的源代码及素材，方便学生进行实践操作。同时，借助网络教室软件，实时监控学生的操作过程，及时给予指导和反馈；（3）鼓励学生自主探索和小组合作学习，通过讨论、交流和互相帮助，共同解决学习过程中遇到的问题，培养学生的团队协作精神和自主学习能力。。3、教学资料及要求：（1）准备多个音频和视频文件，以及相关的图片、HTML文件等素材，用于课堂案例演示和学生实践操作。同时，提供案例的完整源代码，方便学生参考和学习；（2）推荐相关的在线教程、技术论坛和文档，如MDNWebDocs等，供学生课后拓展学习，深入了解音频和视频在HTML5中的应用。教学内容知识回顾：前面讲解了网页中的超级链接等内容。讨论问题：在浏览网页时是否注意过除了超级链接之外的音频和视频元素，以及它们对网页的整体效果有什么影响？内容大纲：具体可结合本章的PPT课件进行配合讲解。7.1添加音频7.1.1课堂案例——插入音频文件7.1.2audio标签属性7.1.3添加自动播放的音频文件7.1.4添加带有控件的音频文件7.1.5添加循环播放的音频文件7.2添加视频7.2.1课堂案例——插入视频文件7.2.2video标签的属性7.2.3添加自动播放的视频文件7.2.4添加带有控件的视频文件7.2.5添加循环播放的视频文件7.2.6为视频添加封面7.3练习案例7.3.1练习案例——制作音乐网页练习案例——制作视频网页小结1、在实际网页设计中，要根据网页的主题和用户需求，合理选择和设置音频、视频元素的属性，以提升网页的多媒体效果和用户体验。2、掌握网页中添加音频和视频的关键知识点，如音频和视频的自动播放、循环播放设置，视频封面的添加等。思考及作业想一想：视频与音频怎么搭配才能使网页更加美观？练一练：制作一个音频播放网页。（2）制作视频教学网页。

课时内容CSS3基础授课时间225分钟课时5教学目标理解CSS的概念、作用及优越性，明确其在网页设计中的重要地位。掌握CSS的基本语法、结构以及不同类型样式的特点和应用场景。教学重点CSS的基本语法，包括选择符、属性和值的使用方法。不同类型CSS样式（自定义样式、包含特定ID属性的标签样式、定义HTML标签样式、复合内容样式）的创建与应用。各类选择符（如类选择符、群组选择符、包含选择符等）的特点及使用场景。添加CSS样式表的方式（链接外部样式表、嵌入样式表、联合使用样式表）及实际应用。。教学难点理解并灵活运用各种选择符，尤其是包含选择符、id及class选择符的组合使用，精准控制网页元素样式。掌握伪类与伪对象的概念和使用方法，以及它们在实际网页设计中的应用场景。。教学设计教学思路：（1）通过展示精美的网页案例，引入CSS的概念，让学生直观感受CSS对网页外观的强大控制能力，激发学生的学习兴趣；（2）采用理论讲解与实践操作相结合的方式，先详细讲解CSS的基础理论知识，再通过课堂案例演示，引导学生观察、分析和实践，让学生在实际操作中掌握知识。。教学手段：（1）利用多媒体教学设备，通过PPT演示、代码展示和网页效果预览，直观地呈现教学内容，帮助学生更好地理解抽象概念和复杂操作；（2）提供课堂案例和练习案例的源代码及素材，方便学生进行实践操作。同时，借助网络教室软件，实时监控学生的操作过程，及时给予指导和反馈。。教学资料及要求：（1）包含CSS的概念、语法、结构、样式类型、选择符、添加样式表的方法等内容，以及大量的示例代码和网页效果展示；（2）准备丰富的HTML文件、CSS样式表文件、图片等素材，用于课堂案例演示和学生实践操作。同时，提供案例的完整源代码，方便学生参考和学习。教学内容知识回顾：前面讲解了HTML的相关知识。讨论问题：1、一些网页中不同的布局、字体样式、颜色搭配和特殊效果等使怎样实现的？内容大纲：具体可结合本章的PPT课件进行配合讲解。8.1CSS3概述8.1.1课堂案例——编写CSS8.1.2什么是CSS8.1.3CSS的优越性8.1.4CSS3的基础语法8.1.5CSS样式的类型8.2CSS的语法结构8.2.1课堂案例——定义网页背景颜色与字体8.2.2CSS属性与选择符号8.2.3类选择符8.2.4群组选择符8.2.5包含选择符8.2.6id及class选择符8.2.7标签指定式选择符8.2.8组合选择符8.2.9继承选择符8.2.10伪类与伪对象8.2.11通配选择符8.3添加CSS样式表8.3.1课堂案例——调用外部CSS样式表8.3.2链接一个外部的样式表8.3.3嵌入一个样式表8.3.4联合使用样式表8.3.5id属性8.3.6class属性8.3.7span元素8.3.8div元素8.4练习案例8.4.1练习案例——制作下拉菜单8.4.2练习案例——商品图像特殊效果小结掌握CSS的概念、作用及优越性。掌握CSS的基本语法、结构以及不同类型样式的特点。思考及作业想一想：如何根据网页设计需求，合理选择并综合运用不同的CSS样式和添加样式表的方法，实现复杂的网页样式效果？练一练：制作一个个人简历网页，要求运用所学的CSS知识，对网页进行布局和样式设计，包括设置字体、颜色、背景、段落格式等，使网页美观、整洁为一个电商商品展示页面添加CSS样式，实现商品图片的特效展示（如鼠标悬停时放大、添加阴影等），以及商品信息的合理排版。

课时内容CSS3中的属性设置授课时间225分钟课时5教学目标全面了解CSS3中各类属性的概念和作用，包括但不限于字体、文本、背景、边框、布局相关属性等。理解不同属性的取值范围和相互之间的影响关系。熟悉各类属性在不同网页元素上的应用场景。教学重点常用CSS3属性的使用方法，如font-family、color、background-color、border、display、float等。理解并掌握与布局相关的属性，如display属性的不同取值对元素显示模式的影响，float属性实现元素浮动布局的原理和应用。教学难点一些较为复杂的属性，如transform（变形）、transition（过渡）、animation（动画）等属性的理解和应用，包括其参数设置和实现复杂动画效果的技巧。解决不同属性之间的冲突和兼容性问题，确保网页在各种主流浏览器中显示效果一致。如何引导学生将理论知识应用到实际网页设计中，培养学生独立完成复杂网页样式设计的能力。教学设计教学思路：（1）通过展示具有丰富样式效果的网页案例，引入CSS3属性设置的重要性，激发学生的学习兴趣；（2）采用理论讲解与实践操作相结合的方式，先详细介绍各类属性的语法、功能和取值，再通过课堂案例演示，让学生直观感受属性设置对网页样式的影响。教学手段：（1）利用多媒体教学设备，通过PPT演示、代码展示和网页效果实时预览，直观呈现教学内容，帮助学生更好地理解抽象的属性概念和复杂的样式效果；（2）提供课堂案例和练习案例的源代码及素材，方便学生进行实践操作。借助网络教室软件，实时监控学生的操作过程，及时给予指导和反馈；（3）鼓励学生自主探索和小组合作学习，通过讨论、交流和互相帮助，共同解决学习过程中遇到的问题，培养学生的团队协作精神和自主学习能力。教学资料及要求：（1）准备大量与课堂教学内容相关的HTML文件、CSS样式表文件、图片等素材，用于课堂案例演示和学生实践操作。同时，提供案例的完整源代码，方便学生参考和学习；（2）推荐相关的在线教程、技术论坛和文档，如MDNWebDocs、W3School等，供学生课后拓展学习，深入了解CSS3属性的相关知识；（3）要求学生提前预习相关知识，了解CSS3属性的基本概念。在课堂上认真听讲，积极参与实践操作，按照要求完成课堂案例和练习案例。课后及时复习所学内容，完成布置的作业，进一步巩固所学知识。教学内容知识回顾：前面讲解了CSS3的基础知识。讨论问题：不同网页的字体、颜色、背景、布局等样式有什么特点？内容大纲：具体可结合本章的PPT课件进行配合讲解。9.1CSS中的字体以及文本控制9.1.1课堂案例——指定文字字体与添加下划线9.1.2字体属性9.1.3文本属性9.2CSS中的颜色及背景控制9.2.1课堂案例——设置网页背景图像9.2.2对颜色属性的控制9.2.3对背景颜色的控制9.2.4对背景图像的控制9.2.5对于背景图像重复的控制9.2.6背景图像固定控制9.2.7背景定位9.3CSS中的方框的控制属性9.3.1边框空白9.3.2对象边框9.3.3对象间隙9.4CSS中的分类属性9.4.1显示控制样式9.4.2空白控制样式9.4.3列表项前的项目编号控制9.4.4在列表项前加入图像9.4.5课堂案例——设置网页目录9.4.6目录样式位置9.4.7目录样式9.4.8控制鼠标光标属性9.5练习案例9.5.1练习案例——制作文字特效9.5.2练习案例——制作导航特效小结掌握CSS中的字体以及文本控制。掌握CSS中的颜色及背景控制。掌握CSS中的方框的控制属性。CSS中的分类属性。思考及作业想一想：如何将理论知识应用到实际网页设计中，培养学生独立完成复杂网页样式设计的能力？练一练：（1）优化一个已有的网页，该网页存在布局混乱、样式不美观等问题。要求学生使用CSS3属性对其进行重新设计，调整字体、颜色、背景、边框等样式，优化页面布局，使其符合现代网页设计的风格。（2）制作一个数字放大特效的效果。课时内容使用CSS3设置表格与表单样式授课时间180分钟课时4教学目标理解CSS3在表格与表单样式设置中的重要作用，明确其对提升网页美观度和交互性的意义。掌握设置表格样式的相关属性，如边框、颜色、内边距、圆角边框等，以及这些属性的取值和应用场景。熟悉设置表单样式的各种方法，包括输入框、按钮等表单元素的样式属性，如填充、边框、颜色、大小等。教学重点表格样式的设置，包括边框、颜色、内边距、圆角边框等属性的应用。表单样式的设置，如输入框、按钮的样式属性调整。实现特殊效果，如表格隔行变色、表单按钮的交互效果等。教学难点理解并灵活运用各种CSS3属性，解决表格和表单样式设置中的复杂问题，如属性冲突、样式在不同浏览器中的兼容性问题。掌握实现特殊效果的技巧，如使用CSS3的伪类选择器实现表格隔行变色、按钮的悬停效果等。教学设计教学思路：（1）通过展示优秀网页中表格与表单的精美样式，引发学生兴趣，导入课程内容；（2）采用理论讲解与实践操作相结合的方式，先详细介绍CSS3设置表格与表单样式的相关知识，再通过课堂案例演示，让学生直观感受不同样式设置的效果；（3）组织学生进行课堂练习和小组讨论，鼓励学生在实践中探索和创新，培养学生的自主学习能力和团队协作精神；（4）对学生的练习成果进行点评和总结，针对学生遇到的问题进行集中讲解，加深学生对知识的理解和掌握。教学手段：（1）利用多媒体教学设备，通过PPT演示、代码展示和网页效果实时预览，直观呈现教学内容，帮助学生更好地理解抽象的属性概念和复杂的样式效果；（2）提供课堂案例和练习案例的源代码及素材，方便学生进行实践操作。借助网络教室软件，实时监控学生的操作过程，及时给予指导和反馈。。教学资料及要求：（1）准备大量与课堂教学内容相关的HTML文件、CSS样式表文件、图片等素材，用于课堂案例演示和学生实践操作。同时，提供案例的完整源代码，方便学生参考和学习；（2）推荐相关的在线教程、技术论坛和文档，如MDNWebDocs、W3School等，供学生课后拓展学习，深入了解CSS3属性的相关知识；（3）要求学生提前预习相关知识，了解表格与表单的基本结构和CSS样式的基本概念。在课堂上认真听讲，积极参与实践操作，按照要求完成课堂案例和练习案例。课后及时复习所学内容，完成布置的作业，进一步巩固所学知识。教学内容知识回顾：前面讲解了CSS3的属性设置。讨论问题：网页中商品列表页、用户注册登录页等美化效果是怎样实现的？内容大纲：具体可结合本章的PPT课件进行配合讲解。TOC\o"1-3"\n\p""\u10.1设置表格样式10.1.1课堂案例——创建细线表格10.1.2设置表格颜色10.1.3设置表格边框10.1.4表格的内边距10.1.5圆角边框10.2设置表单样式10.2.1课堂案例——制作登录页面10.2.2设置输入框10.2.3设置表单按钮10.3练习案例10.3.1练习案例——制作隔行变色的表格10.3.2练习案例——制作购物付款页面小结1、设置表格样式。2、设置表单样式。思考及作业想一想：如何将表格和表单样式与网页整体设计风格相融合，提升用户体验？练一练：制作一个课程表网页，要求运用所学的CSS3知识，对表格进行样式设计，包括设置表格的边框、颜色、内边距、隔行变色效果等，使课程表美观、清晰。设计一个用户反馈表单页面，使用CSS3为表单元素添加样式，如输入框、按钮等，同时要注重页面布局和整体风格的设计，提升用户体验。

课时内容使用CSS+DIV布局网页授课时间180分钟课时4教学目标理解Web标准的概念、构成及重要性，明确结构、表现和行为在网页设计中的作用。掌握DIV的基本概念、用法及在布局中的角色，熟悉DIV的创建和选择方法。深入理解Div+CSS盒模型，包括margin、border、padding等属性的含义和作用。熟悉Div+CSS布局定位方式，如相对定位、绝对定位和浮动定位的原理及应用场景。了解常用的Div+CSS布局方式，如居中布局、浮动布局等的特点和实现方法。教学重点Div+CSS布局的基本概念和原理，包括Web标准、DIV的使用、盒模型等。常用的布局定位方式，如相对定位、绝对定位和浮动定位的应用。常见的Div+CSS布局方式，如居中布局、两列和三列布局的实现方法。。教学难点理解盒模型中margin、border、padding等属性之间的关系，以及它们对元素布局的影响。掌握不同布局定位方式的特点和适用场景，能够根据具体需求选择合适的定位方式解决布局问题。教学设计1、教学思路：（1）以实际案例引入课程内容，展示使用CSS+DIV布局的精美网页，让学生直观感受其优势，激发学生的学习兴趣；（2）采用理论讲解与实践操作相结合的方式，先详细讲解相关概念和知识，再通过课堂案例演示，引导学生观察、分析和实践，让学生在实际操作中掌握知识和技能；（3）组织学生进行课堂练习和小组讨论，鼓励学生在实践中探索和交流，培养学生的自主学习能力和团队协作精神。2、教学手段：（1）利用多媒体教学设备，通过PPT演示、代码展示和网页效果预览，直观地呈现教学内容，帮助学生更好地理解抽象概念和复杂操作；（2）提供课堂案例和练习案例的源代码及素材，方便学生进行实践操作。同时，借助网络教室软件，实时监控学生的操作过程，及时给予指导和反馈；（3）鼓励学生自主探索和小组合作学习，通过讨论、交流和互相帮助，共同解决学习过程中遇到的问题，培养学生的团队协作精神和自主学习能力。3、教学资料及要求：（1）准备丰富的HTML文件、CSS样式表文件、图片等素材，用于课堂案例演示和学生实践操作。同时，提供案例的完整源代码，方便学生参考和学习；（2）在线学习资源：推荐相关的在线教程、技术论坛和文档，如MDNWebDocs、W3School等，供学生课后拓展学习，深入了解CSS+DIV布局的相关知识；（3）要求学生提前预习相关知识，了解网页布局的基本概念。在课堂上认真听讲，积极参与实践操作，按照要求完成课堂案例和练习案例。课后及时复习所学内容，完成布置的作业，进一步巩固所学知识。。教学内容知识回顾：前面讲解了使用CSS3设置表格与表单样式。讨论问题：如何实现复杂的网页布局，如三列浮动中间列宽度自适应布局？内容大纲：具体可结合本章的PPT课件进行配合讲解。TOC\o"1-3"\n\p""\u11.1CSS与DIV布局基础11.1.1什么是Web标准11.1.2Web标准的构成11.1.3DIV概述11.2使用DIV11.2.1课堂案例——在Div中插入图像11.2.2创建Div11.2.3选择Div11.3关于Div+CSS盒模型11.3.1盒模型的概念11.3.2margin（边界）11.3.3border（边框）11.3.4课堂案例——文字虚线分割11.3.5padding（填充）11.4Div+CSS布局定位11.4.1relative（相对定位）11.4.2absolute（绝对定位）11.4.3float（浮动定位）11.5

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论