Web标准 CSS+DIV网页布局与美化
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7、margin-bottom:到父容器下边框的距离。
• 建立一网站主页，用DIV+CSS的样式来实 现，要求网站主页由三部分组成：头部、 主体及尾部。
PPT由刘鑫整理
结构 对应的标准语言 HTML或XML 表现 对应的标准语言 CSS 行为 对应的标准语言 对象模型、ECMAScript
内容：
页面实际要传达的真正信息，包括数据、文本、 文档或图片。不包括辅助信息，如导航菜单、装饰 图片等。
结构：
就是对网页内容进行整理和分类。
表现：
对结构化的信息进行样式上的 控制，如对颜色、大小、背景等外 观进行控制，所有这些用来改变内 容外观的，称为“表现”。
CSS+DIV网页布局与美化
第一章 Web标准
模块一：Web标准 模块二：CSS样式与盒模型 模块三：CSS+DIV布局设计 模块四：CSS美化网页元素 模块五：网站设计实例
什么是Web标准 Web标准带wk.baidu.com的好处 符合Web标准的设计规则
问题
表格
打开所有页面逐一进行修改
DIV+CSS
修改外部样式表文件(.CSS)
为黑色。
http://validator.w3.org
CSS常用属性
1、Height:设置DIV的高度。 2、Width:设置DIV的宽度. 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。
说明：margin:后面跟有四个距离分别为到父容器的上-右 -下-左边的距离；可以看例子中的白色DIV到黑色DIV的边 距离效果。 还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。
数据的组织与显示； 会产生更多的冗余代码； 表格嵌套使浏览器解析缓慢； 网页表现层与结构层混在一起，代码维护、更新麻烦。
大大缩减页面代码，提高浏览速度； 缩短改版时间； 容易被搜索引擎搜索到； 样式定义方便； 表现和内容分离 遵循Web标准化设计。
Web标准是由W3C(World Wide Web Consortium， 万维网联盟)和其他标准组织制定的一套规范集合, Web标准不是某一个标准，而是一系列标准的集合。
采用遵循Web标准的编辑工具； 所有HTML文档都必须声明它们所使用的编码语言； 用小写字母书写所有的标签； 为图片添加alt属性； 给所有属性值加引号； 关闭所有的标签。 用id属性代替name属性。
✓ CSS的定义是由三个部分构成: ✓ 选择符(selector)，属性(properties)和属性的取值(value)。 ✓ ccs 语法: selector {property: value} (选择符 {属性:值}) ✓ 例子:body {color: black}，此例的效果是使页面中的文字
行为：
是对内容的交互及操作效果，如JavaScript， 就是动态控制网页信息的结构和显示，实现网页的 智能交互。
文件下载与页面显示速度快； 内容能被更广泛的设备所访问； 用户能够通过样式定制自己的表现界面； 所有页面都能提供适于打印的版本。
更少的代码和组件，容易维护； 带宽要求降低； 更容易被搜索引擎搜索到； 改版方便，不需要变动页面内容。
• 建立一网站主页，用DIV+CSS的样式来实 现，要求网站主页由三部分组成：头部、 主体及尾部。
PPT由刘鑫整理
结构 对应的标准语言 HTML或XML 表现 对应的标准语言 CSS 行为 对应的标准语言 对象模型、ECMAScript
内容：
页面实际要传达的真正信息，包括数据、文本、 文档或图片。不包括辅助信息，如导航菜单、装饰 图片等。
结构：
就是对网页内容进行整理和分类。
表现：
对结构化的信息进行样式上的 控制，如对颜色、大小、背景等外 观进行控制，所有这些用来改变内 容外观的，称为“表现”。
CSS+DIV网页布局与美化
第一章 Web标准
模块一：Web标准 模块二：CSS样式与盒模型 模块三：CSS+DIV布局设计 模块四：CSS美化网页元素 模块五：网站设计实例
什么是Web标准 Web标准带wk.baidu.com的好处 符合Web标准的设计规则
问题
表格
打开所有页面逐一进行修改
DIV+CSS
修改外部样式表文件(.CSS)
为黑色。
http://validator.w3.org
CSS常用属性
1、Height:设置DIV的高度。 2、Width:设置DIV的宽度. 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。
说明：margin:后面跟有四个距离分别为到父容器的上-右 -下-左边的距离；可以看例子中的白色DIV到黑色DIV的边 距离效果。 还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。
数据的组织与显示； 会产生更多的冗余代码； 表格嵌套使浏览器解析缓慢； 网页表现层与结构层混在一起，代码维护、更新麻烦。
大大缩减页面代码，提高浏览速度； 缩短改版时间； 容易被搜索引擎搜索到； 样式定义方便； 表现和内容分离 遵循Web标准化设计。
Web标准是由W3C(World Wide Web Consortium， 万维网联盟)和其他标准组织制定的一套规范集合, Web标准不是某一个标准，而是一系列标准的集合。
采用遵循Web标准的编辑工具； 所有HTML文档都必须声明它们所使用的编码语言； 用小写字母书写所有的标签； 为图片添加alt属性； 给所有属性值加引号； 关闭所有的标签。 用id属性代替name属性。
✓ CSS的定义是由三个部分构成: ✓ 选择符(selector)，属性(properties)和属性的取值(value)。 ✓ ccs 语法: selector {property: value} (选择符 {属性:值}) ✓ 例子:body {color: black}，此例的效果是使页面中的文字
行为：
是对内容的交互及操作效果，如JavaScript， 就是动态控制网页信息的结构和显示，实现网页的 智能交互。
文件下载与页面显示速度快； 内容能被更广泛的设备所访问； 用户能够通过样式定制自己的表现界面； 所有页面都能提供适于打印的版本。
更少的代码和组件，容易维护； 带宽要求降低； 更容易被搜索引擎搜索到； 改版方便，不需要变动页面内容。