HTML5+CSS3网页设计与制作—教学大纲

标签

元素类型的转换

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的合并

【阶段案例——制作音乐排行榜】

√

√

√

√

√

√

√

第六章 列表和超链接

学习单元

学习目标

浮动与定位 学时 6学时

◆ 掌握无序、有序及定义列表的使用，可以制作常见的网页模块。

◆ 掌握超链接标签的使用，能够使用超链接定义网页元素。

◆ 掌握CSS伪类，能够使用CSS伪类实现超链接特效。

知识点 了解

√

√

√

掌握

√

√

重点

√

√

√

√

√

√

√

难点

√

√

学习内容

无序列表

有序列表

定义列表

列表嵌套的应用

list-style-type属性

list-style-image属性

list-style-position属性

list-style属性

创建超链接

锚点链接

链接伪类控制超链接

【阶段案例—制作新闻列表】

第七章 表格和表单

学习单元 表格和表单

◆

◆

◆

◆

学时 8学时

掌握表格标签的应用，能够创建表格并添加表格样式。

理解表单的构成，可以快速创建表单。

掌握表单相关标签，能够创建具有相应功能的表单控件。

掌握表单样式，能够使用表单样式美化表单界面。

了解

√

√

√

掌握

重点

√

难点

学习目标

知识点

学习内容

创建表格

标记的属性

标记的属性

标记的属性 博学谷——让IT教学更简单，让IT学习更有效

标记 表格结构 √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ CSS控制表格边框 CSS控制单元格边距 CSS控制单元格宽高 表单的构成 创建表单 input控件 textarea控件 select控件 全新的form属性 全新的表单控件 全新的input控件类型 全新的input属性 CSS控制表单样式 【阶段案例—制作表单注册页面】 第八章 DIV+CSS布局 学习单元 学习目标 DIV+CSS布局 学时 8学时 ◆ 掌握标签的浮动属性，能够为标签设置和清除浮动。 ◆ 掌握标签的定位属性，能够理解不同类型定位之间的差别。 ◆ 掌握DIV+CSS的布局技巧，能够运用DIV+CSS为网页布局。 知识点 了解 掌握 √ √ √ √ √ √ √ 重点 难点 √ √ √ 布局概述 认识浮动 清除浮动 标记定位属性 overflow属性 Z-index标记层叠 单列布局 √ 两列布局 √ 三列布局 √ 全新的html5结构元素 网页模块的命名规范 √ 【阶段案例—制作通栏 banner】 学习内容 第九章 多媒体嵌入 学习单元 学习目标 多媒体嵌入 ◆ 熟悉HTML5多媒体特性。 学时 6学时 博学谷——让IT教学更简单，让IT学习更有效 ◆ ◆ ◆ ◆ 了解HTML5支持的音频和视频格式。 掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。 掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。 了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。 了解 √ √ √ 掌握 √ √ 重点 √ √ √ 难点 知识点 学习内容 视频音频嵌入技术概述 视频文件和音频文件的格式 在HTML5中嵌入视频 在HTML5中嵌入音频 视频音频文件的兼容性问题 调用网络音频视频文件 CSS控制视频的宽高 【阶段案例—制作音乐播放界面】 第十章 过渡、变形和动画 学习单元 学习目标 过渡、变形和动画 知识点 transition-property属性 transition-duration属性 transition-timing-function属性 transition-delay属性 transition属性 认识transform 2D转换 3D转换 学习内容 @keyframes animation-name属性 animation-duration属性 animation-timing-function属性 animation-delay属性 animation-iteration-count属性 animation-direction属性 animation属性 【阶段案例—制作表情图片】 了解 掌握 √ √ √ √ √ √ √ √ √ √ √ √ √ √ 重点 √ √ √ 难点 √ √ √ 学时 6学时 博学谷——让IT教学更简单，让IT学习更有效 第十一章 绘图和数据存储原理 学习单元 学习目标 绘图和数据存储原理 学时 6学时 ◆ 熟悉JavaScript的基础知识。 ◆ 掌握HTML5画布的用法，能够用JavaScript在画布中绘制图形。 ◆ 了解HTML5数据存储 的基本原理。 知识点 JavaScript的引入 变量 document对象 认识画布 使用画布 绘制线 学习内容 线的样式 线的路径 填充路径 绘制圆 原始存储方式——Cookie HTML5全新的存储技术——web storage 【段案例——绘制火柴人】 √ √ √ √ √ 了解 掌握 √ √ √ √ √ √ √ √ 重点 难点 √ √ 第十二章 实战开发—制作企业网站页面 学习单元 学习目标 实战开发—制作电商网站首页面 学时 6学时 ◆ 熟悉JavaScript的基础知识。 ◆ 掌握HTML5画布的用法，能够用JavaScript在画布中绘制图形。 ◆ 了解HTML5数据存储 的基本原理。 知识点 了解 √ √ √ √ 掌握 √ √ √ √ √ √ 重点 难点 学习内容 确定网站主题 规划网站结构 收集素材 设计网页效果图 使用Dreamweaver工具建立站点 切图 搭建首页 制作模板 搭建注册页 搭建个人中心页面 博学谷——让IT教学更简单，让IT学习更有效 搭建视频播放页 √ 五、学时分配 章目 第一章 初识HTML5 第二章 HTML5 页面元素及属性 第三章 CSS3入门 第四章 CSS3选择器 第五章 CSS盒子模型 第六章 列表和超链接 第七章 表单的应用 第八章 多媒体技术 第九章 CSS3高级应用 第十章 过渡、变形和动画 第十一章 数据存储原理 第十二章 实战开发—制作企业网站页面 合计 讲课 2 4 4 4 6 4 6 6 4 4 4 2 50 上机 0 2 2 2 2 2 2 2 2 2 2 4 24 合计 2 6 6 6 8 6 8 8 6 6 6 6 74 六、考核模式与成绩评定办法 本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、上机成绩（20%）。 七、选用教材和主要参考书 本大纲是根据教材《HTML5+CSS3网页设计与制作》所设计的。 参考书籍： 传智播客.《网页设计与制作（HTML+CSS）》中国铁道出版社 传智播客.《HTML5+CSS3网站设计基础教程》人民邮电出版社 八、大纲说明 博学谷——让IT教学更简单，让IT学习更有效 本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。 撰写人： 审定人： 批准人： 执行时间： 本文标签： 能够 制作 网页 版权声明：本文标题：HTML5+CSS3网页设计与制作—教学大纲 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702840647a432854.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。 更多相关文章 【WIFI】电脑WIFI网络连接正常，但无法访问网页，能登微信，但无法登录一些需要访问本地服务的应用原因 编程 3月前 原因是，本地网络被手动代理了，由于vpn软件没有正常退出就直接关机（局部代理或者全代理都会默认启用该按钮），这样会导致代理残留&a JavaScript - 判断当前网页是否在微信内置浏览器中运行（最靠谱的方案，检查是否在微信浏览器中打开网站或页面） 编程 2月前 前言 Vue - 判断访问网页客户端设备是手机移动端还是 PC 电脑端（判断设备类型是否是移动端手机）。使用 Vue.jsNuxt.js 开发 H5 网站时，难免需要判断当前 浏览器启动就打开特定网页_启动浏览器时如何打开一组特定的网页 编程 2月前 浏览器启动就打开特定网页 If you have certain webpages that you visit every time you open your browser, you can save time by having t 微信扫描二维码跳转手机 直接打开手机外部浏览器打开HTML指定网页 编程 2月前 微信上进行的网页宣传、游戏传播、APP下载各类活动很多，但是各位朋友肯定经常会遇到一些特殊需求，网页需要在手机默认浏览器打开而不是微信内置浏览器。这个问题怎么解决呢? 斗在微信营销的浪潮中 解决 Google浏览器全屏打开指定网页（两种方式） 编程 2月前 第一种 kiosk 方式 在桌面右键创建快捷方式，目标地址（Google浏览器安装地址要根据实际情况做修改）： “C:UsersAdministra 浏览器网页链接打开本地exe程序 编程 2月前 浏览器网页超链接打开本地exe程序的方法 一 、加注册表## 新建 aclient.reg 文件，加入以下代码，双击运行aclient.reg，就会将以下信息加到注册表中 如何设置浏览器网页全屏 编程 2月前 在日常笔记本上办公时，由于屏幕较小，为了尽可能多和方便的显示浏览器网页上的内容，可以设置网页全屏的方式，去掉屏幕顶端的网址栏和底端栏&#xff0 浏览器预览html网址,在浏览器中预览网页 编程 2月前 在浏览器中预览网页 10112017 本文内容 为了便于在 Microsoft Expression Web 中设计网页，您可以在不同 Web 浏览器和不同大小的窗口中预览网页的外观。可以选择的窗口大小与标准屏幕分辨率相对应：640 x 震惊！浏览器一开F12控制台，网页直接没网？ERR_INTERNET_DISCONNECTED 编程 2月前 一、场景说明 首先，基本网络状态是正常的，baidu，IM通讯软件等等都正常使用。 这里拿Chrome举例说明 主要问题点是：chrome只要开F 如何在浏览器中查看网页的HTML源代码？ 编程 2月前 如何在浏览器中查看网页的HTML源代码？ 浏览html网页，查看其源代码，可以帮助我们了解该版网页的信息以及架构，每个浏览器都是允许用户查看他们访问的 safari浏览器如何在下次打开时显示上次关掉的网页 编程 2月前 设置-通用，如图所示，把对钩去掉。 Egde浏览器打开是2345网页怎么办？ 编程 2月前 首先打开edge然后打开设置（右上角三个点） 点击开始、主页和新建标签页 把它设置为打开新标签页就行了，并删除2345网页 Win10无法显示网页提示此站点不安全怎么办 编程 2月前 最近有用户发现自己某个网页会出现无法显示网页的情况，还会收到此站点不安全的提示，这可能是有人举报了这个网站的原因。那么Win10无法显示网页提示此站点不安全怎么办呢?下面小编就教教大家具体的打开方 国内可用chatgpt中文版镜像网站最新合集在线网页版-202532 编程 2月前 一、GPT中文版镜像网站 ① https:www.dk8217.html 大可ai，支持4o以及o1，支持MJ绘画 支持通用全模型，支持文件读取、插件、绘画、AIP QQ能上网，浏览器打不开网页，怎么办？ 编程 1月前 右击网络打开网络设置 点击代理，关闭使用代理服务器即可。 计算机有网络但打不开网页,手把手教你有网络但是打不开网页怎么办? 编程 1月前 明明刚交了宽带年费，而且本地连接显示一切正常状态，却偏偏打开网页一直出现问题，换了浏览器和重启都无效，该怎么办呢？不用担心& 微信打开手机内置浏览器跳转手机默认浏览器打开html网页 编程 1月前 微信上进行的网页宣传、游戏传播、APP下载各类活动很多，但是各位朋友肯定经常会遇到一些特殊需求，网页需要在手机默认浏览器打开而不是微信内置浏览器。这个问题怎么解决呢? 斗在微信营销的浪潮中 解决 打开谷歌浏览器就能显示某个网页怎么设置 编程 1月前 要设置在打开Google Chrome浏览器时自动显示某个网页，你可以按照以下步骤操作： 1. 在Chrome中设置主页 打开Chrome浏览器。点击右上角的三个竖点（“ 在html中页面不全,网页显示不全,教您网页显示不全怎么办 编程 1月前 当我们在电脑系统中使用IE浏览器浏览网页时，偶尔会出现是否只查看安全内容的提示，甚至有可能会出现页面显示不全的情况。一般遇到这种情况会选择继续查看网页内容，怎么去处理& 如何解压7z文件？8种方法（WinMac手机网页端） 编程 1月前 7z 文件是一种高效的压缩文件格式，由 7 - Zip 软件开发者所采用。它运用独特的压缩算法，能显著缩小文件体积，便于存储与传输各类数据，像软件安装包 发表评论 全部评论 0 暂无评论 推荐文章 javascript - React Event Handle OnChange - Stack Overflow reactjs - Scrolling posts animation in React using TailwindCSS and Framer Motion like Ultra - Stack Overflow Win11无法识别以太网解决方案汇总 javascript - quantity of white spaces left of a string jQuery - Stack Overflow how to run javascript while waiting for the ajax callback - Stack Overflow 热门文章 javascript - how to embed a hubspot form in an external site - Stack Overflow 26天前 javascript - How to use JQuery to highlight text - Stack Overflow 26天前 function generator javascript - Stack Overflow 26天前 javascript - Input str replace - Stack Overflow 25天前 php - Caddy php_fastcgi give no result - Stack Overflow 25天前 javascript - integrating native web components in Vue: properties are not reactive - Stack Overflow 25天前 livekit stream screen share in electron not working - Stack Overflow 25天前 javascript - Is document.links faster in finding a link using jQuery? - Stack Overflow 25天前 javascript - webpack: fine on MacOS, loader errors on linux - Stack Overflow 25天前 typescript - Can ESLint do similar check as TS does with noImplicitAny? - Stack Overflow 25天前 最新文章 javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow 24天前 javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow 24天前 c++ - Is dereferencing std::span::end always undefined? - Stack Overflow 24天前 javascript - Delay function execution if it has been called recently - Stack Overflow 24天前 javascript - Google Maps Autocomplete List - Stack Overflow 24天前 windows设置断电重启开机后自动输入锁屏密码登录 24天前 Windows系统设置开机默认开启数字小键盘 24天前 Windows11 开机自动同步时间（开机时间不更新问题） 24天前 windows配置开机自启动软件或脚本 24天前 【Redis】Windows设置Redis为开机自启动 24天前 Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels 3月前 The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan 3月前 Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience 3月前 A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX 3月前 A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA 3月前 CopyRight © 2022 All Rights Reserved. Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落| 豫ICP备2022026798号-10