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

Web应用开发工程师案例资源库清华大学计算机与信息管理中心1Web系统与技术第二部分《网页设计基础》案例手册清华大学计算机与信息管理中心Web应用开发工程师案例资源库清华大学计算机与信息管理中心2一、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保存。实验结果参照页面美化效果，如下图：Web应用开发工程师案例资源库清华大学计算机与信息管理中心3图1-13、案例操作步骤(1)在HTML的编辑页面输入源码。(2)将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例1-2.html在d盘根目录下；(3)将背景图片tp.jpg放到相对路径为images的文件夹下，如果图片比页面小，图片会自动重复；(4)用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、案例参考源码源码1.1htmlheadtitle欢迎来到我的个人网页/title/headbodytext=#660033background=images\tp.jpgalink=blueleftmargin=10topmargin=400center我的第一个HTML页面/center/body/html5、案例思考与扩展（1）页面的汉字“我的第一个HTML页面”在网页中居左或居右怎么设置？（2）背景如果不用图片，用一种颜色，应怎样修改源码？案例编号：HTML-02案例名称：文字的排版1、案例目标及知识点综合练习HTML网页的设计。注意代码中对br、p、center、hr、pre、address等标签的运用，熟悉并掌握文字排版所涉及的所有标签。2、案例功能说明做出符合要求的静态HTML网页，实验结果参照如下图：Web应用开发工程师案例资源库清华大学计算机与信息管理中心4图1-23、案例操作步骤(1)在HTML的编辑页面输入代码。(2)将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-1.html在d盘根目录下；(3)用网页浏览器打开此HTML页面，即可以看到此页的页面效果。3、案例参考源码源码1.2htmlheadtitle欢迎来到我的个人网页/title/headbodytext=#660066bgcolor=#FFFF66palign=center要br在一段br里br换行br请使用brbr这个Tag。/pcenterpre这是Web应用开发工程师案例资源库清华大学计算机与信息管理中心5预设(preformatted)文本.在pre这个tag里的文本保留空格和分行。/pre/centerpalign=center用hr这个Tag可以在HTML文件里加一条横线。/phrwidth=60%size=3align=centernoshadepalign=center用hr这个Tag可以在HTML文件里加一条横线。/p!--这是代码注释--centerp代码注释是不会显示在网页里的。/paddress北京 <<网页设计基础>> 路1000号br& 老师 ©br邮编:100000br/address/center/body/html5、案例思考与扩展（1）页面的背景设置成图片应该如何做？（2）字体的大小、颜色等属性如何更改？案例编号：HTML-03案例名称：文字的美化1、案例目标及知识点利用文字美化所讲到的标签，综合练习HTML网页的设计。熟悉并掌握文字美化所涉及的标签。如：hn、font、del、ins、sub、sup等。2、案例功能说明按照以下要求完成HTML页面效果的制作。(1)将网页标题设置为：“字体设置”。(2)将文字“标题一”样式设置为：标题一，居中对齐。(3)将文字“具体内容一”设置为：隶书，18px，颜色为红色。(4)将文字“具体内容二”设置为：16px，粗体，斜体。(5)利用字体美化的标签实现删除、下划线、上标、下标等功能。Web应用开发工程师案例资源库清华大学计算机与信息管理中心6实验结果参照如下图：图1-33、案例操作步骤(1)在HTML的编辑页面输入代码，注意此段代码中对hn、font、del、ins、sub、sup等标签的运用。(2)将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-2.html在d盘根目录下；(3)用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、案例参考源码源码1.3htmlheadtitle字体设置/title/headbodytext=#660066bgcolor=#FFFF66h1align=center标题一/h1pfontface=隶书size=18color=#FF0000具体内容一/font//ppfontsize=16bi具体内容二/i/b/font//pWeb应用开发工程师案例资源库清华大学计算机与信息管理中心7pdel芙蓉姐姐/del这个词当中划线表示删除。/ppins想唱就唱/ins这个词下划线插入。/ppXsub2/sub其中的2是下标/ppXsup2/sup其中的2是上标/ppblockquote好好学习，天天向上。这句话缩进表示引用/blockquote/pcodecallgetOrders/codep用code显示计算机代码，code里显示的字符是等宽字符。/p/body/html/html5、案例思考与扩展（1）页面的背景设置成图片应该如何做？（2）还有哪些标签可以实现文字美化的功能，总结并综合运用它们在网页设计中。案例编号：HTML-04案例名称：HTML列表(list)实例41、案例目标及知识点分别实现嵌套的列表和用多种类型排序的列表。利用文字美化的有关列表的标签，例如：ul、li、ol等标签。练习HTML网页的设计。熟悉并掌握文字美化列表所涉及的标签。2、案例功能说明做出符合要求的静态HTML网页，实验结果参照如下图：Web应用开发工程师案例资源库清华大学计算机与信息管理中心8图1-43、案例操作步骤(1)在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-3.html在d盘根目录下；(2)用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、案例参考源码源码1.4htmlheadtitle字体设置/titleWeb应用开发工程师案例资源库清华大学计算机与信息管理中心9/headbodytext=#660066bgcolor=#FFFF66h4嵌套2层的列表：/h4ulli动物ulli两栖动物/lili哺乳动物ulli人/lili猩猩/li/ul/lili鱼类/li/ul/lili植物/li/ulh4排序列表，不设Type属性：/h4olli网页课程/lili网页代码/lili魔兽世界/li/olh4排序列表，Type属性设为A：/h4oltype=Ali网页课程/lili网页代码/lili魔兽世界/li/olh4排序列表，Type属性设为a：/h4oltype=ali网页课程/lili网页代码/lili魔兽世界/li/olh4排序列表，Type属性设为I：/h4oltype=Ili网页课程/lili网页代码/lili魔兽世界/liWeb应用开发工程师案例资源库清华大学计算机与信息管理中心10/olh4排序列表，Type属性设为i：/h4oltype=ili网页课程/lili网页代码/lili魔兽世界/li/ol/body/html5、案例思考与扩展（1）思考列表的标签在什么时候需要用到？如果改成抽屉下拉的话需要用到什么标签？要怎么做？案例编号：HTML-05案例名称：插入图像51、案例目标及知识点综合练习HTML网页的设计。熟悉并掌握插入图片所涉及的标签，例如：src、alt、border、align等。2、案例功能说明按照以下要求完成HTML页面效果的制作。（1）将网页标题设置为：“CAI是什么？”。（2）将网页标题格式设置为：下划线。（3）将网页第一段文字格式设置为：斜体，颜色为红色。（4）将网页中的图片设置为：左对齐。（5）将网页最后一段不要排在图片右边，排在图片的下面。实验结果参照如下图：Web应用开发工程师案例资源库清华大学计算机与信息管理中心11图1-53、案例操作步骤(1)在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-4.html在d盘根目录下；(2)将此网页所要插入的图片CAI.jpg放到相对路径为images的文件夹下；(3)用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、案例参考源码源码1.5htmlheadtitle插入图像/title/headbodytext=#660066bgcolor=#FFFF66h1align=centerinsCAI是什么？/ins/h1imgsrc=images\CAI.jpgalt=CAI原理图border=1align=leftpfontcolor=#FF0000iCAI是＂计算机辅助教学＂(ComputerAssistedInstructing)的英文名称首字母缩写/i/font//pp其含义就是把自己的教学想法，包括教学目的，内容，实现教学活动的策略，教学的顺序，控制方法等，用计算机程序进行描述，并存入计算机，经过调试成为可以运行的程序．由于计算机有着存储信息，处理信息，工作自动化等功能．/pbrclear=leftp因此，CAI课件可以将大容量的信息非顺序地呈现，可以选择学习内容和掌握学习进度，实现因人施教的原则和及时反馈信息原则等特点集于一身，并因之区别于其他媒体教学．/p/body/htmlWeb应用开发工程师案例资源库清华大学计算机与信息管理中心125、案例思考与扩展（1）页面的背景设置成图片应该如何做？案例编号：HTML-06案例名称：几种超链接的综合应用1、案例目标及知识点综合运用本章所讲到的关于链接的知识，进一步熟悉多种关于链接的概念。能在今后的html页面开发中熟练使用链接。涉及到的标签包括：ahref=”…”/a2、案例功能说明在同一个html页面中，做多个链接，分别符合以下要求：（1）用相对路径和绝对路径两种方法建立超链接网页