网页设计第3讲 HTML2.ppt

HTML基础知识2 回顾上次课的内容 什么是HTML？ HTML文件的基本结构 换行标记br、 段落标记P …/P 保留格式标记pre…/pre 标题标记Pn…/Pn 字体格式设置标记font…/font 本次课的内容：继续学习HTML常用标记的使用。 7、文本缩进标记 文本缩进标记使文本缩进显示 blockquote …… /blockquote 8、列表标记 HTML的列表分为无序号列表和序号列表。 （1）无序号列表UL…/UL UL LI列表1 LI列表2 …… /UL 设置列表符号属性：type=disc/ circle/ square （2）序号列表OL…/OL OL LI列表1 LI列表2 …… /OL 编号属性：type=A/a/I/i/1 9、水平线标记hr 水平线标记hr可以在屏幕上显示一条水平线，以分割页面的不同部分。 size属性：指定水平线的粗细。 width属性：指定水平线的长度。可以是相对于窗口的百分比，或像素值。 align属性：对齐方式，有三种值：center、left、right。 noshade属性：无阴影。 Color属性：水平线颜色 课堂实践 用HTML编写如下图效果的网页。 三：插入图像标记 格式：IMG src=图形文件地址 属性height和width分别表示图形的高度和宽度。通过这两个属性可以改变图形的大小，如果没有设置，按原图形大小显示。例： IMG SRC=c:/flowers.jpg width=150 图像链接：例： A href=index.htmIMG SRC=c:/flowers.jpg width=150/A 四：超链接标记 链接可以使用户从一个页面跳转到另一个页面，或同一页面的不同位置。 格式：A href=资源地址链接文字/A 属性href指定了该链接的目标地址。 例： A href=我要上网易/A a href=D:/abc/bb.doc 打开Word文件/a a href=bb.doc 打开Word文件/a a href=mailto:aaa@163.com联系我们/a 课堂实践 用HTML制作如下图效果的网页。网页中的图片文件为“网页制作.gif” 在 文字 “”上添加链接指向网页 在 文字 “xiaolida@263.net”上添加电子邮件链接指向邮箱xiaolida@263.net 在图片上添加链接指向文件“HTML实训3.HTM” 完成后以文件名“HTML实训4.HTM”保存并上传FTP服务器 五：表格标记 TABLE.../TABLE标记 width属性：指定表格的宽度。 height属性：指定表格的高度。 border属性：指定表格边框线的粗细，如省略则表格不加边框。 bgcolor属性：设置表格背景色。 cellspacing属性：指定单元格之间的间距。 cellpadding属性：指定单元格内容与格线之间的间距。 CAPTION.../CAPTION：创建表格的标题 align属性：指定表格标题的位置。值top在表格上方，值bottom在表格下方。 TR.../TR ：定义行 TH.../TH：定义包含表头的单元格 TD.../TD：定义包含数据的单元格 align属性：左右对齐方式。left/center/right valign属性：上下对齐方式。top/middle/bottom/baseline(见备注) bgcolor属性：设置单元格背景色。 实例：创建一个值班表 在TH或TD中加入colspan或rowspan属性，表示要跨越的列数和行数。 例如colspan=2表示这一单元格的宽度为两个列的宽度。 小结 本次课主要介绍了几个HTML标记的使用，要求学生能够记住这些标记的用法，并学会使用这些标记制作网页。 课外拓展实践1 用HTML制作如下表格。完成后以文件名“HTML实训2.HTM”保存并上传FTP服务器“第2次作业”文件夹 课外拓展实践2 用HTML制作如下表格。完成后以文件名“HTML实训3.HTM”保存并上传FTP服务器“第2次作业”文件夹 * 实例：创建一个简单颜色表