UI基础与项目实战新

启讯IT企业项目培训大纲

前言

内蒙古启讯教育咨询有限公司，主要从事软件研发，教育培训。软件研发主要研发PHP

应用程序（家政派单系统，锡林海关及公安厅110报警系统，网页，自治区公安厅），微信

接口（公众号），手机App（1.5万），教育培训，PHP程序设计（大专及以上），Java程序设

计（本科）。

学习目标：

通过4个月的学习，掌握PHP后端技术及web前端技术的所有知识点，具体知识点包括

软件界面和软件功能。学完这些知识点要达到什么程度，一、网站前端开发、二、项目开发、

三、研发

学习方法：

认真听课（技巧）-＞及时复习-＞及时练习

课程名称：PHP软件工程师

PHP是一门计算机语言，可以用来开发软件项目。

汉语是一门人类的语言，可以用来交流和写作。

类似：C语言、Java语言、basic语言等

学习难度：中等难度

课程模块：三个模块

1.软件界面:ps,html,css家庭照片处理（10天）

2.界面特效:JavaScript（12天）

3.数据库处理:php（26天）

一、微信公众号的盈利模式

1、呼和浩特信息港，关注这个公众号。

2、客户群是谁，打算赚谁的钱。

3、定义一个大众化的公众号。

4、定义菜单及体验功能（技术，PHP编程语言）

6、盈利模式：

广告：腾讯、公司的

客户群：私密的复制成功案例淘宝：资金池，上市

非法集资

二、互联网+下的创业计划

作业：

自己使用word文档书写一个微信公众号的创业计划书。

三、云计算物联网下软件人才的需求

云计算：PHP,Java,网络工程，运维

物联网：电子商务，软件开发，软件开发语言，c,c++,java,php,javascript,等

四、软件行业的发展趋势

html5+javascript

五、PHP软件开发课程

第一章：UI形象识别系统

1.1、VI图像元素

VI是形象识别系统。形象识别系统，如log。，宣传广告，企业文化，展板等图像元素。

一个企业必须有VI元素，这些VI元素构成了企业的文化。VI的中图像元素的色彩都

是特定的，企业在规划图像元素时，颜色大小材料等都是约定好的，将来不发生改变。VI

需要注册商标。

1.2、UI识别系统

UI就是VI加上文字注释，构成的图文元素。目前的UI范围已经不仅限于图标了，任

何的广告都可以称之为UL

VI只是一个图形，在VI图形的基础上加上文字说明，就是UI。

第二章：常用的UI设计工具

1.1、PhotoshopCs6设计工具

Photoshop工具的工作界面

功能界面介绍：

>PS按钮:右键操作包括移动，最大化，最小化，关闭，左键双击关闭，快捷键alt+空格

键。

>菜单:软件所有功能的导航，快捷键alt+字母；如文件(F),激活可以使用alt+f,子

菜单也可以使用快捷键，例如图像菜单中的图像大小，可以使用alt+i+i激活，注意alt

一直按住，按一下i,双手同时松开，再按i松开。（注意:快捷键分为两种，一种是alt+

菜单键+子菜单键，另外一种是自定义的快捷键，如果想修改快捷键，可以使用【编辑】

-＞【键盘快捷键】）

＞属性工具栏：将菜单中使用几率很高的菜单项存放到工具栏中。这个工具栏是辅助工具

栏使用的。

＞画布：图像数据存放的区域。我们以后将所有的图像文件都将在这个画布中。

＞浮动面板:辅助属性工具栏使用的，主要完成照片的色彩调整。

＞状态栏：显示文件的相关信息

软件的性能优化

步骤：【编辑】-＞【首选项】-＞【性能】

＞内存分配：一般是内存容量的1/2最佳

＞硬盘虚拟空间：虚拟内存，暂存盘，设置的稍微大些。（在物理内存不够用的情况下使

用虚拟内存，最好使用物理内存。）

16G内置存储器磁盘

运行内存：1G

历史记录

步骤：【编辑】-＞【首选项】-＞【性能】

＞历史记录状态

启动软件有多种方法

＞第一种启动方式：快捷键方式，【桌面图标】-＞双击

＞第二种启动方式：命令（操作）

第一步：找到ps软件的安装路径并复制

C:\ProgramFiles\AdobePhotoshopCS6\AdobePhotoshopCS6

第二步：我的电脑（计算机）-＞右键-＞属性-〉高级-〉环境变量-＞系统变量-＞Path-＞编辑-〉

输入"；C:\ProgramFiles\AdobePhotoshopCS6\AdobePhotoshopCS6”,

注意字符串前必须有分号隔开。

第三步：将ps软件的启动程序修改为快捷键命令名称，如修改为ps.exe,注意扩展名

保持不变。

第四步：开始-＞运行（win+r）-＞输入ps.exe或ps回车。

环境变量：系统的命令一般是一个exe文件，这个exe文件可以存放在磁盘的任何位置，

我们为客户提供统一的入口，在入口中输入的命令，系统如何才能正确找到应用程序呢，

就是使用path变量来完成。用户输入的每个命令系统都会在path变量指定的路径中寻

找。

例如系统自带的path值为：

PATH=C:\WIND0WS\system32;C:\WIND0WS;C:\WIND0WS\System32\Wbem;C:\Program

Files\Mythware\e-LearningClass\;C:\ProgramFiles\AdobePhotoshopCS6\Adobe

PhotoshopCS

路径位置：

C:\WIND0WS\system32;系统第一次是在这个路径中查询

C:\WIND0WS;系统第二次是在这个路径中查询

以此类推

＞点击又关闭

＞ps按钮关闭（可以使用window系统的alt+f4）

打开文件及文件格式

打开文件

＞第一种：【文件】-＞【打开】或使用快捷键ctrl+o

＞第二种：拖拽图片到ps工作区

＞第三种：双击ps的工作区

步骤：【文件】-＞【存储为web格式】-＞选择图片文件类型

文件类型的区别：gif支持动画，图像分辨率低。支持压缩适合在网络上传输。jpeg可以使

用脚本来实现支持动画，默认的jpeg图片是不支持动画的。jpeg图片支持65536中颜色，

所以说图片的颜色色彩很丰富的话我们建议大家使用jpg格式。jpg格式支持压缩。png是

一种高清格式，无压缩。建议保持高清图时使用。web中使用图片最好是jpg格式，磁盘中

存储相片最好使用png格式，如果只是保存简单的颜色可以使用gifo

比较：

gif：颜色体系少，建议在web中使用，压缩

jpeg：颜色体系多，建议在web中使用，压缩（国际通用图片格式）

png：颜色体系多，不建议在web中使用，无压缩

打开文件-＞另存为（选择保存的格式）

打开文件-＞存储为web格式（支持gif动画格式，以这个方式保存的图像都具有压缩功能）

打开文件-＞编辑-＞存储为PSD格式（源文件格式，日后可以再次编辑）

画布相等于一张白纸，可以在画布中绘制任意的内容。

步骤：【文件】-＞【新建】

（重点）

a、宽和高：单位使用px像素，厘米

单位:如果制作的图像要使用打印机打印并张贴在墙上，这时使用厘米作为单位。

如果制作的图像只是在互联网中使用，则选择像素作为单位。

像素是不分大小的：在相同的面积下像素点越多则图像越清晰。

b、分辨率：分辨率越高图像的清晰度越高

户外广告：15-30之间,几米到几十米。

写真背板：120-300之间，几厘米到几米。婚纱等

书籍折页等：300+,A4纸等

名片:300+

web图像：72计算机中使用的图像分辨率。

分辨率越大打印机越耗磨。

c、颜色模式

RGB颜色模式：互联网颜色，这种颜色体系只适合在计算机中显示。该模式下的颜色

都是理想状态下的颜色。

CMYK颜色模式：打印机颜色。理想状态下的颜色打印机一般无法打印。通过ps软件

和打印机相连，ps软件可以直接识别打印机的分辨率及颜色范围。

d、背景内容

白色、背景色、透明

使用

我们打开的每个图像文件，这个图像文件是由很多色彩构成，色彩之间拥有独立的区域。

可以将独立的区域分别存放在各自的图层中方便修改。

、分散图像到多个图层?

第一步：打开一副图片

第二步：双击背景图层解锁

第三步：使用选区工具选择图像并剪切

第四步：创建多个图层并粘贴

、图层操作

a、创建图层

点击图层面板的正数第6个按钮.完成创建图层

b、复制图层（备份、拷贝基础上进行修改）

拖拽要复制的图层到新建0按钮上完成复制图层

c、删除图层

拖拽要删除的图层到删除回按钮上完成删除图层，如果误操作可以使用

ctrl+alt+z组合键撤销删除。（注意：QQ）,可以使用delete键实现快速删除。

d、移动图层

拖拽选中的图层上下移动，可以改变图像的垂直高度。

e、合并图层

将多个图层合并成一个图层

点击面板']'的・这个按钮

1.1.6、常用的ps快捷键

a、面板全屏/恢复：tab

b、显示/隐藏右侧浮动面板：shift+tab

c、打开文件:ctrl+o

d、新建画布:ctrl+n

e、画布缩小和放大：alt+空格+鼠标左键缩小/ctrl+空格+鼠标左键放大

f、图像缩放变形等：ctrl+t按完ctrl+t快捷键后全部松开

子快捷键:alt中心点、Ctrl相邻边动、ctrl+alt相邻边以中心动、ctrl+shift相

邻变等比例水平或垂直变形、ctrl+alt+shift对称缩放、[ctrl+shift+alt】+t旋转复制，

不停的按t键

g、填充颜色：alt+delete前景色ctrl+delete背景色

h、取消选区：ctrl+d

工具栏

1、选区工具（矩形选框工具）

功能属性应用

描边宽度、位置（内部，中间，外部）【编辑】-＞【描边】

选择内容移动、复制、删除等选择内部的内容

布尔新建、添加到选区、从选区减去、和选

区相交

羽化边缘虚化

后设置羽化：shift+f6

技巧选区和路径的关系。选区可以转换为路径进行编辑。路径-＞选

区：ctrl+回车

案例1、使月目选区工具制作一个名片

第一步：创建画布

第二步：【窗口】-＞【图层】-＞创建一个新图层命名为“水平横条”并创建选区

第三步、使用布尔，从选区中减去

第四步、alt+delete添加前景色，颜色#1343f4

ctrl+d取消选择，使用文字工具输入内容，双击文字图层，alt+左/右光标键，字间距调整

第五步、点击【工具栏】中的多边形工具出现如下图所示的符号面板

ctrl+enter-＞ctrl+d

第六步、使用文字工具，输入下图所示的文字，并排版

第七步：在百度中搜索“草料网”在线生成名片二维码，并将二维码合并到名片正面上。

选择二维码拖拽到名片文件中

点击【文件】-＞【另存为】

2、套索工具（选区）

功能属性操作

描边宽度、位置（内部，中间，外部）【编辑】-＞【描边】

内容移动、复制、删除等选择内部的内容

布尔新建、添加到选区、从选区减去、和选区相

交

羽化边缘虚化

子工具套索工具：任意的选区、多边形套索工具：多边形选区、磁性套索工

具：抠图

案例1、使用磁性套索工具实现抠图

第一步：载入荷花图片

【文件】-＞【打开】

第二步：使用磁性套索工具，绕着荷花边缘拖拽选区。

第三步：反选选区（ctrl+shift+i）并删除除荷花的其它图像

3、魔棒工具（选区）

功能属性应用

内容容差：容差越大，色彩范围越广选取相近的色彩

布尔选区相似的颜色并将多个选区合并添加到选区

子工具套索工具：魔棒工具、快速魔棒

案例1、制作一个宝马商标草图。

第一步：创建一个500*500的白色背景画布。

第二步：创建宝马图层

第三步：在该图层中绘制如下内容

使用alt+delete键填充前景色。使用布尔相交完成如图所示的扇形选区。并创建一个新图

层

合并图形

绘制矩形选区

产生选区并描边

选择多边形工具来绘制圆形路径，路径上是可以输入文字的

4、裁切工具（重点-软件UI界面切图）

功能属性应用

单个裁切比例裁切裁切工具

批量裁切切片工具

子工具裁切工具、切片工具

技巧裁切之前先拖拽辅助线，辅助线具有吸附功能快捷键ctrl+r打开标

尺

4、修复画笔工具

子工具功能操作

修复画笔吸取图像区域的色彩后溶解到目标区域Alt+鼠标左键点击（吸

取）

修补工具目标区域、替换初始选区区域拖拽选区->移动选区

红眼工具去除相片的红眼使用红眼工具点击

污点修复工将所选区域的颜色平均分布使用该工具拖拽区域

具

5、画笔工具

子工具功能操作

画笔工具根据画笔的硬度，大小，笔形绘制内容直接拖拽

1、画笔大小：lpx-5000px、快捷键：“[”缩小放大

普通属性2、硬度：浓度、边缘虚化0%硬度最小->100%硬度最大

3、笔形：使用不同的笔形产生多种笔触（画笔属性可以设置）

1、画笔的笔尖形状（全局）：选取笔尖形状、大小、翻转、角度、硬度、

画笔属性距离

2、形状动态：

作业：使用所学的工具绘制一枚印章

制作步骤：

第一步：创建一个500*500的画布，背景色是透明的。

第二步：拖拽水平和垂直辅助线，找到画布的中心点。

第三步：选中选区（选中区域）工具、按住alt键拖拽圆形选区并描边10px的红色。

第四步：选择多边形工具，按住alt键拖拽椭圆路径，并使用文字工具输入“内蒙古某某公

司”。使用ctrl+t自由变换调整文字位置。

第五步：使用多边形工具的绘制五角星，默认绘制的是路径，需要使用ctrl+回车转为选区,

再使用alt+delete填充红色。

第六步：将所有的图层合并为一个图层，使用椭圆选区选中所有画布内容，点击菜单中的编

辑菜单选中定义画笔预设。

第七步：新建一个A4的画布，选中画笔工具并选中“印章”笔触。

案例：使用所学的工具制作一个创意logoo

6、仿制图章工具

子工具功能操作

仿制图章工具选择仿制图章工具->按

吸取源画布色彩到目标画布（没有溶住alt键->单击鼠标左键

解功能）完成吸取操作->在目标

画布拖拽鼠标绘制

图案图章工具直接将图案绘制在画布中选择图案图章工具->选

择图案->绘制

用途擦除图片的多余内容（图片水印，祛痘）

案例一：使用仿制图章工具完成去痘效果。

原始图效果图

第一步：选择仿制图章工具，按住alt吸取相近的颜色，覆盖到痘痘上。

参数：画笔为15px,硬度为0,流量为35。

第二步：不停的吸取新色彩，反复覆盖到痘痘上

第三步：图层-调整-亮度和对比度

案例二：擦除水印

原图效果图

步骤同上

7、渐变工具

子工具功能操作

渐变工具点击渐变工具->点击属

性工具栏中的颜色->双

颜色过渡

击色标修改色标颜色->

拖拽

油漆桶使用前景色填充画布或选区选择前景色->选择油漆

桶工具-〉点击

8、钢笔工具

子工具功能操作

点击第一个点，再点击一个点，

可以形成多个点连续线段，如

果点击点的时候鼠标没有松

开，则可以产生圆角。

钢笔工具绘制路径

在钢笔工具的情况

下：ctrl+[alt]调整路径。

ctrl+回车键将路径转换为选

区。

自由钢笔工具绘制任意路径

添加锚点工具在路径上添加锚点

删除锚点工具删除指定的锚点

转换点工具

用途绘制任意路径、抠图

9、文字工具

子工具功能操作

选择文字工具，点击插入光标

并输入文字，也可以拖拽区域

输入文字。

横排文字输入横排文字

alt+左光标或右光标，调整水

平文字间距。对文字修改完后

可以按ctrl+回车确认

选择文字工具，点击插入光标

直排文字输入直排文字并输入文字，也可以拖拽区域

输入文字。

横排文字蒙版输入横排选区文字

直排文字蒙版输入直排选区文字

技巧将文字图层栅格化（图片文字）

10、多变形工具

子工具功能操作

矩形绘制矩形路径

圆角矩形工具绘制圆角矩形路径

椭圆

多边形

直线

自定义形状

液化命令

这个液化命令一般使用来对图像进行任意变形（柔化），可以使用该工具完成图像变形，如

婚纱摄影中的瘦身增肥等。

滤镜

滤镜就是特效

【窗口】-＞时间轴-＞创建帧动画-＞复制帧-＞为每个帧设置要显示的图层

第三章：网页美工

3.1、企业网站美工示例

网页的美工是分为：

banner条：一个网站的头部，用来表示企业文化。

menu导航栏：访问网站内容的入口，导航栏分为水平和垂直两类

ppt幻灯片：网站中推广的主要内容放在这里（js代码）

content主体内容：网站页面的主要内容

link友情链接：外链、内链、交叉链接、等

copyright版权信息：备案号？

第四章：移动终端美工

banner：手机顶端，详细导航栏按钮

content:内容区域、容纳常用的导航栏

menu:主要分类导航栏

第五章：综合美工案例

通过美工决定项目报价：

产品销售项目：

1.PC端

前端：300元*MenuN=价格300*11=3300+2500+3500+2000=11000元

后端：1500元

支付：1000元

购物模块：3500元

域名+空间：1999元

2.移动端

wap:手机网页：5500元

app:手机应用程序（Android,I0S）

普通的新闻类app：8000元+

交互性的:12000元+

im类：6万+

商城App：8万-50万（有赞商城二次开发）

一次性报价：12000

第六章HTML网页设计

6.1、html标签语言

HTML是用来完成网页中文字，图片等元素的布局的。html是网页的骨架。

html中文全称叫超文本标记语言，严格来说不是一门编程语言，只是一门页面描述性语言,

用来描述网页元素的布局信息。html标签语言中给我们提供了105个标签。

html超文本标记语言的语法〈标签名X/标签名》

<html>

<head>

<metacharset"utf-8”>

<title></title>

</head>

<body></body>

</html>

我们在桌面上创建一个网页文件，如index.html,使用记事本打开，输入文档结构代码进

行调试。运行index,html网页文件，只需要双击文件即可。

标签的说明：

html标签：这是网页中最大的标签，表示html文档文件的开始和结束。

head标签：这个标签中的内容是不会输出到浏览器中的，一般用来实现html文件的头部控

制信息。如标题标签就是旗下的子标签。

meta标签:控制客户端的浏览器使用的编码，gb2312简体中文，gbk扩展的简体中文、big5

繁体中文编码（香港、繁体字），utf-8多国语言不区分大小写

title标签：网页的标题。

body标签：网页的主体内容，页面中所有的图像、文字、音频、视频等都可以放在此标签

中。

注意：这个文档结构在一个网页中只能出现一次。

、图像元素

<imgsrc="路径"title”提示"alt=w替换"id="编号"width="宽度”

height=M高度"onclick="事件"style="css代码”>

属性说明：

src="路径”这个属性是用来描述图像标签所引入的图像文件的路径，可以使绝对路

径也可以是相对路径。

相对路径：从当前网页文件出发去寻找目标文件。./表示当前文件位置，/子目

录，../上级目录上级的上级

绝对路径：d:\images\a.jpg绝大部分浏览器不支持，

测试地址：

title="提示”鼠标滑到图像上后显示提示的文字

alt="文字”当图片加载失败的时候，图片区域会被文字替代。

id="编号”给图像标签起个id值，多个图像的id值不能重复，id值是方便js代码

控制O

widlh="宽度”图像文件的宽，不是源文件的宽

height="高度”图像文件的高，不是源文件的高

onclick="事件”鼠标点击图像的时候触发的js代码（第八章讲解）

style="css代码”使用css代码修饰图像元素（第七章学习）

、音频及视频元素

1、<embedsrc="路径"width="宽度"height=w高度”></embed>淘汰

属性说明：

src="路径"视频文件的路径，如src="video/a.wmv”适合于wmv、flv>swf格式

这个标签默认依赖系统的播放器，必须按照单机的播放器。

2、<videocontrolsitrue"src="video/a.wmv"width="600"X/video>

这个标签是目前最新的视频标签，支持pc端和手机端，标签中自带播放器

controls="true”是否让播放器具备进度控制

这个标签是html5标签，必须是最新的浏览器才支持，>=ie9,谷歌最新浏览器等

src="视频路径”

3、<audiocontrols="true"src="video/a.mp3"X/audio>

插入音频

controls="true"显示控件

src="a.mp3”音频的路径

PC端的网页代码如下想自适应手机：<meta?name="viewport"id="viewport"

content=//width=device-width,initial-scale=l”>

视频转换软件:现在的手机支持大部分视频格式,mp4,rmvb,rm,avi等（迅雷看看，暴风影音）

塞班系统诺基亚手机，“格式工厂”，“绘声绘影”

朋友圈：微视频、微广告（新媒体）

、文字元素

文字可以直接写在body标签中，也可以写在div或span标签中。文字可以写在任意的标签

中。

k<div></div>这个标签的含义是划分区域，支持css修饰（95%的标签都支持css修饰）

这个div标签可以在浏览器的任意位置布局。将文字放到这个标签中，这个标签可以通

过css进行定位，从而实现了文字的定位。具备宽和高是一个块级元素。

div标签只能表示区域，但是本身不具备样式。div必须通过css进行修饰。

2.<span></span>这个标签的含义是环绕，支持css的修饰，缺点是不具备宽和高。使用

span标签进行局部修饰。

表单元素

表单是用来收集客户信息的，客户可以使用表单和服务器产生交互性。

1、input标签

含义是输入的意思

<inputtype="类型"name="名字"id="编号"value="默认值"readonly="只

读”>

简写：〈inputtype="类型”>

用法:

<inputtype="text">text类型，文本框，可以输入明文的数据

<inputtype="password”>password类型,密码框，可以输入隐藏的内容

<inputtype="file”>file类型，文件域,上传文件

<inputtypeiradio”>radio类型，单选,name属性值相同可以实现单选功能

<inputtype="checkbox”>checkbox类型,多选

<inputtype="hidden”>hidden类型，隐藏域，用来获取隐藏的信息，如ip地址等

<inputtype="image”>图像按钮,把图像当成按钮（淘汰了）

<inputtype=nbutton>普通按钮，支持自定义功能

<inputtype="submit">提交按钮，可以将所在表单中的内容提交到远程服务器上。

<inputtype二"resetn>重置,将所在表单中的内容重置。

示例代码：

标签记忆法：〈人身份证二”“姓名二““种族二““性别二““年龄二““职业二””

公司=“”>

文本框：<inputid="user"name=“user“type=“text"value=vadmin,,

readonly="readonly”>

密码框:<inputid二”pwd”name二”pwd”type二"password”value二”123456””>

文件:<inputid二"f"name="f"type=“file"Xinputtype="buttonvalue二"

上传”>

单选：<inputid="al“name二"sextype二"radio”value二“男”>男

<inputid=“a2”name二"sex”type="radio"value二“女”>女

多选：<inputid="ckl”name二“ck”type二"checkbox”value=”爬山”>爬山

<inputid=“ck2”name二“ck”type二"checkbox,,value二“游泳”>游泳

图像按钮：<inputid="btnl"name="btnl"type=“image”>

提交按钮:<inputid=“si”name二“si”type二"submit”value=“提交”>

重置按钮：<inputid="s2”name二“s2”type="reset”value=“重置”>

普通按钮：<inputid=“s3”name二“s3”type二"button”value=n普通”>

2、textarea标签

文本区域：<textareaid二"编号”name二"名字"rows二"行"cols二"列”>默认值

</textarea>

3、select标签

<select>

<optionvalue二”选项的我值”>选项名称〈/option》

</select>

注意：选项名称只起到显示功能，真正提交到服务器上值为选项的值。

select词汇，挑选，选择option选项

4、form标签

我们所学的表单元素都需要放到该标签中，只有存放在该标签中的标签元素的值才可以

提交给服务器。提交按钮只会提交本表单的数据。

例如：

<inputtype="text”>〃这个文本框不会被提交给服务器，原因是不在form中。

<form>

<inputtype="text”>

<inputtype="submit”value="注册”>

</form>

说明：当我们点击注册按钮是，注册按钮所处的表单元素会被提交给服务器。

、字段集

<fieldsetstyle="width:500px;margin-top:20px;font-size:12px;”>

<legend>目前学员状态〈/legend》

<divstyle="padding:10px;”>张三李四王五赵六张三李四王五赵六张三李四

王五赵六张三李四王五赵六张三李四王五赵六张三李四王五赵六张三李四

王五赵六张三李四王五赵六</div>

</fieldset>

6、淘汰了的标签

换行、水平横线、删除线、下滑线、上标、下标、大于、小于、版权、加粗、斜体、字体

<br>、<hr>><delX/del>><uX/u>、<supX/sup>><subX/sub>>>><>©><bX/b>><iX/i>>

<font></font〉等

7、超链接

<ahref="链接地址"target="打开目标”>链接文字〈/a>

例如：<ahref="">百度</a>点击百度文字跳转到百度官网

target="_blank”在新窗口打开

target=w_sleftM在自身的窗口打开

target="_parent

target="_top”；

target=wsearch”；

8、嵌入

<iframeid="编号"name="名字"src="嵌入的网页"frameborder="边框"

width="宽度”height="高度”></iframe>

用法：

<ahref="lrdhl.html"target=>>mainright”>录入电话量〈/a>

<iframenameimainright''width"300"height"300"></iframe>

说明：点击"录入电话量“，Irdhl.html页面在iframe中打开。

作业：使用己学的知识，开发erp软件的后台界面功能。使用ztree框架。

无序列表

<ul>

<li></li>

<li></li>

</ul>

有序列表

<ol>

<li></li>

<li></li>

</ol>

<dd>

<dt>

</dt>

</dd>

（前端淘汰）

<table>

<tr>

<th>第几节</th>

</tr>

<tr>

<td></td>

</tr>

</table>

表格的属性：

width="lOOpx”表格的宽度

height="50px”表格的高度

bgcolor="red”表格的背景色

border="2px"表格的边框

bordercolorfred"表格边框的颜色

align="leftIcenter|right”表格相对于浏览器的水平对齐方式

cellspacing="2px"单元格和单元格的距离

cellpadding="2px"单元格和内容的距离

单元格的属性：

width="lOOpx”单元格的宽度

height="50px”单元格的高度

bgcolor"red"单元格的背景色

align="left|center|right”单元格中内容的水平对齐方式

valign="top|middle|bottom”单元格中内容的垂直对齐方式

cel1spacing="2px"单元格和单元格的距离

cellpadding="2px"单元格和内容的距离

第七章CSS层叠样式表

7.1v什么是css

CSS中文全称层叠样式表。

在网页中输入的任何数据都需要修饰，如何修饰呢，可以将文字等数据直接放入标签中。因

为标签有很多属性可以使用。早期W3c（互联网协议的制定者）制定了html的语法功能，己

经无法满足现状了。可以使用css进行扩展。

CSS中文名称为层叠样式表，css提供了很丰富样式。使用css可以修饰页面中任意的标签。

css的语法有些类似json语法。

语法格式：属性名：属性值；

font-size:12px;字号

font-weight:bold;加粗

color:red;字体颜色

font-family:w宋体”；字形

width:lOOpx;宽度

height:lOOpx;高度

background-color:red;背景色

border:Ipxsolidred;边框

border-radius:lOpx;圆角

text-align:left|center|right;内容的水平对齐方式

7.2、存放位置

语法：<divstyle=wcss代码”>内容</div>

例如：<divstyle=wfont-size:lOOpx;w》今天是第二天课</div>

词汇：style样式，type类型

行内写法比较灵活，缺点是工作量大，重复代码多。

使用内部样式可以宏观的修饰css,内部样式提供了四种选择器来修饰html元素。

语法：<styletype="text/css”>

css代码

</style>

内部写法是将css代码和html相分离。可以实现css的宏观修饰。

语法：#id值{css代码}

ID选择器实际上是行内写法的一种分离方法。

示例：

<style>

#divl{font-size:20px;}/*修饰divl标签*/

#div2{font-size:20px;}/*修饰div2标签*/

</style>

<divid="divl”>divl</div>

<divid="div2”>div2</div>

注意：所有标签的id值是不能重复的。

举例：

〈人身份证“姓名=“李春“性别"男"职业="教授”></人〉

<人身份证="“姓名=“李春"性别="男“职业="教授"X/人》

语法：.名称{css代码}

调用：〈标签class="名称名称2名称3名称4…”X/标签》

哪个标签需要被修饰了，就使用class调用对应的类选择器（注意：调用的时候没有点）。

示例：

<styletype="text/css”>

.aa{color:red;}/*设置字体为红颜色*/

.bb{font-size:20px;}/*设置字号为20px*/

</style>

<divclass="aabb"〉内容一</div>被aa和bb的并集修饰

<divclass=^^bb”>内容二</div>被bb修饰

<divclass"bb”>内容三</div>被bb修饰

语法：标签名{css代码}

用法；修饰和标签名相同的标签

示例:

<style>

*{margin:Opx;padding:Opx;}*通配符，匹配所有标签。

div{font-size:20px;color:red;}修饰页面中所有的div标签

span{font-size:20px;}修饰页面中所有的span标签

</style>

<div></div>

<div></div>

<div></div>

<span></span>

<span></span>

<span></span>

注意多个标签选择器是可以批量书写的，如div,span,p{font-size:30px;}

复合选择器是利用标签的层级关系进行修饰。（不推荐使用）

1、一层一层的修饰（从根节点开始出发）

htmlbodydivdiv{font-size:20px;color:black;}

<html>

<body>

<div>

<div>内容</div>

</div>

</body>

<html>

html,body可以省略。

2、从修饰的节点出发（不是从根节点开始）

.bannerdiv{font-size:20px;}

<divclass="banner”>

<div>这个div会被修饰</div>

</div>

Saldivp{font-size:20px;}使用便捷

等价于

htmlbodydivdivp{font-size:20px}层次清晰

<divid="al”>

<div>

<p></p>

</div>

</div>

案例：文章列表

网页中的文章列表都是使用项目标签来完成。

<style>

,contentli{font-size:14px;1ine-height:26px;}

</style>

<ulclass="contentv>

Gi〉内蒙古呼和浩特特大新闻2015-ll-30</li>

Gi>内蒙古呼和浩特特大新闻2015-ll-30</li>

<li>内蒙古呼和浩特特大新闻2015Tl-30〈/li>

</ul>

ul这个标签的结构一般不发生变化，我们推荐使用符合选择器。

a、行内样式：

<divstyle="css代码”></div>

灵活，代码重复率高，效率低

b、内部样式

<style>

标签选择器

类选择器

ID选择器

复合选择器

</style>

作业：

1、阅读10个demo文件。

2、复习笔记

3、背会html标签和css的常用代码

4、仿照案例，编写程序。

7.3、盒子模型（重点）

所谓的盒子模型指的是把html元素都看成平面盒子。但是不是页面中所有的标签都可

以被修饰成盒子，默认的文档结构中只有html和body标签可以被css修饰层盒子。

head,title,meta等标签属于控制类型的标签，它们是无法修饰成盒子的。

标签分为两种标签：控制类型的标签、显示类的标签

width:100px;

height:100px;

说明：无边框的宽和高

边框的12条代码：

/*宽度*/

border-top-width:2px;/*上边框宽度*/

border-right-width:2px;/*右边框宽度*/

border-bottom-width:2px;/*下边框宽度*/

border-left-width:2px;/*左边框宽度*/

/*样式*/

border-top-style:solid;/*上边框样式*/

border-right-style:solid;/*右边框样式*/

border-bottom-style:solid;/*下边框样式*/

border-left-style:solid;/*左边框样式*/

/*颜色*/

border-top-color:red;/*上边框颜色*/

border-right-color:red;/*右边框颜色*/

border-bottom-color:red;/*下边框颜色*/

border-left-color:red;/*左边框颜色*/

上面的12行代码可以简写为3行：

/*宽度*/

border-width:2px;/*四个边框宽度*/

/*样式*/

border-style:dashed;/*四个边框样式*/

/*颜色*/

border-color:red;/*四个边框颜色*/

上面的3行代码可以简化为：

border:Ipxsolidred;宽度样式颜色

上面的1行代码可以拆成4行代码

border-top:Ipxsolidred;宽度样式颜色

border-right:lpxsolidred;宽度样式颜色

border-bottom:Ipxsolidred;宽度样式颜色

border-left:lpxsolidred;宽度样式颜色

案例：使用css修饰文本框。

圆角：border-radius:10px;圆角值是盒子宽的1/2可以产生圆。

font-size:12px;字体大小14Px是网页的标准字号

font-family:w宋体”；字形

font-weight:bold;加粗

color:red;字体颜色〃错误：font-color

text-indent:2em;缩进两个字的位置

text-decoration:none|overline|underline;戈ij线

对齐

1、标签相对于父标签的对齐方式

a、水平对齐：左对齐：float:left;右对齐：float:right;

居中对齐:margin-left:auto;margin-right:auto;

margin:0pxauto;

b、垂直对齐：margin-top:Opx;顶端对齐margin-top:父标签高度/2-本标签高度/2+

本标签的上边框宽度；居中margin-top:父标签的高度-本标签的高度+本标签的上下边

框宽度

2、内容在标签中的对齐方式

a、水平对齐：text-align:left|center|right;左对齐、居中对齐、右对齐

b、垂直对齐：height:值；line-height:值；高和行高相等

外边距、内边距

margin-top:lpx;上夕卜边品巨

margin-right:lpx;右外边距

margin-bottom:lpx;下夕卜边星巨

margin-left:lpx;左外边距

padding-top:lpx;上内边距

padding-right:lpx;右内边距

padding-bottom:lpx;下内边距

padding-left:lpx;左内边距

注意：padding的值设置为多少，则盒子的宽或高扩大多少。在使用完padding后，为了保

证盒子的宽和高不发生变化，我们可以将盒子的宽和高减去pdding的值。

简写:margin:Opx;四个外边距为Opx;

margin:10px20px;上下外边距左右外边距

margin:Ipx2px3px;上外边距左右外边距下外边距

margin:Ipx2px3px4px;上右下左外边距

padding:Opx;

padding:OpxOpx;

padding:OpxIpx2px3px;

padding:OpxOpxOpxOpx;解释同上

垂直距离是塌陷、水平距离是相加。

background-color:red;背景色

background-image:url（图片路径）；背景图

background-repeat:no-repeat|repeatIrepeat-x|repeat-y;背景平铺方式

background-size:200px;背景图大小

background-position:top|right|bottomIleft;背景图的定位

opacity:0.5;取值:0T的数,如0・1、0.2、0.3等

记忆：opa,city

7.3.8、鼠标形状

语法:cursor:pointer

pointer手型

move移动

text是移动到文本上的那种效果？

wait是等待的那种效果

default是默认效果方向：n北s南w西e东

e-resize是向右的箭头

ne-resize是向右上的箭头

n-resize是向上的箭头

nw-resize是向左上的箭头

w-resize是向左的箭头

sw-resize是左下的箭头

s-resize是向下的箭头

se-resize是向右下的箭头

auto是由系统自动给出效果

7.3.9、伪类

:hover{css代码）鼠标滑过

示例代码：

<styletype="text/css”>

.m{font-size:12px;background-color:red;color:white;width:120px;height:30px;line

-height:30px;text-align:center;}

.m:hover{background-color:black;font-weight:bold;}

</style>

<divclass=“in”>大家好</div>

7.3.10、定位（重点）

1、定位的参考点及偏移量

定位指的就是盒子相对【参考点】的布局。

a、position:static;静态定位，参考点是父标签及相邻标签

说明：偏移，margin

b、position:relative;相对定位，参考点是父标签及相邻标签

说明：偏移，margin,相对于自身发生偏移left,top,right,bottom,自身发生偏移后不

会影响其它盒子，其它任然会按照原来的位置布局。（隐形盒子）

c、position:absolute;绝对定位，所有的盒子不在一个平面上

说明：偏移,margin参考点是父标签，支持left,bottom,rigt,top偏移参考点是body,

可以使用z-index:数字;盒子的垂直坐标。

d、position:fixed;固定定位

说明：偏移margin参考点是父标签，支持left,bottom,right,top偏移参考点是窗口，

可以使用z-indexo

定位方式Margin偏移（参考点）Left,top,right,bottom偏移（参

position考点）

静态定位static父标签及相邻标签无

相对定位父标签及相邻标签自身

relative

绝对定位父标签文档原点

absolute

固定定位fixed父标签浏览器窗口

2、定位和浮动的结合

一般网页中的定位都是采用默认的静态定位，所以在网页布局的时候根本不需要考虑定

位，绝对定位和固定定位只有在网页特效及特殊情况下才使用。

网页的区域就是由行和列构成的。行区域和列区域。

行区域（块级元素）：div具备宽和高，垂直排列，划分区域，默认display:block;

列区域（行级元素）：span不具备宽和高，水平排列，环绕,默认display:inline;

div默认是行，float后是列

7.4、web前端排版（工作）

PC端页面排版

布局：banner,menu,content,link,copyright

代码如下：

<!doctypehtml>

<html>

<head>

<metacharset二〃utf-8〃〉

〈title》五布局〈/title)

<style>

*{margin:Opx;padding:Opx;}

body{background-color:black;}

,pageWidth{width:980px;margin-left:auto;margin-right:auto;}

.spacing{margin-bottom:Ipx;}

,banner{

height:120px;

background-color:Scdcdcd;

)

.menu{

height:30px;

back