网页设计基础案例与上机手册.doc

《网页设计基础案例与上机手册.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Web应用开发工程师案例资源库Web系统与技术第二部分《网页设计基础》案例手册清华大学计算机与信息管理中心85清华大学计算机与信息管理中心Web应用开发工程师案例资源库一、HTML部分案例：案例编号：HTML-01案例名称：认识HTML的基本标签和属性1、案例目标及知识点通过制作简单的HTML页面，对HTML的标签和属性有个宏观的认识，激发学生对HTML语言的兴趣。运用了body的属性：text、background、alink、leftmargin、topmargin熟悉这些属性的用途和设置方法。2、案例功能说明做出符合以下要求的网页：(1)将网

2、页标题设置为：欢迎来到我的个人网页；(2)将网页背景设置为指定图片：(3)将网页的文本颜色设置为：#660033(4)将网页的左边距设置为：10px,上边距设置为：400px;(5)将网页以文件名为：例1-2.html保存。实验结果参照页面美化效果，如下图：85清华大学计算机与信息管理中心Web应用开发工程师案例资源库图1-13、案例操作步骤(1)在HTML的编辑页面输入源码。(2)将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例1-2.html在d盘根目录下；(3)将背景图片tp.jpg放到相对路径为imag

3、es的文件夹下，如果图片比页面小，图片会自动重复；(4)用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、案例参考源码源码1.1

4、？（2）背景如果不用图片，用一种颜色，应怎样修改源码？案例编号：HTML-02案例名称：文字的排版1、案例目标及知识点综合练习HTML网页的设计。注意代码中对
、

、

、
等标签的运用，熟悉并掌握文字排版所涉及的所有标签。2、案例功能说明做出符合要求的静态HTML网页，实验结果参照如下图：85清华大学计算机与信息管理中心Web应用开发工程师案例资源库图1-23、案例操作步骤(1)在HTML的编辑页面输入代码。(2)将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例
5、如：保存为例2-1.html在d盘根目录下；(3)用网页浏览器打开此HTML页面，即可以看到此页的页面效果。1、案例参考源码源码1.2要
在一段
里
换行
请使用
br这个Tag。
这是85清华大学计算机与信息管理中心Web应用开发工程师案例资源库预设(preformatted)文本.在pre这个tag里的
6、文本保留空格和分行。用hr这个Tag可以在HTML文件里加一条横线。
用hr这个Tag可以在HTML文件里加一条横线。
代码注释是不会显示在网页里的。
北京 <<网页设计基础>> 路1000号
& 老师 ©<
7、br>邮编:100000
5、案例思考与扩展（1）页面的背景设置成图片应该如何做？（2）字体的大小、颜色等属性如何更改？案例编号：HTML-03案例名称：文字的美化1、案例目标及知识点利用文字美化所讲到的标签，综合练习HTML网页的设计。熟悉并掌握文字美化所涉及的标签。如：、、、、、等。2、案例功能说明按照以下要求完成HTML页面效果的制作。(1)将网页标题设置为：“字体设置”。(2)将文字“标题一”样式设置为：标题一
8、，居中对齐。(3)将文字“具体内容一”设置为：隶书，18px，颜色为红色。(4)将文字“具体内容二”设置为：16px，粗体