网页制作二PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<font size="数字" face="字体名" color="色彩"> 被设置的文
字 </font>
size=1～7，size取1时最小，取7时最大。自动加粗。
文字字型：加粗（<b>…</b>）、斜体（<i>…</i>）、带下划
线（<u>…</u>）、带删除线（<strike>…</strike>）、下标
<a href="URL" target="打开窗口方式"> 热点 </a>
href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。 如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即 <a href="#"> 热点 </a>。
target属性设定链接被单击后结果所要开始窗口的方式。可选值为： _blank，_parent，_self，_top。
2
② HTML文档的基本结构
➢ 标记及其属性
• 标记 HTML文档由标记和被标记的内容组成。 格式为： <标记> 受标记影响的内容 </标记> 如，标题标记<title>表示为： <title> 我的第一个网页 </title>
• 标记的属性 显示或控制信息，格式为： <标记 属性1="属性值1" 属性2="属性值2" …> 受影响的内
6
④ 段落标记
➢ 注释标记
<!-- 注释内容 -->
➢ 强制换行和不换行标记
“文字 <br>” 和 “<nobr> 文字 </nobr> ” 【例2-2】
➢ 段落标记<p>...</p>
<p align="left|center|right"> 文字 </p> <p>可看作<br><br>。
【例2-3】
2 —HTML
HTML HTML文档的基本结构 网页文件的创建过程
超链接
图片
列表
表格
字幕、音频和视频
框架（多窗口页面）
表单
1
① HTML简介
• Hypertext Markup Language，超文本标记语言 • 用于构成Web页面（Page）、表示Web页面的符号标记语 言 • 通过专用的浏览器来识别 • 2000年，W3C组织公布发行了XHTML 1.0版本，适应未来 网络应用更多的需求
【例2-1】
4
③ 网页文件的创建过程
➢ 编辑和保存网页 • “记事本” 打开记事本 创建新文件 保存网页 (*.html或*.htm,首页的文件名为index.html或index.htm)
5
③ 网页文件的创建过程
➢ 预览网页 • 用浏览器打开 • 在“Windows资源管理器”或“我的电脑”中打开
1 href="下载文件名"> 热点文本 </a> 【例2-13】
➢ 指向电子邮件的链接
格式为： <a href="mailto:E-mail地址"> 热点文本 </a>
12
⑦ 图片
➢ 网页的背景
颜色名称
• 设置背景色
或十六进 制值
格式为：<body bgcolor="色彩值">
容 </标记> 例如，字体标记<font>有属性size和color等。
<font size="3" color="red"> 属性示例 </font>
3
② HTML文档的基本结构
➢ HTML的基本结构 <html> <head> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html>
【例2-5】
7
⑤ 文字标记
➢ 标题文字标记<h#>…</h#>
<h# align="left|center|right"> 标题文字 </h#>
#=1～6，取1时文字最大，6时文字最小。不自动加粗。
缺省显示宋体，在一个标题行中无法使用不同大小的字体。
【例2-6】
➢ 字体标记<font>...</font>
（<sub>…</sub>）、上标（<sup>…</sup>）
ch2-7.html 【例2-9】
【例2-10】
8
⑥ 超链接
网页互相联系的桥梁；“热 点”
➢ 锚点（anchor）标记<a>...</a>
• 热点—单击一个“词”、“句”或“图片”，可从此处转到 具有唯
一URL地址的目标资源。
• <a>标记的格式为：
• 链接到同级目录中的网页文件
<a href="../子目录名/目标文件名.html"> 热点文本 </a>
10
⑥ 超链接
➢ 指向本页中的链接
• 定义两个标记：超链接标记和书签标记。 • 超链接标记的格式为： <a href="#记号名"> 热点文本 </a> • 书签：用<a>标记对该文本作个记号，
➢定位标记<div>…</div>
<div align="left|center|right"> 文本、图像或表格 </div>
【例2-4】
➢ 水平线标记<hr>
<hr align="left|center|right" size="横线粗细" width="横线长
度" color="横线色彩" noshade>
9
⑥ 超链接
➢ 指向其他页面的链接
• 链接到同一目录内的网页文
<a href=“目标文件名.html”> 热点文本 </a>
• 链接到下一级目录中的网页文件
<a href="子目录名/目标文件名.html"> 热点文本 </a>
• 链接到上一级目录中的网页文件
<a href=“../目标文件名.html”> 热点文本 </a> 其中：“. . /02”表示退到上一级目录
• 用图片作背景
格式为：<body background="图片文件名">
【例2-14】
“GIF”、”JPEG”， 并指明存放路径
13
⑦ 图片
➢ 图片标记<img>——将图片插入到网页中 • 作用：将图片插入到网页中
设置图片的替代文本、尺寸、布局等属性。
• 格式: <img src="图片文件名" alt="简单说明" width="图片宽度"
<a name="记号名"> 目标文本附近的字符串 </a> 【例2-12】
• 指向其他页面某处的文本， <a href="URL#记号名"> 热点文本
</a>
• 跳转到的位置处加上链接标记：<a name="记号名"> 文字串 </a> • 指向其他文件的某一部分：
<a href="目标文件路径/文件名#记号名"> 热点文本 </a>