浅。┊水未深┊ » ┆网页┆.︷.. 茜。弥若兰 .. » OBLOG模板简单做

查看完整版本: OBLOG模板简单做

某疯 2008-4-27 09:36

OBLOG模板简单做

呐。这个是自己写的。首发自己的破坛子。除了浅不会再发其他地方。所以。勿转勿翻。
写的比较粗糙。囧

[b][color=red]如何插入表格[/color][/b]
[b][color=red][img]http://pic.yupoo.com/kayle/981685774e01/la3c8snh.jpg[/img][/color][/b]
[b][color=#ff0000]----------------------------------------------------------------------------------------------------[/color][/b]
使用表格需要注意的几点:

如果不需要间隔边框,请记得填上0.

在表格中,插入后观看代码.会发现 table tr td 字样.
其中,table是行,td是列，tr虽然没有什么，但是不能省略.

表格的居中很简单,只需要将鼠标点中表格,在属性框中的水平下拉列表中-居中对齐.

某疯 2008-4-27 09:38

插入图片与页面背景

[img]http://pic.yupoo.com/kayle/667235774ed8/4jnllqx0.jpg[/img]

某疯 2008-4-27 09:40

表格合并灵活运用

[img]http://pic.yupoo.com/kayle/108175774f50/08dcc3u7.jpg[/img]

某疯 2008-4-27 09:43

初步制作oblog skin

oblog中.我们要先了解以下标签的用途.

$show_login$ 登陆
$show_placard$ 公告
$show_subject$ 文章分类
$show_newblog$ 最新更新文章
$show_comment$ 评论
$show_newmessage$ 留言
$show_search$ 搜索
$show_links$ 链接
$show_info$ 站点信息
$show_log$ 体现副模板的正文部分

-----------------以上是主模板常要用到的代码------------------

$show_topic$ 日志标题
$show_loginfo$ 日志信息
$show_logtext$ 正文
$show_more$ 更多信息

-----------------以上是副模板常用到的代码---------------------

这个代码被称作标签.在后台改模板时可以点击查看更多标签.

------------------------------------------------------------------------------------------

顶图跟底图这里不作具体说明.通过前5课的学习应该都会制作.这里详细说如何作中间部分.

依然以分栏为例.

中间部分可以先制作一个表格.假设我们要制作的这个模板有登陆,分类,更新3个部分.

那么,我们的表格就需要2列,6行.

将右边部分的表格合并.打上$show_log$

在左边部分的6行表格.分别打入相关信息.

登陆
$show_login$
分类
$show_subject$
更新
$show_newblog$

图示如下：
[img]http://pic.yupoo.com/kayle/898145774faa/x8af8c53.jpg[/img]
副模板部分更容易，根据自己需要，制作表格。这里我制作一个1列3行的表格。宽度跟主模板$show_log$代码部分宽度一致。

分别在表格中输入相关信息。

$show_topic$
$show_logtext$
$show_loginfo$ | $show_more$

图示如下：
[img]http://pic.yupoo.com/kayle/308955774faa/18pt5a80.jpg[/img]
这样内容就可以显示出来。美工方面这里就不做多介绍，需要自己动手摸索。

[img]http://www.losepark.com/bbs/images/easy/attachimg.gif[/img]

某疯 2008-4-27 09:47

简单认识认识DIV+CSS

参考前面，制作一个有顶图，有底图，并且是左右分栏的表格。

然后，

DIV+CSS是现在被广泛运用的，它比表格方便，一眼就可以查出错误所在，但是也有它自身的不足。对非IE内核的浏览器支持不好。

上课我们的作业是制作一个规格表格。制作得过程大家应该记得。

如何用DIV+CSS实现那个表格的布局？

代码如下，请COPY在DW中观看。自己感觉一下，加在<body></body>中[code]<div style="width:500px">
<div style="width:500px;height:200px"></div>
<div style="width:200px; height:300px; float:left"></div>
<div style="width:300px; height:300px; float:right"></div>
</div>[/code]其中style="xxxxxxxxx"是属于CSS部分，可以直接跟在后面加，也可以对各部分命名完以总写在<style type=text/css></style>中。<style></style>是加在<head></head>中。

------------------------------------------------------------------------

代码分析，这里先说明以下，DIV+CSS是从上到下，从左到右的顺序。

<div style="width:500px;height:200px"></div>
宽500px，高200px，对应的就是要放顶图的部分。

<div style="width:200px; height:300px; float:left"></div>
宽200px，高300px，浮动于左边。如果已第四课的作业为例，则是需要写个人介绍的地方。

<div style="width:300px; height:300px; float:right"></div>
宽300px，高300px，浮动于右边。如果已第四课的作业为例，则是需要配文的地方。

而最外面的<div style="width:500px"></div>

只是将下面的3个进行镶套。

某疯 2008-4-27 09:52

常见问题以及解决方法

问:为什么不能连续用多个空格?
[img]http://pic.yupoo.com/kayle/348355775171/dwm11uek.jpg[/img]

---------------------------------------------------

问:我做的是分栏.侧栏部分一个表格一个表格的输入相关对应标签代码.为何用了以后侧栏部分文字会随着正文部分的变化而自动居中?

答:首先.见图1.直接用表格生成的代码.通常会碰见侧栏随正文部分的改动而居中.
[img]http://pic.yupoo.com/kayle/230425775171/b4zrz7zg.jpg[/img]
这是这个表格的代码:[code]<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="128">评论</td>
<td width="272" rowspan="4" valign="top">$show_log$</td>
</tr>
<tr>
<td>$show_comment$</td>
</tr>
<tr>
<td>更新</td>
</tr>
<tr>
<td>$show_newblog$</td>
</tr>
</table>[/code]将标签代码部分的前后加上<div></div>.注意以下代码的红色字体部分.[code]<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="128">评论</td>
<td width="272" rowspan="4" valign="top">$show_log$</td>
</tr>
<tr>
<td> <div>$show_comment$</div> </td>
</tr>
<tr>
<td>更新</td>
</tr>
<tr>
<td> <div>$show_newblog$</div> </td>
</tr>
</table>[/code]加好以后.合并侧栏部分的所有表格.效果见图二.
[img]http://pic.yupoo.com/kayle/001875775172/b1rjm8cy.jpg[/img]

最后全选中侧栏部分文字.属性栏中垂直-居顶.见图三
[img]http://pic.yupoo.com/kayle/619385775173/rbege4pw.jpg[/img]

问:除了用空格排版文字,还可以用什么方法?

答:还可以用代码进行排版.以下是相关代码.

padding-right:
padding-left:
padding-top:
padding-bottom:

margin-right:
margin-left:
margin-top:
margin-bottom:

冒号后面跟数值.比如:<div style="padding-right:20px">$show_comment$</div>

建议使用padding-填充.

padding-left 离左边多远
padding-right 离右边多远

它会自动填充,而文字会自动转行.可以解决侧栏与正文之间太近的问题.当然.用表格间距一样可以解决.

----------------------------------------------------------------

问:我是做固定背景.如何将滚动条放在背景的一个区域部分.而不是浏览器最右边?

答:在相应位置代码CSS处加上overflow:auto.见下面的代码.注意红色字体部分.[code]
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="128">评论
<div style="padding-right:20px">$show_comment$</div>更新
<div>$show_newblog$</div></td>
<td width="272" valign="top" style=overflow:auto>$show_log$</td>
</tr>
</table>[/code]建议这么加.[code]
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="128">评论
<div style="padding-right:20px">$show_comment$</div>更新
<div>$show_newblog$</div></td>
<td width="272" valign="top"> <div style=overflow:auto>$show_log$<div> </td>
</tr>
</table>[/code]

[[i] 本帖最后由某疯于 2008-4-29 21:07 编辑 [/i]]

某疯 2008-4-27 09:53

问题回答贴(跟贴的内容将在此贴回答)

[b][color=#ff0000]问题回答贴(跟贴的内容将在此贴回答)

[/color][/b]副模板是什么?

副模板与主模板是分开的.主模板的$show_log$就是整个副模板的部分.不过是分开制作.

°浅︵湮若 2008-4-27 11:25

这是用什么软件写代码的？？

Aviva.L 2008-4-27 11:34

- -根据我的不完全科学猜测应该就是DW自己生成的代码

某疯 2008-4-27 12:02

嗯。DW

熟悉DIV+CSS以后可以空写代码。

菲。嗣语 2008-4-27 12:33

我先照这个去看看不懂的再来问

慕。 2008-4-28 22:15

MJmj05gif
猪乐我崇拜你。

dreamland 2008-5-3 18:48

MJmj19gif 看的我自己就很抽抽.

天下 2008-6-3 22:35

啊~~~真是好物啊~~~就連我這個電腦小白也看懂了~~~~~

tt。 2008-6-14 13:08

疯子同学。那个~ 做模版用的是什么软件？

某疯 2008-6-15 00:35

Dreamweaver

亂宇 2008-6-17 11:57

自己PS 不好 CSS 到会自己也能写出来要PS 好的话偶自己就做风格老· {哭}

ヽ莫柒柒。 2008-7-6 01:19

额。
好迷糊。
看的眼花呢。

堇斯年 2008-7-9 16:17

好复杂.不过我一定要学会.

堇斯年 2008-7-10 23:53

想问下。日志主题的字体是不是在属性里直接改就可以了？

[[i] 本帖最后由堇斯年于 2008-7-11 00:09 编辑 [/i]]

页: [1] 2 3

查看完整版本: OBLOG模板简单做