网页制作(1)ppt课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
其中属性align用来设置文本块、一段文字或标题在网 页上的对齐方式：left、center和right。缺省时默认为 left。
14
两边缩进标记 <blockquote>....</blockquote> 滚动 <marquee>电子商务交易模式</marquee>
15
段落标记
水平线标记<hr>（horizontal line）
17
<font>标记用来定义文字的字体、大小和颜色，是成 对标记符。主要属性有：
（1）face属性：定义文字所使用的字体，如face=“隶 书”。
（2）size属性：定义文字的大小，属性值为1~7，也可 以使用相对大小来设置，如size=“+5”、 size=“-5”。
（3）color属性。定义文字的颜色，可以使用颜色的英 文名称来表示颜色，如： color=“red”；也可使用16 进制的RGB代码来表示颜色， color=“#FF0000”，在使 用 16 进 制 的 RGB 代 码 来 表 示 颜 色 时 ， 需 在 颜 色 代 码 前 加 “#”。
网页制作
1
相关知识 （一）HTML文件的概念
HTML（Hyper Text Markup Languafe），即超文本标记语言，它通过多种 标准化的标记符号（Tag）对网页内容进行标注，对页面内容进行标注， 对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进 行描述和指定。 （二）HTML文件的特点 HTML 是 Web 页 面 的 基 础 。 使 用 HTML 描 述 的 网 页 文 件 称 之 为 HTML 页 面 或 者 HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文 本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用 FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。 （三）HTML文件的结构
</ul> 值得注意的是，<li>标记是单标记。即一个表项的开始，
就是前一个表项的结束。 type指定每个表项左端的符号类型，可为disc（实心圆
点）、circle（空心圆点）、square（方块），也可自己设 置图片。
21
列表
2 有序列表标记<ol><li>...</ol>
使用<OL>标记可以建立有序列表，表项的标记仍为 <li>。格式为：
例 如 单 标 记 <HR> 表 示 在 文 档 当 前 位 置 画 一 条 水 平 线 （ horizontal line），一般是从窗口中当前行的最左端一直画到最右端。
4
（一）建立HTML文件 操作步骤如下：
（1）单击“开始”按钮，选择“程序” →“附件” →“记事本”，并打开“记事本”窗口。
20
列表
1 无序列表标记<ul><li>...</ul>
无序列表中每一个表项的前面是项目符号（如●、■等符 号）。建立无序列表使用<UL>标记和<li>表项标记。格式 为：
<ul type="符号类型"> <li type="符号类型1"> 第一个列表项 <li type="符号类型2"> 第二个列表项 …
标记可以不在一行上。 2 强制换行和不换行标记<br>、<nobr>...</nobr>
要用HTML的标记来强制换行、分段。<br>放在一行的 末尾，可以使后面的文字、图片、表格等显示于下一行，而又 不会在行与行之间留下空行，即强制文本换行。强制换行标记 的格式为：
文字 <br> 不换行标记可令文字不能因太长使浏览器无法显示而换行， 它对住址、数学公式、一行数字等尤其有用。其格式为： <nobr> 文字 </nobr>
19
<li type="circle">郁金香：爱的表白</li>
<li type="circle">紫罗兰：永恒之美</li>
<li type="circle">勿忘我：爱到永远</li>
</ul>
</body>
</html>
列表标记包括“项目列 表”标记<ul>、“编号 列表”标记<ol>。<ul> 和<ol>标记都是成对标 记。在<ul>标记之间还 可以使用<li>标记来设 定项目内容，其type属 性可以显示不同形状的 项目符号。
如图所示。 <html> <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99"> <h1 align="center">我的花店!</h1> <p align="center">欢迎您访问我的花店</p> <p align=“center”>花可以传情,可表达思念之情,亲情,感恩的心情,衷 心的祝福!</p> <p align="center">祝愿进入我的花店的朋友天天有好心情!</p> </body> </html>
此外，字体标记符还包括 <b>…</b>粗体 标记符、 <i>…</i>斜体标记符等。
18
4.列表标记 [示例4]项目列表标记，HTML语句如下，保存后的浏览效果如图。 <html> <head> <title>花语</title> </head> <body bgcolor="#FFFF99"> <hl align="center"><font face="宋体">花语</font></hl> <p>各种花所代表的含义如下：</p> <ul> <li>玫瑰：纯洁的爱</li> <li>剑兰：用心坚固</li> <li>百合：百年好和</li> <li type="circle">满天星：爱怜</li> <li type="circle">菊花：吉祥</li> <li type="circle">康及馨：亲情思念</li>
<ol type="符号类型"> <li type="符号类型1"> 表项1 <li type="符号类型2"> 表项2 …
HTML 文 件 均 以 <html> 标 记 符 开 始 ， 以 </html> 标 记 符 结 束 。 <head> 和 </head>标记符之间的内容用于描述页面的头部信息，例如页面标题、关 键词等信息。在<body>和</body>标记符之间的内容即为页面的主体内容。 HTML文件的整体结构如图所示。
10
<h1 align="center">我的花店!</h1> <hr align="center" width="100%" size="4" color="3333FF"> <p align="center">欢迎您访问我的花店</p> 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!<br> 祝愿进入我的花店的朋友天天有好心情!<br> <hr align="center" width="100%" size="4" color="3333FF"> </body> </html>
6
（2）保存HTML文件。 （3）在浏览器中预览所编辑的HTML文件效果。
1.<Hi>标题标记 [示例1]标题标记，在记事本中输入以下HTML语句，保存后浏 览效果，如图所示。 <html> <head> <title>我的花店</title> </head> <body> <h1>欢迎你访问我的花店!</h1> <h2>欢迎你访问我的花店!</h2> <h3>欢迎你访问我的花店!</h3> <h4>欢迎你访问我的花店!</h4> <h5>欢迎你访问我的花店!</h5> <h6>欢迎你访问我的花店!</h6> <h7>欢迎你访问我的花店!</h7> </body> </html>
13
段落标记
定位标记<div>…</div> 与<p>...</p>类似,大区域段
设定文字、图像、表格的摆放位置。当在许多段落中 设置对齐方式时，常使用<div>…</div>标记。定位标记 的格式为：
<div align="left|center|right"> 文本、图像或表 格 </div>
16
（二） <font>标记的设置 字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后
浏览效果，如图所示。 <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99"> <h1 align="center"><b><font color="#FF0000" face=" 隶 书 "
说明：<br>标记符用于定义从新的一行显示，它不产生一个空行，但连续多个 <br>标记可以产生多个空行的效果。 <br>标记符是非成对标记符。
11
Hale Waihona Puke Baidu
标记及其属性
<br>无格式，插哪儿哪儿产生一个换行 注意：不能插入标识中！只能插入标识间
12
段落标记
1 注释标记<!--...--> 注释标记的格式为： <!-- 注释内容 --> 注释并不局限于一行，长度不受限制。结束标记与开始
8
说明： <P>标记符用于划分段落，控制文本的位置。 <P> 是成对标记符，用于定义内容从新的一行开始，并与上段 之间的一个空行，其align属性定义新开始的一行内容在页 面中的对齐位置，属性值可以是left(左对齐)，center(居中 对齐)，或者right(右对齐)。
9
3. <br>换行标记 [示例3]换行标记，将示例2中相应段落中的段落标记 <P>替换为换行标记<br>，HTML语句如下，保存后的浏览 效果如图所示。注意段落标记<P>和换行标记<br>预览效 果的不同。 <html> <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99">
7
说明： <hi>标记符用于定义段落标题的大小级数。最大的标题级数是 <h1>，最 小的标题级数是<h6>。使用<hi>标记符的align属性可控制文字的对齐方式， 属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。
2. <P>段落标记符
[示例2]段落标记符，输入HTML语句如下，保存后的浏览效果
5
（2）在记事本中，输入如图所示的HTML语句。
（3）执行“文件” →“保存”命令，将文件保存为1-1.htm。 （4）在浏览器中打开所建立的HTML文件。
说明：除了记事本之外，还可以使用写字板来编辑html. （二）常用的HTML标记设置
操作步骤如下： （1）在文本文件编辑器中编写HTML文件（可参考下面的示例编写）。
size="+5">我的花店!花店</font></b></h1> <hr align="center" width="100%" size="4" color="3333FF"> <p align="center">欢迎您访问我的花店</p> 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!<br> 祝愿进入我的花店的朋友天天有好心情!<br> <hr align="center" width="100%" size="4" color="3333FF"> </body> </html>
2
常见的标记有文本、图片、超链接、动画、音乐、表格、表单等
3
标记及其属性
HTML标记的格式为：<标记>内容</标记> 标记属性的语法是：<标记 属性1=〝属性值1〞 属性2=
〝属性值2〞 … > 标记只是规定这是什么信息，如文本、图片、表格等，但是
如何控制这些信息，就需要相关的属性值来表示。 各属性之间无先后次序，属性也可省略（即取默认值）
在页面中插入一条水平标尺线，可以使不同功能的文 字分隔开，看起来整齐、明了。当浏览器解释到HTML文档 中的<hr>标记时，会在此处换行，并加入一条水平线段。 线段的样式由标记的参数决定。
水平线标记的格式为： <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" > size设定线条粗细，以像素为单位，默认为2。 width设定线段长度，可以是绝对值（以像素为单位） 或相对值（相对于当前窗口的百分比）。 color设定线条色彩，默认为黑色。可以采用色彩的名 称。色彩可以用相应英文单词或以“#”引导的一个十六进 制数代码来表示。
14
两边缩进标记 <blockquote>....</blockquote> 滚动 <marquee>电子商务交易模式</marquee>
15
段落标记
水平线标记<hr>（horizontal line）
17
<font>标记用来定义文字的字体、大小和颜色，是成 对标记符。主要属性有：
（1）face属性：定义文字所使用的字体，如face=“隶 书”。
（2）size属性：定义文字的大小，属性值为1~7，也可 以使用相对大小来设置，如size=“+5”、 size=“-5”。
（3）color属性。定义文字的颜色，可以使用颜色的英 文名称来表示颜色，如： color=“red”；也可使用16 进制的RGB代码来表示颜色， color=“#FF0000”，在使 用 16 进 制 的 RGB 代 码 来 表 示 颜 色 时 ， 需 在 颜 色 代 码 前 加 “#”。
网页制作
1
相关知识 （一）HTML文件的概念
HTML（Hyper Text Markup Languafe），即超文本标记语言，它通过多种 标准化的标记符号（Tag）对网页内容进行标注，对页面内容进行标注， 对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进 行描述和指定。 （二）HTML文件的特点 HTML 是 Web 页 面 的 基 础 。 使 用 HTML 描 述 的 网 页 文 件 称 之 为 HTML 页 面 或 者 HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文 本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用 FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。 （三）HTML文件的结构
</ul> 值得注意的是，<li>标记是单标记。即一个表项的开始，
就是前一个表项的结束。 type指定每个表项左端的符号类型，可为disc（实心圆
点）、circle（空心圆点）、square（方块），也可自己设 置图片。
21
列表
2 有序列表标记<ol><li>...</ol>
使用<OL>标记可以建立有序列表，表项的标记仍为 <li>。格式为：
例 如 单 标 记 <HR> 表 示 在 文 档 当 前 位 置 画 一 条 水 平 线 （ horizontal line），一般是从窗口中当前行的最左端一直画到最右端。
4
（一）建立HTML文件 操作步骤如下：
（1）单击“开始”按钮，选择“程序” →“附件” →“记事本”，并打开“记事本”窗口。
20
列表
1 无序列表标记<ul><li>...</ul>
无序列表中每一个表项的前面是项目符号（如●、■等符 号）。建立无序列表使用<UL>标记和<li>表项标记。格式 为：
<ul type="符号类型"> <li type="符号类型1"> 第一个列表项 <li type="符号类型2"> 第二个列表项 …
标记可以不在一行上。 2 强制换行和不换行标记<br>、<nobr>...</nobr>
要用HTML的标记来强制换行、分段。<br>放在一行的 末尾，可以使后面的文字、图片、表格等显示于下一行，而又 不会在行与行之间留下空行，即强制文本换行。强制换行标记 的格式为：
文字 <br> 不换行标记可令文字不能因太长使浏览器无法显示而换行， 它对住址、数学公式、一行数字等尤其有用。其格式为： <nobr> 文字 </nobr>
19
<li type="circle">郁金香：爱的表白</li>
<li type="circle">紫罗兰：永恒之美</li>
<li type="circle">勿忘我：爱到永远</li>
</ul>
</body>
</html>
列表标记包括“项目列 表”标记<ul>、“编号 列表”标记<ol>。<ul> 和<ol>标记都是成对标 记。在<ul>标记之间还 可以使用<li>标记来设 定项目内容，其type属 性可以显示不同形状的 项目符号。
如图所示。 <html> <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99"> <h1 align="center">我的花店!</h1> <p align="center">欢迎您访问我的花店</p> <p align=“center”>花可以传情,可表达思念之情,亲情,感恩的心情,衷 心的祝福!</p> <p align="center">祝愿进入我的花店的朋友天天有好心情!</p> </body> </html>
此外，字体标记符还包括 <b>…</b>粗体 标记符、 <i>…</i>斜体标记符等。
18
4.列表标记 [示例4]项目列表标记，HTML语句如下，保存后的浏览效果如图。 <html> <head> <title>花语</title> </head> <body bgcolor="#FFFF99"> <hl align="center"><font face="宋体">花语</font></hl> <p>各种花所代表的含义如下：</p> <ul> <li>玫瑰：纯洁的爱</li> <li>剑兰：用心坚固</li> <li>百合：百年好和</li> <li type="circle">满天星：爱怜</li> <li type="circle">菊花：吉祥</li> <li type="circle">康及馨：亲情思念</li>
<ol type="符号类型"> <li type="符号类型1"> 表项1 <li type="符号类型2"> 表项2 …
HTML 文 件 均 以 <html> 标 记 符 开 始 ， 以 </html> 标 记 符 结 束 。 <head> 和 </head>标记符之间的内容用于描述页面的头部信息，例如页面标题、关 键词等信息。在<body>和</body>标记符之间的内容即为页面的主体内容。 HTML文件的整体结构如图所示。
10
<h1 align="center">我的花店!</h1> <hr align="center" width="100%" size="4" color="3333FF"> <p align="center">欢迎您访问我的花店</p> 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!<br> 祝愿进入我的花店的朋友天天有好心情!<br> <hr align="center" width="100%" size="4" color="3333FF"> </body> </html>
6
（2）保存HTML文件。 （3）在浏览器中预览所编辑的HTML文件效果。
1.<Hi>标题标记 [示例1]标题标记，在记事本中输入以下HTML语句，保存后浏 览效果，如图所示。 <html> <head> <title>我的花店</title> </head> <body> <h1>欢迎你访问我的花店!</h1> <h2>欢迎你访问我的花店!</h2> <h3>欢迎你访问我的花店!</h3> <h4>欢迎你访问我的花店!</h4> <h5>欢迎你访问我的花店!</h5> <h6>欢迎你访问我的花店!</h6> <h7>欢迎你访问我的花店!</h7> </body> </html>
13
段落标记
定位标记<div>…</div> 与<p>...</p>类似,大区域段
设定文字、图像、表格的摆放位置。当在许多段落中 设置对齐方式时，常使用<div>…</div>标记。定位标记 的格式为：
<div align="left|center|right"> 文本、图像或表 格 </div>
16
（二） <font>标记的设置 字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后
浏览效果，如图所示。 <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99"> <h1 align="center"><b><font color="#FF0000" face=" 隶 书 "
说明：<br>标记符用于定义从新的一行显示，它不产生一个空行，但连续多个 <br>标记可以产生多个空行的效果。 <br>标记符是非成对标记符。
11
Hale Waihona Puke Baidu
标记及其属性
<br>无格式，插哪儿哪儿产生一个换行 注意：不能插入标识中！只能插入标识间
12
段落标记
1 注释标记<!--...--> 注释标记的格式为： <!-- 注释内容 --> 注释并不局限于一行，长度不受限制。结束标记与开始
8
说明： <P>标记符用于划分段落，控制文本的位置。 <P> 是成对标记符，用于定义内容从新的一行开始，并与上段 之间的一个空行，其align属性定义新开始的一行内容在页 面中的对齐位置，属性值可以是left(左对齐)，center(居中 对齐)，或者right(右对齐)。
9
3. <br>换行标记 [示例3]换行标记，将示例2中相应段落中的段落标记 <P>替换为换行标记<br>，HTML语句如下，保存后的浏览 效果如图所示。注意段落标记<P>和换行标记<br>预览效 果的不同。 <html> <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99">
7
说明： <hi>标记符用于定义段落标题的大小级数。最大的标题级数是 <h1>，最 小的标题级数是<h6>。使用<hi>标记符的align属性可控制文字的对齐方式， 属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。
2. <P>段落标记符
[示例2]段落标记符，输入HTML语句如下，保存后的浏览效果
5
（2）在记事本中，输入如图所示的HTML语句。
（3）执行“文件” →“保存”命令，将文件保存为1-1.htm。 （4）在浏览器中打开所建立的HTML文件。
说明：除了记事本之外，还可以使用写字板来编辑html. （二）常用的HTML标记设置
操作步骤如下： （1）在文本文件编辑器中编写HTML文件（可参考下面的示例编写）。
size="+5">我的花店!花店</font></b></h1> <hr align="center" width="100%" size="4" color="3333FF"> <p align="center">欢迎您访问我的花店</p> 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!<br> 祝愿进入我的花店的朋友天天有好心情!<br> <hr align="center" width="100%" size="4" color="3333FF"> </body> </html>
2
常见的标记有文本、图片、超链接、动画、音乐、表格、表单等
3
标记及其属性
HTML标记的格式为：<标记>内容</标记> 标记属性的语法是：<标记 属性1=〝属性值1〞 属性2=
〝属性值2〞 … > 标记只是规定这是什么信息，如文本、图片、表格等，但是
如何控制这些信息，就需要相关的属性值来表示。 各属性之间无先后次序，属性也可省略（即取默认值）
在页面中插入一条水平标尺线，可以使不同功能的文 字分隔开，看起来整齐、明了。当浏览器解释到HTML文档 中的<hr>标记时，会在此处换行，并加入一条水平线段。 线段的样式由标记的参数决定。
水平线标记的格式为： <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" > size设定线条粗细，以像素为单位，默认为2。 width设定线段长度，可以是绝对值（以像素为单位） 或相对值（相对于当前窗口的百分比）。 color设定线条色彩，默认为黑色。可以采用色彩的名 称。色彩可以用相应英文单词或以“#”引导的一个十六进 制数代码来表示。