网页制作与实训ppt完整版PPT幻灯片教学教程最全电子讲义教案(最新)

1、项目一HTML基础本课教学内容静态网页制作HTML的常见标签（文字布局、文字设计标签）表格标签链接图片标签表单标签（文本框、密码框、下拉列表）框架 网页实景图 给HTML语言打的广告一种进行网页设计的语言一种标签式的程序设计语言一种纯文本式的语言一种简单易学的语言一种可以使用文本编辑器进行编辑的语言编辑的文件名后缀是”.html”。 HTML特点 1.HTML有两种类型的标签，一类是单标签，就是一种单标签，它只需要单独一组符号就可以表示完整的功能。另一种是双标签，形如内容，成对出现。一般良好的习惯是全部用双标签。 HTML特点 2.HTML语言对于大小写不敏感，比如马上将要学习的表示HTML文

2、档的标签：，也可写做，甚至可以写为，但是一般推荐，自始至终使用同一种书写方式。 HTML文件基本结构 标题 （浏览器标题） 内容主体（网页具体内容） （头部信息：用于设置网页相关属性，比如网页标题、缓存等，可以省略） HTML文件基本结构（续） 学会 Hello World： 一个最简单的HTML代码 Hello world （标题可以为空） Hello World! 1.2 标题标签HTML简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 一般形式为内容，即到，为最大，为最小 运行结果 1.2 换行标签欢迎学习 HTML这会是一种很有趣的体

3、验另一个段落元素 运行结果 1.3 段落标签欢迎使用 HTML这会是一种很有趣的体验 另一个段落元素 运行结果 1.3 段落标签为段落标签，我是一段文字align属性，段落的对齐方式，较为常用的有left、center、right：例： 我是居左的文字 1.3 段落标签（续）学习HTML这会是一种很有趣的体验 运行结果右对齐Left：左对齐Center：居中Right：右对齐 1.4 文字设计标签标签:face：用来设置字体类型，默认为宋体。color：用于设置字体颜色size:用于设置字体大小例如： 网页设计教程 例如： 网页设计实验指导书 十六进制的RGB颜色码是用六位十六进制数字表示的红

4、、绿、蓝三原色的组合颜色。1.4 文字设计标签（续）常见的设置文字风格的标签有：内容：将内容设置为粗体。 内容：将内容设置下划线。 内容：将内容设置为斜体。 内容：将内容设置为上标。 内容：将内容设置为下标。例：我是粗体 我是斜体1.5 超链接标签（1） href属性用来指定链接的目标地址，可使用URL。 在标记之间可指定作为超链接的文本或图像。 例如： 百度 点我有惊喜！ target属性，指明链接网页显示的目标窗口，可取_self、_blank、_parent或_top四个值中的任何一个，_self为默认值。例如： 新浪网 将_blank换成_self、_parent或_top，试试！看看

5、有什么不同。1.5 超链接标签 ：定义表格，表格的所有内容都写在这个标签之内 ：定义标题，标题会自动出现在整张表格的上方：定义行 ：定义表头，包含在之间，表头中的文字会自动变成粗体 ：定义单元格(表格的具体数据)，包含在之间1.6 表格标签1.6 表格标签表格属性： align： left，right，center，表示表格在页面的布局方式，、的该属性表示该行和该单元格的布局方式。默认布局方式为左对齐 bgcolor：设置背景颜色 border：设置边框的宽度，属性值为整数，为 0 时表格没有边框，默认值为 0 width：宽度，默认单位为像素，也可以使用百分制单位 height：高度，默认单

6、位为像素；也可以使用百分制单位1.6 表格标签对于整张表格，标签常用的属性有以下几个： bordercolor：表格边框的颜色，默认为黑色 cellpadding：单元格内容与单元格边界的距离 cellspacing：单元格的边框与表格边框之间的宽度1.6 表格标签课后作业：P20 三、操作题（表格内容可以换成自己喜欢的） *合并单元格合并单元格必须对标签中的 rowspan、colspan 进行设置，默认为 1（表示没有合并） 我占两行，表示该单元格及其下面的单元格合并成一个 动手做一做例 表格标记示例 （颜色设置可以不做，宽度适当即可） 答案：表格标记示例 球队 基本资料 所属国家 国际排

7、名 皇家马德里 西班牙 1 切尔西英格兰2 AC米兰意大利3 拜仁慕尼黑德国4 1.7 图片标签图像标记： 网页与图片a.jpg在同一目录下： 在网页文档所在目录的子目录(images)下： 在网页文档所在目录的上层目录下： 常用属性：alt：当浏览器不能显示指定图像时，显示alt指定的替代文字。align：对齐方式。border：设定图像的边框，如果值为0就表示不显示边框。width：设定图像宽度，单位为像素或百分比。height：设定高度高度，单位为像素或百分比。 1.7 图片标签动手做一做：在网页中插入一张图片，居中，边框为1，高度50%，宽度80%。正下方写上自己姓名，颜色，大小自定义

8、，楷体。客户端用户利用表单元素输入信息，表单将这些信息发送到服务器端作进一步的处理。（1）表单标记：常用属性包括action、method和target：action：指定服务器端处理信息的动态网页的存储位置和名称。method：指定客户端信息发送到服务器端的方式，分为post和get两种。target：指定服务器端返回结果显示的目标窗口。 1.8 表单标签 1.8 表单标签type 可以为以下的值： text：文本框，text 也为 type 的默认属性password：密码框 radio：单选按钮，可以将多个单选按钮的 name 属性设置相同，使其成为一组。checked属性可设置默认被选

9、 checkbox：复选框，checked 属性可设置默认被选（2）表单元素标记 (显示文字) （显示文字）（多行文本框/文本域） 1.8 表单标签 1.8 表单标签 1.9 框架框架的写法如下： 纵向3:7分割 框架窗口 注意：框架是定义多个网页的集合，因此比单个网页的作用域大。不要写在里！例：综合练习使用DW编写，完成如下网页：例子项目一 综合练习.docx项目一 结束完成项目一 综合练习：项目一 综合练习.docxHTML5 +CSS3网页制作项目二 HTML5 构建网站为什么要学HTML5？HTML5发展前景如何？理由一：移动开发 如今是移动互联网的黄金时代：凭借跨平台跨终端的优势，你

10、可以从桌面到手机再到平板电脑进行无缝切换，而无需重复下载安装不同的应用。移动设备IOS系统、Android系统对HTML5的支持。当手机浏览器完全支持HTML5那么开发移动项目将会和设计更小的触摸显示一样简单。现代流行浏览器都支持HTML5（Chrome（谷歌），Firefox（火狐），IE9，Opera（欧朋），Safari（苹果）理由二：跨浏览器支持 2015年1月28日，世界上最大的视频网站YouTuBe正式宣布HTML5取代flash。Adobe宣布放弃移动flash开发，你将会考虑使用HTML5来开发web应用。理由三：内置多媒体标签没错，你可以使用HTML5的开发游戏。HTML5提

11、供了一个非常伟大的，移动友好的方式去开发有趣互动的游戏。如果你开发Flash游戏，你就会喜欢上HTML5的游戏开发。理由四：游戏开发腾讯-微信在HTML5上的布局腾讯，作为掌控着国内最大的移动入口平台公司，正在通过微信公众平台开始构建一个强大的轻应用平台。开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。这要归功于HTML5强大的交互性。理由五：广阔的发展前景百度轻应用：百度的轻应用本质就是html5。2014年，百度通过收购了91手机助手、安卓市场以及自家推出的百度手机卫士、百度搜索等，百度在移动应用分发上已经确

12、立了老大的位置。从百度的战略发展来看，百度更重视html5平台的搭建。而且百度在很早之前就已经推出了“轻应用”这个概念，百度的这个轻应用本质就是html5，并向开发者和企业推出了各种技术开放接口。十个发展方向：手机页游的3D化手机网游HTML5移动营销动漫、二次元轻应用、Webapp、微站移动视频、在线直播引领视频升级资源复用，HTML5重新洗牌IP（访问量）市场影游互动，HTML5推动泛娱乐产业发展WebVR让VR从贵族走向大众化微信或推出HTML5应用市场国外知名调研机构VisionMobile2016年Q1调研报告显示，Java、Object C，Swift（苹果开发）都呈现下滑趋势 ，

13、只有HTML5持续上涨，目前HTML5已经取代原生APP开发，成为第一大移动开发技术。理由六：好就业，好赚钱想想. .假如某一天. .小鲜肉玩的网游都是你开发的 . .“极限挑战”的播放器是你开发的 . .苹果手机的某个应用是你开发的 . .微信中的某个应用是你开发的. .是时候拼一把了！加油，你们都可以的！HTML5 +CSS3网页制作项目二 HTML5 构建网站一、HTML5 新增结构元素HTML5新增了一些结构元素，能够更加清晰的划分html文档的区域和内容，提高html文档的可读性。一、HTML5 新增结构元素1. 定义文档中的区段（section）。比如章节、页眉、页脚或文档中的其他

14、部分。 标题 这是一段内容.例子：想想如果这样的区块有很多，需要很多个标签和标签来定义，代码看起来真的很乱！怎样让每一个专题内容与其他内容区分开来呢？代码：看看是怎样解决的一、HTML5 新增结构元素2. 定义导航链接的部分，包括一组导航链接：HomePreviousNext例子：HTML |CSS |JavaScript |jQuery一、HTML5 新增结构元素3. 定义网页侧边栏这是一小段文字 侧边栏文章标题 侧边栏文章内容. .一、HTML5 新增结构元素4. 定义文档的页眉（介绍信息）页眉标题页眉段落其他非页眉内容一、HTML5 新增结构元素5. 定义文档的页脚，页脚通常包含文档的作

15、者、版权信息、使用条款链接、联系信息等等。可在一个文档中使用多个 元素。版权所有: 百度请联系邮箱: baidu.一、HTML5 新增结构元素6. 多用于图片与图片描述的组合 黄浦江上的的卢浦大桥 黄浦江上的的卢浦大桥 拍摄者：W3School 项目组，拍摄时间：2010 年 10 月 一、HTML5 新增结构元素7. 通常用来定义文件网页内容，网站或其他应用的一个独立外部内容区块,这个内容通常是来自某个Blog的文章论坛的讨论内容，或是某个新闻网站发布的消息等.article与section的区别:我们来举个例子，报纸有很多版，第一版就是一个section但是第一版中又会有多个文章artic

16、le.而每个文章中又包含多个section。二、HTML5文本语义元素1. 定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。*目前所有主流浏览器都不支持 标签。二、HTML5文本语义元素2. 告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。如果你只想使用斜体字来显示文本的话，请使用 标签。通常对重要的术语使用 标签。二、HTML5文本语义元素3. 定义带有记号的文本。高亮显示。我是中国

17、人，我爱祖国.二、HTML5文本语义元素4. 定义加删除线文本。是 标签的缩写版本。建议使用 替代！删除文本二、HTML5文本语义元素5. 和 标签一样，用于强调文本，但它强调的程度更强一些。显示为加粗的字体。如果说用 标签修饰的文本好像是在大声呼喊，那么用 标签修饰的文本就无异于尖叫了。二、HTML5文本语义元素6. 呈现小号字体效果。和它所对应的 标签一样，用于放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 标签将不起任何作用。与 标签类似， 标签也可以嵌套，从而连续地把文字缩小。每个 标签都把文本的字体变小一号，直到达到下限的一号字。AAAA是不是有点像孙大圣的魔法HTML5

18、的新增元素就学到这里吧！试试做个炫酷的博客网站吧 HTML5 +CSS3网页制作项目三 HTML5 表单先搞清楚三个概念URL格式：scheme：/host：port/path， 例 ：http：/domain/HXWZ scheme：指出WWW客户程序用来操作的工具。“http：/”表示WWW服务器“ftp：/”表示FTP服务器host：服务器地址，指出WWW页所在的服务器域名。port：端口有时（并非总是这样）path：路径（指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。先搞清楚三个概念绝对路径绝对路径是指文件在硬盘上真正存在的路径。例

19、如“bg.jpg”这个图片是存放在硬盘的“E:book网页布局代码第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:book网页布代码第2章bg.jpg。使用绝对路径指定网页的背景图片： 先搞清楚三个概念绝对路径使用绝对路径的缺点：事实上，在网页编程时，很少会使用绝对路径。如果使用“E:book网页布代码第2章bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘， 有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也

20、不一定会存在“E:book网页布局代码第2章”这个目录，因此在浏 览网页时是不会显示图片的。先搞清楚三个概念相对路径为了避免这种情况，通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于自己，目标文件所在的位置。例如上面的例子，“s1.html” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.html”来说，是在同一个目录的，那么要在“s1.html”文件里使用以下代 码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。 先搞清楚三个概念相对路径再举个例子，假设“s1

21、.html”文件所在目录为“E:book网页布局代码第2章”，而“bg.jpg”图片所在目录为“E:book网页 布局代码第2章img”，那么“bg.jpg”图片相对于“s1.html”文件来说，是在其所在目录的“img”子目录里，则引用图片的语句应该为： 注意：相对路径使用“/”，而绝对路径可以使用“”或“/”字符作为目录的分隔字符。由于“img”是“第2章”的子目录，因此在“img”前不用再加上“/”。先搞清楚三个概念相对路径在相对路径里常使用“./”来表示上一级目录。如果有多个上一级目录，可以使用多个“./”，假设 “s1.htm”文件所在目录为“E:book网页布局代码第2章”，而“b

22、g.jpg”图片所在目录为“E:book网页布局代码”，那 么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里，则引用图片的语句应该为： 再搞清楚一个过程表单数据处理过程HTML5表单先来回顾下表单创建： 。表单元素。HTML5表单action属性: 说明了提交时浏览器应该把从用户收集的数据发送到什么地方.method: 规定如何发送表单数据，包括GET和POST两种方法：GET方法：将表单数据以名称/值对的形式附加到 URL 中（通过URL地址可以看到提交的数据，不安全！）POST方法：将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）

23、，没有长度限制。安全！HTML5表单HTML5表单新增加了元素：定义一个可供选择的选项列表（类似）,与联合使用。 网络班 动漫班 后面详细讲解！HTML5 表单元素input还记得定义不同类型的输入框吗？text: 默认20 个字符。定义单行输入字段，用户可在其中输入文本。password: 定义密码字段。字段中的字符会被遮蔽。search: 定义用于搜索的文本字段。number和range: 只限数字输入，生成具有输入范围和步长的文本框。date系列（date/month/time）: 定义日期字段（带有 calendar 控件）。color: 定义颜色选择器。checkbox/radio:

24、 定义复选框、单选框。email/tel/url: 定义电子邮件格式、电话格式、网址格式。file: 定义文件选择器。模拟在移动端创建表单：谷歌浏览器预览，打开“开发者工具”，点击“手机切换按钮” ，选择设备。在和之间设置缩放参数：其他重要属性text类型定义用户可输入文本的单行输入框:value：文本框初始值（黑色，必须人工删除）。placeholder: 输入提示（灰色，光标移动到文本框即消失）maxlength：设置文本框最大字符长度。required：必填项，否则无法通过验证。readonly:文本框为只读状态，disable-禁用状态（on/off）。list：指定为文本框提供建议值

25、的数据列表（的id）。size:文本框宽度。（注意与maxlength的区别）autofocus: 打开页面时元素自动获得焦点。autocomplete：适用于form和input自动完成（需要浏览器开启该功能）。注意：默认form的该属性是ON，里面的元素默认也是on，改成off看看？定义只限输入数字的文本框，可以设定输入范围和步长。required：必填项，否则无法通过验证。readonly:文本框为只读状态，disable-禁用状态（on/off）。list：指定为文本框提供建议值的数据列表（的id）。value：文本框初始值（黑色，必须人工删除）。min: 可输入的最小值max: 可输

26、入的最大值 请看实例（注意设置缩放参数！）step: 制定上下调节的步长 系列type的值：date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间（小时和分钟）datetime - 选取时间、日、月、年（UTC 时间）datetime-local - 选取时间、日、月、年（本地时间）其他属性跟number一致 查看实例 定义颜色选择器 。 来吧，试一试 ！ E-mail: *定义单选、复选框 。 checked属性：设置是否选中的状态。 value属性：设置选中时提交的数据。 注意单选框name属性的设置。 查看实例 定义输入邮件格式、电话格式、u

27、rl格式的文本框点击提交按钮自动验证格式是否正确，并提示输入信息 查看实例 定义文件选择器：属性： accept=”image/gif,image/jpeg,image/png”只能输入格式为gif,jpeg,png的图片。 查看实例 定义提交、重置按钮，提交到action所指定的程序处理。 我是按钮定义一个按钮：在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。如果在 HTML5 表单中使用 button 元素，会自动提交表单内容。若是写在表单外面则不会提交！请在 HTML 表单中使用 input 元素来创建按钮。 项目三

28、综合练习填写信息练习说明：在移动设备预览，请在间添加：为了显示整齐，请在表单中创建表格，将项目名称和表单元素分别放在表格中。（8行两列，第一行合并，第8行合并）表单提交到success.html中：点击提交按钮后success.html在一个空白网页中打开：练习说明：账号、密码、邮箱为必填项：设置的required属性为生日、省份、邮箱设置输入提示信息：设置的placeholder=请选择XXX是时候拼一把了！加油，你们都可以的！HTML5 +CSS3网页制作项目四 HTML5 多媒体设计网页多媒体演变：HTML5以前：必须安装flash插件才可以播放多媒体音、视频，但是. .用户手动安装fl

29、ash插件累存在明显安全问题险系统资源消耗大（死机、耗电）卡HTML5之后：一个、一个就搞定了！网页多媒体演变：音视频深度解析容器、编/解码器浏览器支持情况Internet Explorer 8 不支持 。在 IE 9 中，将对 audio 元素的支持。音频格式：视频格式：插入音频 你的浏览器不支持！（当浏览器不支持时才显示）音频如何兼容多种浏览器？audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式 你的浏览器不支持！（浏览器不支持才显示） 插入视频 你的浏览器不支持！（当浏览器不支持时才显示）视频如何兼容多种浏览器？avid

30、eo 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式： 你的浏览器不支持！（浏览器不支持才显示） 综合实训我的娱乐空间实训指导：为网页添加背景图片：bg.jpg利用HTML5结构元素对网页结构进行布局（包括一个大标题、三个：音频区域、视频区域、下载区域）音频视频不支持显示提示信息：您的浏览器不支持该音频格式！音频视频要求兼容多种格式：音频：.ogg和.mp3; 视频：.ogv 和 .mp4综合实训我的娱乐空间大标题音频区域：.视频区域：.下载区域：.是时候拼一把了！加油，你们都可以的！HTML5 +CSS3网页制作项目五 使用canv

31、as元素绘图任务一 canvas基础什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。任务一 canvas基础先来看一个小例子如何在画布中创建一个矩形任务一 canvas基础1.创建Canvas：在和里创建，并设置画布的 id、宽度和高度：画布默认没有边框，所以看不到效果，给它加个边框试试。任务一 canvas基础2. 利用CSS样式给画布Canvas加边框：canvas画布canvas border:solid 2px black;

32、 （实线边框，2像素，黑色）预览一下，看看效果吧！任务一 canvas基础画布的坐标系：画布左上角为坐标原点（0,0）向右x增大，向下y增大（0,0）（300,200）任务一 canvas基础3. 利用JS脚本代码在Canvas中绘制一个实心的矩形：function drawSqure() var canvas=document.getElementById(myCanvas);var context=canvas.getContext(2d);context.fillStyle=rgb(14,120,209);context.fillRect(30,30,150,150); 写在里写在里，并

33、添加onload属性，在页面加载时执行该函数！任务一 canvas基础认识JS函数：1. JS函数在哪里写？在这里写js函数! ! ! 2. JS函数怎么定义？(函数定义语法)function 函数名（）.函数实现过程（每句话结束加分号！）.注意：function是定义函数的关键字，必须要有，函数名可以自定义，一般用有意义的英文单词。任务一 canvas基础认识JS变量：在JS中使用var来定义任何变量，变量名尽量简单易懂： 语法：var 变量名= 变量值；（变量名对大小写敏感） var test；/定义一个类型未知的变量test；var test=2；/定义一个变量test，初始值为数值类型

34、：2；var test=”javascript”; /定义一个变量test，初始值为字符串类型：javascript；（字符串必须加上英文双引号!）var canvas=document.getElementById(myCanvas);/ 定义一个变量canvas，赋值为getElementById方法的返回值。任务一 canvas基础认识JS变量：在js中变量可以理解为一个代号，只是用于保存数据。变量分类： 1. 自定义变量：用var来定义，变量名自定（如前面所讲） 2. js内置对象，已存在可直接使用，如：document （对象是一种特殊的变量，其包含若干属性和方法可根据需要进行调用）

35、变量采用“先定义，后使用”的原则。变量怎么使用？1. 使用点号“.”调用其方法来实现一定的功能： document.getElementById(myCanvas); /方法有（）2. 使用点号“.”设置其属性的值： context.fillStyle=rgb(14,120,209)；/属性没（）任务一 canvas基础JS变量赋值和方法调用：来看两个例子：var canvas=document.getElementById(myCanvas);这句话这样理解：内置对象document调用其方法getElementById(),返回值赋给变量canvas。getElementById(myCa

36、nvas)的作用是根据元素的id获取该元素对象。括号里的内容为方法的参数，即根据传入的参数也就是id决定获取哪个元素的对象。var context=canvas.getContext(2d); /canvas变量调用getContext(2d)方法返回二维画笔，定义变量context用于保存画笔。context.fillStyle=rgb(14,120,209); /调用画笔context的属性fillStyle，并将其设置为蓝色。任务一 canvas基础绘制实心矩形的步骤：function drawSqure() /定义js函数，函数名为drawSqure/步骤一：获取画布（拿纸）var c

37、anvas=document.getElementById(myCanvas);/步骤二：设置画布为二维环境（拿笔）var context=canvas.getContext(2d);/步骤三：设置填充绘画的颜色（设置笔的颜色）context.fillStyle=rgb(14,120,209);/步骤四：绘制“被填充”的矩形（开始画）context.fillRect(30,30,150,150); /起始坐标：X,Y，长，宽任务一 canvas基础绘制矩形的其他相关方法：(以下方法均由“笔”调用) 试一试吧！方法名的第一个单词首字母小写，其余单词首字母大写：fillStyle=“rgb(*,*

38、,*)”; /设置填充颜色fillRect（x,y,l,w）; /利用设置的填充颜色画实心矩形strokeStyle=“rgb(*,*,*)”; /设置轮廓颜色strokeRect（x,y,l,w）; /利用设置的轮廓颜色画空心矩形*为0255，不同组合代表不同颜色，常用：红（255,0,0），绿（0,255,0），蓝（0,0,255），黑（0,0,0），黄（255,255,0）x,y,l,w：分别代表矩形左上角（起点）坐标(x,y)，l:长，w：宽任务一 canvas基础小练习：思考：如何做出以上效果呢？注意最里面的是实心，每个矩形颜色不一样！ 试一试吧！任务二 绘制直线利用JS函数在画布中

39、绘制一条直线：function drawLine() /定义js函数，函数名为drawLinevar canvas=document.getElementById(myCanvas); /拿纸var pen=canvas.getContext(2d); /拿笔pen.lineWidth=20; /设置线宽pen.strokeStyle=rgb(200,40,40); /设置画笔颜色pen.beginPath(); /开始新路径(重置内存，每次画前调用)pen.moveTo(10,50); /定义直线的起点坐标pen.lineTo(400,50); /定义直线的终点坐标pen.stroke();

40、 /沿着坐标点开始绘制任务二 绘制直线常用方法/属性介绍：beginPath() : （方法）每次画一条新直线前必须调用（重置内存）moveTo(x,y) : （方法）找到直线起点坐标lineTo(x,y) : （方法）找到直线终点坐标stroke() : (方法) 绘制已定义的路径closePath() : (方法) 关闭绘制路径lineWidth: (属性)线宽，默认为1lineCap: (属性)线帽-butt(默认，无线帽),round,squarestrokeStyle: (属性)绘制路径颜色、渐变、模式任务二 绘制直线试试绘制两条不同颜色的交叉直线：1. 请思考：beginPath(

41、)方法使用和不使用有何区别？2. 尝试为两条直线加上不同的线帽。任务二 绘制直线绘制相互链接的直线，如三角形：只定义第一条直线的起点，剩下的直线只定义终点即可：.context.moveTo(50,100);context.lineTo(100,50);context.lineTo(100,200);context.lineTo(50,100);context.stroke();/若是调用fill(),则是填充这个封闭图形（效果为右边图形）任务二 绘制直线小组合作练习：任选一种你喜欢的图形使用JS函数画出： 1. 默认线帽 2. 线帽为圆形 3. 展开想象，发挥你的创造力. .说明：(1)小组

42、合作完成：设计开发测试提交(2)流程提示：设计图形，选定颜色、线宽、线帽，标明坐标，开始编程(3) 开发流程：创建画布，CSS-画布加边框，JS函数-画图形任务三 绘制弧线/圆利用JS函数在画布中绘制一个圆：function drawCircle() /定义js函数，函数名为drawCirclevar canvas=document.getElementById(myCanvas); /拿纸var pen=canvas.getContext(2d); /拿笔pen.strokeStyle=rgb(200,40,40); /设置画笔颜色pen.arc(150,150,100,0,2*Math.P

43、I); /设置圆心/半径/开始/结束 pen.stroke(); /沿着坐标点开始绘制任务三 绘制弧线/圆常用方法介绍：arc(x,y,r,start,end,counterclockwise):x圆心横坐标y圆心纵坐标r半径start开始角度（画圆从0开始）end结束角度（画圆2结束：2*Math.PI）counterclockwise可选，规定逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。（默认顺时针）任务三 绘制弧线/圆试试绘制两个同心圆或绘制一个半圆：注意：beginPath()的使用！任务三 绘制弧线/圆小组合作练习：设计一款新春对联或者： 1. 五彩棒棒糖 2

44、. 花样风车 3. 发挥你想象.（糖葫芦、小汽车、笑脸） 说明：(1)小组合作完成：设计开发测试提交(2)流程提示：设计图形，选定颜色、线宽、线帽，标明坐标，开始编程(3) 开发流程：创建画布，CSS-画布加边框，JS函数-画图形任务三 绘制弧线/圆拓展应用：使用for循环实现同时画多个形状 如果想要在画布上画20个圆，要把画圆的代码写20遍！有没有办法只写一遍，其他自动画呢？既然是程序当然有办法实现自动.下面是一道模拟光束,由10个大小不同的圆组成： 任务三 绘制弧线/圆什么是for循环： for ( var i=0; i10; i+) 循环体（这里面的步骤将被循环执行） i=0:为初始条件

45、i10:为循环条件，只有当i10的时候才执行大括号里的代码i+: 即i+1，每次执行完循环则i+1, 然后看是否满足循环条件i10,满足则执行，否则结束。 思考一下，这个循环要执行几遍？ 任务三 绘制弧线/圆实现过程很简单，在外层加个for循环即可，那么画20遍，30遍呢？应该怎么改？ for(var i=1;i=10;i+)context.beginPath();/每次要开始一个新的路径context.fillStyle=rgba(255,0,0,0.25);/0.25为透明度 context.arc(i*25,i*25,i*10,0,2*Math.PI);/设置圆的位置和半径可变conte

46、xt.fill();/填充context.closePath();/每个画完要关闭路径任务四 书写文本利用JS函数在画布中书写文字：function drawFont() /定义js函数，函数名为drawFontvar canvas=document.getElementById(myCanvas); /拿纸var pen=canvas.getContext(2d); /拿笔context.font = bold 72px 宋体; /设置字体外观context.textAlign = left; /设置文本对齐方式context.strokeStyle = blue; /设置轮廓颜色conte

47、xt.strokeText(青岛, 100, 100); /在(100,100)处绘制文字任务四 书写文本常用方法/属性介绍：font设置字体外观，如 “bold 72px 宋体”“italic 72px 宋体”textAlign设置文字对齐方式，如“left”、“center”、“right”fillStyle设置填充颜色strokeStyle设置轮廓颜色textBaseline设置或返回在绘制文本时使用的当前文本基线fillText(T,x,y)写填充文字（实心）,T为要写的文本，如“青岛”strokeText(T,x,y)写填充文字（实心）,T为要写的文本，如“青岛”.任务四 书写文本试

48、试不同样式的文字：注意：变化字体请查看谷歌字体库！（设置-外观-自定义字体）任务四 书写文本文字位置基线 textBaseline，textBaseline的值包括： /在位置 y=100 绘制蓝色线条ctx.strokeStyle=blue;ctx.moveTo(5,100);ctx.lineTo(395,100);ctx.stroke(); / 以 y=100 为基线，顶部切合基线放置文字ctx.textBaseline=top;ctx.fillText (abc, 5, 100);任务四 书写文本小组合作练习：设计一款logo： 1. 2. 发挥你想象. 任务五 处理图像利用JS函数在画

49、布中绘制图像（按原比例和大小绘图）function drawImage() /定义js函数，函数名为drawImagevar canvas=document.getElementById(myCanvas); /拿纸var pen=canvas.getContext(2d); /拿笔var img =document.getElementById(myImg) ;/获取原图pen.drawImage(img,10,10);/定义图像左上角位置，画图像 任务五 处理图像常用方法介绍：drawImage(img,x,y)：在x,y处按原比例和大小绘制图像drawImage(img,x,y,widt

50、h,height)：在x,y处绘制图像，并规定图像的宽度和高度；drawImage(img,x1,y1,w1,h1,x2,y2,w2,h2)：截取图像，并在画布上绘制被截取的部分，参数解释：x1,y1,w1,h1(可选参数)：截取图像的起点(左上角)坐标和截取的宽和长x2,y2,w2,h2：开始绘制的起点(左上角)坐标和绘制的宽和长任务五 处理图像试一试把第步换成如下两种绘制方法：1. 在(10,10)处绘制原图像，绘制大小为240X160:pen.drawImage(img,10,10,240,160); /用于绘制缩小或放大图2.从原图像的(90,130)处，截取90X80的部分图像，在画

51、布的(20,20)处绘制截取部分，大小为原来的一半：pen.drawImage(img,90,130,90,80,20,20,90/2,80/2);/绘细节图任务五 处理图像练一练：在网页中插入一张图片，并在右侧展示其缩小图及细节图，如下图所示：综合实训利用图形或图像绘制完成圣诞贺卡的制作：是时候拼一把了！加油，你们都可以的！HTML5 +CSS3网页制作项目六 CSS3样式基础任务一 认识CSS3样式表CSS（层叠样式表 Cascading Style Sheet）产生原因：若不考虑网页元素的行为，网页元素实质上由两部分构成：数据内容和显示格式。内容可以更新，格式可以改版。若想修改所设计的格

52、式，靠逐条修改标记属性，工作量很大。有了CSS，对应用同一格式显示的内容，只需要一次修改，便能使网页中所有应用此格式的网页元素的格式自动修改。任务一 认识CSS3样式表什么是CSS（层叠样式表 Cascading Style Sheet）：CSS不是一种编程语言。是“W3C” 于1996年5月制定的第一个排版样式标准。是对HTML的一种补充，使HTML的功能更强大。目前为CSS 3.0版本。CSS可以将网页格式的控制独立出来，形成样式表文件（.CSS文件），可供多次利用，节省代码。学完HTML5后，我们发现如果纯粹用它来写网页，其效果非常难看。若想让网页看起来非常美观，只能依赖CSS来解决了。

53、任务一 认识CSS3样式表CSS语法：选择器 声明1;声明2;，其中:选择器通常是一个HMTL元素（标记），声明则由两部分构成属性和值，每个声明以分号结尾。为了使CSS的可读性好，可以将每个声明写一行，如：h1 color:red; font-size:200%;任务一 认识CSS3样式表CSS可分为内部样式表、外部样式表和行内样式。内部样式表:就是将样式属性一一列举在内，并将style 标记对放在head或body标记对中。它只能用于定义它所在的HTML文档中。#A2font-family:宋体;color:blue;font-size:16pt;font-style:oblique;任务一

54、 认识CSS3样式表CSS可分为内部样式表、外部样式表和行内样式。外部样式表:不再需要标记；将样式保存在.CSS文件中，再由特定的语句调用到HTML文档中，可供多个HTML文档调用。在中加入下面语句：（连接式）任务一 认识CSS3样式表CSS可分为内部样式表、外部样式表和行内样式。行内样式: 样式放在HTML的元素内部。为段落加上样式：段落字体大小，颜色 我是一段文字.任务一 认识CSS3样式表CSS的两个特性：继承性与层叠性。继承性: 允许定义的样式不仅用于某个特定的HTML元素，而且应用于其子元素。演示：下列样式不仅用于，还作用于: p color: red;文字1文字2任务一 认识CSS

55、3样式表CSS的两个特性：继承性与层叠性。层叠性: 能够对同一元素或同一网页应用多个样式表，对于同一元素的同一属性会出现后者效果覆盖前者的样式层叠现象。演示：的最终效果显示为蓝色，后者覆盖了前者的设置:h1 color: red; h1 color: blue; 还可以用一个CSS样式表设置颜色，另一个样式表设置字体，最后设计出层叠效果。样式重要度排序：作者开发样式用户设置样式浏览器默认样式任务一 认识CSS3样式表CSS3介绍： CSS3是CSS2的升级版，增加了很多强大的新功能：以前需要图片和脚本代码才能实现的效果，在CSS3中只需要几行代码，例如：圆角、图片边框、文字阴影、盒阴影、过渡、

56、动画等。任务一 认识CSS3样式表CSS中的常用的单位：相对长度单位em：相对字体高度，默认1em=16pxpx：默认为12px%(百分比，相对元素的百分比值）绝对长度单位in(英寸，1英寸=2.54厘米）cmmmpt(点或磅，1pt=1/72英寸）pc(帕，1pc=12点） 任务二 认识CSS选择器还记得什么是选择器吗？“选择器”指明了中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素：CSS中最常用的几个选择器选择器：元素选择器后代选择器类选择器id选择器伪类任务二 认识CSS选择器元素选择器: 选择器通常是某个 HTML 标签名，比如 p、h1、em、a，甚至可以是 html

57、本身。样式表：html color:black;h1 color:blue;h2 color:red;网页元素：这是 heading 1这是 heading 2这是一段普通的段落CSS选择器：元素选择器/后代选择器/类选择器/id选择器/伪类：任务二 认识CSS选择器练习1：（1）在网页中创建一个h1标题，一个段落，利用元素选择器将标题设置为红色，段落为蓝色。（2）在网页中创建两个段落，利用元素选择器分组方式设置它们的字体为华文行楷、大小为16px、首行缩进2em、对齐方式为左对齐,行高为1.6em。属性名称说明：（可以通过css手册进行查询）名称属性名称属性颜色color首行缩进text-indent字体font-family对齐方式text-align字体大小font-size行高line-height任务二 认识CSS选择器CSS选择器：元素选择器/后代选择器/类选择器/id选择器/伪类：后代选择器: 又称包含选择器，可以选择作为某元素后代的元素。（不仅包括儿子，还包括孙子。即两个元素之间的层次间隔可以是无限的!）如果只希望对 中的 应用样式，可以这样写: h1 em color:red;上