|
6#
楼主 |
发表于 2010-8-5 10:58:22
|
只看该作者
门户是整合站点精品信息并以一个统一的界面展示的信息平台,是一个网站的门面。通过门户展示的内容可以让用户了解网站的风格,定位,并进一步点击链接访问网站更多内容。通过门户功能可以发布文章资讯,通过模块可以聚合包括会员、帖子、日志、图片、附件等各类站内信息。
- t; `; S3 b9 w" \, P, Z: [) h
2 m% ?, |' t/ u4 M- d" o论坛的帖子、UCHome 的日志,都可以直接推送到门户的文章库里面。Disucz! X1 的门户系统灵活而强大,站长可以通过 DIY 功能聚合网站包括会员,帖子,日志、图片等信息,并以多种样式展示;也可以自己发布文章,管理资讯频道;还可以通过 DIY 功能将有相同主题的内容聚合在一个专题页面。( N& |1 a. \. W3 u- c; W/ r
3 m6 D0 X2 k! e9 j下面我们主要讲解如何使用 DIY 功能。
% @% S/ L4 ^- f/ n
3 B! @ l( f5 Z& xDIY 自己的首页,建立框架是第一步。: e, w0 B/ h6 J7 p& d# b2 d
9 n, o Y$ [# s; m一、tab 框架
9 I: S1 J3 f" r* }- r6 T$ G! S# x/ O4 M$ J
1、在 DIY 页面下,点击框架,选择 tab 框架,如下图所示:; F5 l4 E/ V, W7 Z& C
B. p3 p* o: o) M: c& N
2010-5-19 07:36 上传
) E: {0 z: ], H& e# J下载 (9.99 KB)
: h( Z A# z7 `. ]
$ \- r/ `0 i+ W( z8 a% \2 d7 F( ]) E; }# ~& e
( a- H! ^! A' Z0 e
' `' e$ o1 ?! b& _+ e
2、选中 tab 框架,按住鼠标,把 tab 框架拖到要加入框架的位置,如下图所示:
$ X' R) |4 K" {& t+ _) z9 J: i, K" e1 m$ K
2010-5-19 07:36 上传
' x3 u4 ] [/ C下载 (7.71 KB)
% ^4 C2 V$ Z/ T" V4 o# V+ O0 p/ h! I% z/ k$ v
9 w" j! O9 D% e% T# w, Z! I1 U9 t* z1 L- ]
; c- r" `9 i3 t3 A% X3、添加好 tab 框架之后,点击编辑 => 标题,编辑框架标题的属性,如下图所示:0 M2 h; j0 `% l( \3 R: b: \0 c
7 ^* }9 T' n5 n* D" B7 m 2010-5-19 07:36 上传
5 T8 J: w o) r+ u下载 (4.06 KB)
; V: x, }% b) I/ Q! N. M8 h2 L7 D7 |+ R, D+ M$ @; H4 x
" O9 L# I/ ^$ z: @# G
3 }. w0 O, o% ^5 T) Z' [- y* A0 B" z5 J* {/ s w/ Y5 R
2010-5-19 07:36 上传
- x8 i. P7 G& H9 d" m: l& ^下载 (8.86 KB) 6 A" Z* q# J2 B" h
- @8 d6 E P" P; J2 E* C2 I
, l' i: Y _$ t6 l) b. H) U, s
5 M% R/ I2 Q1 i7 B ~9 o$ @ `7 c: ?( B0 K
4、点击编辑 => 样式,编辑背景和边框的属性,如下图所示:
: Q& M# s: Z, y7 w# H' ^" H2 p2 b+ B4 Y' \/ m& r( H+ k, `
2010-5-19 07:36 上传' ~( [) Z% @' H
下载 (4.09 KB) " \; q) H* { e: m4 v
% E4 S# T( z; }4 g
# E2 o/ h% k- t7 G! c3 n3 R
& J% G2 h2 R# b, z6 y; u1 h0 M1 K: P6 V% X& Z h6 P; G
2010-5-19 07:36 上传
: m& @, J: R1 x8 K* W& }, x下载 (7.13 KB)
$ h( s/ P* W; f! S4 [ T3 Z/ g/ D/ h, {! B5 t
* ]4 m' Q9 _5 ]1 |# q! ]
' F' r& a# M% ]& a8 w
1 v/ O, a8 a, M3 V至此一个 tab 框架就添加好了,可以继续添加模块,自定义设置完善框架。. o; ^9 U+ S% h/ R1 [
tab 框架的效果,如下图所示:2 B% b; X1 [0 p! y5 K: y
( y% X8 A2 [& |3 I
2010-5-19 07:36 上传0 N% N% ~& t0 Z ~9 j1 T
下载 (7.17 KB)
4 s+ n; c( _& p1 l; \6 r, ^* T5 {0 M ~+ w# D' i# w' _
0 C7 F6 P' w- |$ I
2 U' r* ?: @6 R( ]& S4 Q0 r; j& i8 ^8 ]" d
二、1:1:1框架/ X, z- p$ W( R1 a5 X
% B. `5 M2 c0 z1、在 DIY 页面下,点击框架,选择 1:1:1 框架,如下图所示:
# O' z% B/ d2 M" B( ]
/ a2 X- B/ d- R3 | A, h 2010-5-19 07:36 上传
4 ^8 M Q# H* k7 s ^5 K下载 (8.28 KB)
0 Y& ^. E& n+ b3 g- c7 B/ t: U6 U+ j) ?% J: i) d' s
* q; X' @9 J" {) U% f
- {8 Y" K6 E- E
# G+ j6 o% R: B/ q
2、选中 1:1:1 框架,按住鼠标,把 1:1:1 框架拖到要加入框架的位置,如下图所示:3 }0 P) {5 j6 u. }, ~
& o5 k& ^# h) j! v0 m 2010-5-19 07:36 上传
2 y6 I% `5 }) u* ?/ O下载 (7.7 KB) ; p. v) F; T' P, t0 f, ]3 j+ R3 i* ~
9 J* Y: S% u" y5 z* W2 q# v& L5 R4 u$ U( }2 w4 @! I
1 b* M' M+ W: o5 X+ m
& ~# V, x" ~7 v3、添加好 1:1:1 框架之后,点击编辑 => 标题,编辑框架标题的属性,如下图所示:
" D6 y& f8 @) [8 L, Q5 x% R1 x8 z& l: {5 Q) A0 ]
2010-5-19 07:36 上传
' k ] s0 p1 I5 @0 V下载 (7.19 KB) h2 @- X; b+ W2 u9 B8 L
& _" X1 D' s5 E9 ]" s5 G
, j6 k0 H/ p; Y! E1 [* |4 r. e* e! N o. } Z& ~' [
# P* x# \: ~: N
4、点击编辑 => 样式,编辑背景和边框的属性,如下图所示:
: c2 [7 u5 `3 ]9 D6 d! I9 }2 \! B% p3 [
2010-5-19 07:36 上传
, U8 Y# m$ M" [5 i, x( Z* E+ q下载 (7.6 KB) 7 w6 l0 \2 o$ S6 d5 S7 X* G3 d4 P7 `
6 a( a6 q& J4 P, ?; ~! q/ R
3 A, ^+ C7 G! E0 o/ i+ N( ], e+ ^# \/ [/ @& A8 _3 ?; c F- I
) }/ m9 I o: D- h# H5、至此一个 1:1:1 框架就添加好了,可以继续添加模块,自定义设置完善框架。
( H' c* d1 @" t
& g% t8 g2 G+ N* [1 M6 T' h1:1:1 框架的效果,如下图所示:; K. U) D" {; S9 p- L
' n8 Y+ w3 E5 \
2010-5-19 07:36 上传
: V) W3 R4 S/ p+ Y$ x, s6 K6 a( Y下载 (13.94 KB)
* |5 _9 S5 L+ u; b$ t
! u, K( I& B' d9 Z( @, Z- H9 ?& A$ L2 J, g* V
! i3 @6 Z) g, N2 j4 O4 ]& d) [; o
( g- ?& r0 r3 q) O- t6 k
三、框架嵌套
1 u6 l$ {( h& ]" V$ [; v1 A$ r: H; ]0 g& m1 D
DIY 页面提供了100%框架,1:1 框架,1:2 框架,2:1 框架,1:3 框架,3:1 框架,1:1:1 框架,tab 框架,8 中框架种类,可以通过框架的嵌套,可以更好的设计出个性化的专题。4 y6 ?. o& v' \6 O
: l2 \% \& [. `: O, C
本例中,建立了一个 3:1 框架,在 3:1 框架3的部分中添加了一个 1:1 框架,在 3:1 框架 1 的部分中添加了一个专题类模块,然后在 1:1 0 n; p2 h- S( I/ p- k
" j# i0 G6 R' [6 ~; L: ]
框架中添加了图片类模块和会员类模块。建立之后的效果,如下图所示:: L$ K2 o9 z* |' h. b
0 z4 q8 }+ o5 @1 `0 y' F E7 m 2010-5-19 07:36 上传
! U6 @+ c( }4 M$ Z% S下载 (6.92 KB) 2 ~% m' l" z2 u' M" L6 W
; @8 g. M. o D4 |. }) b0 x
- A e }; H3 k* K' L- n
9 d% Y. f* r9 ]
R# U+ ^' S& X添加了框架之后,还需要添加模块,让整个专题栏目显示的更加完善,内容也更加丰富。
( b4 c! Z' B' a( V3 H: r$ \# b" N
2 h5 ]9 e; k& A; o/ k) r四、模块的使用
) Y' j- X- p4 a* u+ V: W门户模块提供了 6 大类、21 小类及其它 10 个展示类共 100 多种模块样式。站长可以自由的选择,如下图所示:
R8 }5 a7 e7 W# J3 f1 I# C/ I z' B 2010-5-19 07:36 上传
, O1 a t8 ]9 ?! f- q下载 (9.04 KB)
7 v2 g. o: T, [- @- e1 F1 I, P) T* y X3 G' A+ i) H
9 }9 y! N& T$ i t' Q( C; L- r( G' M" v, u8 V
在DIY门户时,添加了框架之后,还需要添加模块,让整个专题栏目显示的更加完善,内容也更加丰富。
1 D$ o, t$ ~. J5 `" t0 @本例中在 1:1:1 框架中添加模块
6 O" \& J. {1 R" W打开专题 DIY 页面,点击模块,选择帖子类模块,按住鼠标,将模块拖到要放置模块的位置,如下图所示:6 l* A- F. B" q2 u; E) x C. h3 I* B
( }/ @8 q. t1 V0 T% B/ a 2010-5-19 07:36 上传
1 Y% B, F, y# r8 m下载 (15.28 KB) 8 Q6 X2 x* d/ I* w$ m9 J
8 [' t7 E* r* A- o
* m4 ?1 R+ G& C( l; U
3 q$ T g& X8 C5 ~7 z% X! n
8 M i5 ~8 u2 W6 ~' J* D, R- N
1、编辑模块标题:
. W& M. V& F2 J
+ f3 v) R9 @7 a! [6 _" g6 |0 O点击模块右侧的编辑 => 标题,如下图所示:
+ S8 E1 D- P* X( }7 ?, E1 _" t6 t7 D4 }) [. o- ?
2010-5-19 07:36 上传
7 x0 n U5 S6 M1 B( @下载 (3.54 KB) 7 v5 k! ~& L( w
" C H g! K- G
; o8 O% w) N, p; Z7 o& q0 t% j! t
4 y- F0 P( x& ~$ P8 h2 e& @) s3 y
出现如下图所示的内容,填写相关内容,确定即可:
9 u7 |2 ~; K! f' G X3 t1 g& \6 _: L
2 N# `3 Y2 g5 D& I( w7 W 2010-5-19 07:36 上传+ V9 m I7 C3 m ~( ]
下载 (8.29 KB)
. [% @" s. k/ K4 Z
2 @6 g: I* d% _- z* }8 f4 m; v+ B/ J& O
; G% ^4 {5 X) K6 m6 P" d' Q! I
# A k5 o, F! p
模块标题:输入要显示的模块标题,如:最新帖子。$ w3 |& O! \; r) q2 |* L0 O
- I$ }& B# Z4 Y) k
链接:输入点击模块名称要跳转的链接地址,如http://localhost/dzx/forum.php
; M; C' b* b# g1 r; o
4 P0 f2 w n7 s" u' B图片:输入显示在模块名称前面的模块图标地址,如:./static/image/common/star_level1.gif& Q0 B* D, O' ^( p: ^( i) g$ d
. ~+ m: q9 A( j; G7 N9 l( j& P S位置:设置模块名称的显示位置,偏左或偏右! \4 U7 |" B4 l. s
3 X, K7 Z1 T8 R; s
偏移量:设置模块名称显示位置的偏移量
5 a, q1 ?% g! ~0 e ?" P# t0 X6 L2 x1 k& V- h" w
字体:设置模块名称字体显示的大小4 d& ~$ ?; f2 A& ]8 {* R3 E3 d
1 p8 b' n0 z9 k
颜色:设置模块名称的字体颜色
" F' ^" ?: D4 Y! L$ H" l) K
; W* G! n4 }" V2 `9 J& \( X7 [' V背景图片:输入显示在模块名称处的图片地址,如./static/image/common/star_level1.gif
/ O: ^6 D' a6 T) ? c
" x' i8 Y- m1 E3 N" `背景颜色:设置模块名称位置的背景颜色
9 _( Z1 l& s; ]3 r& T. N
8 [' z2 s1 ]* D& F# `5 ?* R/ a1 o设置后的效果,如下图所示:
* w+ w* \2 K; \! i) e+ k* G+ L$ X
2010-5-19 07:36 上传
! ^. }4 j1 ?0 M9 ]下载 (5.68 KB)
\8 M- ?( Z( }8 _# ?9 S
|9 P+ ]1 H, r; D& l, h" \' X4 i* E E1 Z2 S; b5 P
6 B1 Q3 p0 `2 @+ f
. _! H2 X# n3 o7 V1 ^
2、编辑背景和边框属性
5 d$ L/ P4 N9 N8 D9 c& r& Z+ t
: e* S1 W3 d& i; p2 |6 T点击模块右侧的编辑 => 样式,如下图所示:: `4 z* n4 A3 a
5 s& v5 w! C3 z, m8 I$ U% s# i. | 2010-5-19 07:36 上传 W$ z* S9 ?& j1 u! i/ L
下载 (4.55 KB) 2 ]7 J0 G2 p4 ]$ j j
* A- ^3 q% e5 c* f+ q/ z# i! \6 q9 ~# n* O
% X- x( Q7 X) l
' P2 q v3 v' o) g O. N出现如下图所示的内容,填写相关内容,确定即可
3 u3 p$ {7 H8 Y9 c' T, {, z" E) E9 F8 R* X. i2 m7 s- u
2010-5-19 07:36 上传
& T6 [+ H% K% p: _. h下载 (8.81 KB)
/ B* P3 Q2 S/ W. j Z
! c2 H: c; r0 n" e m: N" B
( K8 b7 h, X( w' e/ w2 B$ o( |3 h/ `8 F0 \! d/ _8 b+ E
+ m3 R" Y* s; H4 u. y
链接:设置模块中的内容的字体大小
9 l ]+ S( W1 s7 u5 x' f
! B0 Q* P, P9 V边框:设置模块边框的粗细,样式和颜色 D; k+ {9 Q, A# @8 E- N' l! w- V% H
; c& s8 K4 k( ^外边距:设置边框的外边距
. Z* K; c& @' u
* F8 I6 X A5 q5 z, ?, \( I内边距:设置边框的内边距
" m! @- z: |* @9 q+ B Y/ j, l( v% S. O* H( S7 M. `) U
背景颜色:设置模块的背景颜色+ F) b$ ]" B w# I" d& L& ?, `1 K
# c: _9 P& _ e! c
背景图片:输入模块背景的地址,如:./static/image/common/star_level1.gif
q0 [3 G; c) J6 r' o4 z- b6 S1 i7 v! F8 e; _# n/ N+ {( q
指定class:输入自己编写的样式名称,如 pbnv
- K$ z! b: Q! q! n2 h
, r5 L3 E m, ~这样一个模块就建立好了,可以用同样的方法添加更多的模块,设置后的效果如下图所示:
9 \- q: O# Z: k% P, ^* B3 t- p r0 a2 z0 t5 S( A+ k! P
2010-5-19 07:36 上传; t7 p) K2 P% y7 J) F( E
下载 (13.78 KB) ( }! u' j* w9 u! l3 _
, F' l6 Q7 o) X' B k3 h$ x! u
- j0 t" b/ w) U, C5 i, N7 a
; s% ?1 V/ C( c A% ~( e" |
3 J, Z @, c9 p4 m好了,本篇介绍到此点到为止,希望大家能够以实际建站过程中活学活用。Discuz! X1版本产品研发以用户需求为核心,坚持“融合”,拒绝“整合”绝不“拼凑”;消除“边界感”,把社区的四个基本模块(门户、论坛、群组、家园)的优点显露出来;产品有“延展性”,拥有一个好的骨架;重视“细节”,让用户在整个网站的操作都尽可能流畅;设计设重视产品的风格和布局,让不同部分间的跳跃感消失;充分发挥社区的四大基础模块的优势,互相包容,取长补短。如需更多了解Discuz! X1版本的功能,更关注其它相关主题介绍! |
|