徐州工程学院教案纸 第2章基本网页设计 [学习要点] 1.文本网页的设计及布局 2.设置页面属性 3.主页加入图像 4.在主页中使用列表 5.创建超文本链接 21文本网页的设计和布局 本节介绍如何制作一个以文本为主体的主页的基本知识和方法,主页 中文本的文字风格及布局。通过本节的学习要求掌握以下几点 掌握<BODY>标记几个常用属性的使用格式,本章主要学会怎样给主 页设定不同的颜色背景或图象背景 2.学会在编写主页文本时标题的设置、文本文字的大小及颜色的设定 方法和在主页上设置流动字幕的技巧,使得设计的主页生动活泼。 3.学会在编写主页文本时怎样使用不同的字体、短语风格及使用<Q>、 <CITE>标记的短文引用和长文引用的方法。 4.掌握文本的布局技巧和方法。学会文本块在主页上的布局方法、预 置文本的特殊格式 本节任务:做一个如图2-1(tu2-1)所示的介绍人物的主页。文字部 分使用不同的字体、颜色、短语风格及段落布局。在学完本节后,可以编 写诸如新产品说明、商品广告、企业介绍、招聘启事等内容的主页。 Web主页主要由图形、表格、对象以及环绕它们的文本组成。主页中 文本的文字风格及布局在主页设计中是非常重要的。例如,标题字的大小 颜色、是否居中及各级标题的配置:文本内容的字体、大小、及颜色的设 定;文章分段及段落的风格、长文引用及短语引用的格式;页面的整体布 局等,都是在主页设计中必须考虑的问题。(在 FrontPage2000中文本的输 入和修饰与Word很相似,注意利用菜单和工具栏)本节介绍如何作成一个 以文本为主体的主页的基本知识和方法 2.1.1背景色和背景图像 1.设置网页的背景色 在主页中,使用标记<body>的属性 bgcolor设定主页背景色。格式为
25 徐 州 工 程 学 院 教 案 纸 第 2 章 基本网页设计 [学习要点] 1. 文本网页的设计及布局 2. 设置页面属性 3. 主页加入图像 4. 在主页中使用列表 5. 创建超文本链接 2.1 文本网页的设计和布局 本节介绍如何制作一个以文本为主体的主页的基本知识和方法，主页 中文本的文字风格及布局。通过本节的学习要求掌握以下几点： 1．掌握<BODY>标记几个常用属性的使用格式，本章主要学会怎样给主 页设定不同的颜色背景或图象背景。 2．学会在编写主页文本时标题的设置、文本文字的大小及颜色的设定 方法和在主页上设置流动字幕的技巧，使得设计的主页生动活泼。 3．学会在编写主页文本时怎样使用不同的字体、短语风格及使用<Q>、 <CITE>标记的短文引用和长文引用的方法。 4．掌握文本的布局技巧和方法。学会文本块在主页上的布局方法、预 置文本的特殊格式。 本节任务：做一个如图 2-1（tu2-1）所示的介绍人物的主页。文字部 分使用不同的字体、颜色、短语风格及段落布局。在学完本节后，可以编 写诸如新产品说明、商品广告、企业介绍、招聘启事等内容的主页。 Web 主页主要由图形、表格、对象以及环绕它们的文本组成。主页中 文本的文字风格及布局在主页设计中是非常重要的。例如，标题字的大小、 颜色、是否居中及各级标题的配置；文本内容的字体、大小、及颜色的设 定；文章分段及段落的风格、长文引用及短语引用的格式；页面的整体布 局等，都是在主页设计中必须考虑的问题。（在 FrontPage2000 中文本的输 入和修饰与 Word 很相似，注意利用菜单和工具栏）本节介绍如何作成一个 以文本为主体的主页的基本知识和方法。 2．1．1 背景色和背景图像 1. 设置网页的背景色 在主页中，使用标记<body>的属性 bgcolor 设定主页背景色。格式为：
徐州工程学院教案纸 body bgcolor=”颜色值” 颜色值可以是英文颜色名或16进制的颜色值,如P30表2-1所示 例2-1主页背景色 tu2-1 bgcolor=”#O0ff00 <html> Head> < title>文本</ title < /head> hI align=" center">计算机系教授简介</h1> hr size=4 color="#ffooff <center> <marquee bgcolor="#oOff00 wind=80% beha < font size="6” color="#ff0000″>欢迎到计算机系学习!</font </n </center> < Img src="./图片/祝惠民.GIF" align="left" width="140″ height="120″alt="照片" hspace="20" vspacre="20"> <p>spacer type=horizontal size="10> < font size="4" color="ffo0ff">张光明教授</font><p BIG>张光明教授</BIG>< FONT SIZE="2">,男,<B<I>1940年10月 1></B>诞生于< FONT COLOR="0000ff"河北省石家庄市</FOMT>。 B><I>1955年</I</B>至<B<I>1961年</I>/B在石家庄市第一中学学 习,B<I>1961年9月</I</B进入< FONT size=4 color="#000f<EM 天津科技大学</EM></font>信息学院计算机科学与技术系计算机软件专业 学习。大学毕业后就职于< font color="#008000″〉<em>天津计算机研究所 </em><font>任技术员,两年后考入< font color="#ffa500″)<em>南天大 学</em></font>信息学院攻读硕士学位。<B<I1970年</I>/B>调入 < font color="#a52a2a"><em>天津科技大学</em></font>信息学院任教 并从事计算机图形学及计算机辅助设计学科领域的研究。<B<I>1980年 </I>/B>由国家公派到美国< font colora="#90ff15″><em>加利福尼亚大学 </em></font>攻读博士学位,<B<I>l988年</I〉/B>回国。现任<font color="#ffa500″×<em>天津科技大学</em><font>信息学院教授,IEEE会 员,天津计算机学会常务理事、全国计算机基础教育研究会副理事长。p <pre><h3><b>学术研究方向</b></h3 1.计算机图形学及计算机辅助设计 2.计算机网络及计算机通信<p <h3><b>学术研究成果</b></h3
26 徐 州 工 程 学 院 教 案 纸 <body bgcolor=”颜色值”> 颜色值可以是英文颜色名或 16 进制的颜色值，如 P30 表 2-1 所示 例 2-1 主页背景色 tu2-1 bgcolor="#00ff00" <html> <head> <title>文本</title> </head> <body> <h1 align="center">计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <center> <marquee bgcolor="#00ff00" wind=80% behavior="alternate" loop=-1> <font size="6" color="#ff0000">欢迎到计算机系学习！</font> </marquee> </center> <img src="../图片/祝惠民.GIF" align="left" width="140" height="120" alt="照片" hspace="20" vspacre="20"> <p><spacer type="horizontal" size="10"> <font size="4" color="ff00ff">张光明教授</font><p> <BIG>张光明教授</BIG><FONT SIZE="2">,男，<B><I>1940 年 10 月 </I></B> 诞生于 <FONT COLOR="0000ff"> 河北省石家庄市 </FONT>。 <B><I>1955 年</I></B>至<B><I>1961 年</I></B>在石家庄市第一中学学 习，<B><I>1961 年 9 月</I></B>进入<FONT size=4 color="#0000ff"><EM> 天津科技大学</EM></font>信息学院计算机科学与技术系计算机软件专业 学习。大学毕业后就职于<font color="#008000"><em>天津计算机研究所 </em></font>任技术员，两年后考入<font color="#ffa500"><em>南天大 学</em></font>信息学院攻读硕士学位。<B><I>1970 年</I></B>调入 <font color="#a52a2a"><em>天津科技大学</em></font>信息学院任教， 并从事计算机图形学及计算机辅助设计学科领域的研究。<B><I>1980 年 </I></B>由国家公派到美国<font color="#90ff15"><em>加利福尼亚大学 </em></font>攻读博士学位，<B><I>1988 年</I></B>回国。现任<font color="#ffa500"><em>天津科技大学</em></font>信息学院教授，IEEE 会 员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p> <pre><h3><b>学术研究方向</b></h3> 1.计算机图形学及计算机辅助设计 2.计算机网络及计算机通信<p> <h3><b>学术研究成果</b></h3>
徐州工程学院教案纸 1.完成国家攻关研究4项,其中两项获< a href=" zhang3.htm1">科学 技术进步奖</a>。 2.在国际学术刊物发表< a href=" zhang.html">论文9篇</a>;出版 < a href=" zhang2.htm1>著作</a>4部。 </pre> </body> </html> 2.设置网页的图像背景 使用标记<body>的 background属性可以给主页设置背景图象。格式 为:< body background=”图象”〉 图象系指图象文件,可以是.GIF文件、JPEG文件或PNG文件。指定图 象文件的地址有两种形式,即绝对路径方式和相对路径方式。(绝对路径必 须写明URL。相对路径是指在调用同一计算机内的文件时,不需给出完整 的URL。如果两个文件在同一目录内,则只需给出文件名即可:如果不在同 文件内,则需给出目录名/文件名。) 例2-2图象背景tu2-3< body background="../图片/海 边.JPG"> 2.1.2标题 标题是一篇文章或一段文本的题目,是以某种方式被加强、被突出的 词组或短语。在主页设计中,使用<Hn>标记设定标题的级别,格式为 <Hn>标题</n>n的值可取1-6的整数值,1时最大,取6时最小, 缺省时为<H6> 例2-3标题 tu2-4 <html> <head> < title>标题</ title </head <body bgcolor="#ooff00"> < hI align=" center">天津科技大学计算机系教授简介</h> <hr size=d color="#ffooff> <H1>张光明教授<H1<p 张光明教授,男,1940年10月诞生于河北 省石家庄市。现任天津科技大学信息学院教授,IEE会员,天津计算机学 会常务理事、全国计算机基础教育研究会副理事长 <h2>张光明教授研究方向</h2>p <h2>张光明教授研究成果<h2>p </body> </htmI>
27 徐 州 工 程 学 院 教 案 纸 1.完成国家攻关研究 4 项，其中两项获<a href="zhang3.html">科学 技术进步奖</a>。 2.在国际学术刊物发表<a href="zhang1.html">论文 9 篇</a>；出版 <a href="zhang2.html">著作</a>4 部。 </pre> </body> </html> 2. 设置网页的图像背景 使用标记<body>的 background 属性可以给主页设置背景图象。格式 为：<body background=”图象”> 图象系指图象文件，可以是.GIF 文件、JPEG 文件或 PNG 文件。指定图 象文件的地址有两种形式，即绝对路径方式和相对路径方式。（绝对路径必 须写明 URL。相对路径是指在调用同一计算机内的文件时，不需给出完整 的 URL。如果两个文件在同一目录内，则只需给出文件名即可；如果不在同 一文件内，则需给出目录名/文件名。） 例 2-2 图象背景 tu2-3 <body background="../图片/海 边.JPG"> 2．1．2 标题 标题是一篇文章或一段文本的题目，是以某种方式被加强、被突出的 词组或短语。在主页设计中，使用<Hn>标记设定标题的级别，格式为： <Hn>标题</Hn> n 的值可取 1-6 的整数值，1 时最大，取 6 时最小， 缺省时为<H6>。 例 2-3 标题 tu2-4 <html> <head> <title>标题</title> </head> <body bgcolor="#00ff00"> <h1 align="center">天津科技大学计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <H1>张光明教授</H1><p> 张光明教授,男，1940 年 10 月诞生于河北 省石家庄市。现任天津科技大学信息学院教授，IEEE 会员，天津计算机学 会常务理事、全国计算机基础教育研究会副理事长。 <h2>张光明教授研究方向</h2><p> <h2>张光明教授研究成果</h2><p> </body> </html>
徐州工程学院教案纸 其中“ ”为非换行空格符。 2.1.3文字大小 1.<FONT>标记 使用<FONT>标记设定一段文章、一个语句、一个单词或多个单词的文 字大小。格式为 FONT Size=数字>一段文章、一个语句、一个单词或多个单词</FONT <FOMT>标记中数字的取值范围为1-7,size取7时最大,1时最小。 FoNT size=T>比<H1>稍大。 例2-4文字大小 张光明教授,< font size="2″>男,1940年 10月诞生于河北省石家庄市</font>。1955年至1961年在石家庄市第一中 学学习,1961年9月进入< font size="4">天津现科技大学</font>信息学 院计算机科学与技术系计算机软件专业学习。1970年调入< font size="5"> 天津科技大学<font>信息学院任教,并从事计算机图形学及计算机辅助设 计学科领域的研究。现任< font size="6″>天津科技大学</font>信息学院 教授,IEEE会员,天津计算机学会常务理事、全国计算机基础教育研究会 副理事长。<p 2. <BASEFONT> 使用< BASEFONT>标记可以相对指定文字大小。方法是,首先使用标记 指定基准大小,x值取1-7范围内的整数值。然后使用 < FONT size=±y>文本</FOMT> 随时改变文字的大小。例如x=4时,y=+1相当与< FoNT size=5>。注 意,在一个文件中< BASEFoNT size=x只能使用一次(一个基准)。HM40 不推荐使用 例2-5相对指定文字大小 tu2-6 nbsp; 张光明教授,< basefont size="2">男 1940年10月诞生于河北省石家庄市</font>。1955年至1961年在石家庄 市第一中学学习,1961年9月进入< font size=+2>天津科技大学</font> 信息学院计算机科学与技术系计算机软件专业学习。1970年调入<font size=+3>天津科技大学</font>信息学院任教,并从事计算机图形学及计算 机辅助设计学科领域的研究。1980年由国家公派到美国< font size="+4" 加利福尼亚大学</font>攻读博士学位,1988年回国。现任< font size=+5 天津科技大学</font>信息学院教授,IEEE会员,天津计算机学会常务理 事、全国计算机基础教育研究会副理事长。<p>
28 徐 州 工 程 学 院 教 案 纸 其中“ ”为非换行空格符。 2．1．3 文字大小 1.<FONT>标记 使用<FONT>标记设定一段文章、一个语句、一个单词或多个单词的文 字大小。格式为： <FONT size=数字>一段文章、一个语句、一个单词或多个单词</FONT> <FONT>标记中数字的取值范围为 1-7，size 取 7 时最大，1 时最小。 <FONT size=7>比<H1>稍大。 例 2-4 文字大小 tu2-5 张光明教授,<font size="2">男，1940 年 10 月诞生于河北省石家庄市</font>。1955 年至 1961 年在石家庄市第一中 学学习，1961 年 9 月进入<font size="4">天津现科技大学</font>信息学 院计算机科学与技术系计算机软件专业学习。1970 年调入<font size="5"> 天津科技大学</font>信息学院任教，并从事计算机图形学及计算机辅助设 计学科领域的研究。现任<font size="6">天津科技大学</font>信息学院 教授，IEEE 会员，天津计算机学会常务理事、全国计算机基础教育研究会 副理事长。<p> 2.<BASEFONT> 使用<BASEFONT>标记可以相对指定文字大小。方法是，首先使用标记 <BASEFONT size=x> 指定基准大小，x 值取 1-7 范围内的整数值。然后使用 <FONT size=±y>文本</FONT> 随时改变文字的大小。例如 x=4 时，y=+1 相当与<FONT size=5>。注 意，在一个文件中<BASEFONT size=x>只能使用一次（一个基准）。HTML4.0 不推荐使用。 例 2-5 相对指定文字大小 tu2-6 张光明教授,<basefont size="2">男， 1940 年 10 月诞生于河北省石家庄市</font>。1955 年至 1961 年在石家庄 市第一中学学习，1961 年 9 月进入<font size=+2>天津科技大学</font> 信息学院计算机科学与技术系计算机软件专业学习。1970 年调入<font size=+3>天津科技大学</font>信息学院任教，并从事计算机图形学及计算 机辅助设计学科领域的研究。1980 年由国家公派到美国<font size="+4"> 加利福尼亚大学</font>攻读博士学位，1988 年回国。现任<font size=+5> 天津科技大学</font>信息学院教授，IEEE 会员，天津计算机学会常务理 事、全国计算机基础教育研究会副理事长。<p>
徐州工程学院教案纸 .1.4文本颜色 主页中文本颜色的设定有两种方法:一是在<BODY>标记中使用text属 性设定整个主页文字的颜色,二是在<FONT>标记中使用 color属性设定 段文章、一个语句、一个单词或多个单词甚至一个字的颜色 1.使用tex属性 文字的颜色可由<B0DY>标记中使用text属性来设定。格式为: < BODY text=颜色” 例2-6文本的颜色 tu2-7 < body text="ff0000″ < hI align=" center">计算机系教授简介</h1> <H3>张光明教授</H3>p 张光明教授,< basefont size="2">男,1940年10月 诞生于河北省石家庄市</font>。1955年至1961年在石家庄市第一中学学 习,1961年9月进入< font size=+2》天津科技大学√/font>信息学院计算 机科学与技术系计算机软件专业学习。大学毕业后就职于< font size=+1〉 天津计算机研究所</font>任技术员,两年后考入< font size=+5)南天大学 √font>信息学院攻读硕士学位。1970年调入< font size=+3〉天津科技大 学</font>信息学院任教,并从事计算机图形学及计算机辅助设计学科领域 的研究。现任< font size=+5)天津科技大学</font>信息学院教授,IEEE会 员,天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p </body> 2.设定某一字或某一文字段颜色 在编辑文本的过程中,可以变化某一字或某一文字段颜色。格式为: < font color=”颜色”>字或文字段</FONT 其中“颜色”使用表2-1中的值。例如: < Font color=# ffffff文字段颜色为白色。</FOMT> 或< Font color=”RED>文字段颜色为红色。</FONT> 例27字段颜色 tu2-8 张光明教授,< font color="#008000″size=2 男,1940年10月诞生于河北省石家庄市√font>。1955年至1961年在石 家庄市第一中学学习,1961年9月进入< font color="#0000f"size=2 天津科技大学</font>信息学院计算机科学与技术系计算机软件专业学习 大学毕业后就职于< font size=1>天津计算机研究所</font>任技术员,两 年后考入< font color="#foff"size=3>南天大学</font>信息学院攻读 硕士学位。1980年由国家公派到美国< font color="# dbdbf8″size="5" 加利福尼亚大学</font>攻读博士学位,1988年回国。现任<font color="#ff00ff"size=4>天津科技大学</font>信息学院教授,IEEE会员, 计算机学会常务理
29 徐 州 工 程 学 院 教 案 纸 2．1．4 文本颜色 主页中文本颜色的设定有两种方法：一是在<BODY>标记中使用 text 属 性设定整个主页文字的颜色，二是在<FONT>标记中使用 color 属性设定一 段文章、一个语句、一个单词或多个单词甚至一个字的颜色。 1. 使用 text 属性 文字的颜色可由<BODY>标记中使用 text 属性来设定。格式为： <BODY text=”颜色”> 例 2-6 文本的颜色 tu2-7 <body text="ff0000"> <h1 align="center">计算机系教授简介</h1> <hr size=4> <H3>张光明教授</H3><p> 张光明教授,<basefont size="2">男，1940 年 10 月 诞生于河北省石家庄市</font>。1955 年至 1961 年在石家庄市第一中学学 习，1961 年 9 月进入<font size=+2>天津科技大学</font>信息学院计算 机科学与技术系计算机软件专业学习。大学毕业后就职于<font size=+1> 天津计算机研究所</font>任技术员，两年后考入<font size=+5>南天大学 </font>信息学院攻读硕士学位。1970 年调入<font size=+3>天津科技大 学</font>信息学院任教，并从事计算机图形学及计算机辅助设计学科领域 的研究。现任<font size=+5>天津科技大学</font>信息学院教授，IEEE 会 员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p> </body> 2. 设定某一字或某一文字段颜色 在编辑文本的过程中，可以变化某一字或某一文字段颜色。格式为： <FONT color=”颜色”>字或文字段</FONT> 其中“颜色”使用表 2-1 中的值。例如： <FONT color=”#ffffff”>文字段颜色为白色。</FONT> 或 <FONT color=”RED”>文字段颜色为红色。</FONT> 例 2-7 字段颜色 tu2-8 张光明教授,<font color="#008000" size=2> 男，1940 年 10 月诞生于河北省石家庄市</font>。1955 年至 1961 年在石 家庄市第一中学学习，1961 年 9 月进入<font color="#0000ff" size=2> 天津科技大学</font>信息学院计算机科学与技术系计算机软件专业学习。 大学毕业后就职于<font size=1>天津计算机研究所</font>任技术员，两 年后考入<font color="#ff00ff" size=3>南天大学</font>信息学院攻读 硕士学位。1980 年由国家公派到美国<font color="#dbdbf8" size="5"> 加利福尼亚大学</font>攻读博士学位，1988 年回国。现 任<font color="#ff00ff" size=4>天津科技大学</font>信息学院教授，IEEE会员， 天津计算机学会常务理事