湖北职院计科系
Download
1 / 25

湖北职院计科系 - PowerPoint PPT Presentation


  • 66 Views
  • Uploaded on

湖北职院计科系. 教学内容 1 、演示并讲解用表格布局制作的网页 2 、用表格制作网页. 教学目的 1 、掌握表格的插入 2 、掌握单元格的相关操作 3 、用表格布局制作一个网页 4 、表格嵌套与叠加. 教学重点 1 、表格的插入 2 、单元格的相关操作. 教学难点 1 、表格的插入 2 、单元格的相关操作 3 、用表格布局制作一个网页. 引言: 在网页设计中适当的使用表格将不同性质和部分加以区分,不但能使整个网页看起来整齐而且可读性增高。下面我们介绍表格的各种属性设定、如何在表格加入文字、图片等对象、表格标题以及利用表格来配置版面。.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 湖北职院计科系' - dashiell-marechal


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

教学内容

1、演示并讲解用表格布局制作的网页

2、用表格制作网页


教学目的

1、掌握表格的插入

2、掌握单元格的相关操作

3、用表格布局制作一个网页

4、表格嵌套与叠加


教学重点

1、表格的插入

2、单元格的相关操作


教学难点

1、表格的插入

2、单元格的相关操作

3、用表格布局制作一个网页


引言:

在网页设计中适当的使用表格将不同性质和部分加以区分,不但能使整个网页看起来整齐而且可读性增高。下面我们介绍表格的各种属性设定、如何在表格加入文字、图片等对象、表格标题以及利用表格来配置版面。


(一)演示并讲解用表格布局制作的网页

1、演示学完HTML后要完成的如图3-1中国茶吧网站中的网上商城页面。

图3-1 中国茶吧网站中网上商城页面


2、演示本次课要完成的用表格制作如图3-2的页面内容。


(二)用表格制作图3-2页面的上部分内容,如下图

1、表格的建立

  语法说明如下表:


2、制作一个一行三列的表格

(1)格式如下:

<table border=1>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>


2)在表格中加入属性

代码如下:

<table cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff9933 border=0>

<tr>

<td background=index_show.files/eshop_bar01_Y.gif height=25>

<table cellSpacing=0 cellPadding=0 width="100%" border=0>

<tr><td align=middle width=30><imgsrc="index_show.files/eshop_list02_Y.gif" > </td>

<td><font color=#ff6600>今日推荐</font></td>

<td align=right><font color=#ff6600>&gt;&gt;</font>

<a href="#" target=_blank><font color=#ff6600>更多</font></a></td>

<td width=10></td>

</tr>


</table>

</td>

</tr>

</table>

(3)效果如图3-3所示:


4)知识点讲解

cellSpacing=1:设定表格内框线宽度为1;

cellPadding=0:设定表格内文字与表格框线之间的间距为0;

bgColor=#ff9933:设定背景颜色为橙色,它是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果;

border=“0”:表示将表格的外框隐藏不显示;

Tr是table row缩写,用来声明这是表格中水平线的开始。



语法:

1、表格的标题与表头

大部分的表格都会在表格的上面加上标题文字,让人能够

知道该表格的功用。在HTML中是通过<caption>标记来设定,

语法:<caption valign=“value1” align=“value2”>tblname

</caption>

功能:当表格的标题或批注使用。

1)<caption>为成对标记,必须置于<table>标记范围内。

2)Tblname参数代表该表格的标题名称。

3)Valign属性:用来设定标题位置,可以和align属性连用,

value1值如下:

Top:将标题置于表格的上方(默认值)。

Bottom:将标题置于表格的下方。


4)Align属性:设定标题对齐方式,和valign属性一起连用,value2值如下:

Left:将标题置于左方。

Center:将标题置于中央(默认值)。

Right:将标题置于右方。

2、跨行合并

我们可在<td>或<th>标记中加入colspan(栏展开)的属性来做储存单元的合并,这个属性可用来控制储存单元的数目。它表示该储存单元要占用栏的宽度。属性值用数字表示。

3、跨列合并

我们可在<td>或<th>标记中加入rowspan(列展开)的属性来做储存单元的合并,这个可用来控制储存单元的数目。表示该储存单元要占用列(储存单元)的高度。属性值用数字表示。


代码如下:

<table cellSpacing=0 cellPadding=0 width="100%" border=0>

<tbody>

<tr>

<td background=index_show.files/eshop_shade02.gif height=5></td></tr>

<tr>

<td height=10></td></tr></tbody></table>

<table cellSpacing=0 cellPadding=0 border=0>

<tbody>

<tr>

<td><a href=“#" target=_blank><img height=120 alt=富贵吉祥 src="index_show.files/20066151584775663.jpg" width=160></A></td></tr>


<tr>

<td height=6></td></tr>

<tr>

<td background=index_show.files/line_h_H02.gif height=1></td></tr>

<tr>

<td height=2></td></tr>

<tr>

<tr><td><font color=#333333>商城价格:</font><font color=#0000ff>651</FONT> <font color=#999999>(元/盒)</font></td></tr><td><font color=#333333>产品名称:</font><a title=富贵吉祥 href=“#" target=_blank><font class=bold color=#ff6600>富贵吉祥</font></a></td></tr>

<tr>

<td><font color=#333333>市场价格:</font><font

color=#ff0000><STRIKE>1085</strike></font> <font color=#999999>(元/盒)</font></td></tr>


<tr>

<td height=2></td></tr>

<tr>

<td background=index_show.files/line_h_H02.gif height=1></td></tr>

<tr>

<td height=6></td></tr>

<tr>

<td align=middle><a href=“#" target=_blank><IMG alt=购买该产品 src="index_show.files/eshop_buy01.gif" border=0></a></td></tr></tbody></table>

</td></tr>

<tr><td><img src="index_show.files/f0103.gif"></td></tr>

</tbody></tbody></td><td width=5></td>

<td width=180></td></tr>

</table>



小结】

  最简单的表格仅包括行和列。任何表格都有三个基本要素:表行、表头和表项,每个要素都有自己的标签。表格是一行一行建立的,在每一行中填入该行每一列的表格数据。通过这次课我们对表格和单元格的属性有一定的的认识和了解,根据上述内容,我们再通过理论和实践相结合,多练习,多操作,对网页的制作中表格的操作有更深的理解。


作业】

按实验内容完成网上的操作,完成实验报告,在实验报告中要求记录如下内容:

1、表格的几种属性;

2、用十六进制、英文单词写出六种颜色;

3、根据上述所讲内容完成如图所示(截图)的页面。(素材在D:\yhf\项目三:HTML表格与单元格标记的使用\网上商城\表格部分)页面为D:\yhf\项目三:HTML表格与单元格标记的使用\网上商城\表格部分\index_show.html的首页。



ad