历经两个多月，手头的网站大致修改到位了，也终于可以静下来写点东西。一直以来，笔者从事的是建筑行业，主要是产品领域相关工作，方案设计、施工图设计、工程建设和交付等，于IT行业是完全的行外人士。数年前找人开发了一个网站，各种bug层出不穷，美工不忍久视，加之实际也没有太多时间做内容和商务方面的运营，做出来的网站自己都不愿意看。这次终于痛下决心，自己动手完成了网站美化和相应功能的修改。写这篇文章的主要目的有几点：
一是真诚致谢csdn平台。如果没有这个平台，很难想象一个既不知道网页源文件放在哪个文件夹下，也不知道该用何种程序打开php、js、css等文件的行外人士，该如何完成网站的修改。同时也真诚致谢平台上有意或无意给予了我帮助的各位先贤和专业领域高人，无论是完整的源代码还是只言片语，都给我不少帮助和启迪。
二是站在网站开发需求者、应用方的角度，客观总结、探讨一下网站开发应该避免的误区，以及开发者、需求方两者之间的思维差异带来的影响，供双方借鉴、探讨。
三是记录一下过程当中解决一系列问题的源码和总结，供初学者或与我处于类似境况的人借鉴。包括如何使用小皮面板搭建本地开发环境、div+css布局中遇到的若干问题、kindeditor的使用、数据库的使用等等。毫不隐讳地讲，到目前为止这里面的很多东西我仍是一知半解，但大致并不妨碍使用，提到的很多内容可能理解不一定准确甚至有误，欢迎批评指正；涉及到代码的部分，多数是在csdn平台上搜索到并实践过的，这里只是充当搬运工，已知悉者请略过。如有高手愿意在评论区指点，不胜感谢！
不赘述了，先从小皮面板的使用谈起吧。
第一部分 小皮建站
首先强烈建议大家搭建本地开发环境，我原先曾经在服务器上操作过一阵，但服务器环境确实不友好，一会儿不操作就断线了，传个文件也麻烦。小皮本地搭建开发环境相对是比较简单的：小皮面板(phpstudy) - 让天下没有难配的服务器环境！，下载phpstudy，傻瓜式安装，注意安装路径不能有中文名或空格，也不能是之前安装过的目录。
1、建站首页，启动WAMP、Apache或Nginx和数据库（MySQL），Apache或Nginx配置设置网站目录为要开发和测试的目录。在此之前，要把网站目录的整体文件（目录建议不用中文）拷贝至phpstudy_pro下，这个是安装小皮后默认的php环境。
2、网站页面，点击左侧-网站-创建网站。
域名：localhost /*用于本地测试
以后放到服务器上，如果需要和正式域名挂接，输入正式域名即可。
端口：建议8099及以上之类，不使用80端口。
注意：启动Apache或Nginx时，可能会提示80端口被占用的情况，是因为有系统服务程序占用了本地端口。这里尽量不要改Apache或Nginx的端口，默认80就好，否则很麻烦，只能通过127.0.0.1：端口，来访问。
3、配置数据库
修改root密码，创建数据库，创建时选择与要添加的网站目录挂接。创建好后，如果需要导入服务器的数据，需要按以下方式操作一下：
导入数据问题：从远程服务器上，打开navicat（管理数据库的软件），打开用户连接，选择数据库名称，在左侧文件夹上点右键，整体存储为（结构+数据），即可。导出的文件为 *.sql类型。
在小皮面板的软件管理中下载phpmyadmin软件，打开，登录（前面创建的数据库用户名、密码），导入刚才的*.Sql文件，提示导入成功。
4、在浏览器中输入：localhost：8099（以具体设置为准）（前端），localhost：8099/admin/public/admin.html（后台）
这样就配置好了。这里可能还会有几个问题。
一、只能访问首页，访问其他页面报错的问题，解决方式如下：
/*解决Nginx配置只能显示首页的问题
小皮建站→设置→vhosts.conf 所启用的nginx.htaccess文件中（这个文件通常在网站的根目录），添加如下代码：
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s=$1 last;
break;
}
修改完成后一定要重启Nginx。
/*解决Apache配置只能显示首页的问题
网站根目录下，打开.htaccess文件，添加如下代码：
Options +FollowSymlinks -Multiviews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]
修改完成后一定要重启Apache。
二、数据库报错问题。类似“error 1055 ，this is incompatible with sql_mode=only_full_group_by”，这可能是高版本数据库对于数据校验更严格造成的。解决方式：
小皮建站中的数据库配置文件中的[mysqld]下方加入如下语句，重启数据库即可。
sql-mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION //或只有： sql-mode= NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION //这样不是严格校验模式，传数值的时候不会报错。
上面涉及到的几个软件，开发软件使用的是微软的VSCODE，免费且强大，推荐使用；数据库管理软件，Navicat，这个是收费的，但确实功能很强大。
第二部分 网站布局和美化
这里主要提几个基本概念。
一是文档流的问题。div布局默认的文档流，块级元素是垂直向下的，所以要让块级元素水平排列，就需要在css中定义left、right浮动类，或定义style= “float：left;”,如果要让紧随其后的块级元素换行，需要清除浮动，定义相应的clearfix类，或clear:both均可。
二是块级元素和行内元素的使用。块级元素会独占一行，高度，行高，外边距和内边距都可以单独设置；宽度默认是容器的100%；可以容纳内联元素和其他的块级元素。常见的块级元素有： ,,,
,
行内元素的特点：和相邻的行内元素在一行上；高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效；默认的宽度就是它本身的宽度；行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）。常见的行内元素有：,,,,,等。
三是CSS样式定义的优先级顺序。
层叠优先级: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式；
样式表优先级: 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
Div+css还有两个可能会产生迷惑的问题，就是position定位以及z-index的使用。定义了style=“position：relative；” 或style=“position：absolute；”后，会导致div布局产生变化。实际上系统默认position：static，所以进行上述定义时，一定要类似style=“position：absolute；left：0px；”这里左边距即使是0px也要写上。相对定位是不改变文档流占位的。至于绝对定位和相对定位很具体的区别，这里就不赘述了。Z-index允许div层叠使用，数字大的在上面。这里只提一点，多个z-index区域重叠时，有时会导致某个点击失效，也算是踩坑经历吧。
接下来讲几个初级实用性的布局问题：
1、根据条件判断div布局是否显示、隐藏或同一区域显示不同内容。
{$base_list.gonggao}
以上是一个公告区域，如果有公告则显示，否则什么都不显示。
2、页脚始终固定在页面的底部。有的页面文字很少，如果没有这一功能，页脚可能会跑到页面中间，还是比较难看的。代码如下：
这段代码放在公共页脚位置就好。其中.foot是页脚应用的class类。
3、蜘蛛技术（sprite），主要是针对同一个页面很多图标，分别加载导致网站加载缓慢的情形。原先开发的网站就是很多图标，但是这次清理的差不多了，sprite也基本用不着了。放上代码，分享给有需要的人。
.Sloth-bg_dg {
background-image: url("../icon/sprite.png");
background-position: -50px -60px;
width: 36px;
height: 131px;
}
这里实际上是定义了一张sprite.png的大图，这张图里有很多图标，每次页面加载这一张图就够了，这样就能加快加载速度。这里的background-position，指的是具体某个图标左上角距离大图左上角顶点的距离，用负值表示，这张图是在Photoshop里完成的，Photoshop这里不讲了。在div中定义class=“sloth-bg_dg”即可。
接下来重点谈谈网站美化方面的事情。
涉及到网站的整体布局和配色、弹框样式、地图标注样式、文字字体及间距、图片对齐等诸多方面，美感往往因人而异、见仁见智，但是明显不美观的事物大家看法还是基本一致。
如系统提示框，确实缺乏美感。如下：
调整了一下，看起来好多了，如下图：
代码如下：
window.alert = function(str)
{
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "fixed";
shield.style.left = "50%";
shield.style.top = "50%";
shield.style.width = "280px";
shield.style.height = "150px";
shield.style.marginLeft = "-140px";
shield.style.marginTop = "-110px";
shield.style.zIndex = "999999999";
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "fixed";
alertFram.style.width = "280px";
alertFram.style.height = "150px";
alertFram.style.left = "50%";
alertFram.style.top = "50%";
alertFram.style.marginLeft = "-140px";
alertFram.style.marginTop = "-110px";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "9999999999";
strHtml = "- n";
strHtml += "
- 温馨提示： n"; strHtml += "
- "+str+" n"; strHtml += " n"; strHtml += "
单独封装到一个js文件中，页面使用时引入即可。
window.setTimeout("closewin()",1200);这段代码是设置自动关闭的，关闭时间为1200毫秒，可根据自己的需要设置。
还有两个系统弹框的问题没有解决，在php文件中的alertLocation和alertBack函数，这种函数需要如何定义弹框，搞不掂。
地图标注样式。
网站使用了百度地图，通常的标注样式是这样的：
站在网站开发的角度，这个已经没有问题了。但是站在使用者的角度，如果标注的是公司名称，再加上一个灰框或红框，大家想象一下这个意境？所以对标注样式做了修改，如下图：
关于样式设置的代码如下：
var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
label.setStyle({
color:"rgb(238,201,0)",
border:"0",
borderRadius:"5px",
paddingLeft:"8px",
paddingRight:"8px",
paddingTop:"3px",
paddingBottom:"3.5px",
backgroundColor:"rgb(0,104,139)",
fontSize:"14px",
fontWeight:"normal",
})
label.setStyle这一段，是设置标注样式的。
这里还有一个问题，后台数据库是可以输入多个标注点的，但这里只显示了一个，需要如何添加多点标注，教程也不少，看了看还没有搞明白。
另外就是使用空白符（ ）导致的多个设备显示不一样的问题，电脑上显示好好的，但ipad上显示就有问题，主要是最后一个字符会自动换行导致版面混乱的问题。如果单独开发一个适配于ipad和iphone的版本当然更好，但没有精力去做这件事。这种情况，样式中增加：就好了。
还有很多诸如图片对齐、行间距等方面的问题。站在网站开发者的角度，这不是什么事；但站在使用者的角度，下图这种没有对齐还是很影响感觉的。
这可能是作为产品领域人士的一种职业病吧，无论是IT行业的产品还是建筑行业的产品，我相信都是如此。一直以来总是希望无论是在建筑美学还是工程品质方面，都达到尽善尽美。笔者这些年也是这么过来的，外立面重复打样7、8次才允许施工，只为追求立面设计美感；防渗漏深扣细节，直到现场工程人员反感；图纸审查不厌其烦……，似乎跑题了。
下面谈谈更深层次的一些操作吧。
第三部分 kindeditor使用和网站增删改查功能、数据库操作
Kindeditor使用，直接放代码（kindeditor的导入就不在这里赘述了）：
1、前端页面：
2、控制器中的add()、edit()、delete()方法
这里首先要谈谈MVC的概念，所谓MVC实际是Model,View,Controller的缩写，这样网站页面才能正常显示。TPL中网页名形如：tuwen_add.html，对应于控制器TuwenController.class.php中的add()方法（控制器名称采用驼峰法命名，首字母大写），这个问题曾卡了我很长时间不得要领。前端页面中的点击提交也就是一个post过程，具体存入数据库的过程如下：
public function add(){
$user=M('user');
$user=$user->where("id='{$_SESSION[user_id]}'")->find();
$this->assign('user',$user);
$table = M('tuwen');
if (IS_POST){
$where = I('post.');
if ($where['description']){
$where['description'] = stripslashes(htmlspecialchars_decode($where['description']));
}
$where['addtime'] = time();
$where['nickname']=$user['nickname'];
if ($res=$table->add($where)){
alertLocation('发帖成功！', '/Home/Jiantie/index');
}else {
$this->error('发帖失败！');
}
}
$this->assign('tuwen',$res);
$this->display();
}
$where['description'] = stripslashes(htmlspecialchars_decode($where['description']));
上面这句代码很重要，否则从kindeditor取不到值。
如何让数据库里的内容显示出来，是常规方法，不赘述了。这里讲一下通过kindeditor发出的帖子内容修改的问题。前端代码和上面的基本是一致的，只是有个显示的问题，不多说了，只是谈谈控制器部分：
public function edit(){
$user=M('user');
$user=$user->where("id='{$_SESSION[user_id]}'")->find();
$this->assign('user',$user);
$id = I('get.id');
$table = M('tuwen');
$data1 = $table->where("id = $id")->find();
$data1['description']=htmlspecialchars($data1['description']);
$this->assign('data1',$data1);
if (IS_POST){
$table = M('tuwen');
$data = I('post.');
if ($data['description']){
$data['description'] = stripslashes(htmlspecialchars_decode($data['description']));
}
$data['addtime']= time();
$table=$table->where("id = $id")->save($data);
if (!empty($table)){
alertLocation('修改成功！', '/Home/Jiantie/index');
}else {
$this->error('没有任何修改！');
}
}
$this->assign($data);
$this->display();
}
$id = I('get.id');这段代码，是通过get方法获得某个id对应帖子的数据修改。形如：/Home/Jiantie/edit/id/{$v.id}，在Home命名空间下的JiantieController.class.php的edit()方法中，就可以通过I('get.id')方式进行浏览器地址传参。
再谈一下帖子删除的问题。前端代码很常规，主要就是选择，不赘述了，点击调用del()函数传参,这段代码如下：
控制器代码如下：
public function delete(){
$post = implode(',',$_POST['id']);
$table = M('tuwen');
$data = $table->delete($post);
if ($data){
echo '删除成功！';
}else {
echo '删除失败！';
}
}
代码到这里就结束了。对于代码的理解，个人认为至多也就是入门级水平，但是作为网站的需求者、应用方，还是希望在这里谈一下网站开发需要注意的事项，供借鉴。
第四部分 网站开发需要注意的事项及忠告
一、初次开发网站的需求者，经常把软件功能想象的无所不能，这是一个大大的误区。尽量做的实用而精，对开发团队和自己而言，都是非常必要的。通过自己动手改网站，发现一个功能的改动，经常需要调整很多地方；反复测试也是一个痛苦的过程。这一点，网站开发团队务必要一开始就明确告知需求者，并做必要的坚持，否则大家都会很疲惫。
二、如果不是较大投入的网站开发，需求者不要对网站开发团队美工寄予太高的期望。美工不是一朝一夕就能练成的，短时间做出来的东西更是没可能。如果一定要做好，最好单独找人提前做好相应规格的ps文件，自己会动手做ps文件最好，其实ps应用级水平还是不难达到的。同时，网站开发团队也要理解客户美学需求，站位不一样关注点确实不一样，前面提到了不少。很多网站开发团队认为客户吹毛求疵，其实只是站位不一样罢了，换位思考。
三、网站开发团队如果要获得更好的客户粘性，一定要为开发网站的后期运行多考虑一点。比如网站的打开速度，之前有一版修改，开发团队导入了一个外部幼圆字体，6M，网站打开奇慢无比，后来自己动手修改删除了，当然现在由于图片多网站速度还是欠理想。又比如网站的安全性问题，包括端口策略、特殊字符串过滤、关闭危险函数等，之前一直被困扰，现在也不是太明白。千万不要觉得客户不明白，我做了也没意义。其实如同笔者做建筑一样，大量的隐蔽工程我们都是一丝不苟地去做好，这些都是客户看不见的，但因此也做出了很多精品工程。无愧于心，用心就好。
不知不觉写了这么多了，再次感谢csdn平台！感谢平台上给予我帮助的各位先贤和高手！这次修改网站于我是一次深刻的经历，前些日子逛动物园，苦思kindeditor的用法，差点撞到河马馆。几乎每次在外吃饭等餐都是在翻阅csdn中度过。坚持，是为了更好的理解；遍历诸天，方得不动三昧。希望我的帖子能够帮到大家，赠人玫瑰，手有余香，也欢迎大家转发。
开发的网站地址，www.wufangdingzhi.com，几个资深建筑设计师、产品人打造的开放平台，主要目的是改善国内自建房、民宿设计和建造的品质和美学感受。网站还有很多不足，欢迎大家多提宝贵意见。
