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

Web系统与技术 第二部分《网页设计基础》 案例手册 清华大学计算机与信息管理中心 一、HTML部分案例： 案例编号：HTML-01 案例名称：认识HTML的基本标签和属性 案例目标及知识点 通过制作简单的HTML页面，对HTML的标签和属性有个宏观的认识，激发学生对HTML语言的兴趣。 运用了body的属性：text、background、alink 、 leftmargin、 topmargin 熟悉这些属性的用途和设置方法。 案例功能说明 做出符合以下要求的网页： 将网页标题设置为：欢迎来到我的个人网页； 将网页背景设置为指定图片： 将网页的文本颜色设置为：#660033 将网页的左边距设置为：10px ,上边距设置为：400px ; 将网页以文件名为：例1-2.html保存。 实验结果参照页面美化效果，如下图： 图1-1 3、案例操作步骤 在HTML的编辑页面输入源码。 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例1-2.html在d盘根目录下； 将背景图片tp.jpg放到相对路径为images的文件夹下，如果图片比页面小，图片会自动重复； 用网页浏览器打开此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 案例名称：文字的排版 案例目标及知识点 综合练习HTML网页的设计。注意代码中对br、p、center、hr、pre、address等标签的运用，熟悉并掌握文字排版所涉及的所有标签。 2、案例功能说明 做出符合要求的静态HTML网页，实验结果参照如下图： 图1-2 3、案例操作步骤 在HTML的编辑页面输入代码。 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-1.html在d盘根目录下； 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。 案例参考源码 源码1.2 html head title欢迎来到我的个人网页/title /head body text = #660066 bgcolor = #FFFF66 p align = center 要br在一段br里br换行br请使用brbr这个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 !--这是代码注释-- centerp代码注释是不会显示在网页里的。/p address 北京nbsp;lt;lt;网页设计基础gt;gt;nbsp;路1000号br amp;nbsp;老师nbsp;copy;br 邮编:100000br /address /center /body /html 5、案例思考与扩展 （1）页面的背景设置成图片应该如何做？ （2）字体的大小、颜色等属性如何更改？ 案例编号：HTML-03 案例名称：文字的美化 案例目标及知识点 利用文字美化所讲到的标签，综合练习HTML网页的设计。 熟悉并掌握文字美化所涉及的标签。如：hn、font、del、ins、sub、sup等。 案例功能说明 按照以下要求完成HTML页面效果的制作。 将网页标题设置为：“字体设置”。 将文字“标题一”样式设置为：标题一，居中对齐。 将文字“具体内容一”设置为：隶书，18px，颜色为红色。 将文字“具体内容二”设置为：16px，粗体，斜体。 利用字体美化的标签实现删除、下划线、上标、下标等功能。 实验结果参照如下图： 图1-3 3、案例操作步骤 在HTML的编辑页面输入代码，注意此段代码中对hn、font、del、ins、sub、sup等标签的运用。 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-2.