资源简介

(共24张PPT)
网页的数据呈现
01.
02.
03.
目录
网页数据呈现的方式
CSS样式
网页数据的交互方式
04.
样式表的基本结构
1
网页数据呈现的方式
呈现方式
网站为了保证网页风格的整体性,在制作过程中往往要求文本、色彩等样式要协调统一，可以对网页数据各种呈现的效果进行样式的设置。
HTML定义了网页的内容结构，即网页呈现的文字、图文、视频等内容，用HTML设计网页外观样式时需要使用大量的标记，代码相对多而复杂，使用CSS可以有效地对网页中数据的布局、字体和背景等效果实现更精确的控制，同时可以将网页的结构和格式分离，实现解耦比如对网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件就可以更新所有页面的风格样式，既提高了更新和维护的效率，同时又缩减了网页的代码，提高了网页的浏览速度。
文字图像数据
视频数据
静态页面
01
静态页面是指在网页上显示固定内容的页面，如文本、图片、视频等。
03
静态页面的缺点是内容更新需要手动修改，无法实现动态交互。
02
静态页面的优点是加载速度快，易于维护和管理。
04
静态页面通常用于展示企业介绍、产品介绍、新闻资讯等固定内容。
动态页面
动态页面：使用JavaScript、CSS等编程语言实现页面元素的动态效果
01
优势：提高用户体验，增加页面互动性
02
常见动态效果：滚动、滑动、弹出、展开等
03
应用场景：网站首页、产品介绍、新闻列表等
04
响应式设计
响应式设计是一种网页设计方法，可以根据不同的设备屏幕尺寸和分辨率自动调整布局和样式。
01
响应式设计的优点包括：提高用户体验，降低开发成本，提高搜索引擎排名等。
02
响应式设计的实现方法包括：使用CSS媒体查询，使用JavaScript和CSS框架等。
03
响应式设计的挑战包括：处理不同设备的交互方式，处理不同设备的性能问题等。
04
2
CSS样式
认识CSS样式
CSS全称为层叠样式表 (Cascading Style Sheets)，也是一种标识语言，CSS样式可以方便地设置网页效果如网页中文字的字号、字体、颜色、位置以及图片的大小等，都涉及网页显示信息的样式。如图8-1和图8-2所示，是添加了样式表的网页效果的前后对比图。
图8-1 未加样式的HTML样式
图8-2 添加样式的HTML样式
添加样式代码
图8-2所示的网页是在标签之前添加了以下cSS字体、颜色等样式的代码。

知识链接
级联样式表级联样式表 (Cascading Style Sheet，简称CSS是由国际组织制定的一套延伸HTML样式的新标准，用来控制网页内容的外观格式，包括版面的精确位置、特定字体和格式，甚至图像、表格和图层等的位置和格式，称为“级联”的主要原因是支持应用多个样式表到同一张网页中。
4
网页数据的交互方式
鼠标操作
单击：选择对象或激活链接
双击：打开文件或网页
右键单击：显示上下文菜单
拖动：移动或复制对象
滚轮：滚动页面或缩放视图
鼠标悬停：显示提示信息或操作按钮
鼠标手势：快速执行特定操作，如前进、后退等
键盘操作
方向键：上下左右移动页面
空格键：滚动页面
Enter键：提交表单
Esc键：取消操作
Tab键：切换焦点
快捷键：如Ctrl+C、Ctrl+V等，实现快速操作
3
2
1
4
5
6
触摸操作
触摸屏：通过手指直接触摸屏幕进行操作
01
滑动操作：通过手指在屏幕上滑动进行翻页、滚动等操作
02
缩放操作：通过双指捏合或拉伸进行缩放
03
点击操作：通过手指点击屏幕进行选择、确认等操作
04
长按操作：通过长按屏幕进行更多选项或功能显示
05
拖拽操作：通过手指拖动屏幕上的元素进行移动或排序
06
谢谢

展开更多......

收起↑