web前端开发大纲.doc
《web前端开发大纲.doc》由会员分享,可在线阅读,更多相关《web前端开发大纲.doc(98页珍藏版)》请在咨信网上搜索。
1、 web前端开发教学大纲编写人: 石亚平 课 时: 80课时 一、 课程教学内容及目标4(一) 知识目标41. 掌握html、 html5、css、css3的基本语法;42. 掌握html5的canvas绘图;43. 熟练应用div+css 实现页面布局;44. 掌握JavaScript基本语法;45. 掌握DOM的基本用法;46. 掌握jQuery的基本用法;47. 熟悉w3c规范,了解各大主流浏览器的兼容性;48. 熟悉bootstrap框架4(二) 能力目标51. 通过本课程的学习要求学生掌握div+css实现页面的布局,实现静态页面;52. 通过JavaScript实现简单的交互功能;
2、53. 通过jQuery简化js的原生代码,减少代码量;54. 通过bootstrap框架,实现页面快速布局55. 能解决各大浏览器的兼容性问题;5(三) 参考教材5JavaScript高级程序设计、W3School离线手册、jQuery1.9.3帮助文档5二、 课程教学内容及考核要求5第一单元:HTML基础51.1 Web基础知识51.2 HTML快速入门51.3 文本和图像61.4 表格和列表6第二单元:css基础172.1 CSS语法172.2 CSS基础选择器172.3 框模型和背景182.4 浮动和定位18第三单元:CSS3基础293.1 复杂选择器293.2 多列属性303.3 C
3、SS Hack30第四单元 CSS3高级364.1 转换364.2 过渡364.3 动画36第五单元 JavaScript455.1 JavaScript概述455.2 JavaScript基础语法465.3 变量和常量46第六单元 JavaScript数据类型转换和运算符496.1数据类型496.2基本类型496.3 数据类型转换496.4 运算符49第七单元 JavaScript函数547.1 函数的定义547.2 函数的调用547.3 变量的作用域547.4 全局函数54第八单元 JavaScript分支结构588.1 什么是分支结构588.2 If语句588.3 If-else语句58
4、8.4 else if语句588.5 switch-case语句58第九单元 循环结构619.1 什么是循环结构619.2 While语句619.3 do-while语句619.4 For语句61第十单元 创建和访问数组6410.1 什么是数组6410.2 数组的定义和初始化6410.3 访问数组6410.4 数组的常用方法6410.5 二维数组64第十一单元 DOM6911.1 DHTML概述6911.2 DOM概述6911.3 节点信息6911.4通过HTML选取元素6911.5通过CSS选取元素69第十二单元 HTML5基础7212.1HTML5表单元素7212.2HTML5表单属性及验
5、证72第十三单元 音视频处理和Canvas绘图7513.1视频处理7513.2音频处理7613.3Canvas概述7613.4Canvas绘图76第十四单元 jQuery7914.1jQuery介绍7914.2 jQuery的编程步骤7914.3jQuery对象7914.4jQuery选择器79第十五单元 jQuery操作DOM和jQuery事件8215.1查询8215.2样式操作8215.3遍历节点8215.4创建、插入、删除8215.5替换DOM节点8215.6复制DOM节点8215.7jQuery事件82第十六单元 jQuery动画效果和bootstrap起步8516.1隐藏和显示851
6、6.2自定义动画8516.3并发与排队效果8516.4响应式网页概述8516.5编写响应式网页8616.6bootstrap概念86第十七单元全局CSS样式9417.1概述9417.2布局容器9417.3按钮9417.4图片9417.5表格9417.6排版9417.7栅格9417.8表单94一、 课程教学内容及目标(一) 知识目标1. 掌握html5、css3的基本语法;2. 掌握html5的canvas绘图;3. 掌握css3动画;4. 掌握JavaScript基本语法;5. 掌握DOM的基本用法;6. 掌握jQuery的基本用法和jQuery的动画效果;7. 熟悉w3c规范,了解各大主流浏
7、览器的兼容性;8. 熟悉bootstrap框架(二) 能力目标1. 通过本课程的学习要求学生掌握css3新增的选择器和html5新增的表单元素;2. 会使用canvas绘图3. 通过JavaScript实现简单的交互功能;4. 通过jQuery简化js的原生代码,减少代码量;5. 通过bootstrap框架,实现页面快速布局6. 能解决各大浏览器的兼容性问题;(三) 参考教材JavaScript高级程序设计、W3School离线手册、jQuery1.9.3帮助文档二、 课程教学内容及考核要求第一单元:HTML基础 1.1 Web基础知识 1.1.1web简介 1.1.2web工作原理 1.1.
8、3web浏览器1.2 HTML快速入门 1.2.1HTML概述1.2.1.1超文本1.2.1.2什么是HTML1.2.2HTML基础语法1.2.2.1标记语法1.2.2.2元素1.2.2.3元素嵌套1.2.2.4属性和值1.2.2.5标准属性1.2.2.6注释1.2.2.7HTML和XHTML1.2.3文档结构1.2.3.1HTML文档的结构1.2.3.2文档类型声明1.2.3.3元素1.2.3.4元素1.2.3.5文档头部内容-1.2.3.6文档头部内容-1.2.3.7元素1.3 文本和图像1.3.1 文本标记概述1.3.1.1文本标记的作用1.3.1.2文本与特殊字符1.3.2 使用文本标
9、记1.3.2.1文本样式1.3.2.2标题元素1.3.2.3段落元素1.3.2.4换行元素1.3.2.5分区元素和1.3.2.6行内元素与块级元素1.3.2.7分隔线元素1.3.3 图像和连接1.3.3.1URL1.3.3.1.1URL1.3.3.1.2绝对路径1.3.3.1.3相对路径1.3.3.2图像1.3.3.2.1图像格式1.3.3.2.2图像元素1.3.3.3链接1.3.3.3.1链接元素1.3.3.3.2链接的表现形式1.4 表格和列表 1.4.1表格的作用 1.4.2使用表格 1.4.2.1创建表格 1.4.2.2表格的常用属性 1.4.2.3表格标题 1.4.3使用列表 1.4
10、.3.1列表的作用 1.4.3.2有序列表 1.4.3.3无序列表 1.4.3.4列表嵌套【考核要求】1. 掌握组成web前端的三大语言Html,Css,JavaScript 2.了解web的工作原理1) 基于浏览器/服务器模式 (B/S)2) 由web服务器、浏览器和通信协议三部分组成 3.了解主要web浏览器产品 1)IE2) Firefox3) Chrome4) Opera5) Safari4. 掌握什么是HTML1) 超文本标记语言2) 用该语言编写的文件,以.html或者.htm为后缀3) 由浏览器解释执行4) Html不区分大小写,习惯上全小写5. 掌握标记语法1) 封闭类型标记(
11、也叫双标记):必须成对出现 例如:,等2) 非封闭类型标记(也叫空标记或者单标记) 例如:,等6. 掌握元素属性和值的写法 1)属性的声明必须位于开始标记里面 2)一个元素的属性可能不止一个,多个属性之间用空格隔开 3)多个属性之间不区分先后顺序 4)属性和值之间用等号连接 5)属性的值包含在引号中 例如:段落7.了解四个通用属性id,title,class,style8. 了解html和XHTML的区别XHTML是更严格的html版本,XHTML元素必须被关闭,单标记也要关闭9. 掌握html文档的基本结构 - DOCTYPE一般大写 -标题元素 - 定义字符集,防止乱码10. 了解标题元素
12、的规则1) 标题元素的内容出现在浏览器顶部2) 没有属性3) 必须出现在元素中4) 一个文档只能有一个标题例如:我的第一个网页 11. 了解几个特殊字符< - © - -版权 - 空格12. 了解几个常见的文本样式 - 加粗 - 倾斜 - 下划线 - 删除线 - 上标 - 下标13. 了解6个标题样式,14. 掌握块级元素和行内元素的区别1) 块级元素:默认情况下,块级元素独占一行,即元素前后会自动换行例如:,-2) 行内元素:不会换行,和其他行内元素位于同一行例如:,15. 了解web页面主要二种路径形式1) 绝对路径 如:2) 相对路径 如:src=”image
13、s/logo.png”16. 掌握图像元素1) 作用:将图像添加到页面2) 单标记3) 必须属性:src4) 行内元素5) 常用属性:width,height例如:17. 掌握链接元素1) 作用:创建一个超链接2) 文本3) href属性:链接的地址 空链接设为#4) target属性:目标,可取值为 _blank、_self等18. 掌握表格的创建方法1) 定义表格:2) 创建表行:3) 创建表列:例如:创建一个两行三列的表格第一行,第一列第一行,第二列第一行,第三列第二行,第一列第二行,第二列第二行,第三列 19. 掌握列表的创建方法(有序列表和无序列表)1) 有序列表科比詹姆斯库里2)
14、无序列表科比詹姆斯库里3) 列表嵌套勇士库里湖人科比1. 项目1及步骤项目1执行步骤:1) 在中输入一对无序列表标签2) 在中插入9对列表项标签3) 在每对中输入对应的学院名称Html代码如下: demo 软工学院建筑学院传媒学院移动通信学院动画学院网工学院高翻学院俄语学院 基础学院 2. 项目2执行步骤::1) 在中输入一对无序列表标签2) 在中插入5对列表项标签3) 在每对中输入对应的歌曲及歌手的名字Html代码如下: demo bad girl-吴亦凡 逆战-张杰 李白-李荣浩 sugar-Maroon 5 放纵-权志龙 3. 项目3执行步骤:1) 在中输入两对有序列表2) 在每对中输入
15、对应的国家名称3) 在每对ol的下面各添加3对4) 在每对中输入对应的城市名称Html代码如下: demo 中国城市北京上海 广州 美国城市华盛顿 芝加哥 纽约 4. 项目4执行步骤:1) 在中输入无序列表标签2) 在中输入7对标签3) 在写入对应的新闻信息4) 为每一条新闻加上超链接,注意:超链接标签必须嵌套到li标签里,直接包含文字。5) 设置超链接的href的属性值为“#”实现空链接。Html代码如下: demo 呱呱首届网络诗歌朗诵首届网络朗诵大赛再添辉煌年轻选手我的心声势宏大再起风云10进5谁与争锋新人诞生的摇篮耿耿老师妙语连珠殷瑜老师第四日点评 5. 项目5执行步骤:创建一个宽20
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 前端 开发 大纲
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【胜****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【胜****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。