妖巫哥哥
PW官方侠客
PW官方侠客
  • 发帖数184
  • 铜币756两
  • 威望246点
  • 贡献0点
  • 注册日期2012-07-06
  • 最后登录2014-12-31
阅读:42768回复:111

[教程]pw9.0门户开发教程(三):懂html就能制作模版——导入方式

楼主#
更多 发布于:2013-01-05 17:27
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
阅读本节前,请先阅读phpwind9.0门户模版制作教程(二):模版制作方式介绍

懂html就能制作模版——导入方式制作模版
一、你需要下载一个phpwind9.0标准门户模版,他提供了基本的文件夹结构和pw9的模版要素
点击下载:phpwind9门户标准模版.rar
解压后得到下图的目录结构

图片:111111111.JPG


css、images、js、template分别用来放css文件,图片文件,js文件和模版htm文件,在phpwind9.0中,模版文件是用".htm"结尾的
help.txt是一个帮助文档,如果熟悉了可以删除掉
Manifest.xml用来描述模版作者版权
index.htm可以直接用浏览器打开,但现在是一片空白

二、用Dreamweaver打开index.htm

图片:555555.JPG



这就是index.htm的全部内容,其中:
“网页设计区域开始”到“网页设计区域结束”是你的html代码区域
<pw-drag id="segment_drag"/>为定义一个拖曳区域,可以删除,其它代码,请保留
三:一个非常简单的例子
1、删除<pw-drag id="segment_drag"/>
2、在设计区域里添加代码:
<!-- 网页设计区域开始 -->
            
           <div class="demo1">
               <h1>我是标题</h1>
               <ul>
                   <li>上列表1</li>
                   <li>上列表2</li>
                   <li>上列表3</li>
                   <li>上列表4</li>
                   <li>上列表5</li>
               </ul>
           </div>

   <!-- 网页设计区域结束 -->
3、第四行增加css的链接文件代码
<link href="../css/style.css" rel="stylesheet" />
4、在css/style.css文件里添加

.demo1{
    border:1px solid #ff0000;
    width:500px;
    margin:auto;
}

.demo1 h1{
    font-size:14px;
    color:#266aae;
}

5、保存后用浏览器打开,看看是否为设计的效果(demo里就加了一条红边框)
6、调整完成后需要做如下修改:
1)修改资源文件调用路径:
css目录使用{@G:design.url.css}
images目录使用{@G:design.url.images}
js目录使用{@G:design.url.js}
<link href="../css/style.css" rel="stylesheet" />  修改为
<link href="{@G:design.url.css}/style.css" rel="stylesheet" />
2)定义标题区域
    用<pw-title></pw-title>包裹标题(导入后运营者可以随时修改这个标题的文字或样式)
<h1>我是标题</h1>修改为
  <h1><pw-title>我是标题</pw-title></h1>
3)定义列表区域
用<pw-list></pw-list>包裹列表(导入后运营者可以随时修改这个列表的调用方式)
             <ul>
                     <li>上列表1</li>
                     <li>上列表2</li>
                     <li>上列表3</li>
                     <li>上列表4</li>
                     <li>上列表5</li>
                 </ul>
修改为:  

                <ul>
                   <pw-list>
                    <li>上列表1</li>
                    <li>上列表2</li>
                    <li>上列表3</li>
                    <li>上列表4</li>
                    <li>上列表5</li>
                    </pw-list>
                </ul>
4)打包
使用winrar或其它压缩软件压缩,注意应该从css/images/js等目录的上层目录打包压缩,压缩格式选择“.zip”

5)安装phpwind9.0,新建一个自定义页面(不会建?看本教程第一节)
进入该页面的编辑模式,右上角点击“导入模板”

图片:444444444444.JPG


6)鼠标移到网页文字上看看~~~~~~是不是出现模块编辑样式了?
[妖巫哥哥于2013-01-08 11:57编辑了帖子]
阿牛哥
PW民间侠客
PW民间侠客
  • 发帖数1098
  • 铜币65504两
  • 威望88点
  • 贡献0点
  • 注册日期2010-12-23
  • 最后登录2016-06-13
  • 社区明星
  • 社区居民
  • 忠实会员
沙发#
发布于:2013-01-08 14:27
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
学习下
中华小伙
四星会员
四星会员
  • 发帖数2823
  • 铜币10644两
  • 威望232点
  • 贡献0点
  • 注册日期2010-10-19
  • 最后登录2014-08-22
  • 社区明星
  • 民间侠客
  • 社区居民
  • 忠实会员
  • 最爱沙发
板凳#
发布于:2013-01-08 14:47
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
学习了
六度宝宝
一星会员
一星会员
  • 发帖数328
  • 铜币15361两
  • 威望203点
  • 贡献0点
  • 注册日期2012-07-24
  • 最后登录2013-05-07
3楼#
发布于:2013-01-08 14:51
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
这个非常好
himylife
三星会员
三星会员
  • 发帖数1025
  • 铜币15423两
  • 威望292点
  • 贡献0点
  • 注册日期2010-07-16
  • 最后登录2013-04-29
4楼#
发布于:2013-01-08 14:52
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
学习了谢谢楼主
阿wind
一星会员
一星会员
  • 发帖数229
  • 铜币262两
  • 威望15点
  • 贡献0点
  • 注册日期2011-12-10
  • 最后登录2015-04-07
5楼#
发布于:2013-01-08 16:16
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
新人表示无法下载


哎,看来PW不欢迎新鲜血液的加入啊
kingchary
一星会员
一星会员
  • 发帖数82
  • 铜币787两
  • 威望8点
  • 贡献0点
  • 注册日期2010-01-27
  • 最后登录2015-04-24
6楼#
发布于:2013-01-08 18:32
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
学习了
sueric
一星会员
一星会员
  • 发帖数49
  • 铜币48两
  • 威望31点
  • 贡献0点
  • 注册日期2011-07-21
  • 最后登录2015-05-11
7楼#
发布于:2013-01-09 15:26
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
下载不了~
abcnic18
四星会员
四星会员
  • 发帖数5503
  • 铜币10142两
  • 威望5458点
  • 贡献0点
  • 注册日期2008-11-25
  • 最后登录2014-12-02
  • 社区居民
  • 忠实会员
  • 最爱沙发
8楼#
发布于:2013-01-10 09:02
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
教程怎么多啊
hlj173
新手上路
新手上路
  • 发帖数36
  • 铜币53两
  • 威望10点
  • 贡献0点
  • 注册日期2013-01-06
  • 最后登录2015-02-02
  • 社区居民
9楼#
发布于:2013-01-10 10:31
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
学习了可惜标准模版不能下载啊
duomi524
PW民间侠客
PW民间侠客
  • 发帖数941
  • 铜币6054两
  • 威望8点
  • 贡献0点
  • 注册日期2010-05-10
  • 最后登录2017-09-10
  • 社区居民
  • 忠实会员
10楼#
发布于:2013-01-10 12:40
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
phpwind9门户标准模版.rar
附件下载不了~~~
xomm
二星会员
二星会员
  • 发帖数267
  • 铜币413两
  • 威望15点
  • 贡献0点
  • 注册日期2012-11-03
  • 最后登录2014-05-02
  • 社区居民
11楼#
发布于:2013-01-10 12:57
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
我去了
新手上路不能下载啊亲
xomm
二星会员
二星会员
  • 发帖数267
  • 铜币413两
  • 威望15点
  • 贡献0点
  • 注册日期2012-11-03
  • 最后登录2014-05-02
  • 社区居民
12楼#
发布于:2013-01-10 12:59
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
多少两才能摆脱新手困扰=_=
xomm
二星会员
二星会员
  • 发帖数267
  • 铜币413两
  • 威望15点
  • 贡献0点
  • 注册日期2012-11-03
  • 最后登录2014-05-02
  • 社区居民
13楼#
发布于:2013-01-10 13:04
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
阿wind:新人表示无法下载


哎,看来PW不欢迎新鲜血液的加入啊
回到原帖
同感啊亲%>_<%
xomm
二星会员
二星会员
  • 发帖数267
  • 铜币413两
  • 威望15点
  • 贡献0点
  • 注册日期2012-11-03
  • 最后登录2014-05-02
  • 社区居民
14楼#
发布于:2013-01-10 13:04
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
duomi524:phpwind9门户标准模版.rar
附件下载不了~~~
回到原帖
诸多童鞋表示蛋疼
上一页
游客

返回顶部