整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

DataGear使用静态HTML模板制作数据可视化看板

ataGear数据可视化分析平台提供了导入静态HTML模板的功能，使您可以利用已有的任意HTML网页资源制作数据可视化看板。

首先，您需要准备一套已设置好布局的静态HTML模板，其中包含的HTML网页及相关资源，例如：

index.html
css/
  |---style.css
  |---images
       |---bg.png
       |---bg_head.png
js/
  |---index.js
  |---common.js

它的静态效果如下图所示：

然后，将这套静态HTML模板压缩到一个ZIP文件中，使用DataGear看板的[导入]功能，将这个ZIP文件导入为看板。

导入成功后，打开看板编辑界面，为HTML模板中的div元素添加dg-chart-widget属性绑定图表组件，例如：

...
<div class="panel-content"
    dg-chart-widget="图表组件ID"></div>
...

其中，图表组件ID 是图表管理列表中的一个图表条目ID。

设置完所有的div元素后，一个数据可视化看板就制作完成了，点击[保存并展示]按钮，即可查看展示效果。

等等，默认的展示效果差强人意……，没关系，自定义展示效果也很简单！

首先，自定义图表主题，打开看板编辑界面，为<body>标签添加dg-chart-theme自定义图表主题，如下代码：

...
<body dg-chart-theme="{color:'#F0F0F0',
    backgroundColor:'transparent',
    actualBackgroundColor:'#050d3c'}">
...
</body>
...

然后，自定义图表设置项，为<body>标签添加dg-chart-options属性，定义全局图表设置项：

<body ... dg-chart-options="{title:{show:false},
    legend:{top:0},grid:{top:25}}">
<!--隐藏标题、图例顶部展示、坐标系距顶部25像素，具体参考echarts设置项-->

大功告成！

官网地址：http://www.datagear.tech

源码地址：

https://gitee.com/datagear/datagear

https://github.com/datageartech/datagear

程目标

目标1：掌握Freemarker常用的指令与内建函数

目标2：完成商品详细页的数据显示

目标3：完成商品详细页的动态效果

目标4：完成商品详细页读取SKU信息的业务逻辑

目标5：完成商品审核调用功能

1.网页静态化技术Freemarker

1.1为什么要使用网页静态化技术

网页静态化解决方案在实际开发中运用比较多，例如新闻网站，门户网站中的新闻频道或者是文章类的频道。

对于电商网站的商品详细页来说，至少几百万个商品，每个商品又有大量的信息，这样的情况同样也适用于使用网页静态化来解决。

网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力，但是具体的应用场景不同，缓存比较适合小规模的数据，而网页静态化比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO。

另外我们如果将网页以纯静态化的形式展现，就可以使用Nginx这样的高性能的web服务器来部署。Nginx可以承载5万的并发，而Tomcat只有几百。关于Nginx我们在后续的课程中会详细讲解。

今天我们就研究网页静态化技术----Freemarker 。

1.2什么是 Freemarker

FreeMarker 是一个用 Java 语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与 Web 容器无关，即在 Web 运行时，它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成 XML，JSP 或 Java 等。

1.3 Freemarker入门小DEMO

1.3.1工程引入依赖

<dependency>
		<groupId>org.freemarker</groupId>
		<artifactId>freemarker</artifactId>
		<version>2.3.23</version>
</dependency>

1.3.2创建模板文件

模板文件中四种元素

1、文本，直接输出的部分

2、注释，即<#–…-->格式不会输出

3、插值（Interpolation）：即${…}部分,将使用数据模型中的部分替代输出

4、FTL指令：FreeMarker指令，和HTML标记类似，名字前加#予以区分，不会输出。

我们现在就创建一个简单的创建模板文件test.ftl

<html>
<head>
	<meta charset="utf-8">
	<title>Freemarker入门小DEMO </title>
</head>
<body>
<#--我只是一个注释，我不会有任何输出 -->
${name},你好。${message}
</body>
</html>

这里有文本、插值和注释

1.3.3生成文件

使用步骤：

第一步：创建一个 Configuration 对象，直接 new 一个对象。构造方法的参数就是 freemarker的版本号。

第二步：设置模板文件所在的路径。

第三步：设置模板文件使用的字符集。一般就是 utf-8.

第四步：加载一个模板，创建一个模板对象。

第五步：创建一个模板使用的数据集，可以是 pojo 也可以是 map。一般是 Map。

第六步：创建一个 Writer 对象，一般创建一 FileWriter 对象，指定生成的文件名。

第七步：调用模板对象的 process 方法输出文件。

第八步：关闭流

代码：

创建Test类 main方法如下：

	 //1.创建配置类
		Configuration configuration=new Configuration(Configuration.getVersion());
		//2.设置模板所在的目录 
		configuration.setDirectoryForTemplateLoading(new File("D:/pinyougou_work/freemarkerDemo/src/main/resources/"));
		//3.设置字符集
		configuration.setDefaultEncoding("utf-8");
		//4.加载模板
		Template template = configuration.getTemplate("test.ftl");
		//5.创建数据模型
		Map map=new HashMap();
		map.put("name", "张三 ");
		map.put("message", "欢迎来到神奇的品优购世界！");
		//6.创建Writer对象
		Writer out =new FileWriter(new File("d:\\test.html"));
		//7.输出
		template.process(map, out);
		//8.关闭Writer对象
		out.close();

执行后，在D盘根目录即可看到生成的test.html ，打开看看

是不是有些小激动呢？

1.4 FTL指令

1.4.1 assign指令

此指令用于在页面上定义一个变量

（1）定义简单类型：

<#assign linkman="周先生">
联系人：${linkman}

（2）定义对象类型：

<#assign info={"mobile":"13301231212",'address':'北京市昌平区王府街'} >
电话：${info.mobile} 地址：${info.address}

运行效果：

1.4.2 include指令

此指令用于模板文件的嵌套

创建模板文件head.ftl

<h1>黑马信息网</h1>

我们修改test.ftl，在模板文件中使用include指令引入刚才我们建立的模板

<#include "head.ftl">

1.4.3 if指令

在模板文件上添加

<#if success=true>
 你已通过实名认证
<#else> 
 你未通过实名认证
</#if>

在代码中对str变量赋值

map.put("success", true);

在freemarker的判断中，可以使用= 也可以使用==

1.4.4 list指令

需求，实现商品价格表，如下图：

（1）代码中对变量goodsList赋值

		List goodsList=new ArrayList();
		Map goods1=new HashMap();
		goods1.put("name", "苹果");
		goods1.put("price", 5.8);
		Map goods2=new HashMap();
		goods2.put("name", "香蕉");
		goods2.put("price", 2.5);
		Map goods3=new HashMap();
		goods3.put("name", "橘子");
		goods3.put("price", 3.2);
		goodsList.add(goods1);
		goodsList.add(goods2);
		goodsList.add(goods3);
		map.put("goodsList", goodsList);

（2）在模板文件上添加

----商品价格表----<br>
<#list goodsList as goods>
 ${goods_index+1} 商品名称： ${goods.name} 价格：${goods.price}<br>
</#list>

如果想在循环中得到索引，使用循环变量+_index就可以得到。

1.5 内建函数

内建函数语法格式： 变量+?+函数名称

1.5.1获取集合大小

我们通常要得到某个集合的大小，如下图：

我们使用size函数来实现，代码如下：

共 ${goodsList?size} 条记录

1.5.2转换JSON字符串为对象

我们通常需要将json字符串转换为对象，那如何处理呢？看代码

 <#assign text="{'bank':'工商银行','account':'10101920201920212'}" />
	<#assign data=text?eval />
	开户行：${data.bank} 账号：${data.account}

1.5.3日期格式化

代码中对变量赋值：

dataModel.put("today", new Date());

在模板文件中加入

当前日期：${today?date} <br>
当前时间：${today?time} <br> 
当前日期+时间：${today?datetime} <br> 
日期格式化： ${today?string("yyyy年MM月")}

运行效果如下：

1.5.4数字转换为字符串

代码中对变量赋值：

map.put("point", 102920122);

修改模板：

累计积分：${point}

页面显示：

我们会发现数字会以每三位一个分隔符显示，有些时候我们不需要这个分隔符，就需要将数字转换为字符串,使用内建函数c

累计积分：${point?c}

页面显示效果如下：

累计积分:102920122

1.6空值处理运算符

如果你在模板中使用了变量但是在代码中没有对变量赋值，那么运行生成时会抛出异常。但是有些时候，有的变量确实是null，怎么解决这个问题呢？

1.6.1判断某变量是否存在:“??”

用法为:variable??,如果该变量存在,返回true,否则返回false

<#if aaa??>
 aaa变量存在
<#else>
 aaa变量不存在
</#if>

1.6.2缺失变量默认值:“!”

我们除了可以判断是否为空值，也可以使用!对null值做转换处理

在模板文件中加入

 ${aaa!'-'}

在代码中不对aaa赋值，也不会报错了 ，当aaa为null则返回！后边的内容-

1.7运算符

1.7.1算数运算符

FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:+, - , * , / , %

1.7.2逻辑运算符

逻辑运算符有如下几个:

逻辑与:&&

逻辑或:||

逻辑非:!

逻辑运算符只能作用于布尔值,否则将产生错误

1.7.3比较运算符

表达式中支持的比较运算符有如下几个:

1 =或者==:判断两个值是否相等.

2 !=:判断两个值是否不等.

3 >或者gt:判断左边值是否大于右边值

4 >=或者gte:判断左边值是否大于等于右边值

5 <或者lt:判断左边值是否小于右边值

6 <=或者lte:判断左边值是否小于等于右边值

注意: =和!=可以用于字符串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比较,“x”,"x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:<#if (x>y)>

2.商品详情页-数据显示

2.1需求分析

运用Freemarker技术来实现商品详细页的静态化。通过地址栏输入某地址，如下形式

http://localhost:9101/gen_item.do?goodsId=149187842867952

能在本地电脑某目录生成商品详细页，页面的名称为商品id.html

2.2工程搭建

2.2.1服务接口层

创建pinyougou-page-interface工程，创建com.pinyougou.page.service包,包下创建接口

/**
 * 商品详细页接口
 * @author Administrator
 *
 */
public interface ItemPageService {
	/**
	 * 生成商品详细页
	 * @param goodsId
	 */
	public boolean genItemHtml(Long goodsId);
}

2.2.2服务实现层

（1）创建war工程pinyougou-page-service

（2）pom.xml引入依赖 参见其它服务工程, 另外添加freemarker依赖

<dependency>
		<groupId>org.freemarker</groupId>
		<artifactId>freemarker</artifactId>
</dependency>

（3）添加web.xml 参见其它服务工程

（4）spring配置文件 参见其它服务工程 ，另外配置：

	<bean id="freemarkerConfig"	class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
		<property name="templateLoaderPath" value="/WEB-INF/ftl/" />
		<property name="defaultEncoding" value="UTF-8" />
	</bean>

（5）创建属性文件

内容为：

pagedir=d:\\item\\

用于配置网页生成目录

（6）建立com.pinyougou.page.service.impl包，包下建立类

@Service
public class ItemPageServiceImpl implements ItemPageService {
	@Value("${pagedir}")
	private String pagedir;
	
	@Autowired
	private FreeMarkerConfig freeMarkerConfig;
	
	@Autowired
	private TbGoodsMapper goodsMapper;
	
	@Autowired
	private TbGoodsDescMapper goodsDescMapper;
		
	@Override
	public boolean genItemHtml(Long goodsId){				
		try {
			Configuration configuration = freeMarkerConfig.getConfiguration();
			Template template = configuration.getTemplate("item.ftl");
			Map dataModel=new HashMap<>();			
			//1.加载商品表数据
			TbGoods goods = goodsMapper.selectByPrimaryKey(goodsId);
			dataModel.put("goods", goods);			
			//2.加载商品扩展表数据			
			TbGoodsDesc goodsDesc = goodsDescMapper.selectByPrimaryKey(goodsId);
			dataModel.put("goodsDesc", goodsDesc);						
			Writer out=new FileWriter(pagedir+goodsId+".html");
			template.process(dataModel, out);
			out.close();
			return true;			
		} catch (Exception e) {
			e.printStackTrace();
			return false;
		}
	}
}

（7）将item.html拷贝至web-inf/ftl下 ，修改扩展名为ftl ,将商品名称用插值代替

<div class="sku-name">
	<h4>${goods.goodsName}</h4>
</div>

（8）在D盘建立文件夹item,将必要的样式表和Js拷贝到此目录下，此目录为生成的目录

2.2.3运营商管理后台

（1）pinyougou-manager-web引入依赖pinyougou-page-interface

（2）在GoodsController.java中新增方法

	@Reference(timeout=40000)
	private ItemPageService itemPageService;
	/**
	 * 生成静态页（测试）
	 * @param goodsId
	 */
	@RequestMapping("/genHtml")
	public void genHtml(Long goodsId){
		itemPageService.genItemHtml(goodsId);	
	}

2.3商品详情页模板构建

2.3.1模板模块化引入

此时我们的item.ftl内容较多，当我们编辑时不容易快速找到编辑的位置，所以我们将头部分拆分到head.ftl ,将尾部拆分到foot.ftl ,用include指令在item.ftl中引入 。

2.3.2生成基本数据

在模板中找到合适的位置，用插值替换静态文本

<div class="news"><span>${goods.caption}</span></div>

<div class="fl price"><i>¥</i><em>${goods.price}</em><span>降价通知</span></div>

<div class="intro-detail"><!-- 商品详情 -->	${goodsDesc.introduction}</div>

<div id="two" class="tab-pane"><p>${goodsDesc.packageList}</p></div>
<div id="three" class="tab-pane"><p>${goodsDesc.saleService}</p></div>

运行控制层代码，测试生成效果

http://localhost:9101/goods/genHtml.do?goodsId=149187842867960

2.3.3生成图片列表

编辑模板文件

<#--图片列表 -->
<#assign imageList=goodsDesc.itemImages?eval />

这一句要转换图片列表的json字符串

图片部分的代码

<!--默认第一个预览-->
<div id="preview" class="spec-preview">
		<span class="jqzoom">
				<#if (imageList?size>0)>
					<img jqimg="${imageList[0].url}" src="${imageList[0].url}" width="400px" height="400px" />
				</#if>
		</span>
</div>
<!--下方的缩略图--><div class="spec-scroll">
		<div class="items">
		<ul>
		<#list imageList as item>
			<li><img src="${item.url}" bimg="${item.url}" onmousemove="preview(this)" /></li>
		</#list>
		</ul>
	</div>
</div>

生成效果如下：

2.3.4生成扩展属性列表

修改模板 首先进行json转换

<#--扩展属性列表 -->
<#assign customAttributeList=goodsDesc.customAttributeItems?eval />

显示扩展属性数据，如果扩展属性为空则不显示此条数据

 <#list customAttributeList as item>
		<#if item.value??>
			 <li>${item.text} ：${item.value}</li>
		</#if>
</#list>

2.3.5生成规格列表

修改模板 转换规格列表

<#--规格列表 -->
<#assign specificationList=goodsDesc.specificationItems?eval />

此时，我们需要使用嵌套循环

<#list specificationList as specification>							
		<dl>
			<dt>
					<div class="fl title">
							<i>${specification.attributeName}</i>
					</div>
			</dt>								
			<#list specification.attributeValue as item>						
				<dd><a href="javascript：;" >${item}</a></dd>
			</#list>
		</dl>
</#list>

2.3.6生成商品类型面包屑

修改ItemPageServiceImpl ，读取三级商品分类名称，加入到数据模型中

修改模板，展示商品分类面包屑

<ul class="sui-breadcrumb">
	<li><a href="#">${itemCat1}</a></li>
	<li><a href="#">${itemCat2}</a></li>
	<li><a href="#">${itemCat3}</a></li>					
</ul>

3.商品详情页-前端逻辑

3.1购买数量加减操作

3.1.1加入angularJS库

将angularJS库加入d:\item下

3.1.2前端控制层

将base.js拷贝到js目录下

在js目录下构建controller文件夹，创建itemController.js

//商品详细页（控制层）
app.controller('itemController',function($scope){
	//数量操作
	$scope.addNum=function(x){
		$scope.num=$scope.num+x;
		if($scope.num<1){
			$scope.num=1;
		}
	}		
});

在方法中控制数量不能小于1

3.1.3模板

引入js

<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="js/base.js"> </script>
<script type="text/javascript" src="js/controller/itemController.js"> </script>

添加指令

<body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1">

调用操作数量的方法

<div class="controls">
	<input autocomplete="off" type="text" value="{{num}}" minnum="1" class="itxt" />
	<a href="javascript：void(0)" class="increment plus" ng-click="addNum(1)" >+</a>
	<a href="javascript：void(0)" class="increment mins" ng-click="addNum(-1)">-</a>
</div>

3.2规格选择

最终我们需要实现的效果：

3.2.1前端控制层

修改itemController.js

	$scope.specificationItems={};//记录用户选择的规格
	//用户选择规格
	$scope.selectSpecification=function(name,value){	
		$scope.specificationItems[name]=value;
	}	
	//判断某规格选项是否被用户选中
	$scope.isSelected=function(name,value){
		if($scope.specificationItems[name]==value){
			return true;
		}else{
			return false;
		}		
	}

3.2.2模板

页面调用控制器的方法

<dd>
	<a class="{{isSelected('${specification.attributeName}','${item}')?'selected':''}}" 
	ng-click="selectSpecification('${specification.attributeName}','${item}')">
	 ${item}								 			
<span title="点击取消选择"> </span>
 </a>
</dd>

4.商品详情页-读取SKU信息

需求：当我们选择规格后，应该在页面上更新商品名称为SKU的商品标题，价格也应该为SKU的商品价格。

4.1页面生成SKU列表变量

4.1.1后端服务层

修改pinyougou-page-service的ItemPageServiceImpl.java

	@Autowired
	private TbItemMapper itemMapper;
	
	@Override
	public boolean genItemHtml(Long goodsId){				
		try {
			Configuration configuration = freeMarkerConfig.getConfiguration();
			Template template = configuration.getTemplate("item.ftl");
			Map dataModel=new HashMap<>();			
			//1.加载商品表数据			
			//2.加载商品扩展表数据					
			//3.商品分类			
			//4.SKU列表			
			TbItemExample example=new TbItemExample();
			Criteria criteria = example.createCriteria();
			criteria.andStatusEqualTo("1");//状态为有效
			criteria.andGoodsIdEqualTo(goodsId);//指定SPU ID
			example.setOrderByClause("is_default desc");//按照状态降序，保证第一个为默认			
			List<TbItem> itemList = itemMapper.selectByExample(example);		
			dataModel.put("itemList", itemList);
			Writer out=new FileWriter(pagedir+goodsId+".html");
			template.process(dataModel, out);
			out.close();
			return true;
		} catch (Exception e) {
			e.printStackTrace();
			return false;
		}
	}

4.1.2模板

修改模板：

<script>
 //SKU商品列表
	 var skuList=[ 	 
	 	 <#list itemList as item> 	 	 	
		 		{
		 		"id":${item.id?c},
		 		"title":"${item.title!''}",
		 		"price":${item.price?c},		 		
		 		"spec": ${item.spec}	
		 		} , 		
	 		</#list>
	 ]; 
 </script>

测试生成，发现页面源代码中生成了变量

4.2显示SKU标题和价格

4.2.1加载默认SKU信息

修改itemController.js

	//加载默认SKU
	$scope.loadSku=function(){
		$scope.sku=skuList[0];		
		$scope.specificationItems= JSON.parse(JSON.stringify($scope.sku.spec)) ;
	}

修改模板item.ftl

<body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1;loadSku()">

修改模板，显示标题

<div class="sku-name"><h4>{{sku.title}}</h4></div>

显示价格

<div class="summary-wrap">
	<div class="fl title"><i>价　　格</i></div>
<div class="fl price"><i>¥</i> <em>{{sku.price}}</em> <span>降价通知</span></div>
</div>

4.2.2选择规格更新SKU

修改itemController.js , 编写匹配对象的方法

	//匹配两个对象
	matchObject=function(map1,map2){		
		for(var k in map1){
			if(map1[k]!=map2[k]){
				return false;
			}			
		}
		for(var k in map2){
			if(map2[k]!=map1[k]){
				return false;
			}			
		}
		return true;		
	}

编写方法，在SKU列表中查询当前用户选择的SKU

	//查询SKU
	searchSku=function(){
		for(var i=0;i<skuList.length;i++ ){
			if( matchObject(skuList[i].spec ,$scope.specificationItems ) ){
				$scope.sku=skuList[i];
				return ;
			}			
		}	
		$scope.sku={id:0,title:'--------',price:0};//如果没有匹配的		
	}

在用户选择规格后触发读取方法

//用户选择规格
$scope.selectSpecification=function(name,value){	
		$scope.specificationItems[name]=value;
		searchSku();//读取sku
}

4.3添加商品到购物车

修改itemController.js

	//添加商品到购物车
	$scope.addToCart=function(){
		alert('skuid:'+$scope.sku.id);				
	}

修改模板：

<li><a href="#" target="_blank" class="sui-btn btn-danger addshopcar" ng-click="addToCart()">加入购物车</a></li>

5.系统模块对接

5.1运营商后台调用页面生成服务

修改pinyougou-manager-web的GoodsController.java

	@RequestMapping("/updateStatus")
	public Result updateStatus(Long[] ids,String status){
		try {
			goodsService.updateStatus(ids, status);						
			//按照SPU ID查询 SKU列表(状态为1)		
			if(status.equals("1")){//审核通过
				List<TbItem> itemList = goodsService.findItemListByGoodsIdandStatus(ids, status);						
				//调用搜索接口实现数据批量导入
				if(itemList.size()>0){				
					itemSearchService.importList(itemList);					
				}else{
					System.out.println("没有明细数据");
				}				
				//静态页生成
				for(Long goodsId:ids){
					itemPageService.genItemHtml(goodsId);
				}				
			}					
			return new Result(true, "修改状态成功"); 
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "修改状态失败");
		}
	}

5.2创建商品详细页web工程

创建war模块工程pinyougou-page-web ，将目标目录（d:\item）的文件拷贝到此工程（生成的页面不用拷贝）

在pom.xml中添加tomcat7插件，指定端口为9105

5.3搜索系统与商品详细页对接

修改pinyougou-search-web 的search.html，修改点击图片的链接为http://localhost:9105/{{item.id}}.html

说明：商品详细页是静态页，所以在开发阶段我们可以使用tomcat来进行测试。部署在生产环境是部署在Nginx中。

现代社会，网页已经成为企业、个人展示和宣传的重要窗口，因此掌握网页制作技能是非常有必要的。今天，我们将为大家介绍8款优秀的网页设计模板网站，哪怕是小白也能帮助你快速搭建出令人惊艳的网页。

一、即时设计

即时设计是一款支持在线协作的专业级 UI 设计工具，用户数已突破230万，支持 Sketch、Figma、XD 格式导入，无需下载，在线使用。10000+精选设计资源、100+提效插件即拿即用；支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验，一个链接即可完成交付，内容修改实时同步。

响应式网页设计：

优点：

  • 漏标的地方开发者也可以自行切图
  • 支持多平台预设及批量导出
  • 颜色整合显示，一键定位对应元素

二、17素材

17素材网主要收集jQuery网页特效、jQuery网页代码、网站模板、网页模板、企业模板、商城模板、图标等素材，为html网站模板开发人员提供高效率的工作方式。

部分素材需要积分才能下载。

三、 jquery 插件库

jQuery插件库是一组由开发者编写的、可重复使用的jQuery插件集合，为Web开发人员提供了多种常用功能的封装。这些插件可以快速实现诸如表单验证、图片轮播、下拉菜单、模态框等功能，使得Web开发人员能够更快地完成开发任务，减少代码重复性工作。

它快速、轻量并且简化了我们浏览 HTML 文档和操作页面元素的方式。因为它还具有高度可扩展性，所以在框架之上构建了许多jQuery 插件来为网站添加功能。从 UI 组件和元素到布局和网格，有一个jQuery 插件可以满足您网站所需的几乎所有功能。

详情页还可以查看详细代码。

四、凡科建站

凡科建站提供自助建站、做网站、快速建站等营销推广服务，凡科建站平台提供网站模板资源，拥有2000万+流量入口，精选优质服务商，7*8在线服务；四大搜索覆盖，快速上线，全网曝光，助力商家完成营销目标。

网站模板图片素材定期更新，简单易操作，小白也会使用；而且拥有SEO框架布局，首页、栏目产品及文章页均可独立设置标题/关键词/描述；后台直接修改联系方式、传真、邮箱、地址等，修改更加方便；同一个后台管理，四网合一，用户体验好！

优点：

  • 3000+精美网站模板，免费使用
  • 100+行业覆盖，应有尽有
  • 素材丰富，图片、字体、视频等多种素材

五、网站模板库

网站模板库提供大量精选高质量并永久免费的(网站模版、网页模板、手机模板、企业网站模板、网站模版)，包括html模板、后台管理模板、博客模板及各行业类型等上千种模版。

模板素材众多。

优点：

  • 后台操作简单，功能全面
  • 分类详细，可以根据自己的需求快速找到合适的模板
  • 网站自适应，根据屏幕大小改变网站布局，不变形

六、模板

提供海量精美免费网站模板、企业网站模板、html模板网站、公司网站模板、手机网站模板、自适应网站模板等免下载使用。

该网站收集了大量优质网站设计作品，适用于多个专业的 WordPress 主题模板、HTML5模板、CSS Menu等实用资源。

特色：

  • 100%的响应
  • 漂亮和干净的设计
  • 清洁和注释代码

七、AB模板网

AB模板网专注企业网站模板制作，包括企业pbootcms网站模板，静态网页模板，网站源码下载，HTML网站模板等等。

这个网站专门提供织梦的网页模板，性质和上面一样，也是上传到服务器上。

特点：

  • 手工书写DIV+CSS、代码精简无冗余
  • 分类详细，根据需要直接定位
  • SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述

八、织梦猫

织梦猫是一个网站模板分享交流平台，网站以织梦模板、建站资讯、织梦教程为主要内容，以“共享创造价值”为理念，以“尊重原创”为准则。满足用户不同的网站模板需求。

同样也提供dedecms的网页模板。

模板安装方法：

  1. 下载最新的织梦dedecms5.7 UTF8版本。
  2. 解压下载的织梦安装包，得到docs和uploads两个文件夹，将uploads里面的所有文件和文件夹上传到你的网站根目录
  3. 安装dede系统。(如果您已经安装,请跳过本步.)直接运行：http://您的域名/install
  4. 将web文件夹内的所有文件夹上传并覆盖到织梦的安装目录;
  5. 登陆后台并还原数据库：

1）进入dede后台，找到“系统”-“数据库备份/还原”

2）在屏幕右上角点击“数据还原”

3）点击屏幕下方的'开始还原'按钮

  1. 确定网站风格（无论是否修改，都点击一下确定）：

1）点击“系统”---系统基本参数

2）将“站点根网址”改为您的网址，如http://www.xxx.com/（本地安装请保持http://127.0.0.1。）

3）点击“确定”按钮

  1. 更新整站缓存： 点击“生成”-“更新系统缓存”
  2. 更新网站： 点击“生成”-“一键更新网站”-“更新所有”-“开始更新” 点击“生成”-“更新主页html” 至此，模板安装结束

这些网页模板网站提供了多样化的选择，从专业的商业网站到个人博客，从免费的模板到付费的高级模板，满足了不同用户的需求。无论您是有设计经验的专业人士还是初学者，这些网站都能帮助您快速搭建一个具有吸引力和功能性的网站。

如果你还有更好的方式或工具推荐，记得在评论区互动讨论！

更多工具推荐

分享6款免费项目管理工具，让你的工作效率暴增！

想提高工作效率？快来看看这6个办公神器！


在线咨询
上一篇：踏上编程之路的必经之路之html篇六
下一篇：向chatGPT询问使用JavaScript实现一个签到功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 漳县 徐闻县 纳雍县 九江县 德阳 立山区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服