以文本方式查看主题
- 动网先锋论坛 (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
--
带给我们是愉悦,艺术感染力真强
|