ui基础与项目实战(新)

《ui基础与项目实战(新)》由会员分享，可在线阅读，更多相关《ui基础与项目实战(新)（112页珍藏版）》请在金锄头文库上搜索。

1、启讯 IT 企业项目培训大纲第一章：UI 形象识别系统4 1.1、VI 图像元素.4 1.2、UI 识别系统.4 第二章：常用的 UI 设计工具.4 1.1、Photoshop Cs6 设计工具 .4 1.1.1、Photoshop 工具的工作界面4 1.1.2、启动及关闭 PS 软件.6 1.1.3、打开文件及文件格式7 1.1.4、画布的使用8 1.1.5、图层的使用9 1.1.6、常用的 ps 快捷键10 1.1.7、工具栏10 1.1.8、液化命令30 1.1.9、滤镜30 1.1.10、动画30 第三章：网页美工30 第四章：移动终端美工31 第五章：综合美工案例31 第六章 HTM

2、L 网页设计.32 6.1、html 标签语言32 6.1.1、什么是 html.32 6.1.2、文档结构32 6.1.3、html 元素.32 第七章 CSS 层叠样式表 .35 7.1、什么是 css.35 7.1.1、标签的属性36 7.2.2、css 属性36 7.2、存放位置.36 7.2.1、行内36 7.2.2、内部36 7.3、盒子模型（重点）.39 7.3.1、宽和高39 7.3.2、边框39 7.3.3、内容40 7.3.4、对齐40 7.3.5、边距40 7.3.6、背景41 7.3.7、透明度41 7.3.8、鼠标形状42 7.3.9、伪类427.3.10、定位（重点

3、）42 7.4、web 前端排版（工作）.43 7.4.1、div+css 网页布局（五布局）43 第八章 JavaScript 脚本编程45 8.1、html,css,javascript 三者的关系46 8.2、变量.46 8.2.1、变量的定义46 8.2.3、定义变量47 8.3、数据类型.47 8.3.1、数字类型 number .47 8.3.2、字符串类型 string 47 8.3.3、布尔类型 boolean.48 8.3.4、不是数字类型 NaN48 8.3.5、未定义类型 undefined48 8.3.6、对象类型 object48 8.4、运算符.49 8.4.1、算

4、术运算符49 8.4.2、关系运算符49 8.4.3、逻辑运算符49 8.4.4、赋值运算符50 8.5、简单的算法.50 8.6、判断.52 8.6.1、单分支52 8.6.2、双分支52 8.6.3、多分支53 8.7、循环.54 8.7.1、while 循环54 8.7.2、do while 循环.54 8.7.3、for 循环54 8.7.4、for in 循环.55 8.8、数组.55 8.8.1、一行多列的表格55 8.8.2、什么是数组，为什么要使用数组？55 8.8.3、定义数组55 8.8.4、为数组的每个元素赋值56 8.8.5、遍历数组元素56 8.9、复杂的算法.57

5、8.10、函数.62 8.10.1、系统函数62 8.10.2、自定义函数63 8.11、事件.63 8.12、对象.63 8.13、正则表达式.63 8.14、面向对象.638.15、综合案例.63 第九章 Jquery 框架63 9.1、引入 jquery 函数库 63 9.2、预加载函数.63 9.3、选择器.63 9.3.1、id 选择器 .63 9.3.2、类选择器64 9.3.3、标签选择器64 9.3.4、筛选64 9.3.5、含有64 9.3.6、子元素65 9.4、标签属性操作.65 9.5、事件.65 9.6、特效.65 9.7、ajax65 9.8、综合案例.65 第十章

6、 Ajax 异步传输.65 10.1、什么是异步传输.65 10.2、ajax 对象如何创建.66 10.3、ajax 和服务器的交互.66 10.4、jquery 的 ajax67 第十一章 WEB 前端综合项目67前言前言内蒙古启讯教育咨询有限公司，主要从事软件研发，教育培训。软件研发主要研发 PHP 应用程序（家政派单系统，锡林海关及公安厅 110 报警系统，网页，自治区公安厅） ， 微信接口（公众号） ，手机 App（1.5 万） ，教育培训，PHP 程序设计（大专及以上） ，Java 程序设计（本科） 。 学习目标: 通过 4 个月的学习，掌握 PHP 后端技术及 web 前端技术的

7、所有知识点，具体知识点包 括软件界面和软件功能。学完这些知识点要达到什么程度，一、网站前端开发、二、项目 开发、三、研发 学习方法: 认真听课（技巧）-及时复习-及时练习 课程名称：PHP 软件工程师PHP 是一门计算机语言，可以用来开发软件项目。汉语是一门人类的语言，可以用来交流和写作。类似：C 语言、Java 语言、basic 语言等 学习难度：中等难度 课程模块：三个模块1.软件界面:ps,html,css 家庭照片处理 （10 天）2.界面特效:JavaScript （12 天）3.数据库处理:php （26 天）一、微信公众号的盈利模式一、微信公众号的盈利模式hhht_1、呼和浩特信

8、息港，关注这个公众号。2、客户群是谁，打算赚谁的钱。3、定义一个大众化的公众号。4、定义菜单及体验功能（技术，PHP 编程语言）6、盈利模式:广告：腾讯、公司的客户群：私密的 复制成功案例 淘宝：资金池，上市非法集资二、互联网二、互联网+下的创业计划下的创业计划作业：自己使用 word 文档书写一个微信公众号的创业计划书。三、云计算物联网下软件人才的需求三、云计算物联网下软件人才的需求云计算：PHP，Java，网络工程，运维物联网：电子商务，软件开发，软件开发语言，c,c+,java,php,javascript,等四、软件行业的发展趋势四、软件行业的发展趋势 html5+javascript

9、五、五、PHP 软件开发课程软件开发课程第一章：第一章：UI 形象识别系统形象识别系统1.1、VI 图像元素图像元素VI 是形象识别系统。形象识别系统，如 logo，宣传广告，企业文化，展板等图像元素。一个企业必须有 VI 元素，这些 VI 元素构成了企业的文化。VI 的中图像元素的色彩都 是特定的，企业在规划图像元素时，颜色大小材料等都是约定好的，将来不发生改变。VI 需要注册商标。 1.2、UI 识别系统识别系统UI 就是 VI 加上文字注释，构成的图文元素。目前的 UI 范围已经不仅限于图标了， 任何的广告都可以称之为 UI。VI 只是一个图形，在 VI 图形的基础上加上文字说明，就是

10、UI。第二章：常用的第二章：常用的 UI 设计工具设计工具1.1、Photoshop Cs6 设计工具设计工具1.1.1、Photoshop 工具的工作界面工具的工作界面1.1.1.1、功能界面介绍、功能界面介绍:PS 按钮:右键操作包括移动，最大化，最小化，关闭，左键双击关闭，快捷键 alt+空格 键。 菜单:软件所有功能的导航，快捷键 alt +字母；如文件(F)，激活可以使用 alt+f，子菜 单也可以使用快捷键，例如图像菜单中的图像大小，可以使用 alt+i+i 激活，注意 alt 一直按住，按一下 i，双手同时松开，再按 i 松开。 （注意:快捷键分为两种，一种是alt+菜单键+子菜

11、单键，另外一种是自定义的快捷键，如果想修改快捷键，可以使用 【编辑】-【键盘快捷键】 ） 属性工具栏：将菜单中使用几率很高的菜单项存放到工具栏中。这个工具栏是辅助工 具栏使用的。 画布：图像数据存放的区域。我们以后将所有的图像文件都将在这个画布中。 浮动面板:辅助属性工具栏使用的，主要完成照片的色彩调整。 状态栏：显示文件的相关信息1.1.1.2、软件的性能优化、软件的性能优化步骤：【编辑】-【首选项】-【性能】 内存分配：一般是内存容量的 1/2 最佳 硬盘虚拟空间：虚拟内存，暂存盘，设置的稍微大些。 （在物理内存不够用的情况下使 用虚拟内存，最好使用物理内存。 ）16G 内置存储器 磁盘

12、运行内存：1G1.1.1.3、历史记录、历史记录步骤：【编辑】-【首选项】-【性能】 历史记录状态1.1.2、启动及关闭、启动及关闭 PS 软件软件1.1.2.1、启动、启动启动软件有多种方法 第一种启动方式：快捷键方式， 【桌面图标】-双击 第二种启动方式：命令（操作） 第一步：找到 ps 软件的安装路径并复制C:Program FilesAdobe Photoshop CS6Adobe Photoshop CS6 第二步：我的电脑(计算机)-右键-属性-高级-环境变量-系统变量-Path-编辑-输入”; C:Program FilesAdobe Photoshop CS6Adobe Pho

13、toshop CS6”，注意字 符串前必须有分号隔开。 第三步：将 ps 软件的启动程序修改为快捷键命令名称，如修改为 ps.exe，注意扩展名 保持不变。 第四步：开始-运行(win+r)-输入 ps.exe 或 ps 回车。 环境变量：系统的命令一般是一个 exe 文件，这个 exe 文件可以存放在磁盘的任何位 置，我们为客户提供统一的入口，在入口中输入的命令，系统如何才能正确找到应用 程序呢，就是使用 path 变量来完成。用户输入的每个命令系统都会在 path 变量指定的 路径中寻找。例如系统自带的 path 值为： PATH=C:WINDOWSsystem32;C:WINDOWS;C

14、:WINDOWSSystem32Wbem;C:Progr am FilesMythwaree-Learning Class;C:Program FilesAdobe Photoshop CS6Adobe Photoshop CS 路径位置: C:WINDOWSsystem32; 系统第一次是在这个路径中查询 C:WINDOWS; 系统第二次是在这个路径中查询 以此类推 1.1.2.2、关闭、关闭 点击关闭 ps 按钮关闭（ 可以使用 window 系统的 alt+f4 ）1.1.3、打开文件及文件格式、打开文件及文件格式1.1.3.1、打开文件、打开文件第一种：【文件】-【打开】或使用快捷键

15、ctrl+o 第二种：拖拽图片到 ps 工作区 第三种：双击 ps 的工作区1.1.3.2、文件格式、文件格式步骤：【文件】-【存储为 web 格式】-选择图片文件类型 文件类型的区别：gif 支持动画，图像分辨率低。支持压缩适合在网络上传输。jpeg 可以使 用脚本来实现支持动画，默认的 jpeg 图片是不支持动画的。jpeg 图片支持 65536 中颜色， 所以说图片的颜色色彩很丰富的话我们建议大家使用 jpg 格式。jpg 格式支持压缩。png 是 一种高清格式，无压缩。建议保持高清图时使用。web 中使用图片最好是 jpg 格式，磁盘 中存储相片最好使用 png 格式，如果只是保存简单

16、的颜色可以使用 gif。 比较: gif：颜色体系少，建议在 web 中使用，压缩 jpeg：颜色体系多，建议在 web 中使用，压缩 （国际通用图片格式） png：颜色体系多，不建议在 web 中使用，无压缩1.1.3.2、文件格式保存、文件格式保存打开文件-另存为（选择保存的格式） 打开文件-存储为 web 格式（支持 gif 动画格式，以这个方式保存的图像都具有压缩功能）打开文件-编辑-存储为 PSD 格式（源文件格式，日后可以再次编辑）1.1.4、画布的使用、画布的使用1.1.4.1、什么是画布、什么是画布画布相等于一张白纸，可以在画布中绘制任意的内容。1.1.4.2、如何创建画布、如何创建画布步骤：【文件】-【新建】1.1.4.3、画布的参数（重点）、画布的参数（重点）a、宽和高：单位使用 px 像素，厘米单位:如果制作的图像要使用打印机打印并张贴在墙上，这时使用厘米作为单位