云服务器促销,免费安装宝塔面板!
开启左侧

[DZ教程] 如何学习制作discuz!模板?DZ模板学习教程下载

[复制链接]
风雨兼程 发表于 2017-8-26 22:40:06 | 显示全部楼层 |阅读模式

本站会员必须 邮箱验证成功后 才能发帖。马上注册查阅更多教程,下载海量资源,让你轻松玩做站

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

# w. V9 D5 G1 M
* v" F. [: `, [+ ~
随着网络的发展,越来越多的朋友开始加入站长的行列。一批又一批的草根站长,开始在网络这个大平台上绽放。, P6 S; k4 {3 c# k: ~
Discuz!开源平台的出现给众多的站长带来了契机,同时也带来了挑战。Discuz!在短时间之内迅速在网络传播,甚至泛滥,一时间,网络上Discuz!内核的网站数不胜数。# s, ?' K. ?0 }# N. F' O( b# w
同样是Discuz!内核的网站,有的网站别具一格,吸引了大批的会员,而有的则过于普通,被网络大海淹没。Discuz!模板瞬间成了一个热点话题,大量的Discuz!模板迅速崛起,模板交易也成为一种热门现象。然而,模板毕竟是开发者主观设计的,并不能完全满足站长的需求,在这种情况下,模板定制服务开始风生水起。
; Q2 x, m! X0 ~2 a0 a$ R相比较而言,Discuz!模板可以批量出售,因而价格也比较低,对于大多数刚入门的站长来说,是一个非常不错的选择。但由于模板相对较为单一,也缺乏唯一性,也就使得使用了对应模板的网站缺乏了新鲜感和吸引力。与此大为不同的模板定制服务,则可以满足站长的多种需求,可以使网站更具特色,也更有竞争力,但高昂的定制费用却往往使众多站长朋友们望而却步!
2 p/ o- ^5 p# E8 L/ C$ n$ F现成的模板太单一,定制模板又太贵,这该怎么办呢?/ B% D3 ^8 B5 {, Z1 i% o8 L
求人不如求己,自己学会制作模板才是王道!
. v8 }& Y) e; f' S, l* q  ]模板制作到底难不难?其实不难!,总结开发出了这套只需7堂课就可以精通Discuz!模板制作的教程,即使是对模板制作一窍不通的人,只需要认真学习完本套教程,便可精通模板制作,学习完成后多加练习,便可成为模板制作的高手!
8 l# c, @7 o# q( R( m到时,你不仅可以自由设计自己的网站,还可以成为开发者,为别人设计开发模板,为你带来可观的收入!
5 A# V4 H* V  V  q; E  o0 M《7堂课精通模板制作》 ,采用【讲解+高清视频】相结合的方法教学,简单易懂,你绝对值得拥/ s- {" j- z, T1 O0 s! Z$ m

8 G* _/ {$ w5 r; s# y
01.jpg * y* A+ U1 |$ C$ o* w* D; B. K2 x
8 Q+ f3 q& |7 Y1 d3 o6 K8 @) n- t

1 v# q% x6 v# E' u, x, K下载地址:3 W6 v) s8 }& J" V: U
/ L& w3 e2 I3 V. O$ k- V

9 J+ [# h2 Q3 j2 q; x 精通Discuz!模板制作.zip (1.64 MB, 下载次数: 0, 售价: 150 元宝)
当流科技-专业Discuz建站、仿站业务,专注处理discuz!论坛挂马,专注提供论坛托管维护服务! 提供Discuz论坛空间、VPS、云服务器!咨询QQ 569160956 778521512
回复

使用道具 举报

 楼主| 风雨兼程 发表于 2017-8-26 22:51:07 | 显示全部楼层
第一课 基本知识储备- B1 O* c2 U) h# x
一、基本HTML代码 想学好网站的制作,最重要的一点就是能熟练掌握html的基本代码,以及这些代码的运用方法。在本书的第一章里面,将重点介绍我们在后期网站开发上面用得比较多的代码的讲解,如果能够熟练记住这些代码,相信,将会给你的网站开发道路开个好头。$ J1 ?' q2 S$ k- c' U/ W
0 e7 S2 ~3 w8 m1 e6 v
下面是一些基本的html标签代码:) h3 l6 x1 g+ {; ?
, l: r# S7 o- G. `$ V4 v
1. <a></a>超链接标签 写法:+ w6 B$ x  j: j% _% L/ t, c+ u9 x' ^
6 S3 h, O4 w4 i& L

( R  q, r6 d% z" b$ a
  1. <a href="这里填写超链接的地址">这里输入需要插入链接的文字或图片</a>
复制代码
" a0 ?- S7 }# y+ T4 D! l# G! u# Q4 g
' z3 n/ C3 ?* A) E3 f% e8 d% O
讲解: 这是一个超链接标签,表示鼠标点击文字或图片后打开一个新的网页。通常打开方式有两种,一种是在原窗口打开,另一种是在新窗口打开。% @6 Y8 o+ w  K0 V' X- B
6 {: p  ^9 F( G1 d0 j& |" @
代码的区别如下:) |2 ], S  `* r4 E8 R' B0 U
7 I/ A2 d( c- a7 J1 W4 Y
原窗口打开:

' z2 T7 e% {. _' X+ ~+ ^! @/ _9 d) b/ |7 p
  1. <a href=""></a> 新窗口打开:<a href="" target="_blank"></a>
复制代码
) u% r0 {* ]$ D9 Z4 ^; p+ }
以上是我们最常见的写法,加上target="_blank"以后表示在新窗口打开,不加则表示在原窗口打开。但是,有时仿站时我们会遇到有的网站在原窗口打开的代码中也添加了相应代码,这里也介绍一下,大家只需要了解,当看到相应代码时能够辨识即可。如果在原窗口打开,也可以加上以下代码: target="_self" 原窗口打开超链接 target="_parent" 原窗口打开超链接 target="_top" 原窗口打开超链接,且新打开的链接跳转到页面最顶部
& [( a9 b: {* Y) R. }
5 \: D/ d4 ?' P$ d% G8 d2. <b></b> 加粗标签 写法:

) `4 u4 q" D; t* _+ h* _- M+ R* ~
  1. <b>这里输入需要加粗的文字</b>
复制代码

/ {2 a5 f. k7 N( Z9 g5 P" [ ; E. x0 _/ j1 @( y4 ^9 |+ B+ W
讲解:

' g$ h% I* F8 Z7 x' n字体加粗标签,也就是将文字加粗的标签。4 u& P( k7 I1 G; B6 q+ N, K7 ^
7 M9 r; n- X& g+ ]7 y0 n: Z3 u
3. <br> 换行标签 写法: 一段内容<br />一段内容

+ G$ l- g9 _5 q- t6 n/ s; }" r2 z讲解: 换行标签,也就是通常我们使用回车键进行换行操作所对应的标签。 通常,我们用dreamweaver写这句代码的时候,系统会自动在br后面加一个左斜杠,原本的<br>代码就被自动写成了<br />代码,这样没有关系,两种代码都是正确的。# K  X0 @1 A/ A5 z

4 }  w. s- u% T8 G. o. `
8 y; @2 U8 p5 i4 X2 `- j
<font style=""> 2 D( A4 V8 d: _1 ?
讲解:字体标签。style中可以设置很多,比如字体的大小,颜色,样式等等这类的。
( Z! i9 {) V" L5 [
) ]! w7 p* ?! V3 c

/ k9 [$ U7 V5 f9 m+ q <h1>-<h6> 讲解:标题标签,<h1>代表最大,<h6>代表最小。
" e6 ]. @! Z3 x: ^( ?! \! `; C: C<hr> 讲解:水平线标签。
4 y8 m2 {& ?) o3 \9 q9 q, V1 _ <marquee> 讲解:滚动字幕标签。可以设置一段文字的滚动特效,例:
: Y, y& g: ~$ ?* j( L" B
  1. <marquee direction="left">当流科技</marquee>,
复制代码
) Y" D. a4 n: q! P/ _' x- G
) t1 U1 S1 I* _) N, ]* Y
$ ?( F6 X4 Y3 Z3 U3 j) X4 r9 o* X
这段代码实现的功能是:“班班网”将会从右到左滚动。 ! k$ h; _- b! Y$ f

8 j; E# q+ {0 x2 f* c3 ^

  m' n8 v1 ]  c5 g5 h<i> 讲解:字体倾斜标签。4 f8 G5 r1 W+ C9 X( I9 j

! t# r& v( w5 l  C9 z& L
2 w1 v$ Z; p- t/ n' O; W! e4 c$ @
<img src="" style="" width="" height=""> $ e8 F) ^# k, i" B. X
# E6 b, U1 U. p+ E( d

9 p. @' y" Q2 G; d! l讲解:图片标签。Src代表图片地址,style中可以设置图片显示的样式,width代表图片的宽度,height代表图片的高度。
/ ^9 N% o- u3 L5 I/ g9 V$ V6 C2 z5 |
; R- V+ C. L: g+ d* v1 `' R9 k
<p style=""> 讲解:段落文字标签
% \: r: m5 i# G4 S. v* J8 N& R9 S1 ~  ?8 S8 d& X1 K5 E
0 P: p* ?; @0 x5 v0 x* a
<strong></strong>
' e( k- ?/ A$ C  \4 h8 `* m% j, q6 T
9 I* N% X7 [) n7 z讲解:文字加粗标签。<b></b>同样也能实现字体的加粗。
0 i1 U% B- k3 q+ D0 a$ A) d <ul> 讲解:定义无序列表标签。 <li> 讲解:项目列表标签。 <ul> <li></li> <li></li> <li></li> <li></li> </ul> <div> 讲解:块级元素。这个是相当重要的,一定要记熟哦! 记住上面的基本标签代码后,我们开始基本属性代码的讲解:
, h9 B6 M" T  T- ^" @
# D! I5 e4 t$ n
! H: J7 b" j) S
1、Margin和padding属性代码 讲解:margin是外边距标签,padding是内边距标签。它们有一个共同点,就是都可以定义四个方向的位置:top、right、bottom、4 k$ ^1 [0 {, }2 O. V
left。这里为什么先写right,后写left呢?
0 g* F* P, i' p; _* Z% D举个例子说明下吧。例:margin:1px 2px 3px 4px;这里的四个参数代表的意思分别是:外边距距离上面1px,外边距距离右边2px,外边距距离下面3px,外边距距离左边4px。
4 [8 w" |  R+ _$ N$ `) p0 b- x' R, S5 d( j* T

$ s  }- g; H  s8 z 测试:padding:1px 2px 3px 0; 当然,也有些特殊情况,例:margin:3px 4px;这里只定义了两种参数,那这又是什么意思呢?其实原理是一样的,这里的3px代表的是外边距距离上面和下面为3px,4px代表的是外边距距离右边和左边为4px。这下子明白了吧! 测试:padding:0px 3px;9 S! `. z' O5 m
) x& m+ W! `% d% h# X: X; z6 o6 o% I* C
$ r; V+ L3 f2 L6 I% _5 P6 T$ {( t- t, T
最后,还有一种特殊的情况,例:margin:0px。这下子大家可能又迷糊了,这又代表什么意思呢?不用急,对照上面两种情况想想,你一定可以发现,其实
& T4 {# o9 F5 m2 [7* h) r2 f9 {% B1 s$ Q4 T: r
原理是一样的,这里的0px代表的是外边距距离上、右、下、左都为0px。
7 x7 p' p/ \% [2 k8 y# Q 测试:padding:10px; 下面介绍一种在后面用得比较多的一个相当重要的代码:margin:0 auto; 居中 当然,margin和padding的用法还不止这些,假如我们想只定义外边距距离上面的距离为5px,那定义方法又如何呢?
$ {; e8 b1 U% i! E0 s# T+ p4 Y5 Y9 i7 A0 ~8 o- ^

6 p4 e2 S+ s4 C9 O7 I0 `当流科技来告诉你:margin-top:5px;相同,如果我只想定义外边距距离下面的距离呢?这个相信学到这儿的你一定可以轻松解决了。 ) k) {4 L$ {, q# ^5 p0 K

! a$ D) n' [9 t
' Q3 r, k7 v. ^- z6 \2 g  s. D
2、border属性代码 讲解:border是边框代码,可以用来定义边框的大小粗细、颜色之类的属性代码。例:border:1px solid #000000; 其中,1px代表边框的粗细为1px,一般我们做网站的时候是设为0px的;solid代表边框为实线,(dashed代表虚线,dotted代表点线);#000000代表边框的颜色。# p& Y, Q- e4 a" w; x0 S' ?
当然,我们也可以分开定义边框: 例:定义上边框为1px,虚线,白色 答:border-top:1px dashed #ffffff; 测试:定义左边框为5px,点线,黑色 3、background属性代码 讲解:background是背景属性代码,可以定义背景的颜色、图片、位置以及重复方式等等。1 J4 u9 X/ C' P! i9 ]; o6 z
9 U$ _+ o) {0 T9 r* H5 _0 b

7 U, }* _9 J) I2 v: J这里主要讲解常用的四种属性代码: background-color:#000000; 背景颜色 background-image:url() ; 背景图片 background-position: 背景位置 background-repeat 背景的重复方式
5 d" J+ k3 A  S. w1 r4、clear、color和direction属性代码 讲解:clear清除代码,color颜色代码,direction方向代码。 5、display:#属性代码 讲解:display即显示方式隐藏代码,#可以设置成hidden(隐藏)5 s, p! J& v6 Q- w4 ~0 g; [7 q( `7 v
- q; d) o% y) B: Y6 A

* x, Y" d" e3 A7 J1 G4 F% ] 6、float属性代码
& J$ f9 U4 |! l讲解:float浮动代码,主要用到的两种方式为left和right,这里的用法也
+ c* F' t' B1 ~$ h) p: ?* c9 R- F! \/ Q. R7 M% P" v: K) S
当流科技-专业Discuz建站、仿站业务,专注处理discuz!论坛挂马,专注提供论坛托管维护服务! 提供Discuz论坛空间、VPS、云服务器!咨询QQ 569160956 778521512
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩课程推荐

Discuz!论坛网盘附件免跳转下载(手机版网

主讲:当流科技 Discuz插件

抱歉,当前存在网络问题或服务器繁忙,详细错

主讲:我心枫叶 Discuz!教程

宝塔面板绑定域名无法访问后台怎么解决?

主讲:风雨兼程 服务器学院

discuz论坛搬家教程,如何搬迁到新服务器?

主讲:风雨兼程 Discuz!教程

宝塔面板phpmyadmin 数据库502 Bad Gateway

主讲:当流科技 服务器学院

Discuz!X3.3全新安装和升级后快速回复框丢

主讲:风雨兼程 Discuz!教程

宝塔面板mysql怎么用navicat 连接数据库呢

主讲:当流科技 服务器学院

Discuz! X3.4虚拟人气虚拟用户在线插件 完

主讲:执手天涯 Discuz插件

商务合作

0551-66191059
service#dangliu.net
点击这里给我发消息
dz论坛/Discuz!论坛新手

关注微信公众号

QQ扫码 加 DZ技术群