中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited

图22-13 输入标题文本 图22-15 输入Div标签代码
</h1>Div
Step 13 Step 15 intro Div

Enter Div <div id="copyright">

about.html </div>
photos.html live.html contact.html
22-1 4

22-16 Ctrl+S

图22-14 输入正文文本并制作链接 图22-16 添加Div标签并输入版权信息
Step 16 style
Step 14 < / Enter <div layout.css
body>
id="intro"></div>22-15

IDintro Div * *

JavaScript23 margin layout.css
padding0 22-17

CSS

436

图22-17 设置*规则的样式 图22-19 设置#header规则的样式

Step 19

* layout.css #navigation
* *
Dreamweaver

22-20

Step 17

body

margin background-image background-attachment

background-position background-repeat max-width

0px auto0px

url(../images/bg.jpg) fixed

top leftrepeat-x

x 80em80em

22-1 8

图22-20 设置#navigation规则的样式
Step 20

##navigation ul

22-21

图22-18 设置body规则的样式

Step 18 border-left-width:0.1em;
border-left-style:solid;
#header 0.1em; border-left:solid

22-19

437

layout.cssCSS
CSS

Step 23 layout.css #copyright p
Enter#copyright 4
CSS

22-2

图22-21 设置##navigation ul规则的样式
Step 21
#navigation li#navigation li a

22-2 2

图22-24 输入#copyright和#copyright p的规则样式

Step 24 layout.css#content #content
Enter 22-25 Ctrl+S
img

图22-22 设置#navigation li和#navigation li a规则样式
Step 22 layout.css
Enter#content

22-2 3

图22-23 输入#content规则样式 图22-25 输入#content img规则样式
438

Step 25 color.css margin:0px auto; Step 28 color.css CSS
#body 22-26 22-29
color:#fb5;

图22-26 设置#body的背景色及空间边距
Step 26 color.css

4

22- 27

图22-29 定义导航列表、链接和栏目链接样式

Step 29 color.css Ctrl+Scolor.css
Entercontent

22-30

图22-27 设置链接的4种状态的颜色 图22-30 定义content区域中图像的边框颜色
Step 27 color.css Step 30 typography.css

body 22-31

4 22-28
CSS

图22-31 定义页面的文本样式

font-family: "Helvetica","Arial",sans-

serif;3 body *

body1em

图22-28 定义页面头部、导航、内容和版权颜色

439

Step 31 typography.css
Entera 22-

32

22-36

图22-36 合并代码

Step 35 t y p o g r a p h y. c s s

图22-32 定义a标记的样式 Enter 1 h12

typography.css h2
a
Step 32 22- 37 Ctrl+S
Enter

22- 33

图22-33 定义导航和导航中a标记的样式 图22-37 定义h1和h2标记的样式
Step 33 typography.css Step 36 basic.css
Enter
22- 34 22- 38 Ctrl+S

图22-34 内容部分和内容段落标记的样式 图22-38 集成CSS样式表文件
Step 34 typography.css
Enter basic.css
22- 35 layout.csscolor.css
typography.cssbasic.css
图22-35 定义版权部分和版权段落标记的样式 CSSbasic.css
440

Step 37 index.html </head>
22- 39
CSS
CSS

图22-39 定位插入点并链接外部样式表 图22-40 设置使用现有的CSS文件参数
Step 39 index.html
Step 38 CSS HTML
/URLCSS 22- 40
styles/basic.css 22-41
Ctrl+Sindex.html

图22-41 查看链接CSS样式表的代码

22.2 HTML技术 Div+CSS JavaScript
的应用 的应用 的应用

JavaScrip

After \\22\\
\\22\\about.html
\\22\

441

Step 1 index.html id jayclass section
Ctrl+ACtrl+C Div

about.htmlCtrl+A 3 22- 44
Ctrl+Vindex.
html about.html 22-42

图22-44 添加Div标签并输入文本

图22-42 复制并粘贴页面 Step 4 idjay Div
Enteriddomsters
Step 2 about.html class
Div content
section Div

3

<ul> #domsters 22- 45
<ul id="internalnav">
#jay
22- 43

图22-43 修改Div content区块的文本并制作列表 图22-45 添加Div标签并输入文本
Step 3 Div content</ul>
Step 5 iddomsters Div
442

</div>Enter 22- 46 Step 7 about.html
Ctrl+S </head>Enter
about.js

22- 48

图22-46 制作无序列表 图22-48 链接JavaScript脚本文件
Step 6 about.js
Step 8 global.js
showSection prepareInternalnav
swfobject_modified.js
22- 47
scripte

about.html22-49

图22-47 声明函数 图22-49 链接JavaScript脚本文件并查看其代码
Step 9 Ctrl+SF12

22-50

22- 51

443

图22-50 没有单击链接的效果 图22-51 单击链接的效果

22.3 HTML技术 Div+CSS JavaScript
的应用 的应用 的应用

JavaScript
JavaScript

After \\22\\
\\22\\photos.html
\\22\

444

Step 1 photos.html
index.html
Ctrl+ACtrl+C

22- 52

图22-54 输入标题文本及正文内容
Step 4 Enter

图22-52 复制index.html页面的内容 // 55
Step 2 photos.html images/photosthumbnail_01.
jpg 22-
Ctrl+ACtrl+V

22- 53

图22-55 选择图像

Step 5 F2

Step 3 图22-53 粘贴复制内容 22- 56
photos.htmlDiv content
读书笔记

Delete

? 22- 54

445

Step 8 Hyperlink
images/photos/01.JPG

22-59

图22-56 设置图像属性 图22-59 设置图像链接

Step 6 thumbnail_03.jpg Step 9 3
thumbnail_02.jpg images/
photos/02.JPG
thumbnail_04.jpg images/photos/04.JPG

22- 57 22- 60

图22-60 为其他图片制作链接

图22-57 插入其他图像并设置属性 Step 10 /
HTML/ 22- 61
Step 7 <ul ></ul>
HTML
Hyperlink 22- 58

图22-58 准备为插入的图片添加链接 图22-61 插入<ul></ul>标签
446

Step 11 /
HTML/ 22- 62

<li></li>3

图22-64 设置图片的显示方式

Step 14 Ctrl+Slayout.css
color.css

#imagegallery a
22- 65

图22-62 插入<li></li>标签列表

Step 12 < u l > < / u l > i d 63
imagegalleryCtrl+Sphotos.
html 22-

图22-65 设置图片链接的背景颜色

Step 15 Ctrl+Scolor.css
typography.css
#imagegallery li

22- 66

图22-63 完成photos.html页面结构的制作

Step 13 layout.css
#imagegallery li

22- 64

读书笔记

图22-66 设置列表项目无符号

447

Step 16 Ctrl+Stypography.css Step 17 Ctrl+Sphotos.js
script
photos.jsshowPic()prepare photos.html
Placeholder()prepareGallery() </head>Enter
photos.js
22- 67

22- 68

图22-68 链接photos.js文件

Step 18 global.js
swfobject_modified.jsphotos.
html 22- 69

图22-67 声明函数 Step 19 图22-69 链接其他文件
showPic() 22-70 Ctrl+SF12
;
preparePlaceholder() 22- 71
placeholder.pngprepareGallery()
01.jpg 02.jpg 03.jpg 04.jpg

448

图22-70 预览效果 图22-71 鼠标单击效果

读书笔记

22.4 Dreamweaver CC HTMLDiv+CSS

3 449
JavaScript

22.4.1

22-72Dreamweaver CCCSS
JavaScript
JavaScript
JavaScript

\\22\\ 图22-72 “分店信息”网页效果
\\22\ \\22\\live.html

22.4.2

22-73Dreamweaver CC
CSScontact.js
JavaScript

450

\\22\\ 图22-73 “在线咨询”网页效果
\\22\ \\22\\contact.html

读书笔记

451

454
Chapter 23

474

Chapter 24

精通篇

Proficient

>>>

精通篇/Proficient Chapter

23 24

454

23.1 JavaScript

JavaScript1
JavaScriptJavaScript

23.1.1  JavaScript 2.

JavaScript 23-1onClick="new_window()"
onClickEvent
Function new_window()

23-1

JavaScript Dreamweaver CC

图23-1 JavaScript代码的应用 23.1.2  JavaScript

JavaScript
JavaScript
JavaScript

1.

<script> </script>

JavaScript JavaScript JavaScript 6
JavaScript

1. 11.36 193.56
True
function JavaScript
JavaScript False
function
23-2

图23-2 定义函数 "Dreameaver CC and JavaScript" "123456"

在函数名称的括号中，还可以输入数值、字母等作 "Dreamweaver CC and Flash CC and PhotoShop CC
为定义函数的参数，在引用时进行接收，如果读者
对函数感兴趣，可参考专门介绍函数的书籍。 "

JavaScript Null

Null

455

JavaScript/ JavaScript Web
2. HTML

JavaScript 5.
4 JavaScript

3. JavaScript
JavaScript
4.
JavaScript JavaScript
JavaScript
6.
23.2 HTML5 JavaScript

canvasDreamweaver CC canvas
canvas
\\23\.html
23.2.1  \\23\

Dreamweaver CCcanvas Dreamweaver CC
JavaScriptJavaScriptcanvas 23-3

456

Step 3 Enter23-6

JavaScript document.

getElementByID

图23-3 代码与绘制效果 得到画布元素并将其赋值给定义的变量rt

Step 1 Dreamweaver CC Ctrl+S 图23-6 定义变量
HTMLHTML Step 4 E n t e r v a r t x = r t .
getContext("2d");getContext
.html Enter
tx.fillStyle="#ffccff"; tx.fillRect(50,25,100,50);
23-4 23-7

图23-4 切换到“代码”视图 图23-7 查看代码

Step 2 < b o d y > < / b o d y > 在canvas元素中绘制图形，只支持2D，即二维绘
<canvas id="rectang" width="200" 图，而fillRect方法则是指定要绘制矩形的位置和
尺寸，其位置由前两个参数指定，后两个参数决
height="200"></canvas> 定绘制图形的宽度和高度值。
rectang200

23-5

Step 5 Ctrl+S Opera
23-8

图23-5 代码及效果 图23-8 查看效果

457

? 图23-10 代码及效果
Enter23-11
Dreamweaver CC
HTML5

ChromeIE 9

Step 2

23.2.2 

Dreamweaver CC canvas

beginPath arc closePath fill

\\23\.html 图23-11 绘制圆的代码
\\23\

Dreamweaver CC

23-9 在代码中使用到的arc方法的主要语法为：tx.arc
(x,y,radius,startAngle,endAngle,anticlockwise);，其
中，参数x、y是绘制图形的起点坐标；radius参
数为绘制圆形的半径；starAngle参数为开始的角
度；endAngle参数为结束的角度；anticlockwise
参数为是否按顺时针方向进行绘制。

Step 3 Ctrl+SOpera
23-12

图23-9 绘制效果

Step 1 Dreamweaver CC Ctrl+S
HTMLHTML
图23-12 预览效果
.html

<canvas id="myRuan" style="border:1px solid #F99" 23.2.3 

width="300" height="200"></canvas> Dreamweaver CC
moveTo
myRuan1px solid #F99

300200 23-10 lineTo stroke

458

moveTo(x,y) Step 2 < b o d y > < / b o d y >
(x,y) Enter
lineTo(x,y) moveTo
myLine1px solid #ccc200
moveTo 23-15
(x,y)
图23-15 定义画布的代码
stroke
Step 3 Enterml
\\23\.html
\\23\ mltx

Dreamweaver CC 2dmoveTo

23-13 (0,0) l i n e To

stroke

23-16 Ctrl+S

23-17

图23-16 代码 图23-17 效果

23.2.4 

图23-13 绘制效果 Dreamweaver CC
Step 1 Dreamweaver CC
1.
HTMLHTMLCtrl+S
.html Dreamweaver CC
23-14 createlinearGradientcanvasGradient
addColorStop
图23-14 新建HTML页面并保存网页
createlinearGradient 4 x1 y1
x1 y1 x2 y2 y2

x2

459

addColorStop 40030023-20
position colorposition
图23-20 定义画布
0 10 position0.5 Step 3 <head></head>
1 JavaScript
23-21
\\23\.html
\\23\

Dreamweaver CC

3
3
23-18

图23-18 绘制效果 图23-21 定义JavaScript脚本并绘制线性渐变

Step 1 Dreamweaver CC Ctrl+S JavaScript
HTMLHTML <body></body>
<head></head>JavaScript
.html
HTML
23-19

Step 4 Ctrl+S
23-22

Step 2 图23-19 创建网页并保存 图23-22 渐变效果
460 Entermylgc

在绘制线性渐变时，所绘制的位置不能超过画布
的大小，因为超过画布大小后，所超出的线性渐
变将不会显示。

2.

Dreamweaver CC

createRadialGradient 图23-24 创建网页并保存

6 x1 y1 r1 x2

y2 r2x1 y1 r1 3 Step 2 <body></body>

x1,y1r1x2 y2 r2 Entermyggc

3x2,y2r2 400300 23-25

Dreamweaver CC
createRadialGradient

addColorStop

\\23\.html 图23-25 定义画布
\\23\
Step 3 <head></head>
Dreamweaver CC JavaScript
23-26
canvasGradient
23-23

图23-23 绘制效果

Step 1 Dreamweaver CC Ctrl+S 图23-26 定义JavaScript脚本并绘制径向渐变
HTMLHTML
在绘制径向渐变时，所添加的位置和颜色不同，
.html 会达到不一样的渐变效果。

23-24 461

23.3 CSS3 CSS3

CSS3 CSSDreamweaver CC Step 1 Dreamweaver CC Ctrl+S
Dreamweaver CC CSSDiv HTMLHTML
CSS3CSS3
border.html
23.3.1 
23-28
Dreamweaver CCborder-color
Dreamweaver 图23-28 新建网页并保存
Dreamweaver CCCSS3 Step 2 <body></body>
border-color
Enter<div></div>
border-colorborder- 23-29
color:<color>;
图23-29 定义层
border-color Step 3 <head></head>
CSS34 <style type="text/css"></style>
CSSCSS23-30
border-top-color Ctrl+S

border-right-color

border-bottom-color

border-left-color

\\23\bg.jpg
\\23\border.html
\\23\

Dreamweaver CC
border.htmlborder-color
23-27

图23-27 绘制效果 图23-30 定义CSS样式
462

<div></div> 23-32

对于本例中所用到的4个边框属性，如果其颜色
不同，则可设置4条不同颜色的边框，但CSS3中
的border-color增强功能并没有得到各大浏览器的
支持，目前只有Mozilla Gecko引擎支持，即火狐
浏览器支持该属性的引用。

23.3.2  aa.jpg 图23-32 新建网页并保存

Dreamweaver CCborder-image Step 2 <head></head>
border-color <style type="text/css"></style>
border-image:url(aa. CSSCSS23-33
jpg) 80n-repeat; Ctrl+SOpera
80

\\23\bg_border\
\\23\bg_border.html
\\23\

Dreamweaver CCbg_
border.htmlborder-image

23-31

图23-33 定义CSS样式

23.3.3  border-image

Dreamweaver CC

图23-31 绘制效果

Step 1 Dreamweaver CC Ctrl+S
HTMLHTML bg_border.html

<body></body>Enter \\23\a1.png
\\23\bg_radius\bg_radius.html
\\23\

463

Dreamweaver CCbg_ Step 3 Enterli
border.htmlborder-image CSS23-37Ctrl+S
23-34

图23-34 绘制效果

Step 1 Dreamweaver CC Ctrl+S
HTMLHTML
bg_Radius.html

<body></body>Enter 图23-37 为li元素定义CSS样式
23-35
其中，-moz-、-webkit-和-o-是指用Mozilla
图23-35 新建网页并创建项目列表 Gecko、Webkit和Presto作为引擎的浏览器才支持
Step 2 <head></head> border-image属性，目前IE浏览器暂时还不支持
<style type="text/css"></style> border-image属性，也没有定义的私有属性。
ulCSS23-36
23.3.4 
图23-36 为ul元素定义CSS样式
464 Dreamweaver CC

Dreamweaver CCborder-radius
border-radius

1. border-radius
Dreamweaver CCCSS3border-

radius
border-radius
border-radius:none|<length>{1,4}[/<length>{1,4}]?

none

<length> Step 1 Dreamweaver CCHTML
border_radius.html
{1,4} border-radius
<body></body>Enter
2.
border-radius <div></div> 23-39
border-radius4

border-top-right-radius

border-bottom-right-radius 图23-39 新建网页并添加层
border-bottom-left-radius
border-top-left-radius Step 2 <head></head>
<style type="text/css"></style>
DivCSS23-40Ctrl+S

border-radius4 Webkit Presto
Mozilla Gecko border-

-moz-
-webkit- -o- IE 9
radius

border-radius border-

\\23\border-radius.html
\\23\border-radius

HTML
radius23-38

图23-40 为Div元素定义CSS样式

?

border-radius 23-42
23-41border-radius
图23-38 圆角效果
border-radius

465

border- 为border-radius属性设置4个参数值时，其顺序
radius 是左上（top-left）、右上（top-right）、右下
（bottom-right）、左下（bottom-left）。
图23-41 不同属性设置的圆角代码
读书笔记

图23-42 不同代码设置出的相同效果

23.4 CSS

Dreamweaver CCCSS3Multiple Columns

23.4.1  <column-count>

Dreamweaver CC Step 1 Dreamweaver CC column.html
position
Div float 23-43
columns
目 前 只 有 We b k i t 引 擎 的 浏 览 器 才 支 持 - w e b k i t -
columns columns私有的属性，而其他各大主流的浏览
器都还不支持该属性的应用。另外，columns
1. columns 属性的初始值可根据元素的个别属性而定，适
columns 用于不可替换的块元素（<div>）、行内元素
Dreamweaver CC （<span>）和单元格，但表格除外。

columns:<column-width>|| columns
<column-count>;
\\23\columns.html
<column-width> \\23\columns.html
\\23\columns
466
columns.html
columns3

图23-43 新建网页并添加层 图23-45 查看效果 column-

Step 2 2.
h1CSS
bodyCSS-webkit- widthcolumns <column-width>
columns:250px 3; columns:250px 3;23-44
Webkit
Mozilla Gecko

column-with:<length>|auto;

<length>

定义页面列数 auto

3.

column-countcolumns<column-

count>Webkit Mozilla Gecko

图23-44 定义页面列数 column-countcolumn-count: <integer>
|auto;
为页面定义的列数及宽度，会随着浏览器的大小
而改变。 <integer>
0
Step 3 C t r l + S auto
Opera 23-45

467

4. <style>
colmn-gap column-rule-style
<color>
colmn-gap:normal|<length>; column-rule-color
normal
1em <transparent>
<length>
设置边框样式的参数<style>，包括10种边框
Webkit 样式，分别为none、hidden、dotted、dashed、
Mozilla Gecko solid、double、groove、ridge、inset和outset，其
具体作用请参考3.2.3节中的边框样式介绍。
5.
\\23\columns.html
column-fill \\23\columns.html
column-fill:auto|balance; \\23\

auto 2px
balance 23-46

23.4.2  图23-46 设置边框样式效果

Dreamweaver CCcolumn-rule Step 1 Dreamweaver CCcolumns.html
column-rule:<length>|<style>|<color>|
body CSSEnter
<transparent>; 23-47
<length>
column-rule-width

468

图23-47 打开素材网页并定位 23.4.3 

Step 2 CSS 23-48 Dreamweaver CC
CSS column-span
line-height:2.5em;
column-span:1|all;

1
all
Z

We b k i t
23-50column-span
23-51Opera

一级标题和二级标题的跨列设置

图23-50 打开素材网页并定位

图23-48 设置列间距及行高 图23-51 预览跨列效果
Step 3 Enter
CSS23-49 23.4.4 
Ctrl+S
Dreamweaver CC
图23-49 设置边框样式并保存网页

469

Dreamweaver CC 素材网页是使用float属性进行定位的，因此，其
各模板会根据浏览器窗口变小，而将其模块移到
displaybox inline-box 下一行显示。

\\23\box.html Step 2 CSS
\\23\box.html 23-54
\\23\

box.html <div
<div id="main"> <div id="right">
box3
id="left"> <div id="content">
CSSfloat
23-52

图23-52 效果 图23-54 启用盒模式
Step 3 rightCSS
Enter
#left,#content,#right 23-55

Step 1 Dreamweaver CC box.html
23-53
#left CSS
Enter

图23-53 打开素材网页 图23-55 绑定3列元素为一个盒子整体布局的CSS
470 Step 4 #left CSSfloat:left;

/* */
23-56

Webkit -webkit-box-flex
Mozilla-moz-box-flex
23-58#content CSS
box-flex-moz-box-flex:1; -webkit-
box-flex:1

图23-56 注释#left中的float属性 #right 图23-58 自适应大小的效果

Step 5 #content 2.
CSSfloat:left;float
23-57 box-ordinal-group
Ctrl+S
box-ordinal-group:2;
2

图23-57 注释代码并保存网页 box-ordinal-group属性也会根据不同的浏览器
产生不同的属性，如火狐浏览器使用-moz-
1. box-group属性，Opera或Safari浏览器则会使用
Webkit-box-ordinal-group属性。
box-
flex 3.

box-flex Dreamweaver CC
box-flex box-orient
1
box-orient:horizontal|
vertical

horizontal

vertical

471

\\23\box-orient.html -moz-
\\23\box-orient.html
\\23\ box-orient:vertical; -webkit-box-orient:vertical;

box-orient -moz-box-orient:horizontal; -webkit-box-
23-59
orient:horizontal;

box-orient.html

23.4.5 

box-pack box-align

Firefox -moz-box-pack

-moz-box-alignSafari

-webkit-pack -webkit-align

图23-59 垂直排列效果 start horizontalbox-
pack
Step 1 Dreamweaver CCbox-orient.html box-align
23-60Dreamweaver CC

center horizontal
box-pack
#main CSS box-align
Enter

end horizontalbox-
pack
box-align

图23-60 打开素材效果 vertical start center end

Step 2 -webkit-box- start box-pack
-moz-box-orient:vertical; box-align
orient:vertical;23-61Ctrl+S

center horizontal

box-pack

box-align

end horizontalbox-
pack
图23-61 添加垂直排列样式
472

box-align 读书笔记
·

Dreamweaver CC
text-align
vertical-
alignDreamweaver CC
box-alignhorizontal

知识大爆炸
——渐变效果

Dreamweaver CC CSS
CSSWebkit
WebkitGeckoCSS Gecko

1. Webkit

WebkitSafari 4
Webkit-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

<type> linear radial

<point> X Y
left right
topbottom

<radius>

<stop> 3colorstop(value,

color value)color-stop

01.00%100%

2. Gecko

Firefox3.6GeckoWebkit

Gecko-inear-gradient([

<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

<point>

<point>center

<angle> deggradrad

<stop> color-stop

473

精通篇/Proficient Chapter

2423

474

24.1 同的 24.1.2 

24.1.1  3
24-1
1.
3 图24-1 色相的基本图

2. 24-2
475

图24-2 明度变化图 图24-4 冷色调的网页

0
24-3

24-5

图24-3 彩度变化图

24.1.3  图24-5 中性色调的网页
24-6
RGB

24-4 图24-6 暖色调的网页
476

24.1.4  2.
24-8
1.
24-7 图24-8 明度对比图

图24-7 色相对比图

在进行色相的调和时，除了调整色彩之间的明度
变化外，还可以增加对比色来使整个色彩更加柔
和。另外，如果在调和各邻近色时，由于色相变
化不明显，容易显得单调，可改变明度和彩度，
让色彩变得活泼。

477

3. 1.
24-9 3

24-11

图24-9 彩度对比图

24.1.5  68 图24-11 邻近色网页

5 2.
10 24-12
122424-1012
24 图24-12 互补色网页
在互补色中还有一种分列互补色是由两种或3种
图24-10 12色和24色色相环图 颜色构成的。在色相环中，与某色夹角在90°内
478 的颜色被称为补色，而与某色构成180°角（即
在对立位置）的颜色被称为对比色。

3. 24-14

3
24-13
3

图24-13 三色组

24.1.6 

图24-14 网页安全色

Red 24.1.7 

GreenBlue 0 偱
66153
0051 33102 99204

CC255 FF 216

2106

?

479

Logo banner
24-16Logo

24.1.8 

图24-16 Logo颜色相反的网页

24-15 CI VI
图24-15 主色为黑色的网页
24.1.9 
480
Bgcolor #F1FAFA

Bgcolor # E8FFE8
Bgcolor #E8E8FF

Bgcolor #8080C0 Bgcolor #479AC7
Bgcolor #E8D098 Bgcolor #00B271
Bgcolor #EFEFDA Bgcolor #FBFBEA
Bgcolor #F2F1D7 Bgcolor #D5F3F4
Bgcolor # 336699 Bgcolor #D7FFF0
Bgcolor #6699CC Bgcolor #F0DAD2
Bgcolor #66CCCC Bgcolor #ddf3ff
Bgcolor #B45B3E

24.2

24.2.1  24-17

图24-17 字体明确的网页图

24-18

481

2.
24-20

图24-18 创新性网页 图24-20 字体设计网页

在设计页面时，需注意的是在同一页面中，如果
字体种类少，版面雅致，则有稳定感；字体种类
多，则版面活跃，丰富多彩。设计者则应该从网
站的类型和表现内容来考虑采用哪种方式。

24.2.2 

ptpx

1. 12
9
24-19 ?

3

图24-19 字号设置的网页效果
482

3.

10:12
1012

图24-21 文字样式设置

5.

24-22

行距可以用行高（line-height）属性来设置，建
议以磅或默认行高的百分数为单位。例如｛line-
height:20pt｝、｛line-height:150%｝。

4.

24-21 图24-22 文字颜色设置
483
24.3

24.3.1  3.
24-24
1.

24-23 图24-24 正文分栏分标题

图24-23 文字图形化

2.

24-25
484

图24-25 绕图排文字 24.3.3  骼
骼
1.
24.3.2  骼

24-26

1.

2.

图24-26 多种分栏方式的网页

2.
3.

485