网站建设 - 第 2 页

2020-03-142020-08-05

网页栅格系统应该怎么用

概要

一、栅格系统的必要性

二、栅格系统的基本概念

三、栅格系统的分类及计算公式

四、栅格系统在响应式布局中的应用

五、网页栅格系统的使用步骤

一、网页栅格系统的必要性

更专业

使设计有迹可循，具有逻辑性，同时也更规范，减少设计中的尺寸计算和无效尝试，设计师可以将更多的精力放在设计本身。

更高效

统一设计规范，减少决策时间，使沟通更高效。

布局更方便

特别是对响应式布局，能够使不同设备上呈现的界面更具统一性。

二、栅格系统的基本概念

基本组成:

栅格总宽度（W）
列（a）
水槽（i）
外边距（M）

栅格总宽度(W)

栅格总宽度就是设计内容的宽度，一般来说网页的顶部和侧边导航、背景装饰元素、通栏banner和底栏（footer）可以不受栅格总宽度限制。

列(a)

栅格的单位，它们构成了内容宽度。最常用的12列、24列。列的宽度一般会计算得出，或直接自定义，首先要确定的是列的数目。

水槽(i)

水槽是列与列之间的间隔，水槽宽度越小内容越紧凑；越大留白越多，页面更有呼吸感，但水槽宽度不能比列宽大，否则不利于内容的展示。水槽内不可以放内容，不然的话使用栅格还有什么意义。

外边距(M)

是内容宽度之外的留白部分，会随着设备的宽度不同而变化。外边距一般有个安全距离，可以按照水槽宽度的（常用0.5、1.0、1.5、2.0）倍数来计算。

三、栅格系统的分类和计算公式

a、有边距的栅格：适合已知要设计的内容宽度（即W已知）

b、无边距的栅格：适合已知要适配的网页尺寸，使用最接近网页内容尺寸的栅格系统。

c、直接等分的网格：已知要设计的内容宽度和列宽及列的数目

四、栅格系统在响应式布局中的应用

栅格系统应用于响应式布局，有三种类型：

固定网格布局；
流动网格布局；
混合网格

在此之前有个断点的概念，需要了解一下

断点：是具有特定布局要求的预定屏幕尺寸的范围。在给定的断点范围内，布局会根据屏幕大小和方向进行调整。超出范围则相当于达到某个临界点，界面布局会发生变化。

a、固定网格布局

固定网格，列宽和水槽宽不会改变，只是改变列的数目，当窗口缩放时，排版布局不会发生任何改变，只有当达到一个临界值（开发那边设置好的固定的值），界面才会发生改变。在此之前界面排版都是不变的，就像一部分被切掉了。

b、流动网格布局

内容宽度会随着窗口的缩放而发生改变，例如图片会缩小，文本会换行。水槽的宽度不一定是固定的，可以随着页面宽度变化。

c、混合网格

即固定网格和流动网格组合的形式，常用于后台系统设计、工具型界面设计等。

例如上面的后台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格。水槽宽度保持不变。

五、栅格系统的使用步骤

确定内容的总宽度W（常用的1180px、1190px、1200px、1400px）
确定栅格数目n（如果你的网页结构相对简单，则n=12即可，如果网页结构比较复杂或者具有排版的不确定性，则用n=24。）
确定水槽的宽度i（水槽宽度常用的6、8、10、15、20px）
在sketch/ps里设置上面的参数即可得到一套栅格系统

Sketch非常方便，在「视图」-「画布」-「布局设置」即可得到如下界面设置栅格系统（中文和英文对照）

Ps中「视图」-「新建参考线版面」，虽然没有Sketch那么方便，但依然能够很方便设置出栅格系统，如图。

本文总结

栅格系统组成：总宽度（W）、列（a）、水槽（i）、外边距（M）
计算公式：有边距网格：W=（a i）*n；无边距网格：W=（a i）*n-i；确定总宽度，确定列宽和数目直接等分
响应式布局三种类型：固定网格布局；流动网格布局；混合网格
栅格使用三步骤：第一步确定总宽度（W），第二步确定栅格的数目（n），③第三步确定水槽宽度（i）

其他的一些小技巧：

网页中常用100px栅格，也就是列宽与水槽的常见组合（90 10、80 20、70 30、85 15）px
网页中图片推荐使用常用比例（21:9、16:10、16:9、7:5、4:3、1:1）
栅格不是固定死的，可以自定义符合当前项目的栅格系统。

推荐一个智能生成栅格系统的网站：http://grid.guide/

有了这个省去了很多计算的过程，可以直接下载下来png格式，放到软件里面直接拉参考线，就有了一套网格系统，是不是很方便。

原文地址：UI设计进阶（公众号）

作者：阿倩

2020-03-042020-08-07

一个页面同时使用多个TinyMCE编辑器

来源:

http://tinymce.ax-z.cn/general/multiple-editors.php

一个配置共享多个编辑器实例

该官方提供的例子，将页面分成两个单独的可编辑区域。每个区域共享一个编辑器。每个区域的div使用了相同的class（.myeditablediv）。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>
  tinymce.init({
    selector: '.myeditablediv',
    inline: true
  });
  </script>
</head>

<body>
  <h1>Multple editors on a page: Section 1</h1>
  <form method="post">
    <div class="myeditablediv">Click here to edit the first section of content!</div>
  </form>

  <h1>Multple editors on a page: Section 2</h1>
  <form method="post">
      <div class="myeditablediv">Click here to edit the second section of content!</div>
  </form>
</body>
</html>

多个实例，每个具有唯一配置

简单说就是init两次，每次selector不一样就是了，不废话直接上官方示例代码。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script">
  tinymce.init({
    selector: '#myeditable-h1',
    inline: true,
    menubar: false,
    toolbar: 'undo redo'
  });
  </script>
  <script>
  tinymce.init({
    selector: '#myeditable-div',
    inline: true
  });
  </script>
</head>

<body>
  <form method="post">
    <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
  </form>

  <form method="post">
    <div id="myeditable-div">
      <p>This section of content can be edited. Click here to see how.</p>
    </div>
  </form>
</body>
</html>

说明:

在做网页开发时,有时会遇到一个表单使用多个编辑器,通常编辑器的配置是一样的,这时我们只需要统一给编辑器一个class即可简单实现一个页面同时使用多个TinyMCE编辑器.

2020-02-252020-08-05

PAYJS相关说明

PAYJS注册后，无法修改商户名，请确定后再提交。

JSAPI支付目录只支持三个，且域名需备案，不支持修改。

不支持H5和APP支付

2020-02-252020-08-05

备案中注销网站后遇到空壳主体的解决方法

起因：

在阿里云注销了备案的两个网站，然后阿里云的备案全部被清除了。

重新备案时，填写资料，进行备案，阿里云通知说备案主体在工信部有记录，无法进行备案。

后经查询得知，这种情况叫空壳主体。

通过回忆，想起来在景安备案过一个域名，注销了网站，但不记得是否注销主体，然后登录上去发现还真有主体的记录，然后提交注销主体操作，等待工信部进行审核注销。

总结：

备案分备案主体和备案网站两个信息，在不同的服务商处进行备案，都会有备案主体存在，如果部分服务商在不存在备案域名的情况下，不能保留备案主体信息，就无法在注销网站后进行重新备案，需在通信管理局注销备案主体。

原则上注销备案主体是要在服务商的备案平台进行操作。如果无法找到，也可以通过填写资料，邮件到各省对应的备案管理处进行线下操作，但不建议这样处理。

建议记录了备案过的相关信息，以备后面遇到问题，好解决。

扩展知识：

空壳主体:在工业和信息化部备案系统中，网站主办者的历史备案信息只存在主体信息，没有网站信息和接入信息。

空壳网站:在工业和信息化部备案系统中，网站主办者的历史备案信息中含有主体信息和网站信息，但（一个或多个网站）没有接入信息（即网站有备案号，但由于网站实际使用空间IP地址变更，之前空间接入商已将网站的备案信息取消接入，同时网站主办者并没有在新的空间接入商办理备案信息转接入）。

2020-02-152020-08-05

DEDECMS(织梦)安装遇见Safe Alert: Request Error step 2

打开dede根目录下载的
include/dedesql.class.php
将第51行的
$this->safeCheck = TRUE;
改为
$this->safeCheck = FALSE;

安装成功后,建议再修改回来,以保证安全.

2020-02-152020-08-07

解决Call to undefined function dede_htmlspecialchars()问题

2 015年6月18日更新的新版本的织梦5.7，为了兼容php5.4+，修改了common.func.php，可能有些模板也改动过这个文件，这样会导致在安装模板时，common.fuc.php文件被覆盖，从而在发布文章时，编辑框的位置出现“Call to undefined function dede_htmlspecialchars()”这样的错误提示。

解决办法如下：

打开common.func.php，搜索“function RunApp”，在这个函数的上面添加织梦新版本新增的函数：dede_htmlspecialchars

function dede_htmlspecialchars($str) {
global $cfg_soft_lang;
if (version_compare(PHP_VERSION, '5.4.0', '<')) return htmlspecialchars($str);
if ($cfg_soft_lang=='gb2312') return htmlspecialchars($str,ENT_COMPAT,'ISO-8859-1');
else return htmlspecialchars($str);
}

2020-02-152020-08-07

DedeCMS自定义文件名重复问题的解决办法

DedeCMS自定义文件名重复问题的解决办法。

首先，进入你的后台管理目录（默认为dede），分别打开article_add.php（添加文章）和article_edit.php（编辑文章），查找如下代码：

$filename = trim(cn_substrR($filename,40));
接下来，在后面加上：

//DedeCMS自定义文件名重复解决方法
if(!empty($filename))
{
$checksql = $dsql->GetOne("SELECT * FROM `#@__archives` WHERE filename='".$filename."' and arcrank > -2");
if($checksql)
{
ShowMsg("你的自定义文件名已存在，请重写填写！","-1");
exit();
}
}
最后，保存article_add.php和article_edit.php.

这样就会在文件名重复时提醒,修改即可.

2020-02-152020-08-05

织梦DedeCMS判断字段为空时则显示其它字段

灵活使用DedeCMS进行建站时,在判断字段内容进行个性输出,是建站者所必须掌握的一个持基。影子互联接合多年网站建设经验,分享如下：
方法一：
{dede:field name='array' runphp='yes'} if (@me['shorttitle']=='') @me=@me['title'];else @me=@me['shorttitle'];{/dede:field}

方法二：
[field:array runphp='yes'] if (@me['shorttitle']=='') @me=@me['title'];else @me=@me['shorttitle'];[/field:array]

这个方法可以在{dede:arclist}标签中套用。

方法三：
有时标题过长，全部显示会导致排版混乱，影响美观。但显示一部分又影响用户体验。我们希望当标题在一定长度范围内时,全标题显示，当标题过时，只显示一定长度，后面加省略号，然后当鼠标移上去时再显示标题的全部内容，这样就即做到了不影响版面的布局，又做到了标题内容的全部显示。

这里给出不需要修改程序，只修改模板的方法。举例，下面的标题列表，最长的标题50字节，只想显示30字节，模板代码如下：

<ul>
{dede:arclist titlelen='50' row='10'}
<li><a title="[field:title /]" href="[field:filename%20/]">[field:title function='( strlen("@me")>30 ? cn_substr("@me",30)."..." : "@me" )'/]</a></li>
{/dede:arclist}
</ul>

很明显，解决问题的关键在于用 [field:title function='( strlen("@me")>34 ? cn_substr("@me",30)."..." : "@me" ) ' /] 代替了原来的 [field:title /] ，在输出标题时多了一个判断的过程，先判断标题是否大于34字节，如果大于则只输出30字节的长度，并加上省略号。而title="[field:title /]" 则不受影响，鼠标移上去时显示标题的全部内容。

2020-02-152020-08-05

dedecms织梦文章审核机制解析

织梦通过dede_archives表中的arcrank和ismake两个字段控制文章的审核和状态。其中arcrank是审核控制字段，它有-1和0两个值;ismake是静态动态控制字段，它有三个值：0，1，-1。

另外,文章微表dede_arctiny中的arcrank字段与dede_archives表中的arcrank状态同步,也是审核控制字段,这两者需同步一致方可.

以上情况组合起来会有多种情况:

审核状态生成html:$arcrank=-1 $ismake = 0 (但是后台文章列表那里显示没有生成,点击修改文章是显示以生成，其实没生成，因为是未审核，一但审核，自动变成1)。

审核状态动态浏览:$arcrank=-1 $ismake = -1 ;

开放状态生成html:$arcrank=0 $ismake = 1 ;

开放状态动态浏览:$arcrank=0 $ismake = -1 ;

通过以上的情况,我们可以分析多种情况下出现的问题,以求解决.同时要注意微表dede_arctiny中的arcrank状态同步.

微表dede_arctiny是起到索引的作用,在前台列表中即可通过微表来显示文章的.

织梦有个定时审核插件,即是通过修改微表dede_arctiny中的arcrank字段与dede_archives表中的arcrank字段来实现的.

同时,在审核过程中,文章相关的标签表dede_taglist中的相关标签的arcrank字段也会通过审核状态.

以上,即是DedeCMS织梦文章审核机制的简单说明.

2020-02-152020-08-05

ecshop在IIS7 8上的rewrite重写规则web.config

ecshop在IIS7 8上的rewrite重写规则web.config,以下才是正确姿势：

其实iisrewrite配置成功后，相应的rewrite规则写到根目录的web.config文件中即可。ecshop2.7.3对应的规则如下

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Index" stopProcessing="true">
<match url="^index.html" />
<action type="Rewrite" url="index.php" />
</rule>
<rule name="Feed-C" stopProcessing="true">
<match url="^feed-c([0-9]+).xml" />
<action type="Rewrite" url="feed.php?cat={R:1}" />
</rule>
<rule name="Feed-B" stopProcessing="true">
<match url="^feed-b([0-9]+).xml" />
<action type="Rewrite" url="feed.php?brand={R:1}" />
</rule>
<rule name="Feed" stopProcessing="true">
<match url="^feed.xml" />
<action type="Rewrite" url="feed.php" />
</rule>
<rule name="Category6" stopProcessing="true">
<match url="^category-([0-9]+)-b([0-9]+)-min([0-9]+)-max([0-9]+)-attr([^-]*)-([0-9]+)-(.+)-([_0-9a-z-]+).html" />
<action type="Rewrite" url="category.php?id={R:1}&brand={R:2}&price_min={R:3}&price_max={R:4}&filter_attr={R:5}&page={R:6}&sort={R:7}&order={R:8}" />
</rule>
<rule name="Category5" stopProcessing="true">
<match url="^category-([0-9]+)-b([0-9]+)-min([0-9]+)-max([0-9]+)-attr([^-]*).html" />
<action type="Rewrite" url="category.php?id={R:1}&brand={R:2}&price_min={R:3}&price_max={R:4}&filter_attr={R:5}" />
</rule>
<rule name="Category4" stopProcessing="true">
<match url="^category-([0-9]+)-b([0-9]+)-([0-9]+)-(.+)-([_0-9a-z-]+).html" />
<action type="Rewrite" url="category.php?id={R:1}&brand={R:2}&page={R:3}&sort={R:4}&order={R:5}" />
</rule>
<rule name="Category3" stopProcessing="true">
<match url="^category-([0-9]+)-b([0-9]+)-([0-9]+).html" />
<action type="Rewrite" url="category.php?id={R:1}&brand={R:2}&page={R:3}" />
</rule>
<rule name="Category2" stopProcessing="true">
<match url="^category-([0-9]+)-b([0-9]+).html" />
<action type="Rewrite" url="category.php?id={R:1}&brand={R:2}" />
</rule>
<rule name="Category1" stopProcessing="true">
<match url="^category-([0-9]+).html" />
<action type="Rewrite" url="category.php?id={R:1}" />
</rule>
<rule name="Goods" stopProcessing="true">
<match url="^goods-([0-9]+).html" />
<action type="Rewrite" url="goods.php?id={R:1}" />
</rule>
<rule name="Cat3" stopProcessing="true">
<match url="^article_cat-([0-9]+)-([0-9]+)-(.+)-([_0-9a-z-]+).html" />
<action type="Rewrite" url="article_cat.php?id={R:1}&page={R:2}&sort={R:3}&order={R:4}" />
</rule>
<rule name="Cat2" stopProcessing="true">
<match url="^article_cat-([0-9]+)-([0-9]+).html" />
<action type="Rewrite" url="article_cat.php?id={R:1}&page={R:2}" />
</rule>
<rule name="Cat1" stopProcessing="true">
<match url="^article_cat-([0-9]+).html" />
<action type="Rewrite" url="article_cat.php?id={R:1}" />
</rule>
<rule name="Articles" stopProcessing="true">
<match url="^article-([0-9]+).html" />
<action type="Rewrite" url="article.php?id={R:1}" />
</rule>
<rule name="Brand4" stopProcessing="true">
<match url="^brand-([0-9]+)-c([0-9]+)-([0-9]+)-(.+)-([_0-9a-z-]+).html" />
<action type="Rewrite" url="brand.php?id={R:1}&cat={R:2}&page={R:3}&sort={R:4}&order={R:5}" />
</rule>
<rule name="Brand3" stopProcessing="true">
<match url="^brand-([0-9]+)-c([0-9]+)-([0-9]+).html" />
<action type="Rewrite" url="brand.php?id={R:1}&cat={R:2}&page={R:3}" />
</rule>
<rule name="Brand2" stopProcessing="true">
<match url="^brand-([0-9]+)-c([0-9]+).html" />
<action type="Rewrite" url="brand.php?id={R:1}&cat={R:2}" />
</rule>
<rule name="Brand1" stopProcessing="true">
<match url="^brand-([0-9]+).html" />
<action type="Rewrite" url="brand.php?id={R:1}" />
</rule>
<rule name="Search" stopProcessing="true">
<match url="^tag-([_0-9a-z-]+).html" />
<action type="Rewrite" url="search.php?keywords={R:1}" />
</rule>
<rule name="Snatch" stopProcessing="true">
<match url="^snatch-([0-9]+).html" />
<action type="Rewrite" url="snatch.php?id={R:1}" />
</rule>
<rule name="Group_Buy" stopProcessing="true">
<match url="^group_buy-([0-9]+).html" />
<action type="Rewrite" url="group_buy.php?act=view&id={R:1}" />
</rule>
<rule name="Auction" stopProcessing="true">
<match url="^auction-([0-9]+).html" />
<action type="Rewrite" url="auction.php?act=view&id={R:1}" />
</rule>
<rule name="Exchange5" stopProcessing="true">
<match url="^exchange-id([0-9]+).html" />
<action type="Rewrite" url="exchange.php?id={R:1}&act=view" />
</rule>
<rule name="Exchange4" stopProcessing="true">
<match url="^exchange-([0-9]+)-min([0-9]+)-max([0-9]+)-([0-9]+)-(.+)-([_0-9a-z-]+).html" />
<action type="Rewrite" url="exchange.php?cat_id={R:1}&integral_min={R:2}&integral_max={R:3}&page={R:4}&sort={R:5}&order={R:6}" />
</rule>
<rule name="Exchange3" stopProcessing="true">
<match url="^exchange-([0-9]+)-([0-9]+)-(.+)-([_0-9a-z-]+).html" />
<action type="Rewrite" url="exchange.php?cat_id={R:1}&page={R:2}&sort={R:3}&order={R:4}" />
</rule>
<rule name="Exchange2" stopProcessing="true">
<match url="^exchange-([0-9]+)-([0-9]+).html" />
<action type="Rewrite" url="exchange.php?cat_id={R:1}&page={R:2}" />
</rule>
<rule name="Exchange1" stopProcessing="true">
<match url="^exchange-([0-9]+).html" />
<action type="Rewrite" url="exchange.php?cat_id={R:1}" />
</rule>
<rule name="Topic" stopProcessing="true">
<match url="^topic-([0-9]+).html" />
<action type="Rewrite" url="topic.php?topic_id={R:1}" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

一开始网站试了很多规则，都提示某行错误，白色不得其解，后来发现是“&”搞的鬼，把对应的“&”都修改为“&”即可。