【HTML/CSS/JavaScript】网页设计实验二（格式化文本、段落与列表）

网页设计实验二一文本与段落标记的应用二设计新闻访问列表三设计制度宣传展板四制作饭店菜单价目表五设计简易 Web 页面六设计食品安全管理制度页面一文本与段落标记的应用项目 1：文本与段落标记的应用使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 2-1所示。文件名为 prj_2_1.html。图 2-1 其它排版标记应用效果图第一部分：“1.标题字应用”：（1

阿斯卡码

8921人浏览 · 2021-11-09 20:27:43

阿斯卡码 · 2021-11-09 20:27:43 发布

网页设计实验二

一文本与段落标记的应用
二设计新闻访问列表
三设计制度宣传展板
四制作饭店菜单价目表
五设计简易 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>


<!--【1.标题字应用】-->
<strong>【1.标题字应用】</strong>
<h1 align="center"><ruby>软件工程<rt>ruanjiangongcheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h1>
<h4 align="left"><ruby>软件工程<rt>ruanjiangongcheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h4>
<h5 align="right"><ruby>软件工程<rt>ruanjiangongcheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h5>
<hr color="#ff3333">


<!--2.段落、字体标记应用-->
<strong>【2.段落、字体标记应用】</strong>
<p style="font-family:'楷体'; font-size:5; color:blue; text-indent:4em" >网页的本质就是超级文本标记语言，通过结合使用其他的 Web 技术（如：脚本语言、公共网关接口、
组件等），可以创造出功能强大的网页。</p>



<!--3.文本标记应用-->

<strong>【3.文本标记应用】</strong>
<p align="center">3X<sup>2</sup>+3X=9&nbsp;&nbsp;&nbsp;&nbsp;X<sub>1</sub>+X<sub>2</sub>=10</p>
<address align="center">地址：江苏省南京市珠江路1924号</address>
<blockquote>超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来
标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告 诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 </blockquote>

<!--4.其他排版标记应用-->
<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 标记。分别用

标记定义 3
个菜单标题为“心满意粥”、“饮料”、“红酒”，然后用

标记分别定义每
类菜单中的子菜单。
菜单具体列表内容分别如下：
心满意粥
菜心粒肉片粥…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>
<!--程序名称为 prj_2_4.html-->
<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">版权所有&copy;小街私房菜有限公司宣</h3>
</body>
</html>