《网页的基本结构和段落、文字标记.ppt》由会员分享，可在线阅读，更多相关《网页的基本结构和段落、文字标记.ppt（20页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作教网页设计与制作教程程(第第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.
2、42.4 段落标记段落标记2.4.12.4.1 注释标记注释标记2.4.2 2.4.2 强制换行标记强制换行标记2.4.3 2.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 编辑和保存网页
3、编辑和保存网页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 选中文件后的“打开”对话框 图2-6 在Inte
4、rnet 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 标题文字标记标题文字标记 标题文字标题文
5、字 n=1，2，3，4，5，62.4 段落标记段落标记2.4.1 注释标记注释标记 2.4.2 强强制制换行行标记 文字文字 2.4.3 强强制制换段段标记1. 文字文字 一个一个可看作两个可看作两个。2. 设置段落标记设置段落标记 文字文字 2.4.4 显示预排格式标记显示预排格式标记 预先排好的格式预先排好的格式 在预排格式中，仍可以用HTML语言对文字的格式进行设置，如文字的颜色、大小等。2.4.5 分区显示标记分区显示标记 文本或图像文本或图像 2.4.6 水平线水平线 表2-1 颜色代码表(1)颜色名英文十六进制代码黑色black#000000蓝色blue#0000FF棕色brown
6、#A52A2A青色cyan#00FFFF灰色gray#808080绿色green#008000乳白色ivory#FFFFF0桔黄色orange#FFA500表2-1 颜色代码表(2)颜色名英文十六进制代码粉红色pink#FFC0CB红色red#FF0000白色white#FFFFFF黄色yellow#FFFF00深红色crimson#CD061F黄绿色greenyellow#0B6EFF水蓝色dodgerblue#0B6EFF淡紫色lavender#DBDBF8颜色的使用color = blackcolor = #000000color = redcolor = #FF0000color =
7、yellowcolor = #FFFF00color = whitecolor = #FFFFFFcolor = bluecolor = #0000FFcolor = cyancolor = #00FFFF2.5 文字标记文字标记2.5.1 设置文字的大小设置文字的大小 被被设设置置的的文文字字 v size=N N=172.5.2 设置字体置字体2.5.3 设置字型置字型 字字型型就就是是文文字字的的风风格格，如如加加粗粗、斜斜体体、带带下下划划线线、上上标、下标等。标、下标等。表2-3 设置各种字型的标记标记格式字体结果加粗斜体带下划线标准打印机字体带删除线下标上标大字体文本小字体文本思考
8、一：如何表示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 创建一个简单的网页，要求网页的标题是“个人简介”，网页文本内容自定义，保存到以自己名字命名的文件夹中，HTML文件名为index.html。 2.2
9、 写出HTML文件的总体结构。在HTML文档中，有头标记和无头标记的区别有哪些？标题标记在网页中有何作用？ 2.3 在网页中由于有些特殊符号不能直接显示，所以使用替换字符。如果不使用替换字符，用全角字符能够直接显示这些特殊字符吗？ 2.4 用标记制作一张具有多种色彩的网页。 2.5 在IE浏览器，怎样查看网页的HTML源文件。 2.6 制作如图2-22所示的网页，要求章为标题H2，居中，黑体，红色；节为标题H3，居左，楷体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。 2.7 用预排格式设置网页，要求在Word中排23段文本，然后粘贴过来。 2.8 在网页中显示方程式：ax2+by2=c。作业2-6评讲1.HTML代码方式 2.正文采用预排版方式 PRE3.3. 标题文字标题文字/ 的实现& <lt; ;Hn Hn align=align=对齐方式对齐方式& >gt; ;标题文字标题文字& <lt; ;/ /HnHn& >gt; ;
