Jimdo网站的美化 - Jimdo博客内容的排版

      Jimdo这个平台,如大家都知道的,有很多缺点。在排版时,很多地方都受制于它的功能 - 也就是只能添加Jimdo元素,而不能代码调用,如“博客显示”、“RSS Feed”等。这样,在内容排版上,就有很大的局限性,所以,Jimdo网站给人的印象就是比较呆板。其实,在Jimdo上是可以任意使用“Widget/HTML”元素的,所以,在写博客或编辑内容时,还是具有相当大的自由度的。

      以博客为例,除了添加文本元素以外,还可以“图文混排”,以及别的Jimdo元素,其实,在Jimdo上更可以添加“Widget/HTML“元素。这里有个问题,很多朋友,一般都是顺序添加,也就是一个一个元素添加,而不注重排版,这样肯定影响页面的美观。

      其实,在页面上编辑的内容,我们都可以将它们转化为HTML代码的,然后再通过“Widget/HTML"功能对它们进行重新排版。文本也是这样,以上面的两段文字为例,我们试一下效果。

     Jimdo这个平台,如大家都知道的,有很多缺点。在内容编辑方面,很多地方都受制于它的功能-也就是只能添加Jimdo元素,而不能代码调用,如“博客显示”、“rss feed”等等,这样,在内容排版上,就有很大的局限性,所以,很多Jimdo网站看上去显得比较呆板。其实,在Jimdo上是可以任意使用“widget/html”元素的,所以,在写博文或编辑内容时,还是具有相当大的自由度的。

      以博客为例,除了添加文本元素以外,还可以“图文混排”,以及别的Jimdo元素,其实,在Jimdo上更可以添加“Widget/HTML“元素。这里有个问题,很多朋友,一般都是顺序添加,也就是一个一个元素添加,而不注重排版,这样肯定影响页面的美观。

      以上我们通过简单的代码,将两段文字由纵向排列,改成了横向排列,这样页面看上去就多了一些变化,不再那么呆板。它的实现方法是:

      一、在编辑文本时,当一段文字输入完成后,我们点击工具栏上的“MTHL”,如右图。

      二、点击后,它会打开HTML编辑器,我们可以选取全部内容,将它复制到字处理软件,如记事本里,它就是这段文字的HTML代码。以此类推,别的段落文字也这样做,就会得到几段文本的HTML代码。

      三、按本站以前介绍过的Jimdo网站上多个元素如何横向排列,将这几段文字代码放到一行多列的表格里,就实现了文字段落的横排了。

      有朋友可能会说,表格排版是过时的技术了,而且影响搜索引擎对内容的收录。其实,只要表格的嵌套不是太复杂,应该是没有什么影响的。

      当然,除了表格排版以外,使用UL列表,或者CSS的浮动技术,都能实现多种元素的模排。比如:

<div style="float:left;  width:300px; ">

HTML代码1

</div>

<div style="float:right; width:320px; ">

HTML代码2

</div>

      以上代码中,“HTML代码1”左浮动,“HTML代码2”右浮动,只要二者的宽度值不大于版面的宽度,也能实现横排或混排的效果。以上代码的效果如下:

HTML代码1
HTML代码2

 

      以下是用浮动代码实现的文字和广告的混排实例。

     “Jimdo这个平台,如大家都知道的,有很多缺点。在内容编辑方面,很多地方都受制于它的功能-也就是只能添加Jimdo元素,而不能代码调用,如“博客显示”、“RSS Feed”等等,这样,在内容排版上,就有很大的局限性,所以,很多Jimdo网站看上去显得比较呆板。其实,在Jimdo上是可以任意使用“Widget/HTML”元素的,所以,在写博文或编辑内容时,还是具有相当大的自由度的。”

     “以博客为例,除了添加文本元素以外,还可以“图文混排”,以及别的Jimdo元素,其实,在Jimdo上更可以添加“Widget/HTML“元素。这里有个问题,很多朋友,一般都是顺序添加,也就是一个一个元素添加,而不注重排版,这样肯定影响页面的美观。”

      它的代码是:

<div style="float:left; width:660px;">
    <div style="float:left;">
       左侧广告代码
    </div>

    <div style="float:left; padding-left:10px;width:375px;">
        右侧文字代码
    </div>
</div>

      总之,方法是多种多样的,主要是怎么灵活和合理运用的问题。写作本文的目的当然不仅仅说明文字的排版,凡是可以用HTML代码来表达的元素,都可以这么做。比如,将各种各样的广告代码插入到文章中,等等。

Write a comment

Comments: 14
  • #1

    淘宝600家园 (Thursday, 14 October 2010 01:36)

    呵呵,第一个过来了~~~~

  • #2

    网上邻居 (Thursday, 14 October 2010 01:41)

    呵呵,这篇是看你网站的留言回复后写的,没想到你也同时写了一篇。

  • #3

    淘宝600家园 (Thursday, 14 October 2010 01:43)

    呵呵,和我那篇“关于在Jindo网站博文中插入广告的方法”是一样的,不过你的更详细~~~~~

  • #4

    3m3 (Thursday, 14 October 2010 10:27)

    是不是把div css代码吃透就可以随意美化网站

  • #5

    网型网秀 (Thursday, 14 October 2010 17:49)

    好东西,又来学习了!

  • #6

    网上邻居 (Thursday, 14 October 2010 22:16)

    3m3:你好!
    掌握div css肯定有用,但是也不一定要吃透,懂得基本的知识就有用了,我现在就是初学者。

  • #7

    网上邻居 (Thursday, 14 October 2010 22:19)

    网型网秀:
    太客气了。对了,你的Jimdo怎么不更新了?

  • #8

    138photo (Friday, 15 October 2010 06:30)

    这文章好 好象比乾坤大挪移好用

  • #9

    1980网络技术 (Friday, 15 October 2010 22:01)

    不错的方法,学习了!!

  • #10

    Suitear (Friday, 15 October 2010 23:51)

    其实这些东西,刚开始玩的时候就有做过,我本来打算分享的,可是Jimdo潜在用户并不多。也没打算写了!相信我Php不能改动是永远的痛!

  • #11

    石家庄神行动漫设计有限公司 (Friday, 28 January 2011 22:23)

    受益!谢谢

  • #12

    kissmemydear (Wednesday, 11 May 2011 16:44)

    前几天做了一个网页布局,有时间,你帮我看看,我还有很多地方不太懂,请赐教!

  • #13

    网上邻居 (Wednesday, 11 May 2011 19:03)

    kissmemydear:你好!
    做的很漂亮。要说不足,兼容性上有一点问题,你可以用Firefox浏览器看一下,页脚部分需要修改一下。

  • #14

    Gucci iPhone 6S Case (Monday, 11 April 2016)

    The devices were taken during investigations of attempted murder, child sexual abuse, sex trafficking, child pornography, assault, robbery, identity theft and other crimes.