TOISP项目总结

——2011.06 第一个项目

2011年6月，一次偶然的机会，跟计算机专业的其他高手组成一个团队接受做院一教授发下来的项目，确实偶然~

同年四月份开始接触网页设计，那时候的不确定因素很多，为给自己多些选择所以有了两手准备，即前端工程师和视觉设计师。Photoshop，HTML，CSS，因为有相同方向师兄和同学的帮助，上手的速度快了很多，少走了许多弯路。

技术这东西，说白了光看书真的没效果，甚至是完全没效果，边看边忘，于是PS的进步很快而网页重构还是一直停滞不前，以至于萌生了就走设计的路放弃前端的想法。后来跟朋友谈及做设计这事，又觉得搞设计，计算机出身的肯定拼不过那些美院的专业生，刚好在这进退两难的时刻接到了TOISP这个项目，抱着一种尝试的心态，也算是给自己一个超越这段时间低迷状态的机会。

学了两个月的知识终于派上用场，而第一次就接手一个包揽从页面设计到页面重构的项目，着实压力大。设计还比较顺利，对PS的操作在训练了九十多幅作品熟练了不少，反观重构，第一天单单一个表单就耗了一整天。接下来的页面逐渐上手起来，整个框架搭好差不多用了二十天，经验的缺乏，导致代码很不规范，重复，多余的代码很多，一个页面拿起来就埋头苦敲，整体布局没有规范好，后期的修改实在艰难。

很多技术要点，都是在需要用到的时候查书或者百度来的，再次证实了光看书没用的说法，那么多的知识点靠背是记不住的，还是要在实战中不断理解不断加深印象。

经过这一个项目，就刚开始代码重构那几天，明显感觉自身能力有了很大提高，很明显的感觉，虽然现在再去看那时的代码会觉得是那么的菜鸟，但有进步，就足够了。浏览器的兼容性是这次重构遇到的最大问题，特别是IE6，那个时候开始就对IE6深恶痛绝，明明在很多浏览器上能正常使用，唯独IE6会有或多或少的缺陷，恰巧IE6在中国市场中的份额目前来说依然保持最高，没办法还得迁就IE6。

请狠狠的用鼠标敲击：Demo_TOISP                 请注意：这个Demo在IE8及以下的浏览器不能正常显示

TEDxGDUFS网站

——2012.01 第二个项目

寒假拿到了一个小项目，相对于TOISP确实小了很多，纯粹的页面重构，不用设计，而且页面数量也只有六七张。有了之前的经验，这次的操作熟练了，不管HTML还是CSS都严格遵循W3C标准。先搭好Html框架，确认没什么问题后再套上样式表，改变较大的是CSS里面代码的编排，采用紧凑型分块，打好注释。下面是这次重构过程中发现的一些之前没注意的要点：

background:url(../images/search.png) no-repeat; IE8恶心的bug，no-repeat前面必须有空格，不然图片显示不出

行内元素必须设置为block，text-align:center才有效

border:none; text-indent:-999px;用来把按钮取消并隐藏文字，但ie7中会把图片也取消，要加上 display:block;

请狠狠的用鼠标敲击：Demo_TED            请注意这个Demo在Chrome中首页的图片被自动隐藏了，至今原因未明

未来一两个月内暂定计划

两个项目过去，发现实战训练还远远不够，特别是javascript一直没有真正实战。看了两个星期的HTML5和CSS3，有些了解，不过也只是达到了解这个层次，加之目前这两个新兴事物还没有全面普及，还是要先搞定主要任务，让javascript也步入正轨，对个人网站进行整改。

在div+css布局中，一般都这样来整体构架的：

<div id=”header”></div>
<div id=”center”></div>
<div id=”footer”></div>

而对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏：

<div id=”header”>
<div id=”title”>这里是网站的标题</div>
<div id=”nav”>这里是网站导航栏</div>
</div>

继续阅读

这是我总结多年的一个小文档，最近看见有人咨询浏览器兼容的问题，就贡献出来。

并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。

javascript部分

1. document.form.item 问题
问题：
代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行
解决方法：
改用 document.formName.elements["elementName"]

2. 集合类对象问题
问题：
代码中许多集合类对象取用时使用()，IE能接受，FF不能
解决方法：
改用 [] 作为下标运算，例：
document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]

继续阅读

今天闲着无聊冲浪~~~在小孙博客里面看到codecolor开启可视化编辑的操作方法~~~哈哈~捡到了~~~~转给大家~~~ 

我用的 CodeColorer 的版本是 0.9.9，开启方式如下：

在 codecolorer.php 文件中找到以下代码，将其启用即可。
// TinyMCE

// temporarily disabled

if (get_user_option('rich_editing') == 'true') {

add_filter('mce_external_plugins', array('CodeColorerLoader', 'AddTinyMCEPlugin'));

add_filter('mce_buttons', array('CodeColorerLoader', 'RegisterTinyMCEButton'));

}

开启后可视化界面如下：

是的，就是这么简单。装了CodeColorer代码高亮插件的童鞋们赶紧回去折腾吧。。

这两天看到了DOM这一部分，在submit和onsubmit上面纠结了很久~~~
google和百度了好久都没弄清楚这两者到底有什么区别，最后只好重新在W3C上面看回他们的定义~~
onsubmit：onsubmit 事件会在表单中的确认按钮被点击时发生
Submit：Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)
在 HTML 表单中

标签每出现一次，一个 Submit 对象就会被创建。
在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。
所以，有时实在想不清楚就回到起点看定义~~也许就豁然开朗~~~

继续阅读