急求！！！网页设计 HTML代码大全

栏目：资讯发布：2023-10-30浏览：1收藏

急求！！！网页设计 HTML代码大全,第1张

HTML标记_HTML大全_HTML标记大全_超文本标记语言

网页（WebPage）文件主要是用超文本标记语言（HyperText Markup Language，简称HTML）语句来写成。您可以通过IE浏览器的“查看”菜单中的“源文件”看到该页的HTML代码。HTML语言由一系列元素(element)组成，用于组织文件的内容和指导文件的输出格式。元素名称不分大小写。一个元素可以有多个属性，属性及其属性值不分大小写。属性名＝属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。元素又由标记(tag)的构成，大多数标记是成对出现的，分起始标记< >(start tag)和结尾标记</ >(end tag)，以便和页面的内容区分开来。其写成的文件是标准的ASCII文件，不同于一般的编程语言，故称为脚本（Script）更准确一点。其实也很简单，特别是在专门的HTML编辑器的帮助下，您可以迅速地学会HTML，并能很快写出有自己特色的Homepage来。

需要说明的是：各种浏览器对html元素及其属性的解释不完全一样，如NC与IE是有区别的。

标签内容备注

基本标签所有HTML文件都有的

<html>……</html> 表示文件类型为HTML文档

<head>……</head> 设置文档描述及其他不在WEB网页上显示的信息

<body>……</body> HTML文档的主体（页面的实际内容）

标题标签　

<title>……</title> 在标题栏中显示的题目（放在<head></head>内）

扩展属性标签　

<base>

基址标签，为解决相对编址作参考值

<META>

将HTTP命令发给CONTENT=number;url允许，描述不包含在标准HTML里的文档信息。使用详解

<link>

提供将现行文档与其它文档或实体关联起来的信息

<ISINDEX> 指明在服务器上提供文档的可以检索的索引

页面属性标签 <body>……</body>标签的扩展属性。使用详解

<body bgcolor=#……> 设置背景颜色，用名字或十六进制值

<body text=#……> 设置文本文字颜色，用名字或十六进制值

<body link=#……> 设置链接颜色，用名字或十六进制值

<body vlink=#……> 设置已使用的链接的颜色，用名字或十六进制值

<body alink=#……> 设置正在被击中链接的颜色，用名字或十六进制值

文本标签　

<pre>……</pre> 创建预格式化文本

<h1>……</h1> 创建最大的标题

<h6>……</h6> 创建最小的标题

<b>……</b> 创建黑体字

<i>……</i> 创建斜体字

<tt>……</tt> 创建打字机风格的字体

<cite>……</cite> 创建一个引用，通常是斜体

<em>……</em> 加重（通常是斜体加黑体）

<strong>……</strong> 强调（通常是斜体加黑体）

<font size=value></font> 设置字体大小，从1到7

<font color=……></font> 设置字体的颜色，使用名字或十六进制值

链接　

<a href="/URL"></a> 创建一个超链接

<a href="mailto:EMAIL"> </a> 创建一个自动发送电子邮件的链接

<a name="NAME"></a> 创建一个位于文档内部的靶位

<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接

格式排版　

<p> 创建一个新的段落

<p align=……> 将段落按左、中、右对齐

<br> 插入一个回车换行符

<blockquote>……</blockquote> 从两边缩进文本

<dl>……</dl> 创建一个定义列表

<dt> 放在每个定义术语词之前

<dd> 放在每个定义之前

<ol>……</ol> 创建一个标有数字的列表

<li> 放在每个数字列表项之前，并加上一个数字

<ul>……</ul> 创建一个标有圆点的列表

<li> 放在每个圆点列表项之前，并加上一个圆点

<div align=……> 一个用来排版大块HTML段落的标签，也用于格式化表

图形元素　

<img src="/name"> 添加一个图像

<img src="/name" align=value> 排列对齐一个图像：左中右或上中下

<img src="/name" border=value> 设置围绕一个图像的边框的大小

<hr> 加入一条水平线

<hr size=value> 设置水平线的大小（高度）

<hr width=value> 设置水平线的宽度（百分比或绝对像素点）

<hr noshade> 创建一个没有阴影的水平线

表格　

<table>……</table> 创建一个表格

<tr>……</tr> 开始表格中的每一行

<td>……</td> 开始一行中的每一个格子

<th>……</th> 设置表格头：一个通常使用黑体居中文字的格子

表格属性　

<table border=value> 设置围绕表格的边框的宽度

<table cellspacing=value> 设置表格格子之间空间的大小

<table cellpadding=value> 设置表格格子边框与其内部内容之间空间的大小

<table width=value 或 %> 设置表格的宽度－用绝对像素值或文档总宽度的百分比

<tr align=……> 设置表格格子的水平对齐（左中右）

<tr valign=……> 设置表格格子的垂直对齐（上中下）

<td colspan=value> 设置一个表格格子应跨占的列数（缺省为1）

<td rowspan=value> 设置一个表格格子应跨占的行数（缺省为1）

<td nowrap> 禁止表格格子内的内容自动断行回卷

窗框　

<frameset>……</frameset> 放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中

<frameset rows="value,value"> 定义一个窗框内的行数，可以使用绝对像素值或高度的百分比

<frameset cols="value,value"> 定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比

<frame> 定义一个窗框内的单一窗或窗区域

<noframes>……</noframes> 定义在不支持窗框的浏览器中显示什么提示

窗框属性　

<frame src="/URL"> 规定窗框内显示什么HTML文档

<frame name="name"> 命名窗框或区域以便别的窗框可以指向它

<frame marginwidth=value> 定义窗框左右边缘的空白大小，必须大于等于1

<frame marginheight=value> 定义窗框上下边缘的空白大小，必须大于等于1

<frame scrolling=value> 设置窗框是否有滚动栏，其值可以是"yes","no","auto"，缺省时一般为"auto"

<frame noresize> 禁止用户调整一个窗框的大小

表单对于功能性的表单，一般需要运行一个CGI小程序，HTML仅仅是产生表单的表面样子。

<form>……</form> 创建所有表单

<select multiple name="NAME" size=value>………</select> 创建一个滚动菜单，size设置在需要滚动前可以看到的表单项数目

<option> 设置每个表单项的内容

<select name="NAME">……</select> 创建一个下拉菜单

<textarea name="NAME" cols=value rows=value>……</textarea> 创建一个文本框区域，列的数目设置宽度，行的数目设置高度

<input type="checkbox" name="NAME"> 创建一个复选框，文字在标签后面

<input type="radio" name="NAME" value="x"> 创建一个单选框，文字在标签后面

<input type=text name="……" size=value> 创建一个单行文本输入区域，size设置以字符计的宽度

<input type="submit" value="NAME"> 创建一个submit（提交）按钮

<input type="image" border=0 name="NAME" src="/namegif"> 创建一个使用图象的submit（提交）按钮

<input type="reset"> 创建一个reset（重置）按钮

附加属性　

<PRE>……</PRE> 预置格式风格标签用来显示字体宽度固定的文本块，主要用来在表格格式中显示文本

<TT>……</TT> 打字机风格用来显示打字机字体宽度固定的文本

<SAMP>……</SAMP> 示例风格以单倍距显示文本

<ADDRESS>……</ADDRESS> 地址风格一般用于文档的开始或结尾处，并以斜体格式显示文本。

<DL>……</DL> 定义列表风格用来显示术语及其定义

颜色

#=rrggbb 16 进制 RGB 数值，或者是下列预定义色彩：

Black,Olive,Teal,Red,Blue,Maroon,Navy, Gray,Lime,Yellow,white,Silver,Fuchsia,Purple,Green,Aqua[返回本页首部]

META标签

描述不包含在标准HTML里的文档信息。

本页的关键字和描述。在页面里加上这些定义后，一些搜索引擎就能够让读者根据这些关键字搜索到您的主页，了解你的主页内容。

浏览器将在30秒后，自动转到newhtm。您可用它制作一个封面，在若干时间后，自动带读者来到您的目录页。如果URL项没有，浏览器就是刷新本页。这就是WWW聊天室定期刷新的实现原理。

描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。GB2312是指简体中文，而台湾BIG5内码的主页则是用BIG5。

强制性调用网上的最新版本。浏览器为节约时间，在本地硬盘上保存一个临时文件。在重新调用时，便直接显示那个临时文件。如果您想让读者每次都看到最新的版本，可加上句。[返回本页首部]

LINK

显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下：

<LINK REL="stylesheet" href="/stylecss">REL参数说明两个文档之间的关系，HREF说明目标文档名。关于层叠样式表，将在后面的课程中详述。[返回本页首部]

BASE

本文档的原始地址。语法：<BASE HREF="原始地址">当读者下载您的文档后，由此可以知道是从哪里下载的。[返回本页首部]

BODY

BODY标记有一些属性，用于定义页面内的显示效果。 ALINK、LINK、TEXT、VLINK—— 文字的颜色。

ALINK：当前激活的连接的文字颜色。

LINK：连接的文字颜色。

TEXT：文字的颜色。

VLINK：参观过的文字颜色。

注意：文字的颜色要和背景色有明显的差别，以便读者浏览。

BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。

BACKGROUND：背景图案，该图案在页面内平铺。背景图案应保持单一色调，以保证页面文字易于阅读。

BGPROPERTIES：设置成FIXED，则背景图案不滚动。（只对INTERNET EXPLORER有效）

BGCOLOR：背景色。

注意：如果你的背景图案是深色调，因之文字颜色为淡颜色，那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”，那么在背景图案没有显示的情况下，你的文字在白颜色下很难阅读，所以应该选用一个跟你的背景图案颜色一致的背景色。

LEFTMARGIN、TOPMARGIN——页边空白。（只对INTERNET EXPLORER有效）

LEFTMARGIN：左边页边空白。

TOPMARGIN：顶端页边空白。

1、首先新建一个html文件，注意这个文件只是起到一个草稿的作用。

2、选择插入—html—框架—对齐上缘

PS：我这里选择的是上下结构的框架，如果您需要其他类型的框架请自行选择。

3、这个是每个框架的名称，你可以选择自己进行设置，也可以选择默认，如果框架较多的话我建议自己设置名称。

4、右下角如果没有框架窗口的话，选择窗口—框架开启框架窗口。这样有利于你对框架的编辑

5、你可以在右侧选择框架对每一个框架进行编辑。如修改大小，颜色，边框等。便于你接下来排版的操作。

6、两个框架中间这条线按住拖动可以用来调整框架的大小，你也可以对这条线进行编辑颜色，大小，然后选中这条线，你就选中了所有的框架。

7、点击文件，选择框架集另存为这样你就保存了所有的框架。否则你需要每一个都要进行保存。

8、这样你就新得到一个html的文件，你可以对它进行命名，里面包含了你制作的框架。

9、每一个框架都是单独的一个文件，如果不用框架集另存为的方法你也可以每个框架都进行保存。

注意事项：

每一个框架都是单独的一个文件注意保存。

HTML Table表格的文字大小与字型在传统的HTML网页设计规则中，可以透过HTML预设font文字标签中的size与face分别设定文字大小与字型，这样的写法在HTML5以前是相当普遍的，而到了HTML5开始，修改表格文字大小与字型必须使用css来处理，因为HTML5不支援传统HTML font的size与face属性，在css的规则里，修改文字大小是用font-size，而修改字型则是使用font-famliy，以下范例分别使用HTML传统的font标签以及css的属性来修改表格文字。

范例一、用HTML font文字标签修改表格文字大小与字型

<tr>

<td><font size="5">这是size = 5的文字大小</font></td>

<td><font face= "DFKai-sb">这是标楷体的文字字型</font></td>

</tr>

</table>

呈现结果

诚如第一段所说，若要符合最新的HTML5网页设计标准，表格内的文字大小与字型就必须使用css来设计，范例二就提供这样的设计方式，除了可以像范例一这样每个栏位不同的文字样式，还可以一次设定整个表格的文字样式，用起来效率非常好。

范例二、用css的font-size与font-family来修改表格文字大小与字型

<tr>

<td>这是表格预设文字样式</td>

<td>< span style="font-size:13px;">这是13px的文字大小</span></td>

<td><span style="font-family:DFKai-sb">这是标楷体字型< /span></td>

</tr>

</table>

呈现结果

二在table标签开头就先加入了『style="font-size:18px;font-family:serif;"』这样的语法，代表将整张表格内的所有文字大小都预设为18px，而且字型使用serif，这可是传统HTML的font标签没办法做到的高效率设计方式，接着我们在表格的三个栏位，分别使用预设文字样式、修改大小为13px（font-size:13px;）、字型改为标楷体（font-family:DFKai-sb;），可以清楚的看到，只要在表格中任何栏位或一段文字，用span标签包起来，就可以特别为文字做不同的样式设计。

第1部分　HTML基础篇

第1章　网页设计基础知识　3

11　基础概念　3

12　网页与HTML语言　4

13　Web标准：结构、表现与行为　5

131　标准的重要性　5

132　“Web标准”概述　6

14　初步理解网页设计与开发的过程　7

141　基本任务与角色　7

142　明确网站定位　8

143　收集信息和素材　8

144　策划栏目内容　8

145　设计页面方案　9

146　制作页面　9

147　实现后台功能　9

148　整合与测试网站　10

15　与设计相关的技术因素　10

16　本章小结　12

第2章　HTML网页文档结构　13

21　HTML简介　13

211　创建第一个HTML文件　13

212　HTML文件结构　15

22　简单的HTML案例　16

23　网页源文件的获取　18

231　直接查看源文件　19

232　保存网页　19

24　辅助：利用Dreamweaver快速建立基本文档　20

25　本章小结　24

第3章　用HTML设置文本和图像　25

31　文本排版　25

311　实现段落与段内换行(p和br)　25

312　设置标题(h1～h6)　27

313　使文字水平居中(center)　27

314　设置文字段落的缩进(blockquote)　29

32　设置文字列表　29

321　建立无序列表(ul)　29

322　建立有序列表(ol)　30

33　HTML标记与HTML属性　31

331　用align属性控制段落的水平位置　31

332　用bgcolor属性设置背景颜色　32

333　设置文字的特殊样式　34

334　设置文字的大小和颜色(font)　35

34　忘记过时的HTML标记和属性　35

35　特殊文字符号　36

36　在网页中使用图像(img)　38

361　网页中的格式　38

362　一个简单的网页　38

363　使用路径　39

37　用width和height属性设置的尺寸　41

38　用alt属性为图像设置替换文本　43

39　辅助：利用Dreamweaver设置文本和图像　43

310　辅助：利用Dreamweaver代码视图提高效率　47

3101　代码提示　47

3102　代码折叠　49

3103　使用拆分视图对代码快速定位　49

311　本章小结　50

第4章　用HTML建立超链接(a)　51

41　设置基本文字超链接　51

411　URL的格式　51

412　URL的类型　52

42　设置页面内部的特定目标的链接　53

43　设置的超链接　54

44　设置电子邮件链接　54

45　设置以新窗口显示链接页面　55

46　创建热点区域　55

461　用HTML建立热点区域(map和area)　56

462　辅助：利用Dreamweaver精确定位热点区域　57

47　框架之间的链接　59

471　建立框架与框架集(frame和frameset)　59

472　用cols属性将窗口分为左右两部分　60

473　用rows属性将窗口分为上中下三部分　60

474　框架的嵌套　61

475　用src属性在框架中插入网页　61

476　用src属性在框架之间链接　62

477　创建嵌入式框架(iframe)　64

48　链接增多后网站的组织结构与维护　65

49　本章小结　66

第5章　用HTML创建表格　67

51　表格基本结构(table)　67

52　合并单元格　68

521　用colspan属性左右合并单元格　68

522　用rowspan属性上下合并单元格　69

53　用align属性设置对齐方式　70

54　用bgcolor属性设置表格背景色和边框颜色　71

55　用cellpadding属性和cellspacing属性设定距离　72

56　完整的表格标记(thead、tbody和tfoot)　73

57　需要抛弃的方法：用表格进行页面布局　75

58　本章小结　78

第2部分　CSS基础篇

第6章　(X)HTML与CSS概述　81

61　HTML与XHTML　81

611　追根溯源　81

612　DOCTYPE(文档类型)的含义与选择　82

613　XHTML与HTML的重要区别　83

62　(X)HTML与CSS　84

621　CSS标准　85

622　传统HTML的缺点　85

623　CSS的引入　86

624　如何编辑CSS　88

625　浏览器与CSS　89

63　本章小结　90

第7章　CSS核心基础　91

71　构造CSS规则　91

72　基本CSS选择器　92

721　标记选择器　92

722　类别选择器　93

723　ID选择器　95

73　在HTML中使用CSS的方法　96

731　行内样式　96

732　内嵌式　97

733　链接式　98

734　导入样式　99

735　各种方式的优先级问题　100

74　本章小结　102

第8章　手工编写与借助工具　103

81　从零开始　103

82　设置标题　104

83　控制　105

84　设置正文　106

85　设置整体页面　106

86　对段落进行分别设置　107

87　完整代码　108

88　CSS的注释　109

89　辅助：使用Dreamweaver创建页面　109

810　辅助：在Dreamweaver中新建CSS规则　110

811　辅助：在Dreamweaver中编辑CSS规则　112

812　为图像创建CSS规则　114

813　本章小结　116

第9章　CSS的高级特性　117

91　复合选择器　117

911　“交集”选择器　117

912　“并集”选择器　118

913　后代选择器　120

92　CSS的继承特性　122

921　继承关系　122

922　CSS继承的运用　123

93　CSS的层叠特性　125

94　本章小结　126

第10章　用CSS设置文本样式　127

101　长度单位　127

102　颜色定义　128

103　准备页面　129

104　设置文字的字体　129

105　设置文字的倾斜效果　130

106　设置文字的加粗效果　131

107　英文字母大小写转换　132

108　控制文字的大小　133

109　文字的装饰效果　133

1010　设置段落首行缩进　134

1011　设置字词间距　135

1012　设置段落内部的文字行高　136

1013　设置段落之间的距离　136

1014　控制文本的水平位置　137

1015　设置文字与背景的颜色　138

1016　设置段落的垂直对齐方式　138

10161　使用line-height属性进行设置　138

10162　更通用的解决方案　139

1017　本章小结　140

第11章　用CSS设置图像效果　141

111　设置边框　141

1111　基本属性　141

1112　为不同的边框分别设置样式　142

112　缩放　144

113　图文混排　145

1131　文字环绕　145

1132　设置与文字的间距　146

114　案例——八大行星科普网页　147

115　设置与文字的对齐方式　150

1151　横向对齐方式　150

1152　纵向对齐方式　151

116　本章小结　154

第12章　用CSS设置背景颜色与图像　155

121　设置背景颜色　155

122　设置背景图像　156

123　设置背景图像平铺　157

124　设置背景图像位置　159

125　设置背景位置固定　162

126　设置标题的图像替换　163

127　使用滑动门技术的标题　166

128　本章小结　168

第3部分　CSS高级篇

第13章　CSS盒子模型　171

131　“盒子”与“模型”的概念探究　171

132　边框(border)　172

1321　设置边框样式(border-style)　173

1322　属性值的简写形式　174

1323　边框与背景　176

133　设置内边距(padding)　177

134　设置外边距(margin)　178

135　盒子之间的关系　179

1351　HTML与DOM　180

1352　标准文档流　183

1353　div标记与span标记　184

136　盒子在标准流中的定位原则　187

1361　行内元素之间的水平margin　187

1362　块级元素之间的竖直margin　188

1363　嵌套盒子之间的margin　189

1364　margin属性可以设置为负值　191

137　思考题　192

138　本章小结　196

第14章　盒子的浮动与定位　197

141　盒子的浮动　197

1411　准备代码　197

1412　案例1——设置第1个浮动的div　199

1413　案例2——设置第2个浮动的div　199

1414　案例3——设置第3个浮动的div　199

1415　案例4——改变浮动的方向　200

1416　案例5——再次改变浮动的方向　200

1417　案例6——全部向左浮动　201

1418　案例7——使用clear属性清除浮动的影响　202

1419　案例8——扩展盒子的高度　203

142　盒子的定位　204

1421　静态定位(static)　204

1422　相对定位(relative)　205

1423　绝对定位(absolute)　209

1424　固定定位(fixed)　214

143　z-index空间位置　214

144　盒子的display属性　215

145　本章小结　216

第15章　用CSS设置表格样式　217

151　控制表格　217

1511　表格中的标记　217

1512　设置表格的边框　219

1513　确定表格的宽度　222

1514　其他与表格相关的标记　223

152　美化表格　224

1521　搭建HTML结构　224

1522　整体设置　225

1523　设置单元格样式　226

1524　斑马纹效果　227

1525　设置列样式　227

153　设置鼠标指针经过时整行变色提示的表格　232

1531　在Firefox和IE 7中实现鼠标指针经过时整行变色　232

1532　在IE 6中实现鼠标指针经过时整行变色　233

1533　最终合并代码　234

154　辅助：使用jQuery实现更多效果　236

1541　用jQuery实现斑马纹效果　237

1542　用jQuery实现“前3行”特殊样式　239

1543　用jQuery实现渐变背景色表格效果　240

1544　用jQuery实现鼠标指针经过变色效果　241

155　案例——日历　241

1551　搭建HTML结构　241

1552　设置整体样式和表头样式　244

1553　设置日历单元格样式　245

156　本章小结　248

第16章　用CSS设置链接与导航菜单　249

161　丰富的超链接特效　250

162　创建按钮式超链接　252

163　制作荧光灯效果的菜单　253

1631　HTML框架　254

1632　设置容器的CSS样式　254

1633　设置菜单项的CSS样式　255

164　控制鼠标指针　257

165　设置项目列表样式　257

1651　列表的符号　258

1652　符号　260

166　创建简单的导航菜单　261

1661　简单的竖直排列菜单　261

1662　横竖自由转换菜单　264

167　设置翻转效果　265

168　应用滑动门技术的玻璃效果菜单　266

1681　基本思路　266

1682　设置菜单整体效果　267

1683　使用“滑动门”技术设置玻璃材质背景　268

1684　进一步解决的问题　269

169　鼠标指针经过时给增加边框　270

1610　本章小结　272

第17章　用CSS建立表单　273

171　表单的用途和原理　273

172　表单输入类型　274

1721　文本输入框　274

1722　单选按钮　274

1723　复选按钮　275

1724　密码输入框　275

1725　按钮　276

1726　多行文本框　277

1727　列表框　277

173　CSS与表单　278

1731　表单中的元素　278

1732　像文字一样的按钮　281

1733　多彩的下拉菜单　283

174　案例——“数独”游戏网页　284

1741　搭建基本表格　285

1742　设置表格样式　286

1743　加入文本输入框　287

1744　设置文本输入框的样式　287

175　对齐文本框和旁边的图像按钮　289

176　本章小结　290

第18章　网页样式综合案例——灵活的电子相册　291

181　搭建框架　291

182　阵列模式　293

183　单列模式　298

184　改进阵列模式　301

185　IE 6兼容　304

186　双向联动模式　306

1861　在Firefox中实现　306

1862　IE 6兼容　311

1863　改变方向　312

187　本章小结　314

第4部分　CSS布局篇

第19章　固定宽度布局剖析与制作　317

191　向报纸学习排版思想　317

192　CSS排版观念　319

1921　两列布局　320

1922　三列布局　320

1923　多列布局　321

1924　布局结构的表达式与结构图　321

193　圆角框　325

1931　准备图像　325

1932　搭建HTML结构　326

1933　放置背景图像　328

1934　设置样式并修复缺口　329

194　单列布局　330

1941　放置第一个圆角框　331

1942　设置圆角框的CSS样式　331

1943　放置其他圆角框　334

195　“1-2-1”固定宽度布局　335

1951　准备工作　336

1952　绝对定位法　337

1953　浮动法　339

196　“1-3-1”固定宽度布局　341

197　“1-((1-2)+1)-1”固定宽度布局　343

198　本章小结　344

第20章　变宽度网页布局剖析与制作　345

201　“1-2-1”变宽度网页布局　345

2011　“1-2-1”等比例变宽布局　345

2012　“1-2-1”单列变宽布局　348

202　“1-3-1”宽度适应布局　352

2021　“1-3-1”三列宽度等比例布局　352

2022　“1-3-1”单侧列宽度固定的变宽布局　352

2023　“1-3-1”中间列宽度固定的变宽布局　353

2024　进一步的思考　355

2025　“1-3-1”双侧列宽度固定的变宽布局　356

2026　“1-3-1”中列和侧列宽度固定的变宽布局　358

203　变宽布局方法总结　359

204　分列布局背景色问题　360

2041　设置固定宽度布局的列背景色　360

2042　设置特殊宽度变化布局的列背景色　364

2043　设置单列宽度变化布局的列背景色　364

205　CSS排版与传统的表格方式排版的分析　365

206　浏览器的兼容性问题　368

207　CSS布局页面的调试技巧　368

2071　技巧1：设置背景色或者边框，确定错误范围　369

2072　技巧2：删除无关代码，暴露核心矛盾　369

2073　技巧3：先用Firefox调试，然后使它兼容IE　369

2074　技巧4：善于利用工具，提高调试效率　370

2075　技巧5：善于提问，寻求帮助　370

208　本章小结　370

第21章　网页布局综合案例——儿童用品网上商店　371

211　案例概述　371

212　内容分析　372

213　HTML结构设计　374

214　原型设计　377

215　页面方案设计　380

216　布局设计　383

2161　整体样式设计　383

2162　页头部分　384

2163　内容部分　386

2164　页脚部分　389

217　细节设计　389

2171　页头部分　389

2172　内容部分　395

2173　左侧的主要内容列　395

2174　右边栏　398

218　CSS布局的优点　402

219　交互效果设计　403

2191　次导航栏　403

2192　主导航栏　404

2193　账号区　404

2194　图像边框　405

2195　产品分类　407

2110　遵从Web标准的设计流程　407

2111　从“网页”到“网站”　408

21111　历史回顾　408

21112　不完善的办法　408

21113　服务器出场　409

21114　CMS出现　409

21115　具体操作　409

2112　本章小结　410

附录A　网站发布与管理　411

A1　在Internet上建立自己的Web站点　411

A11　制作网站内容　411

A12　申请域名　411

A13　信息发布　411

A2　租用虚拟主机空间　412

A21　了解基本的技术名词　412

A22　选择和租用虚拟主机　413

A3　向服务器上传网站内容　414

A31　使用Dreamweaver上传文件　414

A32　使用IE浏览器上传文件　415

A33　使用专业FTP工具上传文件　416

A4　网站管理　418

A41　修改密码　418

A42　集团邮箱管理　419

A43　注意事项　420

附录B　CSS英文小字典　421

本书共分4个部分21章和两个附录，包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标准，强调“表现”与“内容”的分离，抛弃了那些过时的HTML标记和属性，从更规范的角度全面、系统地介绍了网页设计制作方法与技巧。附录收录了网站发布与管理的知识和160个应用CSS时出现频度较高的英文单词及其中文解释。书中给出了大量详细的案例，并对案例进行分析，便于读者在理解的基础上，直接修改后使用。本书作者具备扎实的实践功底，行文细腻，对每一个技术细节以及每一个实际工作中可能遇到的难点和错误都进行了详细的说明，并给出了解决方案。

本书附带学习光盘，收录了12个小时HTML和CSS多媒体教学录像和网页制作技术多媒体教学录像，辅助读者学习，达到事半功倍的效果。光盘还附带书中所有实例的素材文件、源代码和最终效果文件，修改后可直接使用。

本书适合于网页设计制作人员和开发人员阅读，读者可以在掌握HTML和CSS之后做出精美的网页。