企业网站建设

建站知识

今日已发布信息: 400236
累计注册用户: 102183369

测试文章,学习BOLG写法中

行内样式 在源代码

概述: 复制粘贴到文本编辑器(不论是记事本、还是VisualStudio中),将没有换行,而是成了长长的一行。日后如果想整理博客文档,就会很不方便。 为此,反正现在51cto中的渲染效果就那么差,不如简单点,干脆就用div中包含一个pre加上几个简单行内样式显示算了。为了变换尖括号等成为实体,可以借用Live Writer中syntaxhighlighter插件,生成后手工在源代码中修改一下。

我想追求的目标:让博文的排版看起来简洁、淡雅,而不是杂乱无序。

可惜的是:一般而言在线编辑的功能总是有太多的限制,所以只能就简,根据这两天对51cto博客编辑器的了解,规划如下排版的约定,用尽可能简单的手段达到较为满意的结果。

1. 关于程序源代码的格式控制

一看就知道,51cto中使用的是fckeditor编辑器,该编辑器下其实可以集成syntaxhighlighter,动态在DOM内存中生成语法渲染的代码显示。

而现在51cto的编辑器实在是做得很低劣,可能由于安全的原因还不让用style(因为style中是可以搞点js代码的!),这使得我无法用Live Writer中InsertCode代码插件,该控件使用嵌入样式。使用其他一些插件可以生成行内样式,不过是在是太臃肿难看了,简直无法忍受。怎么办呢?

网页中源代码的语法渲染显示,其实最佳的方式就应该是syntaxhighlighter中的js实现方式。其他的纯样式实现(不论嵌入还是行内)面临的一个比较倒霉的问题是:在网页中选中代码部分的文本,复制粘贴到文本编辑器(不论是记事本、还是VisualStudio中),将没有换行,而是成了长长的一行。日后如果想整理博客文档,就会很不方便。

 

  无锡快速建站  投资理财   今日推荐免费建站   分类信息   上海网站建设公司

 

为此,反正现在51cto中的渲染效果就那么差,不如简单点,干脆就用div中包含一个pre加上几个简单行内样式显示算了。为了变换尖括号等成为实体,可以借用Live Writer中syntaxhighlighter插件,生成后手工在源代码中修改一下。

2. 文章篇章结构的控制

文章中的标题一般就使用h3/h4两级,标题如果需要编号,也不使用<ol>。

段落使用<p>,不使用缩两格,因为若用两个空格上传时会被过滤掉,而使用行内样式又太麻烦了。

一般情况下应该不使用<br/>和换行,文章中插入图表时,应该放在单独的<div>中,图的正上方和正下方的标题说明放在单独的<p>中,而不是用<br>换行。在div中设置水平居中,让图和文字居中显示。

对于需要强调文本使用<bold>即可,不需要设置过于花哨的颜色、字体的变化。

列表:只需指定编号和标记即可,目前直接使用ol和ul时,什么前缀都不显示,不太好看。

表格:合理使用表头、表尾、标题等标记即可,至于样式只需要边框线折叠和颜色设为灰色即可。

3. 关于图片和附件的存储

直接使用LiveWriter上传是很方便,用编辑器中的插入图片功能也很不错,但是这种方式生成的图片文件名可读性都很差,而且在Writer中还会丢失原始图片。对于附件有一个比较糟糕的问题是Writer的附件插件51cto不支持,本来在51cto中已经上传了附件,用writer编辑发布之后,附件的连接就不见了,估计文件还在,但是记不清url,也没办法在正文中建立连接了。

其实我自己原来改写过fckeditor的源代码,可以解决这些问题的,当时是在asp.net下做的,而51cto是用php搞得,不知道好不好改。

为了完全掌控图片和附件,我决定采用我在Windows Live帐号中的文件存储功能。自己手动建立连接。

4. 博客文章的个性化

整篇博客放在一个<div class=&rdquo;ruandao&rdquo;>的标记中,在改div中统一设定一些样式,比如背景,行间距,首行缩两个,字体颜色等等。

一般来说,可以直接在编辑视图中写,只要不随意乱点格式控制,切换到源代码视图后结构还是很清晰的,这时直接在源代码窗口中也可以放心的直接用标记编辑,而且Writer编辑按钮在源代码视图中也是可以工作的。

 

http://www.kvov.com.cn/jzxx52130.html