加载中…
个人资料
  • 博客等级:读取中…
  • 博客积分:读取中…
  • 博客访问:读取中…
  • 关注人气:读取中…
相关博文
加载中…
推荐博文
加载中…
谁看过这篇博文
加载中…
正文 字体大小:
如何自己动手制作背景框(二)——何使用插入文本框的功能(2007-09-16 00:57:48)
标签:艺术赏析 分类:装饰

 

如何自己动手制作背景框(二)

 

前两天发了 如何自己动手制作背景框(一)》,发了以后,觉得自己在做一件赶鸭子上架的事。

以前也有朋友来问我有关美化博客方面的问题,起初也是在博客上留言里来来回回的一问一答,但是觉得不方便。后来干脆到MSN聊天室用音频对话,大家都坐在电脑前,打开相同的界面,然后我这边怎么说,那边荧屏前就怎么操作,很容易就上手了,几近于面授。而现在要在纸上谈兵,有些操作需要做截图,才能比较直观一点。要把自己会做的东西通过书面语言和一些图解表达出来,有些细节的地方还要考虑周到。所以第一篇写了以后,就觉得不是一件轻松的事。不过得到了很多博友的鼓励。特别是梦雅在留言中提醒我要加上很重要的一条,真的很感谢她。有大家的支持和鼓励,我就再接着写吧,通过写,也是一个自己学习的机会。 

 

 
今天想介绍一下如何运用“插入文本框”这个功能,就已我上面这个边框为例。在背景素材里,有很多漂亮的横条背景,一般在左边有一个饰图,不适合在上面写字,而要把文字写在饰图右边的空白处,如果每行字都要用空格键推到空白处,那就比较麻烦。这就需要运用文章编辑框右上角的“插入文本框”功能。
 
我们先用第一讲的代码做好外面的边框。
 
<TABLE style="WIDTH: 480px; HEIGHT: 60px" borderColor=#467500 cellSpacing=2 cellPadding=1 align=center background=http://blog.lanyue.com/model/luntan/upload_pic/1308430.jpg border=5>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
 

 
  
 在边框内点上光标,然后点击文章编辑框右上角的“插入文本框”(见左图),就出现下面的效果。

 
 
 我选的这张背景图,左边有图饰,因此文本框要靠右,
 操作方法如下:
 把鼠标放在文本框任何一个角的位置上,会出现一个带箭
 头的十字图标,这时按鼠标左键,文本框
 四周会出现会出现八个小方块。接着点击
 文章编辑框上方的右对齐图标 见右图),
 就会看见如下效果。 

 

 
 
文本框还偏长,要把它拉到理想的位置,做如下操作: 
把鼠标放在左面中间那个小方块上,会出现一个双箭头,然后按住鼠标左键向右拉,到您理想的位置即可,如下图。

 
 
在任意位置单击鼠标右键,即可去掉小方块,如下图,现在可以在文本框输入文字了。
请在文本框输入文字
 
 

这时候您在“显示原代码”前打钩,进入代码状态,就会发现又多了如下一段文本框代码:
<TABLE style="BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 65.72%; BORDER-BOTTOM: #999 1px solid; HEIGHT: 22px" align=right>
<TBODY>
<TR>
<TD>请在文本框输入文字</TD></TR></TBODY></TABLE>
 
我们解读一下这段代码:
这段代码主要是对四条文本框边的设置。我用四种颜色表示这四条边,每条边的开头指明是哪条边,后面是撒播个相同的元素,即文本框的颜色、宽度和样式。以第一条红色代码为例:
一、BORDER-RIGHT:是指右边框,BORDER是边框,RIGHT
                 右。上、下、左三条边只要把后半
                  分改成TOP、BOTTOM和LEFT即可。
 
二、#999:是文本框的颜色,可以选择与图片协调的颜
          色。下面是几个颜色代码的地址,颜色代码一
          般都是一个#号与六个数字与字母的组合(有
         数例外)     
三、1px:文本框的宽度,可根据需要自行调节 px 前的
        字。数字越大,边框越宽。
四、solid:文本框的样式。
 
介绍几种常用的样式:
单线框(solid),点状框(dotted),
虚线框(dashed),双线框(double),
把这些样式的字母替换到代码里,就会产生不同的效果。
 

 

单线框(solid) 

 

 
 
 

 

点状框(dotted)

 

 

 

 

虚线框(dashed)

 

 

 

 

双线框(double)  

 

 

 

 

外边框宽度border=0,所以外边框不显示,

颜色=#c4e1ff,

点状框(dotted) 

 

 

 

 

 

外边框宽度border=0,外边框不显示,

文本框只显示左右两条边,上下两条边的宽度设置成0px,所以不显示,

颜色=#c4e1ff,

双线框(double) 

 

 

 

 
 
总之,一段代码里的各种元素,您可以根据您的喜好来进行修改。一条代码由于元素的参数改变,就可以得出无数种的效果,其中总有一款您满意的。
 
阅读 评论 收藏打印举报
已投稿到:
加载中,请稍候......
  • 评论加载中,请稍候...

验证码: 请点击后输入验证码 收听验证码

发评论

以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

新浪BLOG意见反馈留言板 不良信息反馈 电话:95105670 提示音后按2键(按当地市话标准计费) 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

新浪公司 版权所有