从零开始定制外观

前言:

定制网站其实不难,只要你从现在开始认真学习这个教程,一步一步的从零开始。
你不需要懂任何后台语言,就能轻松定制个性网站

从零开始定制网站的教程不会一次就教会你所有的东西,那样是不可能的,本教程所做的是一步一步从零开始教你如何定制动态网站。
所以这一篇教程首先是企户动定制动态网站的一个最基本的介绍,这里会涉及到HTML的基本规则,一些HAL专业术语,以及定制动态网站的设计思路。

进入教程前,首先要下载企户动网站定制SDK   详细介绍与下载SDK | 安装详情   如有问题欢迎咨询   QQ:1957729831  点击这里给SDK客服发消息

一.基本创建与调试

1.1)打开SDK

安装完成后,双击打开桌面中的企户动站点管理(如果桌面没有企户动网站定制工具的图标,可以在 开始运行 ==> 所有程序 ==> 企户动 ==> 企户动网站定制SDK ==> 企户动网站定制工具)

企户动图标 企户动站点管理地址

之后我们看到企户动站点管理的窗口,点击外观定制入门旁边的"打开该网站外观目录"

企户动界面外观

点击后进入外观文件中,在这制作我们的外观

1.2)创建文件夹

进入Skins文件夹中创建一个名为 test的文件夹,进入后再创建一个 Html 文件夹。
创建完文件夹后,完整的目录结构为 Qihudong/Portals/242/Skins/test/Html

企户动外观详细路径

完整的目录


1.3)创建 index.html 文件

打开你常用的HTML编辑器,把下列代码都拷贝到你的记事本。保存为 index.html,到html文件夹。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>企户动入门教程</title>
</head>
<body>
</body>
</html>

1.4)添加"主区域"

我们在 <body> 标签中新建一个 “主区域”

<body>
  <div class="body" hal:area="mainArea"></div>
</body>
  • hal:area - 定义区域
  • hal:area="mainArea" - 意思是创建一个名为 mainArea 的区域。每个页面必须有一个 mainArea 区域

Hal 扩展属性是我们企户动专属的属性语言,只需简单的HAL代码即可创建动态网站。


1.5)登陆后台更换外观

在浏览器中输入 http://startkit.qihudongsite.com/qihudong 进入"网站定制入门"这个网站的后台登陆界面

企户动后台登陆界面

默认账号:designer
默认密码:123456789

登陆后,看到我们企户动的整个后台界面与默认的外观
首先将外观更改为刚刚新创建的 test外观。"点击界面"中的更改外观

企户动后台外观

点击进去后,看到更改外观的功能区域,选择上方的更改外观选项
看到当前选中了公用外观中的“StartKit”外观,选择隔壁的私有外观,就能看到我们新建的"test"外观。选择好后 "点击生成"再"点击应用"

企户动网站 企户动网站外观功能界面

应用后,自动返回主页面。现在更换成了我们刚刚新建的test外观,只有一个区域的页面

1.5)开始制作首页

在开始制作首页之前,我们先要了解首页的大概结构:

企户动新手教程架构
  • HEADER(头部) - 这里只要放置网站的LOGO
  • NAV(导航) - 放置导航栏
  • MAIN(内容区域)- 放置网站的详细内容,如:广告轮换、文章、友情链接等等。
  • FOOTER(尾部) - 放置版权等信息

大概了解结构后,我们将进行各个部分的制作

二:制作一个动态的LOGO

企户动头部制作架构图

首先我们制作HEADER(头部)部分

2.1)编写LOGO的代码结构

将下列代码放到 body 中,主区域(mainArea) 的上方

<div class="logo">
<h2>企户动教程</h2>
</div>

2.2)添加简单的HAL代码将静态页面变为动态

<div class="logo" hal:element="logo">
<h1><img src="http://qihudong.chinagdcj.cn/portals/0/skinguide/images/test/Qihudong.png" alt="企户动" hal:attr="src logo.imageUrl | alt logo.name" height="60" /></h1>
<h2 hal:text="logo.name">企户动教程</h2>
</div>
究竟发生了什么?
  • hal:element - 声明外观元素 / hal:attr - 替换HTML标签属性 / hal:text - 替换HTML标签文本
  • hal:element="logo" - 声明这标签为 logo 元素,声明外观元素后就能使用logo中的对象了 LOGO对象
  • hal:attr='src logo.imageUrl | alt logo.name' - 将 <img /> 的属性 src 更改成动态的 Url 地址,将属性 alt 更改为动态 logo 的名称,使用 | 分割每个属性
  • hal:text="logo.name" - 替换HTML标签文本为动态的 logo 名称

2.3)更新测试

登陆后台更新外观,生成完外观后,关闭外观界面。我们发现页面中多了一个"测试"的字样,这个就是我们刚刚添加的动态 logo!将鼠标移过去,点击"设置标志"

企户动LOGO添加

看到了 logo 的设置面板,这里的名称就是我们刚刚用 logo.name 替换的文本.我们将名称修改
"点击上传",将logo图片上传

企户动LOGO添加界面

上传完后,点击设置标志版面右上角的"保存按钮"

企户动LOGO添加界面-1

完成后看到最终效果,使用简单的HAL语句将静态的LOGO变成了动态的LOGO!

企户动LOGO效果图

三:制作一个动态的导航

企户动导航架构图

然后我们来到导航的制作部分

3.1)给页面添加宽度和链接CSS

在制作导航之前,我们先给页面添加一个宽度和链接样式表
在.logo 与 "主区域" 外添加一个名为Q的DIV

企户动宽度添加

之后在Html文件夹中创建一个名为css的文件夹,在里面新建一个名为style.css的样式表。之后链接样式表

企户动添加样式

在样式表 style.css 中添加:

/*最外层宽度*/
#Q { 
	width: 980px;
	margin: 0 auto; 
}

3.2)编写一个简单的导航结构

将下列代码拷贝到logo下方

<ul class="nav" >
  <li><a href="#">首页</a></li>
  <li><a href="#">产品展示</a></li>
  <li><a href="#">关于我们 </a></li>
  <li><a href="#">联系我们</a></li>
  <li><a href="#">新闻动态</a></li>
</ul>

在样式表 style.css 中给导航添加简单样式:

/*导航*/
.nav { 
	margin: 10px 0; 
	padding: 10px;  
	border: 1px solid #999; 
	overflow: hidden; 
	*zoom:1;
}
.nav li { 
	float: left; 
	margin: 0 20px;
}
.nav li a{ 
	color: #666; 
	font-size: 14px; 
}

静态导航完成后效果

企户动静态导航完成效果图

3.3)添加HAL代码将静态导航变为动态导航

第一步:使用HAL给导航声明外观元素:

在.nav 中添加 hal:element="menu"

企户动声明导航元素
究竟发生了什么事?
  • hal:element - 声明外观元素
  • hal:element="menu" - 将某标签声明为导航元素,声明外观元素后就能使用导航中的对象了 导航对象

第二步:添加HAL属性

将下列代码拷贝添加到导航中

<hal hal:call="renderMenu(menu.main.all)"></hal>
<hal hal:func="renderMenu(menus as menuList)"> 

	<hal hal:each="menuItem menus">
	  <li><a href="#" >首页</a></li>
	  <hal hal:remove="">
	  <li><a href="#">产品展示</a></li>
	  <li><a href="#">关于我们 </a></li>
	  <li><a href="#">联系我们</a></li>
	  <li><a href="#">新闻动态</a></li>
	  </hal>
	</hal> 

</hal> 
究竟发生了什么事?
  • hal:call - 调用函数 / hal:func - 定义函数 / hal:each - 循环输出指定的内容 / hal:remove - 隐藏掉不需要显示的代码
  • hal:call="renderMenu(menu.mian.all)" - 使用hal:call 属性调用 renderMenu 函数,函数的参数 menu.mian.all 作用为调用主菜单项
  • hal:func="renderMenu(menus as menuList)" - 使用hal:func定义一个菜单集合参数menus,类型为菜单列表menuList
  • hal:each="menuItem menus" - 历遍menus集合,循环输出每一项menuItem
  • hal:remove="" - 隐藏掉不需要显示的代码。只有后台生成hal才会隐藏,正常双击打开静态HTML页面没任何影响。

第三步:替换循环中输出的内容

使用 hal:remove="" 隐藏掉了不需要的代码后,现在循环中的内容是

企户动循环输出菜单

将在循环中<a>标签的文本内容 "首页" 替换成动态文字内容,具体代码:

<li><a href="#"  hal:text="menuItem.name">首页</a></li>

之后将<a>标签的href属性替换为动态地址

<li><a href="#" hal:attr="herf menuItem.url" hal:text="menuItem.name">首页</a></li>

完整的代码为(不建议粘贴,自己录入会让你更容易理解):

<ul class="nav" hal:element="menu">
 <hal hal:call="renderMenu(menu.main.all)"></hal> <!-- 调用菜单函数 -->
 <hal hal:func="renderMenu(menus as menuList)"> <!-- 定义一个菜单函数的开始 --> 

 <hal hal:each="menuItem menus">
   <li><a href="#" hal:attr='href menuItem.url | title menuItem.title' hal:text="menuItem.name">首页</a></li>
   <hal hal:remove="">
   <li><a href="#">产品展示</a></li>
   <li><a href="#">关于我们 </a></li>
   <li><a href="#">联系我们</a></li>
   <li><a href="#">新闻动态</a></li>
   </hal>
 </hal> 

 </hal> <!-- //定义一个菜单函数的结束 -->
</ul>

3.4)更新测试

之后我们登陆后台,生成完外观关闭更换外观界面。
看到我们刚刚添加的导航菜单,我们把鼠标移动到菜单中,看到"添加的按钮"

企户动导航内容添加

"点击添加"后,看到添加菜单的功能界面

企户动导航添加界面

之后我们选择链接类型中的新建页面,与修改好下方的名称
(在新建菜单的同时也新建一个名称相同的页面,并将菜单链接到页面)

企户动导航添加界面-1

最后"点击右上方的保存按钮"就能生成菜单项。

企户动动态导航效果图

然后到主区域(MAIN)部分的制作。在主区域中,需要学习4个不同类型的内容制作

企户动主区域制作结构图   企户动主区域制作内容架构图

 

四:制作一个动态广告轮换模块

企户动主区域制作内容-广告轮换

4.1)编写广告轮换代码

第一步:添加广告轮换所需的JS插件

我们把下列代码粘贴到<head></head>之间

<script type="text/javascript" src="http://qihudong.chinagdcj.cn/portals/0/skinguide/images/test/jquery.min.js"></script>
<script type="text/javascript" src="http://qihudong.chinagdcj.cn/portals/0/skinguide/images/test/jquery.carouFredSel-6.2.1.js"></script>
究竟发生了什么事?
  • jquery.min.js - 这个是1.72版的jQuery文件 什么是jQuery?
  • jquery.carouFredSel-6.2.1.js - 这个是广告轮换所用到的jQuery插件

企户动外链JavaScript文件

这里采用了外链的形式,是为了方便大家,省去下载的时间。

第二步:编写广告轮换的结构和调用插件的代码

将广告轮换Html结构代码拷贝到"主区域(mainArea)"中

<div class="slideshow clearfix">
 <div id="slideId1">
    <div class="slide">
        <img src="http://qihudong.chinagdcj.cn/portals/0/skinguide/images/test/banner.png" height="400" />
    </div>
    <div class="slide">
        <img src="http://qihudong.chinagdcj.cn/portals/0/skinguide/images/test/banner2.png"  height="400" />
    </div>
 </div>
 <a class="prev" id="prev_02" href="#"><span>prev</span></a>
 <a class="next" id="next_02" href="#"><span>next</span></a>
</div>	   

图片采用外链,为了方便操作。

第三步:添加调用广告轮换插件的代码

添加在广告轮换HTML的下方

<script type="text/javascript">
  $(function() {
     $("#slideId1").carouFredSel({
        responsive: true,
        scroll: {
          fx: "crossfade"
        },
        prev: {button: "#prev_02",key:"left"},
        next: {button:"#next_02", key:"right"}
    });
});
</script>

添加完成后,现在双击静态HTML页面就能看到广告轮换能正常切换,这样就完成了第一步,将静态广告轮换制作完成。

第四步:将index.html中的广告轮换代码隐藏掉

hal:remove="" 将广告轮换内容隐藏。
因为我们要将广告轮换的内容变成模块,所以要将index.html中的广告轮换代码隐藏掉,就算添加了隐藏代码,双击静态HTML页面也完全没有任何影响。

企户动广告轮换

上图是完整的结构,就上述的4部就完成了广告轮换的基本制作。现在将静态广告轮换的代码变成动态的广告轮换模块

4.2)创建放置广告轮换模块的文件夹

在Html文件夹中创建以下目录结构的文件夹与文件( DeskTopModules/slideshow/slideshowList/slideshowList.html )

企户动广告轮换文件目录结构

其中 DeskTopModules/ 是放置企户动功能模块的文件夹,而 slideshow/slideshowList/ 就是放置广告轮换模块的文件夹,而与文件夹同名的slideshowList.html是广告轮换默认内容布局文件。
注:DeskTopModules下的文件夹名称不能更改

4.3)添加HAL代码将静态广告轮换变成动态的广告轮换模块

第一步:将代码拷贝到slideshowList.html中

将 4.1)第四步中隐藏掉的广告轮换代码(即注释“幻灯片内容”所包含的代码),拷贝到slideshowList.html中

企户动广告轮换模块静态内容

第二步:添加HAL代码

1.添加HAL代码判断广告轮换模块是否有内容

企户动广告轮换模块判断是否有内容
究竟发生了什么?
  • hal:if - 判断是否符合某个特定条件表达式(条件表达式,包括表达式和对象判断属性 ),如果符合条件显示标签内内容,如果不符合条件则不显示。
  • hal:if="Slideshow.Slideshows.hasItem" - 则是判断广告轮换内是否有内容

2.替换ID

我们制作页面的时候,如果一个页面有多几个广告轮换,我们就要写多几次调用的代码,还需要自己去页面中修改,很不方便。
因为相同的ID再一个页面中只能出现一次。所以这里的的id="slideId1" 不能在一个页面里多次使用,那么我们应该如何做才能将它变成能多次使用的“模块”呢?

企户动广告轮换模块替换ID

解决方法就是将ID变成不重复唯一的,那究竟要怎么做呢?
只要我们利用企户动的 moduleId属性 将静态的ID替换成动态的ID

企户动广告轮换模块替换ID-1
究竟发生了什么?
  • hal:attr - 替换标签属性
  • hal:attr='id "slideId"+slideShow.moduleId' - 意思是将id 替换成 "slideId" + slideShow.moduleId。
    而 slideShow.moduleId 是将模块的Id数读取出来,每个模块的Id都是唯一不同的,所以能生成不重复的动态ID
    假如 slideShow.moduleId 生成为5776,那么最后将id="slideId1" 替换成 "slideId5776"

3.循环内容

之后我们要循环输出每一张广告轮换的图片,就需要使用hal:each历遍广告轮换集合

企户动广告轮换模块替换ID-2
究竟发生了什么?
  • hal:each - 循环内容 / hal:attr - 替换HTML标签属性
  • hal:each="slideShowItem slideShow.slideShows" - 循环输出广告轮换集合的每一张图片。
  • hal:attr='src slideShowItem.featuredImageUrl' - 替换src属性替换为广告轮换模块的图片URL

4.将模块内其他的id都替换成动态id

企户动广告轮换模块替换ID-3

将id="prev_02"与id="next_02" 替换为动态id

企户动广告轮换模块替换ID-切换按钮

JS里有3个调用ID的地方是需要我们替换成动态的id,那我们应该如何替换呢?

企户动广告轮换模块替换ID-JS内容替换

这里一个#slideId1就等同于前面的id="slideId1",第二和第三个分别是 prev / next 这两个按钮

首先我们回顾一下hal的属性,hal:attr 是替换标签属性,而hal:text 是替换HTML标签文本属性,这样的话。
我们JS里的调用的参数都是<script>标签中的文本,所有我们使用hal:text将所需的id替换掉。

企户动广告轮换模块替换ID-多个JS内容替换
究竟发生了什么?
  • hal:text - 替换HTML标签文本
  • hal:text='#slideId1 "#slideId"+slideShow.moduleId' - 意思是将文本#slideId1 替换成 "#slideId"+slideShow.moduleId 。我们发现这里的替换与之前的有点不同,因为hal:attr 是替换HTML标签属性,而hal:text是替换HTML标签文本,文本就要将需要替换的文本都写完整,之后将#slideId1替换掉

将另外另个按钮的Id也使用hal:text替换掉,替换多个文本使用 | 分隔开

企户动广告轮换模块替换ID-多个JS内容替换-1

5.隐藏掉不循环的代码

之前只循环一条内容,而我们复制过来的代码是有两条,我们将另外一条内容使用hal:remove=""隐藏掉

完整的代码为(不建议粘贴,自己录入会让你更容易理解):

<!-- 广告轮换内容 -->
<div class="slideshow clearfix" hal:if="Slideshow.Slideshows.hasItem">

 <div id="slideId1" hal:attr='id "slideId"+slideShow.moduleId'>
  <hal hal:each="slideShowItem slideShow.slideShows">
    <div class="slide">
        <img hal:attr='src slideShowItem.featuredImageUrl' src="http://farm9.staticflickr.com/8440/7992576197_887fc84bc6_b.jpg" height="400"   />
    </div>
  </hal>
  <hal hal:remove="">
    <div class="slide">
        <img src="http://farm9.staticflickr.com/8017/7444246574_0f23211ae6_b.jpg"  height="400" />
    </div>
  </hal>
 </div>

 <a class="prev" id="prev_02" href="#" hal:attr='id "prev_"+slideShow.moduleId'><span>prev</span></a>
 <a class="next" id="next_02" href="#" hal:attr='id "next_"+slideShow.moduleId'><span>next</span></a>

  <script 
  type="text/javascript" 
  hal:text='#slideId1 "#slideId"+slideShow.moduleId | 
  #prev_02 "#prev_"+slideShow.moduleId | 
  #next_02 "#next_"+slideShow.moduleId 
  '>
    $(function() {
       $("#slideId1").carouFredSel({
          responsive: true,
          scroll: {
            fx: "crossfade"
          },
          prev: {button: "#prev_02",key:"left"},
          next: {button:"#next_02", key:"right"}
      });
  });
  </script>

</div>     
<!-- //广告轮换内容 -->

这样暂时完成了广告轮换模块的制作,下一步我们登陆后台。更新外观。

4.4)插入广告轮换模块

更新完外观后,我们将要进行模块的插入。具体步骤是回到主界面,将鼠标移动mainArea区域后点击左上方的"插入模块按钮"

企户动模块插入

点击后看到我们功能插入的主界面,我们再左面区域勾选广告轮换模块,然后下放有位置、标题、显示等选项,我们暂时不理,去右上角按保存按钮。

企户动广告轮换插入

保存完成后,我们mainArea区域中除了显示我们刚插入的广告轮换模块,上方还显示了 "该模块没有找到模块容器,请重新指定" 的提示

企户动没有容器

那什么是模块容器呢?我们可以暂时理解成装着“模块”的“容器”
" 就好比一个模块是一个人,而容器就是每个人的发型,每个人可以选择不同的头发,比如有的人喜欢(刘海、长发、光头等)发型。 "

企户动容器对比图

那我们怎么创建这个"发型(容器)"呢?

第一步:我们先创建放置容器的文件夹

在Html文件夹中创建以下目录结构的文件夹与文件( Containers/Container.html )
Containers是放置容器的文件夹,而Container.html是默认的容器布局
注:Containers这个文件夹名称不能更改

企户动容器文件夹

第二步:将代码拷贝到container.html中

<div class="module" hal:area="mainArea">
</div>
究竟发生了什么?
  • 这里要注意的是,每个容器中必须有一个主区域 hal:area="mainArea"

创建完容器。直接登陆后台。更新外观。发现之前的提示没有了

企户动广告轮换模块内容添加

就简单的两部就完成了我们发型(容器)的创建。

4.5)测试广告轮换功能

将鼠标移到广告轮换处,发现左边有编辑按钮,点击编辑。进入广告轮换界面后,右上方有"添加按钮"。

企户动广告轮换模块内容界面

点击后,在下方有上传图片的按钮,我们"点击上传",待上传完成"点击保存"

企户动广告轮换上传

上传后,有成功提示,我们在下方看到了添加完的广告轮换信息

企户动广告轮换完成添加

关闭广告轮换界面后看到了我们完成后的效果!!

企户动广告轮换完成后效果图

五:添加两列的布局

大家有没有发现,我们现在插入模块只能在一列中进行?如果想插入两列甚至多列好像根本没办法实现?
答案是,不是的。企户动提供多列功能,能满足你的需求。

5.1)插入多列模块

在 mainArea 区域中"点击插入模块",进入插入模块的界面后,看到右手边的容器中多了容器,原来是刚刚添加的那个container.html容器,默认选择了它。

企户动模块界面

之后我们看到左边简单布局下方有个列布局,点击展开“列布局”后,我们拖动下去。看到有1、2、3、4、5列的选择,我们暂时先勾选2列中的4/1 ,4/3 的布局插入。

企户动多列插入

成功添加后,我们测试一下多列模块的功能。
移动鼠标去多列区域中,点击左上角的"调整列布局",进去功能页后,发现有很多种列数与比例可以选择。

企户动多列布局选择

上方还有一个 调整列间距 的选择,点击后发现供5种间距可以选择

企户动间距选择

多列生成后,我们看到了在mainArea 区域中多出了2个区域 ,这个区域就是我们刚刚插入的多列模块,在区域中就能随意添加模块。

但是还有一个问题,就是网站上的多列模块如果我想应用到本地 ,那怎么办呢?

第一步:首先呢在index.html中链接一个content.css 文件,拷贝下列代码到<head>中

<link rel="stylesheet" type="text/css" href="http://qihudong.chinagdcj.cn/portals/0/skinguide/images/test/content.css" media="all" />

使用外链,让本地也拥有多列模块
那么如何在本地添加一个和后台一样的多列呢

第二步:新建多列代码

在广告轮换下方添加以下代码

企户动静态页面中的多列布局

左边就是后台中的第一个区域,右边就是第二个,这样跟后台插入的多列模块完全一样了。

六:制作动态新闻列表模块

企户动主区域文章列表架构图

6.1)编写新闻列表代码

把以下代码结构拷贝到col-4-1的多列中(刚刚添加的左边内容)

<ul class="list">
  <li><a href="#">文章列表1</a></li>
  <li><a href="#">文章列表2</a></li>
  <li><a href="#">文章列表3</a></li>
  <li><a href="#">文章列表4</a></li>
  <li><a href="#">文章列表5</a></li>
  <li><a href="#">文章列表6</a></li>
  <li><a href="#">文章列表7</a></li>
  <li><a href="#">文章列表8</a></li>
  <li><a href="#">文章列表9</a></li>
  <li><a href="#">文章列表10</a></li>
</ul>

6.2)为新闻列表添加简单样式

为新闻列表添加一些间距,在css/style.css样式表中添加以下代码

.list li{margin: 5px 0;}

6.3)创建新闻列表模块的文件夹与文件

在DeskTopModules目录中创建以下目录结构的文件夹与文件( Article/ArticleList/ArticleList.html )
注:DeskTopModules下的文件夹名称不能更改

企户动文章模块文件夹

其中文件夹Article是放置文章功能模块

6.4)添加HAL代码将6.1)中的新闻列表变成动态文章列表

第一步:将静态代码拷贝到ArticleList.html中

第二步:添加HAL代码

1.添加HAL代码判断文章列表是否有内容

企户动文章模块判断内容
究竟发生了什么?
  • hal:if - 判断是否符合条件
  • hal:if="article.articles.hasItem" - 判断文章列表内是否有内容

2.循环内容

我们要循环输出每一篇文章标题,就需要使用hal:each历遍文章集合

企户动文章模块内容输出
究竟发生了什么?
  • hal:each - 循环内容 / hal:attr - 替换HTML标签属性 / hal:text - 替换HTML标签文本
  • hal:each="articleItem article.articles" - 循环输出文章集合的每一篇文章
  • hal:attr='href articleItem.url' - 替换href属性替换为文章列表模块的标题URL
  • hal:text='articleItem.title' - 替换<a>标签的文本内容

3.隐藏掉不循环的代码

使用hal:remove=""去掉其他多余不循环的内容

完整的代码为(不建议粘贴,自己录入会让你更容易理解):

<ul class="list" hal:if="article.articles.hasItem" >
<hal hal:each="articleItem article.articles">
  <li><a href="#" hal:attr='href articleItem.url' hal:text="articleItem.title" >文章列表1</a></li>
</hal>
<hal hal:remove="">
  <li><a href="#">文章列表2</a></li>
  <li><a href="#">文章列表3</a></li>
  <li><a href="#">文章列表4</a></li>
  <li><a href="#">文章列表5</a></li>
  <li><a href="#">文章列表6</a></li>
  <li><a href="#">文章列表7</a></li>
  <li><a href="#">文章列表8</a></li>
  <li><a href="#">文章列表9</a></li>
  <li><a href="#">文章列表10</a></li>
</hal>
</ul>

但是呢,我想在文章列表上加入标题,怎么办呢?接下来我们再创建多一个带有标题的容器

6.3)创建带有标题的容器

容器的基本结构如下图,每个容器都能有一个标题

企户动制作带标题容器

在放置容器的文件夹container中新建一个名为container-title.html 文件

添加下列html代码

企户动容器结构

在下列代码中添加hal属性

企户动容器HAL添加
究竟发生了什么?
  • hal:if - 判断是否符合条件 / hal:text - 替换HTML标签文本 / hal:area - 定义区域
  • hal:if="isDisplayTitle" - 判断是否显示容器标题 容器对象
  • hal:text="title" - 替换容器标题
  • hal:area="mainArea" - 定义主区域

完整的代码为(不建议粘贴,自己录入会让你更容易理解):

<div class="module">
  <h3 class="module-title" hal:if="isDisplayTitle" hal:text="title">文章列表</h3>
  <div class="module-content" hal:area="mainArea">
    <!-- 容器内容 -->
  </div>
</div>

6.4)为容器添加样式

我们给容器标题加入一条底边线,在css/style.css样式表中添加以下代码

.module-title { border-bottom: 1px solid #666; line-height: 1.6;}

6.5)插入文章列表模块

制作完容器和模块后,登陆后台。更新外观。
完成后,在两列的左边区域,插入一个模块。

进入插入模块的功能界面后,将左边简单布局的滚动条拖动,看到下面有文章功能,选择下方的文章列表功能,而右边容器选择我们刚刚新建的container-title容器,选好后保存

企户动插入文章列表模块

确认后,我们看到了刚插入的文章列表还没有文章。我们把鼠标移过去,"点击所有文章"

企户动插入文章列表完成

点击后进入文章功能界面,我们首先创建一个分类,点击右上角"类别"的按钮

企户动文章列表添加内容界面

进入类别后"点击添加" ,之后进入分类添加界面,随意填写分类名

企户动文章列表添加分类

企户动文章列表添加分类-1

企户动文章列表完成添加分类

添加完成后,我们回到文章添加的列表,点击右上角"文章按钮"

企户动文章列表添加文章

点击添加文章,点击后进入文章界面,随意输入文章标题。点击右上角"保存按钮"

企户动文章列表选择分类

不过此时,它提示要选择文章分类。我们文章信息隔壁的分类按钮,点选后看到我们之前新建的分类,我们将其勾选。之后再"保存"

企户动文章列表完成添加

完成添加后。我们关闭文章功能,返回页面,看到成功添加完成我们的一篇文章。

企户动修改容器标题

但是文章的标题显示的是 "模块3",我想跟换掉,换成更好的标题,怎么办?
想要更换模块标题,只要把鼠标移动到模块中"点击三角形箭头"

企户动修改容器标题-1

在出现的选项中点击选择“标题、图标和更多选择” 后

企户动修改容器标题-2

就能更换标题了,我们将内容"模块3"改成"文章标题"

企户动修改容器标题-3

这样就完成我们文章列表的添加。

七:添加静态内容

企户动图文列表添加

7.1)插入静态模块

创建左右图文排版布局,我们又需要制作一个模块吗?
答案是不用的,只要使用企户动静态模块功能就能轻松实现。

首先我们在两列区域的"点击插入模块",进入插入模块后。看到简单布局中有文本模块(就是静态模块),容器我们选择默认的然后"保存"。

企户动静态模块

7.2)添加内容

第一步:进入编辑界面

返回界面,我们看到暂时还没有内容,我们把鼠标移动到刚刚插入的静态文本模块中,"点击编辑"进入静态文本模块编辑界面

企户动插入模块

静态界面的编辑有点类似一般论坛的内容编辑

企户动静态模块界面

第二步:插入图文排版

在静态模块编辑界面中,我们选择第三排,图标中间类似有个T字母的图形。这个就是图文混排功能组,点击后看到有4种排列供选择,我们选择默认的第一种文字围绕着图片,"直接点击图形"插入。

企户动静态模块图文布局

插入后我们看到默认的版式出现在内容框中,但是我们想修改默认的图片怎么修改?
"直接双击图片"进入修改的界面。

企户动静态模块图文布局图片修改

第三步:上传图片

双击图片后,弹出了图片属性功能,选择左上方 浏览服务器

企户动静态模块图片服务器

弹出了图片的资源管理器,这个页面就是我们静态内容的图片库,我们选择"上传图片"之后随意上传一张图片

企户动静态模块图片服务器-1

选择好图片,我们点选图片后,"点击确认"返回图片属性功能界面

企户动静态模块图片服务器-2

如果觉得图片太大,还可以通过这里修改尺寸
这里默认是等比缩放,如果想任意调整,只需要把旁边的锁解开即可
右边有简易的效果缩略图,确认无误后"点击保存"

企户动静态模块图片服务器-3

返回界面看到修改完成的图片,文字的话我们先按照默认的。"点击保存"完成静态内容添加

企户动静态模块完成添加

八:制作动态的友情链接

企户动友情链接制作

8.1)编写友情链接代码与样式

两列多列右边中添加以下结构

企户动链接文件架构

编写完结构后,我们在css中添加以下简单样式

/*友情链接 */
.links { padding:10px;}
.links a { margin-right:15px;}

8.2)创建放置友情链接的文件与文件夹

在DeskTopModules目录中创建以下目录结构的文件夹与文件( Links/Linklist/LinkList.html )
注:DeskTopModules下的文件夹名称不能更改

企户动链接文件目录

之后将刚刚添加的样式与结构代码拷贝到LinkList.html中

8.3)加入HAL代码使静态链接变成动态链接

企户动链接模块
究竟发生了什么?
  • hal:if - 判断是否符合条件 / hal:each - 循环内容 / hal:text - 替换HTML标签文本 / hal:attr - 替换HTML标签属性 / hal:remove - 隐藏掉不需要的代码
  • hal:if="Link.Links.hasItem" - 判断是否有链接内容
  • hal:each="LinkItem Link.Links" - 循环输出链接集合的每一个链接
  • hal:text="LinkItem.name" - 替换<a>标签文本内容
  • hal:attr='href LinkItem.Url' - 替换<a>标签链接
  • hal:remove="" - 隐藏掉不需要的代码

完整的代码为(不建议粘贴,自己录入会让你更容易理解):

<div class="link" hal:if="Link.Links.hasItem">
  <hal hal:each="LinkItem Link.Links">
    <a href="#" hal:attr='href LinkItem.Url' hal:text="LinkItem.name">友情链接1</a>
  </hal>
  <hal hal:remove="">
    <a href="#">友情链接2</a>
    <a href="#">友情链接3</a>
    <a href="#">友情链接4</a>
  </hal>
</div>

8.4)测试链接模块功能

制作完链接模块后,登陆后台。更新外观。
在两列右边,静态布局下方插入友情链接
进入模块插入界面后,选择简单内容的链接模块与带标题的容器,下方填写友情链接标题。"保存"回到页面

企户动添加链接模块

之后移动到链接模块中添加内容,进入链接界面后,选择右边的"添加"

企户动添加链接模块-1

随意填写标题,插入成功后上方提示插入成功

企户动添加链接模块-2

最后关闭链接模块界面,完成友情链接的添加。

九:添加版权信息

企户动版权信息添加

最后我们完成FOOTER部分的制作

9.1)添加底部区域(footerAera)

在主区域(mianArea)的下方添加一个名为footer的div,在.footer中添加hal 将它变成动态区域

企户动底部区域添加

9.2)给底部区域(footerArea)添加样式

给底部footerArea添加背景色,方便与主区域区别,在css/style.css样式表中添加以下代码:

.footer { background: #e5e5e5;}

9.2)静态内容插入

在最底下footer区域中插入静态内容,选择模块容器
之后点击"编辑静态内容",随意输入一些版权信息,最后"保存"

企户动版静态内容修改

这样我们就完成了首页的制作(效果图如下)

企户动基础教学完成图

欢迎加入我们QQ群讨论:企户动-技术支持讨论群 | 各类型外观下载