\\2\tex\ 图2-37 全选与复制文本
\\2\text.html
\\2\ Step 3
text.htmltext.txt Ctrl+S
text.html 2-38
2-35
图2-38 保存网页文档
图2-35 复制文字效果
Step 1 Dreamweaver CC/ 按Ctrl+V快捷键也可以将文字粘贴到网页文档
中，如果按Shift+Ctrl+V组合键，则可以打开
2-36 “选择性粘贴”对话框，在该对话框的“粘贴
为”栏中可选中不同的单选按钮，设置粘贴的方
式，如图2-39所示。
图2-39 选择性粘贴
读书笔记
图2-36 打开网页文档
Step 2 text.html
text.txtCtrl+A
Ctrl+C
2-37
36
? 4
HTMLUTF-8 2.
GB2312 Dreamweaver CC <br>
Shift+Enter
HTML
EnterHTML<P>
2-41
GB2312 /
2-40
图2-40 设置编码格式 图2-41 插入换行与分段符
2.3.2 在网页文档中添加常见的符号，可以选择“插
入”/“字符”命令，在弹出的子菜单中选择不同
1. 的命令，来插入相应的字符。
Space4
2.3.3
//
HTML Dreamweaver CC
1.
Dreamweaver CC
/
2-42
37
图2-42 插入日期 HTML
<hr>
12
24 2
2. HTML
1 2-44
Dreamweaver CC
图2-44 设置水平线的属性
HTML
/ HTML
2-43
<hr align="center"
图2-43 插入水平线 width="650" size="20" noshade color="#fff">
38 650
20
2-45
图2-45 设置水平线的属性
3HTML
Dreamweaver CC
HTML
align
color
noshade
size
width
2.3.4 2.3.5
2-462-47 Dreamweaver
HTML
图2-46 无序列表 CSS
图2-47 有序列表 1. HTML
Dreamweaver CC HTML
/ 2-49
/
图2-49 HTML“属性”面板
HTML
2-50
HTML </ol><ul><li> 图2-50 设置字体格式
“格式”下拉列表框中包括无、段落、标题
<ol><li></li> 1～标题6和预先格式化几个选项。
</li> </ul>
2-48 16
图2-48 无序和有序列表 39
CSS
CSS \\2\font\font.html
CSS3 \\2\font\font.html
\\2\
font.html
2-52
2-53
图2-52 原图效果
2. CSS 图2-53 设置后的效果
CSS Step 1 Dreamweaver CCfont.html
HTML2-51
11
图2-51 CSS“属性”面板 2-54
CSS
图2-54 设置文本格式
40
Step 2
2-55
图2-55 设置内缩区块
Step 3 CSS
2-56
图2-56 设置文本字体 图2-58 设置标题字体
Step 4 如果要删除添加的字体，则可以在“字体列表”
列表框中选择需要删除的字体，单击“删除”按
2-57 钮 ，可删除所选字体。除此之外，还可以单击
“添加”按钮 、“上移”按钮 和“下移”按
钮 ，添加字体以及对添加的字体进行排序。
Step 6
CSS
2-59
图2-59 吸取颜色
Step 7 Ctrl+S IE
/
IEXPLORE
2-60
Step 5 图2-57 添加字体 图2-60 预览效果
GIF
2-58
2.4
JPEG
41
2.4.1 2.4.2
3 GIF JPEG JPG \\2\family\family.html
PNG \\2\family\family.html
\\2\
1. GIF
family.html
GIF Graphics Interchange Format 2-612-62
LZWJPEG
GIF256 PNG
GIF
GIF GIF
GIF GIF 图2-61 原图效果
2. JPEG
JPEG Joint Photographic Experts Group
GIF
3. PNG 图2-62 设置后的效果
PNGPortable Network Graphic
GIF
Fireworks
42
Step 1 family.html
/
2-63 / 插入图像除了选择“插入”/“图像”/“图像”
命令外，还可以在“插入”浮动面板的“常
用”分类下，单击“图像”按钮 右侧的下拉按
钮 ，在弹出的下拉列表中选择“图像”选项或
按Ctrl+Alt+I组合键，打开“选择图像源文件”对
话框，在其中插入所需图像，如图2-66所示。
图2-63 选择插入图像命令
Step 2
top_adv
2-64
图2-64 选择图像 图2-66 插入图像
Step 3 插入图像后，在HTML标签代码中体现为<img>
标签。
Ctrl+S
2-65 2.4.3
HTML
1.
2-67
图2-67 图像属性面板
图2-65 插入图像并查看效果 ID VBScript
JavaScript
43
Src 2-70
Class 图2-70 调整图片亮度和对比度
2-68 2-71
图2-68 图片品质的调整 图2-71 锐化图像
px
Enter2-69
3
图2-69 裁剪图片 2.6.2
/
44 2. HTML
HTML
HTMLwidth
height<img src
="aa.jpg" width="200" height="200">
200
alt index.html
<img 2-73
src="aa.jpg" alt=""> 2-74
border
<img src="img/aa.jpg" style="border:50px solid
#900"/>50
#9002-72
图2-72 添加边框 图2-73 原始图像
align
<img src="img/aa.jpg" align="left"/>
hspace vspace
<img
src="img/aa.jpg" hspace="10" vspace="10"/>
10
10
不管是使用“属性”面板还是HTML代码设置图 图2-74 鼠标经过的效果
像的属性，最重要的属性都是src、宽（width）
和高（height）。 Step 1 index.html
/
2.4.4 2-75 /
\\2\sbjg_img\index.html 图2-75 选择“插入”命令
\\2\sbjg_img\index.html
\\2\
45
Step 2 /
IEXPLOR
2-76 IE2-79
图2-76 单击“浏览”按钮
Step 3 图2-79 鼠标经过的原始图像和经过时的效果
a.jpg
2-77 如果在“插入鼠标经过图像”对话框中取消选中
复选框，则在浏览器中用鼠标光标
图2-77 选择原始图像
指向原始图像并显示鼠标经过图像后，鼠标经过
Step 4 的图像才会被浏览器存放到缓存中。如果选中该
复选框，在浏览网页时，鼠标经过的图像则会自
b.jpgURL 动下载到本地缓存中，以便在下次浏览该网页时
# 提升网页加载的速度。
2-78 插入鼠标经过图像还可以通过在“插入”浮动面
板的“常用”分类中，单击“图像”按钮 右侧
Step 5 图2-78 设置鼠标经过图像参数 的下拉按钮 ，在弹出的下拉列表中选择“鼠标
46 Ctrl+S 经过图像”选项，打开“插入鼠标经过图像”对
话框，在其中进行设置即可。
2.4.5 Fireworks HTML
Fireworks HTML
Fireworks HTML
// Fireworks HTML
Fireworks HTMLFireworks
HTMLFireworks HTML
Fireworks HTML2-80
图2-80 “插入Fireworks HTML”对话框 Fireworks HTMLFireworks
HTMLFireworks HTML
Fireworks HTML Fireworks HTML
2.5 如果在“插入Fireworks HTML”对话框中选中
复选框，则会在插入Fireworks HTML
Edge AnimateFlash
Dreamweaver CC 文件后删除原文件。
Edge AnimateFlash
EdgeAnimate
2.5.1 Edge Animate .htmlEdge
Animate2-81
Dreamweaver CCEdge Animate
Adobe Edge Animate 图2-81 最终效果
1. Edge Animate
Edge Animate
Dreamweaver CC
Edge Animate
\\2\Edge\EdgeAnimate.html
\\2\Edge Animate
读书笔记
47
Step 1 EdgeAnimate.html
2-82
图2-82 新建网页 图2-84 预览插入的Edge Animate文件
Step 2 2. Edge Animate
<body></body>Enter Edge Animate
<object id="EdgeID" type="text/html" width="600" Edge Animate
height="270" data-dw-widget="Edge" data="text. Edge
html"></object>Edge Animate2-85
2-83
图2-85 Edge Animate文件的“属性”面板
Edge Animate
ID Edge Animate
图2-83 原始效果
Class Edge
Animate
type object
data-dw-widget="Edge" Edge Animate
data="text.html"
2.5.2 HTML5 Video
Step 3 Ctrl+S
Edge An HTML5
/
Firefox HTML5 Video
2-84
在Dreamweaver CC中除了使用代码添加Edge Animate 1. HTML5 Video
作用外，还可选择“插入”/“媒体”/“Edge Dreamweaver CCHTML5 Video
Animate作品”命令或按Shift+Ctrl+Alt+E组合键，打
开“选择Edge Animate包”对话框，然后选择需要 HTML
插入的Edge Animate文件即可。
HTML5
48
Video/ / Step 1 Dreamweaver CC
HTML5 VideoHTML5 Video HTMLTVideo.html
HTML5 Video HTML5 Video
HTML5 Video2-87
HTML
<body></body>
HTML5 Video
<video controls></video>
除了上述方法，还可按Shift+Ctrl+Alt+V组合键， 图2-87 插入Edge Animate文件占位符
快速插入HTML5 Video文件。 Step 2 Edge Animate
2. HTML5 Video 2-88
HTML5 Video
图2-88 单击“浏览”按钮
HTML5 Video
Step 3
\\2\Video\TVideo.html myVideo
\\2\HTML5 Video
2-89
TVideo.html
HTML5 Video
2-86
图2-89 选择需要插入的视频文件
Step 4
图2-86 插入效果 2-90
49
CSS
WH
HTML5 Video
图2-90 设置自动播放视频文件
Step 5 WH Alt 1 Alt 2
500500
2-91 ×500
HTML5 Video
HTML5 VideoAlt 1
Alt 2HTML5 Video
Alt 1
Alt2
Poster
Step 6 图2-91 设置视频文件的宽和高 Title
IE Ctrl+SF12 HTML
2-92
Preload
3
noneauto
metadata
图2-92 查看效果 Flash HTML5
SWF
HTML5 Video
ID 2.5.3 HTML5 Audio
HTML5 Video
HTML5 Audio HTML5
Class HTML5 Video
50
HTML5 2.5.4 Flash SWF
1. HTML5 Audio Flash
Flash
Dreamweaver CCHTML5
HTML5 1. Flash
HTML Dreamweaver CCHTML5
HTML5 FlashFlash
.fla .swf .swt .flv
/ / .swf
HTML5 Audio
.fla FlashFlash
HTML5 FlashFlash.swf
HTML5 Audio
.swf FlashFlash
HTML5 Flash
<body></body><audio
controls></audio>2-93 Flashfla.swf
.swf
图2-93 使用代码插入HTML5音频文件 Swish3D Flash Animator
.swt Flash
2. HTML5 Audio .swt
HTML5 HTML5 DreamweaverFlashFlash
HTML5 Video .swt
2-94HTML5 .flv
图2-94 HTML5音频文件的“属性”面板 Flash
QuickTimeWindows Media
.flv
2. Flash
Dreamweaver CCFlash
HTML5
Flash
Flash
\\2\Flash\Flash.html
\\2\Flash
51
Flash.html
Flash2-95 除了上述方法，还可按Ctrl+Alt+F组合键快速打
开“选择SWF”对话框，进行插入Flash文件的
操作。
Step 3
Flash2-98
图2-95 插入效果 Step 4 图2-98 完成插入Flash文件
Dreamweaver CCFlash Flash
Step 1 / Flash SWF Ctrl+S
.html 2-99
/
2-96
图2-96 新建网页并选择插入Flash的命令
Step 2 SWF
FlashTCFlash
2-97
图2-99 播放Flash文件
Flash
FlashID Flash
Flash Flash
Flash
图2-97 选择TCFlash文件 Flash
52
Flash FVideo.html
Flash Flash Video2-100
Flash
Flash 图2-100 视频效果
Flash
Flash Flash Step 1 FVideo.html
Class Flash
CSS Flash // FLV2-101
Flash
Flash Flash
Flash
Flash
Flash 图2-101 新建网页并选择命令
Wmode Step 2 FLV
Flash
Flash FLV
. flv 2-102
Flash
Flash
2.5.5 Flash Video
Flash.flv Flash
FlashFlash
Flash
Flash Video 图2-102 选择视频文件
\\2\FVideo\FVideo.html
\\2\Flash Video
53
FlV
在“插入FLV”对话框中，可在URL文本框中输
入Flash视频文件的路径及名称。
Step 3 FLV Flash URL .flv
Halo Skin 2180
.flv
Flash Video Flash
2-103 Flash
Flash
?
2-105Flash
HTTP
Flash Communication Server
图2-103 设置Flash视频的参数
Step 4 Flash
FLV
Ctrl+SF12
IE
Flash2-104
图2-105 流媒体界面
2.5.6
图2-104 查看效果
54
RealPlayer QuickTime
1. pc
Dreamweaver CC ptinmmcm%
// URL
URL
2-106 URL
Class CSS
55
图2-106 “选择文件”对话框及插件占位符 读书笔记
2.
Dreamweaver CC
2-107
图2-107 插件“属性”面板
2.6
Dreamweaver CC
2.6.1
1. Internet
2. 2.6.2
3 E-mail
Http:// 1.
2-108 / HyperlinkHyperlink
2-109
图2-108 绝对链接
图2-109 链接百度网页
jp.jpg ../ URL
/ 2-110
img/jp.jpg
图2-110 在“链接”下拉列表框中输入链接
../img/jp.jpg
\
56
HTML 1
<body></body><a href="
<a href="http://
"></a>
www.baidu.com"></a> 2-112
2-111
文本链接 单击链接
HTML代码
图2-112 图像链接
图2-111 通过HTML代码创建文本超链接
2
? HTML
4 2-113
2-1
target
2-1
target
在上一级浏览窗口中打开。这种方式 输入链接路径
常用于框架页面
_parent 热点工具
_blank 以新窗口的方式打开浏览器
_self 图2-113 热点链接
链接内容出现在应用链接的窗口或框
_top 架中。也是默认选项
在浏览器中的整个窗口中打开，会忽
略任何一个框架页面
2.
57
!</a>
[email protected]
4.
1
Dreamweaver CC
Dreamweaver CC
3. E-mail <a name="center"></a> 设计
center
2-115
E-mail E-mail 锚记图标
E-mail 命名锚记的代码
/
2-114
图2-115 命名锚记
图2-114 设置E-mail电子邮件 2
#
HTML
HTML #center center
<body></body><a
href="mailto: "> </a> HTML
href="mailto:[email protected]">
<a <a href="#center">
</a>
58
如果链接指向的是其他页面的锚记，此时就需要
在引用锚记时，添加锚记所在的网页名称或路
径，如<a href="index.html#center"></a>，表示引
用名为index网页上的锚记center。
5.
# 下载链接
6.
图2-116 下载链接
2
2-117
1
.gif .zip .rar
.jpg.txt
.exe
2-116
图2-117 音频链接
知识大爆炸
——HTML的简单应用以及SEO优化网页图像的技巧
1. HTML ; 2-2
#
&
59
2-2
& " ™ §
< & × ·
> < ™
> / ×
€ ¢ [
£ ]
2. € /
Dreamweaver CCHTML ± {
<marquee> ¥ {
</marquee> 2-3 marquee <marquee></
marquee>
2-3 。
direction 文字的滚动方向，包括 up、down、left 和 right4 个属性值，即设置文字方向向上、向下、向左和
向右
behavior 滚动方式，包括 scroll、slide 和 alternate3 个属性值，即设置文字滚动方式为循环、滚动一次和交
替滚动
scrollamount 设置滚动速度，如 <marquee scrollamount="3"> 文本内容 </marquee>
loop 设置是否循环滚动。如果 loop 的属性值为 1 表示只滚动一次，如果为 -1 则表示循环滚动
widthheight 滚动范围，表示在设置大小的范围内进行滚动
bgcolor 设置滚动文字的背景
hspacevspace 滚动空间
<marquee direction="up" scrollamount="3" height="120" bgcolor="#eee"></marquee>
3120px#eee
3.
Dreamweaver CC
HTML5
60
<bgsound src="Answer.mp4" loop="-1">
Answer.mp4
srcloop
4. HTML5
Dreamweaver CC
HTML5<audio
controls src=""></audio><audio controls src="video.mp4"></audio>
video.mp42-118
2-119
图2-118 插入HTML5音频代码 图2-119 音频属性设置
读书笔记
61
入门篇/Introductory
Chapter
0301 02 04 05 06 07 08 09 10 11 12
使用CSS样式美化网页
62
3.1 CSS 1
CSSCSSHTML .max3-1
CSSCSS .max
CSS 14
#93F
3.1.1 CSS
CSS Cascading Style Sheets
1. CSS
CSS 图3-1 定义类CSS样式
2ID
ID
CSSHTML ID CSS # .
ID
CSS HTMLID
HTMLID
CSS IDCSS3-2
IDCSS
HTML
10<p>10<p 引用CSS样式后的效果
style="font_size:14;color:#cbf"></p> 定义ID的CSS样式
CSS
<p>
2. CSS 4 定义ID
CSS<head></head> 图3-2 定义ID的CSS样式
classCSS 3
HTML
CSS
63
CSSHTML 3.1.2 CSS
3-3img
CSS CSS
重定义img标签代码 Dreamweaver CC CSS
插入img图片原有格式代码 CSS
图3-3 重定义img标签代码及效果 1.
CSS
3-5
重定义img中的CSS样式表示设置图片的宽和高 选择器 声明
都为200像素，边框为3像素的实线，边框颜色为
墨绿色（#00767C）。 图3-5 CSS样式基本语法规则
4 2.
ID CSS
CSS
CSS3-4a
a:visited
3-6
图3-4 已访问超链接的CSS样式 图3-6 多个选择器的使用 CSS
已访问超链接的CSS样式代码分别表示字体为方 3.1.3 CSS
正流行体简体，字体大小为14像素，访问后的超
链接没有下划线，字体颜色为红色（#F00）。 Dreamweaver CCCSS
CSS
Dreamweaver CCCSS
/
Shift+F113-7
64
CSS
1.
Dreamweaver CC
CSS
图3-7 CSS设计器 \\3\ 例，
CSS
HTMLh1
CSS h1
CSS
Step 1 Dreamweaver CCHTML
@ <body>
CSS </body><h1></h1>
CSS / CSS
CSS 3-8
CSS设计器是与当前网页文档的上下文相关联 Step 2 图3-8 新建网页并打开CSS设计器
的，对于任何指定的页面元素，用户都可以查看 CSS CSS
关联的选择器和属性。即在CSS设计器中选择某
个选择器时，相关联的源和媒体查询将在各自的
窗口中高亮显示。
3.1.4 <style>
CSS
Dreamweaver CCCSS 3-9
65
源代码 #ccff00font-family text-align
font-weightbold
center 3-11
源项目
图3-9 定义“源”代码
Step 3
h1 图3-11 设置内部样式属性
h1 3-10
在属性列表框中设置后的属性会高亮显示，而未
被设置的属性则呈灰色状态，如果想在属性列表
框中只查看设置的属性，可以在按钮栏中选中
复选框，如图3-12所示。
图3-10 添加选择器 Step 5 图3-12 查看设置后的属性
CSS 3-13
Step 4
设置后的效果
66 属性及属性值代码
图3-13 查看效果
2. CSS
Dreamweaver CCCSS 3-16
CSS 图3-15 设置存储CSS路径及名称
\\3\ 3-14
HTML
Step 1 HTML
/ CSSCSS
CSS
CSS
CSS
/URL
图3-16 查看创建的CSS文件
图3-14 准备创建新的CSS文件 在“CSS设计器”浮动面板中创建CSS文件后，
可以使用创建内部样式的方法在“CSS设计器”
若在弹出的下拉列表中选择“附加现有的CSS文 浮动面板中设置属性值。
件”选项，则可打开“使用现有的CSS文件”对
话框（该对话框与“创建新的CSS文件”对话 Step 4
框相同，并且操作方法也相同，但功能有所变 <head></head>CSS
化），添加已经创建好的CSS文件样式表。 3-17
Step 2
CSS 3-15
style.css
Step 3 CSS CSS 链接CSS新样式文件的代码
/URL
图3-17 查看链接CSS文件的代码
67
CSS
<link href=" 3-18
" rel="stylesheet" type="text/css">
rel="stylesheet"
type="text/css"
CSS
/URL
CSS
CSS
3.2 CSS 图3-18 设置媒体查询的相关条件
CSS
CSS
CSS 图3-19 布局属性
3.2.1 CSS width
auto
CSS
3-19
读书笔记
68
height min-width relative bottom left
width 69
min-width top bottom left right
absolute
min-height top
max-width right
fixed
max-height min-height
float
margin clear
margin
overflow-x/overflow-y/
px
visible
margin属性的顺序为上、右、下、左，并且可 hidden
以分别用不同的属性代替。如margin-top表示
上；margin-right表示右；margin-bottom表示下； scroll
margin-left表示左。 auto
padding display
padding
visibility
Inherit
visible
hidden
z-index Z
opacity
opacity1
0
px 3.2.2 CSS
position
static CSS
HTML
3-20 line-height
Deamweaver
text-align
blink
text-decoration
underlineoverline
line-through
text-indent
h-shadow/v-shadow/
blur
text-transform
capticalize
uppercaselowercase
letter-spacing
图3-20 文本属性 word-spacing
color white-space
normalpre
nowrap3 normal
1
RGB
font-family pre
nowrap
font-style vertical-align
normalitalicoblique
3.2.3 CSS
font-variant
CSS
font-weight
font-size
70
3-21
ridge
inset
outset
分别设置边框颜色 border-radius
分别设置边框宽度
分别设置边框样式 3.2.4 CSS
CSS
3-22
图3-21 边框属性
border-collapse
border-spacing
Border-collapse
border-color
border-width 图3-22 背景属性
border-style background-color
none url
dotted gradient
3-23
dashed
solid
double
groove
71
图3-23 颜色调色板 默认情况下，浏览器在解析该样式时，将在显示
background-position 区域的左上角开始放置背景图像，并将图像平铺
至同一区域的右下角。
leftright center
top background-origin
fixed background-attachment
background-size fixedscroll
background-clip h-shadow/v-shadow/
background-repeat blur
no-repeat spread
repeat-x
4 3-24 color
inset
3.2.5 CSS
CSS
CSS
3-25
repeat
repeat-y
图3-24 设置背景重复方式 图3-25 其他属性
72
list-style-position
insideoutside
list-style-image Step 1 Dreamweaver CCfilter.html
list-style-type / CSS
3.3 CSS CSS
3-28
Dreamweaver CCCSSCSSCSS
CSS 图3-28 打开“CSS过渡效果”浮动面板
CSS
Step 2 2
3.3.1 CSS .middle_banner
Dreamweaver CC hover
/ CSS
CSSCSS 2 linear
3-29
CSS
\\3\CSSfilter\filter.html
\\3\CSSfilter\filter.html
\\3\CSS
filter.html
3-263-27
图3-26 原始效果
图3-27 设置后的效果 图3-29 设置过渡效果的参数
Step 3
73
background-image Step 5 CSS
CSS3-32
banner.jpg
3-30
图3-30 选择过渡时的图像 Step 6 图3-32 查看添加的CSS过渡效果
F12 Ctrl+S
Step 4 3-33
3-31
图3-31 创建过渡效果 图3-33 预览CSS过渡效果
hover
在属性列表框下方，可单击“加号”按钮 ，添
加多个属性值，如果不需要某个属性值，也可以
单击“减号”按钮 ，将其删除。
读书笔记
74
sms
sms CSS
CSS
Cubic-bezier x1,y1,x2,y2Ease
Ease-in Ease-out Ease-in-out linear 6
3-1
3-1
Cubic-bezierx1,y1,x2,y2 自定义 cubic 贝塞尔曲线 3.3.3 CSS
Ease 逐渐变慢
Ease-in 由慢到快 Dreamweaver CCCSS
Ease-out 由快到慢
Ease-in-out 由慢到快再到慢 Dreamweaver CC CSS
linear 匀速线性过渡 CSS
CSS CSS3-34
3.3.2 CSS 图3-34 删除CSS过渡效果
Dreamweaver CCCSS 在“删除过渡效果”对话框中选中 单选
CSS 按钮，则只会删除所选过渡效果设置的属性值，
CSSCSS
CSS
CSS
而不会将整个过渡效果删除。
知识大爆炸
——CSS的特殊效果的应用
1. CSS3 Flock
CSS3linear-gradientradial-gradient
Firefox
75
MozillaSafari ChromeWebKit OperaOperaIE
9.0
1
CSS
mozilla 3
toplefttop left
-moz-linear-
gradient(top,#D8F7FA,#5BE0E8)
Webkit 5 2 3
left top,left bottom45color-stop
0 0.51 2
-webkit-gradient(linear,center top,center bottom,from(#D8F7FA),to(#5BE0E8))
Opera mozilla
-o-linear-gradient(top,#D8F7FA,#5BE0E8)
2
CSS3Opera IE
mozilla -moz-radial-gradient(#ace,#f99,#2a0)
Webkit -webkit-radial-gradient(#ace,#f99,#2a0)
2.
CSS3box-shadow
text-shadowtext-shadowbox-shadow
{box-shadow:<length> <length> <length>?<length>?||<length>}3-35
设置方框阴
影代码
图3-35 设置方框阴影的代码及效果
76
3. CSSTransform
CSSTransformrotateskew
scaletranslateTransformtransform:none|<transform-
function>[<transform-function>]*none<transform-function>
3-2Transform-function
3-2 Transform-function
rotate rotate(<angle>) 通过指定角度旋转元素，如 transform:rotate(90deg) 表示对指定元素按 90°进行旋转
translate translate(x,y) 表示水平方向和垂直方向同时移动，如 transform:translate(10px,20px) 表示按水平方向
scale 移动 10 个像素，按垂直方向移动 20 个像素
skew scale(x,y) 表示水平方向和垂直方向同时进行缩放，如 transform:scale(10px,5px) 表示水平缩放 10 个
像素，垂直缩放 5 个像素
skew(x,y) 表示水平方向和垂直方向同时进行扭曲，如 transform:skew(20deg,40deg) 表示水平扭曲
20°，垂直扭曲 40°
读书笔记
77
入门篇/Introductory
Chapter
0401 02 03 05 06 07 08 09 10 11 12
页面布局
78
4.1 Step 2 5
4
HTML 400
0
4.1.1 4-2
Dreamweaver CC 图4-2 设置表格参数
1. Step 3 4
Dreamweaver 54-3
/
\\4\
45
Step 1
/
4-1
图4-3 表格效果
图4-1 选择插入表格的命令 px
%
除了使用菜单命令打开“表格”对话框，还可
以按Ctrl+Alt+T组合键或在“插入”浮动面板的 0px
“常用”分类下，单击“表格”按钮 ，打开
“表格”对话框设置插入的行数和列数。
79
1
2
1
Dreamweaver
2. HTML /
Dreamweaver
HTML
4-4 24-5 / /
3 2 <table>
表格的宽度和边框
表格的开始标签 单元格与文本之间的间距
单元格之间的间距 表格标题
行号的开始标 单元格标签
签与结束标签
表格结束标签
图4-4 表格代码
图4-5 表格效果
4.1.2 Shift Ctrl
2. /
/
1.
80
Dreamweaver Delete
// 3.
1
1
//
// /
/ 2
/ //
4-6 /
图4-6 “插入行或列”对话框
2
/ / 4-7
//
拆分单元格
//
/
图4-7 拆分单元格
81
4.
CellPad
CellSpace
如果要删除行高和列宽，可直接选择“修 Align
改”/“表格”/“减少行宽”或“减少列宽”命
令，即可清除单元格中多余的空白。 Border 0
4.1.3 CSS
Class
Dreamweaver
1. Fireworks
HTML
/ ?
4-8
图4-8 表格“属性”面板
CSS
/Cols
82
2. 4.1.4
4-9 Dreamweaver
图4-9 单元格“属性”面板
Wedding.html
\\4\Wedding\
\\4\Wedding\Wedding.html
\\4\Wedding.html
Wedding.html
单击该按钮，可合 4-10
并所选单元格。
4 图4-10 预览效果
5
/
%90%
Step 1 D r e a m w e a v e r C C 1
Wedding.html
Ctrl+Alt+T
4
780
0
4-11
83
Step 4 1
Ctrl+Alt+T 10
6 4-14
408
0
图4-11 创建表格
Step 2
dh_bg.jpg
banner.jpg
#ede9f74-12
图4-14 嵌套表格
Step 5 Ctrl
135
#17871e
Step 3 图4-12 插入图片 #fff 4-15
2 4-13
图4-13 拆分单元格 图4-15 设置单元格背景并添加文本
84
Step 6 2 4
#606060 6
1 4200
2
015.jpg 016.jpg 014.jpg 017.jpg4-16
图4-18 嵌套表格并插入图片
Step 9
#000000
80
#fff Ctrl+S
4-19
图4-16 设置文本并嵌套表格
Step 7
2 1438
1
#17871e
#606060
24-17
Step 8 图4-17 为嵌套表格添加并设置文本 图4-19 查看效果
12 4 3200
对于表格的嵌套使用，最好不要在一个单元格中
4-18 无限地嵌套表格，那样会使下载速度变慢，嵌套
表格个数宜在3个以下。
85
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited
- 1 - 50
- 51 - 100
- 101 - 150
- 151 - 200
- 201 - 250
- 251 - 300
- 301 - 350
- 351 - 400
- 401 - 450
- 451 - 500
- 501 - 506
Pages: