文档介绍：Web系统与技术
第二部分《网页设计基础》
案例手册
清华大学计算机与信息管理中心
一、HTML部分案例:
案例编号:HTML-01
案例名称:认识HTML的基本标签和属性
案例目标及知识点
通过制作简单的HTML页面,对HTML的标签和属性有个宏观的认识,激发学生对HTML语言的兴趣。
运用了body的属性:text、background、alink 、 leftmargin、 topmargin
熟悉这些属性的用途和设置方法。
案例功能说明
做出符合以下要求的网页:
将网页标题设置为:欢迎来到我的个人网页;
将网页背景设置为指定图片:
将网页的文本颜色设置为:#660033
将网页的左边距设置为:10px ,上边距设置为:400px ;
将网页以文件名为:例1-。
实验结果参照页面美化效果,如下图:
图1-1
3、案例操作步骤
在HTML的编辑页面输入源码。
,保存到相应文件夹下,例如:保存为例1-;
,如果图片比页面小,图片会自动重复;
用网页浏览器打开此HTML页面,即可以看到此页的页面效果。
4、案例参考源码
<html>
<head>
<title>欢迎来到我的个人网页</title>
</head>
<body text = #660033 background = images\ alink = blue leftmargin = 10 topmargin = 400>
<center>我的第一个HTML页面</center>
</body>
</html>
5、案例思考与扩展
(1)页面的汉字“我的第一个HTML页面”在网页中居左或居右怎么设置?
(2)背景如果不用图片,用一种颜色,应怎样修改源码?
案例编号:HTML-02
案例名称:文字的排版
案例目标及知识点
综合练****HTML网页的设计。注意代码中对<br>、<p>、<center>、<hr>、<pre>、<address>等标签的运用,熟悉并掌握文字排版所涉及的所有标签。
2、案例功能说明
做出符合要求的静态HTML网页,实验结果参照如下图:
图1-2
3、案例操作步骤
在HTML的编辑页面输入代码。
,保存到相应文件夹下,例如:保存为例2-;
用网页浏览器打开此HTML页面,即可以看到此页的页面效果。
案例参考源码
<html>
<head>
<title>欢迎来到我的个人网页</title>
</head>
<body text = #660066 bgcolor = #FFFF66>
<p align = center>
要<br>在一段<br>里<br>换行<br>请使用<br>br这个Tag。
</p>
<center>
<pre>
这是
预设(preformatted)文本.
在pre这个tag里的文本保留
空格和
分行。
</pre>
</center>
<p align = center>用hr这个Tag可以在HTML文件里加一条横线。</p>
<hr width = "60%" size = "3" align = center noshade>
<p align = center>用hr这个Tag可以在HTML文件里加一条横线。</p>
<!--这是代码注释-->
<center><p>代码注释是不会显示在网页里的。</p>
<address>
北京&nbsp;&lt;&lt;网页设计基础&gt;&gt;&nbsp;路1000号<br>
&amp;&nbsp;老师&nbsp;&copy;<br>
邮编:100000<br>
</address>
</center>
</body>
</html>
5、案例思考与扩展
(1)页面的背景设置成图片应该如何做?
(2)字体的大小、颜色等属性如何更改?
案例编号:HTML-03
案例名称:文字的美化
案例目标及知识点
利用文字美化所讲到的标签,综合练****HTML网页的设计。
熟悉并掌握文字美化所涉及的标签。如:<hn>、<font>、<del>、<ins>、<sub>、<sup>等。
案例功能说明
按照以下要求完成HTML页面效果的制作。
将网页标题设置为:“字体设置”。
将文字“标题一”样式设置为:标题一,居中对齐。
将文字“具体内容一