html培训

来源:热点事件 时间:2018-07-07 18:00:05 阅读:

【www.zhuodaoren.com--热点事件】

html培训一:HTML培训课程:HTML语言入门 第八课 设置图片


HTML网权威发布HTML培训课程:HTML语言入门 第八课 设置图片,更多HTML培训课程相关信息请访问HTML网。

  现在的网站没有用图片的,几乎很少了吧!图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率喔!
  有关设定图片的方法共有以下几种 :
设定HTML文件背景图片、背景颜色。<BODY>...</BODY>标记。如 : <BODY BACKGROUND=A.GIF>...</BODY> 或<BODY BGCOLOR=#000000>...</BODY>
设定图片。<IMG>标记。
设定地图。<MAP>...</MAP>标记。
  常用图片标记

<IMG> 指令
相关属性 : ·ALIGN 调整·ALT 提示字·BORDER 边框·HEIGHT 高度·SRC 文件或URL位址·USEMAP 地图名称·WIDTH 宽度
如 : 可插入图片 ( GIF、JPG格式 )、AVI电影<CENTER><IMG SRC="../../../images/pcedu_lo.gif" ALT="太平洋网络学院" ALIGN=TOP BORDER=1></CENTER>

<MAP>...</MAP> 地图
相关属性 : ·NAME 名称

<AREA> 设定地图动作区域
相关属性 : ·COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 )·HREF 动作区域连结点 ( 可载入位址或文件 )·NOHREF 动作区域连结点不动作·SHAPE 外型

  举例

设定地图<IMG BORDER=0 SRC=A.GIF USEMAP=#A><MAP NAME=A><AREA SHAPE=RECT COORDS=0,0,200,100 HREF=1.HTM><AREA SHAPE=RECT COORDS=0,100,200,200 NOHREF><AREA SHAPE=RECT COORDS=0,200,200,300 HREF=3.HTM></MAP>

html培训二:HTML培训课程:HTML表格使用从入门到精通


HTML网权威发布HTML培训课程:HTML表格使用从入门到精通,更多HTML培训课程相关信息请访问HTML网。

   如果你是一名网页设计人员,如果你的网页里没有一个表格,那可以说算不上一个网页(当然全FLASH作品除外),表格的重要性就可想而知。帮助我们控制网页布局、控制内容的显示等等。使用表格有很多的技巧,你可否知道呢?          使用表格排版网页        使用表格排版网页,可以使你的网页更美观,条理更清晰,更易于维护和更新。(将表格的宽设为100%,可以使网页的兼容性更好)          要尽量细化表格        不要把整个网页放在一个大的表格里,因为一个大表格里的内容要全部加载完才会显示,如果整个网页放在一个表格里,那么你的网页就只会两种情况:          1、全部不显示        2、全部显示出来          所以建议大家将整个页面分成几块,例如通用的上(放置Logo、Banner、Menu等等)、中(放置页面内容)、下(放置版权信息等等),将每一部分由单独的表格来实现,这样会好一些。          表格设计实例        创建一个表格,边框大小设为0(border=0),间距设为1(cellspacing="1"),背景色设为深色(bgcolor="#000000"),全部选定单无格,并将单无格的背景色设为浅色(如:bgcolor="#FFFFFF"),这样可以得到一个细线边框的表格,请看下面的例子:          〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">        <tr bgcolor="#FFFFFF">        <td> </td>        <td> </td>        </tr>        <tr bgcolor="#FFFFFF">        <td> </td>        <td> </td>        </tr>        </table〉          动态改变表格单元格的颜色        在单元格<td>标记中加入以下代码,会动态改变单元格的颜色设置:        onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’”          在行标签<tr>标记中加入上面代码,会动态改变一行的颜色设置。          〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">        <tr bgcolor="#FFFFFF" onMouseOver="this.bgColor=‘#00CC00‘" onMouseOut="this.bgColor=‘#FFFFFF‘">        <td> </td>        <td> </td>        </tr>        <tr bgcolor="#FFFFFF">        <td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"> </td>        <td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"> </td>        </tr>        </table〉        用表格替代水平线、竖直线        用表格代替水平线,插入一个表格,将高度设为1(按需要设定),当然也可以将宽度设为1,制作竖直线。          〈table width="100" border="0" align="center" cellpadding="0" cellspacing="0">        <tr>        <td height="1" bgcolor="#000000"></td>        </tr>        </table>        <br>        <table height="100" border="0" align="center" cellpadding="0" cellspacing="0">        <tr>        <td width="1" bgcolor="#000000"></td>        </tr>        </table〉            注意:在Dreamweaver里制作时,先将高设为1后,切换到代码窗口,将表格里的空格符去掉( ),如果不将空格去除的话,将看不到想要的效果了。          制作带有立体感的表格        在页面中适当的加入带有立体感的表格元素,会给你的页面添光加彩。          〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">        <tr>        <td>A</td>        <td> </td>        </tr>        <tr>        <td> </td>        <td> </td>        </tr>        </table>        <br>        <table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC">        <tr>        <td>B</td>        <td> </td>        </tr>        <tr>        <td> </td>        <td> </td>        </tr>        </table>        <br>        <table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">        <tr>        <td>C</td>        <td> </td>        </tr>        <tr>        <td> </td>        <td> </td>        </tr>        </table〉          小技巧:效果图中的凸凹效果,完全是由bordercoloer的颜色来控制的,它的颜色浅一些,有会有凸出的效果,它的颜色深一点,就会有凹陷的效果。
   隐藏表格的分隔线        在处理表格时有时会有这样的需求,某几列、或行的内容属于同一主题,为了排列整齐将它们放在不同的行上,但是不想让表格的分隔线显示出来,有什么办法吗,其实很简单。        隐藏水平分隔线        〈table border rules=cols cellspacing=0 align=left>          隐藏竖直分隔线        〈table border rules=rows cellspacing=0 align=left>          隐藏全部分隔线        〈table border rules=none cellspacing=0 align=left>          表格内容分行下载        表格内有一些载入较慢的元素(如计数器、大图片等等)时,往往会延迟整个表格的显示。这是由IE的显示特性决定的,只有当表格内所有元素全部载入后,整个表格才得以显示。“上有政策,下有对策”,我们可以使用标签把表格内容拆开,放在几个竖向相连的大表格中,把关键内容放在上面的表格中,让它们先显示,这样用户就不会因为失去耐心而关闭窗口了。

html培训三:HTML培训课程:HTML语言入门第四课 标示


HTML网权威发布HTML培训课程:HTML语言入门第四课 标示,更多HTML培训课程相关信息请访问HTML网。

 HTML提供许多种类的标示标记,作项目标示,而且可以作巢状式标示!
  常用标示标记
<LI> 标示项目。
如 : <OL><LI>第一项<LI>第二项</OL>

第一项
第二项
<OL>...</OL> 编号标示,可标示数字或英文、罗马字母。
如 : <OL TYPE=I><LI>第一项<LI>第二项</OL>

第一项
第二项
<UL>...</UL> 符号标示,可标示数字或英文、罗马字母。
如 : <UL><LI>第一项<LI>第二项</UL>

第一项
第二项
<DT> 定义项目。

<DD> 定义资料

<DL>...</DL> 定义标示。
如 : <DL><DT>十进制 :<DD>0、1、2、3、4、5、6、7、8、9<DT>十六进制 :<DD>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F</DL>

十进制 :
0、1、2、3、4、5、6、7、8、9
十六进制 :
0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
  巢状式标示
如 : <OL>
<LI>第一章
<OL TYPE=i>
<LI>第一节
<UL>
<LI>第一段
<LI>第二段
</UL>
<LI>第二节
</OL>
<LI>第二章
<LI>第三章
</OL>
第一章
第一节

第一段
第二段
第二节
第二章
第三章

  其他标示标记
<DIR>...</DIR> 目录式标示 ( 自动加圆点 )。
如 : 网络学院 :<DIR><LI>新手上路<LI>软件教室<LI>设计教室<LI>开发教室</DIR>
网络学院 :

新手上路
软件教室
设计教室
开发教室
  注意事项
  标示项目符号也可以用<FONT>...</FONT> 标记,以符号字元 ( ○、◆、◎、★、■...等 ) 标示。
  如 :<FONT COLOR =#FF0000> ● </FONT>
  特殊符号 :
  在HTML文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。
符号
替代指令
"
&#34 或 &quot
&
&#38 或 &amp
<
&#60 或 &lt
>
&#62 或 &gt
不可分空格
&nbsp

本文来源:http://www.zhuodaoren.com/shenghuo783754/

推荐访问:html培训心得
扩展阅读文章
热门阅读文章