目录
实验题目:格式化文本、段落与列表
实验目的:熟悉格式化文本与段落、列表的相关标签
实验内容:
项目1 文本与段落标记的应用
第一部分:“1.标题字应用”
图1-2-2 其它排版标记应用效果图
第二部分:“2.段落、字体标记应用”
段落的内容如下:
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。
第三部分:“3.文本标记应用”
具体内容如下:
2X2+3x=9 x1+x2=10
地址:江苏省南京市珠江路1924号
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
第四部分:“4.其它排版标记应用”
内容如下:
《春思》
李白
燕草如碧丝,秦桑低绿枝。
当君怀归日,是妾断肠时。
春风不相识,何事入罗帏?
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物
起兴,写独处 秦地的思妇触景生情,终日思念远在燕地卫戍的夫君,盼望他
早日归来。三、四句由 开头两句生发而来,继续写燕草方碧,夫君必定思归
怀己,此时秦桑已低,妾已断 肠,进一层表达了思妇之情。五、六两句,以
春风掀动罗帏时,思妇的心理活动,来 表现她对爱情坚贞不二的高尚情操。
全诗以景寄情,委婉动人。
项目2 设计新闻访问列表
编程实现如图1-2-3所示的页面。所需辅助文字材料如下:
图1-2-3用无序列表实现新闻版块效果
列表项的内容如下:
- 国防科技大学员问鼎2014国际数模竞赛最高奖
- 同济大学教授阮仪三获2014亨利•霍普•里德奖
- 中科大徐春叶教授获2014年国际材料科学奖
- 北京和睦家医院肺癌诊疗会诊中心成立
- 兰州大学博士生获全国优秀博士学位论文提名
编辑完后,保存HTML文档,并通过浏览器查看网页效果,如图1-2-4所示。
图1-2-4新闻版块初始效果(无样式)
项目3 设计制度宣传展板
1.制度宣传展板效果如图1-2-5所示的页面。所需辅助文字材料如下:
图1-2-5 《大型分析仪器管理办法》最终效果图
(2)设计网页初步效果。
列表项的内容分别如下,如图1-2-6所示。
图1-2-6 《大型分析仪器管理办法》初始效果图
大型仪器必须有专人保管,须配有稳压电源,使用前须先检查仪器间各电路连接情况,再开稳压电源,然后再启动仪器开关。
必须严格执行仪器设备运行记录制度,记录仪器运行状况、开关机时间。凡不及时记录者,一经发现,停止使用资格一周。
使用仪器必须熟悉本仪器的性能和操作方法,本科生作毕业论文使用时应有教师在场,熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。
仪器使用完毕,必须将各使用器件擦洗干净归还原处,盖上防尘罩,关闭电源,打扫完室内清洁,方可离开。
下次使用者,在开机前,首先检查仪器清洁卫生、仪器是否有损坏,接通电源后,检查是否运转正常。发现问题及时报告管理员,并找上一次使用者问明情况,知情不报者追查当次使用者责任。
若在操作使用期间出现故障,应及时关闭电源,并向有关管理人员报告,严禁擅自处理、拆卸、调整仪器主要部件,凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源,各种按钮回到原位,并做好清洁工作、锁好门窗。
所有仪器设备的操作手册及技术资料原件一律建档保存,随仪器使用的只能是复印件。
保持仪器清洁,仪器的放置要远离强酸、强碱等腐蚀性物品,远离水源、火源、气源等不安全源。
各仪器要根据其保养、维护要求,进行及时或定期的干燥处理、充电、维护、校验等,确保仪器正常运转。每学期进行一次仪器使用检查,发现有损坏应及时请有关部门维修。
仪器不能随意搬动,更不能借给外单位使用;校内人员经实验室主任批准后可在实验室按上述规定使用。
项目4 制作饭店菜单价目表
1.编程实现绿晶饭店菜单价目表效果如图1-2-7所示。所需辅助文字材料如下:
图1-2-7 绿晶饭店菜单价目表页面
菜单具体列表内容分别如下:
心满意粥
菜心粒肉片粥.......6元
皮蛋瘦肉粥.........5元
香茜鱼片粥.........8元
生菜丝骨腩粥.......6元
枣丝杞子猪肝粥.....6元
状元及第粥.........8元
生菜肚丝粥.........8元
明火白粥...........2元
饮料
矿泉水...........2元/瓶
旺仔牛奶.........5元/瓶
高山青草奶......10元/瓶
王老吉...........5元/罐
雪碧.............4元/瓶
可口可乐.........4元/罐
和其正凉茶.......4元/罐
康师傅红/绿茶....4元/瓶
红酒
特饮干红.........................98元/瓶
法国查尔斯干红..................128元/瓶
注册解百纳干红..................168元/瓶
张裕圆桶干红(特选级)黑色......168元/瓶
张裕圆桶解百纳(特选级)红色...258元/瓶
张裕卡斯特(特选级)黑色.........398元/瓶
初始化页面效果如图1-2-9所示。
图1-2-8 绿晶饭店菜单价目表初始页面
实验过程及结果:
项目一:文本与段落标记的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化文本信息</title>
</head>
<body>
<h6>[1.标题字应用]</h6>
<h3 align="center">软件工程是全国就业薪酬涨幅最大的专业</h3>
<h6 align="left">软件工程是全国就业薪酬涨幅最大的专业</h6>
<h6 align="right">软件工程是全国就业薪酬涨幅最大的专业</h6>
<hr color="red">
<h6>[2.段落、字体标记应用]</h6>
<p style="color: blue;font-family: 隶书;"> 网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。</p>
<h6>[3.文本标记应用]</h6>
<p><strong>2X<sup>2</sup>+3x=9 </strong> <i>x<sub>1</sub>+x<sub>2</sub>=10 </i><br>
<i>地址:江苏省南京市珠江路1924号</i></p>
<p style="margin-left:35px ;margin-right: 35px;">超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。</p>
<h6>[4.其他排版标记应用]</h6>
<pre>
<font size="7" color="red">春 思</font>
——李白
燕草如碧丝,秦桑低绿枝。
当君怀归日,是妾断肠时。
春风不相识,何事入罗帏?
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物起兴,写独处 秦地的思妇触景生情,终日思念远在燕地卫戍的夫君,盼望他早日归来。三、四句由 开头两句生发而来,继续写燕草方碧,夫君必定思归怀己,此时秦桑
已低,妾已断 肠,进一层表达了思妇之情。五、六两句,以春风掀动罗帏时,思妇的心理活动,来 表现她对爱情坚贞不二的高尚情操。全诗以景寄情,委婉动人。</pre></p>
<hr color="fuchsia">
</body>
</html>
效果图:
项目二:设计新闻访问列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表实现新闻显示</title>
<style type="text/css">
ul{color: #0000FF;}
h2{background-color: #EEEEEE;}
</style>
</head>
<body>
<h2 align="left">科研发展</h2>
<p>高校咨询 科技前沿 成果展示 学术会议</p>
<ul>
<li>国防科技大学员问鼎2014国际数模竞赛最高奖</li>
<li>同济大学教授阮仪三获2014亨利•霍普•里德奖</li>
<li>中科大徐春叶教授获2014年国际材料科学奖</li>
<li>北京和睦家医院肺癌诊疗会诊中心成立</li>
<li>兰州大学博士生获全国优秀博士学位论文提名</li>
</ul>
</body>
</html>
效果图:
项目三:设计制度宣传展板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: url(img/prj_image2_2.jpg);
}
h2 {
color: white;
background-color:rgb(153,153,255);
}
ol {
font-weight: 505;
}
</style>
</head>
<body>
<h2 align="center">大型分析仪器管理办法</h2>
<ol>
<li>大型仪器必须有专人保管,须配有稳压电源,使用前须先检查仪器间各电路连接情况,再开稳压电源,然后再启动仪器开关。</li>
<li>必须严格执行仪器设备运行记录制度,记录仪器运行状况、开关机时间。凡不及时记录者,一经发现,停止使用资格一周。</li>
<li>使用仪器必须熟悉本仪器的性能和操作方法,本科生作毕业论文使用时应有教师在场,熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。</li>
<li>仪器使用完毕,必须将各使用器件擦洗干净归还原处,盖上防尘罩,关闭电源,打扫完室内清洁,方可离开。</li>
<li>下次使用者,在开机前,首先检查仪器清洁卫生、仪器是否有损坏,接通电源后,检查是否运转正常。发现问题及时报告管理员,并找上一次使用者问明情况,知情不报者追查当次使用者责任。</li>
<li>若在操作使用期间出现故障,应及时关闭电源,并向有关管理人员报告,严禁擅自处理、拆卸、调整仪器主要部件,凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源,各种按钮回到原位,并做好清洁工作、锁好门窗。
</li>
<li>所有仪器设备的操作手册及技术资料原件一律建档保存,随仪器使用的只能是复印件。</li>
<li>保持仪器清洁,仪器的放置要远离强酸、强碱等腐蚀性物品,远离水源、火源、气源等不安全源。</li>
<li>各仪器要根据其保养、维护要求,进行及时或定期的干燥处理、充电、维护、校验等,确保仪器正常运转。每学期进行一次仪器使用检查,发现有损坏应及时请有关部门维修。</li>
<li>仪器不能随意搬动,更不能借给外单位使用;校内人员经实验室主任批准后可在实验室按上述规定使用。</li>
</ol>
<h4 align="right">大型仪器管理办公室</h4>
</body>
</html>
效果图:
项目四:制作饭店菜单价目表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h3 {
color: red;
}
ul {
list-style-type: none;
font-family: 隶书;
}
body {
text-align: center;
background-image: url(img/prj_image_2_4_153.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
</head>
<body>
<h3 align="center">绿晶饭店菜单价目表</h3>
心满意粥
<ul>
<li>菜心粒肉片粥.......6元</li>
<li>皮蛋瘦肉粥.........5元</li>
<li>香茜鱼片粥.........8元</li>
<li>生菜丝骨腩粥.......6元</li>
<li>枣丝杞子猪肝粥.....6元</li>
<li>状元及第粥.........8元</li>
<li>生菜肚丝粥.........8元</li>
<li>明火白粥...........2元</li>
</ul>
饮料
<ul>
<li>矿泉水...........2元/瓶</li>
<li>旺仔牛奶.........5元/瓶</li>
<li>高山青草奶......10元/瓶</li>
<li>王老吉...........5元/罐</li>
<li>雪碧.............4元/瓶</li>
<li>可口可乐.........4元/罐</li>
<li>和其正凉茶.......4元/罐</li>
<li>康师傅红/绿茶....4元/瓶</li>
</ul>
红酒
<ul>
<li>特饮干红.........................98元/瓶</li>
<li>法国查尔斯干红..................128元/瓶</li>
<li>注册解百纳干红..................168元/瓶</li>
<li>张裕圆桶干红(特选级)黑色......168元/瓶</li>
<li>张裕圆桶解百纳(特选级)红色...258元/瓶</li>
<li>张裕卡斯特(特选级)黑色.........398元/瓶</li>
</ul>
</body>
</html>
效果图:
欢迎指正! 欢迎欢迎!