mojoportal学习——文章翻译之使用Artisteer快捷的创建模板
翻译的不好 大家见谅
在mojoportal2.3.3.9版本中,我们做了适当的修改,使得他可以支持Artisteer生成的html模板。
Artisteer是一个非常好的设计模板的工作,使用它你无需html和css知识。
注意:以下信息适用于mojoportal2341或更高及Artisteer2.4版本。
在Artisteer2.4中,与2.3版本相比有了很多变化。
Artisteer2.4中的类名都为小写,由此,在mojoportal中有相应变化,作为2.3设计起点的artisteer-greenlagoon和artisteer-swirl1不能
被用于2.4模板设计中。我们另外做了一系列模板,用于Artisteer2.4版本制作模板的起点。
Artisteer2.4最大的变化时支持树形菜单,为了使之有更好扩展性,我做了一些工作,使之支持竖排菜单作为主菜单,
或者横排菜单作为顶级菜单,竖排菜单作为子菜单。
快速操作指南:
1:建立一个文件夹 ,如/Data/Sites/1/skins/artisteer-自定义名字
2:选择一个Artisteer2.4模板作为你的起点
(1):artisteer-24topmenu 菜单在页面顶端,无竖排菜单
(2): artisteer-24headermenu 菜单在页面标题图片下,无竖排菜单
(3):artisteer-24verticalmenu2 菜单在页面顶端,有竖排菜单
(4):artisteer-24verticalmenu1 菜单在页面标题图片下,有竖排菜单
(5);artisteer-24verticalmenu3 只有竖排菜单
3:从上面的文件夹中选择一个,拷贝其中文件。(images文件夹可以不拷贝)
4: 粘贴文件到新文件夹中
5:生成的html模板,包含如下文件
images文件夹 page.html script.js style.css style.ie6.css style.ie7.css
拷贝文件到你的新模板文件夹下
6:完成90%的工作。调整模板宽度 style-artisteer-overrides.css
.art-contentLayout .art_sidebar2{} 是右侧列表
7:由于我们经常不希望页面背景颜色和背景图片出现在所见即所得的编辑器中,我们覆盖body风格如下:
body{background-color:white;background-image:none;}
然后选中style.css的body{}选择器,然后添加到style-artisteer-overrides.css中。
8:设置模块标题的风格,在style.css中,选择 .art-blockheader .t{} 然后拷贝到style-artisteer-overrides.css中,
.art-blockheader .t h2.moduletitle[]中,使得mojoportal中的模板标题可以得到相同设置。
9:由于Artisteer生成的模板采用了不同的机制,生成的html代码中背景图片代码可能不同,你需要比较生成模板中的
html文件的代码与layout.master文件中代码的异同,替换layout.master中的代码。
比如在html文件中代码如下:
<div id="art-page-background-simple-gradient">
<div id="art-page-background-gradient"></div>
</div>
而layout.master中,如下:
<div id="art-page-background-simple-gradient"></div>
<div id="art-page-background-glare"><div id="art-page-background-glare-image"></div></div>
<div id="art-page-background-gradient"></div>
进行相应替换。
10:其他元素的变化也有可能
11:可能需要修改stylemojo.css文件
12:取决于你的颜色搭配,你可能需要优化不同的模块css文件,如
styleaspcalander.css styledatacalendar.css styleblog.css等,你可以从其他的相似的模板中拷贝这些文件。
13:你可能希望改变使用的jquery ui模板。
实用 Artisteer的技巧
》》
Artisteer模板允许1或2或3列布局。在mojoportal中我们的模板自动支持1-3列的调整。为了使你的Artisteer模板
有需要的css支持1-3列,我推荐在Artisteer中你总是使用2列布局,一个左侧列和一个宽的中间选区。
》》
Artisteer中的模板,对于现在的显示器, 宽度1000px也许是一个好的方案,如果是自定义的宽度,你可能需要在
style-artisteer-overrides.css中修改。Artisteer2.4实用百分比来设定布局列的宽度,所以也可能不需要额外的设定。
如果你的客户多数实用1024*768分辨率,你可能希望实用960xp的宽度,使用1000px宽度,左侧可能会出现滑动条。
》》
所包含的artisteer 模板,使用了顶部偏移30像素,用于放置登录,注册,站点地图等。
》》
布局列不要太窄
重要关注:
......