网页的基本结构和段落、文字标记.ppt

1、网页设计与制作教程(第2版),机械工业出版社,第2章 网页的基本结构和 段落、文字标记,2.1 网页的创建过程 2.1.1 编辑和保存网页 2.1.2 预览网页 2.1.3 发布网页 2.2 HTML文件的基本结构 2.2.1 标记及其属性 2.2.2 HTML文件的基本结构 2.2.3 文件结构的格式标记 2.3 标题文字标记 2.4 段落标记 2.4.1 注释标记,2.4.2 强制换行标记 2.4.3 强制换段标记 2.4.4 显示预排格式标记 2.4.5 分区显示标记 2.4.6 水平线 2.5 文字标记 2.5.1 设置文字的大小 2.5.2 设置字体 2.5.3 设置字型 2.5.4

2、 设置文字的颜色 习题2,2.1 网页的创建过程 2.1.1 编辑和保存网页 2.1.2 预览网页 1) 启动Internet Explorer 4.0及以上版本。 2) 文件 打开，则显示“打开”对话框，如图2-3所示。 3) 在“打开”列表框中输入要打开文档的路径和名字，然后单击“确定”按钮。 或者，在图2-4中单击“浏览”按钮，打开搜寻对话框，如图2-4所示。,选择要打开的文件，然后单击“打开”-“确定” ，将会看到该.html文件的显示效果，如图2-6所示。 在浏览器中可以看到，HTML文件中任何一个以上的空格、Enter、Tab键产生的效果都将被忽略。,2.1.3 发布网页,图2-5

3、 选中文件后的“打开”对话框 图2-6 在Internet Explore中浏览网页,2.2 HTML文件的基本结构 2.2.1 标记及其属性 1.标记 格式为： 内容 2. 标记的属性 格式为： 内容 ,2.2.2 HTML文件的基本结构 网页的标题 网页的内容 ,2.2.3 文件结构的格式标记 1. HTML文档标记 内容 2. HTML文件头标记 头部的内容 3. HTML文件标题标记 标题名 4. HTML文件主体标记 网页的内容 ,2.3 标题文字标记 标题文字 n=1，2，3，4，5，6 2.4 段落标记 2.4.1 注释标记 2.4.2 强制换行标记 文字 2.4.3 强制换段标

4、记 1. 文字 一个可看作两个。,2. 设置段落标记 文字 2.4.4 显示预排格式标记 预先排好的格式 在预排格式中，仍可以用HTML语言对文字的格式进行设置，如文字的颜色、大小等。 2.4.5 分区显示标记 文本或图像 2.4.6 水平线 ,表2-1 颜色代码表(1),表2-1 颜色代码表(2),颜色的使用,color = black color = #000000 color = red color = #FF0000 color = yellow color = #FFFF00,color = white color = #FFFFFF color = blue color = #00

5、00FF color = cyan color = #00FFFF,2.5 文字标记 2.5.1 设置文字的大小 被设置的文字 ,size=N N=17 2.5.2 设置字体 2.5.3 设置字型 字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。,表2-3 设置各种字型的标记,思考一：如何表示H2SO4?, H2SO 4 ,思考二：如何表示ax2+bx+c=0?, ax2+bx+c=0 ,2.5.4 设置文字的颜色 1. 标记中的text属性 文字 2. 标记中的color属性 文字 3. 与同时定义color属性时， 优先,表2-4 特殊替换字符,习题2 2.1 创建一个简单的网页

6、，要求网页的标题是“个人简介”，网页文本内容自定义，保存到以自己名字命名的文件夹中，HTML文件名为index.html。 2.2 写出HTML文件的总体结构。在HTML文档中，有头标记和无头标记的区别有哪些？标题标记在网页中有何作用？ 2.3 在网页中由于有些特殊符号不能直接显示，所以使用替换字符。如果不使用替换字符，用全角字符能够直接显示这些特殊字符吗？ 2.4 用标记制作一张具有多种色彩的网页。 2.5 在IE浏览器，怎样查看网页的HTML源文件。 2.6 制作如图2-22所示的网页，要求章为标题H2，居中，黑体，红色；节为标题H3，居左，楷体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。,2.7