注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北斗七星的博客

心灵的家园

 
 
 

日志

 
 

图片制作,起步学代码  

2011-04-13 22:43:05|  分类: 电脑 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

供初学HTML代码的朋友参考

图片制作,起步学代码 - bd2004 - 北斗七星的博客


在网上经我们常见到很多精彩漂亮的网页和贴图。这些佳作都是用各种代码和软件编辑出来的。都很想学一点,可是有的人看教材头就晕,而这里采用从简入手。
没有专业知识,如何启步呢?只要你会电脑系统操作和26个英文字母就可以。先看一扁HTML语言教材,看不懂也无关系,以后回来再学习。
启步学习代码先从三个内容入手:

(一)文字设置或叫布局。

(二)表格设置,制图。

(三)常用代码语句的应用。



先来学文字设置
文字设置三要素(三属值):

style=font:20pt 字的大小
color=navy 字的颜色
face=幼圆 那一种字体

文字设置的一组代码:

<font style=font:20pt face=隶书 color=fff000>锦绣中华</font>

显示效果如下:

锦绣中华

相同的文字设置代码,三要素改变了,
显示效果就不同。


<font style=font:40pt face=华文新魏 color=red>锦绣中华</font>

显示效果如下:

锦绣中华



<font style=font:80pt face=华文彩云 color=fff000>锦绣中华</font>

显示效果如下:

锦绣中华

你可以把(文字设置的一组代码)复制到记事本去,改为你喜欢的文字内容,让后用回复的方式试贴,粘贴时注意先选择[HTML]标签,同时把自动修正的钩去掉。

图片制作,起步学代码 - bd2004 - 北斗七星的博客


设置字体大小还有一种叫标题字体。

<h#> ... </h#> #=1, 2, 3, 4, 5, 6,

<h1>影画世界论坛</h1>

影画世界论坛


<h2>影画世界论坛</h2>

影画世界论坛


<h3>影画世界论坛</h3>

影画世界论坛


<h4>影画世界论坛</h4>

影画世界论坛


<h5>影画世界论坛</h5>

影画世界论坛

<h6>影画世界论坛</h6>

影画世界论坛

标题字体默认黑色宋体,
故只有字体大小的变化。

图片制作,起步学代码 - bd2004 - 北斗七星的博客


常用字体代码

宋体 黑体 楷体_GB2312 仿宋_GB2312 新宋体 幼圆 隶书

方正舒体 华文新魏 华文行楷 华文细黑 华文彩云 方正姚体

图片制作,起步学代码 - bd2004 - 北斗七星的博客



图片制作,起步学代码 - bd2004 - 北斗七星的博客
常用颜色代码

           
#FF0000 #FFFFf0 #0000F #008000 #FF00FF #000080

           
#008000 #00FFFF #FFf000 #993333 #FFFF00 #000099
           
#000066 #009933 #F00000 #FFCC00 #0099FF #33CCCC
           
#FFCCFF #33CC33 #CC0000 #3333CC #9900CC #993333
           
#993333 #006600 #FF9900 #00CCFF #66FF33 #003300

 
文字编辑常用代码语句:

掌握HTML语法中的分隔标签非常有必要,娴熟地
应用分隔标签,能令帖子可读性强、外观整洁漂亮。

常用分隔标签有三种:
1,强行换行:<br>

2,强行分段:<p>内容</p>

3,div,:div>内容</div>。

..................................

强行换行:<br>

<br>是独立使用的标签,没有终止符。

下面这首诗编辑时虽然有分行,

编辑时虽然有分行,但无用强行分行标签。
.......................................

<P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=fff000>
《 望庐山瀑布》 李 白

日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。
</P></FONT>
..................................

显示效果是联成一片。

《 望庐山瀑布》 李 白日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。

..........................................

编辑文本时,在要断行的地方加入分隔标签
<P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=lime>
《 望庐山瀑布》 李 白<BR><BR>

日照香炉生紫烟,遥看瀑布挂前川。<BR>
飞流直下三千尺,疑是银河落九天。<BR>
</P></FONT>
......................................

显示效果:

《 望庐山瀑布》 李 白

日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。

.........................................


强行分段:<p>内容</p>
与换行不同,p用来强行分段,
它是成对出现的标签,
即以起始符<p>引导被修饰的段落,
以</p>结束该段。

段与段之间的距离相当于一个空行,
两个<br>也得到分段的效果
........................................

类似p标签的还有div
记作:<div>内容</div>成对出现的标签。
它同样可以达到分行分段的效果
但不是一个分段标签。

.......................................
图片制作,起步学代码 - bd2004 - 北斗七星的博客



文字显示位置的控制

文字显示位置分别为:

水平方向(align),垂直方向(valign)
水平方向即左中右:
left(左对齐)
middle(居中)
RIGHT(右对齐)

垂直方向即*顶和*底.

top(*顶)、bottom(*底)等。






水平方向即左中右的代码:

<p align=left><font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>

<p align=CENTER><font style=font:15pt face=黑体 color=fff000>表示居中</font></P>

<p align=RIGHT><font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>


显示效果如下:



向左对齐


表示居中


向右对齐





垂直方向valign)*顶的代码:

<P align=LEFT valign=top>居左*顶</P>
<P align=center valign=top>居中*顶</P>
<P align=RIGHT valign=top>居右*顶</P>




垂直方向valign)*底的代码:

<P align=LEFT valign=bottom>居左*底</P>
<P align=center valign=bottom>居中*底</P>
<P align=RIGHT valign=bottom>居右*底</P>




文字(或图片)放置的地位,
还可以用空格(&nbsp;)和空行(BR)调整;
用代码编辑设置挂贴等办法。

 
移动属性的设置

<marquee>内容文字或图片</marquee>

上面是最简单的移动标签。把它复制粘贴发表结果如下:



内容文字或图片




移动属性值有几个内容:

移动方向 <direction=#> 速度 <scrollamount=#>
方式 <bihavior=#> 循环 <loop=#>延时 <scrolldelay=#>


启步先学方向和速度。



移动方向
direction=left 从右向左移
direction=right 从左向右移
direction=down 从上向下移
direction=up 从下向上移



移动代码:

文字从右向左移


<marquee direction=left scrollAmount=2> <font style=font:15pt face=黑体 color=fff000>文字从右向左移!</font></marquee>



显示效果:


文字从右向左移!




移动方向

文字从左向右移的代杩。

<marquee direction=right scrollAmount=2> <font style=font:15pt face=黑体 color=fff000>文字从左向右移!!</font></marquee>



显示效果:

文字从左向右移


移动方向

文字从上向下移的代码:。

<marquee direction=down scrollAmount=2> <font style=font:15pt face=黑体 color=fff000><CENTER>文字从上向下移!!</font></CENTER></marquee>



显示效果:

文字从上向下移!!




移动方向

文字从下向上移!的代码:。

<marquee direction=up scrollAmount=2> <font style=font:15pt face=黑体 color=fff000><CENTER>文字从下向上移!!!</CENTER></font></marquee>



显示效果:

文字从下向上移!!




文字来回走代码:

<marquee behavior=alternate scrollAmount=8> <font style=font:15pt face=黑体 color=fff000>文字来回走耶!!!</font></marquee>



显示效果:

文字来回走!!





移动速度 <scrollamount=#>

移动速度设置数值大就走得快。

<marquee direction=left scrollAmount=2> <font style=font:15pt face=黑体 color=fff000>scrollAmount=2移动速度设置数值小就走得慢!!</font></marquee>

scrollAmount=2移动速度设置数值小就走得慢!!



<marquee direction=left scrollAmount=8> <font style=font:15pt face=黑体 color=fff000>scrollAmount=8移动速度设置数值大就走得快!!</font></marquee>

scrollAmount=8移动速度设置数值大就走得快!!





文字上下移动代码:


<font size=5 face=隶书 color=lime> <MARQUEE scrollAmount=5 direction=up behavior=alternate height=60><center>文字上下移动</center></marquee>

文字上下移动



学用代码贴特效美术字。(最简单的方式)以后的教材里有具体操作

页面上一些漂亮的美术字,是用软件或代码做成的。
要用代码编辑美术字,必须弄懂较多的要关知识。先
借人家编成的来套用吧!



(一)
欢迎您来到网络世界。的代码:
<FONT style="FONT-SIZE: 30pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>欢迎您来到网络世界。。</B></FONT>

显示效果:

欢迎您来到网络世界。



(二)
漂亮的美贴!的代码:

<FONT style="FONT-SIZE: 40pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=黑体 size=6>漂亮的美贴!</FONT>
显示效果:

漂亮的美贴!


(三)
欢迎权重的代码:
<FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=yellow); WIDTH: 100%; COLOR: navy; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">欢迎权重。</FONT>
显示效果:

欢迎权重。



(四)
江山如此多娇代码:

<FONT style="FONT-SIZE: 60pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>江山如此多娇</FONT>


江山如此多娇




(五)
假如爱有天意代码:
<FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#ffd700, strength=50); WIDTH: 500px">假如爱有天意</FONT></FONT>
假如爱有天意




(六)

谢谢!!欣赏!!代码:
<FONT size=6><FONT style="COLOR: red; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B><I>谢谢!!欣赏!!</I></B></FONT></FONT>
谢谢!!欣赏!!


(七)

走进新时代!代码:

<FONT style="FONT-SIZE: 72pt; FILTER: shadow(color=#DA70D6); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体"><B>走进新时代!</B></FONT>
走进新时代!



(八)

祝您生日快乐!代码:
<DIV style="FILTER: glow(color=#E4DC9B, strength=5); WIDTH: 700px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 68pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#e31c1b>祝您生日快乐!</FONT></DIV>

祝您生日快乐!



(九)

我爱美丽的大自然 代码:
<FONT color=#c4b77d>
<FONT style="FILTER: shadow(color=#FF0000); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 130%; FONT-FAMILY: 华文行楷; font-size:45pt">我爱美丽的大自然</FONT><DIV align=center>
 


 我爱美丽的大自然
 



(十)

保护生态环境代码:
<FONT style="COLOR: #f90b46; FILTER: shadow(color=#AF0530); FONT-FAMILY: 隶书; FONT-SIZE: 45pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>保护生态环境</B></FONT>

保护生态环境



(十一)

努力学习,争取进步。代码:
<FONT style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>努力学习,争取进步。</B></FONT>
努力学习,争取进步。



(十二)

欢迎来到这里代码:
<FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>欢迎来到这里!</FONT>
欢迎来到这里!



(十二)

做的太好了,谢谢!代码:
<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>做的太好了,谢谢!</B></FONT>
做的太好了,谢谢!
 
学习表格(图框)设置


表格设置是贴图的主要基础,利用表格属性可以
做出漂亮的代码作品。表格设置属性内容有很多,
可以先从简易入手,先学习较主要的,逐步提高。





表格的基本语法


<table>...</table> - 定义表格

<tr> - 定义表行(即行)

<td> - 定义表元(即列插入内容)


表格语句是双标签代码,前面有一个开始句,后面就应有一个结束句。
不能多也不能少。


示例:


<table>

<tr>

<td>

插入内容

</td></tr></table>

表格属性内容:



border="16" 表格边框的厚度。

cellspacing="8" 表格格线的厚度

cellPadding="5" 表格格线内厚度

CELLPADDING=50 表格格线与内容之间的宽度

width=425 表格宽度

height=300 表格高度

borderColor=#841A00 边框颜色

bgcolor=#cc9968 背景颜色

background="图片地址" 背景图片。

(backgroun 背景图片,与 bgcolor 背景颜色不可同用。)




对一个用表格编成的图框的初步理解。


<table>

<tr>

<td>

插入内容

</td></tr></table>


*************************



<table 在这里面编入各项表格属性内容和参数>

<tr>表格的第一行

<td>表格的第一列(行和列构成一个单元格。)

插入内容

</td></tr></table>表格双标签的结束句。



****************************


一张在表格标签内只加入表格边框厚度,表格宽度和高度的空图框,代码如下:


<table border=3 width=400 height=250>

<tr>

<td>

</td></tr></table>




效果显示:

插入内容


**********************************



在表格标签内编入表格边框的厚度border=;边框颜色borderColor=;背景图片地址background=;表格宽度width=;表格高度height=等五顶属性参数的图框代码:


<table border=10 borderColor=#fff000 background=http://bbs.muwen.com/fileuploaddir/4B398368667.jpg width=400 height=260>

<TD>

<TR>

<P align=center></p>

</TD></TR></TABLE>



效果显示:



****************************************


一张较完整的图框代码:


<table border=10 cellSpacing=8 cellPadding=5 borderColor=#fff000 background=http://bbs.muwen.com/fileuploaddir/4B398368667.jpg width=600 height=350>

<tr>

<td>

插入内容

</td></tr></table>



效果显示:


一张较完整的图框代码:

插入内容


可以在这张单层套装图框内插入文字和图片了。




在图框内插入文字和图片的代码:



<table border=10 cellSpacing=8 cellPadding=5 borderColor=#fff000 background=http://bbs.muwen.com/fileuploaddir/4B398368667.jpg width=600 height=350>

<tr>

<td>

<CENTER><BR><BR>
<font style=font:25pt face=华文行楷 color=fff000>

鲜花送给可爱的人

<IMG src="http://61.132.72.53/discuz/attachments/s8_GWe97YOxS7mQ.gif">

<BR><BR>

<img src="http://blog.lanyue.com/upload/user/58/386410_22232948.jpg"width=430 height=320>

<br>

继续插入。。。<br>

<br>

</font></td></tr></table></p>


效果显示:






鲜花送给可爱的人


图片制作,起步学代码 - bd2004 - 北斗七星的博客

图片制作,起步学代码 - bd2004 - 北斗七星的博客

继续插入。。。


 
  评论这张
 
阅读(66)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018