斗龙战士动画片第四季:跟着教材学做边框

2011-07-22 07:28:16|  分类：装潢博文区域 |  标签： |字号大中小
丽人1969
1、表格的制作（第一层边框）
1.点开"插入表格"图表(这个是插入表格按钮.)
2.将"边框粗细"设置10
3.选择边框颜色 =#1169ee
4.选择背景颜色=#b0bef9
5.按确认键
看效果~~~~~~~~~~~~这是第一层表格第二课 在表格中添加文字和图片
添加内容
输入文字后
按换行键
选中文字居中
编辑栏下面有一组设置,你看一下,在以后编辑中常用到:
"Design"是设计状态, "VIEW"是预览状态, "HTML"是代码状态
2、学习修改表格的宽度
先我们做的第一层边框,(进入HTML看代码)




现在我们将width="100%"宽度改width="60%"




3、制作两层边框
这是上面我做的第一层




现在我们做第二层，方法跟1层一样。
添加内容
我们将两层添加在一起，看是什么效果。
方法：用鼠标选中你做的边框，点右键复制，在第一层边框中粘贴上，跟文字粘贴一样
添加内容
添加内容
添加内容
简单吗？
代码：




等你会做了再教你在代码中添加边框
怎样添加表格呢?
鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最靠左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,做成一个5层边框如下:
能看明白吗?
鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最靠左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,
退出空格还有一种方法:你进入"HTML"是代码状态.将将  这种空格码删除掉.
你进入代码中,将  这种空格码去掉
颜色代码：
http://xz1.2000y.net/831437/index.asp?xAction=xReadNews&NewsID=169
点击进入，自由选择
制作多列行表格:修改行列数字.
2行:
内容内容
代码:

内容

内容

4行:
内容内容内容内容
代码:

内容

内容

内容

内容

2列:
内容内容
代码:

内容

内容

5列:
内容内容内容内容内容
代码:

内容

内容

内容

内容

内容

行列合并,2行2列
内容内容内容内容
代码:

内容	内容
内容	内容

8行3列:
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
代码:将空格码删除掉,太多我就不一个个的删除了,你做时一定要在代码中删除空格码然后再添加内容.


































第二课 在表格中添加文字和图片
上一课我们学习了怎样制作表格和熟悉在HTML模式下看自己做表格时自动形成的代码，结合上一课的基础我们来学习如何在表格中添加文字和图片
先制作表格:
代码:




我们将边框粗细设置15（border=15）、单元间距设置为20（cellSpacing=20 ）、单元边距设置2（cellPadding=2）
一、在表格中添加文字
1、用鼠标点表格的中间处，你看到光标在闪动，这时你就能写入文字了，也可以复制粘贴文字。
2、编辑表格中的文字
将鼠标放到表格中文字的最前面，点击，然后横拖鼠标选中，你看到字的背景颜色是蓝色时你就可以操作了。
3、编辑文字
居中：点居中图标
字体：选择你喜欢的字体，有很多选项
字号：论坛中的编辑器是数字越大字也就越大。
字体颜色：点开A自由选色，满意为止
4、我们现在要在表格中输入“寂寞时上网来看我”看编辑效果：
寂寞时上网来看我
寂寞时上网来看我
寂寞时上网来看我
寂寞时上网来看我
代码：

寂寞时上网来看我

二、在表格中插入图片
插入图片方法有三种：
1、直接插入法。将鼠标放在你选好的图片上，点右键，复制然后粘贴到你的表格中，看效果：
粘贴图片

2、用编辑器插入法
选择好图片，将鼠标放在图片中点右键，点属性，复制图片地址；在编辑器里点开“插入图片”图标，将你刚复制过的地址粘贴到信息栏里，按确定，看是下面的格式。
[*IMG]http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_3.gif[/IMG*]
[*IMG]http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_3.gif[/IMG*]
你做时将*字去掉
看效果

3、在html格式下插入图片代码及图片地址
帖图基本格式如下：
<*IMG src="图片连接URL地址"><*IMG> 称图形标记，主要用来插入图形标记。
方法：在表格中输入“内容”两字，点开html将你编辑好的代码及图片地址粘贴上，
看代码：

内容

内容
我们现在添加代码和图片，你做时去掉*符号

<*IMG src=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_4.gif><*IMG>

居中很重要！鼠标点图片按居中键
在代码中添加高度代码与设置背景宽\高:




图片
<*IMG> 的一般参数设定：
例如 <*img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，
width=100 height=100
设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）
hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间， 是设定图片上下的空间，高度采用 pixels 作单位。
border=2
图片边框厚度
align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、 左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字 将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。
lowsrc="pre_logo.gif"
设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低 解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。
例1：
原代码：
<*IMG border=0 height=92 src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130>　普通插入
普通插入

代码：

<*IMG border=0 height=92 src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130>

例2：
<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130 height=92 border=0 hspace=10 vspace=20"> 设定上下左右空白位置
设定上下左右空白位置

代码：

<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130 height=92 border=0 hspace=10 vspace=20">

例3：
<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130 height=92 border=4 align=middle>设定图片中间对齐，边框厚度为 4
设定图片中间对齐，边框厚度为 4

代码:

<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130 height=92 border=4 align=middle>

例4：
<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=180 height=152 border=0> 放大了的图片
放大了的图片

代码:

<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=180 height=152 border=0>

例5：
<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130 height=92 border=0 align=right>设定图片靠右

代码:

<*img src="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width=130 height=92 border=0 align=right>

居中插入:

代码:






图片缩边添加法 :
将做好的边框修改边距,我将边距和间距都设置为0cellSpacing=0 cellPadding=0边框粗细设置10 将表格的宽度设置width="60%"
修改过的代码:

看我做的
看我做的


（第三课)常用参数识别
常用参数识别
如下：

帖子内容，文字或图片.....

的参数设定（常用）：

注解：
width="100"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。
border="1"
表格边框的厚度，不同浏览器有不同的内定值，故请指明。
cellspacing="2"
表格格线的厚度
align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center
valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。
background="myweb.gif"
表格的背景图片，与 bgcolor 不要同用。
bgcolor="#0000FF"
表格的底色，与 background 不要同用
bordercolor="#CF0000"
表格边框颜色
bordercolorlight="#00FF00"
表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
cols="2"
表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。
贴图格式帖图基本格式如下：

称图形标记，主要用来插入图形标记。
的一般参数设定：
例如
src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行已久，后者则由 96 年开始发展， 于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称，否则 必须加上正确的路径，相对或绝对均可。
width=100 height=100
设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）
hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间， 是设定图片上下的空间，高度采用 pixels 作单位。
border=2
图片边框厚度
align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、 左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字 将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。
lowsrc="pre_logo.gif"
设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低 解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。
1\HTML 标记一览
● 文件声明 让浏览器知道这是 HTML 文件
● 开头 提供文件整体资讯