网站设计 eb Design06.pptVIP

东南大学计算中心 网站设计 Web Design 指导教师：丁彧 E-mail：dingyu@seu.edu.cn 第六章 XHTML与CSS入门 本章将介绍XHTML语言、CSS样式的基本知识及使用CSS控制网页外观的基本方法。 目 录 XHTML简介 编辑XHTML代码 认识CSS 创建CSS样式 CSS样式的属性 应用CSS样式 6.1 XHTML简介 6.1 XHTML简介 适度掌握一些XHTML语言的知识是非常有益的 有利于提高网页制作效率和优化网页代码。 有利于网页排错 。 有利于快速提高自己的网页制作水平 6.1 XHTML简介 XHTML的基本结构 6.1 XHTML简介 XHTML标签的特点 元素标签必须成对出现，空标签如br应写成br/ 标签名必须小写 标签内可以包含一些属性，标签名字 属性1 属性2 属性3 … ，属性无先后顺序 标签元素必须正确嵌套 附：常用html标签及其意义列表 附：常用html标签及其意义列表 附：常用html标签及其意义列表 6.2 编辑XHTML代码 使用编码工具栏迅速插入代码 编码工具栏位于代码视图中文档工具栏的左侧，使用它可以快速而方便地插入代码。 6.2 编辑XHTML代码 使用快速标签编辑器 快速标签编辑器使我们无需退出“设计”视图就能够快速检查并编辑XHTML标签和属性 6.2 编辑XHTML代码 在代码视图中编辑 利用代码提示功能，可以方便地编辑HTML代码 6.3 认识CSS 6.3 认识CSS CSS样式可以实现的功能 控制网页中文本的字体、颜色、大小、间距、风格及位置 为网页元素设置各种效果的边框 为网页元素设置背景颜色、背景图片及平铺方式 精确控制元素的位置，使元素可以在网页中浮动 与脚本语言相结合，使网页中的元素产生各种动态效果 6.3 认识CSS CSS样式的构成 CSS样式定义由两部分组成：选择器和声明，其中，选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。 6.3 认识CSS CSS样式的类型 6.3 认识CSS CSS添加到HTML文档的方法 6.4 创建CSS样式 6.5 CSS样式的属性 类型 主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果等 6.5 CSS样式的属性 背景 主要用于设置背景颜色或背景图像。 6.5 CSS样式的属性 区块 用于控制网页元素的间距、对齐方式等 6.5 CSS样式的属性 方框 CSS将网页中所有块元素都看作是包含在方框中的 6.5 CSS样式的属性 边框 用来定义元素周围边框的设置，如边框宽度、颜色和样式。 6.5 CSS样式的属性 列表 用来为列表标签定义列表设置（如项目符号外观，自定义图像和位置）。 6.5 CSS样式的属性 定位 用于设置选定对象在页面上的定位方式。 6.5 CSS样式的属性 扩展 6.6 应用CSS样式 通过属性面板 选中要应用CSS样式的内容，在属性面板的样式下拉列表中选择已经创建好的样式。 6.6 应用CSS样式 通过菜单〖文本〗〖CSS样式〗 选中要应用CSS样式的内容，在〖文本〗〖CSS样式〗中选择已经创建好的样式。 6.6 应用CSS样式 附加样式表 打开“CSS样式”面板，然后单击“附加样式表”按钮，将弹出“链接外部样式表”对话框。 6.6 应用CSS样式 删除和修改样式 外部链接样式 内部定义样式 * * * * * XHTML是Extensible HyperText Markup Language（可扩展超文本标记语言）的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。 XHTML语言的核心是标签。我们在浏览网页时看到的文字、图像、动画等在XHTML文档中都是用标签来描述的。一个完整的XHTML文档由html标签开始并由/html标签结束，所有的HTML代码都应写在html标签与/html标签之间。 ＣＳＳ样式表 XHTML头 XHTML体 完整的ＨＴＭＬ文档 emstrong这是一段粗体加斜体的文本/strong/em 头部标签 主体标签 主体标签 最近的代码片断 打开文档 折叠整个标签 折叠所选 扩展全部 选择父标签 平衡大括弧 显示行号 高亮显示无效代码 应用注释 缩进代码 删除注释 环绕标签 凸出代码 格式化源代码 首先选中要编辑的标签 快速标签编辑器以“编辑”模式打开 没有选择特定元素，快速标签编辑器以“插入”模式打开 CSS（Cascading Style Sheet，层叠样式表或级联样式表）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离