第2章__网页基本结构和段落、文字标记(精品).ppt

网页设计与制作教程网页设计与制作教程(第第2版版)机械工业出版社同名教材配套电子教案第第2章章 网页的基本结构和段落、文字标记网页的基本结构和段落、文字标记 2.12.1 网页的创建过程网页的创建过程网页的创建过程网页的创建过程2.1.1 2.1.1 编辑和保存网页编辑和保存网页编辑和保存网页编辑和保存网页2.1.2 2.1.2 预览网页预览网页预览网页预览网页 2.1.3 2.1.3 发布网页发布网页发布网页发布网页 2.22.2 HTMLHTML文件的基本结构文件的基本结构文件的基本结构文件的基本结构2.2.1 2.2.1 标记及其属性标记及其属性标记及其属性标记及其属性2.2.2 2.2.2 HTMLHTML文件的基本结构文件的基本结构文件的基本结构文件的基本结构 2.2.3 2.2.3 文件结构的格式标记文件结构的格式标记文件结构的格式标记文件结构的格式标记 2.32.3 标题文字标记标题文字标记标题文字标记标题文字标记 2.42.4 段落标记段落标记段落标记段落标记2.4.1 2.4.1 注释标记注释标记注释标记注释标记2.4.2 2.4.2 强制换行标记强制换行标记强制换行标记强制换行标记2 2.4.3 .4.3 强制换段标记强制换段标记强制换段标记强制换段标记2.4.4 2.4.4 显示预排格式标记显示预排格式标记显示预排格式标记显示预排格式标记 2.4.5 2.4.5 分区显示标记分区显示标记分区显示标记分区显示标记 2.4.6 2.4.6 水平线水平线水平线水平线 2.52.5 文字标记文字标记文字标记文字标记2.5.1 2.5.1 设置文字的大小设置文字的大小设置文字的大小设置文字的大小2.5.2 2.5.2 设置字体设置字体设置字体设置字体 2.5.3 2.5.3 设置字型设置字型设置字型设置字型 2.5.4 2.5.4 设置文字的颜色设置文字的颜色设置文字的颜色设置文字的颜色 习题习题2 2.1 网页的创建过程网页的创建过程2.1.1 编辑和保存网页编辑和保存网页2.1.2 预览网页预览网页 通过编辑可以得到一个.html文档，要想使这个文档显示出网页的样子，就要使用浏览器进行预览。下面以使用Internet Explorer浏览器为例浏览.html文档。1)启动Internet Explorer 4.0及以上版本。2)从Internet Explorer的“文件”菜单中选择“打开”命令，则显示“打开”对话框，如图2-3所示。3)在“打开”列表框中输入要打开文档的路径和名字，然后单击“确定”按钮。或者，在图2-4中单击“浏览”按钮，打开搜寻对话框，如图2-4所示。从“搜寻”下拉列表框中选择文档路径，单击要打开的文件，然后单击“打开”按钮；或者直接双击该文件。这时将重新显示“打开”对话框，如图2-5所示。在“打开”对话框中单击“确定”按钮，将会看到该.html文件的显示效果，如图2-6所示。在浏览器中可以看到，HTML文件中任何一个以上的空格、Enter、Tab键产生的效果都将被忽略。2.1.3 发布网页发布网页 图2-5 选中文件后的“打开”对话框 图2-6 在Internet Explore中浏览网页2.2 HTML文件的基本结构文件的基本结构2.2.1 标记及其属性标记及其属性1.标记标记 格式为：受标记影响的内容受标记影响的内容 2.标记的属性标记的属性 格式为：受影响的内容受影响的内容 2.2.2 HTML文件的基本文件的基本结结构构 HTML文件是一种纯文本格式的文件，HTML文件的基本结构为：网页的标题网页的标题 网页的内容网页的内容 2.2.3 文件结构的格式标记文件结构的格式标记1.HTML文档标记文档标记 HTML文档标记的格式为：HTML文档的内容文档的内容 2.HTML文件头标记文件头标记 HTML文件头标记的格式为：头部的内容头部的内容 3.HTML文件标题标记文件标题标记 HTML文件标题标记的格式为：标题名标题名 4.HTML文件主体标记文件主体标记 HTML文件主体标记的格式为：网网页页的的内内容容 2.3 标题文字标记标题文字标记 标题文字标记的格式为：标题文字标题文字 2.4 段落标记段落标记2.4.1 注释标记注释标记 注释标记的格式为：2.4.2 强强制制换换行行标记标记 强制换行标记的格式为：文字文字 2.4.3 强强制制换换段段标记标记1.强制换段标记强制换段标记 强制换段标记的格式为：文字文字 一个强制换段标记可以看作是两个强制换行标记。2.设置段落标记设置段落标记 设置段落标记的格式为：文字文字 2.4.4 显示预排格式标记显示预排格式标记 显示预排格式标记的格式为：预先排好的格式预先排好的格式 在预排格式中，仍可以用HTML语言对文字的格式进行设置，如文字的颜色、大小等。2.4.5 分区显示标记分区显示标记 分区显示标记的格式为：文本或图像文本或图像 2.4.6 水平线水平线 水平线标记的格式为：水平线标记的格式为：2.5 文字标记文字标记2.5.1 设置文字的大小设置文字的大小 设置文字的大小的格式为：被被设设置置的的文文字字 2.5.2 设设置字体置字体2.5.3 设设置字型置字型2.5.4 设设置文字的置文字的颜颜色色1.标记中的标记中的text属性属性 格式：受影响的文字受影响的文字 2.标记中的标记中的color属性属性 格式为：受影响的文字受影响的文字 习题习题2 2.1 创建一个简单的网页，要求网页的标题是“个人简介”，网页文本内容自定义，保存到以自己名字命名的文件夹中，HTML文件名为index.html。2.2 写出HTML文件的总体结构。在HTML文档中，有头标记和无头标记的区别有哪些？标题标记在网页中有何作用？2.3 在网页中由于有些特殊符号不能直接显示，所以使用替换字符。如果不使用替换字符，用全角字符能够直接显示这些特殊字符吗？2.4 用标记制作一张具有多种色彩的网页。2.5 在IE浏览器，怎样查看网页的HTML源文件。2.6 制作如图2-22所示的网页，要求章为标题H2，居中，黑体，红色；节为标题H3，居左，楷体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。2.7 用预排格式设置网页，要求在Word中排23段文本，然后粘贴过来。2.8 在网页中显示方程式：。