网页制作实验指导书
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验一、创建一个HTML文件
实验目的：
1．掌握使用记事本进行HTML文件编写的过程。
2．掌握HTML基本标记的使用。
3．掌握文档格式化常用标记的使用。
4．掌握在网页中加入图像的功能实现。
实验内容：
1. 开始菜单启动记事本；
2. 记事本中，录入一个最简合法HTML文档；
3. 该文档最终显示标题为“简单文字处理”；（提示：最简合法HTML文档必须包含的元素有html、head、 title、 body。）
4. 在文档的
和之间，插入适当元素使最终网页中显示以下内容：这是一段文本
这是一段文本
© Microsoft® Windows 2007
A = a1 + a2 + a3
这是一段文本
这是一段文本
注：以上文字不涉及到文字字体、大小、颜色的设置，且并不居中显示。
提示：对于特殊字符，要使用字符实体。
5. 紧接着步骤4插入的元素插入适当元素，使得最终网页上可以显示字号为5、颜色为红色、字体为“华文彩云”的下列样式文字：
这是一段文本
6. 紧接着步骤5插入的元素插入适当元素，使得最终网页上显示下列样式的文字（隶书、4号、绿色）：
这是一段文本
7. 如果以上的每条文本之间没有换行，则在它们之间分别插入一个换行；
使用步骤1-7中的方法保存当前HTML文档为simpleinline.htm。
8. 新建一个网页，网页名字存为anchor.html在网页中创建超级链接，设置该文档最终显示标题为“HTML中的超级链接”；
9. 插入一个可以到达保存的simpleinline.htm的超级链接，单击链接在自身窗口中打开该文件；
10. 在网页中插入一个电子邮件链接。
11. 在网页中添加HTML列表：
（1）从开始菜单启动记事本；
（2）在记事本中，录入一个最简合法HTML文档；
（3）设置该文档最终显示标题为“HTML列表”；
（4）在文档的
和之间，插入适当元素使最终网页中显示以下内容：12. 保存当前HTML 文档为htmllist.htm 。
13. 编写网页（image.html ）,并在其中创建一个图片链接，必须满足如下要求：
a) 图片文件名为trees.jpg ，和代码文件处于同一目录中； b) 链接到的文件为同目录下的expl.html 文件；
c) expl.html 文件中有公式a y y x <++212
d) 图片加宽度为2像素的边框；
e ）图片宽度固定为300像素，高度固定为200像素；
实验条件：
一台pc 机，记事本软件
实验课时
4课时
实验要求
1. 按照要求编写网页。
1. 网页设计基础概述
2. HTML 4.01
3. CSS
4. Javascript
⏹ J.C.R Licklider ⏹ Larry Roberts ⏹ Tim Berners-Lee
实验二、HTML中使用表格
实验目的：
1.掌握基本表格标记的使用；
2.掌握表格格式的设置；
3.掌握高级表格标记的使用；
实验内容：
1.编写网页（2-1.html）,高级表格应使用到标题、行编组、列编组：
a)按照以下属性设置创建如下图所示的表格：
i.表格边框宽为5像素；
ii.表格的背景颜色值为#999933；
iii.第一行的背景颜色与其他行不同，其值为#0066FF；
iv.单元格内容的对齐方式按图中所示来设置；
b)为表格添加一个标题“班级列表”，并把它置于表格底部；
c)设置表格的宽度为width=80%，并把该表格置于浏览器窗口的中间。然后为整
个表格、表格的第二行和第二行的第一个单元格分别设置不同的颜色；
d)为表格的第二行的第一个单元格加入一张图片；
e)把单元格的对齐方式设置为right；
f)加入语句cellspacing=5和cellpadding=10，修改表格边框为0，并加入高级
表格标签使上面的表格变成如下图所示。
2.使用表格编写网页(2-2.html)，效果如下图：
实验条件：
一台pc机，记事本软件
实验课时
4课时
实验要求
1.按照要求编写网页；
2.按照指定的格式完成实验报告（在课件中下载《计算机类课程实验报告模板》，完
成后上传至相应位置）。
实验三、HTML中框架布局
实验目的：
1.熟悉框架的概念。
2.掌握HTML中设计框架的方法以及所使用的标记。
3.掌握框架的格式化。
实验内容：
1．编写网页（3-1.html）：
a)创造一个带有两个水平框架的主页面。第一个框架的高度是100像素值，第二
个框架进一步地分成两个垂直的框架。第一个垂直的框架宽150像素。顶部框
架为横幅框架，左边的框架为导航框架，右边的框架为内容框架。
导航链接为某书的各章标题，包含不同的链接。这些链接的目标框架为内容框
架。内容框架的初始内容为第6章开始的内容页面，其他页面可以自由指定。
以上框架需包含如下特征：
i.横幅框架没有滚动条；
ii.整个页面没有框架边界；
iii.为没有框架功能的浏览器使用可选文本。
b)加入5像素的灰色框架边界；
c)同样在第6章页面中使用marginwidth=20和marginheight=5。拖动框架边界
来观察效果。然后使用noresize属性来防止改变框架大小；
d)在内容框加中使用内嵌框架，输出结果应如下图所示。