第8章 制作茶文化网站.pptVIP

项目八 制作茶文化网站 ——应用Div+CSS布局网页 制作网站首页和子页——使用Div+CSS制作网页 任务一 制作网站首页和子页 ——使用Div+CSS制作网页 相关知识 二、Web标准的构成 三、认识Div 四、Div+CSS布局的优缺点 五、绝对定位与相对定位 六、浮动定位 七、插入Div标签 实施步骤 一、制作网站首页 2．制作网页中部 3．制作网页下部 4．设置“body”样式 二、制作网站子页 1．制作网页上部 2．制作网页中部 3．制作网页下部 知识拓展 一、使用div后，什么时候使用table 二、初学Web标准的几个误区 三、茶网站欣赏 * * 一、什么是Web标准 Web标准是由W3C（World Wide Web Consortium）和其他标准化组织制定的一套规范，包括XHTML、Javascript及CSS等一系列标准。其目的在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备（计算机、手机等）向最终用户展示信息内容。 目前来说，Web标准由结构（Structure）、表现（Presentation）和行为（Behavior）三部分组成。 1．结构 结构技术用于对网页中用到的信息（ 文本、图 像、动画等）进行分类和整理，目前用于结构化设计的Web标准技术主要是XHTML。 2．表现 表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制。 3．行为 行为是指对整个文档的一个模型定义和交互行为的编写。 Div全称Division，意为“区分”。Div的使用方法与其他标签一样。如果单独使用Div而不加CSS，则它在网页中的效果和段落标记“ ”差不多。 “Div+CSS”虽然是目前比较流行的网页布局方式，但业界对它的评价却是褒贬不一。本节我们就从它所具有的优势和存在的问题两方面入手，来对其作一个公正的评价。 熟练应用“Div+CSS”布局，需要掌握绝对定位与相对定位的应用。 1．绝对定位 绝对定位在CSS中的写法是“position:absolute;”。其表达的意思是参照浏览器的左上角，配合top、right、bottom、left（上、右、下、左）值来定位元素。 2．相对定位 相对定位在CSS中的写法是“position:relative;”。其表达的意思是以父级（它所在的容器）的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点，配合上、右、下、左（简称TRBL）进行定位。 浮动定位在CSS中用“float”属性来表示。当“float”值为“none”时，表示对象不浮动；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动。 Div标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。 1 ．制作网页上部 为便于大家理解，我们将网站首页的制作分为4部分来讲，包括上部、中部、下部和 样式。本节首先来制作网页上部（具体操作见视频1-1-1）。 相对上部来说，本例网页中部的制作要复杂得多，因为涉及到div的嵌套、浮动定位和三列式布局（具体操作见视频1-1-2）。 网页下部的制作相对来说要简单很多，因为只需要插入一个Div，并在其中输入文本即可（具体操作见视频1-1-3）。 本节通过设置“body”样式，来解决网页四周的空白和滚动条问题（具体操作见视频1-1-4）。 同样为便于理解，我们将网站子页的制作分为三部分来讲，本节首先来制作网页上部（具体操作见视频1-2-1）。 本节需要重点掌握的是图文混排的方法，也就是网页右下方装饰性图像位置的安排（具体操作见视频1-2-2）。 本节需要重点掌握的是“清除”属性的应用，希望读者能理解并掌握其应用（具体操作见视频1-2-3）。 符合Web标准的设计思路是，使用div等布局元素来制作页面的布局、定位、色块、图像等，使用table、ul等元素来显示页面中需要展示的数据。这实际上是一个信息合理化整合的过程，什么地方该用什么元素还是照用不误。 初次接触Web标准的用户可能会受表格布局或其他一些问题的影响，为此我们总结了几个常见问题，希望用户在应用中能特别注意一下。 1．不要用传统的表格思维来套div 2．不必为每块内容都创建一个id * * * * *