SiteEngine70前台模板拖动使用方法.doc

SiteEngine7.0前台模板拖动使用方法SiteEngine7.0前台模板实现了拖拽效果，让您不需要懂任何代码也可以轻松实现DIV+CSS的布局，制作出更符合标准的网站。名词定义：l Portlet：页面上每个可以拖动的区块，包括列表块，标签块，内容块，表单块，投票块l 容器：页面上的所有portlet都是放置在容器里的l 列表块：在页面上调用的网站数据列表，如新闻列表，产品列表等l 标签块：在页面上插入标签调用的某些程序小变量，不同页面会随程序有变化，它可能是一个可变的元素、一段可变内容、或者一个实用小功能。(和原编辑器的插入标签基本类似)l 内容块：页面上的一些装饰图片，装饰文字等，都可以通过添加内容块来实现l 表单块，投票块：后台生成的表单和投票，可以在前台插入到页面上l 默认样式：页面上每插入一个portlet都会以默认样式来控制它的表现；对于portlet，如果对其进行了css设置的修改，则以其修改的样式来显示；如果没有修改的，将以默认样式来显示。（默认样式对整站生效）注：拖动方式只能在不能在静态下使用只有从网站前台增加的内容块才能拖动一、 管理操作1. 点击页面左上角的即可展开管理操作面板，如图1-1-1所示：图1-1-1勾选进入编辑模式：页面上的portlet必须在编辑模式下才能进行修改和拖动。系统控制：进入软件后台退出登录：安全退出2. 进入编辑状态，勾选即可：操作面板变为，如图1-2-1所示图1-2-1布局选择：对页面容器进行布局，可以选择多种比例。保存模板：对页面进行编辑后，需要保存模板才能生效。默认样式设置：对portlet的默认样式进行设置。二、 容器操作对页面中的容器进行操作主要有以下三个选项：1. 增加内容在容器中添加portlet，如图2-1-1所示：图2-1-1插入列表：在页面上插入已经存在的列表块portlet插入标签：在页面上插入已经存在的标签块portlet插入内容：在页面上插入已经存在的内容块portlet表单：在页面上插入后台生成的表单portlet投票：在页面上插入后台生成的投票portlet新增列表：新增加一个列表块portlet新增内容：新增加一个内容块portlet有问题请点击：帮助通道以上内容在下文的portlet操作中有详细说明。2. 容器样式编辑对容器样式进行编辑和修改，这也是对页面进行布局的基本操作。如图2-2-1所示：图2-2-1将此容器拆分为：将容器按比例进行拆分在此容器内插入：在容器中插入一定比例的新容器取消：关闭弹出层3. 删除删除此容器三、 Portlet操作1. 列表操作：a) 插入列表在页面上插入已经存在的列表，如图3-1-1所示：图3-1-1图中所示列表是系统已经存在的列表，可以查看其对应的模块名称和类别编号。点击插入，即可在页面上插入列表块；点击删除，即从数据库中删除这个列表块b) 新增列表如果系统存在的列表都无法满足页面需求，那么可以新增一个新的列表块：点击右上角的按钮，如图3-1-2所示：图3-1-2具体参数如下：u 标题：每个列表块，都可以对应一个标题来标志这个块 以区别其他的列表块u 模块及类别：下拉菜单中选择相应的功能模块u 类别：选择各模块中对应的类别u 排序方式：数据列表的排列方式u 标题显示字数：每个标题最多显示多少个字u 显示条数：数据列表中显示的数据条数u 显示类别名称：是否在列表前显示类别名称u 显示摘要：是否在列表中显示数据对应的摘要u 摘要字数：摘要显示多少字符u 显示更多链接：是否显示更多的链接u 显示列数：每行显示多少个u 显示时间：是否在每条数据后面显示加入时间u 标题颜色：数据列表的颜色显示u 标题图像：每条数据前可添加一个小图标，即标题图像(放置在/images/title文件夹下)u 显示图像(advanced)：列表是否显示对应的图像(调用advanced.html模板)u 显示新闻标题（仅对新闻有效）：实现新闻列表的“图片加列表”形式u 图像大小：显示图像列表时 每个图像的宽度和高度u 扩展列表模板的后缀：列表模板支持个性化后缀通过各参数的合理搭配，可以显示列表的多种样式。c) 编辑列表插入在页面上的列表可以进行编辑，每个列表portlet都有4个选项：u 列表配置：列表配置是针对列表的各个参数进行修改编辑的。其界面和新增列表的界面一致。（修改新增列表时候的各个参数）u 模板修改：模板修改是修改与此列表有联系的模板，系统会自动调出这些模板，点击编辑即可进入后台进行模板修改。图3-1-3编辑：点击进入 后台修改模板的界面了u CSS设置：CSS设置是对这个portlet的样式进行修改。如果针对portlet的样式进行了修改，那么此portlet将按照修改后的样式来显示；如果没有进行修改，将按照默认样式设置来显示。如图所示：具体选项为：宽：显示portlet当前宽度高：显示portlet当前高度Margin：此portlet的外边距高(auto)：默认为auto自动，可以自己定义高度是否显示标题：每个portlet都有对应的标题来标识，选择是即在页面上显示标题行；如图所示：选择否，即在页面上隐藏标题行，如图所示：标题高度：标题栏的高度设置标题颜色：portlet标题的显示颜色标题前缀图片：portlet标题前面的小图片，系统默认提供了很多种，也可以自己上传图片供选择。上传位置：/images/portlet/icon文件夹标题背景图片：portlet标题栏的背景图片可以更换系统默认的背景图片，也可以自己上传供选择，背景图片上传位置：/images/portlet/background文件夹u 删除从页面上删除该列表块。2. 标签操作a) 插入标签在页面上插入标签，标签调用的某些程序小变量，根据不同的页面会有不同的显示。和后台编辑器中插入标签是类似的。b) 编辑标签插入在页面上的标签块可以进行编辑，包括以下三个操作u 模板修改：模板修改是修改与此标签有联系的模板，系统会自动调出这些模板，点击编辑即可进入后台进行模板修改。例如点击用户登陆标签：编辑：点击进入 后台修改模板的界面了u CSS设置和列表块中的CSS设置一样。u 删除删除此portlet3. 内容操作a) 插入内容插入已经编辑好的内容块，点击插入即可显示在页面上；也可以进行删除。b) 新增内容如果需要插入一个全新的内容块，可以点击右上角的按钮。标题：每一个内容块也有一个标识，用来区分其他内容块编辑文本域：在文本域中输入内容块的代码，如果觉得不方便，可以点击即可进入后来，用编辑器来编辑内容块。c) 编辑内容插入到页面上的内容块可以进行编辑修改，包括以下3个操作u 内容修改：可以对插入的内容块中的具体内容进行修改：也可以进入后台用编辑器修改。u CSS设置和列表块中的CSS设置一样。u 删除删除此portlet4. 表单操作a) 插入表单将后台生成的表单，插入到前台页面：在对应位置选择，点击插入即可。b) 编辑表单对表单的portlet可以进行编辑：有u CSS设置和列表块中的CSS设置一样。u 删除删除此portlet5. 投票操作a) 插入投票将后台生成的表单，插入到前台页面：在对应位置选择，点击插入即可。b) 编辑投票对投票的port