1. 开发平台皮肤说明

2. 定制网站皮肤 也就是更改网站的外观展现，包括： 色调 背景图片 边框 布局位置

3. 创建皮肤扩展应用 创建一个软件包，名字叫 zopen.testskin 。

4. 新建皮肤 在软件包左侧点击皮肤，新建一个皮肤

5. 皮肤模板内容 皮肤模板是一个标准的 html 可变的部分使用 {{ }} 开头的变量来代替 –title: 站点名 –root_url ：站点根地址 –cache_url ：静态缓存文件 –packages_cache_url ：软件包中的缓存区域 –base_url ： –status_message ：消息 –footer ：底部文字 –search_box ：搜索框 –site_navbar ：站点左上导航 –site_menu ：站点右上菜单 –app_navbar ：应用导航 –left: 左侧导航 –above ：内容上方工具条 ( 未来可能去除 ) –content: 正文内容 –right: 右侧附加区域 –view_name: 当前的 VIEW 名字，用于定制 view 特有的样式 –columns_layout: 3 列结构的布局，可以是： –leftcol : 包含左侧列 –rightcol ：包含右侧列

6. 新建 css 文件

7. 将 css 加入皮肤 css 等资源文件的引入路径： {{packagess_cache_url}}/zopen.testskin/resources/custom.css

8. 预览和设置新皮肤

9. 新建其他资源文件 你可以上传图片，新建 js 文件，导入其他第三方的 UI 库 资源路径： root.packages.cache_url(request) + 'zopen.sales/resources/abc.css'

10. 自助建站服务 http://wix.com 国外上市公司 http://kuaizhan.com 搜狐快站 http://zhan.qq.com qq 的移动建站 www.sitestar.cn 建站之星 http://weizhan.58.com/ ５８同城的微站通http://weizhan.58.com/ http://www.35.com/website/ ３５互联的 刺猬建站 http://www.faisco.com/ 广州本地的凡科 建站

12. 模板 DOM 结构 |--visual-wrapper （根） |------header （页眉） |------visual-content （内容） |-----------top （上方区） |-----------site-subnav （导航区） |-----------columns （主内容包裹区） |------------------left （左侧区） |------------------main （内容区） |------------------right （右侧区） |-----------bottom （下方区） |------visual-footer （页脚） 注：红色为自行在模板添加 蓝色为可以相应页面扩展

13. 窄屏

14. 宽屏

15. 长头尾窄中

16. 模板框架定制

17. 模板 header 区域样式 #header { background: #1E938D; box-shadow: none; border-bottom: none; height: 64px; left: 0; top: 0; margin: 0 auto; z-index: 3000; position: fixed; width: 100%; }.site-title { margin: 0px 74px 0px 100px; font-size: 24px !important; line-height: 60px!important; }.site-title a { color: #FFFFFF !important; text-decoration: none; } #logo { width: 40px; height: 40px; margin-top: -5px; }.topNavTabs li { font-size: 18px; height: 60px; line-height: 60px; border-bottom: none; } #site-navbar li.selected, #site-navbar li:hover { color: #FFF; background: none; border-bottom: medium none; border-top: 4px solid #fff; line-height: 52px; } #site-navbar li { margin: 0 13px; } #site-navbar li a { color: #fff; padding: 0; } #header-right li.selected, #header-right li:hover { background: none; border-bottom: none; } #header-right { margin-right: 100px; } #site-menu-login, a#site-menu-signup { border: 1px solid rgb(255, 255, 255); width: 54px; height: 26px; text-align: center; color: #FFF; border-radius: 5px; line-height: 26px; font-size: 13px; font- weight: bolder; } #site-menu-signup { color: #34A4A0; background-color: #fff; margin-left: 10px; } #site-actions { line-height: 60px; display: none; } #site-searchbox #search-box { margin-top: 18px; }.msg_num { line-height: 64px; } dt.actionMenuHeader.KSSActionMenu span { color: #fff; } dt.actionMenuHeader.KSSActionMenu a { color: #fff; }

18. site-subnav 区域样式 #site-subnav { margin: -47px auto; overflow: hidden; clear: both; min-width: 960px; text-align: center; } #site-subnav.actionMenu { position: relative; overflow: hidden; margin: 0px auto; width: 960px; } #site-subnav.tabs { float: none; width: initial; border-bottom: none; display: -webkit-inline-box; } #site-subnav.actionMenu.tabs li { float: left; position: relative; top: 1px; padding: 0px; width: 135px; height: 45px; } #site-subnav.actionMenu.tabs li a { margin-right: 0px; line-height: 45px; background: rgba(255, 255, 255, 0.2) none repeat scroll 0% 0%; color: #fff !important; text-align: center; border-radius: 0; font-size: 18px; } #site-subnav.actionMenu.tabs li.selected a { color: #000; font-weight: normal; background: #275D53 none repeat scroll 0% 0%; } #site-subnav.actionMenu.tabs li a:hover { background: #275D53 none repeat scroll 0% 0%; }

19. columns 区域样式 #columns { background: transparent; width: 80%; border-collapse: collapse; border-spacing: 0; margin: 0 auto; margin-top: 110px; /*padding: 0 100px; */}

20. left 区域样式 #left.portlet { margin: 0 0 1em; background: #F5F5F5; } #left.portletHeader { background-color: #F5F5F5; text-transform: none; font-weight: normal; line-height: 1.6em; -webkit-border-radius: 0; -moz- border-radius: 0; border-radius: 0; font-size: 25px; } #left.portletItem { margin: 0; padding: 0; } #left.portletHeaderContent { padding: 20px 0 0 20px; color: #333; } #left.navTreeItem a, dd.portletItem.navTreeItem a { display: block; color: #434D4D; padding-left: 20px; line-height: 40px; text-decoration: none; overflow: hidden; border: none; -moz-border-radius: 0; font-size: 16px; height: 40px; background: #F5F5F5; border-left: 4px solid rgba(255, 255, 255, 0); } #left.navTreeItem a:hover { background: #fff; border-left: 4px solid #1e938d; } #left { padding-left: 0; } #left.portlet-navigation-tree.navtree { width: 100%; } #left.visualPadding { padding: 0 25px 0 0; width: 270px; } #left.navtree { max-width: none; } #left #above-content-bar.contentbar_content { padding-bottom: 0px; background: #F5F5F5; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

21. main 区域内容样式 #main { padding: 0; } #main #content h1 { font-size: 24px; font-weight: bolder; color: #484848; } #main #content ul, ol { padding: 10px; color: #525354; } #main #content ol li { padding: 10px 0px 0px 10px; } #main #content li { font-size: 16px; padding: 5px 0 0 0; } #main #content li a { font-size: 20px; color: rgb(30, 147, 141); } #main #content p { font-size: 16px; color: #525354; margin: 10px 0 0 10px; } #main #content blockquote { margin: 20px 0 0 20px; font-size: 16px; } #main #content.listing { font-size: 16px; } #main.contentbar_left { display: inline; font-size: 20px; }

22. right 区域样式 #right { padding: 0 0px 0 25px; } #right.visualPadding { font-size: 18px; } #right.visualPadding.KSSShowHideAction { font-size: 16px; } #right.visualPadding.KSSShowHideTarget { font-size: 13px; } #right.visualPadding.KSSShowHideTarget.selectTags { font-size: 16px; } #right.visualPadding.KSSShowHideTarget.selectTags. subTags { font-size: 13px; } #right.navTreeItem a:hover,#right.navTreeItem a.selected { background: #fff !important; border-left: 4px solid #1e938d; }

23. 模板 footer 区域样式 #visual-footer { bottom: 0px; left: 0px; min-width: 960px; height: 333px; background: #1e938d; padding-top: 10px; margin: 0 auto; overflow: hidden; clear: both; } #footer-wrap { margin: 0 auto; padding-top: 30px; position: relative; overflow: hidden; width: 960px; clear: both; } #footerContainer { padding: 30px 100px; }.footer-list { float: left; width: 14%; } #copyright { float: right; margin-right: 35px; text-align: center; }.footer-list p { display: inline-block; padding-bottom: 8px; color: #fff; font-size: 18px; margin: 0 !important; }.footer-list li { margin-bottom: 8px; }.footer-list li a { text-decoration: none; font-size: 14px; color: #97D4D1; }.footer-list li a:hover { color: #fff; text-decoration: none; } #copyright img { width: 40px; height: 40px; } #copyright p { color: #fff; font-size: 12px; margin: 4px 0 0 0; } #copyright p img { width: 14px; height: 13px; text-align: center; } #bottom-support { height: 150px; background: #F8F9F7 none repeat scroll 0% 0%; min-width: 960px; overflow: hidden; clear: both; text-align: center; margin: 0px auto; } #bottom-support.viewport-inner { position: relative; overflow: hidden; clear: both; padding: 0px; margin: 0px auto; width: 960px; }.bottom-support-list-one,.bottom-support-list-two { float: left; margin: 0 auto; display: inline; }.bottom-support-list-one a { border: 3px solid #CCC; text-align: center; font-size: 24px; text-decoration: none; color: #999; border-radius: 7px; line-height: 150px; margin: 10px; padding: 38px 25px; }.bottom-support-list-two { border: 3px solid #CCC; text-align: center; line-height: 150px; text-decoration: none; color: #999; border-radius: 7px; margin: 16px 0px 0px 10px; padding: 15px; } #support-text { font-size: 24px; } #support-links { font-size: 16px; }

24. top 区域样式 #document-top { background: url(../img/documentBg.jpg) repeat-x; background-color: #080903; } #case-top { background: url(../img/caseBg.jpg) repeat-x; background-color: #4C3231; margin-bottom: 60px; } #support-top { background: url(../img/supportBg.jpg) repeat-x; background- color: #A59878; } #document-top, #case-top, #support-top { width: 100%; height: 300px; margin-top: -60px; } #document-top-content, #support-top-content { text-align: center; padding- top: 100px; } #case-top-content { text-align: left; padding-top: 125px; padding-left: 100px; } #document-top-content, #case-top-content p { color: #fff; font-size: 24px; } #document-top-title, #case-top-title { font-size: 38px !important; font-weight: bolder; } #case-top-title { padding-bottom: 15px; } #support-search-box { margin-top: 50px; min-width: 960px; } #support-search { width: 521px; height: 30px; border: 3px solid #B6AD95; border-right: none; } #support-search-btn { width: 90px; height: 40px; background: #269691; border: 3px solid #B6AD95; border-left: none; font-size: 20px !important; color: #fff; margin-left: -5px; }

25. bottom 区域样式 #bottom-signup { height: 100px; background: #5EB8B4 none repeat scroll 0% 0%; min-width: 960px; overflow: hidden; clear: both; text-align: center; } #bottom-signup.viewport-inner { position: relative; margin: 0 auto; overflow: hidden; clear: both; width: 960px; } #bottom-signup p { margin: 37px 0; font-size: 26px; line- height: 26px; float: left; color: #FFF; } #bottom-btn { background: #FFF none repeat scroll 0% 0%; height: 50px; border-radius: 8px; text-align: center; text-decoration: none; font-size: 20px; color: #1E938D; font-weight: bolder; float: right; width: 200px; margin: 25px 0; } #bottom-btn span { display: block; margin: 10px; }

26. 首页效果

27. 轮播 DOM 结构 标题 1 附加说明 1 链接 1 标题 2 附加说明 2 链接 2

28. banner 区域样式 #main #content.banner { position: relative; width: 100%; overflow: auto; font-size: 18px; line-height: 24px; text-align: center; color: rgba(255, 255, 255,.6); text-shadow: 0 0 1px rgba(0, 0, 0,.05), 0 1px 2px rgba(0, 0, 0,.3); background: #768D9F; box-shadow: 0 1px 2px rgba(0, 0, 0,.25); } #main #content.banner ul { list-style: none; width: 300%; padding: 0 !important; } #main #content.banner ul li { display: block; float: left; width: 33%; min-height: 350px; -o-background-size: 100% 100%; -ms-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background- size: 100% 100%; background-size: 100% 100%; box-shadow: inset 0 -3px 6px rgba(0, 0, 0,.1); } #main #content.banner.inner { padding: 200px 0; } #main #content.banner h1, #main #content.banner h2 { font-size: 40px; line-height: 52px; color: #FFF; margin: 0px 0px 35px 0; } #main #content.banner p { color: #FFF; margin: 0px 0px 15px 0; font-size: 25px; } #main #content.banner.btn { display: inline-block; margin: 25px 0px 0px; padding: 9px 22px 7px; clear: both; color: #FFF; font-weight: bold; text-transform: uppercase; text-decoration: none; border-radius: 8px; width: 200px; height: 30px; font-size: 20px; background: rgb(30, 147, 141) none repeat scroll 0% 0%; } #main #content.banner.btn:active { -webkit-filter: drop-shadow(0 -1px 2px rgba(0, 0, 0,.5)); -moz-filter: drop-shadow(0 -1px 2px rgba(0, 0, 0,.5)); -ms-filter: drop-shadow(0 -1px 2px rgba(0, 0, 0,.5)); -o-filter: drop-shadow(0 -1px 2px rgba(0, 0, 0,.5)); filter: drop-shadow(0 -1px 2px rgba(0, 0, 0,.5)); } #main #content.banner.btn,.banner.dot { -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0,.3)); -moz- filter: drop-shadow(0 1px 2px rgba(0, 0, 0,.3)); -ms-filter: drop-shadow(0 1px 2px rgba(0, 0, 0,.3)); -o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0,.3)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0,.3)); } #main #content.banner.dots { position: absolute; left: 0; right: 0; bottom: 60px; } #main #content.banner.dots li { display: inline-block; width: 0.5px; height: 0.5px; margin: 0 4px; text- indent: -999em; border: 2px solid rgb(30, 147, 141); border-radius: 6px; cursor: pointer; opacity:.4; - webkit-transition: background.5s, opacity.5s; -moz-transition: background.5s, opacity.5s; transition: background.5s, opacity.5s; } #main #content.banner.dots li.active { background: #1E938D none repeat scroll 0% 0%; opacity: 1; } #main #content.banner.arrows { position: absolute; bottom: 20px; right: 20px; color: #fff; } #main #content.banner.arrow { display: inline; padding-left: 10px; cursor: pointer; }

29. 首页主内容 DOM 结构

30. 首页主内容区样式.content-even,.content-odd{ width: 100%; height: 643px; }.content-even{ background: #FBFBFB; }.content-odd{ background: #F8F8F8; } #partOne { background: #fff; }.content-wrap { width: 960px; margin: 0 auto; padding: 150px 0; display: block; }.content-img,.content-text { float: left; display: inline; width: 50%; }.content-text p { margin: 0 0 40px 0 !important; }.content-text-title { font-size: 38px !important; }.content-text-text p { font-size: 20px !important; color: #7A7A7A !important; line-height: 20px; }.content-text-text img { width: 22px; height: 17px; }.clear { height: 0px; clear: both; }

31. 更换皮肤 设置某个容器，采用新的皮肤 : container.setting['skin'] = 'bootstrap' container.setting['skin'] = 'zopen.cool_skin:bootstrap' 实际查找皮肤可以 : container.settings.get('skin', default='bootstrap', inherit=True)