以下为本人大一选修课《网页设计与网站开发》的实验作业题，均为本人原创，分享给大家。如有不足之处欢迎指出。
目录
注：
- 图片文件建议保存到根目录下
- 网页运行效果以Microsoft Edge为准，其他浏览器可能显示会出问题。
实验1
1.题目
为了使网页中的文本呈现出丰富的样式，就需要设置文本的字体、字号大小、字体颜色等，这时就用到了<font>标记。本案例通过给<font>标记添加属性，来实现丰富的文本样式，存储文件名为：ex2-1。
1)、效果如图所示。
<font>标记的应用效果
2)、具体实现步骤如下：
- 在页面主体<body>中添加一段文本。
- 使用<font>标记包围需要特殊显示的文本。
- 对<font>标记应用属性。
2.代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
实验一-<font>标记的应用</title>
</head>
<body>
<font face="黑体" color="#FF0000" size="+5">传智播客</font>
java就业班.net就业班 网页平面就业班php就业班
</body>
</html>
3.网页运行效果
实验2
1.题目
网页标题的设置。
1)、效果如图所示，存储文件名为：ex2-2。
标题标记的应用效果
2)、具体实现步骤如下所示：
- 首先在Dreamweaver中添加一段无格
- 式文本作为参照文本。
- 添加水平线，并为水平线设置颜色、宽高、左对齐属性。
- 依次添加标题标记<h1>、<h2>、<h3>、<h4>样式文本。
2.代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验二-h标记的应用</title>
</head>
<body>
我是普通的文本
<hr color="#669900" size="4">
<h1>我是h1标记的文本</h1>
<h2>我是h2标记的文本</h2>
<h3>我是h3标记的文本</h3>
<h4>我是h4标记的文本</h4>
</body>
</html>
3.网页运行效果
实验3
1.题目
在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记。本案例通过使用文本格式化标记输出特殊格式的文本，存储文件名为：ex2-3。
1)、效果如图所示。
2)、具体实现步骤如下：
- 在Dreamweaver默认文档中写好6个段落。
- 在每个段落中分别使用不同的文本格式化标记：
第一个段落即题目设置为粗体；
第二个段落即作者设置为斜体；
第四个段落添加下划线效果；
第六个段落添加删除线效果。
- 其他段落使用普通的文本格式输出。
2.代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验三-城东早春</title>
</head>
<body>
<center><b>城东早春</b></center>
<p align="right"><i>作者：杨巨源</i></p>
<p style="color:#69C;">诗家清景在新春，</p>
<p><u>绿柳才黄半未匀。</u></p>
<p style="color:#69C;">若待上林花似锦，</p>
<p><del>出门俱是看花人。</del></p>
</body>
</html>
3.网页运行效果
实验4
1.题目
1)、纯文本看着会很枯燥，而图片的加入能够刺激读者的感官，引发阅读兴趣。这就体现了图像与文本配合的重要性。本案例通过文本和图像样式制作一个电影宣传的展示效果，网页另存为：ex2-4。
2)、具体实现步骤如下所示：
- 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的上半部分。
- 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的下半部分。
- 分别给两部分文本和图像添加样式。
- 在浏览器中预览。
2.代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验四-制作电影宣传效果</title>
</head>
<body>
<h2 align="center">西游降魔篇</h2>
<hr width="75%" color="#66CCCC" size="2" align="left" >
<img src="images/西游降魔篇.jpg" align = right width="170" height="100">
<pre>
2013年2月10日
导演：周星驰
主演：黄渤 文章 舒淇 周秀娜 释行宇 罗志祥 何文辉 李尚正
片长：110分钟
类型：冒险 奇幻 喜剧
定价：<del>5$</del> 4$
</pre>
<h2 align="center">101次求婚</h2>
<hr>
<img src="images/qh.jpg" width="111" height="156" align="right">
<pre>
导演：陈正道
主演：黄渤/秦海璐/林志玲/高以翔
片长：104分钟
类型：爱情 剧情
定价：<del>5$</del> 4$
<u>上映日期：02月12日</u>
</pre>
</body>
</html>
3.网页运行效果
实验5
1.题目
特殊字符的使用。网页另存为：ex2-5。
2.代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验五-特殊字符的使用</title>
</head>
<body>
<pre>
我是特殊字符空 格
我是特殊字符小于号<
我是特殊字符大于号>
我是版权符号©
我是注册商标®
</pre>
</body>
</html>
3.网页运行效果
实验6
1.题目
综合训练，网页另存为ex2-6。
2.代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验六-文字网页</title>
</head>
<body>
<h2 align="center">唐诗欣赏</h2>
<hr color="#99CC00">
<p align="center"> <b><font size="3" >静夜思</font></b></p>
<p align="center"> <font size="2">李白</font></p>
<p align="center"> <b>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</b></p>
<p> </p>
<hr color="#99CC00">
<p><font class="text"><b>【简析】</b><br>
<p style="text-indent:2em">
这是写远客思乡之情的诗，诗以明白如话的语言雕琢出明镜醉人的秋夜的意境。它不追求想象的新颖奇特，也摒弃了辞藻的精工华美;
<br>它以清新朴素的笔触，抒写了丰富深曲的内容。境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻绎。无怪乎有人赞它是“妙绝古今"。
</p>
<hr width="400" size="3" color="#6699CC" align="left">
版权©:版权所有，违者必究
<address>E-mail:limingwei@gmail.com</address>
</body>
</html>
3.网页运行效果
《网页设计与网站开发》实验题不定期更新，有需要可以点击右下角《专栏目录》，
也可以点击链接：HTML_秃头小二的博客-CSDN博客
如有帮助可以帮忙点个赞嘛……谢谢啦！
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
