用织梦实现一个从零到可以正常访问的网站--第二章

终于抽出时间写建站的文章了，之前的文章在这里，第一章，如果不看第一章直接看第二章也是可以的，我们接着把之前没有完成的部分接着写。

回顾

-我们简单的回顾一下之前做的步骤：
-打开xampp
-打开apach的admin
-点击安装
-一直下一步就行
-最后安装结束
-点击登录后台
-账号：amdin
-密码：admin
-登录
-然后把你写的网站代码那个文件夹。移到xampp-htdocs-template（是文件夹）
-然后打开xampp
-进入apach后台
-将写好的html文件全部改为htm后缀的
-进入dede的系统菜单
-点击系统基本参数
-将参数按照要求改好
-点击生成菜单
-点击更新主页
-选择主页模板
-更改为你自己的主页
-生成静态
-更新主页html

新篇

ok，如果没有问题的话，我们接着写：

今天我们写一下怎么将站点里面的样式调好和对应起来，做一个最简单的织梦代码的调用。

首先我需要写一个例子，之前的例子被我玩坏了，再写一个完整的模板出来太耗费时间了，我直接写一个比较简单的页面，但是基本上网站都是这几块，我们先看一下运行的效果：

这个是简单的三个页面，我们看一下目录结构：

、

那么不管是大的网站还是小的网站其实基本都无非是这几块，多的话一般也会放到一个自己认识的文件夹里面，那么之前我们已经写到了可以直接运行了，但是没有样式是不是，所以我简单的加了几个样式，这是js和css的源码：

js源码：

/*
 aim ： 为博客建站文章写demo提供的js
 author ： clearlove
 date ： 2017-7
 type ： js
 * */
function _clicktest(){
			alert("我是测试页面");
		}
/*over*/

css源码：

/*
 aim ： 为博客建站文章写demo提供的css
 author ： clearlove
 date ： 2017-7
 type ： css
 * */
header{font: "微软雅黑";color: brown;}
a{font: "微软雅黑";color: blueviolet;text-decoration: none;margin-left: 1rem;}
a:hover{font-size: larger;color: darkblue;}
div{margin-top: 20%;margin-left: 40%;}
div input{width: 5rem;height: 2rem;}
/*over*/

H5源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我是测试页面</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<body>
		<header>
			<a href="index.html">首页</a>
			<a href="page1.html">切换页面1</a>
			<a href="page2.html">切换页面2</a>
		</header>
		<div>
			<input type="button" value="我是首页" onclick="_clicktest()"/>
		</div>
	</body>
	<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是测试页面</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<body>
		<header>
			<a href="index.html">首页</a>
			<a href="page1.html">切换页面1</a>
			<a href="page2.html">切换页面2</a>
		</header>
		<div>
			<input type="button" value="我是page1" onclick="_clicktest()"/>
		</div>
	</body>
	<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是测试页面</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<body>
		<header>
			<a href="index.html">首页</a>
			<a href="page1.html">切换页面1</a>
			<a href="page2.html">切换页面2</a>
		</header>
		<div>
			<input type="button" value="我是page2" onclick="_clicktest()"/>
		</div>
	</body>
	<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</html>

代码很简单，我们正所谓麻雀虽小，五脏俱全，只是我没有加图片，为什么不加呢？之后会说到这里。

我们打开之前做到的位置：

如果您正常按照我做的话，是可以直接访问的，但是没有样式，而且导航的链接也是错的，就像我这样的：

没有任何的样式，点击导航的链接的时候是这样的：

是吧，我们今天就解决样式的问题，很简单，首先将C盘的xampp下templets的源码打开（当然如果您担心代码乱了，也可以直接在没有上传之前在您的编辑器里面更改）：

我们将引用CSS的引用方法改为这样的：

在引用的前面加上这串代码：

{dede:global.cfg_templets_skin/}/

解释一下：

{dede:global.cfg_templets_skin/}是调用默认样式路径一般为网站地址/templets/default ,你如果修改了默认样式文件夹就是网站地址/templets/默认文件夹。在模版中调用css的路径可以像这样调用{dede:global.cfg_templets_skin/}/style.css。如果其他几套的的样式和默认的文件一样，你就可以在后台进行样式的切换。skin英文意思是皮肤，对于网站，皮肤就是样式。这只是取的一个有意义的名字，方便调用而已。

那么js也是这样更改，img（如果有图片的话，也是这样更改，改完以后是这样的）：