《Dreamweaver CS6 完全自学教程》笔记 第十三章：Dreamweaver 中的 HTML 代码
文章目录
- 第十三章：Dreamweaver 中的 HTML 代码
-
- 13.1 HTML 介绍
- 13.2 HTML 的基本结构
-
- 13.2.1 单标签
- 13.2.2 双标签
- 13.2.3 标签属性
- 13.3 常用标签
-
- 13.3.1 html 标签
- 13.3.2 head 标签
- 13.3.3 body 标签
- 13.3.4 title 标签
- 13.3.5 hn 标签
- 13.3.6 br 标签
- 13.3.7 p 标签
- 13.3.8 hr 标签
- 13.3.9 font 标签
- 13.3.10 div 标签
- 13.3.11 ul 标签
- 13.3.12 OL 标签
- 13.3.13 DL 标签
- 13.4 表格
-
- 13.4.1 表格的基本语法
- 13.4.2 表格的标题
- 13.4.3 表格的尺寸
- 13.4.4 表格的边框尺寸
- 13.4.5 表格的间距调整
- 13.4.6 表格内容与格线之间的宽度
- 13.4.7 表格内数据的布局对齐
- 13.4.8 跨多行、多列的单元格
- 13.4.9 表格的颜色设置
-
- 实战：制作闪烁表格
- 13.5 超链接
-
- 13.5.1 本地链接
- 13.5.2 URL 链接
- 13.5.3 目录链接
- 13.6 HTML 中图像的设置
-
- 13.6.1 插入图像的基本格式
- 13.6.2 图像与文字的对齐方式
- 13.6.3 图像与文字之间的距离
- 13.6.4 图形按钮（图像链接）
- 13.7 在 HTML 中播放音乐
-
- 13.7.1 点播音乐
- 13.7.2 自动载入音乐
- 13.8 框架（Frames）
-
- 13.8.1 Frames 基本格式
- 13.8.2 Frames 结构中各窗口尺寸的设置
- 13.8.3 各窗口间相互操作
- 13.8.4 Frames 的其他属性
- 13.9 使用快速标签编辑器
-
- 13.9.1 插入 HTML 模式
- 13.9.2 编辑标签模式
- 13.9.3 封装标签模式
- 13.10 使用提示菜单
- 13.11 编辑 HTML 代码
-
- 13.11.1 在页面中编辑 HTML 代码
-
- 技术专题：进入和退出网页特效
- 13.11.2 清理 HTML 代码
第十三章：Dreamweaver 中的 HTML 代码
13.1 HTML 介绍
HTML 全称为 Hyper Text Markup Language（超文本标记语言）。所谓超文本，是指 HTML 可以加入图片、声音、动画、影视等内容，它可以从一个文件跳转到另一个文件。
在访问一个网页时，网页所在服务器将用户请求的网页以 HTML 标签的形式发送到客户端，客户端浏览器解析并执行 HTML 标签，然后将结果以网页的形式展示。
创建 HTML 文件的步骤如下：
先创建一个记事本。然后输入：
<html>
<head>
<title>网页标题title>
head>
<body>
网页设计
body>
html>
然后保存，将扩展名改为 .htm 即可。
13.2 HTML 的基本结构
HTML 文档是由 HTML 元素组成的文本文件，而 HTML 标签用来组成 HTML 元素。标签由尖括号包括，且通常成对出现，前一个是开始标签，后一个是结束标签，标签不区分大小写。
13.2.1 单标签
单标签不需要成对出现，最常见的是
13.2.2 双标签
双标签由 “始标签” 和 “尾标签” 构成，必须成对使用。
始标签：<标签>
尾标签：
13.2.3 标签属性
<标签 属性1 属性2 ···>
各属性无先后顺序。
13.3 常用标签
13.3.1 html 标签
···
用来标识 HTML 文档的开始， 用来标识 HTML 文档的结束。它表示该文档是以 HTML 编写的。事实上，现在的浏览器可以自动识别 HTML 文档，并不需要有 标签，但还是要养成一个好习惯。
13.3.2 head 标签
···
构成文档的头部部分，可以包含标题 等。
13.3.3 body 标签
···
构成文档的主题部分，其中所定义的图像和文本都会通过浏览器显示出来。
13.3.4 title 标签
网页的标题，必须位于 ··· 之间。
13.3.5 hn 标签
文章一般会有标题、副标题、章、节等结构，HTML 中也有相应的标题标签
13.3.6 br 标签
这是一个单标签，表示强制换行。
13.3.7 p 标签
···
段落标记，标签
13.3.8 hr 标签
这是一个单标签，可以创造一条水平线。
属性介绍：
- size： 水平线的宽度。
- width： 水平线的长。用百分比或像素值来表示。
- align： 对齐方式。
- noshade： 无阴影，为实心线段。
13.3.9 font 标签
···
主要用来设置文字的属性，比如字号、字体、颜色。
属性介绍：
- size： 用来设置字号，范围为 1~7，默认为 3 ，也可以在属性值之前加 +、- 来指定相对于字号初始值的增量或减量。
- face： 用来设置字体。
- color： 用来设置颜色。颜色值可以是 # + 十六进制数
天依蓝天依蓝，也可以是以下 16 种颜色的名称：Black 、 Green 、 Silver 、 Lime 、 Gray 、 Olive 、 White 、 Yellow 、 Maroon 、 Navy 、 Red 、 Blue 、 Purple 、 Teal 、 Fuchsia 、 Aqua
相关标签：
···：粗体···： 斜体···： 下划线···： 强调···： 打字机字体···： 大型字体···： 引用···： 小型字体： 闪烁···：特别强调
13.3.10 div 标签
区隔标记。作用是设定字、画、表格等的摆放位置。
13.3.11 ul 标签
··
无序号列表。列表中每一个项前要加
<UL>
<LI> 第一项
<LI> 第二项
<LI> 第三项
UL>
13.3.12 OL 标签
···
有序列表。
<OL>
<LI> 第一项
<LI> 第二项
<LI> 第三项
OL>
13.3.13 DL 标签
···
定义性列表。列表项用 表明，说明性文字使用标签 表示。有属性 compact ，该属性可使说明文字与列表项在同一行。
<DL>
<DT> 第一项 <DD> 第一项的定义
<DT> 第二项 <DD> 第二项的定义
<DT> 第三项 <DD> 第三项的定义
DL>
13.4 表格
13.4.1 表格的基本语法
···
··· ：定义表行 ··· ···
示例：
<html> <head> <title> 简单的表格 title> head> <body> <table border=1> <caption align=top>人员名单caption> <tr><th>姓名th><th>性别th><th>年龄th> <tr><td>李华td><td>男td><td>18td> table> <body> html>人员名单 姓名 性别 年龄 李华 男 18
13.4.2 表格的标题
属性 align=top 标题位于表格上方， bottom 位于下方。
13.4.3 表格的尺寸
通过像素表示：
···
通过百分比表示：
···
13.4.4 表格的边框尺寸
···
13.4.5 表格的间距调整
···
13.4.6 表格内容与格线之间的宽度
内容与格线之间的宽度称为 “填充”。
···
13.4.7 表格内数据的布局对齐
左右排列仍然是 align 属性，上下排列由 valign 属性来设置。可以放在
、 、 标签中。
13.4.8 跨多行、多列的单元格
要创建跨多行、多列的单元格，只需在
或 标签中加入 rowspan 或 colspan 属性即可。属性值表示跨越的行数或列数。 示例：
<html> <head> <title>跨多列单元title> head> <body> <table> <tr><th colspan=3>执勤人员th> <tr><th>星期一th><th>星期二th><th>星期三th> <tr><td>张三td><td>李四td><td>王五td> table> body> html>执勤人员 星期一 星期二 星期三 张三 李四 王五
13.4.9 表格的颜色设置
设置整个表格的背景颜色：
设置某一行的背景颜色：
设置单元格的背景颜色：
实战：制作闪烁表格
在
···中间输入以下代码：<script> function blinkOn(){ document.all.blinkObj.bgColor = "000000" window.setTimeout("blinkOff",50); } function blinkOff(){ document.all.blinkObj.bgColor = "FFFFFF" window.setTimeout("blinkON()",50); } </script> <body onload="blinkOn()"> <table id="blinkObj" width="700" border="1" cellspacing="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>这是一段 js 代码，不知道大家看不看的懂。我没有学过 js，所以也仅仅只能简单解释一下。
首先创建两个函数 blinkOn() 和 blinkOff() ，它们的作用是改变名叫 blinkObj 的表格的颜色，并且一段时间后执行另一个函数，这样就形成了闪烁。之后
使 blinkOn() 这个函数开始执行，闪烁表格就做成了。
13.5 超链接
一般情况下，链接不采用绝对路径，因为当文件移植到服务器上时，带有 D:/ 的地址将无法访问。
13.5.2 URL 链接
URL 链接的形式是：“协议名://主机.域名/路径/文件名” ，协议包括以下几种类型：
- file： 本地系统文件
- http： WWW 服务器
- ftp： ftp 服务器
- telnet： 基于 TELNET 的协议
- mailto： 电子邮件
- news： Usenet 新闻组
- gopher： GOPHER 服务器
- wais： WAIS 服务器
Telnet协议是TCP/IP协议族中的一员，是Internet远程登录服务的标准协议和主要方式。它为用户提供了在本地计算机上完成远程主机工作的能力。————百度
13.5.3 目录链接
链接地址只能链接一个页面或文件。如果要直接链接文件的上部、下部或中央部分，就要用目录链接，或锚链接。这需要在页面中相应位置建立锚记。语法如下：
建立锚记：
目录连接：链接文字如果是在同一个文件内跳转，可省略文件名。
13.6 HTML 中图像的设置
13.6.1 插入图像的基本格式
插入图像的标签是
13.6.2 图像与文字的对齐方式
- top： 文本的顶部对齐
- middle： 文本的中央对齐
- bottom： 文本的底部对齐
- texttop： 图像的顶线对齐
- baseline： 图像的基线对齐
- left： 图像的靠左对齐
- right： 图像的靠右对齐
13.6.3 图像与文字之间的距离
水平距离：hspace
垂直距离：vspace
13.6.4 图形按钮（图像链接）
在
···标签中间嵌套了一个
13.7 在 HTML 中播放音乐
13.7.1 点播音乐
将音乐做成一个连接，用鼠标点击即可播放。
13.7.2 自动载入音乐
让音乐自动载入可当背景音乐使用。
属性介绍：
- autostart=true/false： 是否自动播放
- loop=true/false： 设定重复次数，true 为无限循环。
- startime=分:秒 ： 开始播放的时间
- volume=0~100： 音量大小，没设定使用系统音量。
- width/height ： 设定控制面板的大小
- hidden=true： 隐藏控制面板
- controls=console/smallconsole ： 设定控制面板的样子
13.8 框架（Frames）
13.8.1 Frames 基本格式
<html> <head> <title>title> head> <frameset> <frame src="url"> <frame src="url"> ··· frameset> html>
13.8.2 Frames 结构中各窗口尺寸的设置
将窗口分为几块，横向分用 rows 属性，纵向分用 cols 属性，如：
用几个逗号隔开就表示分出了几个窗口，可以将数字用 “ * ” 代替，表示由浏览器自动设置大小。
示例：
<html> <head> <title>Framestitle> head> <frameset cols="20%,*"> <frame src="url"> <frameset rows="40%,*"> <frame src="url"> <frame src="url"> frameset> html>
13.8.3 各窗口间相互操作
Frames 分出来的窗口内容是可变动的，往往一个窗口的内容随着另一个窗口的要求而不断变化，为完成窗口间的相互操作，必须为每个窗口起一个名字，用 name 属性来定义。
另外还需要 target 属性来配合使用，target 指定了所链接的文件出现在哪一个窗口。target 的值可以是 name 定义的名称，也可以是以下 4 种。
- _blank： 显示一个新窗口
- _self： 显示在同一个窗口
- _parent： 显示在 Frameset 的前一份文件的窗口
- _top： 显示在整个浏览器窗口
13.8.4 Frames 的其他属性
：窗口边框是否显示：边界宽度：滚动条设置：设置不可变动的框边
13.9 使用快速标签编辑器
快速标签编辑器可以在不退出设计视图的情况下快速检查并编辑 HTML 标签，用户不必在代码视图与设计视图之间频繁转换。而且快速标签编辑器可以访问具体属性的提示菜单，提示菜单会列出所有插入光标或正在编辑的所有有效属性。
启动快速标签编辑器的方法：
- 点击 “属性” 面板上的 “快速标签编辑器” 按钮。
- 快捷键 Ctrl + T
- 点击 修改 -> 快速标签编辑器
快速标签编辑器有三种模式：插入 HTML 模式、编辑标签模式、封装标签模式
13.9.1 插入 HTML 模式
直接开启快速标签编辑器，在 < > 之间可以插入任何 HTML 代码，当关闭编辑器后，所输入的代码会被添加到文档光标所在位置。
13.9.2 编辑标签模式
如果在文档窗口中选择了完整的标签，包括开放的标签、封闭的标签和标签之间包含的内容，那么会进入编辑标签模式。
编辑标签模式中，一般会显示当前已有的标签、属性及属性值，并且可以通过 Tab 键或 Shift + Tab 键进行属性或属性值输入点的切换。
如果选中了非匹配的开放或封闭标签，启动编辑器时也会进入编辑标签模式，并且会选中该标签的父标签及所包含的全部内容。
13.9.3 封装标签模式
如果只选中了相应的内容，而没有选中完整的标签，则启动编辑器后将进入封装标签模式。在文档中选中一组尚未设置格式的文本，就可以启动编辑器，为其添加格式化标签。
封装标签模式只能输入单个的开放标签，如果输入多个标签，就会出现错误的信息。
当输入完成后，输入的标签会被放置到文档窗口所选内容的前端，封闭标签会被放到后端。
13.10 使用提示菜单
在代码视图和快速标签编辑器中会有代码提示，通过 Enter 键可以进行代码补全。
按下 Esc 键关闭提示菜单，或者直接输入。
13.11 编辑 HTML 代码
13.11.1 在页面中编辑 HTML 代码
技术专题：进入和退出网页特效
在
···之间插入以下代码：- 进入网页：
- 退出网页：
其中 duration 表示特效的持续时间，单位秒。transition 表示使用哪种特效，取值范围 0~23 ，具体含义如下：
0 —— 矩形缩小
1 —— 矩形扩大
2 —— 圆形缩小
3 —— 圆形扩大
4 —— 下到上刷新
5 —— 上到下刷新
6 —— 左到右刷新
7 —— 右到左刷新
8 —— 竖百叶窗
9 —— 横百叶窗
10 —— 错位横百叶窗
11 —— 错位竖百叶窗
12 —— 点扩散
13 —— 左右到中间刷新
14 —— 中间到左右刷新
15 —— 中间到上下
16 —— 上下到中间
17 —— 右下到左上
18 —— 右上到左下
19 —— 左上到右下
20 —— 左下到右上
21 —— 横条
22 —— 竖条
23 —— 随机
13.11.2 清理 HTML 代码
点击 命令 -> 清理 XHTML，打开 “清理 HTML / XHTML” 对话框。
参数介绍：
- 空标签区块： 将会删除所有没有内容的标签。
- 多余的嵌套标签： 将删除所有多余的标签。
- 不属于 Dreamweaver 的 HTML 注解： 将删除不是由 Dreamweaver 插入的批注。
- Dreamweaver 特殊标记： 将删除所有 Dreamweaver 的特殊标记。
- 指定的标签： 将删除在文本框中输入的标签。
- 尽可能合并嵌套的
标签： 将控制相同文本区域的标签组合。 - 完成时显示动作记录： 清理完成后将显示包含文档修改的详细资料。
返回你可能感兴趣的:(Dreamwaver学习,dreamweaver)