1

计算机网络与网页制作Chapter 09 ：添加文本和图像

复旦大学计算机学院

肖川cxiao@fudan.edu.cn

目标 预览页面 添加文本 理解样式 创建超链接 创建列表 插入及编辑图像

2

3

效果

4

1. 添加文本 选中文本，单击“属性”面板的“ HTML” 按钮或“ CSS” 按钮

5

设置文本为特定的页面元素——标题

文本所处的HTML 标签发生变化

6

设置标题的样式 在标题文本内单击，再单击“ CSS” 标签，从“字体”下拉列表中选择“华文新魏”

7

新建 CSS 规则 光标位于标题内

新建 CSS 规则所自动添加的内容

8

修改 CSS 规则 光标位于标题内

修改 CSS 规则自动引发的代码变化

9

2. 样式简介 HTML 用标签定义页面元素

标题 1 ： <h1>…</h1> 段落： <p>…</p> 列表： <ul> 和 <li> … … 每种元素有默认格式

CSS 为 HTML 页面元素创建规则或样式命令 重设页面元素的格式

10

新建针对页面元素 ( 段落 <p>) 的CSS 规则

在 段 落 内 单 击 ， 再 单 击 “ 属 性 ” 面 板的“ CSS” 按钮，选择字体的“大小”

新建 CSS 规则引起的代码变化

11

手工修改代码 单击“属性”面板内的“刷新”按钮可在网页的设计视图看到效果

手工修改CSS 规则的代码

12

修改针对页面元素 ( 段落 <p>) 的 CSS 规则 在设计视图的段落内单击

修改样式引起的CSS 代码变化

13

3. 在浏览器中预览页面 选择菜单 文件 >> 在浏览器中预览

14

“ 实时视图”也能预览页面

非编辑工作区

可以手工编辑，并且效果立即在设计视图中展示

15

4. 超链接 超链接

北京 / 西城 / 百万庄大街 /24 号 / 张三 www.marketplace.com/photos/canon.jpg

16

创建超链接——方法 1 在设计视图内选中要添加链接的文本，再单击“属性”面板内的“ HTML” 按钮

超链接对应的代码

17

创建超链接——方法 2 把光标定位于某个位置，选择菜单 插入 >> 超级链接

18

创建超链接——方法 3 在设计窗口选中文字，单击“插入”面板的“常用”区域内“超级链接”图标

若之前选中文本，则“文本”框自动填充，否则内容为空。

将在一个新的、空白的浏览器窗口内打开链接

19

5. 相对链接和绝对链接 网页引用同一站点内的文件一般使用相对链接。 网页引用站点外部的文件使用绝对链接。

20

6. 链接至一个电子邮箱 选中文本，菜单 插入 >> 电子邮件链接 或者 面板 插入 >> 常用 >> 电子邮件链接

21

7. 创建项目列表 选中文本，单击“属性”面板的“ HTML” 按钮。

页面元素的含义ul: unordered listli: list item

22

创建编号列表

页面元素的含义ol: ordered listli: list item

23

设置列表的强调符号 单击列表项，菜单 格式 >> 列表 >> 属性

项目列表用 <ul> 和<li> 标签表示，而之前只设置了 <h1> 和<p> 标签的样式，故设计视图内项目列表与其他文字的格式不同。

24

新建项目列表的样式 在 列 表 内 单 击 ， 再 单 击 “ 属 性 ” 面 板的“ CSS” 按钮，选择字体的“大小”

新建样式引起的 CSS 代码变化

25

修改项目列表的样式 光标位于设计视图的项目列表内

修改样式引起的CSS 代码变化

26

8. 使用文本插入面板 光标定位于某处，面板 插入 >> 文本 >> 字符：版权

27

使文本变成斜体 方法 1 ：选中文本，面板 插入

>> 文本 >> 斜体 方法 2 ：选中文本，菜单 插入

>>HTML>> 文本对象 >>斜体 方法 3 ：选中文本，面板 属性

>>HTML>> 斜体图标

28

9. 添加图像的方法一 定位光标，再菜单 插入 >> 图像

禁用图像时显示的文本信息

29

页面元素——图像

对应的 HTML 代码

30

添加图像的其他方法 方法二：定位光标，再把图像文件从“文件”面板拖至设计窗口内

方法三：定位光标，再面板 插 入 >> 常 用 >> 图像：图像

31

使用 HTML 方法修改图像边框 选中图像，再面板 属性 >>“ 边框”文本框

border 属性用于设置图像的边框

32

10. 链接图像 方法一：选中图像，面板 属性 >>“ 链接”文本框右侧的“浏览文件”图标

方法二：选中图像，面板 属性 >>“ 链接”文本框右侧的“指向文件”图标

33

11. 使用图像占位符 定位光标，再菜单 插入 >> 图像对象 >> 图像占位符

34

填实图像占位符 选中图像，面板 属性 >>“ 源文件”文本框右侧的“浏览文件”或“指向文件”图标

35

12. 调整图像亮度与对比度 选中图像，面板 属性 >>“ 亮度和对比度”图标

36

13. 调整图像大小 在“文件”面板内复制文件，便于以后恢复

37

编辑图像设置 选中图像， 再面板 属性 >>“ 编辑图像设置”图标

38

14. 更换图像 选中图像，面板 属性 >>“ 源文件”文本框右侧的“浏览文件”或“指向文件”图标

39

小结 插入 HTML 页面元素

文本 <p> 标题 <h1> 超链接 <a> 列表 <ul> 或 <ol> 图像 <img>

选中页面元素，“属性”面板 添加 CSS 样式 设置 HTML 属性