Blog

网页前端布局由table过渡到div+css，逐步在向web标准靠近。但不得不说的是，还有少许的前端制作人员认为在做布局的时候不用font标签之类的就算是web标准了，从而导致如今网上“div泛滥”，一看源文件，汗，除了div没其他标签了。。。 严肃滴说一句，这不叫web标准，这叫“div+css”——名副其实的“div+css”。 有些前端制作人员认为只要根据设计效果图，用“div+css”做出了完整的效果，且兼容各个浏览器，就没有问题了，但是却疏忽了web标准。这样的页面只是“看起来没任何问题”，因为人类是可以通过视觉的划分判断内容的语义，可是搜索引擎看到的只是代码——搜索引擎只能通过标签来判断内容的语义。 那么我们为什么要注重语义呢，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。 其实所有的标签都是有语义的，例如： div 语义：Division（分隔） ol 语义：Ordered List（排序列表） ul 语义：Unordered List（不排序列表） li 语义：List Item（列表项目） hx 语义：headword（标题） p 语义：paragraph marks（段落标记） span 语义：Span（范围） ………… 其中，值得重点提及的是h标签，h标签的语义是标题，搜索引擎对这个标签比较敏感，特别是h1,和h2。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要h1,h2,h3,h4这样推下来，不要h1,h3,h4，漏掉h2。一个结构良好的网页，h标签可以组织起一个网页的大纲。 仅有div标签构成的页面一点语义都没有，搜索引擎根本看不懂，那样的话搜索引擎对你网站的流量一点帮助都起不到。所以，要记住： 结构(html)才是重点，样式(css)是用来修饰结构的。先确定html，再确定标签，最后来选用合适的css，使页面尽可能达到完美。

接触magento已断断续续有半年之久，作为一个美工，一路走来可谓体会颇多，酸甜苦辣了然于心。今天生一念想，决定将自己的所学加以整理，与大家分享，尤其希望对magento新手有所帮助和鼓舞。 我想刚接触magento的朋友都有一样的感受，对magento的文件结构相当迷茫困惑，看看官方下载的magento安装文件，里面共有大小文件300多个……不过没关系，我们美工（magento设计人员）可以先从与自己工作内容相关的部分开始入手。 要建立一个magento网站，美工应该做的是什么呢，从哪里做起呢？主题（theme）——这是我们的工作所在。magento中的主题（theme）是指布局（layout）、模板（template）、区域语言（locale）和皮肤（skin）文件的总和。 magento一次可以载入多个主题（theme），所以主题就分成两大类default（默认）theme和non-default（非默认） theme。而说到主题（theme），我们还要了解一个概念是interface，即“界面”，也被称为安装包，它是一组theme的集合。 那么这些专业名称分别代表什么，属于或者说包含哪些文件呢？打开刚刚下载解压的官方magento文件，为大家详细说明： 打开到app/design/frontend/这里，大家可以看到base和default两个文件夹，它们就是interface（界面）：base作为基层界面，它包含一个默认theme，内含所有必备文件；default为默认界面，在magento后台，我们可以看到website设置的interface为default。当然，我们也可以建立自己的interface，自己命名。 接着打开default文件夹，即app/design/frontend/default/，大家现在看到的几个文件夹就是主题（theme）了，default便是默认主题，其它几个为非默认主题。每一个interface都会包含有一个default theme。当你指定站点（website）或商店（store）使用某个interface时，这个interface的default theme会被自动加载。 如果你需要修改设计，你可以直接修改default theme,也可以创建一个non-default theme，并在这个新建的non-default theme中做你需要做的修改。之所以这样做你的修改会生效是因为magento可以同时加载多个theme，而且default theme总是具有最低的优先级。也正因为如此，default theme需要包含所有的必须的layout,templates和skins文件，而non-default theme则只需要包含我们需要修改的文件，当然也可以包含所有的相关文件。 现在我们以modern这个非默认主题来分别说明布局（layout）、模板（template）、区域语言（locale）和皮肤（skin）文件： 打开app/design/frontend/default/modern/layout/目录，大家看到一组XML文件，这些XML文件是用来定义各个页面的block结构和META信息的。 打开app/design/frontend/default/modern/template/目录，大家看到一组phtml文件，不要觉得陌生，其实它就是(x)html代码里嵌入了php代码，我们只需修改(x)html代码就好了。 打开app/design/frontend/default/modern/locale/目录，大家看到的是en_US文件夹，它里面存放的是翻译文档，用来提供翻译信息。这个我们不怎么用到，可以先放在一边不理。 打开skin/frontend/default/modern/目录，大家会倍感亲切吧，没错，皮肤（skin）文件就是由css、images和js文件组成的。 作为美工，先将这块文件结构了解清楚，再来着手修改模板就容易多了。初次下笔，先写这么多吧，以后我会坚持整理自己的所得分享给大家的。希望能够帮助到大家，祝大家工作顺利、每天更上一层楼~