## 计算机学院实验报告课程名称 .NET程序设计实验名称实验三 HTML网页设计

最新推荐文章于 2022-10-01 14:19:06 发布

素有暖夏

最新推荐文章于 2022-10-01 14:19:06 发布

阅读量820

点赞数

文章标签： c# 深度学习

本文链接：https://blog.csdn.net/xiariannuan/article/details/109909443

版权

这篇实验报告详细介绍了HTML网页设计的过程，包括使用记事本和Dreamweaver 8创建网页，涉及HTML元素插入、超级链接、图片处理、表格布局以及CSS样式设置。报告强调了掌握HTML基本语法、页面布局和Dreamweaver工具使用的重要性。

摘要由CSDN通过智能技术生成

.NET程序设计实验三 HTML网页设计

一.实验目的：
1.熟练掌握HTML的基本语法。
2.掌握使用记事本进行简单网页编辑的方法。
3.熟练掌握使用Dreamweaver 8插入主要HTML元素并为其设置主要属性的方法和步骤。4.熟练使用简单CSS属性进行样式设置。
5.掌握使用表格进行页面布局的方法与技巧。
二.实验内容：
（一）.掌握使用记事本进行简单网页编辑的方法。
0.实验准备：
（1）在硬盘上为本实验建立文件夹（以下称为“实验文件夹”），用于保存本实验的实验结果；
（2）准备3幅图片，其扩展名分别为.jpg，.gif和.png，.gif图片最好是一个动画，将这3幅图片放到实验文件夹中。
提示：可以使用http://image.google.com或http://image.baidu.com搜索并下载图片，这些图片搜索引擎是可以指定文件类型进行搜索的。
1.构建一个最简合法的HTML文档“我的第一个网页”：
（1）从开始菜单启动记事本；
（2）在记事本中，录入一个最简合法HTML文档；
（3）设置该文档在最终在浏览器中显示的标题为“我的第一个网页”；
（4）在页面添加可见的文本“我的第一个网页”；
（5）若使用记事本，则选择菜单“文件”→“保存”，在“另存为”对话框中，在“保存类型”下拉列表中选择“所有文件”，录入“文件名”myfirstpage.htm，单击“保存”按钮将该页面保存到实验文件夹。
提示：最简合法HTML文档必须包含的元素有html、head、 title、 body。
2.使用简单内联元素进行文字处理：
提示：简单内联元素包括以下HTML标记：b(粗体)、i（斜体）、u（下划线）、img（图片）、a（超级链接）、font（字体设定）。
（1）从开始菜单启动记事本；
（2）在记事本中，录入一个最简合法HTML文档；
（3）设置该文档最终显示标题为“简单文字处理”；
（4）在文档的和之间，插入适当元素使最终网页中显示以下内容：
这是一段文本
这是一段文本
注：以上文字不涉及到文字字体、大小、颜色的设置，且并不居中显示。
（5）紧接着步骤（4）插入的元素插入适当元素，使得最终网页上可以显示字号为5、颜色为红色、字体为“华文彩云”的下列样式文字：
这是一段文本
（6）如果以上的每条文本之间没有换行，则在它们之间分别插入一个换行；
（7）使用步骤1-（5）中的方法保存当前HTML文档为simpleinline.htm。
3.在网页中创建超级链接：
（1）从开始菜单启动记事本；
（2）在记事本中，录入一个最简合法HTML文档；
（3）设置该文档最终显示标题为“HTML中的超级链接”；
（4）插入一个可以到达第2个实验中保存的simpleinline.htm的超级链接；
（5）使用类似1-（5）的方法保存当前HTML文档为link.htm；
4.在网页中插入图片：
（1）从开始菜单启动记事本；
（2）在记事本中，录入一个最简合法HTML文档；
（3）设置该文档最终显示标题为“HTML中的图片”；
（4）插入0-（2）中准备的实验文件夹中的.jpg图片；
（5）在页面中插入实验文件夹中的.gif图片，并设置其替换文本；
（6）在页面中插入实验文件夹中的.png图片，并为其设置宽度为5的边框；
（7）使用类似1-（5）的方法保存当前HTML文档为image.htm。
（二）.使用Dreamweaver 8插入主要HTML元素并设置属性
(1).启动Macromedia Dreamweaver 8.0；
(2).使用“文件”→“新建”菜单调出“新建文档”对话框，在“类别”中选择“基本页”，在“基本页”中选择“HTML”，设置“文档类型”为“无”，单击“创建”按钮创建HTML文档；
(3).使用 “文件”→“保存”菜单将（2）中新建的文档保存在“实验文件夹”中，文件名为dwandelement.htm；
(4).在页面中插入一幅图片，为该图片设置替换文本。（图片自备）；
(5).在页面中插入一个表格，以显示以下成绩单：
VB Access 网页网络
计算机1班张勇 70 70 90 80
李涛 60 80 60 80
王建 60 80 60 90
孙正 70 70 90 90
平均成绩 65 75 75 85
计算机2班刘伟 70 90 80 70
张南 80 60 80 60
李明 80 60 90 60
徐杰 70 90 90 70
平均成绩 75 75 85 65
年级平均 70 75 80 70
计算机系成绩单
(三).编制HTML文档，并使用简单CSS属性格式化文档的输出
(1).启动Macromedia Dreamweaver 8.0；
(2).新建网页simplecss.htm，并保存在“实验文件夹”中；
(3).在simplecss.htm文档中添加元素，并为其添加合适的CSS样式，使网页最终显示以下内容，要求每个换行隔开的文本都包含在一个div元素中；
这是一段文本
这是一段文本
这是一段文本
注：
a.以上第一、二行文字不涉及到文字字体、大小、颜色的设置，且并不居中显示，只需实现第一行文字加粗，第二行文字斜体。
b.第三行显示字号为5、颜色为红色、字体为“华文彩云”的文字。
提示：使用span标记改变文本的样式，font-weight用于设置粗细，font-style用于设置斜体，font-family用于设置字体，font-size用于设置字体大小，color用于设置字体颜色。
(4).将所有文本内容使用CSS样式居中显示；
(5).为每个div元素使用CSS样式设置不同的背景颜色或背景图片（图片自备）。
(6).为第一个和第三个div元素使用CSS样式设置单线和双线边框，颜色和边框粗细自定。
(7).保存页面simplecss.htm。
(四).Dreamweaver 8表格布局复杂网页设计（选作）
(1).启动Macromedia Dreamweaver 8.0；
(2).新建网页tablelayout.htm，并保存在“实验文件夹”中；
(3).选择一个自己感兴趣的主题（如篮球、音乐等），在网页talbelayout.htm中使用表格进行页面布局，尽可能多地使用到前面学习过的HTML元素。
提示：可以模仿其它页面进行设计，但要求只能使用表格进行布局，且避免使用课程中未学过的知识。
三、实验结果
1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>我的第一个网页</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<h1>我的第一个网页</h>
</body>
</html>

在这里插入图片描述


```html

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>简单文字处理</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<p>
	<b>
	<font face="STCAIYUN" color="red"size=5>这是一段文本