Posts Tagged ‘DNN皮肤’

结构化CSS

八月 8th, 2011 by yangyao | 评论关闭 | Filed in DNN实习

如何增加css代码的复用率,这个制约着开发的效率。

这么多天学习DNN皮肤,我懂得了一点就是结构化。在DNN皮肤的制作中,我发现了DNN在写html和css代码的连个很大的优点。

其中一个就是固定的一个HTML代码块,叫做pane结构,还有一个代码块叫做container,container代码是书写在pane结构中的。

在书写了很长时间的CSS之后很多人都会发现自己写的结构放佛是固定的。

从上到下,一次是head,logo menu,然后是banner,下面再是某种左右或者上下结构。。

DNN中pane结构就是用了解决下面的问题的,pane结构大致是这样子的。

<div id=”allPane”>
<div id=”TopPane” runat=”server” visible=”false”></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”LeftPane” runat=”server” visible=”false”></td>
<td>
<div id=”HeadPane” runat=”server” visible=”false”></div>
<div>
<div id=”CenterTopPane_AB_A”><div id=”CenterTopPane_A” runat=”server”></div></div>
<div id=”CenterTopPane_AB_B”><div id=”CenterTopPane_B” runat=”server”></div></div>
</div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”MiddleLeftPane_A” runat=”server” visible=”false”></td>
<td id=”MiddleCenterPane_A” runat=”server”></td>
<td id=”MiddleRightPane_A” runat=”server” visible=”false”></td>
</tr>
</table>
<div id=”ContentPane” runat=”server” visible=”false”></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”MiddleLeftPane_B” runat=”server” visible=”false”></td>
<td id=”MiddleCenterPane_B” runat=”server”></td>
<td id=”MiddleRightPane_B” runat=”server” visible=”false”></td>
</tr>
</table>
<div>
<div id=”FooterPane_ABCD_A”><div id=”FooterPane_A” runat=”server”></div></div>
<div id=”FooterPane_ABCD_B”><div id=”FooterPane_B” runat=”server”></div></div>
<div id=”FooterPane_ABCD_C”><div id=”FooterPane_C” runat=”server”></div></div>
<div id=”FooterPane_ABCD_D”><div id=”FooterPane_D” runat=”server”></div></div>
</div>
<div id=”FooterPane” runat=”server” visible=”false”></div>            </td>
<td id=”RightPane” runat=”server” visible=”false”></td>
</tr>
</table>
<div id=”BottomPane” runat=”server” visible=”false”></div>
</div>

由一张很大的表组成,上下左右各有头部,上下左右,各有很多pane。pane结构的CSS代码如下:

#allPane {
padding:0px 22px 3px;
min-height:280px; position:relative; z-index:11;
}

.dnnpane {
padding: 0 10px 0;
}

.pane-box,.MiddleCenterPane_A {
vertical-align: top;
}

.LeftPane,.RightPane {
width: 20%;
vertical-align: top;
}

.MiddleLeftPane_A,.MiddleRightPane_A {
width: 27.3%;
vertical-align: top;
}

#CenterTopPane_AB_A {
float: left;
width: 50%;
}

#CenterTopPane_AB_B {
float: right;
width: 49.9%
}

html>/**/body #CenterTopPane_AB_B {
width: 50%;
}

#Middle_ABC_A,#Middle_ABC_B {
float: left;
width: 33.333%;
}

#Middle_ABC_C {
float: right;
width: 33%;
}

html>/**/body #Middle_ABC_C {
width: 33.333%;
}

#FooterPane_ABCD_A,#FooterPane_ABCD_B,#FooterPane_ABCD_C {
float: left;
width: 24.9%;
}

html>/**/body #FooterPane_ABCD_A,html>/**/body #FooterPane_ABCD_B,html>/**/body #FooterPane_ABCD_C {
width: 25%;
}

#FooterPane_ABCD_D {
float: right;
width: 24.9%;
}

html>/**/body #FooterPane_ABCD_D {
width: 25%;
}

.CenterTopPane_A,.CenterTopPane_B,.MiddleCenterPane_A,.MiddleLeftPane_B,.MiddleCenterPane_B,.MiddleRightPane_B,.FooterPane_A,.FooterPane_B,.FooterPane_C,.FooterPane_D {
width: auto !important;
}

.DNNEmptyPane {
width: 0;
margin: 0;
padding: 0;
}
/* =E Pane */

pane的结构是很灵活的,没有任何绝对的像素,都采用白分比以及最小宽高组成。如果不往pane加内容pane也就不显示。

这个大大的方便了CSS的编码,只要做少量的修改既可以增加和完善pane,并且可以不断的重复使用。

在DNN中的另外一个优势是container,在网页布局中我们总是使用各种类似容器的东西承载各种内容。

就像一个小盒子,每个盒子都有标题,背景,然后有一个内容框。做这样一个框框放置于pane结构中。选好适合的pane效果就排出来了。

container的代码相对简单,这里就不全部放出了。

大致就是这些,在DNN中的MENU使用了jquery的一个jdmenu的控件,这个给导航条的建立提供了很大的方便,这一点也是很方便的,限于篇幅以后附上。

Tags: ,

对比DNNCMS与joomla

八月 5th, 2011 by yangyao | 评论关闭 | Filed in DNN实习

到现在我竟然发觉自己对DNN的了解已经超过joomla了。相比较与我曾经接触过的一些PHPCMS的的经验,发现DNN的有点其实有很多。

很多时候我们认为在linux平台下最好最省钱,因为不用购买windows,才知道使用lamp平台构建网站还是很不方便的,很多公司自己的服务器才不会安装linux呢,毕竟服务器不单单是web服务器也包括很多其他的东西需要管理,使用linux无形之中就需要有专门的维护人员,然而使用window服务器就可以完全免除这样的问题了。

对与windows的操作很多人都会,这个其实还要更加省钱一些。虽然IIS也可以安装APACHE但是这个优势也并不大。

另外一个值得对比的就是模版,使用PHPCMS,模版即意味着功能与外观,模版不仅是一个DIV+CSS的构架,并且是一个结合了PHP与SQL语句的大段代码。

这样导致模版中出现很多的服务器代码,严重的影响了维护与修改。在这一点上的模块化程度真的很低。

在使用DNN之后,我发觉其实它的有点就在于此了,美工制作皮肤很少受服务器代码的影响,这里的美工只要懂得CSS+DIV布局就可以做一套完整的设计,对与王站皮肤外观就可以有更好的体验。

说到皮肤,在PHPCMS上修改皮肤外观是很麻烦的,因为多个页面,使用的样式表在操作上并不可视化,修改了查看效果也是有很大的差异。

DNN皮肤制作之中,就免除了这些,皮肤包括skin和container两部分,一个完整的皮肤需要一个skin并且可以拥有多个containner这样子在布局就会有很大的好处,即便是每一个页面也可以有独特的色彩搭配。这样的做法实在是很不错。

然而缺陷在于DNN的模块相对与较少,中文的资源也不多。在PHPCMS中新闻模块之类的东西在开发皮肤的时候直接使用SQL语句对新闻表进行查询就可以得到一个新闻更新展示的模块,在DNN中便相对麻烦,得通过安装模块包进行实现。

然而模块有模块的好处,方便了哪些不懂代码的人也可以方便的进行操作。

我突然明白为什么DNN在国外要比国内发展的好,就是因为模块化,使用者不必懂任何的代码就可以打造一个很个性化的网站。

学校的星空网使用DNN将会成为一个不错的选择。

Tags: , ,

制作DNN皮肤的一点心得

八月 4th, 2011 by yangyao | 评论关闭 | Filed in DNN实习

一、皮肤的制作要求:

1.皮肤要兼容IE7火狐和谷歌。

2.还有网页横向纵向也要都能延伸

3.按照效果图进行制作。

4.通过W3C验证。

5.container不能定宽和高。需要延伸。

皮肤总结。

1.虽然皮肤以及容器是可以随内容延伸,但是一些间距是固定的,比喻容器中一段文字与另一段文字之间的距离。上下左右的间距都需要和设计图上一致

2.文字的大小写,超链接的颜色,文字的位置都必须一致。

3.切图的时候要小心,一个像素的偏差就会导致效果上有断节,放大之后会很明显。

4.正确的写浮动,定位,清除浮动,否则IE7的效果很奇怪。

5.Css是复制过来的,里面有很多不必要的属性,会对自己的效果有影响,大胆的清除,然后看效果,没有用的就删除。

6.一个简单的背景色的使用,位置不对的时候可能就把切的透明背景给浪费了,有的时候圆角不一定要切很多张,适当的用边框线也可以收到很好的效果。

Tags: ,

开始承受压力

七月 28th, 2011 by yangyao | 评论关闭 | Filed in DNN实习

昨天答应李美芳姐姐在四天内完成一套皮肤,我表示压力很大,但是我这样子慢吞吞实在是说不过去。
能怎么办呢?那就硬着头皮说四天内完成。我感觉压力实在是很大。
昨天晚上的时候完成了简单的布局。
今天中午做完了所有的container以及一些皮肤的基本布局。下午打包进行了安装和排版,总的来说不算很慢。
但是我一眼就看到了自己不会做的地方,那就是jdmenu那个菜单我不会,估计明天不得不硬着头皮去问姐姐了。
感觉李美芳姐姐对我真的一点都不包容啊,就是在挑错,也不太愿意教我。o(︶︿︶)o 唉,能怎么办呢?人家没有义务教我。
都是来上班的,我还增加了人家的负担。好无助哦。那能怎么办,要达到自己的要求不得不厚着脸皮啊。也不好意思被赶走啊。
得自己有个要求,明天上午把所有的排版弄好。下午问姐姐jdmenu的使用。周一的时候就把背景图研究下,然后做好浏览器兼容,并排错,周二上午完成DNN5的测试然后导包。
就这样一步一步吧,不得不有计划,否则真的完不成。
其实我最担心jdmenu.那个看上去好复杂啊。

Tags: ,

熬出来

七月 21st, 2011 by yangyao | 评论关闭 | Filed in DNN实习

做皮肤是一件细致的活,总是以为把大概作出来就可以蒙混过关了。
但是工作不是考试。做的差不多,永远都是差不多,顾客不需要差不多的。
李美芳姐姐总是能在我的网站上找到不足。然后叫我修改有的时候我有点厌烦了。我总是想这个我已经会了。
可是会了不重要,这里不是课堂不是会了就好,还要把效果作出来才好,
怕麻烦是做不成事情的,所以最终想不使用containner就排版好的,后来还是不得不做了一个container,再后来把containner做的很好了,就连圆角都切的很漂亮了。
然而还是有很多问题,这里高了一点,那里过去一点,很多的一点一点,网站就是难以完善。
想完美永远需要很多的耐心,有的时候我觉得自己的进展实在是太慢了一点。
然而没有办法,实习生,要努力。
我想这也是我在这里最大的收获了,开始学会思考,开始学会适应,经历才是一个人难能可贵的东西。
经历之后人的眼光也就放远了。
所以呢,不抱怨,该做的时候努力加油。

Tags: ,

回到 顶部 ↑
Free Web Hosting