以文本方式查看主题

-  动网先锋论坛  (http://2007.hnzqw.com/index.asp)
--  网页特效  (http://2007.hnzqw.com/list.asp?boardid=59)
----  [学习]★上网、制帖资料汇编★  (http://2007.hnzqw.com/dispbbs.asp?boardid=59&id=38559)

--  作者:白云悠悠
--  发布时间:2007/8/29 17:32:25

--  [学习]★上网、制帖资料汇编★



                 上网、制帖资料汇编
             (一)


    制作网页离不了表格,制作帖子也离不了表格。我们常见的所谓的特效帖就是在表格上做的。
  论坛自带的编辑器比较简单,功能少,编辑区也很小,不太好用。微软的OFFICE无处不在,其中有一个网页编辑软件FRONTPAGE,虽不是上乘的网页编辑软件,但比起论坛
自带的编辑器强不少,而且好找,编辑区很大,比较好用。在初级阶段,我们就用这个软件,详细地讲讲表格的基本操作。有了一定的基础以后,进一步学习网页制作,做出一些有声有色的帖子就不是难事了。
  需要说明一下,叙述中的一些提法不一定是准确的专业术语,以好懂为首选。

 

  上面看到的这个界面就是这个软件打开了一个空白网页时的情况。这与微软的其他软件看上去差不多。
  顶上面第一行是菜单,第二行是工具按钮。中间是一个很大的编辑区。编辑区的左下角有三个状态选项卡。第一个“普通”是常用的编辑状态,不需要涉及代码;第二个就是常说的“超文本”HTML状态,我们暂时不去管它。但是在讲到具体例子时,会将对应的代码列出来,给性急的朋友参考;第三个是预览时用的。
  为了节约篇幅,关于操作步骤将只以路径的型式列出,练习的时候,对照着一步一步的做下去,很容易出结果的。上面编辑区的小块是在菜单中点击:(表格_插入_表格)后出现的,用来设置表格的有关的选项。
  准备工作就到这里。我们做几个实例。

               第一例、设置一个单个的框(叫一行、一列),
      也可以说单个的框是一种特殊的表格;对表格不作任何设置,将一张图片作为表格的背景放入其  中。我们在帖子中发图片时,经常会有这种情况,图片显得较小。这是
    网络系统自动将大到一定程度的图片以略缩图的形式显示的缘故。
  本例就能解决这个问题,让大图以实际大小显示在帖子区。

操作步骤:
  打开软件_点工具栏第一个按钮_空白网页打开;
  点(表格_插入_表格)设:行为1、列为1_确定
  这时在编辑区会有一个细虚线框,在框中点右键_表格属性_使用背景
    图片_填入图片地址_确定_完成设定

  这时图片不一定正常显示,因为我们没有设置表框的大小。

     调整表框:将光标移到表框附近,稍微移动,当光标变为双箭头时,按下左键不放,同时拖动鼠标调整,横、竖向相同。这里有一个特征,图片的大小是不会改变的;当表框小于图片时,图片只显示局部;当表框大于图片时,图片就象铺瓷砖一样,以多幅显示。

      另一方法:将图片的地址粘贴到浏览器的地址栏、回车,图片显示,在图片上点右键_属性,就能看到图片的长宽值了。在设置表框的时候,将这  两个数据填写到“指定宽度”、“指定高度”中,表框的大小就不需要另行调整了。

     发帖子:上面的工作完成后,在菜单中点:编辑_全选;在编辑区点右键_复制,然后到帖子编辑区点右键_粘贴,预览,发表。整个工作完成。

 

*********

<div align="center">

 <center>

  <table border="0" cellpadding="0" cellspacing="0" width="650" background="http://www.hnzqw.com/UploadFile/2007-8/20078291612849705.jpg" height="250">

     <tr>

      <td>
              <p align="center">
      </td>

     </tr>

   </table>

  </center>

</div>

*********

  上面这段代码是为了便于看清才这样排版的,实际用的时候还得排齐。要熟炼地使用电脑,重要的是要多操作,多比较,多摸索,多想,也可解决一些问题。不必对代码望而却步,其中也有许多规律可寻。以后还要讲到表格的多行多列、嵌套、综合应用。但不管怎样变,还是个表格,基本的东西还是一样的,只是东西多了,看起显得复杂,吓人。我们可以想些办法,简化问题,一个一个的解决。目标不必定得很高,一步一步的走。有什么问题、建议尽可提出来,我们一起来摸索、探讨。编辑的过程,也是学习的过程。但愿能给需要的朋友有一点点作用。
                      



--  作者:白云悠悠
--  发布时间:2007/8/29 17:41:41

--  (二)





第二例:表格的属性_“表格属性”、“单元格属性”

操作步骤:
  打开软件_点工具栏第一个按钮_空白网页打开;
  点(表格_插入_表格)设:行为1、列为1_确定;设置了一个单格的表。
  在表的线框内点右键,可以看到下拉菜单中有:表格属性、单元格属性
两个选项。表面上看,单个的表框是“一个”对象,但实际上可细分为整体和局部两个部分,整体是指整个表的外围所包围的范围,局部是其中的一部分。对于一行一列这种特殊情况,表格与单元格看上去就重迭了。软件中对这两部分表述为:表格,单元格。

实例操作:
  在上例的基础上,增加三个设置。进入“表格属性”后,在“布局”的
  设置项下,将“单元格间距”设为30;在“边框”项下,将“粗细”设
  为4,“颜色”设为红色或其他色。复制一份备用。
1、在第一份表格中,按上例在表格中设置背景图。
2、在第二份表格中,右键点表框_"单元格属性"_设置背景图。

  下面给出示例和超文本代码。  

 

<div align="center">
<table height="250" cellSpacing="30" cellPadding="0" width="650" background="http://219.139.58.195/hlzq/UploadFile/2006-4/2006460444386048.jpg" border="4" bordercolor="#FF0000">
<tbody>
<tr>
<td height="193">
<p align="center"></p>
</td>
</tr>
</tbody>
</table>
</div>

 

<div align="center">
<table height="250" cellSpacing="30" cellPadding="0" width="650" >
<tbody>
<tr>
<td height="193" background="http://219.139.58.195/hlzq/UploadFile/2006-4/2006460444386048.jpg" border="4" bordercolor="#FF0000">
<p align="center"></p>
</td>
</tr>
</tbody>
</table>
</div>

  至此,综合第一个例子,我们应该可以总结出于下几点感性的结论。
一、只要设置了表格,就一定会有<div>、<table>、<tr>、<td>这几个命令
二、这几个命令成对出现,前面有,后面一定有,只是后面的多了一个“/”
三、它们的位置有这样的现象。早出现的后结束,后出现的早结束。是不是
  有点象数学里面大中小括号的情况。{[(  )]}
四、通过本例对背景(代码为:
background="http://219.139.58.195/hlzq/
  UploadFile/2006-4/2006460444386048.jpg)不同的设置,从代码中可
  以看出,第一图的背景图放置在TABLE项,第二图放置在TD项。可不可以
  这样来理解代码与表格的对应关系:TABLE 就是表格,即表框,TD 就
  是单元格。

结尾几句话:
  1、“超文本”难学吗?
  2、在学习的思路上,能得到一点启示吗?
  3、将这两个例子中接触到的设置项都动一动,感觉一下他们的变化
    以及相互的关联。
  4、通过这两个例子,想不想做出下面这个帖子?  

 
 
 

素材地址:(使用时,请将第一个字母“H”改为小写的“h”)

Http://www.ynzb.com/bbs/UploadFile/2007-8/200783118595382306.gif
Http://www.ynzb.com/bbs/UploadFile/2007-8/20078311859959383.jpg
Http://www.ynzb.com/bbs/UploadFile/2007-8/200783118592235078.jpg
Http://www.ynzb.com/bbs/UploadFile/2007-8/200783118593432812.jpg



--  作者:白云悠悠
--  发布时间:2007/8/29 17:41:52

--  (三)




第三例:让表格看上去生动一点_表框的设置及变化

先讲几句题外话:
  第二例提到做帖子的事,也许有人会说:还没讲这样的例子,怎么做得出呢。
我们先来看看第一、二例中讲了哪些内容。

一、制帖软件;
二、设置表格;
三、表格属性;表格背景图;表格边框线宽度、颜色;设置单元格间距;
四、单元格属性;单元格背景图;

  这不都有了吗。并不是难题、偏题。略有出入的是:将一行改设为三行。不敢
试,怕地球爆炸?

  我的法宝就是:“使劲想,能不能用我已掌握的东西来解决这个问题”。
(问题解决了,就会得到新的经验。)“总是想:能不能这样做?会是个什么结
果?马上动手试试,做些比对。”因为没耐心看资料,那就只有多多动手。
  谢谢允许胡扯。

正题:
  
操作步骤:
  打开软件_设置空白网页_设置一个单格的表。

 

 

 

在“表格属性”对话框中:
 点左下角“样式”,得到“修改
样式”对话框;在其中点左下角的
“格式”选下拉菜单中的“边框”
得到“边框与阴影”对话框。

 请注意:
“表格属性”中的“背景颜色”、“亮边框”、“暗边框”这三个选
项,下面要用到;

 请注意:
“边框与阴影”对话框中的内容,
下面要用到。

一、基本设置
  边框粗细:3
  边框颜色:红(以下同,便于对比)
  单元格间距:15



 

二、“样式”设置
  进入到“边框与阴影”对话框
  点“方框”
  宽度:10 (为了看清,设大一点)
  “样式”选“凸线”

  多试试各种选项。这种设置的颜色不
  鲜艳。有光照效果。

 

三、基本设置(加变化)
  单元格间距:0
  设置“表格”背景色

  

 

四、基本设置(加变化)
  边框粗细:3
  单元格间距:10
  设置“表格”背景色
  设置“单元格”背景图

 

五、基本设置(加变化:边框凸起效果)
  边框粗细:3
  单元格间距:10
  设置“表格”背景色(与框线同)

  设置“亮边框”比框线色“浅”一点
  设置“暗边框”比框线色“深”一点

湖南知青网

欢 迎 您

六、基本设置(加变化)
  与例五相同,另加
  设置“单元格”背景图
 ******* 
  对比一下六、七例,可以看出:“亮边框”
  是指“左、上方”的“线条”,“暗边框”
  是指“右、下方”的“线条”。
 ******* 

 

七、基本设置(加变化:边框凹陷效果)
  边框粗细:3
  单元格间距:10
  设置“表格”背景色(与框线同)

  设置“亮边框”比框线色“深”一点
  设置“暗边框”比框线色“浅”一点

湖南知青网

欢 迎 您

 
 
 

说明:
  如果使用了“样式”设置边框线,那么普通设置就无效了。
  对不多的参数项进行各种搭配,就能得到许许多多不同的效果。

  在“普通”状态下完成了编辑,有兴趣的网友可以转到超文本状态下
  看看代码的变化。
          


--  作者:白云悠悠
--  发布时间:2007/8/29 17:42:03

--  (四)



第四例:制作一份有些模样的帖子_设置音效与flash

    还是先讲几句题外话:
  每一位上网发帖子的人都在制作网页。
你 会说:你乱讲。
  当我们把帖子发出以后,网页上是不是有了你我的劳作?一段文字,几张图
片,再配上一段悦耳的mp3,加个flash什么的。实质上是一回事,不过有大小区别
而已。往大处讲,网络是IT行业里的一支,按规矩还得读上几年大学。因此,大可
不必说自己笨,学得慢,等等。几近花甲的人,东一榔头西一棒子的,能玩出点花
样来,已经相当不错了。大胆的对人说:我也会做特效帖了。拍着胸脯说。
  讲完这个例子,我们的帖子已有些模样了。往后还会讲些稍复杂的例子。自己
看着办吧。

正题:
  
操作步骤:
  1、打开软件_设置空白网页_设置一个三行一列的表。
  2、进入表格属性对话框,设置:
    边框粗细:5(也可试试在“样式”里面设置)
    单元格间距:50
    颜色:自定    
  3、设置“表格”背景图;
  4、设置三张“单元格”背景图;  

  大至情况见上例。

设置flash:
  
操作步骤:
  1、在要设置flash的单元格中点右键,进入单元格属性设置对话框;
    在“水平对齐方式”中选“水平居中”;
  2、在菜单中点:插入_高级_插件;
  3、在“插件属性”对话框的“数据源”中粘贴文件地址_确定;
  4、点插件图标,拖动控制点,使八个点的范围略小于单元格。
设置完成。  

设置音效:(本例将播放器设成可见 ,循环播放。)
  
操作步骤:
  1、使光标停在帖子最后;
  2、在菜单中点:插入_高级_插件;
  3、在“插件属性”对话框的“数据源”中粘贴音源地址_确定;
  4、右键点插件图标_插件属性_大小_高:48_宽:500;
设置完成。

说明:
  图片素材见第二例,下面是本例素材。(去掉*号使用)

*<EMBED align=right
src=http://sucai.heima.com/sucai/news/flash/109.swf width="100%"
height=250 type=application/octet-stream wmode="transparent"
quality="high">

*<EMBED align=right
src=http://imgfree.21cn.com/free/flash/6.swf width="100%"
height=250 type=application/octet-stream wmode="transparent"
quality="high">

*<EMBED align=right
src=http://sucai.heima.com/sucai/news/flash/109.swf width="100%"
height=250 type=application/octet-stream wmode="transparent"
quality="high">

*<embed width="500" height="48" src="http://www.yqbeier.com/yxm/06xiaochao.mp3">


--  作者:快乐芝芝
--  发布时间:2007/9/3 11:34:58

--  
请问白云版主:以上所有的图片资料都必须是网站上的吗?我想用我电脑内的图片,首先必须将这些图片上传到某个网站(或者说是网络相册)才行,是吗?
--  作者:白云悠悠
--  发布时间:2007/9/3 15:19:07

--  
以下是引用快乐芝芝在2007-9-3 11:34:58的发言:
请问白云版主:以上所有的图片资料都必须是网站上的吗?我想用我电脑内的图片,首先必须将这些图片上传到某个网站(或者说是网络相册)才行,是吗?

  对,没错,真聪明。不过,很多网络相册的PP不能外链,所以连接的时候还是要注意一些。


--  作者:风铃草
--  发布时间:2007/9/3 15:50:03

--  

白云悠悠版主,辛苦了!


按此在新窗口浏览图片


--  作者:快乐芝芝
--  发布时间:2007/9/3 22:24:07

--  
谢谢白云版主的回复。
--  作者:幽雅
--  发布时间:2007/11/21 20:40:52

--  

白云悠悠版主,辛苦了!做得真好!收我这个徒弟吗?




--  作者:幽雅
--  发布时间:2007/11/21 20:59:11

--  


        

         带给我们是愉悦,艺术感染力真强