Upload
field
View
215
Download
5
Embed Size (px)
DESCRIPTION
计算机网络 与网页制作 Chapter 09 :添加文本和 图像. 复旦大学计算机学院. 肖川 [email protected]. 目标. 预览页面 添加文本 理解样式 创建超链接 创建列表 插入及编辑 图像. 效果. 1. 添加文本. 选中文本,单击“属性”面板的“ HTML ”按钮或“ CSS ”按钮. 设置文本为特定的页面元素 —— 标题. 文本所处的 HTML 标签发生变化. 设置标题的 样式. 在标题 文本 内单击,再单击“ CSS ”标签,从 “字体” 下拉列表中选择 “华文新魏”. 新建 CSS 规则. - PowerPoint PPT Presentation
Citation preview
目标 预览页面 添加文本 理解样式 创建超链接 创建列表 插入及编辑图像
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 属性