新版博客屋     搬家到新版     你还没有登录,请先登录     图书城网上书店
注 册   |   登 录

提供一组做网页教材 (此文已搬到新家)

王秋生 @ 2007-04-29 09:39:53

快速制作图片网页

    很多朋友都觉得图片制作的网页让人赏心悦目,但不知道怎么去制作.其实这很简单,哪怕你不会代码也可以去制作.只要你懂复制和粘贴就可以做出你喜欢的图片网页.我们还是用"照猫画虎"的方法来学习制作.准备好你所喜欢的图片和音乐就可以了。现在我们就开始制作。

    首先,我们可以到网站找到你喜欢的制作模式.然后把它复制粘贴好就可以了.登陆到你的后台做好编辑的准备.

准备的资料如下   

图片地址:http://www.sonicalbum.com/vip/435278/pic.aspx?name=cxg0002000_1127004400982.JPG

音乐地址:http://www.7su.cn/user/aixin0735/webpic/2007227121211418.wma

动画地址:http://imgfree.21cn.com/free/flash/51.swf

    快速制作:

    一、将找到的编辑模式复制到你的后台。在 查看HTML源代码里打上钩,就可以看到在代码编辑模式里了。

如图:(1)

<TABLE style="BORDER-RIGHT: #a52a2a 6px ridge; BORDER-TOP: #a52a2a 6px ridge; LEFT: -100px; BORDER-LEFT: #a52a2a 6px ridge; WIDTH: 900px; BORDER-BOTTOM: #a52a2a 6px ridge; POSITION: relative; TOP: 0px" borderColor=#000000 height=600 cellSpacing=0 cellPadding=0 width=900 <TBODY>
<TBODY>
<TR>
<TD><EMBED style="Z-INDEX: 3; LEFT: 100px; WIDTH: 780px; POSITION: absolute; TOP: 20px; HEIGHT: 550px" align=center src=http://imgfree.21cn.com/free/flash/140.swf width=800 height=750 type=application/x-shockwave- flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash">

<TABLE height=600 width=900 align=center background=http://www.sonicalbum.com/vip/435278/pic.aspx?name=wer010.JPG border=0>
<TBODY>
<TR>
<TD><FONT style="FONT-SIZE: 50pt; FILTER: glow(color=#000000,strength=5); WIDTH: 100%;  LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">
<P align=center><B><FONT color=#ffd700 size=8>我&nbsp; 的&nbsp; 文&nbsp; 章</FONT></B></P>
<P align=center><STRONG><FONT color=#ff7f50 size=6>文/编:某某</FONT></STRONG></P></FONT>
<P>&nbsp;</P>
<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=up width=900 height=220><FONT style="FONT-SIZE: 20pt; FILTER: shadow(color=#333333,direction=380); WIDTH: 100%; LINE-HEIGHT: 150%" ><FONT face=楷体_GB2312 color=#7fff00><FONT size=5><FONT face=楷体_GB2312 color=#000000 size=5><STRONG><FONT color=#000000>
<P align=center><BR><FONT color=#ffebcd>加入文字<BR>加入文字<BR>加入文字<BR>加入文字<BR><BR>加入文字<BR>加入文字<BR>加入文字<BR>加入文字<BR><BR>加入文字<BR>加入文字<BR>加入文字<BR>加入文字<BR><BR>加入文字<BR>加入文字<BR>加入文字<BR>加入文字<BR><BR>加入文字<BR>加入文字<BR>加入文字<BR>加入文字<BR>加入文字<BR>加入文字<BR>......<BR><BR></P></STRONG></FONT>
<P align=center><BR></P><FONT face=楷体_GB2312 color=#7fff00><STRONG></STRONG></FONT><FONT color=#7fff00></FONT>
<P align=center><BR></P></FONT></FONT></FONT></FONT></FONT< FONT></FONT></FONT></MARQUEE></MARQUEE></DIV></B>
<P align=left twffan="done"></P></STRONG></FONT></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></EMBED></FONT></MARQUEE><BGSOUND balance=0 src=" http://www.7su.cn/user/aixin0735/webpic/2007227121211418.wma" volume=-240 loop=infinite>

    二、现在我们要做的就是开始替换图片和文字了。在这里只有一张图片的地址,我们找到自己需要替换的图片地址把它复制好,然后在原来的图片地址上进行替换。换好以后在 查看HTML源代码的地方去掉钩,回到展示区后就可以看见你的新图片已经换好了。

    三、换好图片以后根据图片的颜色再来把边框的颜色进行修改。找到你需要更换的颜色代码,然后把它复制粘贴到原来的颜色地址上,这样边框就会就改变了以前的颜色。在根据你的喜欢调整边框的宽和窄,直到你满意就可以了。

    四、将准备好的flash地址替换掉原来的flash动画地址。

    五、现在进行文章内容的替换。把你自己的文章内容依次替换到“加入文字”的地方。

    六、把已经准备好的音乐地址复制好粘贴在原来的音乐地址上。这样你的图片网页作品就基本上做好了。

    七、 查看HTML源代码的地方去掉钩,在展示区你可以看到整个作品的制作情况和风格了。如果还有觉得不满意的地方,你可以重新回到代码编辑模式里进行修改。当你觉得满意了就可以添加发表了。

    主要修改可供参数:

BORDER-RIGHT: #a52a2a 6px右边框颜色及宽度 

BORDER-TOP: #a52a2a 6px  边框颜色及宽度

BORDER-LEFT: #a52a2a 6px 左边框颜色及宽度

BORDER-BOTTOM:#a52a2a 6px下边框颜色及宽度

WIDTH: 900px         边框及图片展示宽度

height=600           边框及图片展示高度        

FONT-SIZE:50pt        字体的大小

MARQUEE scrollAmount=1字体移动的速度

FONT face=楷体_GB2312 字体

LEFT: -100px          边框左右调整

FONT color=#ffebcd    字体颜色

     注意事项:

    1、图片的宽和高一定要和边框展示的宽和高相吻合。

    2、图片要选择和文章内容比较适合的。

    这样你做出的图片网页就可以让人赏心悦目了。朋友们多动手、多动脑、相信自己你一定是最棒的。预祝你们一定可以成功的。

    下面是你已经完成的新作品:(图2)

<TABLE style="BORDER-RIGHT: #a52a2a 6px ridge; BORDER-TOP: #a52a2a 6px ridge; LEFT: -80px; BORDER-LEFT: #a52a2a 6px ridge; WIDTH: 900px; BORDER-BOTTOM: #a52a2a 6px ridge; POSITION: relative; TOP: 0px" borderColor=#000000 height=600 cellSpacing=0 cellPadding=0 width=900 <TBODY>
<TBODY>
<TR>
<TD><EMBED style="Z-INDEX: 3; LEFT: 100px; WIDTH: 780px; POSITION: absolute; TOP: 20px; HEIGHT: 550px" align=center src=http://imgfree.21cn.com/free/flash/51.swf width=800 height=750 type=application/x-shockwave- flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash">
<TABLE height=600 width=900 align=center background=http://www.sonicalbum.com/vip/435278/pic.aspx?name=cxg0002000_1127004400982.JPG border=0>
<TBODY>
<TR>
<TD><FONT style="FONT-SIZE: 50pt; FILTER: glow(color=#000000,strength=5); WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<P align=center><B><FONT color=#ffd700 size=8>想&nbsp; 你&nbsp; 绕&nbsp; 心&nbsp;:怀</FONT></B></P>
<P align=center><STRONG><FONT color=#fff8dc size=5>文/编:某某</FONT></STRONG></P></FONT>
<P>&nbsp;</P>
<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=up width=900 height=220><FONT style="FONT-SIZE: 20pt; FILTER: shadow(color=#333333,direction=380); WIDTH: 100%; LINE-HEIGHT: 150%"><FONT face=楷体_GB2312 color=#7fff00><FONT size=5><FONT face=隶书 color=#000000 size=5><STRONG><FONT color=#000000>
<P align=center><BR><FONT color=#ffebcd>一曲想你绕心怀<BR>燕飞蝶舞轻盈来<BR>情怀依旧人远隔<BR>凝留佳话世人采<BR><BR>一曲想你绕心怀<BR>燕飞蝶舞轻盈来<BR>情怀依旧人远隔<BR>凝留佳话世人采<BR>......<BR><BR></P></STRONG></FONT>
<P align=center><BR></P><FONT face=楷体_GB2312 color=#7fff00><STRONG></STRONG></FONT><FONT color=#7fff00></FONT>
<P align=center><BR></P></FONT></FONT></FONT></FONT></FONT< FONT></FONT></FONT></MARQUEE></MARQUEE></DIV></B><EMBED src=http://www.dtbp.net/swf/zdhxn.swf hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED></FONT></MARQUEE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

    

类别:甜酸苦辣   910次浏览   20篇评论
相关文章:

网友评论:
水的精彩
水的精彩 @ 2007-05-09 09:11:18 评论
热心人 好人 善良人……你真好!谢谢!
作者回复:谢谢你的赞美,谢谢你的花,感动!
雨晴
雨晴 @ 2007-05-05 22:20:52 评论
快速制作:

   一、将找到的编辑模式复制到你的后台。在 查看HTML源代码里打上

钩,就可以看到在代码编辑模式里了。

这里说的后台和编辑区在哪,是在论坛里吗?
作者回复:你直接到添加文章栏就好了
琪雅
琪雅 @ 2007-05-01 00:55:43 评论
谢你提供,先收藏了.
作者回复:谢谢你喜欢!五一快乐!
一叶一菩提
一叶一菩提 @ 2007-04-30 20:42:05 评论
非常感谢!
收藏了
作者回复:不客气!
阿静
阿静 @ 2007-04-30 10:57:22 评论
收藏了,有机会一定跟你学!
作者回复:不管天多高,海多深,钢多硬,风多大,尺多长,河多宽,酒多烈,冰多冷,火多热……我只想告诉你,这些都不关你的事!五一节快乐
逐云
逐云 @ 2007-04-29 23:31:14 评论
谢谢指教!
作者回复:不管天多高,海多深,钢多硬,风多大,尺多长,河多宽,酒多烈,冰多冷,火多热……我只想告诉你,这些都不关你的事!五一节快乐
美丽人生
美丽人生 @ 2007-04-29 23:20:09 评论
生活像海洋
家庭似港湾
网络情无限
你线连我线
网友传祝愿
齐心又温馨
五一将至上
幸福好运旺
作者回复:春风喜迎劳动节,舒展眉头度五一;繁忙工作终得歇,劳累之余开心些;双手装扮新世界,终有后人来感谢!
翡冷翠
翡冷翠 @ 2007-04-29 22:58:33 评论
收藏了。
作者回复:谢谢了
石榴花开
石榴花开 @ 2007-04-29 22:22:46 评论
呵呵!不太明白!
作者回复:慢慢会明白的
若尘
若尘 @ 2007-04-29 21:03:35 评论
学习。
作者回复:互相
九口一家
九口一家 @ 2007-04-29 20:39:31 评论
学习了,谢谢。
作者回复:相互学习...
风清飘影
风清飘影 @ 2007-04-29 20:25:52 评论
我怎么看不懂呢?王大哥能教教我吗?
风清飘影
风清飘影 @ 2007-04-29 20:25:45 评论
我怎么看不懂呢?王大哥能教教我吗?
作者回复:主要是让你掌握下载.复制.粘贴的要领,不怎么难的
嫣玲
嫣玲 @ 2007-04-29 20:06:08 评论
我不怎么看的懂,怎么办呢?
作者回复:只要你掌握其中一部分就行了
娇子时代
娇子时代 @ 2007-04-29 20:05:47 评论
知识无价,谢谢你的指教。
作者回复:不客气,相互学习
梦竹
梦竹 @ 2007-04-29 18:46:09 评论
我还是收藏后慢慢看学学.谢谢王大哥
作者回复:希望有用呀
岩儿
岩儿 @ 2007-04-29 15:54:59 评论
继续学习!
作者回复:互相学习...
Sunshine
Sunshine @ 2007-04-29 14:55:41 评论
学习了1谢谢!
作者回复:别客气,互帮互学呀
西兰
西兰 @ 2007-04-29 13:24:03 评论
呵呵。要学一年才会。
作者回复:一小时足矣...
寒冰
寒冰 @ 2007-04-29 10:12:57 评论
欣赏学习了,谢谢!
作者回复:在你面我是在班门弄斧呢....

由于旧版性能问题,暂时不允许评论,请到新版发表评论,非常抱歉给您带来的不便
去王秋生的新家看看
王秋生个人档案
王秋生 发站内短信  加为我的朋友
生日: 1954-7-28 (性别: 男)
来自于: 上海闵行区
    更多资料