情境十一 综合网站的实现、测试与发布（教案）-《网页设计与制作》同步教学（电子工业版）

情境十一 综合网站的实现、测试与发布 课程名称 网页设计与制作 学时 授课时间 授课章节 情境十一 综合网站的实现、测试与发布 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 学会HTML文本标签、头部标记、 页面创建超链接、创建表格表单功能； 2、 掌握CSS的基本选择器，基本属性和布局功能的应用； 3、 掌握JavaScript基础语言、函数、面向对 象功能的使用。 实际操作技能 1、 能使用HTML制作静态网页 2、 能使用CSS开发页面样式 3、 能使用JavaScript开发交互效果 4、 具备静态网页设计、开发、调试、维护等能力； 思政元素目标 1、 引导学生坚定理想信念、发扬优良传统； 2、 培养学生精益求精的职业素养。 知识、技能重点 1、 能使用HTML制作静态网页 2、 能使用CSS开发页面样式 3、 能使用JavaScript开发交互效果 4、 具备静态网页设计、开发、调试、维护等能力； 知识、技能难点 1、 能使用HTML制作静态网页 2、 能使用CSS开发页面样式 3、 能使用JavaScript开发交互效果 4、 具备静态网页设计、开发、调试、维护等能力； 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 11.1 综合网站的设计与制作 11.2 模仿型任务讲解 前端开发规范 网页中插入视频 对网站进行检测 对网站进行发布 11.3开放型任务制作 备注 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：如何进行页面的设计与布局？ 2、展示多个不同类型的综合网站； 3、教学目的：能使用HTML制作静态网页；能使用CSS开发页面样式；能使用JavaScript开发交互效果。 【讲授新课】 知识储备 1.1学习路线，如图11.1 图11.1综合网站学习路线 1.2 知识小天地 前端开发规范有哪些 在实际开发中，为了提高团队的协作效率，便于后台开发人员能够根据需求进行网站功能的添加及网站后期的优化维护等；前端开发人员就必须按照一定的规范进行前台页面的开发。 一、文件命名规范 1.2.1 项目命名 全部采用小写字母方式，以下划线分割。例： my_project_name。 1.2.2 目录命名 参考项目命名规则；有复数结构时，要采用复数命名法。例： styles/*, images/*, scripts/*, data_models/* 1.2.3 HTML文件命名 全部采用小写字母方式，以下划线分割。例： news.html, news_detail.html 1.2.4 CSS文件命名 全部采用小写字母方式，以下划线分割。例： news.css, news_detail.css 1.2.5 Image文件命名 全部采用小写字母方式，以下划线分割。 （1）同一类型图片可使用数字下标累加命名。例： banner_01.jpg, bannner_02.jpg （2）需要适配多终端时，可使用图片尺寸做命名。例： logo.png, logo_16_16.png 1.2.6 JavaScript文件命名 全部采用小写字母方式，以下划线分割。例： news.js, news_detail.js 二、HTML规范 1.2.7 注释方法 注释规范(最好用英文)，例： <!-- header begins --> 1.2.8 严格嵌套 （1）应当以最严格的xhtml strict标准来嵌套，如内联元素不能包含块级元素等。 （2）关于双标签，要正确闭合标签且必须闭合。 1.2.9 属性 （1）属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。 （2）没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等）。 （3）可以省略style标签和script标签的type属性。 三、CSS代码规范 （1）每个样式属性后（必须）加 "；" 方便压缩工具"断句"。 （2）class命名统一采用小写字母，禁止出现大写字母，多个单词可采用“-”进行连接，如： .stages-title{…} （3）建议属性的书写顺序：定位属性、盒子模型属性、其他属性。 （4）建议当编写针对特定html结构的样式时，使用元素名 + 类名，例： ul.nav { ...... } （5）不使用行内样式。 四、JavaScript代码规范 （1）变量和函数采用小驼峰式命名法，由小(大)写字母开始，后续每个单词首字母都大写。 （2）常量全部使用大写字母，如有多个单词，采用大写字母和下划线来组合命名，下划线用以分割单词。 （3）添加必要的注释，JS支持两种不同类型的注释：单行注释和多行注释。 如何在网页中插入视频 <video>标签是HTML 5 的新标签，该标签定义视频，比如电影片段或其他视频流，目前<video> 标签支持三种视频格式：MP4、WebM、Ogg。 <video> 标签支持HTML 中的全局属性和全局事件。可以在该标签的开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息，如： <video width="320" height="220" controls=" controls "> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video> 简单写法： <video src="movie.ogg" controls="controls"> 您的浏览器不支持 video 标签。 </video> 该标签的可选属性如下表： 表11-1 video标签属性 属性 值 描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 muted muted 规定视频的音频输出应该被静音。 poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放；如果使用 "autoplay"，则忽略该属性。 src url 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。 如何进行网站的检测 网站系统的设计开发人员一旦完成网站的设计开发工作之后，都必须保证所有网站系统的组成部分能够配合起来，协调有序地正常工作。因此，网站系统的测试工作十分重要。 测试的内容主要有以下几点： （1）浏览器的兼容性测试。对不同浏览器的测试，就是在不同浏览器和不同的版本下，测试网页的运行和显示状况。在实际工作中，用户会使用不同的浏览器登录互联网，通过此项测试和修改，可以保证网页在大多数的浏览器中都能正确显示。既给出网页在IE浏览器和Netscape浏览器下的显示报告，也详细统计了网页中哪些HTML语法不被浏览器支持以及改善的建议。 （2）操作系统测试。在不同的操作系统下，网页显示效果是否一致。 （3）分辨率测试。显示器在1024×768像素与800×600像素情况下网页有哪些变化。 （4）HTML语法检查。不正确的HTML语法会影响浏览器的编译速度，而且可能会导致页面在容错性差的浏览器中出错。 （5）链接情况检查。帮助检查页面上所有链接是否正确，有没有死链接。当页面创建了很多链接时，用它来帮助检查链接的正确性。 （6）下载时间测试。测试网页在不同连接速度下的下载时间，并且指出被测试页面所链接的文件(图片文件、框架页面、样式表文件及脚本文件等)中哪个过于庞大。 （7）拼写检查。检查网页上的中英文文法错误。 如何进行网站的发布 网站的测试工作完成后，我们需要申请域名和网站空间，将我们的网站发布到Internet上，才能让其他人访问到我们的网站。 在中国，域名注册通常分为国内域名注册和国际域名注册： （1）国内域名注册：统一由中国互联网络信息信心（CNNIC）进行管理，具体注册工作由通过CNNIC认证授权的各代理商执行。 （2）国际域名注册：由管理机构ICANN统一管理，ICANN（The Internet Corporation for Assigned Names and Numbers）互联网名称与数字地址分配机构是一个非营利性的国际组织，具体工作也是由通过ICANN授权认证的各代理商执行。 域名申请步骤： 1、准备申请资料：com域名无需提供身份证、营业执照等资料，cn域名已开放个人申请注册，所以申请则需要提供身份证或企业营业执照。 2、寻找域名注册网站，推荐谷谷互联，由于.com、.cn域名等不同后缀均属于不同注册管理机构所管理，如要注册不同后缀域名则需要从注册管理机构寻找经过其授权的顶级域名注册服务机构。如com域名的管理机构为ICANN，cn域名的管理机构为CNNIC（中国互联网络信息中心）。若注册商已经通过ICANN、CNNIC双重认证，则无需分别到其他注册服务机构申请域名。 3、查询域名：在域名注册查询网站注册用户名成功后并查询域名，选择您要注册的域名，并点击注册。 4、正式申请：查到想要注册的域名，并且确认域名为可申请的状态后，提交注册，并缴纳年费。 5、申请成功：正式申请成功后，即可开始进入DNS解析管理、设置解析记录等操作。 网站空间英文名：WebSite host。就是存放网站内容的空间。网站空间也称为虚拟主机空间，通常企业做网站都不会自己架服务器，而是选择以虚拟主机空间做为放置网站内容的网站空间。 网站建成之后，要购买一个网站空间才能发布网站内容，选择网站空间时，主要应考虑的因素包括：网站空间的大小、操作系统、对一些特殊功能如数据库的支持，网站空间的稳定性和速度，网站空间服务商的专业水平等。 1.3 网页中的视频格式 html5 video src目前支持有三种格式： Ogg即带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件； MPEG4即带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件； WebM即带有VP8 视频编码和 Vorbis 音频编码的 WebM 文件。 在收集材料的过程中，如果视频格式不支持，可以通过格式工厂对需要插入的视频进行格式转换。 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 二、模仿型任务讲解 表11-2 资讯单 综合网站设计与制作资讯单 学习情景 红色文化网 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.1红色文化网案例分析 案例学习目标 · 能够熟练建立站点 · 能够熟练使用HTML+CSS＋JavaScript设计制作网站 · 能够进行网站的测试与发布 案例知识要点 · HTML常用标签、CSS样式、JavaScript函数及事件 习近平同志强调，一个国家、一个民族的强盛，总是以文化兴盛为支撑的，中华民族伟大复兴需要以中华文化发展繁荣为条件；要不断丰富人民精神世界、增强人民精神力量，不断增强文化整体实力和竞争力，朝着建设社会主义文化强国的目标不断前进。这些重要论述，为新时期社会主义文化建设提出了要求、指明了方向。在各种文化中，红色文化以其鲜明的政治立场、崇高的价值取向、深厚的群众基础、坚决的奋斗精神等，为实现中华民族伟大复兴提供强大精神动力。 本次红色文化网的制作，旨在通过相关红色精神、红色电影、红色地标等传递热爱祖国、坚定理想信念的精神内涵，帮助青年一代树立正确的世界观、人生观、价值观。 实现探究 2.2案例设计思路 在具体实现过程中，选择具有代表性的红色素材，引起学生的共鸣，使学生更加有动力去完成网页的设计与制作；同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象。 具体页面设计思路如下： 图11.2 页面设计 【思考】 （1）如何使用视频标签在网页中正确的插入视频？ （2）如何通过设置CSS进行网页布局？ （3）如何通过JavaScript实现验证码及焦点事件？ 三、实操示范 操作步骤 3.1 部分代截图如下： 【导航代码】 图11.3 【导航CSS样式代码】 图11.4 【导航链接样式】 图11.5 【左部分主体代码】 图11.6 图11.7 【左部分样式部分代码】 图11.8 【左部标题样式】 图11.9 【左部链接样式】 图11.10 【左部列表整体样式】 图11.11 【右部分主体代码】 图11.12 图11.13 图11.14 【右部分样式部分代码】 图11.15 【左边日期样式】 图11.16 【右边日期样式】 图11.17 【底部分代码】 图11.18 【底部样式-1】 图11.19 【底部样式-2】 图11.20 【网站最终效果图】 图11.21 四、学生完成开放型任务，教师巡回指导 开放型任务的任务卡如表10-2所示 表10-2 开放型任务卡 任务编号 10-2 任务名称 红色文化网 网页主题 红色文化网 计划工时 180分钟 开放型任务描述 1. 创建站点“红色文化网”。 2. 在站点“红色文化网”的根目录下创建主页文档“index.html”。 3. 创建外部JS脚本文件“main.js”. 4. 创建页面布局和美化网页元素的CSS样式。 5. 通过插入Div标签对页面进行布局。 6. 使用CSS样式美化网页元素。 【课堂小结】 本次任务介绍了使用多方面的知识和技能设计与制作网站的主页以及主页在网站中的作用，同时还详细的介绍了如何使用Div+CSS的方式布局网页。本次任务除了使用Div+CSS布局网页之外，该网页中包含了多种网页元素：文字、图像、导航栏、浮动框架、表单和Flash动画，也展示了这些网页元素在主页中的综合运用效果。 【布置作业】 1. Div+CSS布局与表格布局的差异在哪里？ 2. 使用Div+CSS布局要注意什么？ 【创新型任务】 分小组选择设计科技强国、红色之旅、绿水青山为主题的利用HTML+CSS+JavaScript，制作一个属于自己的博客网站。通过推送学习强国学习视频的绿水青山栏目、看科技栏目、看党史的红色故事栏目，搜集相关应用CSS样式网站素材，分小组设计科技强国、红色之旅、绿水青山的应用CSS样式网站，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)能设计与制作导航栏 (3)应用CSS样式设计网页的布局结构 (4)将多个网页整合为一个完整的网站 能力考核 (5)能灵活运用CSS样式设计到小组作业科技强国、红色之旅、绿水青山网页中 30   思政考核 (6)过程考核：考查学生的团队合作、创新意识、思维、专业技术能力等方面综合评价 20   (7)网页作品：对设计作品中体现的中国传统文化、生态文明意识、与软件专业有关的最新科技技术、创新性等方面进行评估 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$