discuz门户模板风格diy制作

 时间:2024-10-16 18:35:38

discuz的门户默认是什么都没有的,全部内容都需要自已diy搭建。对于新手来说,diy出的效果总是不尽人意。现在就由我来像大家介绍diy高级教程,搭建任意风格的门户页面。

工具/原料

discuz论坛系统

方法/步骤

1、开启门户功能安装好discuz之后,我们进入后台,点击全局,找到站点功能菜单,把门户功能开启。在弹出的菜单中,勾选主导航。当页面中门户后面的小红叉变得绿勾时,说明门户功能已经开启。

discuz门户模板风格diy制作

discuz门户模板风格diy制作

2、设计网站的基本布局第一次设计,我们就从简单的布局讲起。我们就以新浪科技的1:1:1的布局为例

discuz门户模板风格diy制作

3、打开diy设计界面进入网站首页,点击图中箭头所指的diy高级模式菜单,进入diy高级编辑模式。

discuz门户模板风格diy制作

discuz门户模板风格diy制作

4、为页面添加框架现做房子一样,我们先要为网页搭好框架,因为我们要设计的是1:1:1的框架,所以我们选中1:1:1的框架,当选中框架后,你会发现网页的中部会出现一个虚线的区域,我们把框架往这个区域拖即可。

discuz门户模板风格diy制作

5、编辑框架我们把鼠标移到添加好框架上,点击红色的编辑菜单,我们可以选择一个菜单进行编辑。这里我们选择标题,在弹出的窗口中,把标题删除。如果你有需要,可以用来作版块的主标题,视你的情况而定。然后我们编辑框架的样式,去掉框架的边框

discuz门户模板风格diy制作

discuz门户模板风格diy制作

discuz门户模板风格diy制作

6、为框架添加模块添加好框架后,我们就可以往框架里添加模块了。这好比房子已经盖好了,现在我们可以往里塞家具了

discuz门户模板风格diy制作

7、编辑模块当我们往框架里添加模块之后,系统会弹出模块的编辑框,如果不对模块进行设醅呓择锗置,每个模块调取的内容将是一样的。所以,我们必需对模块进行编辑配置。对于模块编辑淖橐郝芴菜单中的各个配置项,我就不一一介绍了。大家只要一个一个去试试就知道了。注意,模块标识一定要填写,名字任意。因为我们新浪的最左侧是一个轮播图,因此我的模块配置信息如下模块标识符为portal_slider,数据来源为高级自定义,聚合标签为幻灯,文章栏目为全部,显示样式为文章图片幻灯,缩略图宽度为300,高度为300因为无法把截图整个设置项的内容,所以只截局部。编辑好后,我们直接点确定。系统又弹出模块标题编辑窗口,这里我们暂用不到,直接点确定即可。如果添加模块之后一没有文章出现,你应该查看一下对应选项下没有文章。比如,你勾选了聚合标签的“原创”选项,但是所有发布的文章,却没有一篇文章在发布时勾选“原创”的聚合标签。

discuz门户模板风格diy制作

discuz门户模板风格diy制作

discuz门户模板风格diy制作

8、添加头条模块并讲解模块标题的妙用。discuz现在的模块淘篱跬翎中,没有一款显示样式能达到新浪科技中部的头条显示效果,但是,我们可以借助模块标题实现这个效果。还是和上一步一下,我们把选择文章模块把攉淠艇髋它拖到框架的中间。模块属性中的“显示模式”选择“[内置]碎片式文章标题列表”这个一项。点击确定后,在弹出的模块标题窗口中,我们写上头条新闻的标题,链接,如果要加大字体和更变颜色,可以选择相应的字体和颜色。

discuz门户模板风格diy制作

9、编辑模块样式。新浪头条的下面有一条下划线,如何在我们的头条下,也加上一条下划线呢?我们可以通过两种方法。第一种:在模块的展示分类中选择静态模块,然后选数据来源为“分割线”。第二种:编辑模块样式,为模块添加一条底部的边框。我们把鼠标移到刚才添加的头条模块上,点击出现的蓝色编辑按钮,再点击样式。按图中所示设置即可。

discuz门户模板风格diy制作

discuz门户模板风格diy制作

10、添加扩展css当discuz提供的样式,无法达到我们想的缃俜橹燧效果时,我们可以添加一个扩展样式。这里以新浪右侧的tab菜疟觥窖捎单样式为例。向指定位置添加一个tab框架,我们打框架样式编辑窗口,即第五步的第三图,在“指定class”的输入框的字母后面,我加英文的空格,然后写上一个news_tab的类名,记得要空格。我们打开在discuz/template/default/common目录,新建个extend_common.css。填写以下内容即可.news_tab.title{height:95px;}.news_tab.tab-title{background-image:none;background:none;}.news_tab.tbli{float:left;width:146px;margin-right:4px;background:url(http://www.sinaimg.cn/IT/deco/2013/1125/index/1113_lqf_techHP_icons_V11.png)no-repeat-250px0px;text-align:center;height:40px;line-height:35px;cursor:pointer;font-size:14px;}.news_tab.tab-title.titletext{float:none;margin-left:3px;font-size:18px;padding-left:15px;line-height:40px;font-weight:normal;background:url(http://www.sinaimg.cn/IT/deco/2013/1125/index/1113_lqf_techHP_icons_V11.png)no-repeat-796px11px;display:inline;color:#1f90de;}.news_tab.tbli.a{background-position:-400px0px;color:#fff;}.news_tab.tbli.aa{background:none;border:0px;}discuz的css书写规则请查看http://faq.comsenz.com/library/template/cssextend/cssextend_index.htm此链接下的官方文档。写好之后,新开个页面,进入后台,按下图所示,更新css缓存。

discuz门户模板风格diy制作

discuz门户模板风格diy制作

11、最后然后依样依样画葫芦,按照新浪的样子,继续添加模块。下图就是最终效果了,虽然不是完成一样,但是,大家稍微开一下大脑,就能想到实现方法了。

discuz门户模板风格diy制作

Notepad如何查找文字内容 新版Navicat,数据传输去哪了?怎么数据传输? jquery如何获取table中td值的方法 Notepad++怎么高亮显示标签属性 js中如何替换掉最后一个匹配的字符?
热门搜索
长城 电影 2张图片合成一张 艾滋病潜伏期图片 假戏真做的电影 必看电影