The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Home Explore 中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited
View in Fullscreen

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

Like this book? You can publish your book online for free in a few minutes!
Download PDF
Share

Related Publications

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by johntss124, 2022-08-10 22:32:39

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

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

Step 25 #ffffff Step 26 banner
0% 5 20-30
5
20-29

图20-29 设置投影样式 图20-30 查看最终效果

20.2 文件和图层 图像操作 文本元素
的应用 的应用 的应用

\\20\\\
\\20\.psd
\\20\

After

386

Step 1 .psd .psd Step 3
/ .png
20-33
20-31 #b2b2b2

20-34

图20-31 另存图像文件 图20-33 添加图标和文字 图20-34 添加分割线
2
Step 2 Step 4
Delete #b2b2b2#9999991

20-32 20-35

图20-35 设置矩形工具属性

Step 5
20-362

20-37

图20-36 绘制矩形 图20-37 栅格化图层

图20-32 删除并移动图层组 由于矩形图形在图像中所占的位置较小，建议用
户绘制矩形时，放大图像的显示比例。最好在能
够看到像素格子时绘制。

387

Step 6 20-38 4
20-39 Delete

图20-38 框选选区 图20-39 删除选区内容 图20-44 绘制高亮底纹 图20-45 输入文本
Step 7 Step 10
20-40
20-41 #ffffff

20-46

图20-46 设置导航

图20-40 绘制选区 图20-41 填充颜色 Step 11
Step 8 Shift+Alt 12
20-47

20-42 3
2

20-43

图20-42 复制灰色按钮 图20-43 绘制高亮按钮

Step 9 2 图20-47 绘制参考线
3
Step 12
#f0f0f020-44 20-48

20-45
388

其他的子页面与该页面的组成结构相同，只需在
该页面的基础上进行修改即可。

读书笔记

图20-48 添加图片展示区域的内容

20.3 切片工具 图片优化 切片存储
的应用 与输出 的应用

Flash

\\20\
\\20\

After

389

Step 1 .psd 20-51
2.psd

20-49

图20-49 对主页进行切片 图20-51 编辑输出设置
Step 4 Web
Step 2 / Web
Web index.htmlHTML
20-52

PNG-8
20-50

图20-52 设置存储选项

图20-50 优化图片

Step 3
390

Step 5 HTML
HTML 20-55
20-53

图20-53 查看效果

Step 6 .psd 图20-55 存储切片
2.psd
20-54 Step 8
20-56

图20-54 对子页面进行切片 图20-56 查看效果
当存储的位置相同时，images文件夹中将包含所
Step 7 / Web 有存储的图片。
Web
读书笔记
photo.html
391

20.4 图片 补间动画 文本添加 banner
的应用 的创建 与设置

banner
Flash CC

banner

.swf

\\20\banner .jpg

\\20\banner.flabanner.swf

After \\20\banner

Step 1 Flash CC/ .jpg 20-58

952 200#000000
20-57

图20-57 新建Flash文档 图20-58 导入图片到舞台
Step 3 20-59

Flash文档的大小与Photoshop中设计的banner大小 图20-59 查看导入后的效果
一致，可在输出的imags文件夹中查看banner的图
片尺寸，再根据其大小新建Flash文档。 Step 4 /

Step 2
Ctrl+Rbanner

392

20-67

20-60
# FFFFFF20-61

图20-60 创建影片剪辑元件 图20-61 设置填充颜色 图20-67 创建遮罩动画
20-62 /
Step 5
11 /
220-63

Step 9 3

图20-62 绘制圆形 图20-63 新建图层 # FFFFFF20-68
20-69
Step 6 1 80
21
20-64

Step 7 2 图20-64 添加元件到舞台
Ctrl+T 40

图20-68 设置文本属性 图20-69 输入文字
Step 10
20-651
40 20-70
20-66
20-71

图20-65 图形变形 图20-66 创建传统补间
Step 8 2
图20-70 分离文本 图20-71 分散到图层
393

Step 13 30 AED53C20-76
0°20-75

#

分离文本时，还可选择“修改”/“分离”命
令；分散到图层时，还可选择“修改”/“时间
轴”/“分散到图层”命令。

Step 11 图20-75 旋转文本 图20-76 修改文本颜色
20-72
Step 14 2 5
90 °
20-7735
0 °20-78

Step 12 图20-72 查看分散后的文本图层
20 3 °20-73
175
20-74 图20-77 编辑第25帧 图20-78 编辑第35帧
Step 15 2535

20-79
20-80

图20-73 变形文本 图20-74 查看舞台效果 图20-79 “之”文本动画
图20-80 “家”文本动画
读书笔记

394

Step 16 3 Step 20 5 70
45 20-85
20-81

图20-81 编辑文本 Step 21 / 图20-85 绘制斜线
Flash(. JPEG
Step 17 60 swf)HTML
20-82
10020-86

图20-82 创建文本补间动画

Step 18
20-83

图20-83 设置英文文本动画效果 Step 22 图20-86 发布设置
banner.swf Flash
20-87
Step 19

20-84

图20-84 清除帧

图20-87 查看Flash动画效果

395

20.5 元件新建 元件 编辑
与添加 修改 关键帧

.swfDreamweaver

\\20\\
\\20\.fla.swf
\\20\

After

Step 1 Flash CC/

619129
#e3d49220-88

图20-89 导入到库

Step 3 /

20-90

Step 2 图20-88 新建Flash文档
/ Flash

/

20-89 图20-90 新建图形元件

396

Step 4 1 . j p g Ctrl+T
Ctrl+T 50%20-96
30%20-91

30%20-92

图20-91 图片变形 图20-92 添加其他图片 图20-96 缩小图形元件比例
Step 5
20-93 Step 8 /
/ 20-97
/
/ 20-98

图20-93 水平排列图片

Step 6 图20-97 选择“左对齐”命令 图20-98 选择“垂直居中”命令
Step 9 20-99
20.0#000000
20-94

20-95

图20-99 对齐舞台

Step 10 60
20-100

图20-94 设置文本属性 图20-95 添加文本
Step 7 1
图20-100 插入水平线

397

Step 11 1 60 20-105
20-101

图20-105 拖动图形元件实例

Step 16 2 1 60

图20-101 创建传统补间动画 20-106

Step 12 1 1

1 2
20-102

图20-106 创建传统补间动画

图20-102 新建“图层2”

Step 13 /
20-103

Step 17 / JPEG
Flash(.
swf)HTML

10020-107

图20-103 粘贴图形元件实例

Step 14 2 1

1

20-104

图20-104 拖动图形元件实例

Step 15 2 60
1
图20-107 发布设置

398

Step 18 Flash 读书笔记
20-108

图20-108 查看效果

20.6 创建网页 页面属性 页面美化
超链接 动画 网页布局

Dreamweaver CC
Photoshop CC

Dreamweaver
CSS

After \\20\ photo.html
\\20\\index.html
\\20\

读书笔记

399

Step 1 Dreamweaver CC/

Photography

20-109

图20-111 “文件”面板 图20-112 打开网页文件
Step 4 <body>

20-113

Step 2 图20-109 设置站点名称 图20-113 单击“页面属性”按钮
Photoshop 20-110
Step 5
CSS 12 #000

# FFF20-114

图20-110 选择根文件夹 图20-114 设置外观（CSS）
CSS
Step 3 Step 6
# FFF#
F60

20-111index. 20-115
htmlDreamweaver CC
20-112 读书笔记

/
400

Step 9

CSSstyle
20-118

图20-115 设置链接（CSS）样式

Step 7
<style>style

style
CSS20-116

图20-118 保存样式表文件

Step 10 Dreamweaver CC

CSSstyle.css

CSS__01 index-01

position:absolute;position:relative; __01

margin:0 auto;
20-119

Step 8 图20-116 选择“移动CSS规则”选项
20-117

图20-117 新建样式表 Step 11 图20-119 查看CSS文件 Delete
2 Div 401
PhotoshopHTML ||
CSS 20-120

CSS
Div

CSSindex-06menu
20-125

图20-120 定位插入点并输入文本 图20-124 添加导航菜单 图20-125 定义menu样式

Div menu
Div
line-height overflow
Divid
CSSCSS line-heightDiv
Div overflow:hidden

Step 12
Div
20-121

Step 15 CSS
20-126

图20-121 选择导航条 图20-126 查看导航菜单
Step 13 Divimg20-122 Div Step 16 bannerDelete
CSSidindex-06
background:url(images/index_06.png); / / Flash SWF20-127

20-123

图20-122 删除图片 图20-123 添加CSS样式代码

Step 14 idindex-06

Div5 classmenu Div

20-124 图20-127 选择Flash SWF命令

402

Step 17 SWF Step 20 Dreamweaver
Flashbanner.swf20-128 Flash20-131

图20-131 查看插入的Flash动画

Step 21 banner

Delete 20-132

图20-128 选择SWF文件 Divindex-13
Dreamweaver
Step 18 label style
20-129
20-133

图20-132 删除空白 图20-133 添加文本标签并设置样式

Step 22

图20-129 复制文件到站点 20-134

CSSDivindex-46 index-64

20-135

Step 19
banner20-130

图20-134 查看文本效果 图20-135 设置背景图片
Step 23
index-46Divlabel
20-136

图20-130 “对象标签辅助功能属性”对话框

403

Step 26 Text Field:
input height position top

inputwidth
leftValue
20-139

图20-136 添加并设置文本

Step 24 labelCtrl+C
index-64
DivCtrl+V
top3px
20-137

图20-139 设置文本框的属性

图20-137 复制并修改文本 Step 27 textfield2 top
Div
top属性的值应该根据网页的实际显示效果来确 input
定，可多测试几次。
name
Value
20-140

Step 25 Div 20-138
Delete

//

图20-140 制作另一个文本框

Step 28 Div label
20-141

图20-138 插入文本表单
404

图20-141 添加并设置文本

Step 29 图20-145 编辑CSS样式
DivDivid
index-90 index-91Div Step 32 Div
index-89 index-20
CSSindex-20
CSS #index-89 20-146 CSS
#index-90 #index-91text-align:
center;20-142

图20-142 设置文本居中显示 图20-146 编辑“器材资讯”选项卡

Step 30 C S S Step 33 index-
20-143
Div 58 index-63 Div
index-18Delete
20-144 index-58 CSSfont-

weight bold padding-left 3px

index-63padding-left

3px20-147

图20-143 查看文本 图20-144 删除嵌套的图片

Step 31 Div

CSSindex-18 CSS

background text-align color font- 图20-147 添加标题和说明文本
Step 34 D i v i n d e x - 6 8
size font-weight display line-height overflow Deleteul
lili20-148
20-145

405

图20-148 输入文本

Step 35 C S S C S S

index-68 background 图20-151 输入并设置文本
Div index-105
ulliCSS20-149 Step 38
ulli20-152

图20-149 添加列表标签

ul li margin Step 39 图20-152 添加文本列表
padding 20-153 CSSCSSindex-105
inex-105
20-154 ul li

Step 36
20-150

图20-150 设置“摄影专区”版块 图20-153 添加背景图片 图20-154 重新定义li列表

Step 37 D i v Step 40 D i v i n d e x - 8 6 font-weight
index-83Delete CSS bold 20 0 15
CSSCSS CSSindex-86font-size
index-83font-size
padding13px padding13px
10px20-155

font-weight
bold 20 0 5 0px20-151

读书笔记

图20-155 定义标题文本
406

Step 41 Div index-108

labelfont-size text-align

20-156

index-115 index-120 index-124 index-128

20-157

图20-159 设置对象辅助功能属性

图20-156 添加label标签

图20-157 查看效果 图20-160 输入页脚信息

Step 42 Delete Step 44 C S S C S S
/ index-142CSSbackground:url
SWFFlash (images/index_142.png); text-align:left; padding-
.swf20-158 top:15px; padding-left:20px; color:#FFF;20-161

/ Flash SWF

Step 45 图20-161 编辑CSS样式
20-162 F12

读书笔记

图20-158 选择SWF文件

Step 43

20-159
Flash

Deletep
20-160

407

图20-164 设置“摄影画廊”文本链接

Step 48 community.html20-165
infor.
html forum.html

图20-162 预览网页效果
Step 46 Dreamweaver CC

index.htmlEnter20-163

图20-163 设置文本链接 图20-165 添加其他导航菜单超链接
Step 49
Step 47 /
photo.htmlEnter CSS
20-164 /

temple
20-166Dreamweaver

20-167

本例只对导航菜单中需要链接的页面进行设置， 图20-166 另存模板 图20-167 更新链接
用户可使用相同的方法，为其他文本或图片设置
链接。

408

Step 50 temple.dwt Divindex-07 index-141
banner 20-170
20-168 banner

Step 53 图20-170 定位光标
20-171 //

图20-168 删除不需要的部分

Step 51 Photoshop CC
photo.htmlphoto-16

photo-116 DivCtrl+C
Ctrl+V
/

images/ ../images/ 图20-171 创建可编辑区域
20-169
Step 54
contentDelete

Ctrl+V
20-172

图20-169 替换内容

images 图20-172 添加可编辑区域的内容
../
Step 55 photo.htmlhead
Step 52 Ctrl+A <style>CSSphoto-16
Ctrl+C photo-116CSSCtrl+C
CC Dreamweaver temple.dwt
style.css
Ctrl+VCSS
20-173

409

Step 58 label
Ctrl+Sphoto.html

20-176

图20-173 复制并粘贴CSS样式代码
Step 56 index.html

20-174

图20-176 添加文字

Step 59 Divphoto-20
label

style20-177

图20-177 添加文本
center20-178
图20-174 查看可编辑区域的效果 Step 60 Div
Step 57 /
>>>

12

Photography CSS
temple
20-175 CSSphoto-64font-size text-

align11px

图20-175 根据模板新建文件 图20-178 定义文本
410

Step 61 Step 62 /
20-179 CSSF12
20-180

图20-179 设置其他图片名称文本 图20-180 预览网页效果

网页中的图片也可以重新进行更换，但需要提前
在Photoshop中调整好图片的大小。也可以对图片
添加鼠标经过图像或交换图像等行为。

读书笔记

20.7 Flash CC

Photoshop CC Flash CC
Dreamweaver CCPhotoshop CC
Dreamweaver CC 3

20.7.1

temp.dwtinfor.html
20-181

411

图20-181 “摄影信息”子网页

20.7.2 infor_scroll.gif \\20\\infor.html

20-182

\\20\infor_icon.gif
\\20\

读书笔记

读书笔记
读书笔记

412

\\20\forum_image.png 图20-182 “摄影论坛”子网页效果
\\20\ \\20\\forum.html

读书笔记

读书笔记

读书笔记

413

实战篇/Instance

Chapter

2119 20 22

制作

21.1 CSS样式 插入Div 添加CSS
新建与设置 标签 样式

Dreamweaver CC
HMTL

After \\21\personal style\
\\21\index.html
\\21\

Step 1 D r e a m w e a v e r C C Step 3 index.html
/ CSS
Personal style web CSS 21-4
H:\Personal style\
CSS
21-1

图21-4 创建新的CSS文件

图21-1 设置站点 Step 4 CSS
CSS
Step 2 21-5
main_css
21-2
index.htmlEnter21-3 CSS
21-6CSS

图21-2 新建文件 图21-3 重命名文件 图21-5 存储CSS样式表 图21-6 完成CSS文件的创建
415

Step 5 index.html Step 8
Background-image
main_css.css CSS
../images/bg.jpg
21-7 Ctrl+S no-repeat Background-repeat
21-10

图21-7 输入去掉边界值的CSS样式 图21-10 设置背景图像
Dreamweaver CC
Step 9 auto
Step 6 Width1024Height
/DivDiv
800MarginTop
IDmain 21-11
21-8

图21-8 插入Div标签

Step 7
main_css.css
21-9

图21-11 设置Div标签的样式

main_css.css
CSS

CSS
main_css.css
CSS

图21-9 新建CSS规则
416

Step 10 Div float:left
Deleteid 21-12 CSS
logo Div Ctrl+Smain_css.css
// 21-17
imagesmain_
logo.png

图21-17 设置项目符号的CSS样式

Step 14
21-18

图21-12 选择需要插入的图像 图21-18 查看效果

Step 11 21-13
main_css.css
CSS21-14

Step 15 Div
</ul>Enter leftface rightface Div
classbox bh1.jpg
3 classtopface
图21-13 查看插入图像效果 图21-14 输入代码 bh.jpg
kax.jpg21-19

Step 12

logo DivEnter
21-15
21-16

图21-15 插入项目列表 图21-16 查看效果 图21-19 添加Div标签和图片
Step 13 main_css.css#logo CSS

417

Step 16 main_css.css 21-23
Div
21-20Ctrl+S CSS

图21-22 插入HTML代码 图21-23 CSS样式
bottom
Step 19 Div
bt

Div21-24

图21-20 添加CSS样式

Step 17 Ctrl+S
Opera Chrome
21-21

图21-24 插入Div标签并输入文本

Step 20 main_css.css DivCSS
bottom
21-25Ctrl+S

图21-21 查看添加盒子后的效果

Dreamweaver CCCSS3
HTML5CSS3

Opera Chrome

Step 18 class 21-22CSS 图21-25 为bottom标签添加CSS样式
bt Divlogin.png
Div
HTML

418

Step 21 Ctr l+S 图21-26 查看主页面
Opera
Chrome21-26

读书笔记

21.2 页面布局 插入图片 文本元素
的应用 的应用 的应用

After \\21\personal style\
\\21\web\main.html
\\21\

Step 1
web

main.html21-27

图21-27 新建网页并将其打开

419

Step 2 style left 550px 800px right21-31

main1.css21-28

master

Divmain1.csswidth

height marging background-image background-

repeat1024px 800px auto ../images/bg.jpg

no-repeatCtrl+S

21-29

图21-28 新建CSS文件 图21-29 CSS样式代码 Step 5 图21-31 新建CSS样式
logo/ /
Step 3 idleft right Div
left class logot right_img imagesmain_logo.png
21-32
Divrightclassmainbav
content bottom DivHTML logo
21-30

图21-30 新建Div标签 Step 6 图21-32 选择插入图像
Div HTML 21-33
right_img

Step 4 main1.css Div CSS
463px left right 800px

图21-33 查看HTML代码并定位插入点

420

Step 7 Step 10 main1.css
jianying.png21-34 CSSCSS
21-37Ctrl+S

图21-34 查看HTML代码

Step 8 图21-37 使用CSS样式设置导航
CSS
main1.css

#left .right_img img Step 11
margin 21-38

21-35 35px

图21-38 添加项目列表 bg_img

Step 12
contentEnter
<h1></h1> <h5></h5>
<hr>
Enterclasstext
DivHTML21-39

图21-35 添加选择器并设置属性 图21-39 添加水平线和Div标签
Step 9
mainbavEnter Step 13 main1.css content
HTML21-36 CSS
CSSCSS
图21-36 添加项目列表 21-40Ctrl+S

读书笔记

421

Step 16 main1.css
CSSbottomCSS
21-43

图21-40 设置标签元素的CSS样式
Step 14

Ctrl+S
21-41

Step 17 图21-43 设置CSS样式
21-44 Ctrl+S

图21-41 添加文本并查看效果 图21-44 预览效果

Step 15 读书笔记
bottomEnter
21-42

图21-42 输入文本
422

21.3 添加CSS 插入 插入表单
样式 图像 及表单元素

jQuery UI

After \\21\personal style\
\\21\web\liuyan.html
\\21\

Step 1 web Step 2 message.css
message.html css
Div21-46
master Div3 Ctrl+SCSS

top center bottom Div

21-45

图21-45 创建网页并添加Div标签 图21-46 添加CSS样式

423

Step 3 Step 6 center_rightHTML
Div/ centerEnterTab
/ Div
banner.jpg center_left
21-47 21-50

Step 4 图21-47 插入图像 图21-50 添加Div标签
/DivClass Div Step 7 message.css
logo CSScenter_left
ly_logo.jpg center_rightCSS
21-48 21-5121-52

图21-51 设置标签大小及边框样式

图21-48 插入图像

Step 5 message.css logo 图21-52 查看设置后的效果
CSS
Step 8
banner21-49 center_left/
Navigation21-53/
/ /

Enter

图21-49 添加CSS样式并查看效果 21-54
424

Step 11 <hr>
box2 Div<h5>
</h5>
21-57

图21-53 插入项目列表 图21-54 输入文本

Navigation
HTML<nav></nav>

Step 9 navigation
/
21-55

图21-57 添加Div标签和标题标签

Step 12 < h 5 > < / h 5 >
Ctrl+F2
jQuery UIDatepicker
21-58

图21-55 插入水平线
Step 10 Enterbox1
Div<h5></h5>

1368852****box1
21-56

图21-56 在“拆分”视图中查看HTML代码及效果 图21-58 插入Datepicker元素
Step 13 Datepicker

HTMLvalue
21-59

425

Step 16 Div
center_right_top
//
/
/
Text Field
21-62

图21-59 为Datepicker元素添加属性值

Step 14 message.css
CSShr
h5CSS21-60

图21-62 插入表单及表单元素
Step 17 Enter

21-63

图21-60 设置CSS样式

Step 15 center_right_
center_rightHTML<h3>
</h3><hr>Enter
center_right_top
bottomDiv21-61

图21-63 插入其他表单元素 3

图21-61 添加各种元素 Step 18
426 center_right_bottom DivHTML
<h3></h3>

<ol></ol>
<li></li>
21-64

Step 21 message.css

#bottom CSS

text-align centerbottom

padding-top45pxcolor

#fff21-67

Step 19 图21-64 添加编号列表 图21-67 设置底部标签及文本的CSS样式
CSS message.css
CSS21-65
Step 22 #master CSS
body #mastermargin padding
0px
background-color0px
#ECCFB021-68

图21-68 为body和master添加CSS样式

Step 23 ul CSS

图21-65 查看CSS代码及效果 .box1 .nav .box2{margin-left:25px;}CSS

Step 20 box1 nav box225px

21-69

2014-09-04
21-66

图21-66 定位插入点并输入文本 图21-69 设置左侧联系电话和当前日期的边界

427

Step 24 < n a v > <a Step 26 message.html personal
</nav> <a href="message. / 21-73
<a href="../index.html"></a> Personal
href="main.html"></a> style web
html"></a>21-70 comm

图21-70 链接制作好的网页 图21-73 另存模板 21-74

Step 25 index. Step 27
html main.htmlmainbavbt message.htmlmessage.dwt
21-71index.html
21-72main.html

图21-71 index.html的链接

图21-72 main.html页面的链接 Step 28 图21-74 将网页另存为模板
428 / /

logo

21-75

读书笔记

图21-75 创建可编辑区域

Step 29 <nav></nav>

center_right Div

nav content_textCtrl+S

21-76

图21-76 创建可编辑区域并保存模板 Div

21.4

DivCSSHTML
Div+CSSHTML
CSS
CSS
Personal style webDreamweaver CC

429

21.4.1

Personal style webDreamweaver CC
TabsCSS
21-77

\\21\personal style\ 图21-77 “我的生活”子网页效果
\\21\ \\21\web\read.html

430

21.4.2

Personal style webDreamweaver CC

CSS21-78

\\21\personal style\ 图21-78 “我的一家”子网页效果
\\21\ \\21\web\myfamily.html

431

实战篇/Instance

Chapter

2219 20 21

制作

22.1 HTML技术 Div+CSS 集成样式表
的应用 的应用 的应用

Div
CSSCSS

After \\22\\
\\22\\index.html
\\22\

Step 1 Dreamweaver CC live.html
images
styles scripts 3
5 HTMLindex.html
about.html contact.html photos.html
22-1

图22-2 放置图片

Step 3 scripts

about.js contact.js global.js home.js

图22-1 创建站点、文件夹和网页 live.js photo.js 22-3

Step 2 stylesbasic.css
photos
images images color.csslayout.css
22-2
typography.css

22-4

433

//
imageslogo_large.
png
320
15022-7

图22-3 创建JavaScript文件 图22-4 创建CSS文件

Step 4 index.html
Div

IDheader 22-5

Step 5 图22-5 插入Div标签 图22-7 插入图像并设置其大小
DivDiv index.html
Delete Logo
22-6 Logo.png

Step 7
</div>

Div ID
navigation22-8

图22-6 查看插入的Div标签并删除其文本 图22-8 定位插入点并插入Div标签
Step 6 Div

434

Step 8 Div about.html photos.
navigation htmllive.html contact.html
/ 22-11

22-9

图22-11 制作其他链接

Step 11 <div Enter
id="navigation"></div>
图22-9 制作无序列表 Div

Step 9 IDcontent
Div

22-12

index.html
index.html 22-10

图22-12 定位插入点并插入Div标签

Step 12 <div id="content"></div>
-

图22-10 制作链接 1 1
22-13
Step 10

435


Click to View FlipBook Version