手把手教你掌握网站建设、APP设计以及Logo和图标生成

前言：本文所需所有软件均已打包上传至我的资源，也可以去官网下载。

网站建设

网站 = 服务器 + 程序 +域名

服务器

有条件可以到阿里云官网租赁服务器，本次实验我选择在本地搭建服务器。一来方便网站编辑调试，二来不需要花费太多钱。那么开始吧！

本地搭建服务器所需软件：

• phpstudy
• USBwebserver

这两个工具的作用都是建站软件，可以快速搭建本地PHP环境。我选择使用USBwebserver来搭建本地环境。

USBwebserver简介

USBWebserver 是一款非常简单实用的 本地PHP环境搭建工具，无需安装，只需双击运行，5秒钟，一个包含 Apache,MySQL, Php 和 PhpMyAdmin的本地PHP环境就诞生啦！更为神奇的是，你还可以将它放在你的U盘或CD中，照样可以正常使用，因为 USBWebserver是不需要安装的绿色软件哦！

USBwebserver使用方法

1. 解压USBwebserver压缩包
   
2. 打开解压后的文件夹，找到exe结尾的可执行程序双击打开
   
   注意：必须要是绿色的对勾计算机才能变成本地网站服务器
   
3. 修改文件名（为了不与后面Wordpress里面的文件名起冲突）
   
   
4. 将WordPress压缩包里的文件导入到服务器根目录（WordPress后面有介绍，这里按步骤进行即可）
   
5. 点击localhost启动网站界面
   
   进入界面（第一次进入需要进行配置，后面就不需要）：
   
   
   
   
   
   
   
   到此，网站启动完成
6. 在仪表盘中新建一个分类目录
   
   
   可以再新建几个目录，写文章的时候可以分门别类的进行保存。
7. 将上传文件大小的限制改动
   打开配置文件所在位置：
   
   
   点击文件进行配置：
   
   
   记得保存！！！ 重启服务器配置才能生效。
8. 页面设置
   WordPress除了提供博客的文件管理，还可以新建页面：
   
   
   编写好了以后点击右侧更新即可保存。要想看到本次编写的页面，还需要进行下一步。
9. 菜单设置
   点击菜单栏：
   
   
   
   点击查看站点：
   
   
10. 网站主题自定义
    
    
11. 安装插件实现其他功能
    现在的网站太过单调，只能发布文章或新建页面，我们需要更多的功能可以安装插件：
    
    但是这些插件都需要“梯子”才能安装，因此你可以在国内下载插件压缩包上传至网站，这样也可以使用。
12. 进入后台中心的网址：http://localhost:8080/wp-admin

程序

使用到的工具：WordPress

WordPress简介

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统，具有插件架构和模板系统。

域名

服务器的名字用于代替难记的IP地址。由于本次网站搭建是在本地进行，所以用不到域名，可跳过这一环节。

APP设计

APP开发

要想实现APP开发你需要过硬的专业知识，但是今天我们不是去实现APP开发，所以这一小节了解就行。

苹果APP开发：

需要集成开发环境：Xcode
掌握编程语言：Swift

安卓APP开发：

集成开发环境：Android Studio
掌握编程语言：Java

APP原型设计

原型设计就是快速做个APP的样式，可以点击、滑动页面不过没有什么实质性的功能。

原型设计软件有：

Adobe XD
Mockplus(国产之光)，本次学习的就是这个软件

了解MockPlus

进入MockPlus官网，点击设计资源——项目例子：


可以看到有许多APP的例子，随便点击一个进行预览：

点击在线预览：

可以进行仿真操作：

官网上有很多教程：

使用Mockplus进行APP原型设计

点击产品——下载经典版——安装：

注册完成后，点击新建项目：


点击创建

一般APP页面开始都是一个欢迎页面，那我们就开始设置欢迎页面：
重命名：

添加图片：

新建页面做登录页面：

至此，登录页面设置完成

资讯页面：

预览：

点击：

在进行完善资讯页面之前，先完成商品页面的第一步
完成商品页面第一步后，切换回资讯页面继续操作：

至此，资讯页面完成了！！！

商品页面：

克隆页面：

文字也可以这样进行处理。

OK，到目前为止，页面已经完成渲染，现在需要一个功能：即页面与页面之间有关联：

1. 进入启动页面2s后自动跳转到登录页面：
   
2. 点击登陆页面的逛逛进入到资讯页面：
   
3. 资讯页面与商店页面的交互：
   
   

点击页面流程图进行观看：

到此，APP设计就完成啦❤🧡❤，当然这个APP还有一些模块没有实现，大家可以依据官网案例进行补充ヾ(≧▽≦*)o

补充：
完善页面：

完成的功能是点击顶部资讯文字后会自动跳转到顶部

LOGO和图标

LOGO主要有三类：
文字类：

图形类：

组合类：

设计软件：

Adobe Photoshop:本次设计ＬＯＧＯ使用的软件
Adobe llustrator
CoreIDRAW

ｐｈｏｔｏｓｈｏｐ使用

纯文字的LOGO设计

步骤如下：

保存LOGO：

纯图形的ＬＯＧＯ设计

当然，我们可以看到Photoshop里面自定义形状很少而且很老，我们可以去网上下载一些别人设计喊得形状来满足我们的需求。我们可以去：ps笔刷吧官网来找一些我们满意的形状。

点击下载到本地即可。

如图操作即可使用。

将文字和形状混合

将文字和图像混合的LOGO千变万化，掌握上面的方法后你可以根据自己喜欢设计LOGO。

本文结尾：OK，看到这里就意味着已经到了本文的末尾，希望本文能给你带来帮助！！！