当前位置：文档之家 › 网页设计与制作使用教程第11章

网页设计与制作使用教程第11章

  • 格式：ppt
  • 大小：815.00 KB
  • 文档页数：80

下载文档原格式

  / 80

合集下载

80《动态网页设计与制作实用教程(第二版)》第11章PPT课件

80《动态网页设计与制作实用教程(第二版)》第11章PPT课件
本章学习导读 编辑。本章主要讲述在 Dreamweaver 8 过本章学习，读者应该掌握以下内容：
1
第11章 设计页面布局
11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图
形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。
6
第11章 设计页面布局
5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格
可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。
8
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以
根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。
行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。
6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。
7
第11章 设计页面布局
7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何
“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的 绿色

网页设计与制作第11章 使用行为

网页设计与制作第11章 使用行为

11.2 行为基本操作
11.2.1 【行为】面板 11.2.2 添加行为 11.2.3 编辑行为
11.2.1 【行为】面板
Dreamweaver CS6提供了一个专门管理和编辑行为的工具面板，即【行 为】面板。通过【行为】面板，用户可以方便地为文本、图像等页面对象添 加行为，还可以修改以前设置过的行为参数。选择菜单命令【窗口】/【行 为】，可打开【行为】面板。 使用【行为】面板可将行为附加到页面元素。已附加到当前所选页面 元素的行为显示在【行为】面板列表中，并按事件以字母顺序列出。如果同 一事件引发不同的行为，这个行为将按执行顺序在【行为】面板中显示。如 果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元 素。
11.1.2
事件
事件是由浏览器生成的消息，它提示该页的浏览者已执行了某种操作。 例如，当浏览者将鼠标光标移到某个链接上时，浏览器将为该链接生成一 个onMouseOver事件，然后浏览器检查在当前页面中是否应该调用某段 JavaScript代码进行响应。不同的页面元素定义不同的事件。例如，在大多 数浏览器中，onMouseOver和onClick是与超级链接关联的事件，而onLoad 是与图像和文档的body部分关联的事件。
11.2.3
编辑行为
编辑行为的方法是，首先选择一个附加有行为的对象，然后在 【行为】面板中根据具体情况进行以下相应操作： • 如果要编辑动作的参数，可在【行为】面板的行为列表中双 击动作的名称，或将其选中并按Enter键，也可单击鼠标右键，在弹 出的快捷菜单中选择【编辑行为】命令，打开相应的对话框，在对 话框中更改参数并确认即可。 • 如果要更改给定事件的多个动作的顺序，可在【行为】面板 的行为列表中选择某个动作，然后单击 或 按钮。 • 如果要删除某个行为，可在【行为】面板的行为列表中将其 选中，然后单击 按钮或按Delete键即可。

《网页设计与制作》教案

《网页设计与制作》教案

《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。

《网页设计与制作》 第11章 行为

《网页设计与制作》 第11章 行为

11.2 行为面板

在Dreamweaver 8中，用户可以通过使用【行 为】面板来附加和编辑行为。选择菜单命令 【窗口】行为】或者使用Shift＋F4快捷键即可 打开【行为】控制面板
图中各代号的名称和功能如下：





（1）显示设置事件按钮将显示当前元素已经附加到当前文档的事 件 （2）显示所有事件按钮将显示当前元素所有可能事件，一般来说， 浏览器的版本越高，可支持的事件就越多 （3）添加行为按钮单击该按钮将弹出一个活动菜单 （4）删除事件按钮用于在行为列表中删除所选的事件和动作 （5）增加事件值按钮用于在行为列表中向上移动所选的事件 （6）降低事件值按钮用于在行为列表中向下移动所选的事件


导航工具栏：包括“前进”和“后退”等按钮的工具栏； 地址工具栏：帮助用户输入地址或进行链接的工具栏； 状态栏：位于浏览器窗口底部的区域，根据操作的不同，在该区域显示 相应的提示信息； 菜单条：在浏览器窗口上显示菜单的区域。如果要让用户能够从新窗口 导航，应该选中此项，否则在新窗口中，用户只能关闭或最小化窗口； 需要时使用滚动条：指定如果内容超出可视区域是否显示滚动条，如果 不选择此项，则不显示滚动条，如果“调整大小手柄”选项也关闭，则 访问者将无法看到超出窗口原始大小以外的内容； 调整大小手柄：指定是否能够调整窗口的大小，如果未选定此项，则新 窗口将无法改变大小，也无法拖动其边框改变大小； 窗口名称：指定新窗口的名称。如果想通过JavaScript使用链接指向新窗 口或者控制新窗口，则应该对新窗口进行命名，此名称不能包含空格或 特殊字符。
有关鼠标和键盘的事件


OnClick用鼠标单击选定元素的一瞬间发生的事件 OnBlur鼠标指针移到窗口或帧外部，即在这种非激活 状态下发生的事件 OnDragDrop拖动并放置选定元素的那一瞬间发生的 事件 OnFocus鼠标指针移动到窗口或帧上，即激活之后发 生的事件OnMouseOut鼠标指针经过选定元素之外时 发生的事件OnMouseOver鼠标指针位于选定元素上 方时发生的事件OnMouseUp单击鼠标右键，然后释 放时发生的事件

动态网页设计与制作实用教程

动态网页设计与制作实用教程

11.3 使用框架对页面进行布局
11.3.1 框架（集）概述
11.3.2 创建框架和框架集
11.3.3 选择框架和框架集
11.3.4 在框架中打开文档
11.3.5 保存框架和框架集文件
11.3.6 设置框架（集）属性
2021/7/22
54
11.4使用层对页面进行布局
11.4.1 层的创建
11.4.2 层的基本操作
41
7.2 认识 Fireworks MX
7.2.1 Fireworks MX的特点 7.2.2 Fireworks MX 的工作界面 7.2.3 文档的基本操作
2021/7/22
42
7.3 矢量图像的绘制与编辑
7.3.1 图像的绘制模式 7.3.2 矢量图像的绘制 7.3.3 布局工具的使用 7.3.4 标题文字的制作
1.5.1 ASP 技术 1.5.2 PHP 技术 1.5.3 JSP 技术
2021/7/22
26
2.1 认识 Flash MX
2.1.1 Flash MX的发展 2.1.2 Flash MX的新增功能
2021/7/22
27
2.2 Flash MX 的工作界面
2.2.1 菜单栏 2.2.2 工具栏和绘图工具箱 2.2.3 时间轴面板 2.2.4 属性面板 2.2.5 其他面板
2021/7/22
33
4.2 三种基本动画形式
4.2.1 逐帧动画的制作 4.2.2 位移动画的制作 4.2.3 变形动画
2021/7/22
34
5.1 洋葱皮效果的应用
Flash MX 中有种专门的多帧编辑与对齐模式，叫作"洋葱皮效 果"(Onion Skin)，它们位于时间轴下面。把"洋葱皮"视图模式打 开，点按时间轴下面的图标，时间轴会变成时间轴上出现了两个圆 圈，它们分别代表洋葱皮的起始帧与终止帧，凡是在这个范围内的 帧都可在同时间进行显示。现在我们把右边的圆圈拉到第30 帧

网页设计与制作教程第11章 光影世界前台页面

网页设计与制作教程第11章 光影世界前台页面
images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
网页设计与制作教程 （HTML+CSS+JavaScript）
第2版
第11章 光影世界前台页面
机械工业出版社
11.1 网站的开发流程
11.1.1 规划站点
1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
11.1 网站的开发流程
11.1.2 网站制作
完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换 为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程 等。
11.1 网站的传到服务器之前，要先在本地对其测试。可以通过运行站点报 告来测试整个站点并解决出现的问题。
测试网页主要从以下3个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。

网页设计与制作案例教程电子教案课件

网页设计与制作案例教程-电子教案课件第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讲解网页设计的基本原则和设计流程1.2 网页布局与排版介绍网页布局的概念和重要性讲解常用的网页布局方法和技术演示实例：制作一个简单的网页布局第二章：HTML与CSS基础2.1 HTML基础介绍HTML的概念和作用讲解HTML的基本结构和常用标签演示实例：制作一个简单的网页2.2 CSS基础介绍CSS的概念和作用讲解CSS的基本语法和常用选择器演示实例：为网页添加样式和布局第三章：图像与多媒体处理3.1 图像处理介绍图像在网页设计中的作用和重要性讲解图像的基本格式和处理方法演示实例：制作一个简单的图像轮播效果3.2 多媒体处理介绍多媒体在网页设计中的应用讲解音频和视频的嵌入方法演示实例：在网页中添加音频和视频第四章：网页交互与动画4.1 交互设计基础介绍交互设计在网页设计中的作用和重要性讲解常用的交互设计技术和方法演示实例：制作一个简单的交互式导航菜单4.2 动画与过渡效果介绍动画在网页设计中的应用和重要性讲解CSS动画和过渡效果的语法和用法演示实例：制作一个简单的CSS动画效果第五章：响应式网页设计5.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解响应式网页设计的基本原则和方法5.2 媒体查询与网格系统讲解媒体查询的语法和用法讲解网格系统的概念和应用演示实例：制作一个响应式网页布局第六章：网页前端编程技术6.1 JavaScript基础介绍JavaScript的概念和作用讲解JavaScript的基本语法和常用语法演示实例：制作一个简单的网页交互效果6.2 jQuery库的使用介绍jQuery的概念和作用讲解jQuery的基本语法和常用方法演示实例：使用jQuery实现网页元素的动态效果第七章：网页后端技术7.1 PHP基础介绍PHP的概念和作用讲解PHP的基本语法和常用语法演示实例：制作一个简单的PHP网页7.2 MySQL数据库的使用介绍MySQL的概念和作用讲解MySQL的基本操作和常用SQL语句演示实例：使用MySQL存储和管理网页数据第八章：网页优化与性能提升8.1 网页优化概述介绍网页优化的重要性讲解网页优化的基本原则和方法8.2 提高网页性能讲解提高网页加载速度的方法讲解代码压缩和合并的技术演示实例：优化网页性能第九章：搜索引擎优化（SEO）9.1 SEO基础介绍SEO的概念和作用讲解SEO的基本原则和方法9.2 关键词研究和内容优化讲解关键词研究的方法和技巧讲解内容优化的重要性和方法演示实例：为一个网页进行SEO优化第十章：网页设计与制作的实战项目10.1 项目概述和需求分析介绍项目背景和目标分析项目需求和功能10.2 网页设计与制作流程讲解网页设计与制作的详细流程演示实例：完成一个实战项目的网页设计与制作第十一章：网页设计与制作工具11.1 网页编辑器与IDE介绍常用的网页编辑器和集成开发环境（IDE）讲解如何使用这些工具进行网页设计与制作11.2 图形设计软件介绍常用的图形设计软件及其在网页设计中的应用讲解如何使用这些工具进行网页图形设计第十二章：网页设计与制作实战技巧12.1 网页动画与特效讲解如何制作网页动画和特效演示实例：制作一个动态轮播图12.2 网页响应式设计讲解如何实现网页的响应式设计演示实例：制作一个响应式网页布局第十三章：网页安全性与维护13.1 网页安全性基础介绍网页安全性的重要性和常见安全问题讲解如何提高网页安全性13.2 网页维护与更新讲解如何进行网页的维护和更新演示实例：对一个网页进行维护和更新第十四章：网页设计与制作的案例分析14.1 案例一：企业官方网站设计分析企业官方网站的设计要求和特点讲解如何设计和制作企业官方网站14.2 案例二：电子商务网站设计分析电子商务网站的设计要求和特点讲解如何设计和制作电子商务网站第十五章：网页设计与制作的未来发展15.1 网页设计趋势与创新分析当前网页设计的趋势和创新方向讲解如何跟上网页设计的未来发展15.2 网页设计与制作的未来技术介绍未来可能影响网页设计与制作的技术讲解如何应对这些技术挑战和机遇重点和难点解析重点：1. 网页设计基础：理解网页设计原则、设计流程以及布局与排版的方法。

网页设计与制作教程-目录

1.5.9滚动条
1.6 CSS技术
1.6.1什么是CSS
1.6.2在网页中使用CSS
1.6.3 CSS样式定义
1.6.4 CSS属性
1.6.5 CSS过滤器简介
1.7 JavaScript技术
1.7.1 JavaScript脚本嵌入HTML文档的方法
1.7.2使用客户端脚本
习题一
第2章DreamweaverCS6网页设计基础
5.5.5嵌套的框架集
5.5.6框架的编辑
习题五
第6章表单的应用
6.1创建表单
6.2添加表单对象
6.2.1插入文本域
6.2.2插入单选按钮/单选按钮组
6.2.3插入复选框/复选框组
6.2.4插入选择框（列表/菜单）
6.2.5插入文件域
6.2.6插入按钮
6.3表单的提交
6.4应用表格布局表单实例
习题六
11.1.7利用形状绘制工具绘制图像
11.1.8图像修饰工具的应用
11.1.9调色命令的高级应用
11.1.10图层样式
11.1.11文字图层
11.1.12滤镜
11.2页面设计与制作
11.2.1整体页面的制作
11.2.2制作导航栏
11.2.3制作网页内容板块
11.2.4制作网页页脚
习题十一
第12章网页制作工具集成及网页制作综合实训
网页设计与制作教程
第1章网页设计与制作概述
1.1网络的基础知识
1.1.1 TCP/IP协议
1.1.2 IP地址
1.1.3域名地址
1.1.4统一资源定位器
1.2图形图像的基础知识
1.2.1位图与矢量图
1.2.2常用的图像格式

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

《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。

二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。

单纯的技能训练不是提高高等职业教育的理想课程。

以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。

教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。

三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。

◆理解HTML、CSS和JavaScript的功能和作用。

◆熟悉Dreamweaver工具的基本操作。

学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。

网页设计与制作教程-Web前端开发 第6版 第11章 HTML5的拖放和画布


第11章 HTML5的拖放和画布
11.2 画布
本节介绍画布。
目录
11.1 拖放 11.2 画布 习题11
第11章 HTML5的拖放和画布
11.2 画布
11.2.1 创建canvas元素 canvas元素的主要属性是画布宽度属性width和高度属性height，单位是像素。 向页面中添加canvas元素的语法格式为： <canvas id="画布标识" width="画布宽度" height="画布高度">
11.2 画布
11.2 画布
11.2.3 绘制图形的步骤 在创建好的canvas上，通过JavaScript绘制图形的步骤如下： 1）创建canvas对象。
2）创建coห้องสมุดไป่ตู้text对象。
3）绘制图形。
11.2 画布
11.2.4 绘制图形 1．绘制矩形 （1）绘制填充的矩形 fillRect()方法用来绘制填充的矩形，语法格式为： fillRect(x, y, weight, height);
… </canvas>
例如，创建一个标识为myCanvas，宽度为200像素，高度为100像素的 <canvas>元素，代码如下：
<canvas id="myCanvas" width="200" height="100"></canvas>
11.2 画布
11.2.2 构建绘图环境 其语法格式为： canvas.getContext(contextID)
（2）绘制矩形轮廓 strokeRect()方法用来绘制矩形的轮廓，语法格式为： strokeRect(x, y, weight, height);
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

注：插入单选钮的HTML代码为＜INPUT type="radio" name="..." value="..."＞ 选中该单选钮，在属性面板中进行相应的属性设置
单选按钮：该名称是存储该域的值（选定值）的变量 名，必须在该表单内唯一。要保证数据的准确采集， 单选钮都是以组为单位使用的，在同一组中的单选钮 必须用同一个名称。 选定值：定义该单选钮的值。当选中该单选钮时，此 “选定值”就随表单一起提交，作为该单选钮的当前 值。 初始状态：在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”，则该单选钮一加载就是 选中状态
注：多个复选框可以共用一个名称，一个复选框名称变量也可以 拥有多个值（多个值在提交时用逗号隔开）。多个复选框可以共用一 个名称时，被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
（4）单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标，确定插入位置，然后点击插入 面板上的按钮 ，插入一单选钮
注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
，所输入的文本被替换为星号或项目符号，以隐藏该文 本，保护这些信息不被看到。

当文本框的类型设置为“多行”时，属性面板发生变 化，即文本框从“文本字段”变为“文本区域” 其属性设置和“单行”类型相似，只是更新了2个属性

（2）隐藏域


隐藏域是用来收集或发送信息的不可见元素，对 于网页的访问者来说，隐藏域是不可见的。当表单被 提交时，隐藏域就会将信息用你建立时定义的名称和 值发送到服务器。隐藏域一般用作搜集特定信息以及 在网页间传递参数等。 在新建的表单内点击鼠标，确定插入位置，然后点 击插入面板上的按钮 ，插入一隐藏域
3 .表单
通过前面的介绍，相信大家对表单有了初 步的了解。接下来我们将逐步并详细的介绍表 单的创建、编辑和应用。 1．Form标签 如果要在网页中添加表单域，应首先添加表 单，即定义表单的数据采集的范围。 （1）表单的创建 在插入面板上选择“表单”标签，点击 按钮 ，表单将插入到页面中
插入表单后效果如图

选中该“列表/菜单”域，在属性面板中进行相应的属 性设置。
列表/菜单：该名称是存储该域的值（选定值）的变量名，必须 在该表单内唯一。 类型：类型有2个可选值： 菜单：用户只能从多个预设值中选择一个值，并且该菜 单域只占一个选项的高度。
列表：用户可以从多个预设值中选择一个或者多个值，由“ 选定范围”决定。该列表域的可以同时显示多个选项，其值由“ 高度”值决定，单位为一个选项的高度。
注意： 1．插入表单的HTML语法为： ＜FORM Action="URL" Method="GET|POST" Enctype="MIME类型" TARGET="..."＞ . . .（表单元素） ＜/FORM＞ 2．FORM标签不能嵌套，即表单不能嵌套。
（2）表单的属性设置 在页面中选中表单（如果不能选中整个表单，可以在页 面的左下侧点击 中的 “<form>”实现表单的快速选 择），在属性面板中出现表单的属性选项
虽然用服务器端程序处理表单数据是通用的方法， 但是当我们只需要收集简单的信息时，而不需要及时完 成交互时，我们可以采用电子邮件的方式传送表单信息 。方法为：将“动作”属性设置为“mailto：E-Mail邮箱 名”，“方法”属性设置为“Post”，同时将“MIME类 型”属性设置为“multipart/form-data MIME”。具体效果 读者可以自行尝试。

（5）列表/菜单 列表/菜单”域允许用户在一个有限的空间内 设置多个选项，并且可以从中选择一个或者多 个选项。其功能和单选钮/复选框类似。 在新建的表单内点击鼠标，确定插入位置，然 后点击插入面板上的按钮 ，插入一“列表/菜 单”域
注：插入列表的HTML代码为 ＜select name=“...” size=“..." multiple＞ ＜option value="..." selected＞...＜/option＞ ... ＜/select＞
提交表单：在单击该按钮时，将表单获得的数据送出，以便 服务器的处理程序完成数据的处理。 重设表单：在单击该按钮时，重设表单，使所有表单域的当 前 值恢复到初始值。 无：在单击该按钮时，根据处理脚本激活一种操作
4. 实例：建立表单

1.实例创意 2.制作步骤
1．实例创意 表单是实现用户和网页交换信息的工具，但是表单效 果的实现一般需要结合相应的动态网页处理程序。当 我们在表单内填写好有关信息后，点击提交按钮，表 单会按照一定的编码方式把搜集到的数据送出，供表 单“动作”属性所指明的动态网页来进行数据的处理 。目前我们还没有涉及到动态网页的相关知识，为了 理解表单数据提交的形式和数据搜集的结果，本例通 过把表单数据提交到邮箱来进行此过程的模拟
注：插入文本框的HTML代码为： ＜input type="text" name="..." size="..." maxlength="..." value="..."＞
文本域：文本框的名称。该名称是存储该域的值（输入 的数据）的变量名，必须在该表单内唯一。 字符宽度：指定文本框的最大长度，即该表单域一次最 多可显示的字符数。默认宽度是20个字符。 最大字符数：限定用户可在文本域中输入的最大字符数 。如果保留为空，则可以输入任意数量的文本。如果字 符个数超过域的字符宽度，文本将滚动显示。如果用户 输入超过最大字符数，则表单将产生警告声。 初始值：文本框中默认显示的文本，即该表单一加载就 显示的文本。
注：插入提交按钮的HTML代码为<input type=&" value="…">
选中该“按钮”域，在属性面板中进行相应的属 性设置
• 按钮名称：该名称是存储该域的值的变量名，必须在该 表单内唯一。 • 标签：在该按钮上显示的文本。 • 动作：该按钮可执行的操作。可选择的操作有：
目标（Target）：指定超链接页面目标地址。 MIME类型：指明用来把表单数据提交给服务器时的 MIME 编码类型。缺省值是“application/x-wwwform-urlencode” ，即URL编码方法，通常与 POST 方法协同使用。如果要创建文件上传域，请指定 “multipart/form-data MIME”类型。
2 .表单域的类型
HTML定义了以下类型的表单域： （1）文本框：文本框可以接受用户的输入信息。文本框 分为两种：单行文本字段、密码框和多行的文本区域 。对于任何一种文本框，所输入的文本将作为该表单 域的当前值 （2）复选框：复选框使用户可以选择信息。对于多个具 有同一名称的复选框，用户可以选中其中的一个或多 个。 （3）单选钮：单选钮与复选框类似，也用于选择信息。 但是，对于具有同一名称的多个单选钮，用户只能选 择其中一个。
动作（Action）：指定处理已提交表单数据的程序（ 能处理表单数据，一般是动态技术网页，如ASP、JSP 、PHP等）。它可以是一个URL地址或一个电子邮件地 址。 方法（Method）：指明提交表单的HTTP方法（发送 数据的方法）。可能的值为POST和GET。
提示：POST方法将表单数据作为一个数据整体发送给服 务器。发送时将数据按照一定的编码方法编码作为HTTP 内容发送。 GET方法把“名称－值”对加在动作（Action）的URL后 面并且把新的URL送至服务器，即在URL的末尾附加要向 服务器发送的消息。这是向前兼容的缺省值。通常默认 方法为GET方法。
注：插入隐藏域的HTML代码为<input name="…" type="hidden" value="…">
选中该隐藏域，在属性面板中进行相应的属性设置
隐藏区域：隐藏域的名称。该名称是存储该域的值（ 预先设置的值）的变量名，必须在该表单内唯一。 值：定义隐藏域的值，该值可以是固定值，也可以是 函数值（可变

列表值：在“列表/菜单”中显示的选项值。 单击按 钮 ，弹出“列表值”对话框，
项目标签：在列表中显示的文本。 值：用户选择该项时将发送到服务器的数据。

初始化时选定：在浏览器中首次载入该表单域时，使 列表中的某一项处于选中状态
（6）按钮 按钮分为提交按钮，重置按钮和一般按钮，它们可 以用来提交表单（把表单获取的数据送出到服务器）、 重置表单数据（使所有表单域的值恢复到初始值）和执 行预定义的脚本语句。 在新建的表单内点击鼠标，确定插入位置，然后点 击插入面板上的 的按钮，插入一按钮
通过对比，我们可以总结出典型的表单组成内容： （1）表单标签：这里面包含了处理表单数据所用程序的 URL地址和数据提交到服务器的方法。 （2）表单域：包含了文本字段、密码框、隐藏域、多行 文本区域、复选框、单选钮、下拉选择框和文件上传 框等类型。用于接受用户输入或选择的信息。 （3）表单按钮：包括提交按钮、复位按钮和一般按钮。 用于将数据传送到服务器或者取消输入，还可以用表 单按钮来控制其他脚本处理语句的处理工作
注意：提交表单的用户机器上必须使用Outlook Express
作为默认邮件客户端，否则无法正常使用。
2．表单域 表单（Form）定义了数据采集的范围，表单域则是 采集用户输入或选择的数据的接口。表单域包含文本框 、隐藏域、复选框、单选钮和菜单/列表等，下面分别讲 述这些表单域的创建方法和属性设置。 （1）文本框 文本框是一种让访问者自己输入内容的表单对象，通 常被用来填写单个字或者简短的回答，如姓名、地址等。 在新建的表单内点击鼠标，确定插入位置，然后点击 插入面板上的 按钮，插入一文本框