网页基础与制作 1

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第1章HTML入门计划课时4课时教学引入网页和网站伴随着互联网的发展，充满人们生活的每个角落。人们可以在计算机上浏览网页新闻，通过网站购物，观看视频。面对着每天不绝于眼耳的各类网络资讯，有没有自己建设一个网站的想法呢？为实现这个想法应该储备什么知识与技能呢？从本章开始将逐步深入地讲解HTML入门的相关知识和技能。教学目标使学生了解网页和网站的基本概念，能够说明二者之间的联系使学生了解网页基本构成要素，能够描述网页的基本构成要素使学生了解网站页面构成，能够描述网站的页面构成使学生了解网站类型，能够描述常见的网站类型使学生熟悉常用的浏览器，能够区分常见的浏览器使学生熟悉网站制作流程，能够描述网页制作的基本流程使学生熟悉网页设计原则，能够描述网页设计的基本原则使学生熟悉网页设计规范，能够描述网页设计的基本规范使学生掌握HBuilderX的安装与使用，能够独立完成HBuilderX的安装并使用它编写网页使学生掌握人工智能（artificialintelligence，AI）网页工具的使用，能够运用AI网页工具快速编写网页教学重点HBuilderX的安装与使用教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（网页和网站基本概念、网页基本构成要素、网站页面构成、网站类型、浏览器概述）一、通过直接引入的方式导入新课说到网页和网站其实大家并不陌生，我们用计算机在网上浏览新闻、查询信息、查看图片等都是在浏览网页，同时我们也会登录淘宝、京东等网站购物。但是，对于网页制作的初学者来说，还是有必要了解网页和网站的相关知识。本节课将对网页和网站的相关知识进行具体讲解。二、新课讲解知识点1-网页和网站基本概念教师通过PPT的方式讲解网页和网站基本概念。认识网页认识网站知识点2-网站基本构成要素教师通过PPT的方式讲解网站基本构成要素。文字图像超链接多媒体知识点3-网站页面构成教师通过PPT的方式讲解网站页面构成。首页列表页详情页知识点4-网站类型教师通过PPT的方式讲解网站类型。企业类网站资讯门户类网站购物类网站个人网站知识点5-浏览器概述教师通过PPT的方式讲解浏览器概述。IE浏览器火狐浏览器谷歌浏览器三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（网站制作流程、网页设计原则、配色原则、设计尺寸规范、字体规范、命名规范）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课制作网站就像一个工程一样，有着一定的工作流程。设计师在设计、制作网站时，只有遵循相关流程才能有条不紊地完成网站制作，让网站页面的结构更加规范合理。本节课将对网站制作流程、网页设计原则、网页设计规范进行讲解。三、新课讲解知识点1-网站制作流程教师通过PPT的方式讲解网站制作流程。确定网站主题网站整体规划收集素材设计网页效果图页面中特殊元素的设计搭建网站静态页面开发动态网站模块上传和发布网页知识点2-网页设计原则教师通过PPT的方式讲解网页设计原则。 以用户为中心视觉美观主题明确内容与形式统一知识点3-配色原则教师通过PPT的方式讲解配色原则。确定主辅色遵循配色方案知识点4-设计尺寸规范教师通过PPT的方式讲解设计尺寸规范。网页设计规范的作用。页面宽度设计。版心的概念。知识点5-字体规范教师通过PPT的方式讲解字体规范。字体规范的作用。字体字号的选择。常用颜色。知识点6-命名规范教师通过PPT的方式讲解命名规范。命名规范的作用。网页设计命名常用单词。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（常见的网页编辑器、HBuilderX的安装与使用、AI实践：AI网页工具初体验）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在网页制作过程中，为了开发方便，通常会选择一些较便捷的网页编辑器。本节课将介绍常见的网页编辑器，并对HBuilderX的安装与使用进行详细讲解。三、新课讲解知识点1-常见的网页编辑器教师通过PPT的方式讲解常见的网页编辑器。HBuilderXVisualStudioCodeDreamwearver知识点2-HBuilderX的安装与使用教师通过PPT结合实际操作的方式讲解HBuilderX的安装与使用。下载HBuilderX的压缩包将压缩包解压，双击HBuilderX.exe启动HBuilderX新建项目新建文件编写代码运行代码知识点3-AI实践：AI网页工具初体验教师通过PPT结合实际操作的方式讲解AI实践：AI网页工具初体验。安装插件代码生成与补全生成注释四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对