网页设计与制作——JavaScript+jQuery标准教程 教案 第1章 网页设计基础.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第1章 网页设计基础.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第1章 网页设计基础.docx（9页珍藏版）》请在第一文库网上搜索。

1、网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号1授课日期月日月日月日月日授课班级课内教学内容：第1章网页设计基础课外学习任务：(1)课前：以小组为单位，分析了解常用的动态网页开发语言和技术；分析网站构建的流程以及网站开发所需要使用到的开发工具和展示工具并将了解的内容以PPT的形式记录下来。(2)课后:通过练习熟练掌握静态网页编写技术。独立编写自己的第一个网页。教学目标：知识目标 掌握HTM1标

2、签； 掌握CSS的使用； 初步了解JaVaSCript； 初步了解jQuery框架。能力目标 能够独立开发静态网页； 能够开发一个简单的动态网页。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 在掌握制作第一个动态网页的基础上，理解网页开发的专业知识。重点难点及解决方法：(I)重点：静态网页的开发技术解决方法：通过课堂练习+视频式教学的方法,教师讲解网站开发从设计到最终上线的流程。引导学生积极思考，掌握静态网页开发的相关知识知识；同时通过课堂练习，使学生可以HTM1+CSS的相关知识；培养学生的思维能力和分析问题解决问题的能力。(2)难点：开发第一个动态网页解决方法：通过案

3、例演示+启发式教学讲解的方式，细致了解JaVaSCriPt语言和jQuer框架的基础知识，讲解第一个动态网页的开发。帮助学生了解网页展示工具，掌握网页编辑工具的安装和使用，实现第一个网页的编写。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结

4、合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“课内教学内容及过程时间分配方法及手段【导引示例】在网页设计中，使用jQuery框架可以实现更加丰富的网页交互效果。1.网页设计概述【网页设计常用技术】网页设计主要使用的技术有HTM1、CSSJavaScript以及JavaScript的扩展框架，如jQuery0在进行网页设计前，首先需要考虑用户的需求，确定好网页的定位以及设计风格，然后由美工人员通过作图软件实现网页的外观设计，最后由开发者使用代码创建对应的网页。【网页设计工具】推荐的工具包括SUbIinIeText、VSCode和Dre

5、amWeaVer【网页展示工具】查看网页需要用到浏览器。浏览器即网页展示工具，也就是网页展示的窗口。目前比较流行的浏览器有火狐浏览器（Firefox）、欧朋浏览器（Opera）谷歌浏览器（Chrome）苹果官方浏览器（Safari）,Windows10自带的浏览器（Edge）以及IE浏览器，如图1.1所示。O债WFirefoxOperaChxomeEdge正2.HTM1和CSS（教学重点）HTM1基础】HTM1是一种用来描述网页的语言，全称为HyperTextMarkup1anguage（超文本标记语言）。双标签语法形式如下所示。标签内容/标签例如，一个P元素的代码如下所示。P内容p单标签语法

6、形式如下所示。标签/例如，P每个标签都有固定的可以修改的属性，修改标签属性一般在开始标签内完成，其语法形式如下所示。标签属性二VaIUe内容/标签例如，修改标签宽度的代码如下所示。pWidth=30px内容pHTM1常用标签】网站域名相当于网站在互联网中的门牌号或电话号。普通用户可以通过域名访问到指定的网站。通过HTM1的标签可以实现最基础的静态页面布局，其中常用标签如表11所示。标签描述定义注糅定义文档类型定义超文本链接定义音频内容定义文本粗体定义文档的主体定义换行定义一个点击按钮定义表格标题定义文档中的节定义列表详情定义列表中的项目定义文字的字体、尺寸和颜名定义了HTM1文档的衣单定义HT

7、M1标题定义关于文档的信息定义水平线定义HTM1文档定义图像VinPU1定义输入控件定义列表的项目定义文档与外部资源的关系定义关于HTM1文档的元信息定义有序列表定义段落定义选择列表定义文档的样式信息定义表格中的单元定义表格中的表头单元格定义文档的标题定义表格中的行定义无序列表定义视频【CSS基础语法】CSS全称为CascadingSty1eSheets（串联样式表）。CSS语法形式如下所示。选择器属性1：属性值1；属性n:属性值n;CSS选择器】CSS选择器根据选择方式不同，可以分为5种，分别为基础选择器、属性选择器、关系选择器、伪类选择器和伪元素选择器。常用的CSS选择器如表1.2所示。选

8、择器例子功能描述.c1ass,1f选取所有C1aSS=1F的元素#id#Div1选取id=Div1的元素选取所有元素e1ementa选取所有a元素e1ement,e1emeni.a,选取所有a元素和所有P元素e1ement!e1ement2divp选取所有div元素中所有P元素e1ement1e1ement2divp选取所有div元素子元素中的工不有P元素e1emenchoverp:hover选择鼠标指针所在的P元素，口以通过该超:择器动态修改元黄样式css常用样式属性】CSS可以通过样式属性控制元素的文本样式、段落样式、颜色样式以及边框样式等。CSS常用的样式属性如表1.3所示。样式属性功能

9、描述background设置样式的背景属性border设置边框颜色、样式、粗细c1ear清除浮动效果co1or设置文本的颜色cursor设置鼠标光标样式disp1ay设置元素显示方式f1oat设置浮动效果font-fami1y设置字体font-size设置文本的字体大小height设置元素的高度1eft定位元素的左侧位置1ine-height设置行高margin设置所有外边距属性overf1ow设置溢出内容处理方式padding设置所有内边距属性position设置元素定位方式right设匿定位元素的左侧位置.text-a1ign设置文本的水平对齐方式top设置定位元素的顶端位置width设置

10、元素的宽度z-index设置定位元素的堆叠顺序3.初识JayaSeriPt（教学难点）【JavaScript发展史】JavaScript在1995年由Netscape（网景）公司的布兰登艾奇（BrendanEich）在网景导航者浏览器上首次实现。因为Netscape公司与Sun公司合作，Netscape公司的管理层希望它外观看起来像Java,所以为它取名为JaVaSCript。但实际上它的语法风格与Se1f及Scheme较为接近。2011年6月ECMAScript的5.1版发布，该版本在形式上完全与国际标准IS0/IEC16262:2011一致。截至2012年，所有浏览器都完整地支持ECMAS

11、cript5.1,旧版本的浏览器至少支持EQ1AScript3。2015年6月17日，Ecma国际发布了ECMAScript的第6版，该版本的正式名称为ECMASCriPt2015,但通常被称为ECMASCriPt6或者ES6o最新版本是2023年6月发布的EQ1AScript的第11版，称为ECMASCriPt2023或ES11【引入方式】1 .行内JaVaSCriPt脚本行内JaVaSCriPt脚本主要添加在标签中，使用JaVaSCriPt脚本语句可以触发指定的交互效果。例如，在一个图片标签中添加一个弹窗效果，代码如下所示。其中，a1ert。你点击了一张图片）就是行内JavaScript脚

12、本，当用户点击图片后，浏览器中会出现弹框，显示内容为“你点击了一张图片”的文本内容。2 .内部JavaScript脚本内部JaVaSCriPt脚本是指将JavaScript代码添加在VSCriPt与V/script,标签之间。VSCriPt标签可以添加在Vhead与标签之间，也可以添加在与标签之间，其语法形式如下所示。a1ert(,FJavaScript代码);a1ert(,FPJavaScript代码”);其中，标签的type属性可以省略。如果嵌入的是用其他编程语言编写的代码，就需要添加该属性，并指明具体的属性值。3.外部JaVaSeriPt脚本外部JaVaSCriPt脚本用于将JavaScript脚本与HTM1文档