HTML语言与网页设计.ppt

1、HTML语言与网页设计,文本格式与超链接,学习目标,掌握FONT标记符的用法，理解物理字符样式和逻辑字符样式。 掌握P、BR、Hn、HR标记符的用法，掌握设置段落对齐的方法。 掌握有序列表、无序列表和嵌套列表的构造方法。 理解超链接的基本概念，掌握A标记符的用法。 掌握使用Dreamweaver开发网站的基本过程,Part 1,设置字符格式,字符格式,所谓字符格式是指针对段落中的部分文字（一个或一组文字，也可以是整个段落的文字）所设置的格式，通常包括字体、字号、文字颜色等。,FONT标记符,FONT标记符具有3个常用的属性： SIZE 设置字体大小 COLOR 设置字体颜色 FACE 设置字体

2、样式,FONT标记符,字号属性 size 的值可以从1到7，3是默认值。该属性值也可以用 + 号或 - 号来作为相对值指定。 文字 文字 改变默认字号:在head中添加代码,演示, 使用FONT属性/TITLE /HEAD BODY 正常文本 这些是大字体文本 本行文字为红色 隶书 /BODY /HTML,演示效果：,FONT标记符,字体标记符的 color 属性可用来控制文字的颜色，它的使用方法与正文标记符BODY中使用的 bgcolor 属性相同。,演示,本行文字为红色 演示效果在上图有显示,FONT标记符,Face 属性用来指定字体样式。在编制网页时，通过在FONT标记符中指定 face

3、 属性，用户可以指定一个或几个字体名称（用逗号隔开）。 注意:特殊字体最好用图像的方式.,演示,隶书 演示效果在上图有显示,常用物理字符样式,物理字符样式是指标记符本身说明了所修饰的效果。 常用物理字符样式标记符有： 黑体标记 斜体标记 下划线标记等。 删除线 下标 上标,演示物理字符样式效果,HTML 物理字符样式效果实例 粗提显示 大字体 小字体 斜体 等宽字体 下划线 标记设置的删除线文本 标记设置的删除线文本 此处为上标示例：x2+y2=R2 此处为下标示例：H2so4 ,显示效果：,常用逻辑字符样式,逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义。例如，ADDRESS标记符说明

4、了“地址”这个含义，但并没有说明具体的效果。 ADDRESS效果为斜体,演示逻辑字符样式效果, 逻辑字符样式效果实例 强调文本 特别强调文本 引用文本 一个术语定义 代码格式 变量格式 样本字符格式 键盘输入格式 地址格式 ,演示效果：,Part 2,设置段落格式,段落格式,所谓段落格式是指针对 HTML 文档中的段落所设置的格式，例如，段落的对齐方式。,分段标记符,分段标记符用于将文档划分为段落，标记为，其中结束标记符通常可省略。 换行标记符用于在文档中强制断行，标记为一个单独的。该标记符与分段标记符是有区别的。 区别：多个 只产生一个段落，多个产生多个空行。,演示P与BR, 标记符可以产生

5、多个空行效果 此为最后一段 /BODY /HTML,演示效果：,标题样式,在 HTML 中，用户可以通过 Hn 标记符来标识文档中的标题和副标题，其中 n 是1至6的数字；H1表示最大的标题，H6表示最小的标题。使用标题样式时，必须使用结束标记符。 判断：标题样式中， H1标题比H6大 （）,演示标题效果, 标题效果 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 正常文本 ,演示效果：,添加水平线,添加水平线的标记符为HR，它包括以下属性： SIZE 属性用来改变水平线的粗细。 WIDTH 属性用来更改水平线的长度。 NOSHADE 属性使水平线以实线显示。 COLOR属性可以控

6、制水平线的颜色。 思考题：如何添加竖线？,演示水平线效果, 水平线效果/TITLE /HEAD BODY 以下是默认水平线：HR 以下是粗为5像素的水平线：HR size=5 以下是长度为100像素的水平线： 以下是长度为屏幕宽度50%的水平线： 以下是粗为5像素的实心水平线: 以下是红色的水平线： /BODY /HTML,演示效果：,ALIGN 属性,ALIGN 属性用于设置段落的对齐格式，其值包括：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）和 JUSTIFY（两端对齐）。 ALIGN 属性可应用于多种标记符，最典型的是应用于 P、Hn（标题标记符）、HR 等。,演示

7、段落对齐, 使用align属性/TITLE /HEAD BODY P本行为默认对齐段落，相当于align=“left 本行为居中对齐的段落 本行为右对齐的段落 本行为居中对齐的一级标题/H1 以下为左对齐的水平线： HR align= left width=50% /BODY /HTML,演示效果：,DIV 标记符,DIV 标记符用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为。位于 DIV 标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。 思考:的用法,CENTER 标记符,如果用户要将文档内容居中，还可使用 CENTER 标记符，方法为：将需居中的内容置于和

8、之间。 思考题： 的替代代码？,演示DIV与CENTER, DIV标记符 浣沙溪 晏殊 一曲新词酒一杯， 去年天气旧池台， 夕阳西下几时会？ 无可奈何花落去， 似从相识燕归来， 小圆乡径独徘徊。 ,演示效果：,格式嵌套,（1）如果所设置的格式是相容的，则取格式叠加的效果。 （2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。 例： 格式冲突 例：格式相容 ,演示格式嵌套, DIV标记符 本行使用对齐 本行对齐方式被更改了 本行显示了如何同时年个月度年个 粗体和斜体 ,演示效果：,Part 3,设置列表格式,有序列表,有序列表（Ordered list）也称数字式列表，它是一种在表的各项前

9、显示有数字或字母的缩排列表。,有序列表,定义有序列表需要使用有序列表标记符和列表项（List item）标记符（结束标记符可省略），语法如下： List item 1 List item 2 ,有序列表,OL 标记符最常用的两个属性type，start。type用来设置数字序列样式。取值为：1、A、a、I、i。 start用来设置数字序列起始值。 LI的两个属性type，value(指定一个新的数字序列起始值。,演示有序列表, 有序列表 用大写罗马字母表示的有序列表： 列表项1 列表项2 列表项3 ,演示效果：,演示有序列表的嵌套, 嵌套的有序列表 嵌套的有序列表 子列表项1 子列表项2 子列

10、表项3 列表项1 列表项2 ,演示效果：,无序列表,无序列表（Unordered list）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。,无序列表,定义无序列表需要使用无序列表标记符和列表项（List item）标记符（结束标记符可省略），语法如下： List item 1 List item 2 ,无序列表,UL 标记符最常用的属性type，用来设置项目符号样式。取值为：disc、circle、square。 注意：在 IE 中，type 属性的取值是区分大小写的。,演示无序列表, 无序列表 默认无序列表： 列表项1 列表项2 列表项3 使用方块作为列表项标记的无序列表

11、： 列表项1 列表项2 列表项3 ,演示效果：,演示混合嵌套列表, 混合嵌套列表 默认无序列表： 列表项1 列表项2 列表项1 列表项2 列表项3 列表项3 ,演示效果：,Part 3,使用超链接,超链接基础,URL（Universal Resources Locator）用于定位Web上的文档信息。 一个 URL 包括 3 部分：协议、计算机地址、文件路径。 协议：/计算机/文件路径,超链接基础绝对URL,绝对URL是指资源的完整地址，包括URL的所有3个部分，即： 协议：/计算机/文档名,练习：,例:网站根文件夹为myweb,在磁盘中的目录为的D:/sheji/myweb,网页url.ht

12、m在目录myweb/url/love/中，请问url.htm的绝对路径和绝对url是多少？假设计算机的域名为.,超链接基础相对URL,相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。 使用相对URL的好处：易于维护,超链接基础相对URL,使用相对URL时，经常使用两个与DOS类似的符号： 句点（.）表示当前目录 双重句点（.）表示当前目录的上一级目录 /根目录,超链接基础相对URL,问题：city.gif在网页index.htm,interest.htm的相对路径是什么？,练习：,思考：假设在文件夹interest下面含有网页文件music/x

13、inqing,htm 则图片city.gif相对于网页文件的路径是什么？还有其他表示方法吗？,不同类型的超链接,根据超链接的目标文件不同，分为： 网页之间的超链接 页面内的超链接 文件下载超链接 Email超链接 空超链接,不同类型的超链接,根据超链接源对象的不同，分为： 文本超链接 图像超链接（包括图像映射） 对象超链接（例如Flash、Java小程序）,不同类型的超链接,根据超链接实现方式的不同，分为： HTML超链接 JavaScript超链接 对象超链接,创建超链接,A 标记符用于创建超链接（结束标记符不能省略），href 属性用于指定超链接的目标文件。 内部网页超链接：link 外部

14、网页超链接：link,演示超链接效果, 超链接 这是一个超链接 欢迎参观此网站。 ,创建超链接锚点链接,使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。 定义锚点应使用锚点内容 指向锚点的超链接为：link,演示效果：,创建超链接锚点链接,指向其他页面内锚点的超链接：link blank link,演示锚点超链接效果, 锚点链接 我的网站 ,演示效果：,问题,同目录的网页文件 page1.htm， page2.htm， page2.htm有锚点name=bottom,在page1.htm中想访问page2.htm页面中的“bottom”所在位置，应如何设置超链接？,创建超链接文件下载,当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。 下载 思考题：.DOC文件浏览器能正常识别吗？,创建超链接Email链接,Email 控制命令： ?subject= 设置信件主题 ?cc= 设置抄送人 ?bcc= 设置密件抄送人 & 组合多个控制命令 例：Email,演示Email链接效果, 电子邮件链接 与我联系 ,效果演示：,超链接的显示效