3.2静态网页设计软件开发技术项目实践课件

1、学习情境三学习情境三 ：网络考试系统网络考试系统功能实现功能实现工作任务：静态网页设计工作任务：静态网页设计软件开发技术项目实践软件开发技术项目实践 任务描述任务描述掌握掌握XHTML语言语言掌握掌握CSS样式表样式表任务任务目标目标知识目标知识目标 能力目标能力目标 每一个网站都需要进行页面的布局，用户看到的每一个页面都需要每一个网站都需要进行页面的布局，用户看到的每一个页面都需要编写相应的编写相应的XHTMLXHTML语言（或者是语言（或者是HTMLHTML语言）进行布局，然后在布局好的语言）进行布局，然后在布局好的页面的基础上进行相应功能程序的编写，页面布局的好坏直接影响到用页面的基础上

2、进行相应功能程序的编写，页面布局的好坏直接影响到用户对使用该系统或者网站的整体感受户对使用该系统或者网站的整体感受。掌握进行页面布局的方法掌握进行页面布局的方法相关知识相关知识 1 1XHTMLXHTML语言语言 1 1）XHTMLXHTML语言简介语言简介 XHTML XHTML是是The Extensible HyperText Markup LanguageThe Extensible HyperText Markup Language（可扩展超文本（可扩展超文本标识语言）的缩写。标识语言）的缩写。HTMLHTML是一种基本的是一种基本的WebWeb网页设计语言，网页设计语言，XHTML

3、XHTML是一个基于是一个基于XMLXML的置标语言，看起来与的置标语言，看起来与HTMLHTML有些相像，但有一些小的却重要的区别，有些相像，但有一些小的却重要的区别，XHTMLXHTML就是一个扮演着类似就是一个扮演着类似HTMLHTML角色的角色的XMLXML，所以，本质上说，所以，本质上说，XHTMLXHTML是一个过是一个过渡技术，结合了部分渡技术，结合了部分XMLXML的强大功能及大多数的强大功能及大多数HTMLHTML的简单特性。的简单特性。相关知识相关知识2 2）XHTMLXHTML语言的形成背景语言的形成背景20002000年底，国际年底，国际W3CW3C（World Wid

4、e Web ConsortiumWorld Wide Web Consortium）组织公布发行了）组织公布发行了XHTML 1.0XHTML 1.0版本。版本。XHTML 1.0XHTML 1.0是一种在是一种在HTML 4.0HTML 4.0基础上优化和改进的新语言，基础上优化和改进的新语言，目的是基于目的是基于XMLXML应用。应用。XHTMLXHTML是一种增强了的是一种增强了的HTMLHTML，它的可扩展性和灵活性，它的可扩展性和灵活性将适应未来网络应用更多的需求。将适应未来网络应用更多的需求。XMLXML虽然数据转换能力强大，完全可以替虽然数据转换能力强大，完全可以替代代HTMLH

5、TML，但面对成千上万已有的基于，但面对成千上万已有的基于HTMLHTML语言设计的网站，直接采用语言设计的网站，直接采用XMLXML还还为时过早。因此，在为时过早。因此，在HTML 4.0HTML 4.0的基础上，用的基础上，用XMLXML的规则对其进行扩展，得到的规则对其进行扩展，得到了了XHTMLXHTML。所以，建立。所以，建立XHTMLXHTML的目的就是实现的目的就是实现HTMLHTML向向XMLXML的过渡。目前，国际的过渡。目前，国际上在网站设计中推崇的上在网站设计中推崇的WebWeb标准就是基于标准就是基于XHTMLXHTML的应用（即通常所说的的应用（即通常所说的CSS+d

6、ivCSS+div）。）。相关知识相关知识 3 3）XHTMLXHTML与与HTMLHTML的区别的区别 （1 1）所有的标记都必须要有一个相应的结束标记）所有的标记都必须要有一个相应的结束标记 在在HTMLHTML中可以打开许多标签，例如，可以只写标记中可以打开许多标签，例如，可以只写标记，而不一定写，而不一定写对应的对应的来关闭它，但在来关闭它，但在XHTMLXHTML中这是不合法的。中这是不合法的。XHTMLXHTML要求有严谨的要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个“/”/”来关闭它。

7、例如：来关闭它。例如：img height=80 alt=src=./images/logo_w3cn_200 x80.gif width=200 / （2 2）所有标签的元素和属性的名字都必须使用小写）所有标签的元素和属性的名字都必须使用小写 与与HTMLHTML不一样，不一样，XHTMLXHTML对大小写是敏感的，对大小写是敏感的，和和是不同是不同的标签。的标签。XHTMLXHTML要求所有的标签和属性的名字都必须使用小写。例如，要求所有的标签和属性的名字都必须使用小写。例如，必须写成必须写成。大小写夹杂也是不被认可的，通常。大小写夹杂也是不被认可的，通常DreamweaverDreamw

8、eaver自动生成的属性名字自动生成的属性名字onMouseOveronMouseOver也必须修改成也必须修改成onmouseoveronmouseover。相关知识相关知识（3 3）所有的）所有的XMLXML标记都必须合理嵌套标记都必须合理嵌套同样因为同样因为XHTMLXHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，要求有严谨的结构，因此所有的嵌套都必须按顺序，代码代码必须修改为必须修改为，也就是说，一层一层的，也就是说，一层一层的嵌套必须是严格对称。嵌套必须是严格对称。（4 4）所有的属性必须用引号（）所有的属性必须用引号（）括起来）括起来在在HTMLHTML中，可以不需要给属性

9、值加引号，但是在中，可以不需要给属性值加引号，但是在XHTMLXHTML中，它们必须中，它们必须被加引号。例如，被加引号。例如，必须修改为必须修改为。特殊情况下，需要在属性值里使用双引号，可以用特殊情况下，需要在属性值里使用双引号，可以用 ，单引号可以使，单引号可以使用用''，例如：，例如：相关知识相关知识（5 5）把所有）把所有“”和和“&”&”特殊符号用编码表示特殊符号用编码表示任何小于号（任何小于号（ ），不是标签的一部分，都必须被编码为），不是标签的一部分，都必须被编码为&gt&gt。任何与号（任何与号（& &

10、amp;），不是实体的一部分，都必须被编码为），不是实体的一部分，都必须被编码为&amp&amp。【注意注意】以上字符之间无空格。以上字符之间无空格。（6 6）给所有属性赋一个值）给所有属性赋一个值XHTMLXHTML规定所有属性都必须有一个值，没有值的就重复本身。例如，规定所有属性都必须有一个值，没有值的就重复本身。例如，必须必须修改为修改为input type=checkbox name=shirt value=medium checked=checked。相关知识相关知识 （7 7）不要在注释内容中使用）不要在注释内容中使用“-”“-” “-” “-”只能发生在只能发生在

11、XHTMLXHTML注释的开头和结束，也就是说，在内容中它注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：们不再有效。例如下面的代码是无效的： !- - 用等号或者空格替换内部的虚线才是正确的，代码如下：用等号或者空格替换内部的虚线才是正确的，代码如下： !- - 以上这些规范有的看上去比较奇怪，但这一切都是为了使代码有一个以上这些规范有的看上去比较奇怪，但这一切都是为了使代码有一个统一、唯一的标准，便于以后数据的再利用。统一、唯一的标准，便于以后数据的再利用。相关知识相关知识 （8 8）图片必须有说明文字）图片必须有说明文字 每个图片标签都必须有每个图片标签都必须有

12、altalt说明文字。例如：说明文字。例如： img src=images/tile_crosshairs.png alt= / 如果没有说明文字，可以设置成如果没有说明文字，可以设置成img src=images/tile_crosshairs.png alt= /，但是不能写成，但是不能写成img src=images/tile_crosshairs.png /，因为这样的话，页面会出现如，因为这样的话，页面会出现如下的错误提示：下的错误提示： “ “验证（）：元素验证（）：元素”img“img“缺少必需的属性缺少必需的属性alt”alt”。相关知识相关知识 2 2CSSCSS样式表样式表

13、 1 1）CSSCSS（层叠样式表）简介（层叠样式表）简介 CSS CSS（Cascading Style SheetCascading Style Sheet，可译为层叠样式表或级联样式表），可译为层叠样式表或级联样式表）是一组格式设置规则，用于控制是一组格式设置规则，用于控制WebWeb页面的外观。通过使用页面的外观。通过使用CSSCSS样式设置页样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在面的格式，可将页面的内容与表现形式分离。页面内容存放在HTMLHTML文档中，文档中，而用于定义表现形式的而用于定义表现形式的CSSCSS规则则存放在另一个文件中或规则则存放在另一个

14、文件中或HTMLHTML文档的某一文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使外观更加容易，而且还可以使HTMLHTML文档代码更加简练，缩短浏览器的加载文档代码更加简练，缩短浏览器的加载时间。时间。相关知识相关知识 2 2）使用）使用CSSCSS布局的优点布局的优点 采用采用CSSCSS布局相对于传统的布局相对于传统的TABLETABLE网页布局具有以下网页布局具有以下3 3个显著优势。个显著优势。 （1 1）表现和内容相分离）表现和内容相分离 将设计部分剥离出来放在一个独

15、立的样式文件中，将设计部分剥离出来放在一个独立的样式文件中，HTMLHTML文件中只存放文件中只存放文本信息，这样的页面对搜索引擎更加友好。文本信息，这样的页面对搜索引擎更加友好。 （2 2）提高页面浏览速度）提高页面浏览速度 对于同一个页面视觉效果，采用对于同一个页面视觉效果，采用CSSCSS布局的页面容量要比布局的页面容量要比TABLETABLE编码的编码的页面文件容量小得多，前者一般只有后者的页面文件容量小得多，前者一般只有后者的1/21/2大小，浏览器就不用去编大小，浏览器就不用去编译大量冗长的标签。译大量冗长的标签。 （3 3）易于维护和改版）易于维护和改版 只要简单修改几个只要简单

16、修改几个CSSCSS文件就可以重新设计整个网站的页面。文件就可以重新设计整个网站的页面。相关知识相关知识 3 3）CSSCSS文件的引用文件的引用 将样式表引用到网页可以用将样式表引用到网页可以用3 3种方式，即内部样式、内联样式、外部种方式，即内部样式、内联样式、外部样式。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先样式。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。权样式的未重叠定义但覆盖重叠的定义。 （1 1）内部样式）内部样式 可以在可以在HTMLHTML文档的文档的和和标记之间插入一个标记之间插入一个和和块对象。例如：块对

17、象。例如：相关知识相关知识 （2 2）内联样式）内联样式 内联定义即是在对象的标记内使用对象的内联定义即是在对象的标记内使用对象的stylestyle属性定义适用其的样属性定义适用其的样式表属性。例如：式表属性。例如： 以上代码直接定义了一个表格中一个单元格以上代码直接定义了一个表格中一个单元格tdtd的样式，样式用了一个的样式，样式用了一个背景图片并定义了背景图片并定义了tdtd的高度是的高度是19px19px。 相关知识相关知识 （3 3）外部样式）外部样式 外部样式是使用单独的外部样式是使用单独的CSSCSS文件来定义样式。例如：文件来定义样式。例如： 在这个页面中，首先使用在这个页面中

18、，首先使用对象引用样式表文件，对象引用样式表文件，对象定对象定义了义了classclass属性为属性为footerbgfooterbg，则，则对象的样式将符合样式表文件中的对象的样式将符合样式表文件中的footerbgfooterbg类中所定义的样式。类中所定义的样式。相关知识相关知识 4 4）样式规则）样式规则 样式规则是指网页中元素的样式定义，包括元素的显示方式以及元素样式规则是指网页中元素的样式定义，包括元素的显示方式以及元素在页中的位置等。在页中的位置等。 在解决方案资源管理器中添加一个样式表文件，在大括号的外面单击在解决方案资源管理器中添加一个样式表文件，在大括号的外面单击鼠标右键，

19、然后在弹出的快捷菜单中选择鼠标右键，然后在弹出的快捷菜单中选择【添加样式规则添加样式规则】命令，如图命令，如图3-3-1313所示，即弹出如图所示，即弹出如图3-143-14所示的所示的【添加样式规则添加样式规则】对话框。对话框。图图3-13 选择选择【添加样式规则添加样式规则】命令命令 图图3-14 【添加样式规则添加样式规则】对话框对话框 相关知识相关知识 在在【添加样式规则添加样式规则】对话框中选择某个元素，或者定义一个类或元素对话框中选择某个元素，或者定义一个类或元素IDID，【确定确定】按钮即变为可用，单击按钮即变为可用，单击【确定确定】按钮，就添加了一个样式规按钮，就添加了一个样式

20、规则。则。 下面的代码是仅有元素名称的样式规则：下面的代码是仅有元素名称的样式规则： h1 h1 在样式规则的大括号内单击鼠标右键，在弹出的快捷菜单中选择在样式规则的大括号内单击鼠标右键，在弹出的快捷菜单中选择【生生成样式成样式】命令，即弹出命令，即弹出【样式生成器样式生成器】对话框，然后设置对应的样式即可。对话框，然后设置对应的样式即可。 下面的代码就是在样式规则内添加的样式：下面的代码就是在样式规则内添加的样式： h1 font-size:x-large; color:red; h1 font-size:x-large; color:red;相关知识相关知识样式规则的一般格式为：样式规则的

21、一般格式为：样式定义选择符样式定义选择符 样式属性样式属性1:1:值值1; 1; 样式属性样式属性2:2:值值2; 2; 样式定义选择符指定样式定义的对象，它的可选项有样式定义选择符指定样式定义的对象，它的可选项有HTMLHTML或或XHTMLXHTML标标记、用户自定义的类、用户自定义的记、用户自定义的类、用户自定义的IDID、虚类、具有层次关系的样式规则、虚类、具有层次关系的样式规则以及并列的样式选择符等。各选项与图以及并列的样式选择符等。各选项与图3-143-14对话框中选项的对应关系如下。对话框中选项的对应关系如下。HTMLHTML或或XHTMLXHTML元素：从图元素：从图3-143

22、-14中的中的【元素元素】下拉列表框中选择。下拉列表框中选择。自定义类：在图自定义类：在图3-143-14中的中的【类名类名】文本框中定义类名。文本框中定义类名。自定义自定义IDID：在图：在图3-143-14中的中的【元素元素IDID】文本框中定义文本框中定义IDID名称。名称。虚类：用于超链接标记。虚类：用于超链接标记。包含选择符：由添加到包含选择符：由添加到“样式规则层次结构样式规则层次结构”中的元素组成。中的元素组成。并列选择符：用逗号分隔的样式定义选择符。并列选择符：用逗号分隔的样式定义选择符。相关知识相关知识（1 1）HTMLHTML或或XHTMLXHTML元素元素HTMLHTML

23、或或XHTMLXHTML元素是最典型的选择符类型，设计者可以定义各种元素是最典型的选择符类型，设计者可以定义各种HTMLHTML或或XHTMLXHTML元素的样式，定义时直接使用选择符名称和大括号，然后在大括元素的样式，定义时直接使用选择符名称和大括号，然后在大括号内定义样式即可。例如：号内定义样式即可。例如：div color:reddiv color:red该样式规则的含义是，该样式规则的含义是，divdiv块内的所有字体都以红色显示。块内的所有字体都以红色显示。（2 2）自定义类（）自定义类（classclass）自定义类以自定义类以“.”.”为起始标志，用于定义为起始标志，用于定义HT

24、MLHTML或或XHTMLXHTML元素中没有提元素中没有提供的标记样式，常用形式如下：供的标记样式，常用形式如下：. .类名类名 样式属性样式属性1:1:值值1; 1; 样式属性样式属性2:2:值值2;2;例如，在例如，在CSSCSS文件中定义类：文件中定义类：.div_CenterAlign.div_CenterAlign text-align:center; text-align:center; color:red; color:red; 相关知识相关知识 在在XHTMLXHTML文档中可以按下列方式引用：文档中可以按下列方式引用： 则则div1div1和和div2div2中的文字因属同

25、一个自定义类，所以都居中，并以红色中的文字因属同一个自定义类，所以都居中，并以红色字体显示。字体显示。 还可以指定某个元素内的自定义类，一般形式为：还可以指定某个元素内的自定义类，一般形式为： 样式定义选择符样式定义选择符. .类名类名 样式属性样式属性1:1:值值1; 1; 样式属性样式属性2:2:值值2;2; 例如：例如： color:red;color:red; font-size:32pt; font-size:32pt; 其含义是只有在其含义是只有在h1h1中引用的中引用的firstfirst才采用红色才采用红色32px32px的样式显示。的样式显示。相关知识相关知识 在样式规则生成

26、器中，先设置类名，在文本框中输入在样式规则生成器中，先设置类名，在文本框中输入“first”first”，然，然后选中其下方的后选中其下方的【可选元素可选元素】复选框，再在下拉列表框中选择复选框，再在下拉列表框中选择【h1h1】元素，元素，即可自动生成样式规则，如图即可自动生成样式规则，如图3-153-15所示。所示。图图3-15 定义样式规则定义样式规则 相关知识相关知识 在在XHTMLXHTML中按照下列方式引用：中按照下列方式引用： 网页设计与网站开发网页设计与网站开发 ASP.NET WebASP.NET Web应用编程应用编程 由于第一个由于第一个h1h1引用了自定义引用了自定义fi

27、rstfirst类，所以用红色类，所以用红色32pt32pt的样式显示，而的样式显示，而第二个第二个h1h1没有指定，则以默认的样式显示。没有指定，则以默认的样式显示。相关知识相关知识（3 3）自定义）自定义IDID自定义自定义IDID以以“#”#”为起始标志，例如：为起始标志，例如：#customId1 color:red#customId1 color:red引用时，使用引用时，使用idid属性声明即可（注意属性声明即可（注意idid为小写字母），例如：为小写字母），例如：本段落文字为红色本段落文字为红色可以看出，自定义可以看出，自定义IDID的定义方式与自定义类的定义方式非常相似，但是的

28、定义方式与自定义类的定义方式非常相似，但是这两者在使用上是有区别的。在同一个这两者在使用上是有区别的。在同一个XHTMLXHTML网页中，多个标记可以使用同网页中，多个标记可以使用同一个自定义类，而一个自定义类，而idid则只能为某一个标记使用。则只能为某一个标记使用。相关知识相关知识利用利用CSSCSS定义样式时还要注意，如果在一个元素的样式定义中，既有定义样式时还要注意，如果在一个元素的样式定义中，既有HTMLHTML或或XHTMLXHTML标记，又有自定义类和自定义标记，又有自定义类和自定义IDID，则自定义，则自定义IDID的优先级最高，的优先级最高，其次是自定义类，其次是自定义类，H

29、TMLHTML或或XHTMLXHTML标记的优先级最低。标记的优先级最低。例如，在例如，在CSSCSS文件中有如下的样式定义：文件中有如下的样式定义：p color: Bluep color: Blue.aa color:Red .aa color:Red #bb color:Yellow #bb color:Yellow 在链接此样式表文件的在链接此样式表文件的XHTMLXHTML中加入如下代码：中加入如下代码：文字文字由于由于IDID优先级最高，所以在浏览器中呈现的优先级最高，所以在浏览器中呈现的“文字文字”两个字既不是两个字既不是aaaa定定义的红色，也不是义的红色，也不是p p规则所定

30、义的蓝色，而是黄色。规则所定义的蓝色，而是黄色。相关知识相关知识 （4 4）虚类）虚类虚类是专用于超链接标记的选择符，使用虚类可以为访问过的、未访问虚类是专用于超链接标记的选择符，使用虚类可以为访问过的、未访问过的、激活的以及鼠标指针悬停于其上的过的、激活的以及鼠标指针悬停于其上的4 4种状态的超链接定义不同的显示种状态的超链接定义不同的显示样式。样式。A:linkA:link未被访问过的超链接。未被访问过的超链接。A:visitedA:visited已被访问过的超链接。已被访问过的超链接。 A:activeA:active当超链接处于选中状态。当超链接处于选中状态。 A:hoverA:hov

31、er当鼠标指针移动到超链接上。当鼠标指针移动到超链接上。相关知识相关知识如果在如果在CSSCSS文件中定义如下样式：文件中定义如下样式：A:linkcolor:blue; font-size:32px;A:linkcolor:blue; font-size:32px;A:hovercolor:red; font-size:150%; text-decoration:none;A:hovercolor:red; font-size:150%; text-decoration:none;在在XHTMLXHTML的的内添加超链接：内添加超链接：进入百度搜索进入百度搜索在浏览器中查看该在浏览器中查看该

32、XHTMLXHTML文件，可以看到文件，可以看到“进入百度搜索进入百度搜索”的超链接文的超链接文字为蓝色字为蓝色3232像素字体；当鼠标移到超链接上，字体会变为红色像素字体；当鼠标移到超链接上，字体会变为红色4848像素大小，像素大小，而且不带下划线。而且不带下划线。相关知识相关知识（5 5）包含选择符）包含选择符包含选择符用于定义具有层次关系的样式规则，它由多个样式选择符组包含选择符用于定义具有层次关系的样式规则，它由多个样式选择符组成，一般格式为：成，一般格式为：选择符选择符1 1 选择符选择符2 2 属性属性: :值值; ; 各选择符之间用空格分隔。例如：各选择符之间用空格分隔。例如：p

33、 b color:redp b color:red这种定义方式只对这种定义方式只对p p所包含的所包含的b b起作用，对单独的起作用，对单独的p p或或b b均无效。均无效。假如在文件中定义了如下样式规则：假如在文件中定义了如下样式规则：p b color:redp b color:red相关知识相关知识XHTMLXHTML中的内容如下：中的内容如下： link type=text/css href=Style.css rel=Stylesheet / 这里演示的是这里演示的是内容内容1!1! 内容内容2!2!切换到切换到XHTMLXHTML的设计视图，可以看到粗体字的设计视图，可以看到粗体字

34、“内容内容1”1”为红色字体，而为红色字体，而“内容内容2”2”则是默认的黑色字体。则是默认的黑色字体。相关知识相关知识在【添加样式规则】对话框中，选中【类名】单选按钮，输入在【添加样式规则】对话框中，选中【类名】单选按钮，输入“div1”“div1”，将其添加到样式规则结构中，再输入将其添加到样式规则结构中，再输入“div2”“div2”，添加到样式规则结构中，最，添加到样式规则结构中，最后选择【元素】下拉列表框中的【后选择【元素】下拉列表框中的【divdiv】，然后添加到样式规则结构中，如】，然后添加到样式规则结构中，如图图3-163-16所示，即得到下面的样式规则定义：所示，即得到下面的

35、样式规则定义：.div1 .div2 div.div1 .div2 div 在此规则内定义的样式，只对在此规则内定义的样式，只对div1div1内包含的内包含的div2div2内的内的divdiv起作用。起作用。图图3-16 利用包含选择符定义样式规则利用包含选择符定义样式规则 相关知识相关知识（6 6）并列选择符）并列选择符如果有多个不同的样式规则定义的样式相同，则可以使用并列选择符简如果有多个不同的样式规则定义的样式相同，则可以使用并列选择符简化定义，例如：化定义，例如：div1, div2, div3 color:reddiv1, div2, div3 color:red该规则的含义是，

36、所有该规则的含义是，所有div1div1、div2div2、div3div3字体都以红色显示。在这种表字体都以红色显示。在这种表示法中，各个样式规则之间用英文逗号示法中，各个样式规则之间用英文逗号“,”,”分隔。分隔。相关知识相关知识3 3利用利用divdiv和和CSSCSS布局布局设计一个网页时，在考虑页面整体表现效果前，应该先考虑内容的语义设计一个网页时，在考虑页面整体表现效果前，应该先考虑内容的语义和结构，然后再针对语义和结构添加和结构，然后再针对语义和结构添加CSSCSS。（1 1）定义网页结构）定义网页结构网页设计的第一步是考虑网页的结构，也就是先考虑应该将网页分为哪网页设计的第一步

37、是考虑网页的结构，也就是先考虑应该将网页分为哪几块，并分别给这几块分配有意义的名称，而不是先考虑怎么实现，如怎么几块，并分别给这几块分配有意义的名称，而不是先考虑怎么实现，如怎么使用图片、字体、颜色以及块内的布局等。确定了结构，再用某种形式表现使用图片、字体、颜色以及块内的布局等。确定了结构，再用某种形式表现出来就容易了。反之，会让整个页面很乱，给修改带来很大困难。出来就容易了。反之，会让整个页面很乱，给修改带来很大困难。为什么要强调先定义良好的结构呢？原因有两点，一是修改样式方便，为什么要强调先定义良好的结构呢？原因有两点，一是修改样式方便，二是因为设计的网页并不一定仅仅在显示器上显示，如果

38、用户要求将其改为二是因为设计的网页并不一定仅仅在显示器上显示，如果用户要求将其改为在显示器上显示，也能在在显示器上显示，也能在PDAPDA、移动、移动 和屏幕阅读机上正常显示，具有良好和屏幕阅读机上正常显示，具有良好结构的结构的HTMLHTML页面，就可以通过页面，就可以通过CSSCSS的不同定义快速实现。否则，再为新要求的不同定义快速实现。否则，再为新要求重新设计一遍，效率就太低了。重新设计一遍，效率就太低了。相关知识相关知识假定某个网站的主页分为以下几块：假定某个网站的主页分为以下几块：标题区（标题区（headerheader），显示网站标志、网站名称等。），显示网站标志、网站名称等。导航

39、区（导航区（navigationnavigation），指示不同网页的层次关系，便于用户快速转到），指示不同网页的层次关系，便于用户快速转到某个网页。某个网页。主功能区（主功能区（contentcontent）。）。页脚（页脚（footerfooter），显示网站版权和有关法律声明等。），显示网站版权和有关法律声明等。此时可以采用此时可以采用divdiv元素定义这些结构，例如：元素定义这些结构，例如：相关知识相关知识（2 2）定义每块的样式）定义每块的样式定义了网页的结构，接下来就可以定义定义了网页的结构，接下来就可以定义样式了。样式了。divdiv块的位置以及宽度和高度可以在块的位置以及宽度

40、和高度可以在【设计】模式下确定，而其他样式则可以在【设计】模式下确定，而其他样式则可以在CSSCSS文件中指定，如颜色、字体、边框、背景、文件中指定，如颜色、字体、边框、背景、图片、链接以及对齐方式等，一般利用样式图片、链接以及对齐方式等，一般利用样式生成器进行这些设置。生成器进行这些设置。对于上面的结构，可以在对于上面的结构，可以在style1.cssstyle1.css中中定义下面的样式规则：定义下面的样式规则：相关知识相关知识整个页面都相同的样式可以定义在整个页面都相同的样式可以定义在内，不同的样式则分别定义在各自的内，不同的样式则分别定义在各自的块内。除此之外，还可以定义针对某一块的块

41、内。除此之外，还可以定义针对某一块的样式。例如希望样式。例如希望navigationnavigation内的超链接样式内的超链接样式和和contentcontent块内的超链接样式不一样，则可以块内的超链接样式不一样，则可以用下面的形式分别定义：用下面的形式分别定义：相关知识相关知识 （3 3）页面布局）页面布局 结构和样式确定后，就可以考虑如何布局了。结构和样式确定后，就可以考虑如何布局了。 利用利用CSSCSS中的中的floatfloat属性可以进行多列布局，在样式生成器的【布局】选属性可以进行多列布局，在样式生成器的【布局】选项卡中可以设置任何元素的项卡中可以设置任何元素的floatfl

42、oat属性（流控制），此属性确定了其他内容属性（流控制），此属性确定了其他内容如何环绕被控制的元素，可选项有【边上不允许文本】、【靠右】或【靠如何环绕被控制的元素，可选项有【边上不允许文本】、【靠右】或【靠左】，浮动效果可以参考在样式生成器中选择设置时其左边的小示意图。例左】，浮动效果可以参考在样式生成器中选择设置时其左边的小示意图。例如，有如，有3 3个个divdiv块，其块，其idid属性分别为属性分别为div1div1、div2div2、div3div3，则可以，则可以 将将3 3个个divdiv块的块的floatfloat属性均设置为属性均设置为leftleft，就可以将，就可以将div2div2放在放在div1div1的右边，的右边，div3div3放在放在div2div2的右边。的右边。相关知识相关知识 也可以利用也可以利用floatfloat属性控制是否允许对象在页面上浮动（属性控制是否允许对象在页面上浮动（clearclear）。可选）。可选项有项有“任何一边任何一边”（对象可以在页面的左边或右边浮动）、