http://fifty.pinbu.com  
 
  学代码自己做模板I
fifty 2007-12-18 4:25:54
希望对想自己做模板的同学有帮助:)

1. html常识
html是网页的基本语言,代码是英文,往往由头尾一对*代码组成,开头和结尾的符号分别是<></>。比如:
<table></table>
<tr></tr>
<span></span>

在pinbu,按回车键的话,代码默认为换段落的行为,转成符号就是<p></p>
比如,"输入A-回车-输入B",见到的效果是
A

B
代码为:<p>A</p><p>B</p>

如果想不要这么隔一行的换行,按shift+回车就可以:
A
B
代码:<p>A<br>B</p>

*所以html里也有单句代码,比如<br>这个换行的符号。

作业1:请写出这一段的代码
A

B

C
D

2. table / 表格
表格在做网页时几乎不能不用,用来排版(但表格不是唯一的排版途径)。
table代表表格:<table></table>
tr代表行/row:<tr></tr>
td代表列/column:<td></td>

对熟悉word的人来说,表格应该很好理解,比如这三个表格的代码分别是:

表格1:<table><tr><td></td></tr></table>

表格2:<table><tr><td></td><td></td></tr></table>

表格3:<table><tr><td></td><td></td></tr>
<tr><td></td><td></td></tr></table>

作业2:请写出这2个表格的代码

3. 表格的宽度&高度
宽度代码是width,高度是height,由数字或百分比来确定。

mollychicken的模板为例,先看她的博客的主体部分,可以说由三个列/column组成,列的宽度都固定不变:

这样的表格做出来的网页页面固定,不会因为浏览器缩放而变化:

我们照着来做一个这样的表格,表格总的宽度是1200pixel,第1列和第3列的宽度各为250,中间那列的宽度为700:

代码如下:
<table width=1200><tr><td width=250></td><td width=700></td><td width=250></td></tr></table>

注意:做这样的网页时,要考虑到浏览者用的电脑屏幕的分别率

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

我的模板主体部分其实也有三个列,只是最左边一列很窄:

和上面模板的区别是,浏览器缩放时,旁边两列宽度不变,但中间一列宽度可随之变化:

代码大概如下,把整个table的宽度定义成百分比,中间一列宽度不定义即可:
<table width=100%><tr><td width=20></td><td></td><td width=250></td></tr></table>

作业3:如果做这样一个表格,只有1行,只有1列,宽度800,高度300。代码是什么?

今天先写到这里了,收到三个问题的准确答案后,我才会勤奋地继续

  --(_~:>    阅读全文 | 回复(30) | 引用通告 | 编辑

 

  Re:学代码自己做模板I
songer 2007-12-22 15:17:37

作业1.

<P>A</P><P>B</P><P>C<br>D</P>

2.<table><tr><td></td><td></td>><td></td></tr></table>

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

3.还没研究透


以下为blog主人的回复:

都正确

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码自己做模板I
50(游客) 2007-12-20 15:43:56
以下引用luobu在2007-12-19 22:07:41发表的评论:

研究了一下.

表格1.<table><tr><td></td><td></td><td></td></tr></table>

2.<table><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr></table>


  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码自己做模板I
rebeccaxiao 2007-12-20 14:44:52

我先把页子收藏了,这段时间实在太忙了,都忘记了要来PINBU转悠,更别说仔细看和写了

看了个开头心里想着明天要交的方案,坐不住了,满有兴趣的,等我闲下来,跟50好好学习请教哈

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码自己做模板I
ximi 2007-12-20 9:42:30

第一题:<p>A</p><p>B</p><p>C<br>D</p>

第二题:<table><tr><td></td><td></td><td></td></tr></table>

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

第三题:

<table><tr><td width=800 height=300></td></tr></table>

请老师指教。


以下为blog主人的回复:

都对!

第三题,也可以写成这样,应该也是最逻辑的写法:
<table width=800 height=300><tr><td ></td></tr></table>

测试了一下,长、宽在table或者td里定义都可以,但不能在tr里定义。

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码自己做模板I
luobu 2007-12-19 22:07:41

研究了一下.

表格1.<table><tr><td></td><td></td><td></td></tr></table>

2.<table><tr><td></td><tr><td></td><tr><td></td></tr></table>

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码自己做模板I
luobu 2007-12-19 20:42:05

我好白痴啊~~~第二个表格的好难懂~~~

1.<p>A</p><p>B</p><p>C<br>D</p>

3.<table><tr><td width=800 height=300></td></tr></table>

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
child 2007-12-19 13:48:58

真复杂

我能看懂一部分。真是掉头发的工作

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
rhythm 2007-12-19 13:10:01
俺和菲菲是一个级别的,看着看着就要瞌睡了!下次多来几次,争取做个好学生吧!
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
天使菲菲 2007-12-19 10:20:39

我一定不是好学生~

因为看着觉得头昏~~老师不要嫌弃偶哈~

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
zoomy(游客) 2007-12-19 9:46:13

超强技术帖~

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
murasaki 2007-12-18 19:47:04
看着就晕。。。我还是用用现成的模板吧。。。或者50做好一个打包发给我,我直接套上就成?
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
pinkgrace(gezi)(游客) 2007-12-18 18:45:21

先占位,再慢慢学~

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
布里奇特(游客) 2007-12-18 16:12:46
是表格 有行就必定有列啊,哪怕只是一列,这下我记住了

以下为blog主人的回复:

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
布里奇特(游客) 2007-12-18 16:06:11
怪不得我在DW里测试第2个作业的那个表格总是出不来,我就想肯定是错了
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
sophiamm(游客) 2007-12-18 16:01:19

看的偶头发昏。

我搞模板的经验是:瞎弄!瞎鼓捣~~~摸着石头过河。。。。

呵呵!!

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
hheryuehua 2007-12-18 15:25:36

唉总是对着模板原码里的很多条语句猜啊猜,前阵子刚刚弄得日志不出声了,不知道哪句错了……

要是都像50介样深入浅出条理清晰地做教程,相信没有哪个看不懂了!

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
akira(游客) 2007-12-18 14:20:44

我那个尼亚拉瀑布汗50女王你真的做到了~~哈哈

我前几天才知道 在日记里或回复框里输"$show_***$ "一样有效 于是我就犯了个错误

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
mumucow 2007-12-18 12:51:46
高等学问。俺一时还搞不懂。
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
布里奇特(游客) 2007-12-18 11:25:32

作业3:

<table width=800 height=300><tr><td></td></tr></table>

我是不是很认真的学生呢?就是不知道对不对。


以下为blog主人的回复:

这个学生最认真

对!

但我觉得下面两种写法也可以:
<table ><tr width=800 height=300><td></td></tr></table>

<table ><tr><td width=800 height=300></td></tr></table>

(我的新电脑里居然还没dw,不能测试。)

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
布里奇特(游客) 2007-12-18 11:17:21

作业2:

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


以下为blog主人的回复:

第二个表格是:<table><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table>

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
布里奇特(游客) 2007-12-18 11:11:52
作业1:<p>A</p><p>B</p><p>C<br>D</p>

以下为blog主人的回复:

完全正确

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
心儿 2007-12-18 11:11:23
先谢谢50再仔细看.最近正在找这些宝贵的东西呢!
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
alicebaby11 2007-12-18 11:08:41
咬牙学~~~~~太科学了!
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
lalamimila 2007-12-18 11:00:59

5老师,俺试着先做了第1题,看看对不对?

<p>A</p><p>B</p><p>C<br>D</p>

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
doris(游客) 2007-12-18 9:11:00
我是这方面白痴...收藏起来过年回家好好研究.....终于能留言了0RZ~~不枉费我杀了300多个毒啊!!
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
藤萝架下(游客) 2007-12-18 8:54:38
需静下心来仔细研读!
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
athena 2007-12-18 8:50:59

看起来很深奥呢,学习一下哈

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
oile 2007-12-18 8:50:40

最近大家都好专业哦

我都懒的折腾模板了,怕搞坏,嘿嘿……

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
vivianhong 2007-12-18 7:17:04

偶得好好学学.

话说我一月底回德国,有啥要带的(与手工相关........) 从HILDESHEIM寄给你.


以下为blog主人的回复:

vivian太大方了,这么珍贵的公斤数还想到我们

唉......我什么都想要,结果什么都不要了 (也是不好意思麻烦你,你自己多带些喜欢的东西吧)

  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

  Re:学代码 自己做模板 I
vivianhong 2007-12-18 7:15:02
 沙发?
  --(_~:>    个人主页 | 引用 | 返回 | 删除 | 回复

 

发表评论:

    昵称:
    密码: (游客无须输入密码)
    主页:
    标题:

 


pinbu的短信功能有bug
↑ 用email给我留悄悄话哦 ↑

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

最新

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

评论

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

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

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


发送雅虎通信息给我吧 

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


 
Copyright &copy 2007 五0手工
生活文化馆 | 手工BLOG | 在线购物 | 手工加盟 | 手工教程 | 手工资讯 | 手工制作论坛 | 手工杂志