跨平台的移动Web开发实战单元7 网页图形绘制与游戏设计
网页制作实用教程(第3版)第7章
7.2.3 保存框架集和框架文件
图7－15 “文件”菜单
图7－16 “文件”菜单
7.2.3 保存框架集和框架文件
2.保存框架集文件 在“框架”面板或文档窗口中选择框架集，然后执行 下列操作之一：
如果要保存框架集文件，可选择菜单“文件>保存框架 页”命令，如图7－17所示。
如果要将框架集文件保存为新文件，可选择“文件>框 架集另存为”命令，如图7－18所示。
图 7-8 显示框架边框
7.2.2 自定义框架集
图7-9 拖曳出水平框架边框
图 7-10 拖曳出垂直框架边框
7.2.2 自定义框架集
将鼠标放在页面的一个角上，当鼠标变成十字箭头时， 如图7-11所示。单击鼠标不放，即可将页面一次性划分成4 个框，如图7-12所示。
图7-13 选中一个框架
图7-14 拖曳出嵌套框架
7.1 什么是框架
这是一个上下结构的框架。事实上这样的一个结构是由 三个网页文件组成的。首先外部的框架集是一个文件，这里 我们用 index.html 命名。框架中上边命名为 T ，指向的是一 个网页a.html。下边命名为M，指向的是另一个网页b.html。 如图7-3所示。 或者我们可以这样理解：我们创建一个名为 index.html 的网页，使用框架技术把网页分成上、下两个区域，上区域 用来显示一个网页文件（这里称为a.html），下区域用来显 示另一个网页文件（这里称为b.html），而这个index.html 文件称为框架集文件。 通常我们需要打开框架文件时，我们只要打开框架集文 件就可以同时打开它所包含的框架文件。但我们编辑含有框 架的页面时，是分别编辑，分别保存，最后别忘了还要保存 框架集文件。
7.2.2 自定义框架集
网页设计与制作教学课件
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
网页设计与开发第7章考试及答案
网页设计与开发第７章考试及答案————————————————————————————————作者: ————————————————————————————————日期:ﻩ《网页设计与开发第7章》试卷一、选择题1.下列关于表单的说法不正确的一项是（）。
Ａ.表单元素可以单独存在于网页表单之外Ｂ.表单中包含各种对象，例如文本域、列表框、复选框和单选按钮Ｃ.ｇeｔ和post方法是浏览器将表单信息提交给服务器程序的两种主要方法Ｄ.表单由两部分组成:一是描述表单的HＴＭL源代码;二是用来处理用户在表单域中输入的信息的服务器端应用程序客户端脚本答案: A２. 下列不是表单域的控件是（）。
A.单行文本框B.复选框C．下拉菜单D．图文框答案: D3. HTML语言中表单的作用是( )。
A.显示图像Ｂ.设置超链接C．收集用户反馈信息D．显示网页信息答案: Ｃ4. 有如下一行代码＜ｉｎpｕt type=＂texｔ＂name="tｘt＂＞请问它的功能是（）。
Ａ．创建一个文本框Ｂ．创建一个密码框Ｃ.创建一个文本域D．创建一个按钮答案: A5.在ＨＴMＬ中，＜ｆｏrm action＝?>,action表示（)。
Ａ.提交的方式B.表单所用的脚本语言C．提交的UＲL地址Ｄ．表单的形式答案： B6.在HTＭL中,<fｏrm meｔｈｏd=?>,ｍethod表示( ）。
Ａ．提交的方式B．表单所用的脚本语言C．提交的ＵＲＬ地址D.表单的形式答案: Ａ7. 增加表单的复选框的HＴML代码是( ）。
A.<inpｕt type=suｂmiｔ>B．<iｎｐｕt ｔｙpe= image >C．<inｐuｔｔype=text>Ｄ．<ｉｎput type=cｈeｃkbox>答案: D8.增加表单的密码域的HTML代码是( )。
A．<iｎpｕt ｔyｐe=ｓubmｉt＞B．<iｎput ｔypｅ=passwoｒｄ>C.<iｎpuｔtyｐe=ｒadｉo>D．<input tyｐe=cheｃkbox>答案: B9．创建选项菜单应使用以下标记符（ )。
网页设计与制作第7章
7.1 认识CSS
7.1.4 CSS的优势
1. 避免使用不必要的HTML元素 2. 缩短更新和维护的时间 3. 减少服务器和带宽的费用，以节约资金
7.1 认识CSS
7.1.5 CSS规则
选择符（selector）：所谓选择符就是规则中用于选择文档中要应用样式的那 些元素。该元素可以是（X）HTML的某个标签（如本例中<h2>标签被选中）， 也可以是页面中指定的class（类）或者id属性限定的标记。 声明：声明包含在一对大括号“{}”内，用于告诉浏览器如何渲染页面中与选 择符相匹配的对象。声明内部由属性及其属性值组成，并用冒号隔开，以分号 结束，声明的形式可以是一个或者多个属性的组合。 属性（property）：属性是由官方CSS规范约定的，而不是自定义的，除个别 浏览器私有属性以外。 属性值（value）：属性值放置在属性名和冒号后面，具体内容跟随属性的类 别而呈现不同形式，一般包括数值、单位以及关键字。
7.2 如何在网页中插入CSS
7.2.2 内部样式
内部样式位于页面标签的<head>与</head>之间，且使用<style>标 签进行包裹。
7.2 如何在网页中插入CSS
7.2.3 外部样式
外部样式是目前在实际工作中使用最为广泛的一种形式。它将CSS 样式代码保存为一个样式文件，然后在页面中使用<link>标签链接到这 个样式文件，以便实现多个页面调用同一个外部样式文件的目的。
7.4 伪类与伪元素
7.4.1 伪类
伪类可以让用户在使用页面的过程中增加更多的互交效果，例如应 用最为广泛锚点标签<a>的几种状态（未访问链接状态、已访问链接状 态、鼠标指针悬停在链接上的状态以及被激活的链接状态），具体代码 如下所示。
网页设计与制作案例教程电子教案
网页设计与制作案例教程-电子教案第一章：网页设计与制作基础知识1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的基本原则和最佳实践1.2 网页制作基础介绍HTML、CSS和JavaScript的基本概念和作用讲解如何使用文本编辑器和网页设计软件进行网页制作第二章：网页布局与排版2.1 网页布局概述介绍常见的网页布局类型和特点讲解布局的基本原则和技巧2.2 排版与字体设计介绍排版的基本概念和原则讲解如何选择合适的字体、字号、行距等属性进行排版第三章：网页配色与图标设计3.1 网页配色基础介绍色彩的基本概念和配色原则讲解如何根据网页内容和主题选择合适的配色方案3.2 图标设计介绍图标设计的基本原则和技巧讲解如何制作和选择合适的图标来提升网页视觉效果第四章：网页动画与交互设计4.1 网页动画基础介绍动画的概念和作用讲解如何使用HTML5和CSS3制作简单的网页动画4.2 交互设计介绍交互设计的基本概念和原则讲解如何使用JavaScript和CSS3实现基本的交互效果和功能第五章：网页设计与制作实践案例5.1 案例一：企业官网首页设计分析企业官网首页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作企业官网首页5.2 案例二：电子商务网页设计分析电子商务网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作电子商务网页5.3 案例三：个人博客网页设计分析个人博客网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作个人博客网页第六章：响应式网页设计与制作6.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解如何使用媒体查询和弹性布局实现响应式设计6.2 移动端网页设计与制作分析移动端网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作移动端网页第七章：前端框架与库的应用7.1 前端框架概述介绍前端框架的概念和作用讲解如何使用Bootstrap、Foundation等前端框架加速网页开发7.2 前端库的应用介绍jQuery、React、Vue等前端库的概念和作用讲解如何使用这些前端库来增强网页的功能和交互性第八章：网页设计与制作高级技巧8.1 CSS预处理器介绍Sass、Less等CSS预处理器的概念和作用讲解如何使用CSS预处理器来优化和简化CSS代码8.2 网页性能优化介绍网页性能优化的概念和重要性讲解如何通过代码压缩、缓存策略等手段提高网页加载速度第九章：网页设计与制作项目管理与团队协作9.1 项目管理基础介绍项目管理的基本概念和工具讲解如何在网页设计与制作项目中进行有效的时间管理和资源分配9.2 团队协作与沟通介绍团队协作的基本原则和技巧讲解如何在团队中进行有效的沟通和协作，确保项目的顺利进行第十章：网页设计与制作案例分析与评价10.1 案例分析分析具体网页设计案例的成功因素和不足之处讲解如何评价和吸取网页设计案例的经验教训10.2 作品展示与评价介绍如何展示和评价网页设计作品讲解如何通过用户反馈和数据分析来评估网页设计的成效和改进空间重点和难点解析重点环节1：网页设计原则和最佳实践网页设计原则包括清晰性、简洁性、一致性、可读性、可用性等。
《Web前端开发实战-课件》
好的布局和响应式设计可以让网 站在各种设备上都有良好的显示 效果。
前端开发工具和框架
1
常用的开发工具和编辑器
例如VS Code、WebStorm等，它们提供代码高亮、语法检查、自动完成等功能。
2
浏览器开发者工具
Chrome、Firefox等浏览器自带的开发者工具，可以查看页面元素和样式，调试JavaScript等。
前端开发的重要性
前端是一个网站面向用户的 入口，好的前端开发可以直TML和CSS介绍
HTML是一种标记语言，用于创建 网页结构，CSS用于设置样式。 它们是前端开发的基础。
JavaScript基础
布局和响应式设计
JavaScript是一种常用的脚本语言， 可用于实现互动效果和动态变化。
《Web前端开发实战—— 课件》
欢迎大家来到Web前端开发实战的课件。本课程将提供全面的前端开发知识 和经验，帮助大家成功入门和成长。
前端开发概览
什么是前端开发
前端开发是指构建并实现 Web 前端界面，主要使用 HTML、CSS、JS等技术。
前端技术的发展趋势
新技术的迅速发展，人们对 于Web的交互性和用户体验 的要求越来越高。
优化前端资源加载顺序、 代码压缩、图片优化等方 面，提高网站性能和用户 体验。
前言
介绍主题和目的
本课程是一份Web前端开发实战的课件，内容覆 盖了Web前端基础知识、开发工具和框架、常见 的前端开发任务等方面，帮助大家成功入门和成 长。
引入演讲者和背景信息
我是一名多年从业经验的前端开发工程师，曾经 服务于多家大型的互联网公司和知名的科技公司。
页面制作和优化
设计、实现和优化网站页面，包 括UI设计、响应式布局，网站访 问速度优化等。
前端学习路线图--移动Web网页开发
前端学习路线图--移动Web网页开发黑马程序员的前端学习路线图大纲中第二阶段的学习是移动Web网页开发的学习：主要介绍了前端学习路线图的移动web网页开发的学习目标，前端学习路线图的移动web网页开发的市场价值，前端学习路线图的移动web网页开发的重点知识。
前端学习路线图中移动web网页开发的技术要点：CSS3动画的技术要点；移动端页面开发的技术要点；Bootstrap的技术要点。
CSS3动画1、CSS3的2D和3D变换2、animation动画3、炫酷页面开发（地图大数据热点图、大风车、旋转木马轮播图等）移动端页面开发1、传统布局的局限性2、移动端屏幕介绍3、移动端浏览器介绍4、物理像素&物理像素比5、真机调试6、viewport视口7、移动端技术选型8、移动端主流适配解决方案9、移动端特殊样式10、百分比布局&流失布局11、Flex布局优势12、盒子父级常见属性设置13、盒子子级常见属性设置14、携程网Flex移动端页面开发15、rem单位使用16、rem适配17、预处理器less18、media媒体查询19、淘宝flexible.js移动端适配20、cssrem插件使用21、cutterman二倍图三倍图切图22、移动端页面开发流程与规范23、京东移动端首页开发黑马程序员视频库网址：（海量热门编程视频、资料免费学习）学习路线图、学习大纲、各阶段知识点、资料网盘免费领取+QQ 1679806262 Bootstrap1、传统布局的局限性2、移动端屏幕介绍3、移动端浏览器介绍4、物理像素&物理像素比5、真机调试6、viewport视口7、移动端技术选型8、移动端主流适配解决方案9、移动端特殊样式10、百分比布局&流失布局11、Flex布局优势12、盒子父级常见属性设置13、盒子子级常见属性设置14、携程网Flex移动端页面开发15、rem单位使用16、rem适配17、预处理器less18、media媒体查询19、淘宝flexible.js移动端适配20、cssrem插件使用21、cutterman二倍图三倍图切图22、移动端页面开发流程与规范23、京东移动端首页开发黑马程序员视频库网址：（海量热门编程视频、资料免费学习）学习路线图、学习大纲、各阶段知识点、资料网盘免费领取+QQ 1679806262。
第7章 网页制作高级功能
• •
• 图7-5 设置层的转换选项 在“转换层为表格”对话框中的一些设置的意义如下： ●最精确：采用精确的转换方式，为每一个层建立一个单元格，并创建所有附加单元格，以 保证单元格之间的距离。
• • • •
●最小：采用最小转换方式，去掉高度或宽度小于指定像素数目的空白单元格， 即当某些层的位置比较接近时，会自动使他们对齐。 ●使用透明GIF：可以选择是否使用透明GIF图片。 ●置于页面中央：选中此选项，可以使转换后的表格居中对齐。 3）使用默认设置，单击【确定】按钮。层将立即被转换为表格，如图7-6所示。
• •
图7-12 “行为”面板
图7-13 动作菜单
• • • • • • •
在为对象附加行为动作时，可以一次为每个事件关联多个动作，动作的执行按照在“行为” 面板的动作列表中的顺序执行。 【例7-1】利用行为给网页添加背景音乐 1）新建一个网页文档，保存为01.html，单击编辑窗口状态栏上的<body>标记，选中整个网 页。 2）打开行为面板，单击按钮，在菜单中选择“播放声音”。 3）在弹出的菜单中输入音乐文件的路径，单击“确定”，如图7-14所示。 4）把事件调整为onLoad(载入页面后)，如图7-15所示。 5）保存后，在浏览器中预览，页面加载成功后即可欣赏音乐。
•
另外，使时间轴动画在页面打开时自动播放，要勾选“自动播放”复选框，系统弹出如图7-48所示的提 示框，将一个行为附加到文档中，在页面读入后自动执行“播放时间轴”行为。
• •
图7-48 设置时间轴的“自动播放” 要使时间轴动画连续循环播放，应在“时间轴”面板中勾选“循环”复选框，系统弹出如图7-49所示的 提示框，将“转到时间轴帧”行为插入到动画最后一帧之后的“行为”通道中，在动画结束时自动执行 “转到时间轴帧”行为。
跨平台的移动Web开发实战单元4 商品信息展示网页设计
购物网站通常会以图文混排方式展示商 品外观和有用信息，吸引顾客选购商品。
本单元通过对购物网站的商品列表网页 和品牌展示网页设计的探析与训练，重点学 习HTML5中的列表标签、CSS的列表属性、 表格属性和定位属性等，学会在网页中合理 地使用列表、表格和CSS定位属性展示相关 信息，学会应用列表、表格及CSS定位设计 商品信息展示网页。
教学导航
教学目标 （1）熟悉HTML5中的列表标签 （2）熟悉CSS的列表属性、表格属性和定位属性 （3）学会在网页中合理地使用列表、表格和CSS定位属性展示相关信息 （4）学会应用列表、表格及CSS定位设计商品信息展示网页 购物网站 属性 商品信息展示网页 列表标签 列表属性 表格属性 定位
关键字
CSS表格属性可以改善表格的外观。
（1）表格边框 （2）折叠边框
（3）表格宽度和高度 （4）表格文本对齐 （5）表格内边距 （6）表格颜色
5．CSS定位属性（Positioning）
CSS定位（Positioning）属性允许对 元素进行定位。 CSS为定位和浮动提供了一些属性， 利用这些属性，可以建立列式布局，将 布局的一部分与另一部分重叠，还可以 完成多年来通常需要使用多个表格才能 完成的任务。
2．CSS列表属性（List）
CSS列表属性允许放置、改变列表 项标志，或者将图像作为列表项标志。 从某种意义上讲，不是描述性文本 的任何内容都可以认为是列表。
（1）列表类型 （2）列表项图像 （3）列表标志位置
3．HTML5的链接与导航标签
（1）<a>标签 （2）<nav>标签
4．CSS表格属性（Table）
（1）CSS定位机制
CSS有3种基本的定位机制：普通流、 浮动和绝对定位。 除非专门指定，否则所有框都在普通 流中定位。 也就是说，普通流中的元素的位置由 元素在(X)HTML中的位置决定。
《网页设计与制作》第7章课件
修 饰 属 性
border-color border-width border-style
四 个 方 向
border-top border-right border-bottom border-left
缩 写 形 式
border border-left …
边框
分别代表什么 含义？
空白间隙 文本框边框
演示示例：3行布局
使用盒子属性实现DIV+CSS布局2-2
实现步骤
2、编写每个DIV块的CSS控制定位
#container: 980px 、居中 #header： 136px;、背景 色#ccc
#main： 400px;、背景 色#fff
#footer： 100px;、背景 色#ccc
演示示例5：实现页面布局
padding-top: 5px
标准文档流
标准文档流组成
块级元素（block level）
<h1>…<h6>、<p>、<div>、列表
内联元素（inline）
<span>、<a>、<img/>、<strong>... 经验 内联标签可以包含于块级标签中，成为它的子元素， 而反过来则不成立
display属性
第七章
CSS样式表（三）
——布局、定位
提问
回顾
使用CSS设置背景图像时，通常会同时设置背景图像的
（ background-repeat）和（ background-position ）属性
使用font属性设置字体类型、风格、大小、粗细时的顺序
是什么？字体风格→粗细→大小→类型