网页设计第6章ppt课件.ppt

第6章Web标准与CSS基础 TeachingObjectives 通过本章学习 应该掌握以下内容 理解Web标准的含义掌握CSS的基本概念什么是XHTML理解表现和内容的分离掌握CSS选择符的声明方法CSS使用方式 Web2 0 自2005年以来 Web2 0的提出和应用给IT界带来了新的技术革新 越来越多的主流网站开始抛弃传统的基于Table的表格布局方法 转而采用基于Web标准的DIV CSS的设计方法对网站进行重构 6 1Web标准 6 1 1Web标准6 1 2内容与表现的分离6 1 3布局思考方式 Web标准 什么是标准 Web标准 即网站标准目前所说的Web标准一般指网站建设采用基于XHTML语言的网站设计语言 Web标准中典型的应用模式是DIV CSSWeb标准并不是某一个标准 而是由W3C和其他标准化组织制定的一套规范集合 Web标准 续 内容与表现的分离 内容 结构和表现是一个网页必不可少的组成部分内容是页面传达信息的基础表现使得内容的传达变得更加明晰和方便结构是内容和表现之间的纽带 6 1 html 内容好比是人的身体 结构则标明了身体的各个部分 表现好比装扮身体的衣服 行为就是走 跑 跳等动作 布局思考方式 传统布局 6 2 html 页面的结构部分和表现部分混杂主要布局元素是table元素用table元素的单元格将页面分区 单元格中嵌套其他表格定位网页内容 设置属性控制内容的显示和位置标准布局 6 3 html 结构部分和表现部分各自独立结构部分是页面的XHTML部分 表现部分是调用的CSS文件XHTML只用来定义内容的结构 所有表现的部分放到单独的CSS文件中Dreamweaver8 0开始已经将XHTML过渡型标准作为目前网页设计的标准语言 标准布局优势 文件下载与页面显示速度更快 内容能被更多的用户所访问 包括失明 视弱 色盲等残障人士 内容能被更广泛的设备所访问 包括屏幕阅读机 手持设备 搜索机器人 打印机 电冰箱等等 用户能够通过样式选择定制自己的表现界面 6 2如何向标准过渡 6 2 1什么是XHTML6 2 2利用XHTML改善现有网站 XHTML ExtensibleHyperTextMarkupLanguage的缩写XHTML是扮演着类似HTML角色的XML是一种过渡技术与HTML相比有以下特点解决了因HTML语言缺点所导致的严重制约XML是Web发展趋势 XHTML只要遵守一些简单规则 就可以设计出既适合XML系统 又适合当前大部分HTML浏览器的页面XHTML非常严密 有助于读者改掉表现与数据混杂的习惯 Web标准设计规则 为页面添加正确的DOCTYPE浏览器根据DOCTYPE定义的DTD 文档类型定义 来解释页面代码初学者推荐使用XHTML1 0过渡式的DTD设定一个名字空间声明编码语言 Web标准设计规则 续 用小写字母书写所有的标签所有XHTML元素和属性的名字都必须使用小写为图片添加alt属性alt属性指定了当图片不能显示的时候就显示供替换文本给所有属性值加引号在XHTML中 属性值必须被加引号关闭所有的标签每一个打开的标签都必须关闭空标签也要关闭 在标签尾部使用一个正斜杠 来关闭它们自己用id属性代替name属性在 HTML里name属性不能被使用 应该用id来替换 6 3CSS及其选择符 CSS英文全称为CascadingStyleSheets 即层叠样式表CSS和HTML一样也是以代码的形式存在的本书将结合Dreamweaver辅助设计CSS 这也是作者推荐初学者学习CSS的方法6 3 1CSS样式面板6 3 2选择器6 3 3属性设置 CSS样式面板 CSS选择器 每个样式表都是由一系列规则组成 每条规则有两部分 选择器和声明每条声明又是属性和值的组合 标签选择器 标签选择器也称标记选择器HTML中所有标签都可以作为标签选择符标签选择器可以将HTML标签例如body p div等重新定义 6 4 html 对应代码 body background image url img bg2 jpg background repeat no repeat p font family 楷体 GB2312 font size 24px color 006600 类选择器 标签选择器一旦声明 页面中所有的相同标签都会相应地产生变化类选择器能够把相同的元素分类定义成不同的样式类选择器的名称可以由用户自定义 在定义类选择器时 名称前面需要加一个 点号如定义两个不同的类 right和 center 对实例中前2个p标签设置不同的class选择器 6 4 html 对应代码 人一生的价值不是取决于他一生获得了多少而是取决于一生付出了多少而付出的多少取决于你在青春的努力 ID选择器 ID选择器的使用方法和类选择器基本相同 不同之处在于ID选择器只能在HTML页面中使用一次 因此只用来对单一元素定义单独的样式ID选择器使用时只需要将类选择器的class换成id即可每个标签均可以使用id 的形式对id属性进行名称的指派 注意事项 在很多浏览器中ID选择器也可以同时用于多个标记 但为防止JavaScript在查找id时出错 建议一个id最多只能指派给一个标记在定义ID选择器时 要在ID名称前面加一个 号 但在使用时不需要添加 号如建立一个 title 样式 6 4 html 添加代码 人生的价值 标签 id class组合 当类选择器与ID选择器同时作用时 ID选择器的优先权要高于类选择器在使用标签选择符时 如果同时定义id或class选择符 则可以对标签选择符进行分类 p word1 font size 18px color FC56A9 表示针对所有class为word1的p标签设置样式 ul tabnav list style type none padding left 0px 表示针对所有id为tabnav的ul标签设置CSS样式 选择符集体声明 如果某些选择器的风格是完全或部分相同的 这时可以使用集体声明的方法 把相同属性和值的选择器组合起来同时声明选择器之间用逗号分开h1 h2 h3 h4 h5 h6 color 00FF00 这里声明所有的标题元素的文字都为绿色 选择器的嵌套和继承 通过嵌套的方式进行组合使用选择器 可以更加精确地进行样式控制例 将a选择器放在p选择器中进行声明 显示效果只适用于和之间的标记 而对其他的标记如 绚图 超链接标记并不产生任何效果 返回 超链接标记继承了包含它的父标记的风格居中显示 并在父标记样式风格的基础上做了调整 ID和Class的嵌套 嵌套还可以在ID选择器和Class选择器之间发生表示id为top的标签下的所有class为main的标签的样式 CSS规则定义 类型背景区块方框边框列表定位扩展 6 4CSS使用方式 CSS按其使用位置的不同 主要分为3种类型行内样式表 InlineStyleSheet 内嵌样式表 IntenalStyleSheet 外部样式表 ExtenalStyleSheet 推荐使用链接的方式添加外部样式表当3种类型的样式同时定义时 行内样式的优先级最高 其次是采用标记的链接式 再次是位于和之间的内嵌式 最后才是 import导入式 行内样式是定义在标签内 直接对HTML的标记使用style属性 然后将CSS代码写在其中 只对所在的标签有效例如 给一个图像添加模糊滤镜特效 代码如下 内嵌样式表使用标签在head区域内定义样式 内部样式表只对所在的网页有效如代码