web设计课件
合集下载
web程序设计第4章_页面设计PPT课件
格边框越粗
0
表格宽度，以相对于充满窗口的百分比计（如 60%）
表格宽度，以屏幕像素点数计
100%
每个表项内容与表格边框之间的距离，以像素点为单位 0
表格边框之间的距离，以像素点为单位
2
表格边框的颜色 表格的背景图像
#000000 无
表格的位置
left
返 回 14
表4-4 <tr>标记属性表
属性 取 值
•
以标记<input>定义的多种输入域，包括text，radio，checkbox，password，
hidden，button，submit和reset等。
•
以标记<textarea>定义的文本域。
•
以标记<select>和<option>定义的下拉列表框
返回
构件对象模型:COM
19
输入域
说明
text
构件对象模型:COM
返回
10
⑤ 列表标记和预定格式标记
列表标记是HTML的一个基本结构。有以下3种类型 的列表：
无序列表（Unordered list）
<ul>列表项</ul>
有序列表（Ordered list）
<ol>列表项</ol>
定义列表（Definition list）
<dl>列表项</dl>
构件对象模型:COM
1
整体 概述
一 请在这里输入您的主要叙述内容
二
请在这里输入您的主要 叙述内容
三 请在这里输入您的主要叙述内容
4.1 静态页面设计
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《Web程序设计基础》第一讲精品PPT课件
作室 • 故宫博物院 • 百威啤酒
6
3、网站的基本元素
通过以上网页的介绍和赏析，你能说出 网页有哪些基本元素构成？
网页中基本元素通常包括，文本、图片、超 级链接（文本超链接，图片超链接），动画 （gif、fireworks、flash）、表单 （用于 互动的，搜索引擎，电子邮件，论坛等）， 音频，视频（media play、realplay）。
采用Div+CSS、JS、AJAX等技术 –测试网页兼容性：不同的浏览器效果 –发布站点 上传使用远程ftp工具 –申请免费或付费主机空间
万网
13
6、动静态网站的特点和区别
• 什么是静态网站？ –静态网站就是没有采用任何程序开发的网站， 纯粹采用HTML语言编写，不要求懂太多网站制 作知识，使用一般的软件就可以制作网页了。 网页文件名是用html或htm结尾的，网页设计好 并上传到服务器之后，就不能对网站的内容进 行修改了，除非把网站文件下载到自己电脑上， 再用专业的网站制作软件编辑好上传，所以大 家可以理解为，静态网站就是无法在直接在网 络上更新内容的网站，就纯粹的几个制作好的 页面而已。
第一讲 网站概论
《Web程序设计基础》课程组 2010-09
目录
• 认识网站 • 优秀网站赏析 • 网站的基本元素 • 网站的布局结构 • 行业静态网站制作流程 • 动静态网站的区别和特点 • B/S、C/S结构
2
1、认识网站
问：你平时上的网站有哪些？
3
1、认识网站
• 门户型 –新浪、网易、搜狐等
–虽然说Div+CSS解决了大部分浏览器兼容性问 题，但是也有部分浏览器中的使用出现异常， 目前，Div+CSS还没有所有浏览器的统一兼容。
6
3、网站的基本元素
通过以上网页的介绍和赏析，你能说出 网页有哪些基本元素构成？
网页中基本元素通常包括，文本、图片、超 级链接（文本超链接，图片超链接），动画 （gif、fireworks、flash）、表单 （用于 互动的，搜索引擎，电子邮件，论坛等）， 音频，视频（media play、realplay）。
采用Div+CSS、JS、AJAX等技术 –测试网页兼容性：不同的浏览器效果 –发布站点 上传使用远程ftp工具 –申请免费或付费主机空间
万网
13
6、动静态网站的特点和区别
• 什么是静态网站？ –静态网站就是没有采用任何程序开发的网站， 纯粹采用HTML语言编写，不要求懂太多网站制 作知识，使用一般的软件就可以制作网页了。 网页文件名是用html或htm结尾的，网页设计好 并上传到服务器之后，就不能对网站的内容进 行修改了，除非把网站文件下载到自己电脑上， 再用专业的网站制作软件编辑好上传，所以大 家可以理解为，静态网站就是无法在直接在网 络上更新内容的网站，就纯粹的几个制作好的 页面而已。
第一讲 网站概论
《Web程序设计基础》课程组 2010-09
目录
• 认识网站 • 优秀网站赏析 • 网站的基本元素 • 网站的布局结构 • 行业静态网站制作流程 • 动静态网站的区别和特点 • B/S、C/S结构
2
1、认识网站
问：你平时上的网站有哪些？
3
1、认识网站
• 门户型 –新浪、网易、搜狐等
–虽然说Div+CSS解决了大部分浏览器兼容性问 题，但是也有部分浏览器中的使用出现异常， 目前，Div+CSS还没有所有浏览器的统一兼容。
《WEB程序设计》PPT课件
Web网页设计及编程语言
主讲 李雅红
目录
第1章 Web应用程序概述 第2章 HTML网页设计 第3章 VBScript脚本编程 第4章 ASP内建对象编程 第5章 Web与数据库集成 第6章 网上论坛设计 第7章 网上考试系统设计
2／241
第1章 Web应用程序概述
1.1 理解Web应用程序 1.2 理解ASP工作原理 1.3 配置ASP开发环境 1.4 设置Dreamweaver站点
具有更好的可扩展性与可定制性，6／数24据1 处理方面更是引入了许多新技
术。
Байду номын сангаас
1.1 理解Web应用程序
第1章目录
• 1.1.5 Web应用开发工具
• 1. 记事本
•
如果用记事本作为网页编辑器，则应当确保文件有一个正确的扩
展名。默认情况下记事本为文件设置的扩展名是.txt。因此，在记事
本中保存文件时，必须为文件指定一个适当的扩展名。
1.1 理解Web应用程序
第1章目录
• 1.1.4 Web应用开发技术
• 1. ASP
•
ASP（Active Server Pages）是Microsoft公司开发的动态网页
技术标准，主要与Microsoft的服务器产品IIS和PWS一起使用。ASP是
一种Web服务器端的脚本环境，可以用来创建动态Web页或Web应用程
（1）计算机。 （2）光纤、同轴电缆和双绞线等传输媒体。 （3）通信网卡：用于收发数据。 （4）集线器(Hub)：用来把多台计算机连在一起。 （5）交换机(Switch)：用来扩展带宽及连接多台计算机。 （6）路由器(或ATM交换机)：负责路径管理和网络交通的控制。 2）计算机网络中的软件 计算机网络中的软件主要分为5类。 （1）操作系统 （2）通信协议 （3）管理软件 （4）交换与路由软件 （5）应用软件 •
主讲 李雅红
目录
第1章 Web应用程序概述 第2章 HTML网页设计 第3章 VBScript脚本编程 第4章 ASP内建对象编程 第5章 Web与数据库集成 第6章 网上论坛设计 第7章 网上考试系统设计
2／241
第1章 Web应用程序概述
1.1 理解Web应用程序 1.2 理解ASP工作原理 1.3 配置ASP开发环境 1.4 设置Dreamweaver站点
具有更好的可扩展性与可定制性，6／数24据1 处理方面更是引入了许多新技
术。
Байду номын сангаас
1.1 理解Web应用程序
第1章目录
• 1.1.5 Web应用开发工具
• 1. 记事本
•
如果用记事本作为网页编辑器，则应当确保文件有一个正确的扩
展名。默认情况下记事本为文件设置的扩展名是.txt。因此，在记事
本中保存文件时，必须为文件指定一个适当的扩展名。
1.1 理解Web应用程序
第1章目录
• 1.1.4 Web应用开发技术
• 1. ASP
•
ASP（Active Server Pages）是Microsoft公司开发的动态网页
技术标准，主要与Microsoft的服务器产品IIS和PWS一起使用。ASP是
一种Web服务器端的脚本环境，可以用来创建动态Web页或Web应用程
（1）计算机。 （2）光纤、同轴电缆和双绞线等传输媒体。 （3）通信网卡：用于收发数据。 （4）集线器(Hub)：用来把多台计算机连在一起。 （5）交换机(Switch)：用来扩展带宽及连接多台计算机。 （6）路由器(或ATM交换机)：负责路径管理和网络交通的控制。 2）计算机网络中的软件 计算机网络中的软件主要分为5类。 （1）操作系统 （2）通信协议 （3）管理软件 （4）交换与路由软件 （5）应用软件 •
第1章Web开发相关技术精品PPT课件
课堂实践2
课堂练习题
1．Web服务是
。
2．IIS的全称为
。
3．什么是网络数据库技术？
2020/10/29 A S P . N E T 2 . 0 程 序 设 计 案 例 教 程
任务3--ASP/PHP /JSP与简介
任务目标 了解各种Web技术，理解各种技术的特点， 明白各种技术的区别。
2020/10/29 A S P . N E T 2 . 0题
1．举例说明什么是静态网页？静态网页有哪些特点？
2．可以与用户相互交互的是
网页。
3．举例说明静态网页与动态网页有什么区别？
4．打开浏览器，在地址栏中输入，进入网易公司126的免费邮箱页面，
任务1--静态网页与动态网页
静态网页的定义
静态网页是指没有后台数据库、不含程序、不可交互的网页。你编写 网页时选择的内容是什么它显示的就是什么，不会有任何改变。静态 网页更新起来比较麻烦，适用于一般更新较少的展示型网站。
静态网页的特点
静态网页没有数据库的支持，在网站制作和维护方面工作量较大， 因此当网站信息量很大时完全依靠静态网页制作方式比较困难； 网页内容一经发布到网站服务器上，无论是否有用户访问，每个静 态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实 实在在保存在服务器上的文件，每个网页都是一个独立的文件； 静态网页每个网页都有一个固定的URL，且网页URL 以.htm、.html、.shtml等常见形式为后缀； 静态网页的内容相对稳定，因此容易被搜索引擎检索； 静态网页的交互性较差，在功能方面有较大的限制。
Script（脚本）与CGI（公用网关接口）的结合体，它没有提供自己专 门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应 用程序
《Web全栈开发课程设计课件》
掌握ECMAScript6（ES6）
了解ECMAScript6（ES6）的新特性，如箭头函数、模板字面量、解构赋值和类等，并应用到实际项目中。
前端框架React
学习使用React框架构建高效、可维护的用户界面，并掌握组件化开发和状态管理。
前端框架Vue
学习使用Vue框架构建现代化的Web应用程序，掌握Vue组件、路由和状态管 理。
前端自动化构建工具
了解常用的前端构建工具，如Webpack和Gulp，以提高开发效率和项目部署。
Git与Github
学习使用Git版本控制工具和Github代码托管平台，提高团队协作和项目管理 效率。
Node.js与Express
掌握使用Node.js和Express框架开发服务器端应用程序，实现RESTful API和数据 交互。
Web全栈开发课程设计课件
探索Web全栈开发的精髓，从前端到后端，从基础到高级，让你成为一名全 面发展的Web开发者。
课程介绍
本课程旨在全面介绍Web全栈开发的各个方面，包括前端开发基础、HTML5与CSS3、JavaScript基础和高级编程 技巧等。
前端开发基础
学习前端开发的基础知识，如HTML标记语言、CSS样式表以及基本的Web开发工具。
HTML5与CSS3
深入了解HTML5和CSS3的最新特性与用法，掌握响应式设计和浏览器兼容性。
JavaScript基础
学习JavaScript的基本语法和概念，掌握DOM操作、事件处理和表单验证等技 巧。
JavaScript高级编程技巧
进一步提升JavaScript编程能力，学习闭包、原型继承、异步编程和模块化开 发等高级技巧。
使用WebRTC实现视频通话
第一章Web程序设计基础精品PPT课件
-也有些程序和文件是在服务器端执行的。
1 网站的运行
▪ 前台与后台的概念 -前台指客户端浏览器，后台指服务器环境 -静态网站与动态网站——根本区别在于是否应用交互技术
动静用 代 站 式 W静 在态态e户码。，A态b网网S只修用而网服P站站可改户程站务、：：浏来可序执器P仅通H览完以代行，通过P，成将码过而、过C不）信则程AGJHSS可息用IT、PPM反 反 来环A、LS馈 馈 描境、PPH述信 ，下C、PS处息 也，P、SH理。 可H、JPST逻（ 在j、sMP辑其 客等、JLS代。其 户技APS码普内 端术、P主通容 对实..NN要的的 网现EETT负更 站的H页等责T新进多面技M描必行个需L术述页须更页要（1（度2行B实网..信/面采改面互在S从从）程附现站中息只用和构动服直技序加和的又的务依工维成观术的的动交分器显角实动赖具护的态语互为端度现作示于对。网网言静网执）角样源站站态：， 引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML 代码中，然后一起发送给浏览器。ASP 、PHP、JSP三者都是面向 Web服务器的技术，客户端浏览器不需要任何附加的软件支持。 动态网站执行过程
▪ ASP/PHP/JSP运行环境 ▪ ASP是Microsoft开发的动态网页语言，也继承了微软产品的一贯传
统，只能执行于微软的服务器产品,IIS(Internet Information Server) (windows NT)和PWS(Personal Web Server)(windows 98)上。Unix 下也有ChiliSoft的组件来支持ASP，但是ASP本身的功能有限，必须 通过ASP＋COM的群组合来扩充，Unix下的COM实现起来非常困难。
本章内容
▪ 1.两种设计模式 ▪ 2.动、静态网页联系却别 ▪ 3.主流的动态网页设计技术 ▪ 4.html介绍
1 网站的运行
▪ 前台与后台的概念 -前台指客户端浏览器，后台指服务器环境 -静态网站与动态网站——根本区别在于是否应用交互技术
动静用 代 站 式 W静 在态态e户码。，A态b网网S只修用而网服P站站可改户程站务、：：浏来可序执器P仅通H览完以代行，通过P，成将码过而、过C不）信则程AGJHSS可息用IT、PPM反 反 来环A、LS馈 馈 描境、PPH述信 ，下C、PS处息 也，P、SH理。 可H、JPST逻（ 在j、sMP辑其 客等、JLS代。其 户技APS码普内 端术、P主通容 对实..NN要的的 网现EETT负更 站的H页等责T新进多面技M描必行个需L术述页须更页要（1（度2行B实网..信/面采改面互在S从从）程附现站中息只用和构动服直技序加和的又的务依工维成观术的的动交分器显角实动赖具护的态语互为端度现作示于对。网网言静网执）角样源站站态：， 引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML 代码中，然后一起发送给浏览器。ASP 、PHP、JSP三者都是面向 Web服务器的技术，客户端浏览器不需要任何附加的软件支持。 动态网站执行过程
▪ ASP/PHP/JSP运行环境 ▪ ASP是Microsoft开发的动态网页语言，也继承了微软产品的一贯传
统，只能执行于微软的服务器产品,IIS(Internet Information Server) (windows NT)和PWS(Personal Web Server)(windows 98)上。Unix 下也有ChiliSoft的组件来支持ASP，但是ASP本身的功能有限，必须 通过ASP＋COM的群组合来扩充，Unix下的COM实现起来非常困难。
本章内容
▪ 1.两种设计模式 ▪ 2.动、静态网页联系却别 ▪ 3.主流的动态网页设计技术 ▪ 4.html介绍
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
属性值：left|right|none|inherit
默认值：none 适用对象：所有元素 是否可继承：否
例15-1 15-2 15-3
总结
浮动元素像水流中的岛
上例中，图像从普通流的位置中移除，同时继续影响周
围内容；接下来的段落文本重新流动来给浮动的img元 素提供空间。
浮动元素在包含元素的内容区域
第十七章 CSS技术
表格的样式属性
改变列表的圆点和编号
将列表转变为导航栏
图像替换
CSS滑动技术
第十八章 web图像基础
web图像大体可分为两大类型：一是照片类；二是
绘画类。
照片类图像是指由数码相机、扫描仪等扫描照片得 到的图像。 绘画类插图一般来自于手工绘画或软件制作，如常 见的卡通图画、装饰图案、文字图形以及用图形图
绝对定位元素总是表现为块级元素，同时允许给元素
设置宽度。
一旦定位了一个元素，它将变为它包含的所有元
素的新容器块
例15-15
指定position属性
像素计量值
正偏移值推动定位元素盒子远离指定的边缘，并向容器 块的中心移动。
例15-16
通过给四个方向设置偏移值，间接的设置定位p元素的 尺寸，如果也给p元素指定width和其他盒子属性，如果
置。
15.1 普通流
CSS 布局模型中，文本元素依源码中的顺序从
上到下排列，然后从左到右；
块元素一个累一个，填满浏览器窗口或其他窗口
元素的所有可用宽度；
内嵌元素和文本字符一行接一行的填满块元素。 当窗口或窗口元素重置大小的时候，块元素随着 新宽度增大或缩小，而内嵌内容重新流动来适应 宽度。
abcdefghijklmnopqrstuvwxyz <p>
16.4 网页布局模版
本章提供下列模版和技术
使用浮动元素的多栏布局（两栏和三栏）
使用定位元素的多栏布局（两栏和三栏，有页脚和无 页脚） 居中的固定宽度网页
16.4.1 使用浮动元素的多栏布局
创建栏的最流行的方法是将一个元素浮动到一边，
让其他部分的内容环绕它；
宽的空白边用来保持浮动栏周围的区域清晰。
开始。
Clear属性
属性值：left|right|both|none|inherit
默认值：none
应用对象：仅块级元素 是否可继承：否
例15-9 15-10
15.3 定位基础
定位的类型
属性名：position
属性值：static|relative|absolute|fixed|inherit 默认值：static 适用对象：所有元素 是否可继承：否
15.5 绝对定位
绝对定位的元素从文档流中完整的移除，并且相
对于容器元素定位；
它所占据的空间将被关闭；
它对周围元素的布局没有任何影响。
例15-12
偏移值把em元素定位在浏览器窗口左上角下方30px， 右方60px。
容器块
元素盒子的位置和尺寸有时相对于某个称为元素的容 器块的矩形计算； 判断元素容器块的规则
是否可继承：否
这些值提供了各个元素与相应边距离的偏移属性
15.4 相对定位
相对定位是相对于元素在流中的原始位置移动； 它将保留元素在普通流中占据的空间，并继续影 响周围内容的布局。 例15-11
Top偏移属性将元素从原来位置下移30px，left属性将 元素从原来位置右移60px
文档流中的原始空间被保留 发生重叠 通常用于为绝对定位元素创建定位上下文。
素值；各栏元素的宽度也用像素值表示。
16.3 弹性布局
弹性布局随着文本尺寸扩张或收缩。
优势
一致的布局体验。 制行长。
劣势
的其他部分缩放。 宽度可能超过浏览器窗口的 宽度。
允许文本尺寸适当变动，提供 图像不适合随着文本和布局 比液态和固定布局更严密地控 使用最大文本尺寸时布局的
如何创建弹性布局
通过用em单位指定宽度，来创建弹性布局。
Position属性指示元素将被定位，并指定将使用
的定位方法
Static
普通的定位方案，元素将如同在普通文档流中一样定位。
Relative
相对定位将盒子相对于它在流中的原始位置移动； 它将保留元素在普通流中占据的空间。
Absolute
绝对定位的元素从文档流中完整的移除，并且相对于容
器元素定位；
它所占据的空间将被关闭； 它对周围元素的布局没有任何影响。
PNG
PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的 优点，存贮形式丰富，兼有GIF和JPG的色彩模式； 另一个特点能把图像文件压缩到极限以利于网络传输，但又 能保留所有与图像品质有关的信息，因为PNG是采用无损压 缩方式来减少文件的大小，这一点与牺牲图像品质以换取高 压缩率的JPG有所不同； 第三个特点是显示速度很快，只需下载1/64的图像信息就可 以显示出低分辨率的预览图像；
abcdefghijklmnopqrstu vwxyz <p>
<h1> <h1> <p> <p>
<p>
<p>
15.2 浮动
float属性尽可能远的向左或向右移动元素，允许
后面的内容环绕它。
浮动是现代基于CSS网页设计的主要工具之一，
用于创建多列布局、列表中的导航工具条和无表
格的类表格的排列。
float
GIF
GIF是早期Web浏览器可显示的第一种图形文件格式。任何图像
类型都可以存为GIF文件；
GIF还是所有图形浏览器（无论何种版本）都支持的唯一一种 图形文件。
压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了
广泛的应用。 最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a） ，后来随着技术发展，可以同时存储若干幅静止图象进而形成 连续的动画，使之成为当时支持2D动画为数不多的格式之一 （称为GIF89a），而在GIF89a图像中可指定透明区域，使图像 具有非同一般的显示效果，这更使GIF风光十足。
像软件处理加工过的照片等（当然它们也可以绘制
出与照片效果类似的3D 图像）。
图像的格式
计算机的数字图形图像的储存、交换技术上，图形
图像的格式就显得十分重要了。没有统一的格式，
图形图像就不能方便地在其他计算机上显示，网络 上的图形图像更是受到网络传输速度的限制。 web领域，只有三种选择：GIF、JPEG、PNG
浮动元素的优势：可以轻易地在网页的分栏区域
下面摆放网页元素； 缺点：依赖于元素在源码中的出现顺序。 例16-5 16-6
16.4.2 使用绝对定位布局
优势：源码文档中的顺序不是那么重要，因为元
素盒子可以摆放在任何位置；
劣势：要承担元素重叠和内容模糊的风险。
在栏下面要慎重地应用全宽元素，因为定位栏太
Fixed
固定定位的特性是元素将呆在窗口的一个位置；
指定position属性
确定了定位方法后，指定四个偏移属性
属性：top、right、bottom、left
属性值：长度计量值|百分比值|auto|inherit
默认值：auto
适用对象：可定为元素（元素的position属性为relative， absolute或fixed）
优势
布局可预计。 对行长提供更好的控制 将被隐藏。
劣势
如果浏览器窗口比网页窄，右边的内容 如果用户调整字体尺寸，文本元素仍会 重新流动，所以不会保证布局完全保持 不变。 文本字体尺寸非常大时，行长将会短得 难用。
如何创建固定布局
通过用像素单位指定width属性值，来创建固定宽度布局。
通常，将整个网页内容放到1个div元素中，并设置具体像
适用对象：所有元素
是否可继承：否
属性名：margin
属性值：长度计量值|百分比值|auto|inherit 默认值：auto
适用对象：所有元素
是否可继承：否
例14-8
空白边行为
重叠空白边
上下空白边重叠时，不是简单的重叠，而是应用，见例 14-8 上下空白边不重叠的只可以是浮动或绝对位置的元素。
内嵌元素的空白边
JPEG
JPEG是指JFIF格式文件所使用的压缩算法，通常， 它亦被称为“JPEG文件”。 JPEG文件的扩展名为.jpg或.jpeg;
其压缩技术十分先进，它用有损压缩方式去除冗余
的图像和彩色数据，获取得极高的压缩率的同时能 展现十分丰富生动的图像，换句话说，就是可以用 最少的磁盘空间得到较好的图像质量。
长，就会重叠。 例16-7 16-8 16-9
16.4.3 固定宽度网页居中
在CSS中，使固定宽度元素居中的正确方法：指
定包含整个网页内容的div元素的宽度，然后设
置左右边的margin属性为auto值； 另一个方法：用负的margin属性值来有效地将网 页中窗口块居中对齐。 例16-10 16-11
定位盒子的属性值与偏移量与容器块中的可用空间不匹
配，就可能引发冲突。 通常，指定width和一两个偏移属性，其他的由浏览器
自动来计算。
百分比值
例15-17
堆积顺序
使用z-index属性来改变堆积顺序 属性名称：z-index
属性值： （数字）|auto|inherit
默认值：auto
适用对象：可定为元素 是否可继承：否
网页中的网页区域和栏允许变宽或变窄，从而填
充浏览器窗口中的可用空间。
不要企图控制内容宽度或换行；
文本允许按需要重新流动。
优势
不需要为具体的浏览器分辨率而 设计。 笨拙的空白空间。 液态网页与媒介的灵魂和种类保
劣势
在大的浏览器中，行长太长且 不适于阅读。 浏览器中元素可能太开阔或太 拥挤。
默认值：none 适用对象：所有元素 是否可继承：否
例15-1 15-2 15-3
总结
浮动元素像水流中的岛
上例中，图像从普通流的位置中移除，同时继续影响周
围内容；接下来的段落文本重新流动来给浮动的img元 素提供空间。
浮动元素在包含元素的内容区域
第十七章 CSS技术
表格的样式属性
改变列表的圆点和编号
将列表转变为导航栏
图像替换
CSS滑动技术
第十八章 web图像基础
web图像大体可分为两大类型：一是照片类；二是
绘画类。
照片类图像是指由数码相机、扫描仪等扫描照片得 到的图像。 绘画类插图一般来自于手工绘画或软件制作，如常 见的卡通图画、装饰图案、文字图形以及用图形图
绝对定位元素总是表现为块级元素，同时允许给元素
设置宽度。
一旦定位了一个元素，它将变为它包含的所有元
素的新容器块
例15-15
指定position属性
像素计量值
正偏移值推动定位元素盒子远离指定的边缘，并向容器 块的中心移动。
例15-16
通过给四个方向设置偏移值，间接的设置定位p元素的 尺寸，如果也给p元素指定width和其他盒子属性，如果
置。
15.1 普通流
CSS 布局模型中，文本元素依源码中的顺序从
上到下排列，然后从左到右；
块元素一个累一个，填满浏览器窗口或其他窗口
元素的所有可用宽度；
内嵌元素和文本字符一行接一行的填满块元素。 当窗口或窗口元素重置大小的时候，块元素随着 新宽度增大或缩小，而内嵌内容重新流动来适应 宽度。
abcdefghijklmnopqrstuvwxyz <p>
16.4 网页布局模版
本章提供下列模版和技术
使用浮动元素的多栏布局（两栏和三栏）
使用定位元素的多栏布局（两栏和三栏，有页脚和无 页脚） 居中的固定宽度网页
16.4.1 使用浮动元素的多栏布局
创建栏的最流行的方法是将一个元素浮动到一边，
让其他部分的内容环绕它；
宽的空白边用来保持浮动栏周围的区域清晰。
开始。
Clear属性
属性值：left|right|both|none|inherit
默认值：none
应用对象：仅块级元素 是否可继承：否
例15-9 15-10
15.3 定位基础
定位的类型
属性名：position
属性值：static|relative|absolute|fixed|inherit 默认值：static 适用对象：所有元素 是否可继承：否
15.5 绝对定位
绝对定位的元素从文档流中完整的移除，并且相
对于容器元素定位；
它所占据的空间将被关闭；
它对周围元素的布局没有任何影响。
例15-12
偏移值把em元素定位在浏览器窗口左上角下方30px， 右方60px。
容器块
元素盒子的位置和尺寸有时相对于某个称为元素的容 器块的矩形计算； 判断元素容器块的规则
是否可继承：否
这些值提供了各个元素与相应边距离的偏移属性
15.4 相对定位
相对定位是相对于元素在流中的原始位置移动； 它将保留元素在普通流中占据的空间，并继续影 响周围内容的布局。 例15-11
Top偏移属性将元素从原来位置下移30px，left属性将 元素从原来位置右移60px
文档流中的原始空间被保留 发生重叠 通常用于为绝对定位元素创建定位上下文。
素值；各栏元素的宽度也用像素值表示。
16.3 弹性布局
弹性布局随着文本尺寸扩张或收缩。
优势
一致的布局体验。 制行长。
劣势
的其他部分缩放。 宽度可能超过浏览器窗口的 宽度。
允许文本尺寸适当变动，提供 图像不适合随着文本和布局 比液态和固定布局更严密地控 使用最大文本尺寸时布局的
如何创建弹性布局
通过用em单位指定宽度，来创建弹性布局。
Position属性指示元素将被定位，并指定将使用
的定位方法
Static
普通的定位方案，元素将如同在普通文档流中一样定位。
Relative
相对定位将盒子相对于它在流中的原始位置移动； 它将保留元素在普通流中占据的空间。
Absolute
绝对定位的元素从文档流中完整的移除，并且相对于容
器元素定位；
它所占据的空间将被关闭； 它对周围元素的布局没有任何影响。
PNG
PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的 优点，存贮形式丰富，兼有GIF和JPG的色彩模式； 另一个特点能把图像文件压缩到极限以利于网络传输，但又 能保留所有与图像品质有关的信息，因为PNG是采用无损压 缩方式来减少文件的大小，这一点与牺牲图像品质以换取高 压缩率的JPG有所不同； 第三个特点是显示速度很快，只需下载1/64的图像信息就可 以显示出低分辨率的预览图像；
abcdefghijklmnopqrstu vwxyz <p>
<h1> <h1> <p> <p>
<p>
<p>
15.2 浮动
float属性尽可能远的向左或向右移动元素，允许
后面的内容环绕它。
浮动是现代基于CSS网页设计的主要工具之一，
用于创建多列布局、列表中的导航工具条和无表
格的类表格的排列。
float
GIF
GIF是早期Web浏览器可显示的第一种图形文件格式。任何图像
类型都可以存为GIF文件；
GIF还是所有图形浏览器（无论何种版本）都支持的唯一一种 图形文件。
压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了
广泛的应用。 最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a） ，后来随着技术发展，可以同时存储若干幅静止图象进而形成 连续的动画，使之成为当时支持2D动画为数不多的格式之一 （称为GIF89a），而在GIF89a图像中可指定透明区域，使图像 具有非同一般的显示效果，这更使GIF风光十足。
像软件处理加工过的照片等（当然它们也可以绘制
出与照片效果类似的3D 图像）。
图像的格式
计算机的数字图形图像的储存、交换技术上，图形
图像的格式就显得十分重要了。没有统一的格式，
图形图像就不能方便地在其他计算机上显示，网络 上的图形图像更是受到网络传输速度的限制。 web领域，只有三种选择：GIF、JPEG、PNG
浮动元素的优势：可以轻易地在网页的分栏区域
下面摆放网页元素； 缺点：依赖于元素在源码中的出现顺序。 例16-5 16-6
16.4.2 使用绝对定位布局
优势：源码文档中的顺序不是那么重要，因为元
素盒子可以摆放在任何位置；
劣势：要承担元素重叠和内容模糊的风险。
在栏下面要慎重地应用全宽元素，因为定位栏太
Fixed
固定定位的特性是元素将呆在窗口的一个位置；
指定position属性
确定了定位方法后，指定四个偏移属性
属性：top、right、bottom、left
属性值：长度计量值|百分比值|auto|inherit
默认值：auto
适用对象：可定为元素（元素的position属性为relative， absolute或fixed）
优势
布局可预计。 对行长提供更好的控制 将被隐藏。
劣势
如果浏览器窗口比网页窄，右边的内容 如果用户调整字体尺寸，文本元素仍会 重新流动，所以不会保证布局完全保持 不变。 文本字体尺寸非常大时，行长将会短得 难用。
如何创建固定布局
通过用像素单位指定width属性值，来创建固定宽度布局。
通常，将整个网页内容放到1个div元素中，并设置具体像
适用对象：所有元素
是否可继承：否
属性名：margin
属性值：长度计量值|百分比值|auto|inherit 默认值：auto
适用对象：所有元素
是否可继承：否
例14-8
空白边行为
重叠空白边
上下空白边重叠时，不是简单的重叠，而是应用，见例 14-8 上下空白边不重叠的只可以是浮动或绝对位置的元素。
内嵌元素的空白边
JPEG
JPEG是指JFIF格式文件所使用的压缩算法，通常， 它亦被称为“JPEG文件”。 JPEG文件的扩展名为.jpg或.jpeg;
其压缩技术十分先进，它用有损压缩方式去除冗余
的图像和彩色数据，获取得极高的压缩率的同时能 展现十分丰富生动的图像，换句话说，就是可以用 最少的磁盘空间得到较好的图像质量。
长，就会重叠。 例16-7 16-8 16-9
16.4.3 固定宽度网页居中
在CSS中，使固定宽度元素居中的正确方法：指
定包含整个网页内容的div元素的宽度，然后设
置左右边的margin属性为auto值； 另一个方法：用负的margin属性值来有效地将网 页中窗口块居中对齐。 例16-10 16-11
定位盒子的属性值与偏移量与容器块中的可用空间不匹
配，就可能引发冲突。 通常，指定width和一两个偏移属性，其他的由浏览器
自动来计算。
百分比值
例15-17
堆积顺序
使用z-index属性来改变堆积顺序 属性名称：z-index
属性值： （数字）|auto|inherit
默认值：auto
适用对象：可定为元素 是否可继承：否
网页中的网页区域和栏允许变宽或变窄，从而填
充浏览器窗口中的可用空间。
不要企图控制内容宽度或换行；
文本允许按需要重新流动。
优势
不需要为具体的浏览器分辨率而 设计。 笨拙的空白空间。 液态网页与媒介的灵魂和种类保
劣势
在大的浏览器中，行长太长且 不适于阅读。 浏览器中元素可能太开阔或太 拥挤。