【HTML/CSS/JavaScript】网页设计实验二（ 格式化文本、段落与列表）
网页设计实验二
- 一 文本与段落标记的应用
- 二 设计新闻访问列表
- 三 设计制度宣传展板
- 四 制作饭店菜单价目表
- 五 设计简易 Web 页面
- 六 设计食品安全管理制度页面
+++点击资源索引【查看其它实验】+++
一 文本与段落标记的应用
项目 1：文本与段落标记的应用
使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 2-1
所示。文件名为 prj_2_1.html。图 2-1 其它排版标记应用效果图
第一部分：“1.标题字应用”：
（1）标题：格式化文本信息。
（2）在 body 标记中插入注释语句，内容为“1.标题字应用”，然后使用
标记，定义小标题，内容为“1.标题字应用”。
（3）在 body 标记中分别插入 1、4、5 号标题字标记，并应用属性实现居中、
居左、居右对齐。标题字的内容均为“软件工程是全国就业薪酬涨幅最大的专业”，
并给“软件工程”加上汉语拼音标注。
（4）在 body 标记中插入一条颜色为#ff3333 的水平分隔线标记。
第二部分：“2.段落、字体标记应用”
（5）在 body 标记中插入标记，定义小标题，内容为“2.
段落、字体标记应用”。再插入注释语句，内容为“2.段落、字体标记应用”。
（6）在 body 标记中插入段落标记，对段落内容进行字体控制，样式：字体
隶书、大小 5、颜色 blue，并在段首插入 4 个空格。
段落的内容如下：
网页的本质就是超级文本标记语言，通过结合使用其他的 Web 技术（如：脚本语言、公共网关接口、
组件等），可以创造出功能强大的网页。
第三部分：“3.文本标记应用”
（7）在 body 标记中插入标记，定义小标题，内容为“3.
文本标记应用”。再插入注释语句，内容为“3.文本标记应用”。
（8）在 body 标记中插入上标、下标和地址标记完成页面内容的设置，并实
现前两行内容居中显示。后三行内容采用块缩进（块引用）标记。
具体内容如下：
2X2
+3x=9 x1+x2=10
地址：江苏省南京市珠江路 1924 号
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来
标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告
诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
第四部分：“4.其它排版标记应用”
（9）在 body 标记中插入标记，定义小标题，内容为“4.
其他排版标记应用”。再插入注释语句，内容为“4.其他排版标记应用”。
（10）在 body 标记中插入预设格式标记，内容为一首诗等。采用 font 标记
设置字体大小及颜色。其中诗标题字体大小为 7，作者和内容信息字体大小为 5。
内容如下：
《春思》
李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏？
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物
起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，盼望他
早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归
怀己，此时秦桑已低，妾已断 肠，进一层表达了思妇之情。五、六两句，以
春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。
全诗以景寄情，委婉动人。
（11）在 body 标记中插入一条“颜色为#ff00ff、大小为 3”的水平分隔线标
记。
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>格式化文本信息title>
head>
<body>
<strong>【1.标题字应用】strong>
<h1 align="center"><ruby>软件工程<rt>ruanjiangongchengrt>ruby>是全国就业薪酬涨幅最大的专业h1>
<h4 align="left"><ruby>软件工程<rt>ruanjiangongchengrt>ruby>是全国就业薪酬涨幅最大的专业h4>
<h5 align="right"><ruby>软件工程<rt>ruanjiangongchengrt>ruby>是全国就业薪酬涨幅最大的专业h5>
<hr color="#ff3333">
<strong>【2.段落、字体标记应用】strong>
<p style="font-family:'楷体'; font-size:5; color:blue; text-indent:4em" >网页的本质就是超级文本标记语言，通过结合使用其他的 Web 技术（如：脚本语言、公共网关接口、
组件等），可以创造出功能强大的网页。p>
<strong>【3.文本标记应用】strong>
<p align="center">3X<sup>2sup>+3X=9 X<sub>1sub>+X<sub>2sub>=10p>
<address align="center">地址：江苏省南京市珠江路1924号address>
<blockquote>超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来
标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告 诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 blockquote>
<strong>【4.其他排版标记应用】strong>
<pre><font size="7" color="red">
《春思》font><font size="5">
李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏？
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的
燕秦春天景物起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍
的夫君，盼望他早日归来。三、四句由 开头两句生发而来，继续写
燕草方碧，夫君必定思归怀己，此时秦桑已低，妾已断 肠，进一层
表达了思妇之情。五、六两句，以春风掀动罗帏时，思妇的心理活
动，来 表现她对爱情坚贞不二的高尚情操。全诗以景寄情，委婉动人。
font>
<hr color="#ff00ff" size="3">
pre>
body>
html>
二 设计新闻访问列表
项目 2 设计新闻访问列表
使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图
2-2-1 所示，原网站部分新闻版块截图如图 2-2-2 所示。文件名为 prj_2_2.html，
标题名为“无序列表实现新闻显示”。
图 2-2-1 用无序列表实现新闻版块效果 图 2-2-2 原网站部分新闻版块截图 （1）在首行插入注释语句，注明程序名称为 prj_2_2.html。 （2）在 body 标记中插入 div 标记，在 div 标记中分别插入下列标记：
○1 插入标题字 h2 标记，内容为：“科研发展”。
○2 插入段落标记，内容为“高校资讯 科技前沿 成果展示 学术会议”。
○3 插入无序列表 ul 标记，依次添加列表项。列表项内容如下：
国防科技大学员问鼎 2014 国际数模竞赛最高奖
同济大学教授阮仪三获 2014 亨利•霍普•里德奖
中科大徐春叶教授获 2014 年国际材料科学奖
北京和睦家医院肺癌诊疗会诊中心成立
兰州大学博士生获全国优秀博士学位论文提名
编辑完后，保存 HTML 文档，并通过浏览器查看网页效果，如图 2-2-3 所示。
图 2-2-3 新闻版块初始效果（无样式） （3）定义样式。在 head 标记中插入 style 标记，在 style 标记中分别定义 bt、
div1 两个类样式，ul、h2 两个标记样式，分别如下：
.bt{font-size:22px;font-family:黑体;margin:0 auto;padding:0 20px;}
.div1{width:530px;height:280px;border:1px solid #ccff99;}
ul{list-style-type:disc;font-size:22px;line-height:33px;color:blue;}
h2{font-size:32px;background:#ebebeb;color:#000099;margin:0 auto 10px auto;}
（4）引用样式。在 body 标记中分别给 div、p 等标记引用样式，格式分别
如下：
高校资讯 科技前沿 成果展示 学术会议
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表实现新闻显示title>
<style type="text/css">
.bt {
font-size: 22px;
font-family: 黑体;
margin: 0 auto;
pidding: 0 20px;
}
.div1 {
width: 530px;
height: 280px;
border: 1px solid #ccff99;
}
ul {
list-style-type: disc;
font-size: 22px;
line-height: 33px;
color: blue;
}
h2 {
font-size: 32px;
background: #ebebeb;
color: #000099;
margin: 0 auto 10px auto;
}
style>
head>
<body>
<div class="div1">
<h2>科技研发h2>
<p class="bt">高校资讯 科技前沿 成果展示 学术会议p>
<ul>
<li>国防科技大学员问鼎 2014 国际数模竞赛最高奖li>
<li>同济大学教授阮仪三获 2014 亨利•霍普•里德奖li>
<li>中科大徐春叶教授获 2014 年国际材料科学奖li>
<li>北京和睦家医院肺癌诊疗会诊中心成立li>
<li>兰州大学博士生获全国优秀博士学位论文提名li>
ul>
div>
body>
html>
三 设计制度宣传展板
项目 3 设计制度宣传展板
使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图
2-3-1 所示。文件名为 prj_2_3.html，标题名为“设计制度宣传展板”。 图 2-3-1 《大型分析仪器管理办法》最终效果图
（1）在首行插入注释语句，注明程序名称为 prj_2_3.html。 （2）在 body 标记中插入图层 div，定义图层的 class 属性值为“div1”。
（3）在 div 标记中插入 h1 标题字标记，居中显示，内容为“大型分析仪器
管理办法”。
（4）在 div 标记中插入有序列表 ol 标记，type 属性和 start 属性的值均设置
为“1”。
（5）在 ol 标记中插入 10 个 li 标记，并添加列表项的内容，列表项的内容
分别如下：
大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，
然后再启动仪器开关。
必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，
停止使用资格一周。
使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用
后必须经有关教师和实验人员同意方可进行独立操作。
仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方
可离开。
下次使用者，在开机前，首先检查仪器清洁卫生、仪器是否有损坏，接通电源后，检查是否运转正常。
发现问题及时报告管理员，并找上一次使用者问明情况，知情不报者追查当次使用者责任。
若在操作使用期间出现故障，应及时关闭电源，并向有关管理人员报告，严禁擅自处理、拆卸、调整
仪器主要部件，凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源，各种按钮回到原位，并做
好清洁工作、锁好门窗。
所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。
保持仪器清洁，仪器的放置要远离强酸、强碱等腐蚀性物品，远离水源、火源、气源等不安全源。
各仪器要根据其保养、维护要求，进行及时或定期的干燥处理、充电、维护、校验等，确保仪器正常
运转。每学期进行一次仪器使用检查，发现有损坏应及时请有关部门维修。
仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任批准后可在实验室按上述规定使
用。
（6）在 div 标记中插入 h3 标题字标记，并设置“居右”显示。内容为“大
型仪器管理办公室”。此时，页面初始效果图如图 2-3-2 所示。
图 2-3-2 《大型分析仪器管理办法》初始效果图 （7）定义样式。在 head 标记中插入 style 标记，分别定义 body、h1、类 div1
的样式，参考代码如下：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计制度宣传展板title>head>
<style type="text/css">
body
{
text-align:center;
font-size:20px;
font-weight:bold;
}
h1
{
font-size:32px;
font-family:黑体;
height:62px;
padding-top:15px;
text-align:center;
color:white;
background:#9999ff;
}
.div1
{
width:650px;
height:940px;
text-align:left;
padding:50px;
background:url("img/prj_image2_2.jpg");
letter-spacing:1px;
}
style>
<body>
<div id="" class="div1">
<h1>大型分析仪器管理办法h1>
<ol type="1" start="1">
<li>大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，
然后再启动仪器开关。li>
<li>必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，
停止使用资格一周。li>
<li>使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用
后必须经有关教师和实验人员同意方可进行独立操作。li>
<li>仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方
可离开。li>
<li>下次使用者，在开机前，首先检查仪器清洁卫生、仪器是否有损坏，接通电源后，检查是否运转正常。
发现问题及时报告管理员，并找上一次使用者问明情况，知情不报者追查当次使用者责任。li>
<li>若在操作使用期间出现故障，应及时关闭电源，并向有关管理人员报告，严禁擅自处理、拆卸、调整
仪器主要部件，凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源，各种按钮回到原位，并做
好清洁工作、锁好门窗。li>
<li>所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。li>
<li>保持仪器清洁，仪器的放置要远离强酸、强碱等腐蚀性物品，远离水源、火源、气源等不安全源。li>
<li>各仪器要根据其保养、维护要求，进行及时或定期的干燥处理、充电、维护、校验等，确保仪器正常
运转。每学期进行一次仪器使用检查，发现有损坏应及时请有关部门维修。li>
<li>仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任批准后可在实验室按上述规定使
用。li>
ol>
<h3 align="right">大型仪器管理办公室h3>
div>
body>
html>
四 制作饭店菜单价目表
项目 4 制作饭店菜单价目表
使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图
2-4-1 所示。文件名为 prj_2_4.html。 图 2-4-1 绿晶饭店菜单价目表页面 （1）在首行插入注释语句，注明程序名称为 prj_2_4.html。 （2）在 body 标记中插入图层 div。 （3）在 div 标记中插入 h3 标题字标记，居中显示，内容为“绿晶饭店菜单
价目表”。
（4）在 div 标记中插入 3 个定义列表 dl 标记。分别用
个菜单标题为“心满意粥”、“饮料”、“红酒”，然后用 标记分别定义每
类菜单中的子菜单。
菜单具体列表内容分别如下：
心满意粥
菜心粒肉片粥…6 元
皮蛋瘦肉粥…5 元
香茜鱼片粥…8 元
生菜丝骨腩粥…6 元
枣丝杞子猪肝粥…6 元
状元及第粥…8 元
生菜肚丝粥…8 元
明火白粥…2 元
饮料
矿泉水…2 元/瓶
旺仔牛奶…5 元/瓶
高山青草奶…10 元/瓶
王老吉…5 元/罐
雪碧…4 元/瓶
可口可乐…4 元/罐
和其正凉茶…4 元/罐
康师傅红/绿茶…4 元/瓶
红酒
特饮干红…98 元/瓶
法国查尔斯干红…128 元/瓶
注册解百纳干红…168 元/瓶 张裕圆桶干红（特选级）黑色…168 元/瓶 张裕圆桶解百纳（特选级）红色…258 元/瓶 张裕卡斯特（特选级）黑色…398 元/瓶
初始化页面效果如图 2-4-2 所示。
图 2-4-2 绿晶饭店菜单价目表初始页面 （5）定义样式。在 head 标记中插入 style 标记，分别定义 body、div、dt、
dd、h3 的样式。参考代码如下：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绿晶饭店菜单价目表title>
<style type="text/css">
body
{
background:url("img/prj_image_2_4_153.jpg")no-repeat;
} /*设置背景图像*/
div
{
width:950px;
height:730px;
text-align:center;
padding-left:80px;
} /*设置左填充为 80px，让定义列表整体向右移动*/
dt
{
font:bold 24px;
} /*设置定义项目的字体加粗，24px*/
dd
{
font:18px 隶书;
} /*设置描述字体大小 18px、隶书*/
h3
{
font:bold 32px 黑体;
color:red;
} /*设置 h3 样式*/
style>
head>
<body>
<div>
<h3 align="center">绿晶饭店菜单价目表h3>
<dl>
<dt>心满意粥dt>
<dd>菜心粒肉片粥.......6 元dd>
<dd>皮蛋瘦肉粥.........5 元dd>
<dd>香茜鱼片粥.........8 元dd>
<dd>生菜丝骨腩粥.......6 元dd>
<dd>枣丝杞子猪肝粥.....6 元dd>
<dd>状元及第粥.........8 元dd>
<dd>生菜肚丝粥.........8 元dd>
<dd>明火白粥...........2 元dd>
<dt>饮料dt>
<dd>矿泉水...........2 元/瓶dd>
<dd>旺仔牛奶.........5 元/瓶dd>
<dd>高山青草奶......10 元/瓶dd>
<dd>王老吉...........5 元/罐dd>
<dd>雪碧.............4 元/瓶dd>
<dd>可口可乐.........4 元/罐dd>
<dd>和其正凉茶.......4 元/罐dd>
<dd>康师傅红/绿茶....4 元/瓶dd>
<dt>红酒dt>
<dd>特饮干红.........................98 元/瓶dd>
<dd>法国查尔斯干红..................128 元/瓶dd>
<dd>注册解百纳干红..................168 元/瓶dd>
<dd>张裕圆桶干红（特选级）黑色......168 元/瓶dd>
<dd>张裕圆桶解百纳（特选级）红色...258 元/瓶 dd>
<dd>张裕卡斯特（特选级）黑色.........398 元/瓶dd>
dl>
div>
body>
html>
五 设计简易 Web 页面
项目 5：设计简易 Web 页面
使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 2-5
所示。文件名为 prj_2_5.html。 图 2-5 font 标记及文本标记的应用 （1）采用 4 号标题字显示标题“font 标记及文本标记的应用”。
（2）将“平淡的语言娓娓道来，如清水芙蓉，不带半点修饰。完全是信手
拈来，没有任何矫揉造作之痕正是平平淡淡才是真。”首行缩进 5 个字符、字体
为黑体、蓝色，大小为 5。 （3）将段落“客居他乡的游子，面对如霜的秋月怎能不想念故乡、不想念
亲人呢？如此一个千人吟、万人唱的主题却在这首小诗中表现得淋漓尽致，以至
千年以来脍炙人口，流传不衰！”首行缩进 4 个字符、前一句为加粗效果、后一
句为斜体并带下划线效果。
文字内容如下：
平淡的语言娓娓道来，如清水芙蓉，不带半点修饰。完全是信手拈来，没有任何矫揉造作之痕正是平
平淡淡才是真。
客居他乡的游子，面对如霜的秋月怎能不想念故乡、不想念亲人呢？如此一个千人吟、万人唱的主题
却在这首小诗中表现得淋漓尽致，以至千年以来脍炙人口，流传不衰！
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
<style type="text/css">
h4{
text-align:center;
}
.p1{
text-indent:5em;
font-family:黑体;
color:blue;
font-size:5px;
}
.p2{
text-indent:4em;
}
.span1{
font-weight:bold;
}
.span2{
text-decoration:underline;
font-style:italic;
}
style>
head>
<body>
<h4>font 标记及文本标记的应用h4>
<p class="p1">
客居他乡的游子，面对如霜的秋月怎能不想念故乡、不想念
亲人呢？如此一个千人吟、万人唱的主题却在这首小诗中表现得淋漓尽致，以至
千年以来脍炙人口，流传不衰！
p>
<p class="p2"><span class="span1">
客居他乡的游子，面对如霜的秋月怎能不想念故乡、不想念亲人呢？span><span class="span2">如此一个千人吟、万人唱的主题
却在这首小诗中表现得淋漓尽致，以至千年以来脍炙人口，流传不衰！span>
p>
body>
html>
六 设计食品安全管理制度页面
项目 6：设计食品安全管理制度页面
使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 2-6
所示。文件名为 prj_2_6.html。
图 2-6 食品安全管理制度
（1）页面标题：食品安全管理制度。
（2）页面内容：3 号标题字显示“食品安全管理制度”，h3 标记样式为“字
体大小 36px、背景色#3366ff、字白色、填充（padding）10px”；在页面底部插入
第 2 个 h3 标记，其内容为“版权所有©小街私房菜有限公司宣”。
附：制度内容如下：
食堂从业人员和管理人员必须掌握有关食品卫生的基本要求。
食堂从业人员每年必须进行健康检查，新参加工作和临时参加工作的食品生产经营人员都必须进行健
康检查。
食堂从业人员在出现咳嗽、腹泻、发热、呕吐等有碍于食品卫生的症状时，应立即脱离工作岗位，待
查明病因，排除有碍食品卫生的病症或愈后方可重新上岗。
食堂从业人员应有良好的个人卫生习惯必须做到：
工作前，处理食品原料后用肥皂及流动清水洗手；接触直接入口食品之前应洗手消毒。
穿戴清洁的工作衣、帽，并把头发置于帽内。
加工食品时不得留长指甲、涂指甲油及戴戒指等。
不得在食品加工和销售场所内吸烟。
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>食品安全管理制度title>
<style type="text/css">
h3{
font-size:36px;
background-color:#3366ff;
color:white;
padding:10px;
}
style>
head>
<body>
<h3 align="center">食品安全管理制度h3>
<ol type="1">
<li>食堂从业人员和管理人员必须掌握有关食品卫生的基本要求。li>
<li>食堂从业人员每年必须进行健康检查，新参加工作和临时参加工作的食品生产经营人员都必须进行健
康检查。li>
<li>食堂从业人员在出现咳嗽、腹泻、发热、呕吐等有碍于食品卫生的症状时，应立即脱离工作岗位，待
查明病因，排除有碍食品卫生的病症或愈后方可重新上岗。li>
<li>
食堂从业人员应有良好的个人卫生习惯必须做到：
<ul type="square">
<li>工作前，处理食品原料后用肥皂及流动清水洗手；接触直接入口食品之前应洗手消毒。li>
<li>穿戴清洁的工作衣、帽，并把头发置于帽内。li>
<li>加工食品时不得留长指甲、涂指甲油及戴戒指等。li>
<li>不得在食品加工和销售场所内吸烟li>
li>
ol>
<h3 align="center">版权所有©小街私房菜有限公司宣h3>
body>
html>