您好!欢迎您光临快速制作图片网页[随缘]_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网络课堂>>>HTML讲座>>>快速制作图片网页[随缘]
快速制作图片网页[随缘]
发表日期:2007/9/4 23:35:00 出处:海洋之心 作者:随缘 发布人:hsb345 已被访问 1388

HTML语言基础

快速制作图片网页

编写:随缘

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

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

准备的资料如下   

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

音乐地址:http://www.xy.gz.cn/File/2007/04/9oj1m8tb6h17f.swf

动画地址: 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>
<TR>
<TD><EMBED style="Z-INDEX: 3; LEFT: 0px; 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: 30pt; FILTER: glow(color=#000000,strength=5); WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">
<P align=center><B><FONT color=#ff00cc>我&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: 25pt; FILTER: shadow(color=#333333,direction=380); WIDTH: 100%; LINE-HEIGHT: 150%"><FONT face=楷体_GB2312 color=#7fff00>
<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></EMBED src=http://www.xy.gz.cn/File/2007/04/9oj1m8tb6h17f.swf hidden=true type=audio/x-ms-wma AUTOSTART=
"TRUE" LOOP="TRUE"></EMBED></FONT></MARQUEE></TD></TR></TBODY></TABLE>

    二、现在我们要做的就是开始替换图片和文字了。在这里只有一张图片的地址,我们找到自己需要替换的图片地址把它复制好,然后在原来的图片地址上进行替换。换好以后在 查看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>
<TR>
<TD><EMBED style="Z-INDEX: 3; LEFT: 100px; WIDTH: 880px; POSITION: absolute; TOP: 20px; HEIGHT: 580px" align=center src=http://imgfree.21cn.com/free/flash/51.swf width=880 height=580 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=93009303.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=#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></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.xy.gz.cn/File/2007/04/9oj1m8tb6h17f.swf hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED></FONT></MARQUEE>

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167