没有合适的资源?快使用搜索试试~ 我知道了~
网页设计基础案例与上机手册
需积分: 15 11 下载量 171 浏览量
2010-05-10
12:36:48
上传
评论
收藏 2.53MB DOC 举报
温馨提示
试读
64页
网页设计基础案例与上机手册 html 静态网页 案例带截图
资源推荐
资源详情
资源评论
Web 应用开发工程师 案例资源库
Web 系统与技术
第二部分《网页设计基础》
案例手册
清华大学计算机与信息管理中心
清华大学计算机与信息管理中心
1
Web 应用开发工程师 案例资源库
一、HTML 部分案例:
案例编号:HTML-01
案例名称:认识 HTML 的基本标签和属性
1、 案例目标及知识点
通过制作简单的 HTML 页面,对 HTML 的标签和属性有个宏观的认识,激发学生
对 HTML 语言的兴趣。
运用了 body 的属性:text、background、alink 、 leftmargin、 topmargin
熟悉这些属性的用途和设置方法。
2、 案例功能说明
做出符合以下要求的网页:
(1) 将网页标题设置为:欢迎来到我的个人网页;
(2) 将网页背景设置为指定图片:
(3) 将网页的文本颜色设置为:#660033
(4) 将网页的左边距设置为:10px ,上边距设置为:400px ;
(5) 将网页以文件名为:例 1-2.html 保存。
实验结果参照页面美化效果,如下图:
图 1-1
清华大学计算机与信息管理中心
2
Web 应用开发工程师 案例资源库
3、案例操作步骤
(1) 在 HTML 的编辑页面输入源码。
(2) 将此 HTML 代码以.html 或者.htm 作为扩展名,保存到相应文件夹下,例如:
保存为例 1-2.html 在 d 盘根目录下;
(3) 将背景图片 tp.jpg 放到相对路径为 images 的文件夹下,如果图片比页面小,图
片会自动重复;
(4) 用网页浏览器打开此 HTML 页面,即可以看到此页的页面效果。
4、案例参考源码
源码 1.1
<html>
<head>
<title>欢迎来到我的个人网页</title>
</head>
<body text = #660033 background = images\tp.jpg alink = blue
leftmargin = 10 topmargin = 400>
<center>我的第一个 HTML 页面</center>
</body>
</html>
5、案例思考与扩展
(1)页面的汉字“我的第一个 HTML 页面”在网页中居左或居右怎么设置?
(2)背景如果不用图片,用一种颜色,应怎样修改源码?
案例编号:HTML-02
案例名称:文字的排版
1、 案例目标及知识点
综 合 练 习 HTML 网 页 的 设 计 。 注 意 代 码 中 对
<br>、<p>、<center>、<hr>、<pre>、<address>等标签的运用,熟悉并掌握文字排版所涉
及的所有标签。
2、案例功能说明
做出符合要求的静态 HTML 网页,实验结果参照如下图:
清华大学计算机与信息管理中心
3
Web 应用开发工程师 案例资源库
图 1-2
3、案例操作步骤
(1) 在 HTML 的编辑页面输入代码。
(2) 将此 HTML 代码以.html 或者.htm 作为扩展名,保存到相应文件夹下,例如:
保存为例 2-1.html 在 d 盘根目录下;
(3) 用网页浏览器打开此 HTML 页面,即可以看到此页的页面效果。
3、案例参考源码
源码 1.2
<html>
<head>
<title>欢迎来到我的个人网页</title>
</head>
<body text = #660066 bgcolor = #FFFF66>
<p align = center>
要<br>在一段<br>里<br>换行<br>请使用<br>br 这个 Tag。
</p>
<center>
<pre>
这是
清华大学计算机与信息管理中心
4
Web 应用开发工程师 案例资源库
预设(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>
北京 <<网页设计基础>> 路 1000 号<br>
& 老师 ©<br>
邮编:100000<br>
</address>
</center>
</body>
</html>
5、案例思考与扩展
(1)页面的背景设置成图片应该如何做?
(2)字体的大小、颜色等属性如何更改?
案例编号:HTML-03
案例名称:文字的美化
1、 案例目标及知识点
利用文字美化所讲到的标签,综合练习 HTML 网页的设计。
熟 悉 并 掌 握 文 字 美 化 所 涉 及 的 标 签 。 如 :
<hn>、<font>、<del>、<ins>、<sub>、<sup>等。
2、 案例功能说明
按照以下要求完成 HTML 页面效果的制作。
(1) 将网页标题设置为:“字体设置”。
(2) 将文字“标题一”样式设置为:标题一,居中对齐。
(3) 将文字“具体内容一”设置为:隶书,18px,颜色为红色。
(4) 将文字“具体内容二”设置为:16px,粗体,斜体。
(5) 利用字体美化的标签实现删除、下划线、上标、下标等功能。
清华大学计算机与信息管理中心
5
剩余63页未读,继续阅读
资源评论
XUZIKUN
- 粉丝: 0
- 资源: 16
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功