黑马程序员技术交流社区

标题: 老师笔记 [打印本页]
作者: 王思宇    时间: 2019-4-18 18:46
标题: 老师笔记
01PS软件认识打开图片或者psd文件
01直接拖拽文件或者psd文件到PS的工作区域，前提条件是当前PS没有打开任何文件，如果想要在打开文件的情况下打开新的文件，只需要拖拽到PS软件的顶部出现了一个箭头和虚框加号即可松手；
02 ps的菜单栏 ----- 文件   ----- 打开  （ctrl+O）
PS标尺和参考线
PS菜单栏   ---  视图 ---  标尺（Ctrl+R）
调出了标尺以后我们可以直接用鼠标拖拽出蓝色的参考线，需要在标尺上右键将标尺显示的单位更改为像素；
量取页面中某一个盒子的宽高：拉好参考线以后，用选框工具                              快捷键是M，拉出对应的选框，如果在拉选框的时候不松手就能在选框的右下角直接看到当前的宽高，如果松手了就会只显示出一个蚂蚁线的选框，直接按F8或者Fn+F8调出信息面板查看宽高；
清除参考线：
01.直接将参考线拖拽到区域以外
           02 菜单栏 ---- 视图 ---  清楚参考线
隐藏参考线：
参考线可以用快捷键Ctrl+分号（就是在L键旁边）来进行显示和隐藏的切换
PS文件的缩放设置
放大页面 Ctrl+加号
缩小页面 Ctrl+减号
100%显示文件   Ctrl+Alt+0
PS文件文字大小的查看
如果我们有PSD分层文件，我们只需要去用文字工具T 去选中文字然后在工具属性栏去查看相应的大小；
如果拿到手的是一张合成的JPG图片，就无法用文字工具测量，我们需要找设计师索取，其次我们可以自己用选框工具M进行大体的测量；
PS画板的移动（抓手工具）
如果我们的页面放大的足够大，我们想要产看某一个区域或者位置，我们需要按住空格键（键盘上最长的键），同时按住鼠标左键拖动即可；
PS文件的颜色色值吸取
一般情况下我们会要求UI设计师将整个页面的文字以及所用的盒子的颜色色值提供给我们，如果没有我们需要自己去吸取；
01  直接打开PS的前景色面板
02此时鼠标就会变成吸管工具，我们可以去点击吸取我们想要的色值，一般我们只需要进制的取值方法一定是：#+色值
background: #358cdb;
PS文件量取两行文字的行高（行与行之间的距离）
从第一行文字的开始到第二行文字的开始就是行与行之间的距离；
取消选框
如果用M选框工具绘制了选框显示了蚂蚁线，我们不需要的时候可以直接按Ctrl+D取消；
自动选取图层
在选择工具V或者叫移动工具，的状态下，去工具属性栏勾选自动选择图层选项，我们就可以直接在选择工具V的状态下去点击选区对应的图层；
直接选区元素大小的区域
选中当前要选取的图层，然后打开图层面板，配合Ctrl点击图层缩略图直接载入选区；
关于PS里面的文字
如果我们拿到的是psd的源文件，我们可以直接用文字工具T选区文字，然后点击工具属性栏里面的字符面板 调出相应的面板进行查看，具体可参照下图：
常见的图片格式
jpg格式       不能设置图片背景透明，建议导出的时候选最佳
jpeg格式     不能设置图片背景透明，建议导出的时候选最佳
png格式     能够设置图片的背景透明，建议选png24
gif格式      动图格式，能够设置图片的背景透明，建议颜色选256
psd源文件    可以分层的源文件格式
图层合并
一般情况下UI设计师会将小图标或者图片效果分层设计，我们可以要求他们将设计完事的图层进行对应的合并，如果没有合并我们在切图的时候建议大家进行图层的合并；
01如果只是要合并图层没有分组设置，我们直接选中想要合并的图层，然后直接按Ctrl+E进行合并；
按住Ctrl键点击图层可以进行图层的多选
02如果设计稿是进行了编组的处理，我们只需要选中当前组然后在该组上右键 --- 弹出下拉列表 ---- 转换为智能对象；
将图层的叠加顺序提高或者至于顶层
前移一层   Ctrl+右大括号 }
后移一层   Ctrl+左大括号 {
至于顶层    Ctrl+Shift+ 右大括号 }
至于底层    Ctrl+Shift+左大括号 {
图层复制
在开发过程中我们会拿到pSD原稿件，有些小东西需要我们去合并切图，为了不破坏原来的图层建议大家进行原位复制
01拖拽复制：直接选中该图层然后将其拖拽到图层面板的有下角找到复制按钮松手即可原位复制；
02快捷键原位复制：选中要复制的图层，直接按Ctrl+J
03Alt键配合拖拽进行移位复制：按住Alt键鼠标变成了黑白双箭头，然后按住鼠标左键进行拖拽复制即可；
前端切图PS切片工具切图
利用切片工具绘制出我们想要的团区域，直接储存为web格式，选择想要的图片格式，直接储存，应该选择切片为所有切片、所有用户切片、选中的切片
如果是所有切片就会将我们绘制大的切片以外的区域默认为另外的切片导出（不推荐使用）；
所有用户切片当前我们绘制了几个切片就导出截个切片（推荐使用）；
选中的切片将当前我们选中的某个切片导出；
选择和删除切片
切片选择工具，可以直接点击切片选中当前的切片
删除切片，：01  直接用切片选择工具选中要删除的切片直接按删除键Delete
        02  菜单栏  ---- 视图  ---- 清除切片
Ctterman插件切图
http://www.cutterman.cn/zh
第一步  在图层面板选中更导出的图层或者组，
第二步  选择要导出的设备端 ----  PC选web端
第三部  确定自己的输出路径，然后直接导出选中图层
注意：如果用神器导出图片的时候出现问题，弹出没有选中切片，是因为我们之前再用切片工具切图的时候选择了所有用户切片导致的，解决方式：将导出为web格式选择所有切片即可：
更改为下面的  所有切片即可
参考线和选区工具M切图（不推荐使用）
拉出选框   --- Ctrl+C  ---- Ctrl+N ----  Ctrl+V ---- 储存为web格式
常用的布局标签
双标签：有始有终，又开始和结束两个标签组成，结束标签比开始标签多一个/;
标题标签（双标签）：分为6个档次分别是h1到h6；
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
h1到h6的权重依次降低，所以在实际开发的时候h1标签一个页面只能出现一次，并且建议h1里面放网站logo，h2标签在一个页面中建议最多出现两次，h3到h6可以任意使用；
段落标签
P一般用来盛放一段文字也就是段落
图片标签img
img标签通过自身原则性属性src找到我们的图片所在位置，将图片引入到我们的html页面；
注意：这个src属相一定要有的；
<img src="1.jpg" />
Css的书写位置
内嵌式：直接将css代码书写到head标签里面，书写一对style标签告诉浏览器这个标签里面的东西是css；
Css的语法
选中标签{ css属性:属性值:}
元素的实体化宽高
宽度  width
高度  height
文字控制属性
文字大小  font-size: 30px;
行高line-height: 25px;
文本缩进text-indent: 2em;
文本水平居中 text-align: center;
em单位表示一个字的大小
html第一天1、网页的组成：
文字、图片和超链接等元素构成，还包括了音频、视频等等；
2、网页的形成：
有W3c机构规定的一系列标签（英文单词）书写而成；
3、常见的5大浏览器
IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器
4、Web标准
由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致‘’
结构标准HTML：页面的基本结构的搭建；
表现标准CSS：页面的样式美化
行为标准javascript：实现页面的交互
4、Html介绍
HTML是超文本标记语言，不是编程语言；
用HTML标签来描述网页元素，比如：链接、图片、文字等；
我们需要将所有的标签放在尖括号“<>”里面
5、html的基本结构
一对html标签嵌套一对head标签和body标签，head标签嵌套一对title标签，head是给浏览器看的，body是给用户看的；
<html>
      <head>
               <title>标题</tilte>
      </head>
      <body>
              网页主体内容
      </body>
</html>
6、html标签的分了
双标签：由开始标签<开始标签>和结束标签</结束标签>组成；
例如：<html></html>   <body></body>  <head></head>  
单标签:  不需要包含内容，直接在开始标签最后面添加一个结束的符号/;
例如：<br /> <hr /> <img src=””/>
7、Html标签之间的关系
父子级的嵌套关系
并列的兄弟关系
8、sublime的使用技巧使用步骤
01需要新建一个项目文件夹；
02新建的文件必须放在项目文件夹里面，并且文件后缀必须是.html才能进行后续操作；
03快捷生成html架构：输入法是英文输入的时候  输入!+tab或者html:5+tab
使用技巧
新建文档   Ctrl+N         
保存   Ctrl+S   保存文件名必须为.html；
放大缩小界面文字大小：按住Ctrl键，滚动鼠标滚轮或者Ctrl+加号变大，Ctrl+减号缩小；
生成页面骨架：01 – html:5 按下tab键       02 ！按tab键；
浏览页面效果：右键在浏览器中打开；
9、默认生成的html结构代码解释
<!DOCTYPE html> 告诉浏览器按照HTML5规范解析页面；
常见的页面语言：en 英语   zh-CN中文；
注意：一般我们考虑到浏览器和操作系统的兼容性问题，目前仍然使用zh-CN属性值；
<metacharset="utf-8" />
常用的字符编码：
Gb2312 简体中文    BIG5 繁体中文    GBK 全部中文（包括简体和繁体中文）
UTF-8  全世界所有国家需要用到的字符
10、标签语义化的作用
语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎；
11、标题标签H
总共分为6个档次，权重依次递减
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
在实际开发的时候h1标签一个页面只能出现一次，并且建议h1里面放网站logo，h2标签在一个页面中建议最多出现两次一般放主标题，h3到h6可以任意使用；
12.段落标签p
双标签，是用来放一段文字；
13．hr线   <hr />  单标记14、浏览器对空格的解析；
浏览器默认对空格的解析是解析并且只解析一个空格，不管输入多少个空格都会解析一个；
如果想要10个空格：&nbsp;
15、浏览器对回车换行的解析
浏览器对回车换行得到解析并且默认解析为一个空格，如果想要实现强制换行，我们需要使用<br />强制换行标记；
16、强制换行 <br />17、div和span
div大标签，主要用来做网页的布局，独自占一行；
span小标签，也是用来做布局的，但是一般用来放小图标或者特殊效果的文字，一行可以存在多个；
18、常见的文本修饰标签（小标签）
加粗标签：<b>单纯的加粗</b>   <strong>语义化强调</strong>
倾斜标签：<i>单纯的加粗</i>     <em>语义化强调</em>  
删除线标签：<s>单纯的加粗</s>   <del>语义化强调</del>
下划线标签：<u>单纯的加粗</u>   <ins>语义化强调</ins>
19、html标签属性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名 属性1=“属性值1” 属性2=“属性值2”…> 内容 </标签名>；
注意：在书写标签属性的时候每一个属性之间要用空格隔开；
20 、图片图像标签 img（重点）
img标签是单标签，我们在用img引入图片的时候必须配合原则性属性src属性找到图片对应的路径；
<img src=”图片路径” />
图片标签img的常见属性
src  属性值 --- url（图像路径）
alt  属性值 --- 替换文本    图像不能正常显示的时候替换文本；
title属性值 ---提示文本    鼠标移入图片显示提示文本；
width属性值 ---自定义数值    设置图片的宽度；
height属性值 ---自定义数值    设置图片的高度；
border   属性值 --- 自定义数值    设置图片的描边，一般不使用，后期会使用css进行设置；
注意：01.src属性是必须书写的；
      02、给图片设置宽高的时候我们一般只设置一个宽度或者高度，不能同时设置，因为我们设置一个值的话图片就会等比例缩放，要是设置两个值图片就变形；
21、超链接a（重点）概念
双标签 <a href=”文件路径”></a>
Href嗨原则性属性必须要书写，双引号里面是要跳转的目标文件；
超链接的链接方式：
外部链接（线上链接）：直接在href=“http://+要访问的网址”，注意http://必须书写；
内部链接：  直接在href=“书写html页面名称（相对路径查找）”，注意在书写内部链接的时候要书写清楚页面的路径；内部跳转的是所有的文件必须在一个项目下面；
空链接：如果不知道要链接到什么地方，我们就暂时用#代替即可；
其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等；
新窗口打开链接：target="_blank"
22、html注释
html注释：<!-- 注释内容 -->
快捷键：Ctrl+？
添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的；
23、路径
路径分为绝对路径和相对路径，相对路径又分为同级路径、下级路径、上级路径；
路径就是从文件自身（当前的html）出发去查找目标文件
同级路径：
文件（html文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称）,例如：laowang.jpg；
下级路径
文件（html文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称，例如：img/laowang.jpg
上级路径../
存放文件（html文件）的父级和存放目标文件的父级是平级关系，我们可以直接以 ../ 表示上一级去查找目标文件路径；
记忆口诀：
    同级路径：文件和目标文件是同一个父级，平级关系；
   下级路径：从文件出发往里面查找；
上级路径：从文件出发往外面查找，用 ../ 表示上一级关系；
绝对路径
绝对路径：以web站点根目录为参考基础的目录路径，其实一般分为两种情况：
01、带有盘符的路径，坚决不能使用，
•           例如：“D:\web/logo.gif”;
02、完整的网络地址，可以使用只要网络资源一直存在，
•          例如：http://www.itcast.cn
24、锚点链接
作用：实现页面内部的跳转
锚点链接的添加：
01确认要跳转的位置标签，然后在标签身上添加id=”id名称”；
02调用id名称，用超链接a进行调用，<ahref=”#id名称”>锚点按钮</a>
25、base标签
单标签，base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间；
<basetarget=“_blank”>





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2